SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6622
1<!DOCTYPE html>2<html lang="en">3 <head>4 <title>5 KISS - home6 </title>7 <meta charset="utf-8">8 <meta content="Kiss Linux is a meta-distribution for the x86_64 architecture with a focus on simplicity, sustainability and user freedom. The distribution was created by [Name Redacted] who also acts as its sole developer." name="Description">9 <meta content="width=device-width,initial-scale=1" name="viewport">10 <style>11 body{overflow-y:scroll;font:16px monospace,monospace}pre{margin:0;overflow-x:hidden}.t{text-decoration:none}@media(max-width:999px){body{font-size:1.94vw}}@media(prefers-color-scheme:dark){body{background:#000;color:#fff}a{color:#6CF}#l{color:#F33}#g{filter:invert(1)}}img,#b{max-width:80ch}span{display:inline-block}12 </style>13 </head>14 <body>15 <div id="a" style="display:table;margin:16px auto">16 <div id="b">17 <pre><span><a class="t" style="color:#a00">18|/19|\ISS</a> <a>Tidbits</a> <a>Posts</a> <a>Answers</a> <a>Install</a> <a>Wiki</a> <a>Contact</a> <a>Donate</a> </span><span style="image-rendering:crisp-edges;vertical-align:sub"><a><img alt="GitHub" id="g" src="rick.jpg"></a></span>20 21 22+------------------------------------------------------------------------------+23| |24| (Created by <a>[Name Redacted]</a>) |25| |26| |27| |28| |/ |29| |\ISS LINUX |30| |31| A Linux(R) meta-distribution for the x86_64 architecture |32| with a focus on simplicity, sustainability and user freedom. |33| |34| |35| ____ |36| | | |37| .--------------------------------------------------------.| | |38| | | | |39| | "whatsoever a man soweth, that shall he also reap." | | |40| | ._|____|_. |41| '-------------------------------------------------------\\|o_o | |42| |:_/ | |43| // \ \ |44| (| | ) |45+------------------------------------------------------------------------------+46 47* Overview ............................................................... [<a class="t">001</a>]48* Software Distribution Model ............................................ [<a class="t">002</a>]49* The-Official Repositories .............................................. [<a class="t">003</a>]50* Package System ......................................................... [<a class="t">004</a>]51* Package Manager ........................................................ [<a class="t">005</a>]52* Further Reading ........................................................ [<a class="t">006</a>]53 54 55<span id="001">[<a class="t">001</a>]</span> Overview56________________________________________________________________________________57 58Kiss Linux™ is a meta-distribution for the x86_64 architecture with a focus on59simplicity, sustainability and user freedom. The project was created by60[Name Redacted] who also acts as its sole developer and BDFL [<a class="t">0</a>].61 62The distribution is designed to be maintainable by a single person and to this63end has no infrastructure, backend or monetary running costs. Further, all64installations of KISS contain everything needed to continue its development.65 66The user is provided with three things.67 681. The Official Repositories - An extensible base including a fully X11-less69 Wayland environment, modern web browser, media player and everything needed70 for this system to rebuild (and update) itself (in under 120 packages).71 722. The Package Management System - A pleasant to work with and concise73 package format powered by a small, portable and self-contained package74 manager (written in POSIX shell).75 763. The Freedom To Go It Alone - Users can choose to maintain their system77 themselves thus freeing them from all external influence. The system then78 belongs to the user and they become totally self-reliant.79 80 81<span id="002">[<a class="t">002</a>]</span> Software Distribution Model82________________________________________________________________________________83 84The distribution is "rolling release" [<a class="t">1</a>] (install once, update perpetually)85with the compilation process taking place on the user's machine. Updates to the86distribution merely contain instructions for how each package is built.87 88This model gives the user control over the compilation process while also89removing the need for the distribution to have the necessary infrastructure90to churn out and distribute binaries on a daily basis.91 92 93<span id="003">[<a class="t">003</a>]</span> The Official Repositories94________________________________________________________________________________95 96The problem with monolithic repositories is that they have no clear end. They97have infinite growth possibility, very broad scope and rely on volunteer effort98to keep everything fresh. They become harder to maintain over time and unless99their growth is checked, will eventually become unsustainable.100 101Kiss Linux's repositories are instead designed to be small and understandable.102Instead of attempting to package the world they act as an extensible base which103users can build upon to suit their needs.104 105To best illustrate, here is the entire thing (121 components) (24/09/2021).106 107baseinit baselayout binutils bison bkeymaps busybox curl flex gcc git grub kiss108linux-headers m4 make musl openssl pigz xz zlib adwaita-icon-theme alsa-lib109alsa-utils atk bzip2 cairo cbindgen ccache clang cmake dhcpcd dosfstools110e2fsprogs efibootmgr efivar eiwd expat ffmpeg firefox firefox-privacy111fontconfig freetype-harfbuzz gdk-pixbuf glib gnugrep gnupg1 gtk+3112hicolor-icon-theme intel-vaapi-driver json-c kirc lame libass libelf libffi113libjpeg-turbo libogg libpng libtheora libudev-zero libva libva-utils libvorbis114libvpx libwebp llvm man-pages mandoc mdevd mesa meson mold mpv mutt nasm ncurses115nodejs opendoas openresolv openssh opus pango pcre perl pkgconf python rust116samurai scdoc sqlite ssu strace ttf-croscore tzdata util-linux vim117wpa_supplicant x264 x265 xvidcore zstd foot foot-pgo grim libdrm libinput118libpciaccess libseat libxkbcommon pixman slurp sway sway-no-seat sway-tiny119wayland wayland-protocols wbg wl-clipboard wlroots wlsunset xkeyboard-config120 121The distribution explicitly excludes logind, udev, dbus, systemd, polkit,122pulseaudio, electron and all desktop environments. This software is either123with lock-in, too complex or otherwise out of scope.124 125Further reading: @/<a>wiki</a>126 127 128<span id="004">[<a class="t">004</a>]</span> Package System129________________________________________________________________________________130 131The system is based around directories and files. A repository (directory)132contains packages (directories) which contain information (files). Repositories133can be stored anywhere and their use is determined by a search path.134 135As software is compiled locally, there is no line drawn between the "frontend"136and "backend", they are one and the same. Learning the package management137system also teaches you how to develop the distribution.138 139* repository/140 * package-a/141 * build142 * checksums143 * depends144 * sources145 * version146 * package-b/147 * build148 * checksums149 * patches/150 * 0001-fix-segfault.patch151 * 0002-no-x11.patch152 * sources153 * version154 155Each file serves a specific purpose and files can be omitted when the package156has no use for them. Files can be symbolically linked between packages to157deduplicate otherwise identical information.158 159Further reading: @/<a>wiki/package-system</a>160 161 162<span id="005">[<a class="t">005</a>]</span> Package Manager163________________________________________________________________________________164 165The package manager (also named 'kiss') is a tiny, self-contained and POSIX166compliant shell script written with portability in mind. It should run in all167environments with a POSIX shell and core utilities.168 169There is no configuration file and no weird arguments to memorize. Interaction170is done via "actions" with each action taking a list of packages to operate on.171Each action also has a single letter alias (build == b).172 173* kiss [a|b|c|d|i|l|r|s|u|U|v] [pkg]...174* alternatives List and swap alternatives175* build Build packages176* checksum Generate checksums177* download Download sources178* install Install packages179* list List installed packages180* remove Remove packages181* search Search for packages182* update Update the system and repositories183* Upgrade Upgrade the system184* version Package manager version185 186Further reading: @/<a>wiki/package-manager</a>187 188 189<span id="006">[<a class="t">006</a>]</span> Further Reading190________________________________________________________________________________191 192- @/<a>answers</a> - Answers to the most common questions.193- @/<a>wiki</a> - General distribution documentation.194- @/<a>wiki/package-system</a> - The package management system in detail.195- @/<a>wiki/package-manager</a> - The package manager's documentation.196- @/<a>wiki/website</a> - About the website itself.197- @/<a>contact</a> - Get in touch with Kiss Linux.198 199<span id="0">[<a class="t">0</a>]</span> <a>https://en.wikipedia.org/wiki/Benevolent_dictator_for_life</a>200<span id="1">[<a class="t">1</a>]</span> <a>https://en.wikipedia.org/wiki/Rolling_release</a>201 202 203________________________________________________________________________________204 205[Name Redacted] (C) 2019-2021206 207The registered trademark Linux(R) is used pursuant to a sublicense from the208Linux Foundation, the exclusive licensee of Linus Torvalds, owner of the mark209on a world­wide basis.210 211</pre>212 </div>213 </div>214 </body>215</html>216 