From 8be1b42fb489420c59a03068917d193a05ff1b1a Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 17:43:51 -0500
Subject: [PATCH] add a console to show progress

---
 backend/main.py              |  4 ++++
 frontend/src/App.tsx         | 23 ++++++++++++++++++++++-
 frontend/src/generateCode.ts |  3 +++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/backend/main.py b/backend/main.py
index 60c953f..7d30ebc 100644
--- a/backend/main.py
+++ b/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()
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b9fc242..12dbc8c 100644
--- a/frontend/src/App.tsx
+++ b/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" && (
diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts
index ddfe5e2..8d4ef4a 100644
--- a/frontend/src/generateCode.ts
+++ b/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);
     }
   });