Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: add stop button when generating code #63

Merged
merged 6 commits into from
Nov 21, 2023
Merged

Feat: add stop button when generating code #63

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2f1745a
feat: refactor app status type
clean99 Nov 21, 2023
2a52095
feat: add client close button
clean99 Nov 21, 2023
193e070
update type name
abi Nov 21, 2023
d741df4
move constant to constants file
abi Nov 21, 2023
e983d2b
Merge branch 'main' into pr/63
abi Nov 21, 2023
f666314
show reset button when code generation fails
abi Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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, USER_CLOSE_WEB_SOCKET_CODE } from "./types";
import { IS_RUNNING_ON_CLOUD } from "./config";
import { PicoBadge } from "./components/PicoBadge";
import { OnboardingNote } from "./components/OnboardingNote";
Expand All @@ -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>(
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the future, would be good to keep names like this consistent: AppStatus -> AppState. I'll update

AppStatus.INITIAL
);
const [generatedCode, setGeneratedCode] = useState<string>("");
const [referenceImages, setReferenceImages] = useState<string[]>([]);
Expand All @@ -43,6 +43,7 @@ function App() {
},
"setting"
);
const wsRef = useRef<WebSocket>(null);

const downloadCode = () => {
// Create a blob from the generated code
Expand All @@ -62,26 +63,31 @@ function App() {
};

const reset = () => {
setAppState("INITIAL");
setAppState(AppStatus.INITIAL);
setGeneratedCode("");
setReferenceImages([]);
setExecutionConsole([]);
setHistory([]);
};

const stop = () => {
wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE);
}

function doGenerateCode(params: CodeGenerationParams) {
setExecutionConsole([]);
setAppState("CODING");
setAppState(AppStatus.CODING);

// Merge settings with params
const updatedParams = { ...params, ...settings };

generateCode(
wsRef,
updatedParams,
(token) => setGeneratedCode((prev) => prev + token),
(code) => setGeneratedCode(code),
(line) => setExecutionConsole((prev) => [...prev, line]),
() => setAppState("CODE_READY")
() => setAppState(AppStatus.CODE_READY)
);
}

Expand Down Expand Up @@ -122,28 +128,36 @@ 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>
)}

{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 />
{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>
)}

{appState === "CODE_READY" && (
{appState === AppStatus.CODE_READY && (
<div>
<div className="grid w-full gap-2">
<Textarea
Expand Down Expand Up @@ -176,7 +190,7 @@ function App() {
<div className="flex flex-col">
<div
className={classNames({
"scanning relative": appState === "CODING",
"scanning relative": appState === AppStatus.CODING,
})}
>
<img
Expand Down Expand Up @@ -209,7 +223,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
Expand All @@ -219,7 +233,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">
Expand Down
15 changes: 11 additions & 4 deletions frontend/src/generateCode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
Expand All @@ -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));
Expand All @@ -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();
}
});

Expand Down
8 changes: 8 additions & 0 deletions frontend/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,11 @@ export interface Settings {
isImageGenerationEnabled: boolean;
editorTheme: string;
}

export enum AppStatus {
INITIAL = "INITIAL",
CODING = "CODING",
CODE_READY = "CODE_READY",
}

export const USER_CLOSE_WEB_SOCKET_CODE = 4333;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would move this to constants.ts

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's not a type