From 2b3b3f4d4429c7e4bdf48dbb098391c9a484cb9d Mon Sep 17 00:00:00 2001
From: samya123456 <samya.nandy@gmail.com>
Date: Mon, 20 Nov 2023 18:31:00 +0530
Subject: [PATCH 01/21] adding some git ignore

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 39aee32..1ea457d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,6 @@
 
 # Run logs
 backend/run_logs/*
-
+backend/backend/*
+frontend/.env.local
 .env
\ No newline at end of file

From 9dfdc8683d114d09d69b84ae5b9a8e823ce0bd0e Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 09:23:07 +0800
Subject: [PATCH 02/21] fix: prevent flashing when updating code

---
 frontend/src/components/Preview.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index de0134f..3a603ff 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import classNames from "classnames";
 import useThrottle from "../hooks/useThrottle";
 
@@ -8,12 +9,22 @@ interface Props {
 
 function Preview({ code, device }: Props) {
   const throttledCode = useThrottle(code, 200);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe && iframe.contentDocument) {
+      iframe.contentDocument.open();
+      iframe.contentDocument.write(throttledCode);
+      iframe.contentDocument.close();
+    }
+  }, [throttledCode]);
 
   return (
     <div className="flex justify-center mx-2">
       <iframe
+        ref={iframeRef}
         title="Preview"
-        srcDoc={throttledCode}
         className={classNames(
           "border-[4px] border-black rounded-[20px] shadow-lg",
           "transform scale-[0.9] origin-top",
@@ -26,4 +37,5 @@ function Preview({ code, device }: Props) {
     </div>
   );
 }
-export default Preview;
+
+export default Preview;
\ No newline at end of file

From 30ab9e384a7f5825b4c3a3a84fec8a7bbf55d98a Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 09:40:00 +0800
Subject: [PATCH 03/21] feat: support edit code

---
 frontend/src/App.tsx                   | 1 +
 frontend/src/components/CodeMirror.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c2ec3fe..949582c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -246,6 +246,7 @@ function App() {
                 <CodeMirror
                   code={generatedCode}
                   editorTheme={settings.editorTheme}
+                  onCodeChange={setGeneratedCode}
                 />
               </TabsContent>
             </Tabs>
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 21008bc..0c268a5 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -15,9 +15,10 @@ import { html } from "@codemirror/lang-html";
 interface Props {
   code: string;
   editorTheme: string;
+  onCodeChange: (code: string) => void;
 }
 
-function CodeMirror({ code, editorTheme }: Props) {
+function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
 
@@ -42,6 +43,11 @@ function CodeMirror({ code, editorTheme }: Props) {
           html(),
           selectedTheme,
           EditorView.lineWrapping,
+          EditorView.updateListener.of(update => {
+            if (update.changes) {
+              onCodeChange(view.current?.state.doc.toString() || "");
+            }
+          }),
         ],
       }),
       parent: ref.current as Element,
@@ -69,3 +75,4 @@ function CodeMirror({ code, editorTheme }: Props) {
 }
 
 export default CodeMirror;
+

From d10c793a600886c213e5f0b024fb42507fab4bae Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:33:33 +0800
Subject: [PATCH 04/21] fix: cursor didnt focus on right position

---
 frontend/src/App.tsx                       |  5 +-
 frontend/src/components/CodeMirror.tsx     | 59 ++++++++++------------
 frontend/src/components/SettingsDialog.tsx |  6 +--
 frontend/src/types.ts                      |  7 ++-
 4 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 949582c..fea0fb1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { Settings } from "./types";
+import { Settings, EditorTheme } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -34,12 +34,13 @@ function App() {
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [history, setHistory] = useState<string[]>([]);
+  console.log('history', history)
   const [settings, setSettings] = usePersistedState<Settings>(
     {
       openAiApiKey: null,
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
-      editorTheme: "cobalt",
+      editorTheme: EditorTheme.COBALT,
     },
     "setting"
   );
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 0c268a5..36093ee 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
 import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view";
 import { espresso, cobalt } from "thememirror";
 import {
   defaultKeymap,
@@ -11,45 +11,42 @@ import {
 } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
 import { html } from "@codemirror/lang-html";
+import { EditorTheme } from "@/types";
 
 interface Props {
   code: string;
-  editorTheme: string;
+  editorTheme: EditorTheme;
   onCodeChange: (code: string) => void;
 }
 
 function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
-
-  useEffect(() => {
-    let selectedTheme = cobalt;
-    if (editorTheme === "espresso") {
-      selectedTheme = espresso;
-    }
-    view.current = new EditorView({
-      state: EditorState.create({
-        doc: code,
-        extensions: [
-          history(),
-          keymap.of([
-            ...defaultKeymap,
-            indentWithTab,
-            { key: "Mod-z", run: undo, preventDefault: true },
-            { key: "Mod-Shift-z", run: redo, preventDefault: true },
-          ]),
-          lineNumbers(),
-          bracketMatching(),
-          html(),
-          selectedTheme,
-          EditorView.lineWrapping,
-          EditorView.updateListener.of(update => {
-            if (update.changes) {
-              onCodeChange(view.current?.state.doc.toString() || "");
-            }
-          }),
-        ],
+  const editorState = EditorState.create({
+    extensions: [
+      history(),
+      keymap.of([
+        ...defaultKeymap,
+        indentWithTab,
+        { key: "Mod-z", run: undo, preventDefault: true },
+        { key: "Mod-Shift-z", run: redo, preventDefault: true },
+      ]),
+      lineNumbers(),
+      bracketMatching(),
+      html(),
+      editorTheme === EditorTheme.ESPRESSO ? espresso : cobalt,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update: ViewUpdate) => {
+        if (update.docChanged) {
+          const updatedCode = update.state.doc.toString();
+          onCodeChange(updatedCode);
+        }
       }),
+    ],
+  });
+  useEffect(() => {
+    view.current = new EditorView({
+      state: editorState,
       parent: ref.current as Element,
     });
 
@@ -59,7 +56,7 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
         view.current = null;
       }
     };
-  }, [code, editorTheme]);
+  }, []);
 
   useEffect(() => {
     if (view.current && view.current.state.doc.toString() !== code) {
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index f7004d3..121c17c 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -9,7 +9,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { FaCog } from "react-icons/fa";
-import { Settings } from "../types";
+import { EditorTheme, Settings } from "../types";
 import { Switch } from "./ui/switch";
 import { Label } from "./ui/label";
 import { Input } from "./ui/input";
@@ -21,7 +21,7 @@ interface Props {
 }
 
 function SettingsDialog({ settings, setSettings }: Props) {
-  const handleThemeChange = (theme: string) => {
+  const handleThemeChange = (theme: EditorTheme) => {
     setSettings((s) => ({
       ...s,
       editorTheme: theme,
@@ -110,7 +110,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
               id="editor-theme"
               value={settings.editorTheme}
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                handleThemeChange(e.target.value)
+                handleThemeChange(e.target.value as EditorTheme)
               }
             >
               <option value="cobalt">Cobalt</option>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 6f44e9f..04da945 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,6 +1,11 @@
+export enum EditorTheme {
+  ESPRESSO = "espresso",
+  COBALT = "cobalt",
+}
+
 export interface Settings {
   openAiApiKey: string | null;
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
-  editorTheme: string;
+  editorTheme: EditorTheme;
 }

From f5804ad443ae1e0907b41b38c98f884c3214cf2d Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:35:42 +0800
Subject: [PATCH 05/21] fix: remove console

---
 frontend/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fea0fb1..44883ff 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -34,7 +34,6 @@ function App() {
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [history, setHistory] = useState<string[]>([]);
-  console.log('history', history)
   const [settings, setSettings] = usePersistedState<Settings>(
     {
       openAiApiKey: null,

From d9a4abcbf133dfc90501040082c2867e582921d2 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:40:20 +0800
Subject: [PATCH 06/21] feat: use memo to reduce editor state update

---
 frontend/src/components/CodeMirror.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 36093ee..1459dac 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo } from "react";
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view";
 import { espresso, cobalt } from "thememirror";
@@ -22,7 +22,7 @@ interface Props {
 function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
-  const editorState = EditorState.create({
+  const editorState = useMemo(() => EditorState.create({
     extensions: [
       history(),
       keymap.of([
@@ -43,7 +43,7 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
         }
       }),
     ],
-  });
+  }), [editorTheme]);
   useEffect(() => {
     view.current = new EditorView({
       state: editorState,

From 2f1745a0b51ca53403000f6a2fb339c27318556a Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 15:54:01 +0800
Subject: [PATCH 07/21] feat: refactor app status type

---
 frontend/src/App.tsx  | 26 +++++++++++++-------------
 frontend/src/types.ts |  6 ++++++
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c2ec3fe..bb71064 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { Settings } from "./types";
+import { AppStatus, Settings } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -26,8 +26,8 @@ import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 
 function App() {
-  const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
-    "INITIAL"
+  const [appState, setAppState] = useState<AppStatus>(
+    AppStatus.INITIAL
   );
   const [generatedCode, setGeneratedCode] = useState<string>("");
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
@@ -62,7 +62,7 @@ function App() {
   };
 
   const reset = () => {
-    setAppState("INITIAL");
+    setAppState(AppStatus.INITIAL);
     setGeneratedCode("");
     setReferenceImages([]);
     setExecutionConsole([]);
@@ -71,7 +71,7 @@ function App() {
 
   function doGenerateCode(params: CodeGenerationParams) {
     setExecutionConsole([]);
-    setAppState("CODING");
+    setAppState(AppStatus.CODING);
 
     // Merge settings with params
     const updatedParams = { ...params, ...settings };
@@ -81,7 +81,7 @@ function App() {
       (token) => setGeneratedCode((prev) => prev + token),
       (code) => setGeneratedCode(code),
       (line) => setExecutionConsole((prev) => [...prev, line]),
-      () => setAppState("CODE_READY")
+      () => setAppState(AppStatus.CODE_READY)
     );
   }
 
@@ -122,7 +122,7 @@ function App() {
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
           </div>
-          {appState === "INITIAL" && (
+          {appState === AppStatus.INITIAL && (
             <h2 className="text-sm text-gray-500 mb-2">
               Drag & drop a screenshot to get started.
             </h2>
@@ -130,10 +130,10 @@ function App() {
 
           {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
 
-          {(appState === "CODING" || appState === "CODE_READY") && (
+          {(appState === AppStatus.CODING || appState === AppStatus.CODE_READY) && (
             <>
               {/* Show code preview only when coding */}
