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.
221.8k
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 