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 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">6 <title>7 Testimonials8 </title>9 <meta content="Microsoft FrontPage 5.0" name="GENERATOR">10 <meta content="FrontPage.Editor.Document" name="ProgId">11 <style fprolloverstyle>12 A:hover {color: #7CA3FC; font-size: 9pt; font-family: Arial}13div.WordSection114 {page:WordSection1;}15 </style>16 <meta content="none, default" name="Microsoft Theme">17 <meta content="none, default" name="Microsoft Border">18 </head>19 <body alink="#003366" bgcolor="#F4F4F4" link="#003366" topmargin="0" vlink="#003366">20 <div align="center">21 <center>22 <table border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="770">23 <tbody>24 <tr>25 <td bgcolor="#FFFFFF" width="100%">26 <font size="1">27 28 </font>29 <br>30 <font face="Arial" style="font-size: 9pt">31 32 <a style="text-decoration: none">33 HOME34 </a>35 </font>36 <font face="Arial" style="font-size: 6pt">37 38 </font>39 <font color="#999999" face="Arial" style="font-size: 9pt">40 I41 </font>42 <font face="Arial" style="font-size: 6pt">43 <font color="#5E79BB">44 </font>45 46 </font>47 <font face="Arial" style="font-size: 9pt">48 <a style="text-decoration: none">49 ABOUT SGS50 </a>51 </font>52 <font face="Arial" size="1">53 54 </font>55 <font face="Arial" style="font-size: 9pt">56 <font color="#999999">57 I58 </font>59 <font color="#5E79BB">60 </font>61 62 <a style="text-decoration: none">63 PORTFOLIO64 </a>65 </font>66 <font face="Arial" size="1">67 68 </font>69 <font color="#999999" face="Arial" style="font-size: 9pt">70 I71 </font>72 <font face="Arial" size="1">73 <font color="#5E79BB">74 </font>75 76 </font>77 <font face="Arial" style="font-size: 9pt">78 <a style="text-decoration: none">79 SERVICES 80 </a>81 <font color="#999999">82 I83 </font>84 85 <a style="text-decoration: none">86 IN THE NEWS87 </a>88 89 <font color="#999999">90 I91 </font>92 <font color="#5E79BB">93 </font>94 95 <a style="text-decoration: none">96 TESTIMONIALS 97 </a>98 <font color="#999999">99 I 100 </font>101 <a style="text-decoration: none">102 LINKS OF INTEREST103 </a>104 </font>105 <font face="Arial" style="font-size: 6pt">106 <br>107 </font>108 <font color="#999999" face="Arial" size="1">109 110 </font>111 <a style="text-decoration: none">112 <font face="Arial" size="1">113 114 </font>115 <font face="Arial" style="font-size: 9pt">116 CAREER 117 OPPORTUNITIES118 </font>119 </a>120 <font face="Arial" style="font-size: 9pt">121 122 <font color="#999999">123 I 124 <a style="text-decoration: none">125 TRADE SHOWS126 </a>127 </font>128 </font>129 <br>130 <span style="font-size: 3pt">131 132 </span>133 <br>134 <img border="0" height="132" src="rick.jpg" width="770">135 <table border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">136 <tbody>137 <tr>138 <td style="border-style:none; border-width:medium; " width="100%">139 <p align="left" style="margin: 0 30">140 <font color="#003366">141 <b>142 <font face="Arial" style="font-size: 6pt">143 144 </font>145 <font face="Arial" size="2">146 <br>147 </font>148 <font face="Arial">149 TESTIMONIALS150 <br>151 152 </font>153 </b>154 </font>155 </p>156 <p align="left" class="MsoListParagraph" style="margin: 0 30">157 <b>158 <span style="font-family: Arial">159 <font color="#5E79BB" size="4">160 ■161 </font>162 <font color="#003366" size="4">163 </font>164 <font size="2">165 "166 </font>167 </span>168 </b>169 <font face="Arial" size="2">170 Dennis 171 (SGS) is to be commended for his excellent performance and ability to 172 listen to173 <br>174 our needs and in turn provide a product that is 175 extremely formal and detailed. Dennis is176 <br>177 a true team player and a pleasure to work with.178 </font>179 <span style="font-size: 10.0pt; font-family: Arial">180 "181 </span>182 </p>183 <p align="left" class="MsoListParagraph" style="margin: 0 30">184 <font face="Arial" size="2">185 John D. 186 Byers - President187 </font>188 </p>189 <p align="left" class="MsoListParagraph" style="margin: 0 30">190 <font face="Arial" size="2">191 Vigilant 192 Hose Company193 <br>194 195 </font>196 </p>197 <p align="left" class="MsoListParagraph" style="margin: 0 30">198 <b>199 <span style="font-family: Arial">200 <font color="#5E79BB" size="4">201 ■202 </font>203 <font color="#003366" size="4">204 </font>205 </span>206 </b>207 <font size="2">208 <b>209 <span style="font-family: Arial">210 "211 </span>212 </b>213 </font>214 <font face="Arial" size="2">215 When 216 we chose your company, your staff started meeting us right away and in 217 a short218 <br>219 time came up with a plan that our entire 220 membership could agree upon."221 </font>222 </p>223 <p align="left" class="MsoListParagraph" style="margin: 0 30">224 <font face="Arial" size="2">225 Christopher 226 DeHart - 1227 <sup>228 st229 </sup>230 Assistant Fire Chief231 </font>232 </p>233 <p align="left" class="MsoListParagraph" style="margin: 0 30">234 <font size="2">235 236 </font>237 <font face="Arial" size="2">238 Building Charman - Lower Swatara Fire 239 Department240 <br>241 242 </font>243 </p>244 <p align="left" class="MsoListParagraph" style="margin: 0 30">245 <b>246 <span style="font-family: Arial">247 <font color="#5E79BB" size="4">248 ■249 </font>250 <font color="#003366" size="4">251 </font>252 <font size="2">253 "254 </font>255 </span>256 </b>257 <font face="Arial" size="2">258 We 259 have found SGS to be professional, creative, and sensitive to the 260 owners budget.261 </font>262 <span style="font-size: 10.0pt; font-family: Arial">263 "264 </span>265 </p>266 <p align="left" class="MsoListParagraph" style="margin: 0 30">267 <font face="Arial" size="2">268 John Helman269 </font>270 </p>271 <p align="left" class="MsoListParagraph" style="margin: 0 30">272 <font size="2">273 274 </font>275 <font face="Arial" size="2">276 Brechbill & Helman Construction Company, 277 Inc.278 <br>279 280 </font>281 </p>282 <p align="left" class="MsoListParagraph" style="margin: 0 30">283 <b>284 <span style="font-family: Arial">285 <font color="#5E79BB" size="4">286 ■287 </font>288 <font color="#003366" size="4">289 </font>290 <font size="2">291 "292 </font>293 </span>294 </b>295 <font face="Arial" size="2">296 We 297 have found SGS to be a real team player. As issues and questions 298 arise, we have299 <br>300 been impressed with your willingness to listen 301 and adjust accordingly.302 </font>303 <span style="font-size: 10.0pt; font-family: Arial">304 "305 </span>306 </p>307 <p align="left" class="MsoListParagraph" style="margin: 0 30">308 <font face="Arial" size="2">309 Donald H. 310 Mowery, PE - President311 </font>312 </p>313 <p align="left" class="MsoListParagraph" style="margin: 0 30">314 <font face="Arial" size="2">315 R.S. Mowery 316 & Sons, Inc.317 <br>318 319 </font>320 </p>321 <p align="left" class="MsoListParagraph" style="margin: 0 30">322 <b>323 <span style="font-family: Arial">324 <font color="#5E79BB" size="4">325 ■326 </font>327 <font color="#003366" size="4">328 </font>329 <font size="2">330 "331 </font>332 </span>333 </b>334 <font face="Arial" size="2">335 Throughout 336 this entire process you have been receptive to our various ideas and 337 you have338 <br>339 advised us as we have moved forward.340 </font>341 <span style="font-size: 10.0pt; font-family: Arial">342 "343 </span>344 </p>345 <p align="left" class="MsoListParagraph" style="margin: 0 30">346 <font face="Arial" size="2">347 Rev. Daniel 348 F.X. Powell - Pastor349 </font>350 </p>351 <p align="left" class="MsoListParagraph" style="margin: 0 30">352 <font face="Arial" size="2">353 St. 354 Margaret Mary Alacoque, Roman Catholic Church355 <br>356 357 </font>358 </p>359 <p align="left" class="MsoListParagraph" style="margin: 0 30">360 <b>361 <span style="font-family: Arial">362 <font color="#5E79BB" size="4">363 ■364 </font>365 <font color="#003366" size="4">366 </font>367 <font size="2">368 "369 </font>370 </span>371 </b>372 <font face="Arial" size="2">373 The 374 responsiveness and professionalism of the SGS staff has exceeded our 375 expectations.376 <br>377 In addition, you and your staff listen and 378 understand the requirements of each project and379 <br>380 deliver solutions that address our needs.381 </font>382 <span style="font-size: 10.0pt; font-family: Arial">383 "384 </span>385 </p>386 <p align="left" class="MsoListParagraph" style="margin: 0 30">387 <font face="Arial" size="2">388 Frank 389 Laquitara - Associate Director of Projects390 </font>391 </p>392 <p align="left" class="MsoListParagraph" style="margin: 0 30">393 <font face="Arial" size="2">394 Dickinson 395 College396 <br>397 398 </font>399 </p>400 <p align="left" class="MsoListParagraph" style="margin: 0 30">401 <b>402 <span style="font-family: Arial">403 <font color="#5E79BB" size="4">404 ■405 </font>406 <font color="#003366" size="4">407 </font>408 <font size="2">409 "410 </font>411 </span>412 </b>413 <font face="Arial" size="2">414 The 415 professionalism and services at SGS has always exceeded our 416 expectations and goals.417 </font>418 <span style="font-size: 10.0pt; font-family: Arial">419 "420 </span>421 </p>422 <p align="left" class="MsoListParagraph" style="margin: 0 30">423 <font face="Arial" size="2">424 Mark A. 425 Yinger - Vice President, Estimating426 </font>427 </p>428 <p align="left" class="MsoListParagraph" style="margin: 0 30">429 <font size="2">430 431 </font>432 <font face="Arial" size="2">433 Eichelberger Construction Inc.434 <br>435 436 </font>437 </p>438 <p align="left" class="MsoListParagraph" style="margin: 0 30">439 <b>440 <span style="font-family: Arial">441 <font color="#5E79BB" size="4">442 ■443 </font>444 <font color="#003366" size="4">445 </font>446 <font size="2">447 "448 </font>449 </span>450 </b>451 <font face="Arial" size="2">452 We 453 were pleased with the professionalism; the technical expertise, the 454 human relationˈs skills and455 <br>456 the ability to connect us to other needed 457 services.458 </font>459 <span style="font-size: 10.0pt; font-family: Arial">460 "461 </span>462 </p>463 <p align="left" class="MsoListParagraph" style="margin: 0 30">464 <font face="Arial" size="2">465 William J. 466 Reilly - Parish Manager467 </font>468 </p>469 <p align="left" class="MsoListParagraph" style="margin: 0 30">470 <font face="Arial" size="2">471 Saint 472 Joseph Catholic Church473 </font>474 </p>475 <p align="left" style="margin: 0 30">476 <font face="Arial" size="2">477 478 </font>479 </p>480 <p align="left" class="MsoNormal" style="margin: 0 30">481 <b>482 <span style="font-family: Arial">483 <font color="#5E79BB" size="4">484 ■485 </font>486 <font color="#003366" size="4">487 </font>488 <font size="2">489 "490 </font>491 </span>492 </b>493 <span style="font-size: 10.0pt; font-family: Arial">494 The 495 personal touch and hands on method of handling projects gives an extra 496 bonus to the work."497 </span>498 </p>499 <p align="left" class="MsoNormal" style="margin: 0 30">500 <span style="font-size: 10.0pt; font-family: Arial">501 502 Roger Hoffman, Regional Construction Manager503 </span>504 </p>505 <p align="left" class="MsoNormal" style="margin: 0 30">506 <span style="font-size: 10.0pt; font-family: Arial">507 508 Rite Aid Corporation509 </span>510 </p>511 <p align="left" class="MsoNormal" style="margin: 0 30">512 <span style="font-size: 10.0pt; font-family: Arial">513 514 </span>515 </p>516 <p align="left" class="MsoNormal" style="margin: 0 30">517 <b>518 <span style="font-family: Arial">519 <font color="#5E79BB" size="4">520 ■521 </font>522 <font color="#003366" size="4">523 </font>524 </span>525 </b>526 <span style="font-size: 10.0pt; font-family: Arial">527 "Timelines of the delivery of drawings; listening to our needs and 528 understanding budget constraints. 529 <br>530 A pleasure to work with."531 </span>532 </p>533 <p align="left" class="MsoNormal" style="margin: 0 30">534 <font size="2">535 <span style="font-family: Arial">536 537 </span>538 </font>539 <span style="font-size: 10.0pt; font-family: Arial">540 David 541 Fralick, Executive Facility Manager542 </span>543 </p>544 <p align="left" class="MsoNormal" style="margin: 0 30">545 <span style="font-size: 10.0pt; font-family: Arial">546 547 Diakon548 </span>549 </p>550 <p align="left" class="MsoNormal" style="margin: 0 30">551 <span style="font-size: 10.0pt; font-family: Arial">552 553 </span>554 </p>555 <p align="left" class="MsoNormal" style="margin: 0 30">556 <b>557 <span style="font-family: Arial">558 <font color="#5E79BB" size="4">559 ■560 </font>561 <font color="#003366" size="4">562 </font>563 </span>564 </b>565 <span style="font-size: 10.0pt; font-family: Arial">566 "Very easy to work with."567 </span>568 </p>569 <p align="left" class="MsoNormal" style="margin: 0 30">570 <font size="2">571 <span style="font-family: Arial">572 573 </span>574 </font>575 <span style="font-size: 10.0pt; font-family: Arial">576 Don Snyder, Director 577 of Design and Construction Services578 </span>579 </p>580 <p align="left" class="MsoNormal" style="margin: 0 30">581 <span style="font-size: 10.0pt; font-family: Arial">582 583 Spotts Stevens McCoy584 </span>585 </p>586 <p align="left" class="MsoNormal" style="margin: 0 30">587 <span style="font-size: 10.0pt; font-family: Arial">588 589 </span>590 </p>591 <p align="left" class="MsoNormal" style="margin: 0 30">592 <b>593 <span style="font-family: Arial">594 <font color="#5E79BB" size="4">595 ■596 </font>597 <font color="#003366" size="4">598 </font>599 </span>600 </b>601 <span style="font-size: 10.0pt; font-family: Arial">602 "Pleasant and competent to work with."603 </span>604 </p>605 <p align="left" class="MsoNormal" style="margin: 0 30">606 <font size="2">607 <span style="font-family: Arial">608 609 </span>610 </font>611 <span style="font-size: 10.0pt; font-family: Arial">612 Sue Lippy, Executive Director613 </span>614 </p>615 <p align="left" class="MsoNormal" style="margin: 0 30">616 <span style="font-size: 10.0pt; font-family: Arial">617 618 Diakon619 </span>620 </p>621 <p align="left" class="MsoNormal" style="margin: 0 30">622 <span style="font-size: 10.0pt; font-family: Arial">623 624 </span>625 </p>626 <p align="left" class="MsoNormal" style="margin: 0 30">627 <b>628 <span style="font-family: Arial">629 <font color="#5E79BB" size="4">630 ■631 </font>632 <font color="#003366" size="4">633 </font>634 </span>635 </b>636 <span style="font-size: 10.0pt; font-family: Arial">637 "Calm professional manner of doing business."638 </span>639 </p>640 <p align="left" class="MsoNormal" style="margin: 0 30">641 <font size="2">642 <span style="font-family: Arial">643 644 </span>645 </font>646 <span style="font-size: 10.0pt; font-family: Arial">647 John Page, Project Manager648 </span>649 </p>650 <p align="left" class="MsoNormal" style="margin: 0 30">651 <span style="font-size: 10.0pt; font-family: Arial">652 653 McCorkel Construction Services, Inc.654 <br>655 </span>656 <font face="Arial" size="2">657 <br>658 659 </font>660 </p>661 </td>662 </tr>663 </tbody>664 </table>665 <table bgcolor="#E3E8EE" border="0" bordercolor="#111111" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">666 <tbody>667 <tr>668 <td style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium" width="100%">669 <font size="1">670 671 </font>672 <br>673 <font face="Arial" style="font-size: 9pt">674 675 <a style="text-decoration: none">676 HOME677 </a>678 </font>679 <font face="Arial" style="font-size: 6pt">680 681 </font>682 <font color="#999999" face="Arial" style="font-size: 9pt">683 I684 </font>685 <font face="Arial" style="font-size: 6pt">686 <font color="#5E79BB">687 </font>688 689 </font>690 <font face="Arial" style="font-size: 9pt">691 <a style="text-decoration: none">692 ABOUT SGS693 </a>694 </font>695 <font face="Arial" size="1">696 697 </font>698 <font face="Arial" style="font-size: 9pt">699 <font color="#999999">700 I701 </font>702 <font color="#5E79BB">703 </font>704 705 <a style="text-decoration: none">706 PORTFOLIO707 </a>708 </font>709 <font face="Arial" size="1">710 711 </font>712 <font color="#999999" face="Arial" style="font-size: 9pt">713 I714 </font>715 <font face="Arial" size="1">716 <font color="#5E79BB">717 </font>718 719 </font>720 <font face="Arial" style="font-size: 9pt">721 <a style="text-decoration: none">722 SERVICES 723 </a>724 <font color="#999999">725 I726 </font>727 728 <a style="text-decoration: none">729 IN THE NEWS730 </a>731 732 <font color="#999999">733 I734 </font>735 <font color="#5E79BB">736 </font>737 738 <a style="text-decoration: none">739 TESTIMONIALS 740 </a>741 <font color="#999999">742 I 743 </font>744 <a style="text-decoration: none">745 LINKS OF INTEREST746 </a>747 </font>748 <font face="Arial" style="font-size: 6pt">749 <br>750 </font>751 <font color="#999999" face="Arial" size="1">752 753 </font>754 <a style="text-decoration: none">755 <font face="Arial" size="1">756 757 </font>758 <font face="Arial" style="font-size: 9pt">759 CAREER 760 OPPORTUNITIES761 </font>762 </a>763 <font face="Arial" style="font-size: 9pt">764 765 <font color="#999999">766 I 767 <a style="text-decoration: none">768 TRADE SHOWS769 </a>770 </font>771 </font>772 <br>773 <font size="1">774 __________________________________________________________________________________________________________________________________________________________775 </font>776 <br>777 <font face="Arial" style="font-size: 6pt">778 779 </font>780 <font face="Arial" size="2">781 <br>782 </font>783 <font face="Arial" style="font-size: 9pt">784 ONE TYLER 785 COURT, CARLISLE, PA 17015 786 <b>787 : :788 </b>789 PHONE: [PHONE REDACTED]790 <b>791 : :792 </b>793 FAX: [PHONE REDACTED] 794 <b>795 : :796 </b>797 EMAIL:798 <a>799 [EMAIL REDACTED]800 </a>801 </font>802 <font face="Arial" style="font-size: 6pt">803 804 <br>805 806 </font>807 <br>808 <font size="1">809 810 </font>811 </td>812 </tr>813 </tbody>814 </table>815 </td>816 </tr>817 </tbody>818 </table>819 </center>820 </div>821 </body>822</html>823