screenshot-to-code icon indicating copy to clipboard operation
screenshot-to-code copied to clipboard

The generated code is completely different from the screenshot in the picture

Open JV-X opened this issue 2 months ago • 4 comments

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

  1. click the Drag & drop a screenshot here, or click to upload
  2. upload a screenshot
  3. 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

JV-X avatar Dec 10 '24 08:12 JV-X