-              {appState === "CODING" && (
+              {appState === AppStatus.CODING && (
                 <div className="flex flex-col">
                   <div className="flex items-center gap-x-1">
                     <Spinner />
@@ -143,7 +143,7 @@ function App() {
                 </div>
               )}
 
-              {appState === "CODE_READY" && (
+              {appState === AppStatus.CODE_READY && (
                 <div>
                   <div className="grid w-full gap-2">
                     <Textarea
@@ -176,7 +176,7 @@ function App() {
                 <div className="flex flex-col">
                   <div
                     className={classNames({
-                      "scanning relative": appState === "CODING",
+                      "scanning relative": appState === AppStatus.CODING,
                     })}
                   >
                     <img
@@ -209,7 +209,7 @@ function App() {
       </div>
 
       <main className="py-2 lg:pl-96">
-        {appState === "INITIAL" && (
+        {appState === AppStatus.INITIAL && (
           <div className="flex flex-col justify-center items-center gap-y-10">
             <ImageUpload setReferenceImages={doCreate} />
             <UrlInputSection
@@ -219,7 +219,7 @@ function App() {
           </div>
         )}
 
-        {(appState === "CODING" || appState === "CODE_READY") && (
+        {(appState === AppStatus.CODING || appState === AppStatus.CODE_READY) && (
           <div className="ml-4">
             <Tabs defaultValue="desktop">
               <div className="flex justify-end mr-8 mb-4">
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 6f44e9f..10131c0 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -4,3 +4,9 @@ export interface Settings {
   isImageGenerationEnabled: boolean;
   editorTheme: string;
 }
+
+export enum AppStatus {
+  INITIAL = "INITIAL",
+  CODING = "CODING",
+  CODE_READY = "CODE_READY",
+}
\ No newline at end of file

From 2a52095ce9e0acccab6acd4fd0b5d57f92609591 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 16:18:32 +0800
Subject: [PATCH 08/21] feat: add client close button

---
 frontend/src/App.tsx         | 18 ++++++++++++++++--
 frontend/src/generateCode.ts | 15 +++++++++++----
 frontend/src/types.ts        |  4 +++-
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bb71064..6bb0c80 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
@@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { AppStatus, Settings } from "./types";
+import { AppStatus, Settings, USER_CLOSE_WEB_SOCKET_CODE } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -43,6 +43,7 @@ function App() {
     },
     "setting"
   );
+  const wsRef = useRef<WebSocket>(null);
 
   const downloadCode = () => {
     // Create a blob from the generated code
@@ -69,6 +70,10 @@ function App() {
     setHistory([]);
   };
 
+  const stop = () => {
+    wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE);
+  }
+
   function doGenerateCode(params: CodeGenerationParams) {
     setExecutionConsole([]);
     setAppState(AppStatus.CODING);
@@ -77,6 +82,7 @@ function App() {
     const updatedParams = { ...params, ...settings };
 
     generateCode(
+      wsRef,
       updatedParams,
       (token) => setGeneratedCode((prev) => prev + token),
       (code) => setGeneratedCode(code),
@@ -139,6 +145,14 @@ function App() {
                     <Spinner />
                     {executionConsole.slice(-1)[0]}
                   </div>
+                  <div className="flex mt-4 w-full">
+                    <Button
+                      onClick={stop}
+                      className="w-full"
+                    >
+                      Stop
+                    </Button>
+                  </div>
                   <CodePreview code={generatedCode} />
                 </div>
               )}
diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts
index 6fea92d..2083958 100644
--- a/frontend/src/generateCode.ts
+++ b/frontend/src/generateCode.ts
@@ -1,9 +1,12 @@
 import toast from "react-hot-toast";
 import { WS_BACKEND_URL } from "./config";
+import { USER_CLOSE_WEB_SOCKET_CODE } from "./types";
 
 const ERROR_MESSAGE =
   "Error generating code. Check the Developer Console for details. Feel free to open a Github issue";
 
+const STOP_MESSAGE = "Code generation stopped";
+
 export interface CodeGenerationParams {
   generationType: "create" | "update";
   image: string;
@@ -12,6 +15,7 @@ export interface CodeGenerationParams {
 }
 
 export function generateCode(
+  wsRef: React.MutableRefObject<WebSocket | null>,
   params: CodeGenerationParams,
   onChange: (chunk: string) => void,
   onSetCode: (code: string) => void,
@@ -22,6 +26,7 @@ export function generateCode(
   console.log("Connecting to backend @ ", wsUrl);
 
   const ws = new WebSocket(wsUrl);
+  wsRef.current = ws;
 
   ws.addEventListener("open", () => {
     ws.send(JSON.stringify(params));
@@ -40,14 +45,16 @@ export function generateCode(
       toast.error(response.value);
     }
   });
-
   ws.addEventListener("close", (event) => {
     console.log("Connection closed", event.code, event.reason);
-    if (event.code != 1000) {
+    if (event.code === USER_CLOSE_WEB_SOCKET_CODE) {
+      toast.success(STOP_MESSAGE);
+      onComplete();
+    } else if (event.code === 1000) {
+      onComplete();
+    } else {
       console.error("WebSocket error code", event);
       toast.error(ERROR_MESSAGE);
-    } else {
-      onComplete();
     }
   });
 
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 10131c0..8797195 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -9,4 +9,6 @@ export enum AppStatus {
   INITIAL = "INITIAL",
   CODING = "CODING",
   CODE_READY = "CODE_READY",
-}
\ No newline at end of file
+}
+
+export const USER_CLOSE_WEB_SOCKET_CODE = 4333;
\ No newline at end of file

From e895dd4668cfd008afd0410b2c1199ec73d02da9 Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Tue, 21 Nov 2023 16:44:05 +0800
Subject: [PATCH 09/21] feat: add copy code button

---
 frontend/package.json |  1 +
 frontend/src/App.tsx  | 23 ++++++++++++++++++-----
 frontend/yarn.lock    | 12 ++++++++++++
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 7a34ab2..912d0b7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
+    "copy-to-clipboard": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c2ec3fe..cc0d1cb 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
@@ -7,11 +7,13 @@ import Spinner from "./components/Spinner";
 import classNames from "classnames";
 import {
   FaCode,
+  FaCopy,
   FaDesktop,
   FaDownload,
   FaMobile,
   FaUndo,
 } from "react-icons/fa";
+import copy from 'copy-to-clipboard';
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
@@ -111,6 +113,10 @@ function App() {
     setUpdateInstruction("");
   }
 
+  const handleCopyCode = useCallback(() => {
+    copy(generatedCode);
+  }, [generatedCode]);
+
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@@ -243,10 +249,17 @@ function App() {
                 <Preview code={generatedCode} device="mobile" />
               </TabsContent>
               <TabsContent value="code">
-                <CodeMirror
-                  code={generatedCode}
-                  editorTheme={settings.editorTheme}
-                />
+                <div className="relative">
+                  <CodeMirror
+                    code={generatedCode}
+                    editorTheme={settings.editorTheme}
+                  />
+                  <span
+                    title="Copy Code"
+                    className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]" onClick={handleCopyCode}>
+                    <FaCopy />
+                  </span>
+                </div>
               </TabsContent>
             </Tabs>
           </div>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2109c60..7e7efc4 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1258,6 +1258,13 @@ convert-source-map@^2.0.0:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 crelt@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
@@ -2420,6 +2427,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 ts-api-utils@^1.0.1:
   version "1.0.3"
   resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz"

From 49ce6dcc88a79cf50c19d5d8d1bdf80ae8d745fd Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 10:52:33 -0500
Subject: [PATCH 10/21] rename method

---
 backend/main.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/main.py b/backend/main.py
index 4eb09fa..72b4dd7 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -59,7 +59,7 @@ def write_logs(prompt_messages, completion):
 
 
 @app.websocket("/generate-code")
-async def stream_code_test(websocket: WebSocket):
+async def stream_code(websocket: WebSocket):
     await websocket.accept()
 
     params = await websocket.receive_json()

From 2303ed6d0552acf2d748b58c04e741a1804da5e8 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 10:56:17 -0500
Subject: [PATCH 11/21] add success toast after copying code

---
 frontend/src/App.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cc0d1cb..2b962e6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,7 +13,7 @@ import {
   FaMobile,
   FaUndo,
 } from "react-icons/fa";
-import copy from 'copy-to-clipboard';
+import copy from "copy-to-clipboard";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
@@ -26,6 +26,7 @@ import { OnboardingNote } from "./components/OnboardingNote";
 import { usePersistedState } from "./hooks/usePersistedState";
 import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
+import toast from "react-hot-toast";
 
 function App() {
   const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
@@ -113,8 +114,9 @@ function App() {
     setUpdateInstruction("");
   }
 
-  const handleCopyCode = useCallback(() => {
+  const doCopyCode = useCallback(() => {
     copy(generatedCode);
+    toast.success("Copied to clipboard");
   }, [generatedCode]);
 
   return (
@@ -256,7 +258,9 @@ function App() {
                   />
                   <span
                     title="Copy Code"
-                    className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]" onClick={handleCopyCode}>
+                    className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]"
+                    onClick={doCopyCode}
+                  >
                     <FaCopy />
                   </span>
                 </div>

From 193e070b0aecdbc0dd63a18f7a1dbeacf438aa4f Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 11:00:48 -0500
Subject: [PATCH 12/21] update type name

---
 frontend/src/App.tsx  | 34 +++++++++++++++-------------------
 frontend/src/types.ts |  4 ++--
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6bb0c80..64c2f7f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { AppStatus, Settings, USER_CLOSE_WEB_SOCKET_CODE } from "./types";
+import { AppState, Settings, USER_CLOSE_WEB_SOCKET_CODE } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -26,9 +26,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 
 function App() {
-  const [appState, setAppState] = useState<AppStatus>(
-    AppStatus.INITIAL
-  );
+  const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
   const [generatedCode, setGeneratedCode] = useState<string>("");
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
@@ -63,7 +61,7 @@ function App() {
   };
 
   const reset = () => {
-    setAppState(AppStatus.INITIAL);
+    setAppState(AppState.INITIAL);
     setGeneratedCode("");
     setReferenceImages([]);
     setExecutionConsole([]);
@@ -72,11 +70,11 @@ function App() {
 
   const stop = () => {
     wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE);
-  }
+  };
 
   function doGenerateCode(params: CodeGenerationParams) {
     setExecutionConsole([]);
-    setAppState(AppStatus.CODING);
+    setAppState(AppState.CODING);
 
     // Merge settings with params
     const updatedParams = { ...params, ...settings };
@@ -87,7 +85,7 @@ function App() {
       (token) => setGeneratedCode((prev) => prev + token),
       (code) => setGeneratedCode(code),
       (line) => setExecutionConsole((prev) => [...prev, line]),
-      () => setAppState(AppStatus.CODE_READY)
+      () => setAppState(AppState.CODE_READY)
     );
   }
 
@@ -128,7 +126,7 @@ function App() {
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
           </div>
-          {appState === AppStatus.INITIAL && (
+          {appState === AppState.INITIAL && (
             <h2 className="text-sm text-gray-500 mb-2">
               Drag & drop a screenshot to get started.
             </h2>
@@ -136,20 +134,18 @@ function App() {
 
           {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
 
-          {(appState === AppStatus.CODING || appState === AppStatus.CODE_READY) && (
+          {(appState === AppState.CODING ||
+            appState === AppState.CODE_READY) && (
             <>
               {/* Show code preview only when coding */}
-              {appState === AppStatus.CODING && (
+              {appState === AppState.CODING && (
                 <div className="flex flex-col">
                   <div className="flex items-center gap-x-1">
                     <Spinner />
                     {executionConsole.slice(-1)[0]}
                   </div>
                   <div className="flex mt-4 w-full">
-                    <Button
-                      onClick={stop}
-                      className="w-full"
-                    >
+                    <Button onClick={stop} className="w-full">
                       Stop
                     </Button>
                   </div>
@@ -157,7 +153,7 @@ function App() {
                 </div>
               )}
 
-              {appState === AppStatus.CODE_READY && (
+              {appState === AppState.CODE_READY && (
                 <div>
                   <div className="grid w-full gap-2">
                     <Textarea
@@ -190,7 +186,7 @@ function App() {
                 <div className="flex flex-col">
                   <div
                     className={classNames({
-                      "scanning relative": appState === AppStatus.CODING,
+                      "scanning relative": appState === AppState.CODING,
                     })}
                   >
                     <img
@@ -223,7 +219,7 @@ function App() {
       </div>
 
       <main className="py-2 lg:pl-96">
-        {appState === AppStatus.INITIAL && (
+        {appState === AppState.INITIAL && (
           <div className="flex flex-col justify-center items-center gap-y-10">
             <ImageUpload setReferenceImages={doCreate} />
             <UrlInputSection
@@ -233,7 +229,7 @@ function App() {
           </div>
         )}
 
-        {(appState === AppStatus.CODING || appState === AppStatus.CODE_READY) && (
+        {(appState === AppState.CODING || appState === AppState.CODE_READY) && (
           <div className="ml-4">
             <Tabs defaultValue="desktop">
               <div className="flex justify-end mr-8 mb-4">
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 8797195..eec6ce1 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -5,10 +5,10 @@ export interface Settings {
   editorTheme: string;
 }
 
-export enum AppStatus {
+export enum AppState {
   INITIAL = "INITIAL",
   CODING = "CODING",
   CODE_READY = "CODE_READY",
 }
 
-export const USER_CLOSE_WEB_SOCKET_CODE = 4333;
\ No newline at end of file
+export const USER_CLOSE_WEB_SOCKET_CODE = 4333;

From d741df41f639d089db81620ea359b19268aa70ad Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 11:04:51 -0500
Subject: [PATCH 13/21] move constant to constants file

---
 frontend/src/App.tsx         | 3 ++-
 frontend/src/constants.ts    | 1 +
 frontend/src/generateCode.ts | 2 +-
 frontend/src/types.ts        | 2 --
 4 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/constants.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 64c2f7f..23a5cdd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,13 +17,14 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { AppState, Settings, USER_CLOSE_WEB_SOCKET_CODE } from "./types";
+import { AppState, Settings } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
 import { usePersistedState } from "./hooks/usePersistedState";
 import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
+import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
new file mode 100644
index 0000000..a5da189
--- /dev/null
+++ b/frontend/src/constants.ts
@@ -0,0 +1 @@
+export const USER_CLOSE_WEB_SOCKET_CODE = 4333;
diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts
index 2083958..2ad578f 100644
--- a/frontend/src/generateCode.ts
+++ b/frontend/src/generateCode.ts
@@ -1,6 +1,6 @@
 import toast from "react-hot-toast";
 import { WS_BACKEND_URL } from "./config";
-import { USER_CLOSE_WEB_SOCKET_CODE } from "./types";
+import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
 
 const ERROR_MESSAGE =
   "Error generating code. Check the Developer Console for details. Feel free to open a Github issue";
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index eec6ce1..83f578e 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -10,5 +10,3 @@ export enum AppState {
   CODING = "CODING",
   CODE_READY = "CODE_READY",
 }
-
-export const USER_CLOSE_WEB_SOCKET_CODE = 4333;

From f66631425dce5a732666de68752173ad31cd034c Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 11:08:51 -0500
Subject: [PATCH 14/21] show reset button when code generation fails

---
 frontend/src/generateCode.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts
index 2ad578f..7f0c0b6 100644
--- a/frontend/src/generateCode.ts
+++ b/frontend/src/generateCode.ts
@@ -55,6 +55,7 @@ export function generateCode(
     } else {
       console.error("WebSocket error code", event);
       toast.error(ERROR_MESSAGE);
+      onComplete();
     }
   });
 

From 514eceaf726818ab8722b9123116f11283a05eb1 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 11:10:50 -0500
Subject: [PATCH 15/21] comment more

---
 .gitignore | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 1ea457d..7b377b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,13 @@
 .aider*
 
+# Project-related files
+
 # Run logs
 backend/run_logs/*
+
+# Weird Docker setup related files
 backend/backend/*
+
+# Env vars
 frontend/.env.local
-.env
\ No newline at end of file
+.env

From dfcc25c2d1fb55791719b5728a755574c460bce5 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 11:19:11 -0500
Subject: [PATCH 16/21] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 97bc183..81cc82a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # screenshot-to-code
 
-This simple app converts a screenshot to HTML/Tailwind CSS. It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images.
+This simple app converts a screenshot to HTML/Tailwind CSS. It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website!
 
 https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045
 

From 98ad914b41bbf5674a46934f70c45868ded764d2 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 09:23:07 +0800
Subject: [PATCH 17/21] fix: prevent flashing when updating code

---
 frontend/src/components/Preview.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index de0134f..3a603ff 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import classNames from "classnames";
 import useThrottle from "../hooks/useThrottle";
 
@@ -8,12 +9,22 @@ interface Props {
 
 function Preview({ code, device }: Props) {
   const throttledCode = useThrottle(code, 200);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe && iframe.contentDocument) {
+      iframe.contentDocument.open();
+      iframe.contentDocument.write(throttledCode);
+      iframe.contentDocument.close();
+    }
+  }, [throttledCode]);
 
   return (
     <div className="flex justify-center mx-2">
       <iframe
+        ref={iframeRef}
         title="Preview"
-        srcDoc={throttledCode}
         className={classNames(
           "border-[4px] border-black rounded-[20px] shadow-lg",
           "transform scale-[0.9] origin-top",
@@ -26,4 +37,5 @@ function Preview({ code, device }: Props) {
     </div>
   );
 }
-export default Preview;
+
+export default Preview;
\ No newline at end of file

From 6afb1a7c17f644c81e3d7a6b78a83c3e2324eb47 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 09:40:00 +0800
Subject: [PATCH 18/21] feat: support edit code

---
 frontend/src/App.tsx                   | 1 +
 frontend/src/components/CodeMirror.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c2ec3fe..949582c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -246,6 +246,7 @@ function App() {
                 <CodeMirror
                   code={generatedCode}
                   editorTheme={settings.editorTheme}
+                  onCodeChange={setGeneratedCode}
                 />
               </TabsContent>
             </Tabs>
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 21008bc..0c268a5 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -15,9 +15,10 @@ import { html } from "@codemirror/lang-html";
 interface Props {
   code: string;
   editorTheme: string;
+  onCodeChange: (code: string) => void;
 }
 
-function CodeMirror({ code, editorTheme }: Props) {
+function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
 
@@ -42,6 +43,11 @@ function CodeMirror({ code, editorTheme }: Props) {
           html(),
           selectedTheme,
           EditorView.lineWrapping,
+          EditorView.updateListener.of(update => {
+            if (update.changes) {
+              onCodeChange(view.current?.state.doc.toString() || "");
+            }
+          }),
         ],
       }),
       parent: ref.current as Element,
@@ -69,3 +75,4 @@ function CodeMirror({ code, editorTheme }: Props) {
 }
 
 export default CodeMirror;
+

From 370c1b9cf04e3c66cf52bb01bf07aa3c8f131077 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:33:33 +0800
Subject: [PATCH 19/21] fix: cursor didnt focus on right position

---
 frontend/src/App.tsx                       |  5 +-
 frontend/src/components/CodeMirror.tsx     | 59 ++++++++++------------
 frontend/src/components/SettingsDialog.tsx |  6 +--
 frontend/src/types.ts                      |  7 ++-
 4 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 949582c..fea0fb1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,7 +17,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
-import { Settings } from "./types";
+import { Settings, EditorTheme } from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -34,12 +34,13 @@ function App() {
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [history, setHistory] = useState<string[]>([]);
+  console.log('history', history)
   const [settings, setSettings] = usePersistedState<Settings>(
     {
       openAiApiKey: null,
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
-      editorTheme: "cobalt",
+      editorTheme: EditorTheme.COBALT,
     },
     "setting"
   );
diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 0c268a5..36093ee 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
 import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view";
 import { espresso, cobalt } from "thememirror";
 import {
   defaultKeymap,
@@ -11,45 +11,42 @@ import {
 } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/language";
 import { html } from "@codemirror/lang-html";
+import { EditorTheme } from "@/types";
 
 interface Props {
   code: string;
-  editorTheme: string;
+  editorTheme: EditorTheme;
   onCodeChange: (code: string) => void;
 }
 
 function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
-
-  useEffect(() => {
-    let selectedTheme = cobalt;
-    if (editorTheme === "espresso") {
-      selectedTheme = espresso;
-    }
-    view.current = new EditorView({
-      state: EditorState.create({
-        doc: code,
-        extensions: [
-          history(),
-          keymap.of([
-            ...defaultKeymap,
-            indentWithTab,
-            { key: "Mod-z", run: undo, preventDefault: true },
-            { key: "Mod-Shift-z", run: redo, preventDefault: true },
-          ]),
-          lineNumbers(),
-          bracketMatching(),
-          html(),
-          selectedTheme,
-          EditorView.lineWrapping,
-          EditorView.updateListener.of(update => {
-            if (update.changes) {
-              onCodeChange(view.current?.state.doc.toString() || "");
-            }
-          }),
-        ],
+  const editorState = EditorState.create({
+    extensions: [
+      history(),
+      keymap.of([
+        ...defaultKeymap,
+        indentWithTab,
+        { key: "Mod-z", run: undo, preventDefault: true },
+        { key: "Mod-Shift-z", run: redo, preventDefault: true },
+      ]),
+      lineNumbers(),
+      bracketMatching(),
+      html(),
+      editorTheme === EditorTheme.ESPRESSO ? espresso : cobalt,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update: ViewUpdate) => {
+        if (update.docChanged) {
+          const updatedCode = update.state.doc.toString();
+          onCodeChange(updatedCode);
+        }
       }),
+    ],
+  });
+  useEffect(() => {
+    view.current = new EditorView({
+      state: editorState,
       parent: ref.current as Element,
     });
 
@@ -59,7 +56,7 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
         view.current = null;
       }
     };
-  }, [code, editorTheme]);
+  }, []);
 
   useEffect(() => {
     if (view.current && view.current.state.doc.toString() !== code) {
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index f7004d3..121c17c 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -9,7 +9,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { FaCog } from "react-icons/fa";
-import { Settings } from "../types";
+import { EditorTheme, Settings } from "../types";
 import { Switch } from "./ui/switch";
 import { Label } from "./ui/label";
 import { Input } from "./ui/input";
@@ -21,7 +21,7 @@ interface Props {
 }
 
 function SettingsDialog({ settings, setSettings }: Props) {
-  const handleThemeChange = (theme: string) => {
+  const handleThemeChange = (theme: EditorTheme) => {
     setSettings((s) => ({
       ...s,
       editorTheme: theme,
@@ -110,7 +110,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
               id="editor-theme"
               value={settings.editorTheme}
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                handleThemeChange(e.target.value)
+                handleThemeChange(e.target.value as EditorTheme)
               }
             >
               <option value="cobalt">Cobalt</option>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 6f44e9f..04da945 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,6 +1,11 @@
+export enum EditorTheme {
+  ESPRESSO = "espresso",
+  COBALT = "cobalt",
+}
+
 export interface Settings {
   openAiApiKey: string | null;
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
-  editorTheme: string;
+  editorTheme: EditorTheme;
 }

From eb48129f2fba144c5a326384a20de908653e3fe8 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:35:42 +0800
Subject: [PATCH 20/21] fix: remove console

---
 frontend/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fea0fb1..44883ff 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -34,7 +34,6 @@ function App() {
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [history, setHistory] = useState<string[]>([]);
-  console.log('history', history)
   const [settings, setSettings] = usePersistedState<Settings>(
     {
       openAiApiKey: null,

From 916d5987cf0f09c15ecb956bd71532d55a83aa93 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Tue, 21 Nov 2023 11:40:20 +0800
Subject: [PATCH 21/21] feat: use memo to reduce editor state update

---
 frontend/src/components/CodeMirror.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CodeMirror.tsx b/frontend/src/components/CodeMirror.tsx
index 36093ee..1459dac 100644
--- a/frontend/src/components/CodeMirror.tsx
+++ b/frontend/src/components/CodeMirror.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo } from "react";
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view";
 import { espresso, cobalt } from "thememirror";
@@ -22,7 +22,7 @@ interface Props {
 function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
-  const editorState = EditorState.create({
+  const editorState = useMemo(() => EditorState.create({
     extensions: [
       history(),
       keymap.of([
@@ -43,7 +43,7 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
         }
       }),
     ],
-  });
+  }), [editorTheme]);
   useEffect(() => {
     view.current = new EditorView({
       state: editorState,