CoolFace
Datasetpublic

SALT-NLP/Design2Code

This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes1.8kdownloads
117.html95 linesDownload Raw Back to root
1<html>2 <head>3  <style>4  </style>5  <title>6   This area is password protected [401]7  </title>8  <style type="text/css">9   #login {10			float: none;11			text-align: left;12			width: 410px;13			margin: 0px auto;14			margin-top: 134px;15			background: #171717;16			border: 4px solid #222222;17			font-family: arial;18			color: white;19			padding: 0 0 15px 25px;20			opacity: .85;21			filter: alpha(opacity=85);22		}23 24		#title {25			font-size: 24px;26			font-weight: bold;27			display: block;28			width: 385px;29			border-bottom: 1px solid #888;30			margin-bottom: 30px;31		}32 33		#submit-password {34			background: #E9E9E9;35			color: #161616;36			font-size: 18px;37			font-weight: bold;38			padding: 4px;39			margin-left: 5px;40		}41 42		#p {43		border: 2px solid red;44		font-size: 18px;45		padding: 5px;46		width: 305px;47		}48 49		.error-message {50			font-size: 14px;51			color: red;52		}53  </style>54  <!--[if IE]>55	<style type="text/css">56 57	#login {58		padding: 25px 25px 15px 25px;59 60	}61 62	#p {63		width: 270px;64		height: 35px;65	}66 67	#submit-password {68		padding: 0px;69		margin-left: 5px;70		height: 38px;71		position: relative;72		top: 2px;73	}74 75	</style>76	<! [endif]-->77 </head>78 <body onload="document.getElementById('p').focus()" style="background: #F2F2F2; text-align: center; margin: 0; padding: 0;">79  <div id="login">80   <p id="title">81    This area is password protected82   </p>83   <form id="password-form" method="post">84    <p style="font-size: 14px;">85     Please enter the password below86    </p>87    <input id="p" name="p" title="p" type="password">88    <input id="submit-password" type="submit" value="Login">89    <input name="redirect" type="hidden" value="/flavors/archives/04-2013">90    <input name="u" type="hidden" value="weebs">91   </form>92  </div>93 </body>94</html>95