Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add gpt count mistake number

Browse Source
This commit is contained in:
clean99 2023-11-24 11:18:44 +08:00
parent 6a06d890aa
commit a89e85ecfa
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/App.tsx
View File

@ -31,7 +31,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
import TermsOfServiceDialog from "./components/TermsOfServiceDialog"; import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants"; import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
import { handleInstructions } from "./lib/utils"; import { calculateMistakesNum, handleInstructions } from "./lib/utils";
function App() { function App() {
const [appState, setAppState] = useState<AppState>(AppState.INITIAL); const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@ -52,6 +52,7 @@ function App() {
); );
const [shouldIncludeResultImage, setShouldIncludeResultImage] = const [shouldIncludeResultImage, setShouldIncludeResultImage] =
useState<boolean>(false); useState<boolean>(false);
const [mistakesNum, setMistakesNum] = useState<number>(0);
const wsRef = useRef<WebSocket>(null); const wsRef = useRef<WebSocket>(null);
const takeScreenshot = async (): Promise<string> => { const takeScreenshot = async (): Promise<string> => {
@ -118,7 +119,7 @@ function App() {
function doGenerateInstruction(params: InstructionGenerationParams) { function doGenerateInstruction(params: InstructionGenerationParams) {
setAppState(AppState.INSTRUCTION_GENERATING); setAppState(AppState.INSTRUCTION_GENERATING);
setUpdateInstruction(""); setUpdateInstruction("");
setMistakesNum(0);
// Merge settings with params // Merge settings with params
const updatedParams = { ...params, ...settings }; const updatedParams = { ...params, ...settings };
@ -129,8 +130,13 @@ function App() {
(code) => setUpdateInstruction(code), (code) => setUpdateInstruction(code),
(line) => setExecutionConsole((prev) => [...prev, line]), (line) => setExecutionConsole((prev) => [...prev, line]),
() => { () => {
setUpdateInstruction(instruction => handleInstructions(instruction));
setAppState(AppState.CODE_READY); setAppState(AppState.CODE_READY);
setUpdateInstruction(instruction => {
setMistakesNum(calculateMistakesNum(instruction));
handleInstructions(instruction);
return instruction;
});
} }
); );
} }
@ -243,6 +249,7 @@ function App() {
onChange={(e) => setUpdateInstruction(e.target.value)} onChange={(e) => setUpdateInstruction(e.target.value)}
value={updateInstruction} value={updateInstruction}
disabled={appState === AppState.INSTRUCTION_GENERATING} disabled={appState === AppState.INSTRUCTION_GENERATING}
/> />
<div className="flex justify-between items-center gap-x-2"> <div className="flex justify-between items-center gap-x-2">
<div className="font-500 text-xs text-slate-700"> <div className="font-500 text-xs text-slate-700">
@ -284,7 +291,7 @@ function App() {
{/* Reference image display */} {/* Reference image display */}
<div className="flex gap-x-2 mt-2"> <div className="flex gap-x-2 mt-2">
<div className="flex flex-col"> <div className="flex flex-col items-center">
<div <div
className={classNames({ className={classNames({
"scanning relative": appState === AppState.CODING, "scanning relative": appState === AppState.CODING,
@ -299,6 +306,9 @@ function App() {
<div className="text-gray-400 uppercase text-sm text-center mt-1"> <div className="text-gray-400 uppercase text-sm text-center mt-1">
Original Screenshot Original Screenshot
</div> </div>
<div className="flex flex-col mt-4 text-sm">
Total Mistakes Found:{" "} {mistakesNum}
</div>
</div> </div>
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden"> <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800"> <h2 className="text-lg mb-4 border-b border-gray-800">

2
frontend/src/lib/utils.ts
View File

@ -10,3 +10,5 @@ export const handleInstructions = (instructions: string): string =>
(JSON.parse(instructions) || []).map((line: Instruction) => (JSON.parse(instructions) || []).map((line: Instruction) =>
`- ${line.element} in the ${line.location} has a mistake: ${line.mistake}, please update: ${line.improvement}.`).join("\n\n"); `- ${line.element} in the ${line.location} has a mistake: ${line.mistake}, please update: ${line.improvement}.`).join("\n\n");
export const calculateMistakesNum = (instructions: string): number =>
(JSON.parse(instructions) || []).length;