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>2<html>3 <head>4 <meta charset="utf-8">5 <meta content="width=device-width, initial-scale=1.0" name="viewport">6 <title>7 permafrost.today is not found8 </title>9 <style>10 * {margin: 0;padding: 0;}11 12body {13background: #ccc;14font-family: Arial, Helvetica, sans-serif;15font-size: 11pt;16text-align: center;17}18 19h1 {20margin: 10px auto 20px 10px;21color: #3498db;22}23 24p {25display: inline-block;26min-width: 200px;27margin: auto 30px 10px 30px;28}29 30.container {31position: relative;32text-align: left;33min-height: 200px;34max-width: 800px;35min-width: 450px;36margin: 15% auto 0px auto;37background: #FFFFFF;38border-radius: 20px;39padding: 20px;40box-sizing: border-box;41}42 43img.logo {44width: auto;45max-height: 50px;46margin-top: 30px;47border: 0;48}49 50.logocont {51text-align: center;52}53 54.langselect {55position: absolute;56top: 10px;57right: 10px;58}59 60.langselect img {61position: relative;62width: auto;63border: 0;64margin: 2px;65height: 15px;66}67 68.footer {69color: #aaa;70margin: 1em auto 0px auto;71font-size: 8pt;72text-align: center;73min-width: 450px;74}75 </style>76 </head>77 <body>78 <div class="container">79 <h1 id="t">80 permafrost.today is not found81 </h1>82 <p id="m">83 permafrost.today is not found in the configuration on this server. It might be because of a newly changed or wrong DNS pointer, or a reconfiguration of the server.84 <br>85 <br>86 Please contact customer support if the problem persists.87 </p>88 <div class="logocont">89 <a id="l">90 <img class="logo" id="i" src="rick.jpg">91 </a>92 </div>93 <div class="langselect" id="ls" style>94 <img alt="Norsk" onclick="setLang('no')" src="rick.jpg" title="Norsk">95 <img alt="Svenska" onclick="setLang('sv')" src="rick.jpg" title="Svenska">96 <img alt="English" onclick="setLang('en')" src="rick.jpg" title="English">97 </div>98 </div>99 <div class="footer">100 Domeneshop AS © 2023101 </div>102 </body>103</html>104