feat: add instruction generation interface and type

frontend/src/generateCode.ts

@@ -15,6 +15,11 @@ export interface CodeGenerationParams {
   // isImageGenerationEnabled: boolean; // TODO: Merge with Settings type in types.ts
 }
 
+export interface InstructionGenerationParams {
+  image: string;
+  resultImage?: string;
+}
+
 export function generateCode(
   wsRef: React.MutableRefObject<WebSocket | null>,
   params: CodeGenerationParams,
@@ -62,3 +67,52 @@ export function generateCode(
     toast.error(ERROR_MESSAGE);
   });
 }
+
+
+export function generateInstruction(
+  wsRef: React.MutableRefObject<WebSocket | null>,
+  params: InstructionGenerationParams,
+  onChange: (chunk: string) => void,
+  onSetInstruction: (code: string) => void,
+  onStatusUpdate: (status: string) => void,
+  onComplete: () => void
+) {
+  const wsUrl = `${WS_BACKEND_URL}/generate-instruction`;
+  console.log("Connecting to backend @ ", wsUrl);
+
+  const ws = new WebSocket(wsUrl);
+  wsRef.current = ws;
+
+  ws.addEventListener("open", () => {
+    ws.send(JSON.stringify(params));
+  });
+
+  ws.addEventListener("message", async (event: MessageEvent) => {
+    const response = JSON.parse(event.data);
+    if (response.type === "chunk") {
+      onChange(response.value);
+    } else if (response.type === "status") {
+      onStatusUpdate(response.value);
+    } else if (response.type === "setInstruction") {
+      onSetInstruction(response.value);
+    } else if (response.type === "error") {
+      console.error("Error generating code", response.value);
+      toast.error(response.value);
+    }
+  });
+  ws.addEventListener("close", (event) => {
+    console.log("Connection closed", event.code, event.reason);
+    if (event.code === USER_CLOSE_WEB_SOCKET_CODE) {
+      toast.success(STOP_MESSAGE);
+    } else if (event.code !== 1000) {
+      console.error("WebSocket error code", event);
+      toast.error(ERROR_MESSAGE);
+    }
+    onComplete();
+  });
+
+  ws.addEventListener("error", (error) => {
+    console.error("WebSocket error", error);
+    toast.error(ERROR_MESSAGE);
+  });
+}

frontend/src/types.ts

@@ -15,4 +15,5 @@ export enum AppState {
   INITIAL = "INITIAL",
   CODING = "CODING",
   CODE_READY = "CODE_READY",
+  INSTRUCTION_GENERATING = "INSTRUCTION_GENERATING",
 }