From edfafa2c487222db098656c07975f3743faee267 Mon Sep 17 00:00:00 2001 From: Alex Lloyd Date: Thu, 7 Dec 2023 18:16:31 -0600 Subject: [PATCH 1/7] Fix parameter type for generateCode --- frontend/src/App.tsx | 10 ++++++++-- frontend/src/generateCode.ts | 11 ++--------- frontend/src/types.ts | 10 ++++++++++ 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f1301e0..3ae08a9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react"; import ImageUpload from "./components/ImageUpload"; import CodePreview from "./components/CodePreview"; import Preview from "./components/Preview"; -import { CodeGenerationParams, generateCode } from "./generateCode"; +import { generateCode } from "./generateCode"; import Spinner from "./components/Spinner"; import classNames from "classnames"; import { @@ -18,7 +18,13 @@ import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; import SettingsDialog from "./components/SettingsDialog"; -import { Settings, EditorTheme, AppState, GeneratedCodeConfig } from "./types"; +import { + AppState, + CodeGenerationParams, + EditorTheme, + GeneratedCodeConfig, + Settings, +} from "./types"; import { IS_RUNNING_ON_CLOUD } from "./config"; import { PicoBadge } from "./components/PicoBadge"; import { OnboardingNote } from "./components/OnboardingNote"; diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts index 8a05fe7..96fbdc1 100644 --- a/frontend/src/generateCode.ts +++ b/frontend/src/generateCode.ts @@ -1,23 +1,16 @@ import toast from "react-hot-toast"; import { WS_BACKEND_URL } from "./config"; import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants"; +import { FullGenerationSettings } from "./types"; const ERROR_MESSAGE = "Error generating code. Check the Developer Console AND the backend logs for details. Feel free to open a Github issue."; const STOP_MESSAGE = "Code generation stopped"; -export interface CodeGenerationParams { - generationType: "create" | "update"; - image: string; - resultImage?: string; - history?: string[]; - // isImageGenerationEnabled: boolean; // TODO: Merge with Settings type in types.ts -} - export function generateCode( wsRef: React.MutableRefObject, - params: CodeGenerationParams, + params: FullGenerationSettings, onChange: (chunk: string) => void, onSetCode: (code: string) => void, onStatusUpdate: (status: string) => void, diff --git a/frontend/src/types.ts b/frontend/src/types.ts index deb370a..653b648 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -28,3 +28,13 @@ export enum AppState { CODING = "CODING", CODE_READY = "CODE_READY", } + +export interface CodeGenerationParams { + generationType: "create" | "update"; + image: string; + resultImage?: string; + history?: string[]; + // isImageGenerationEnabled: boolean; // TODO: Merge with Settings type in types.ts +} + +export type FullGenerationSettings = CodeGenerationParams & Settings; From 4abee41e15a35c3ffad30212d43674c7cffb5f31 Mon Sep 17 00:00:00 2001 From: Alex Lloyd Date: Thu, 7 Dec 2023 18:18:39 -0600 Subject: [PATCH 2/7] Remove redundant comment --- frontend/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 653b648..6c812a7 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -9,6 +9,7 @@ export enum GeneratedCodeConfig { REACT_TAILWIND = "react_tailwind", BOOTSTRAP = "bootstrap", IONIC_TAILWIND = "ionic_tailwind", + REACT_MUI_COMPONENT = "react_mui_component", } export interface Settings { @@ -34,7 +35,6 @@ export interface CodeGenerationParams { image: string; resultImage?: string; history?: string[]; - // isImageGenerationEnabled: boolean; // TODO: Merge with Settings type in types.ts } export type FullGenerationSettings = CodeGenerationParams & Settings; From c0e68db40f539a2af483b8fd175c614646eff604 Mon Sep 17 00:00:00 2001 From: Alex Lloyd Date: Thu, 7 Dec 2023 18:25:05 -0600 Subject: [PATCH 3/7] remove WIP GeneratedCodeConfig --- frontend/src/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 6c812a7..9202745 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -9,7 +9,6 @@ export enum GeneratedCodeConfig { REACT_TAILWIND = "react_tailwind", BOOTSTRAP = "bootstrap", IONIC_TAILWIND = "ionic_tailwind", - REACT_MUI_COMPONENT = "react_mui_component", } export interface Settings { From 6385c500ec9ce7b3ac338be50fd8f548e8e08a51 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Sun, 10 Dec 2023 17:53:39 -0500 Subject: [PATCH 4/7] Create design-docs.md --- design-docs.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 design-docs.md diff --git a/design-docs.md b/design-docs.md new file mode 100644 index 0000000..eb38119 --- /dev/null +++ b/design-docs.md @@ -0,0 +1,5 @@ +## Version History + +Version history is stored as a tree on the client-side. + +![Screenshot to Code](https://github.com/abi/screenshot-to-code/assets/23818/e35644aa-b90a-4aa7-8027-b8732796fd7c) From 28db0a6f4c896e531575db68665499085afe0d5e Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Mon, 11 Dec 2023 14:36:29 -0500 Subject: [PATCH 5/7] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e4739a4..92e26d2 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ See the [Examples](#-examples) section below for more demos. ## 🌟 Recent Updates +- Dec 11 - Start a new project from existing code (allows you to come back to an older project) - Dec 7 - 🔥 🔥 🔥 View a history of your edits, and branch off them - Nov 30 - Dark mode, output code in Ionic (thanks [@dialmedu](https://github.com/dialmedu)), set OpenAI base URL - Nov 28 - 🔥 🔥 🔥 Customize your stack: React or Bootstrap or TailwindCSS From 89c716f7598b9271751d9f9b0740d179252ed881 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Mon, 11 Dec 2023 18:22:36 -0500 Subject: [PATCH 6/7] update to include new settings --- frontend/src/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 9202745..236116a 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -34,6 +34,7 @@ export interface CodeGenerationParams { image: string; resultImage?: string; history?: string[]; + isImportedFromCode?: boolean; } export type FullGenerationSettings = CodeGenerationParams & Settings; From 9f064c57a7c20517d790c48aa457dd676b2bfc80 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Mon, 11 Dec 2023 18:56:20 -0500 Subject: [PATCH 7/7] after code generation cancellation, leave the app in a good state (revert to last version or reset app if no last version) --- frontend/src/App.tsx | 24 ++++++++++++++++++++---- frontend/src/generateCode.ts | 10 +++++++--- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 75639ee..27937ca 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -130,10 +130,21 @@ function App() { setIsImportedFromCode(false); }; - const stop = () => { + const cancelCodeGeneration = () => { wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE); // make sure stop can correct the state even if the websocket is already closed - setAppState(AppState.CODE_READY); + cancelCodeGenerationAndReset(); + }; + + const cancelCodeGenerationAndReset = () => { + // When this is the first version, reset the entire app state + if (currentVersion === null) { + reset(); + } else { + // Otherwise, revert to the last version + setGeneratedCode(appHistory[currentVersion].code); + setAppState(AppState.CODE_READY); + } }; function doGenerateCode( @@ -189,6 +200,11 @@ function App() { } }, (line) => setExecutionConsole((prev) => [...prev, line]), + // On cancel + () => { + cancelCodeGenerationAndReset(); + }, + // On complete () => { setAppState(AppState.CODE_READY); } @@ -343,10 +359,10 @@ function App() {
diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts index 96fbdc1..55523c4 100644 --- a/frontend/src/generateCode.ts +++ b/frontend/src/generateCode.ts @@ -6,7 +6,7 @@ import { FullGenerationSettings } from "./types"; const ERROR_MESSAGE = "Error generating code. Check the Developer Console AND the backend logs for details. Feel free to open a Github issue."; -const STOP_MESSAGE = "Code generation stopped"; +const CANCEL_MESSAGE = "Code generation cancelled"; export function generateCode( wsRef: React.MutableRefObject, @@ -14,6 +14,7 @@ export function generateCode( onChange: (chunk: string) => void, onSetCode: (code: string) => void, onStatusUpdate: (status: string) => void, + onCancel: () => void, onComplete: () => void ) { const wsUrl = `${WS_BACKEND_URL}/generate-code`; @@ -39,15 +40,18 @@ export function generateCode( 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); + toast.success(CANCEL_MESSAGE); + onCancel(); } else if (event.code !== 1000) { console.error("WebSocket error code", event); toast.error(ERROR_MESSAGE); + } else { + onComplete(); } - onComplete(); }); ws.addEventListener("error", (error) => {