Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update type name

Browse Source
This commit is contained in:
Abi Raja 2023-11-21 11:00:48 -05:00
parent 2a52095ce9
commit 193e070b0a
2 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/App.tsx
View File

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

4
frontend/src/types.ts
View File

@ -5,10 +5,10 @@ export interface Settings {
editorTheme: string; editorTheme: string;
} }
export enum AppStatus { export enum AppState {
INITIAL = "INITIAL", INITIAL = "INITIAL",
CODING = "CODING", CODING = "CODING",
CODE_READY = "CODE_READY", CODE_READY = "CODE_READY",
} }
export const USER_CLOSE_WEB_SOCKET_CODE = 4333; export const USER_CLOSE_WEB_SOCKET_CODE = 4333;