From 2b3b3f4d4429c7e4bdf48dbb098391c9a484cb9d Mon Sep 17 00:00:00 2001 From: samya123456 Date: Mon, 20 Nov 2023 18:31:00 +0530 Subject: [PATCH 1/9] 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 e895dd4668cfd008afd0410b2c1199ec73d02da9 Mon Sep 17 00:00:00 2001 From: vagusx Date: Tue, 21 Nov 2023 16:44:05 +0800 Subject: [PATCH 2/9] 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 (
{IS_RUNNING_ON_CLOUD && } @@ -243,10 +249,17 @@ function App() { - +
+ + + + +
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 Date: Tue, 21 Nov 2023 10:52:33 -0500 Subject: [PATCH 3/9] 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 Date: Tue, 21 Nov 2023 10:56:17 -0500 Subject: [PATCH 4/9] 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() { /> + 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} + > From 193e070b0aecdbc0dd63a18f7a1dbeacf438aa4f Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 21 Nov 2023 11:00:48 -0500 Subject: [PATCH 5/9] 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.INITIAL - ); + const [appState, setAppState] = useState(AppState.INITIAL); const [generatedCode, setGeneratedCode] = useState(""); const [referenceImages, setReferenceImages] = useState([]); const [executionConsole, setExecutionConsole] = useState([]); @@ -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() {

Screenshot to Code

- {appState === AppStatus.INITIAL && ( + {appState === AppState.INITIAL && (

Drag & drop a screenshot to get started.

@@ -136,20 +134,18 @@ function App() { {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && } - {(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 && (
{executionConsole.slice(-1)[0]}
-
@@ -157,7 +153,7 @@ function App() {
)} - {appState === AppStatus.CODE_READY && ( + {appState === AppState.CODE_READY && (