add a console to show progress

backend/main.py

@@ -34,6 +34,8 @@ async def stream_code_test(websocket: WebSocket):
 
     params = await websocket.receive_json()
 
+    await websocket.send_json({"type": "status", "value": "Generating code..."})
+
     async def process_chunk(content):
         await websocket.send_json({"type": "chunk", "value": content})
 
@@ -47,4 +49,6 @@ async def stream_code_test(websocket: WebSocket):
     # Write the messages dict into a log so that we can debug later
     write_logs(prompt_messages, completion)
 
+    await websocket.send_json({"type": "status", "value": "Code generation complete."})
+
     await websocket.close()

frontend/src/App.tsx

@@ -10,6 +10,7 @@ function App() {
   );
   const [generatedCode, setGeneratedCode] = useState<string>("");
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
+  const [console, setConsole] = useState<string[]>([]);
   const [blobUrl, setBlobUrl] = useState("");
 
   const createBlobUrl = () => {
@@ -26,6 +27,9 @@ function App() {
       function (token) {
         setGeneratedCode((prev) => prev + token);
       },
+      function (line) {
+        setConsole((prev) => [...prev, line]);
+      },
       function () {
         setAppState("CODE_READY");
       }
@@ -44,7 +48,24 @@ function App() {
 
       {(appState === "CODING" || appState === "CODE_READY") && (
         <>
-          <img className="w-[300px]" src={referenceImages[0]} alt="Reference" />
+          <div className="flex gap-x-2 justify-around">
+            <img
+              className="w-[300px]"
+              src={referenceImages[0]}
+              alt="Reference"
+            />
+            <div className="bg-gray-200 px-4 py-2 rounded text-sm font-mono">
+              <h2 className="text-lg mb-4 border-b border-gray-800">Console</h2>
+              {console.map((line, index) => (
+                <div
+                  key={index}
+                  className="border-b border-gray-400 mb-2 text-gray-600"
+                >
+                  {line}
+                </div>
+              ))}
+            </div>
+          </div>
           {/* Show code preview only when coding */}
           {appState === "CODING" && <CodePreview code={generatedCode} />}
           {appState === "CODE_READY" && (

frontend/src/generateCode.ts

@@ -7,6 +7,7 @@ const ERROR_MESSAGE =
 export function generateCode(
   imageUrl: string,
   onChange: (chunk: string) => void,
+  onStatusUpdate: (status: string) => void,
   onComplete: () => void
 ) {
   const wsUrl = `${WS_BACKEND_URL}/generate-code`;
@@ -26,6 +27,8 @@ export function generateCode(
     const response = JSON.parse(event.data);
     if (response.type === "chunk") {
       onChange(response.value);
+    } else if (response.type === "status") {
+      onStatusUpdate(response.value);
     }
   });