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

Resolve conflicts

Browse Source
This commit is contained in:
Tony 2024-05-24 09:55:42 +00:00
parent 02872d1967
commit f98aaf323d
3 changed files with 1212 additions and 1595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docker-compose.yml
View File

@ -1,7 +1,7 @@
version: '3.9'
services:
backend:
build:
context: ./backend
dockerfile: Dockerfile
@ -17,7 +17,9 @@ services:
ports:
- "${BACKEND_PORT:-7001}:${BACKEND_PORT:-7001}"
command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001}
command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001} --workers 2
restart: always
frontend:
build:
@ -25,3 +27,5 @@ services:
dockerfile: Dockerfile
ports:
- "5173:5173"
restart: always

143
frontend/src/App.tsx
View File

@ -54,8 +54,6 @@ function App() {
const [updateInstruction, setUpdateInstruction] = useState("");
const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
// Settings
const [settings, setSettings] = usePersistedState<Settings>(
{
@ -431,67 +429,6 @@ function App() {
{(appState === AppState.CODING ||
appState === AppState.CODE_READY) && (
<<<<<<< HEAD
<>
{/* Show code preview only when 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>
=======
<>
{/* Show code preview only when coding */}
{appState === AppState.CODING && (
@ -594,47 +531,25 @@ function App() {
{inputMode === "video"
? "Original Video"
: "Original Screenshot"}
>>>>>>> main
</div>
</div>
)}
{/* Reference image display */}
<div className="flex gap-x-2 mt-2">
{referenceImages.length > 0 && (
<div className="flex flex-col">
<div
className={classNames({
"scanning relative": appState === AppState.CODING,
})}
>
<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 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 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>
</>
)}
{
<HistoryDisplay
history={appHistory}
@ -667,25 +582,9 @@ function App() {
</div>
)}
{(appState === AppState.CODING || appState === AppState.CODE_READY) && settings.generatedCodeConfig != Stack.FLUTTER && (
{(appState === AppState.CODING || appState === AppState.CODE_READY) && (
<div className="ml-4">
<Tabs defaultValue="desktop">
<<<<<<< HEAD
<div className="flex justify-end mr-8 mb-4">
<TabsList>
<TabsTrigger value="desktop" className="flex gap-x-2">
<FaDesktop /> Desktop
</TabsTrigger>
<TabsTrigger value="mobile" className="flex gap-x-2">
<FaMobile /> Mobile
</TabsTrigger>
<TabsTrigger value="code" className="flex gap-x-2">
<FaCode />
Code
</TabsTrigger>
</TabsList>
=======
<div className="flex justify-between mr-8 mb-4">
<div className="flex items-center gap-x-2">
{appState === AppState.CODE_READY && (
@ -721,7 +620,6 @@ function App() {
</TabsTrigger>
</TabsList>
</div>
>>>>>>> main
</div>
<TabsContent value="desktop">
<Preview code={previewCode} device="desktop" />
@ -740,17 +638,6 @@ function App() {
</Tabs>
</div>
)}
{(appState === AppState.CODING || appState === AppState.CODE_READY) && settings.generatedCodeConfig === Stack.FLUTTER && (
<div className="ml-4">
<CodeTab
code={generatedCode}
setCode={setGeneratedCode}
settings={settings}
showOpenInCodepenio={false}
/>
</div>
)}
</main>
</div>
);

2652
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff