text
With the new WebSight dataset, converting the screenshot of a web page to its corresponding HTML code is just one fine-tuning step away
With the new WebSight dataset, converting the screenshot of a web page to its corresponding HTML code is just one fine-tuning step away
new_line
new_line
text
We release a new version of our synthetic dataset:
We release a new version of our synthetic dataset:
new_line
text
-Real images within web pages 🖼️
-Real images within web pages 🖼️
new_line
text
-Tailwind CSS 🎨
-Tailwind CSS 🎨
new_line
text
-2M examples 📈
-2M examples 📈
new_line
new_line
text
Our initial release, v0.1, featured web designs in HTML + CSS, using simple colored rectangles as image placeholders.
Our initial release, v0.1, featured web designs in HTML + CSS, using simple colored rectangles as image placeholders.
new_line
text
It was a good start to help models grasp the basics of web page structure and coding associations.
It was a good start to help models grasp the basics of web page structure and coding associations.
new_line
text
Yet, it was missing the look of a real website.
Yet, it was missing the look of a real website.
new_line
new_line
text
Improving visual appeal, we've now embedded actual images in our web designs, ensuring they match the site's content for a more authentic look.
Improving visual appeal, we've now embedded actual images in our web designs, ensuring they match the site's content for a more authentic look.
new_line
new_line
text
Switching to Tailwind CSS offers a more compact representation of the code.
Switching to Tailwind CSS offers a more compact representation of the code.
new_line
new_line
text
We've also expanded our dataset to 2 million examples!
We've also expanded our dataset to 2 million examples!
new_line
new_line
text
After fine-tuning our forthcoming foundation vision-language model on this dataset, we've observed some encouraging capabilities, such as converting sketches directly into functional HTML code.
After fine-tuning our forthcoming foundation vision-language model on this dataset, we've observed some encouraging capabilities, such as converting sketches directly into functional HTML code.
new_line
new_line
text
We're excited to hear your thoughts and suggestions for future versions. What would you like to see next? Feel free to open a discussion on the hub!
We're excited to hear your thoughts and suggestions for future versions. What would you like to see next? Feel free to open a discussion on the hub!
new_line
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
Blog post: 
Blog post: 
link
https://huggingface.co/blog/websight
https://huggingface.co/blog/websight
new_line
text
Google Colab: 
Google Colab: 
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
Work done with 
Work done with 
mention
@VictorSanh
VictorSanh
text
mention
@Leyo
Leyo
text
With the new WebSight dataset, converting the screenshot of a web page to its corresponding HTML code is just one fine-tuning step away

We release a new version of our synthetic dataset:
-Real images within web pages 🖼️
-Tailwind CSS 🎨
-2M examples 📈

Our initial release, v0.1, featured web designs in HTML + CSS, using simple colored rectangles as image placeholders.
It was a good start to help models grasp the basics of web page structure and coding associations.
Yet, it was missing the look of a real website.

Improving visual appeal, we've now embedded actual images in our web designs, ensuring they match the site's content for a more authentic look.

Switching to Tailwind CSS offers a more compact representation of the code.

We've also expanded our dataset to 2 million examples!

After fine-tuning our forthcoming foundation vision-language model on this dataset, we've observed some encouraging capabilities, such as converting sketches directly into functional HTML code.

We're excited to hear your thoughts and suggestions for future versions. What would you like to see next? Feel free to open a discussion on the hub!

Dataset: https://huggingface.co/datasets/HuggingFaceM4/WebSight
Technical report: https://huggingface.co/papers/2403.09029
Blog post: https://huggingface.co/blog/websight
Google Colab: https://colab.research.google.com/drive/1LdamGKR2oacrDk-kYwz_Wfc1-RBUdzcO?usp=sharing

Work done with @VictorSanh @Leyo 
🚀
VictorSanh jeremy-london aidystark ajibawa-2023 seyf1elislam Tonic osanseviero clem Joseph717171
🔥
facenuma Sylvestre Tonic osanseviero clem Joseph717171
🧠
aidystark Tonic osanseviero WesPro Joseph717171
➕
VictorSanh aidystark Tonic clem
https://cdn-avatars.huggingface.co/v1/production/uploads/1635298773955-noauth.jpeg
Aidy Osu
aidystark
user
https://cdn-avatars.huggingface.co/v1/production/uploads/64aea8ff67511bd3d965697b/Jxn52EmDF5RApJh8antxn.jpeg
Feynman Innovations
ajibawa-2023
user
https://cdn-avatars.huggingface.co/v1/production/uploads/1635201569275-noauth.jpeg
Hugo Laurençon
HugoLaurencon
user