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

better UX for different app states

Browse Source
This commit is contained in:
Abi Raja 2023-11-14 15:31:24 -05:00
parent 86dd82e358
commit 3f4cf2895e
3 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/main.py
View File

@ -46,3 +46,5 @@ async def stream_code_test(websocket: WebSocket):
# Write the messages dict into a log so that we can debug later # Write the messages dict into a log so that we can debug later
write_logs(prompt_messages, completion) write_logs(prompt_messages, completion)
await websocket.close()

31
frontend/src/App.tsx
View File

@ -5,31 +5,44 @@ import Preview from "./components/Preview";
import { generateCode } from "./generateCode"; import { generateCode } from "./generateCode";
function App() { function App() {
const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
"INITIAL"
);
const [generatedCode, setGeneratedCode] = useState<string>(""); const [generatedCode, setGeneratedCode] = useState<string>("");
const [referenceImages, setReferenceImages] = useState<string[]>([]); const [referenceImages, setReferenceImages] = useState<string[]>([]);
function startCodeGeneration(referenceImages: string[]) { function startCodeGeneration(referenceImages: string[]) {
setAppState("CODING");
setReferenceImages(referenceImages); setReferenceImages(referenceImages);
generateCode(referenceImages[0], function (token) { generateCode(
setGeneratedCode((prev) => prev + token); referenceImages[0],
}); function (token) {
setGeneratedCode((prev) => prev + token);
},
function () {
setAppState("CODE_READY");
}
);
} }
return ( return (
<div className="mx-auto mt-10 max-w-[1000px]"> <div className="mx-auto mt-10 max-w-[1000px]">
<h1 className="text-2xl mb-4">Drag & Drop a Screenshot</h1> <h1 className="text-2xl mb-4">Drag & Drop a Screenshot</h1>
{referenceImages.length > 0 && (
<img className="w-[300px]" src={referenceImages[0]} alt="Reference" />
)}
{referenceImages.length === 0 && ( {appState === "INITIAL" && (
<> <>
<ImageUpload setReferenceImages={startCodeGeneration} /> <ImageUpload setReferenceImages={startCodeGeneration} />
</> </>
)} )}
<CodePreview code={generatedCode} /> {(appState === "CODING" || appState === "CODE_READY") && (
<Preview code={generatedCode} /> <>
<img className="w-[300px]" src={referenceImages[0]} alt="Reference" />
{/* Show code preview only when coding */}
{appState === "CODING" && <CodePreview code={generatedCode} />}
<Preview code={generatedCode} />
</>
)}
</div> </div>
); );
} }

5
frontend/src/generateCode.ts
View File

@ -4,7 +4,8 @@ const WS_BACKEND_URL = import.meta.env.VITE_WS_BACKEND_URL;
export function generateCode( export function generateCode(
imageUrl: string, imageUrl: string,
onChange: (chunk: string) => void onChange: (chunk: string) => void,
onComplete: () => void
) { ) {
const wsUrl = `${WS_BACKEND_URL}/generate-code`; const wsUrl = `${WS_BACKEND_URL}/generate-code`;
console.log("Connecting to backend @ ", wsUrl); console.log("Connecting to backend @ ", wsUrl);
@ -33,6 +34,8 @@ export function generateCode(
toast.error( toast.error(
"We ran into an error. Try again or contact support at support@picoapps.xyz" "We ran into an error. Try again or contact support at support@picoapps.xyz"
); );
} else {
onComplete();
} }
}); });