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

add flutter template

Browse Source
This commit is contained in:
kkk123321 2024-02-26 09:54:25 +00:00
parent ddccd9baa3
commit 6da341e383
3 changed files with 107 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
frontend/src/App.tsx
View File

@ -47,6 +47,8 @@ function App() {
const [updateInstruction, setUpdateInstruction] = useState(""); const [updateInstruction, setUpdateInstruction] = useState("");
const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false); const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
// Settings // Settings
const [settings, setSettings] = usePersistedState<Settings>( const [settings, setSettings] = usePersistedState<Settings>(
{ {
@ -348,105 +350,105 @@ function App() {
{(appState === AppState.CODING || {(appState === AppState.CODING ||
appState === AppState.CODE_READY) && ( appState === AppState.CODE_READY) && (
<> <>
{/* Show code preview only when coding */} {/* Show code preview only when coding */}
{appState === AppState.CODING && ( {appState === AppState.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={cancelCodeGeneration}
className="w-full dark:text-white dark:bg-gray-700"
>
Cancel
</Button>
</div>
<CodePreview code={generatedCode} />
</div>
)}
{appState === AppState.CODE_READY && (
<div>
<div className="grid w-full gap-2">
<Textarea
placeholder="Tell the AI what to change..."
onChange={(e) => setUpdateInstruction(e.target.value)}
value={updateInstruction}
/>
<div className="flex justify-between items-center gap-x-2">
<div className="font-500 text-xs text-slate-700 dark:text-white">
Include screenshot of current version?
</div>
<Switch
checked={shouldIncludeResultImage}
onCheckedChange={setShouldIncludeResultImage}
className="dark:bg-gray-700"
/>
</div>
<Button
onClick={doUpdate}
className="dark:text-white dark:bg-gray-700"
>
Update
</Button>
</div>
<div className="flex items-center gap-x-2 mt-2">
<Button
onClick={downloadCode}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaDownload /> Download
</Button>
<Button
onClick={reset}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaUndo />
Reset
</Button>
</div>
</div>
)}
{/* Reference image display */}
<div className="flex gap-x-2 mt-2">
{referenceImages.length > 0 && (
<div className="flex flex-col"> <div className="flex flex-col">
<div <div className="flex items-center gap-x-1">
className={classNames({ <Spinner />
"scanning relative": appState === AppState.CODING, {executionConsole.slice(-1)[0]}
})}
>
<img
className="w-[340px] border border-gray-200 rounded-md"
src={referenceImages[0]}
alt="Reference"
/>
</div> </div>
<div className="text-gray-400 uppercase text-sm text-center mt-1"> <div className="flex mt-4 w-full">
Original Screenshot <Button
onClick={cancelCodeGeneration}
className="w-full dark:text-white dark:bg-gray-700"
>
Cancel
</Button>
</div>
<CodePreview code={generatedCode} />
</div>
)}
{appState === AppState.CODE_READY && (
<div>
<div className="grid w-full gap-2">
<Textarea
placeholder="Tell the AI what to change..."
onChange={(e) => setUpdateInstruction(e.target.value)}
value={updateInstruction}
/>
<div className="flex justify-between items-center gap-x-2">
<div className="font-500 text-xs text-slate-700 dark:text-white">
Include screenshot of current version?
</div>
<Switch
checked={shouldIncludeResultImage}
onCheckedChange={setShouldIncludeResultImage}
className="dark:bg-gray-700"
/>
</div>
<Button
onClick={doUpdate}
className="dark:text-white dark:bg-gray-700"
>
Update
</Button>
</div>
<div className="flex items-center gap-x-2 mt-2">
<Button
onClick={downloadCode}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaDownload /> Download
</Button>
<Button
onClick={reset}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaUndo />
Reset
</Button>
</div> </div>
</div> </div>
)} )}
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800"> {/* Reference image display */}
Console <div className="flex gap-x-2 mt-2">
</h2> {referenceImages.length > 0 && (
{executionConsole.map((line, index) => ( <div className="flex flex-col">
<div <div
key={index} className={classNames({
className="border-b border-gray-400 mb-2 text-gray-600 font-mono" "scanning relative": appState === AppState.CODING,
> })}
{line} >
<img
className="w-[340px] border border-gray-200 rounded-md"
src={referenceImages[0]}
alt="Reference"
/>
</div>
<div className="text-gray-400 uppercase text-sm text-center mt-1">
Original Screenshot
</div>
</div> </div>
))} )}
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800">
Console
</h2>
{executionConsole.map((line, index) => (
<div
key={index}
className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
>
{line}
</div>
))}
</div>
</div> </div>
</div> </>
</> )}
)}
{ {
<HistoryDisplay <HistoryDisplay
history={appHistory} history={appHistory}
@ -479,11 +481,12 @@ function App() {
</div> </div>
)} )}
{(appState === AppState.CODING || appState === AppState.CODE_READY) && ( {(appState === AppState.CODING || appState === AppState.CODE_READY) && settings.generatedCodeConfig != Stack.FLUTTER && (
<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">
<TabsList> <TabsList>
<TabsTrigger value="desktop" className="flex gap-x-2"> <TabsTrigger value="desktop" className="flex gap-x-2">
<FaDesktop /> Desktop <FaDesktop /> Desktop
</TabsTrigger> </TabsTrigger>
@ -512,6 +515,16 @@ function App() {
</Tabs> </Tabs>
</div> </div>
)} )}
{(appState === AppState.CODING || appState === AppState.CODE_READY) && settings.generatedCodeConfig === Stack.FLUTTER && (
<div className="ml-4">
<CodeTab
code={generatedCode}
setCode={setGeneratedCode}
settings={settings}
/>
</div>
)}
</main> </main>
</div> </div>
); );

1
frontend/src/lib/stacks.ts
View File

@ -6,7 +6,6 @@ export enum Stack {
VUE_TAILWIND = "vue_tailwind", VUE_TAILWIND = "vue_tailwind",
VUE_CSS = "vue_css", VUE_CSS = "vue_css",
IONIC_TAILWIND = "ionic_tailwind", IONIC_TAILWIND = "ionic_tailwind",
SVG = "svg", SVG = "svg",
FLUTTER = "flutter", FLUTTER = "flutter",
} }

1
frontend/src/types.ts
View File

@ -21,6 +21,7 @@ export enum AppState {
INITIAL = "INITIAL", INITIAL = "INITIAL",
CODING = "CODING", CODING = "CODING",
CODE_READY = "CODE_READY", CODE_READY = "CODE_READY",
CODE_READY_NO_PREVIEW = "CODE_READY_NO_PREVIEW",
} }
export interface CodeGenerationParams { export interface CodeGenerationParams {