text
When Greg Brockman demo-ed GPT4 by hand-sketching a joke website on a piece of paper and asking the system to convert that into an HTML webpage, it blew my mind.
When Greg Brockman demo-ed GPT4 by hand-sketching a joke website on a piece of paper and asking the system to convert that into an HTML webpage, it blew my mind.
new_line
new_line
text
Can you build your own Screenshot-to-HTML system with much fewer resources?
Can you build your own Screenshot-to-HTML system with much fewer resources?
new_line
new_line
text
With this new resource, most likely yes! Current vision-language models can learn this task with the right data (and the right tricks).
With this new resource, most likely yes! Current vision-language models can learn this task with the right data (and the right tricks).
new_line
new_line
text
We have iterated on WebSight-v0.1 and are releasing its v0.2.
We have iterated on WebSight-v0.1 and are releasing its v0.2.
new_line
text
WebSight is an open dataset of synthetically generated webpages with their corresponding rendered screenshot.
WebSight is an open dataset of synthetically generated webpages with their corresponding rendered screenshot.
new_line
new_line
text
A few noticeable improvements:
A few noticeable improvements:
new_line
text
- 💨From traditional CSS to Tailwind CSS. Tailwind is CSS directly embedded in the HTML attribute class and is much more compact
- 💨From traditional CSS to Tailwind CSS. Tailwind is CSS directly embedded in the HTML attribute class and is much more compact
new_line
text
- 🚛2M pairs of synthetic HTML webpages with their associated rendered screenshot, along with the prompt generated by an LLM to create that webpage
- 🚛2M pairs of synthetic HTML webpages with their associated rendered screenshot, along with the prompt generated by an LLM to create that webpage
new_line
text
- 🖼️Much more visually appealing pages with the integration of real images
- 🖼️Much more visually appealing pages with the integration of real images
new_line
new_line
text
👀Blog: 
👀Blog: 
link
https://huggingface.co/blog/websight
https://huggingface.co/blog/websight
new_line
text
💽Dataset: 
💽Dataset: 
resource
https://huggingface.co/datasets/HuggingFaceM4/WebSight
dataset
HuggingFaceM4/WebSight
https://huggingface.co/datasets/HuggingFaceM4/WebSight
new_line
text
📜Technical report: 
📜Technical report: 
resource
https://huggingface.co/papers/2403.09029
paper
2403.09029
https://huggingface.co/papers/2403.09029
Unlocking the conversion of Web Screenshots into HTML Code with the
  WebSight Dataset (2403.09029)
new_line
text
🎮Want to create your own synthetic data pipelines? A starting point: 
🎮Want to create your own synthetic data pipelines? A starting point: 
link
https://colab.research.google.com/drive/1LdamGKR2oacrDk-kYwz_Wfc1-RBUdzcO?usp=sharing
https://colab.research.google.com/drive/1LdamGKR2oacrDk-kYwz_Wfc1-RBUdzcO?usp=sharing
new_line
new_line
text
Built with 
Built with 
mention
@HugoLaurencon
HugoLaurencon
text
 & 
 & 
mention
@Leyo
Leyo
text
When Greg Brockman demo-ed GPT4 by hand-sketching a joke website on a piece of paper and asking the system to convert that into an HTML webpage, it blew my mind.

Can you build your own Screenshot-to-HTML system with much fewer resources?

With this new resource, most likely yes! Current vision-language models can learn this task with the right data (and the right tricks).

We have iterated on WebSight-v0.1 and are releasing its v0.2.
WebSight is an open dataset of synthetically generated webpages with their corresponding rendered screenshot.

A few noticeable improvements:
- 💨From traditional CSS to Tailwind CSS. Tailwind is CSS directly embedded in the HTML attribute class and is much more compact
- 🚛2M pairs of synthetic HTML webpages with their associated rendered screenshot, along with the prompt generated by an LLM to create that webpage
- 🖼️Much more visually appealing pages with the integration of real images

👀Blog: https://huggingface.co/blog/websight
💽Dataset: https://huggingface.co/datasets/HuggingFaceM4/WebSight
📜Technical report: https://huggingface.co/papers/2403.09029
🎮Want to create your own synthetic data pipelines? A starting point: https://colab.research.google.com/drive/1LdamGKR2oacrDk-kYwz_Wfc1-RBUdzcO?usp=sharing

Built with @HugoLaurencon & @Leyo 
🔥
HugoLaurencon osanseviero Sylvestre merve clem vinwizard
🧠
osanseviero GabeGaidos clem Csplk
❤️
merve samusenps clem Csplk