From 2df5d55c1c8f52cee50596aed779238650b323b6 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Fri, 24 Nov 2023 10:09:59 +0800
Subject: [PATCH] feat: add instruction generation frontend interact

---
 frontend/src/App.tsx | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4c843d6..c7b27d7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,7 @@ import { useRef, useState, useCallback } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
-import { CodeGenerationParams, generateCode } from "./generateCode";
+import { CodeGenerationParams, InstructionGenerationParams, generateCode, generateInstruction } from "./generateCode";
 import Spinner from "./components/Spinner";
 import classNames from "classnames";
 import {
@@ -114,6 +114,22 @@ function App() {
     );
   }
 
+  function doGenerateInstruction(params: InstructionGenerationParams) {
+    setAppState(AppState.INSTRUCTION_GENERATING);
+
+    // Merge settings with params
+    const updatedParams = { ...params, ...settings };
+
+    generateInstruction(
+      wsRef,
+      updatedParams,
+      (token) => setUpdateInstruction((prev) => prev + token),
+      (code) => setUpdateInstruction(code),
+      (line) => setExecutionConsole((prev) => [...prev, line]),
+      () => setAppState(AppState.CODE_READY)
+    );
+  }
+
   // Initial version creation
   function doCreate(referenceImages: string[]) {
     setReferenceImages(referenceImages);
@@ -161,6 +177,15 @@ function App() {
     }));
   };
 
+  const instructionGenerate = async () => {
+    const resultImage = await takeScreenshot();
+    const originalImage = referenceImages[0];
+    doGenerateInstruction({
+      image: originalImage,
+      resultImage: resultImage,
+    });
+  }
+
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@@ -221,6 +246,12 @@ function App() {
                         onCheckedChange={setShouldIncludeResultImage}
                       />
                     </div>
+                    <Button
+                      onClick={instructionGenerate}
+                      className="flex items-center gap-x-2"
+                    >
+                      Generate Instruction
+                    </Button>
                     <Button onClick={doUpdate}>Update</Button>
                   </div>
                   <div className="flex items-center gap-x-2 mt-2">