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.7k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">2<html xml:lang="en" xmlns="" xmlns:xsi="" xsi:schemalocation="">3 <head>4 <style>5 </style>6 <title>7 Wild Worb Weed8 </title>9 <style type="text/css">10 H1 { color: rgb(68,97,68) }11 H2 { color: rgb(98,130,50) }12 13 BODY { background: url(GlobalImages/WiWoWe-background.png)14 no-repeat center center fixed; 15 -webkit-background-size: cover;16 -moz-background-size: cover;17 -o-background-size: cover;18 background-size: cover; }19 20 TH { text-align: right; padding-right: 2em }21 22 #WiWoWe-footer { display: block; clear: both; text-align: left; padding-top: 60px; font-size: small }23 24 #WiWoWe-host-pointer,25 #WiWoWe-copyright-statement,26 #WiWoWe-background-attribution,27 #WiWoWe-copyright-license,28 #WiWoWe-subcopyright-caveat,29 #WiWoWe-time-stamp,30 #WiWoWe-Web-weaver-contact { display: block; padding-top: 10px }31 32 A#WiWoWe-Web-weaver-email { display: inline; font-family: monospace }33 </style>34 </head>35 <body>36 <h1>37 Wild Worb Weed38 </h1>39 <p>40 is an HTML page infesting the shoulder of the41 information superhighway. Herbicide resistant.42 </p>43 <h2>44 Specifications45 </h2>46 <table>47 <tbody>48 <tr>49 <th>50 Owner:51 </th>52 <td>53 <a>54 Michael J. O'Donnell55 </a>56 </td>57 </tr>58 <tr>59 <th>60 IP address:61 </th>62 <td>63 <code>64 199.58.80.6665 </code>66 </td>67 </tr>68 <tr>69 <th>70 Domain name:71 </th>72 <td>73 We don't need no stinkin' domain name (but it's74 <code>75 odonnell.koumbit.org76 </code>77 )78 </td>79 </tr>80 <tr>81 <th>82 Host:83 </th>84 <td>85 <a>86 Koumbit87 </a>88 </td>89 </tr>90 </tbody>91 </table>92 <h2>93 Clients94 </h2>95 <p>96 Only me, under my goofy nickname. Well, Figgy Pudding got sorta97 inactive before I finished, but I put up the partially written Web98 pages as an example.99 </p>100 <ul>101 <li>102 <a>103 O'DBOL (that's me)104 </a>105 </li>106 <li>107 <a>108 Figgy Pudding (Medieval/Renaissance Trio with Good Cholesterol)109 </a>110 </li>111 </ul>112 <h2>113 Missing Links114 </h2>115 <p>116 <em>117 Wild Worb Weed118 </em>119 is not affiliated in any way with120 </p>121 <ul>122 <li>123 <a>124 Worb, Konolfingen, Bern, Switzerland125 </a>126 </li>127 <li>128 <a>129 Bill Worb Furs130 </a>131 </li>132 <li>133 <a>134 Noit o' mnain worb135 </a>136 </li>137 <li>138 <a>139 worb 5 scooter parts140 </a>141 </li>142 </ul>143 <div id="WiWoWe-footer">144 <hr>145 <div id="WiWoWe-copyright-statement">146 © Copyright Michael J. O'Donnell: some rights reserved147 </div>148 <div id="WiWoWe-copyright-license">149 <div id="WiWoWe-creative-license">150 Use text, image, sounds, data freely under151 <a>152 Creative Commons Attribution-ShareAlike 4.0 International License153 </a>154 <div id="WiWoWe-code-license">155 Use computer programs freely under156 <a>157 GNU General Public License Version 3158 </a>159 </div>160 </div>161 <div id="WiWoWe-background-attribution">162 <a id="WiWoWe-background-source">163 Background photograph164 </a>165 courtesy of166 <a id="FP-links-background-artist">167 itchys168 </a>169 (altered by M. J. O'Donnell)170 </div>171 <div id="WiWoWe-subcopyright-caveat">172 Clients in this service have their own copyrights and reservations173 </div>174 <div id="WiWoWe-time-stamp">175 <!-- hhmts start -->176 Last modified: 2022 March 27 Sunday177 <!-- hhmts end -->178 </div>179 <div id="WiWoWe-Web-weaver-contact">180 Web weaver: Michael J. O'Donnell181 (182 <a id="WiWoWe-Web-weaver-email">183 [EMAIL REDACTED]184 </a>185 )186 </div>187 <div id="WiWoWe-host-pointer">188 Now infesting189 <a>190 Koumbit191 </a>192 .193 </div>194 </div>195 </div>196 </body>197</html>198