screenshot-to-code
screenshot-to-code copied to clipboard
The generated code is completely different from the screenshot in the picture
Describe the bug I took screenshots of the googledriver and github pages, dragged them into the page, and then generated the code, but the generated pages were completely different from the pages I took screenshots of.
To Reproduce
- click the
Drag & drop a screenshot here, or click to upload
- upload a screenshot
- See error
Screenshots of backend AND frontend terminal logs frontend:
VITE v4.5.0 ready in 484 ms
➜ Local: http://localhost:5173/ 15:06:55
➜ Network: use --host to expose 15:06:55
➜ press h to show help 15:06:55
ERROR 15:06:58
[TypeScript] Found 0 errors. Watching for file changes.
WARN Browserslist: caniuse-lite is outdated. Please run: 15:07:00
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
backend:
INFO: ('127.0.0.1', 55785) - "WebSocket /generate-code" [accepted]
Incoming websocket connection...
INFO: connection open
Received params
Using openAiApiKey from environment variable
Using openAiBaseURL from environment variable
Generating bootstrap code in image mode
Status (variant 0): Generating code...
Status (variant 1): Generating code...
Models used for generation: ['openai', 'openai']
Writing to logs directory: /home/hygx/code/screenshot-to-code/backend/run_logs
Status (variant 0): Generating images...
Status (variant 1): Generating images...
Generating images with model: dalle3
Generating images with model: dalle3
Image generation time: 0.10 seconds
An exception occurred: 404 page not found
An exception occurred: 404 page not found
An exception occurred: 404 page not found
Image generation failed for alt text:A placeholder image for the first card. This is a description of the image.
Image generation failed for alt text:A placeholder image for the second card. This is a description of the image.
Image generation failed for alt text:A placeholder image for the third card. This is a description of the image.
Image generation time: 0.10 seconds
An exception occurred: 404 page not found
An exception occurred: 404 page not found
An exception occurred: 404 page not found
Image generation failed for alt text:News Image 1 - Description of the first news image
Image generation failed for alt text:News Image 2 - Description of the second news image
Image generation failed for alt text:News Image 3 - Description of the third news image
Status (variant 0): Code generation complete.
Status (variant 1): Code generation complete.
INFO: connection closed
I recorded a video here:
https://github.com/user-attachments/assets/f605548b-f386-487e-97be-40ac7dc71257