GPT-4-Vision: Convert Screenshots to Code Instantly

In this video, I will demonstrate the new open-source Screenshot-to-Code project, which enables you to upload a simple photo, be it a full webpage or a basic UI component, and it will generate the HTML with Tailwind classes to render the output. I will show you how to set this up locally and demonstrate some of the outputs it generated, such as the Wikipedia page. Additionally, I will provide a quick example of how you can take a photo of something like the ChatGPT input area and tweak the UI result's output if further refinements are needed.
Links:
github.com/abi...
www.python.org...
python-poetry....
platform.opena...
localhost:5173/
Clipboard tips and tricks:
Windows 10 and later:
Use Windows + Shift + S.
This activates the Snip & Sketch tool, allowing you to drag and select a portion of your screen.
The selected area is then copied to the clipboard automatically.
macOS:
Press Command + Shift + 4.
This changes your cursor to a crosshair, letting you select a portion of the screen.
Hold Control while dragging to copy the selected area to the clipboard instead of saving it as a file.
Linux (with GNOME desktop environment):
Use Shift + PrintScreen.
This allows you to select an area of the screen to capture.
The screenshot is then copied to the clipboard.
Support the channel:
Patreon: Support me on Patreon at patreon.com/DevelopersDigest
Buy Me A Coffee: You can buy me a coffee at buymeacoffee.com/developersdigest
Website: Check out my website at developersdigest.tech
Github: Follow me on GitHub at github.com/developersdigest
Twitter: Follow me on Twitter at dev__digest

[@Darren_UnikMediaGroup]

You have changed my life @ 4:20 lol the CTRL trick is a life saver when moving from windows to macos lol

[@DevelopersDigest]

Cheers! Glad I could help 😀

[@mikew2883]

Absolutely amazing! 👏

[@DevelopersDigest]

Cheers 🍻

[@dreams2rea1ityX]

Very cool, this is a game changer!

[@enzocaputodevos]

Je vous remercie pour ces explications !!!

[@DevelopersDigest]

Thank you for watching!!

[@raphauy]

Very helpfull, thank you!!!

[@DevelopersDigest]

Thank you for watching!!

[@TypicalZoomer]

Crazy!! Thanks

[@DevelopersDigest]

Thanks for watching!

[@EDashMan]

Can you do a tutorial on react / next.js idk if you’ve heard of anima which converts figma design to code but it’s not great a lot of the stuff is out of place. I can’t wait till ai can recreate a webpage and all its components in a react format

[@DevelopersDigest]

I am not familiar with anima, but this would be a great area to explore further. Let me see if I am able to create something in this regard that is worth sharing!
Cheers, thank you for watching!

[@funny33964]

Hi, I get an error when I try to run poetry but I installed it
"poetry : The name "poetry" is not recognized as the name of a cmdlet, function, script file, or executable program. Please check that your name is spelled correctly and that you have
and the path is correct, then try again.
line:1 character:1
+ poetry install
+ ~~~~~~
+ CategoryInfo : ObjectNotFound: (poetry:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException"

[@maxl3265]

Спасибо за лёгкий английский

[@SonNguyen-lw9nj]

I can't start BE server, please help me

[@Bleachten]

If u have api key from gpt u must subscribe or bought gpt 4?

[@MrSqurk]

I use the API and I am not subscribed

[@amazingarc2787]

its not free?

[@DevelopersDigest]

No this, requires an OpenAI api key ! Cheers!

[@zojirushi1]

@@DevelopersDigest can you get an OpenAI api key for free?