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.
6379
1<!DOCTYPE html>2<html>3 <head>4 <meta content="width=device-width, initial-scale=1" name="viewport">5 <meta charset="utf-8">6 <title>7 aWATTar Backtesting8 </title>9 <style>10 body {11 background-color: #fff;12 margin: 20px;13 padding: 0;14}15 16body, td {17 font-family: verdana;18 font-size: 13px;19 line-height: 18px;20}21 22table {23 margin-left: 3em;24 text-align: left;25 padding: 2px;26}27table, th, td {28 border: 1px solid black;29 border-collapse: collapse;30 padding: 5px;31 text-align: right;32}33 34th {35 font-family: verdana;36 font-size: 13px;37 padding-left: 5px;38 padding-right: 5px;39 line-height: 18px;40}41 42.athead {43 font-family: verdana;44 font-size: 18px;45 padding-left: 5px;46 padding-right: 5px;47 padding-bottom: 8px;48}49 50a {51 text-decoration: none;52 color: #777;53}54 55a:hover {56 color: #999;57}58 59p {60 margin-bottom: 12px;61 margin-top: 12px;62}63 64form p {65 margin-bottom: 8px;66 margin-top: 8px;67}68 69li p {70 margin-bottom: 6px;71 margin-top: 6px;72}73 74form, h1, h2 {75 margin: 0px;76}77 78h1 {79 font-size: 18px;80 line-height: 28px;81}82 83h2 {84 font-size: 15px;85 line-height: 25px;86}87 88.spacer_right {89 margin-left: 70%;90 margin-right: 10px;91 float: right;92}93 94.container a {95 padding: .2em;96}97 98@media (pointer: coarse) {99 .container a {100 padding: .8em;101 }102}103.controls {104 display: flex;105 margin-top: 30px;106 margin-bottom: 30px;107 display: flex;108 justify-content: center;109}110button {111 background-color: #333;112 color: #fff;113 padding: 10px 20px;114 border: none;115 border-radius: 5px;116 cursor: pointer;117 margin: 0 10px;118}119 120.collapsible {121 background-color: #777;122 color: white;123 cursor: pointer;124 padding: 18px;125 width: 100%;126 border: none;127 text-align: left;128 outline: none;129 font-size: 15px;130}131 132.active, .collapsible:hover {133 background-color: #555;134}135 136.collapsible:after {137 content: '\002B';138 color: white;139 font-weight: bold;140 float: right;141 margin-left: 5px;142}143 144.active:after {145 content: "\2212";146}147 148.content {149 padding: 0 18px;150 max-height: 0;151 overflow-x: auto;152 overflow-y: hidden;153 transition: max-height 0.2s ease-out;154 background-color: #f1f1f1;155}156 157.tablethickborderright {158 border-right: 3px solid;159}160.tablethickborderbottom {161 border-bottom: 4px solid;162}163.diff-price-good {164 color: darkgreen;165}166.diff-price-bad {167 color: darkred;168}169 </style>170 </head>171 <body>172 <h3>173 aWATTar Backtesting174 </h3>175 <p>176 </p>177 <button class="collapsible">178 Um was geht es hier? →179 </button>180 <div class="content">181 <p>182 Dynamische Stromtarife haben keinen fixen Preis sondern einen Stunden variierenden Preis der sich nach den Ergebnissen der Strombörse EPEX SPOT ergibt.183 </p>184 <p>185 Durch bewusstes Anwenden von Haushaltsgeräten wie Waschmaschine oder Geschirrspüler mittels Zeitvorwahl kann man damit seinen persönlichen Strompreis verringern. Noch besser funktioniert das mit großen Verbraucher wie Elektroauto oder186 <a>187 Wärmepumpe188 </a>189 .190 Der Börsenpreis ist in der Regel niedriger wenn viele erneuerbare Energien im Netz verfügbar sind, aber keine Abnehmer finden.191 Dynamische Stromtarife sind daher eines der vielen Puzzlesteine die wir für die Energiewende benötigen.192 </p>193 <p>194 Backtesting ist ein Vorgang um ein Modell auf historische Daten zu testen. Mit diesem Tool kann man die Verbrauchsdaten seines Netzanbieters uploaden (siehe Anleitungen weiter unten), welches dann den erzielten Strompreis berechnet.195 </p>196 <p>197 Hier ein Beispiel wie sowas aussieht:198 </p>199 <p>200 <img src="rick.jpg" style="max-width: 100%; height: auto;">201 </p>202 </div>203 <p>204 Verbrauchsdaten vom Netzbetreiber uploaden (Beispieldatensätze gibt es205 <a>206 hier207 </a>208 zum Herunterladen):209 </p>210 <form id="file-form">211 <input id="file-input" name="file-input" type="file">212 </form>213 <p id="warningHolder" style="color: red; visibility: hidden;">214 warning place holder.215 </p>216 <canvas id="awattarChart">217 </canvas>218 <div class="controls">219 <button id="prevBtn" style="visibility: hidden;">220 prev221 </button>222 <p id="graphDescr" style="visibility: hidden;">223 nothing224 </p>225 <button id="nextBtn" style="visibility: hidden;">226 next227 </button>228 </div>229 <button class="collapsible" id="costslblMonthly" style="visibility: hidden;">230 Übersicht Energiekosten/Einspeisung monatlich →231 </button>232 <div class="content">233 <table id="costsMonthly" style="visibility: hidden;">234 </table>235 </div>236 <button class="collapsible" id="costslblDaily" style="visibility: hidden;">237 Übersicht Energiekosten/Einspeisung täglich →238 </button>239 <div class="content">240 <table id="costsDaily" style="visibility: hidden;">241 </table>242 </div>243 <p>244 <sup>245 1246 </sup>247 Der H0-Durchschnittspreis ergibt sich aus dem Verbrauch laut dem248 <a>249 H0 Standardprofil250 </a>251 im selben Zeitraum und dient somit als Benchmark. Erzielt man einen Durchschnittspreis unter dem H0 Ø hat man252 <em>253 sehr254 </em>255 gute Vorraussetzungen um von einem dynamischen Stromtarif zu profitieren, ist aber nicht notwendig um generell davon zu profitieren.256 </p>257 <h4>258 Disclaimer259 </h4>260 Keine Garantie auf Richtigkeit der dargestellten Daten.261 <h3>262 Netzbetreiber Anleitungen263 </h3>264 <button class="collapsible">265 Netz NÖ →266 </button>267 <div class="content">268 <ol>269 <li>270 <p>271 Gehe auf272 <a>273 https://smartmeter.netz-noe.at274 </a>275 </p>276 </li>277 <li>278 <p>279 Einloggen280 </p>281 </li>282 <li>283 <p>284 Tab285 <i>286 Verbrauch287 </i>288 auswählen289 </p>290 </li>291 <li>292 <p>293 Richtigen Zähler auswählen unter294 <i>295 Vertragskonto296 </i>297 . Achtung, nicht den Einspeisepunkt wählen.298 </p>299 </li>300 </ol>301 <p>302 <b>303 Hinweis304 </b>305 : Die 15-min-Profilwerte müssen explizit aktiviert werden, siehe Spalte "Opt-in" im Screenshot.306 Ist das nicht der Fall, kann die heruntergeladene CSV trotzdem nur Tageswerte enthalten. Solche Einträge werden von diesem Tool ignoriert.307 Es kann auch sein, dass der Inhalt gemischt ist.308 Beispiel: Opt-In wurde am 15. September gemacht, dann ist der Verbrauch bis zum Stichtag als Tageswerte enthalt, danach folgen erst die 15-min-Profilwerte. Ersteres wird vom Tool ignoriert.309 <img src="rick.jpg">310 </p>311 </div>312 <button class="collapsible">313 Netz OÖ →314 </button>315 <div class="content">316 <ol>317 <li>318 <p>319 Download der 15-Minutenwerte über das320 <a>321 NetzOÖ e-Service-Portal322 </a>323 </p>324 </li>325 <li>326 <p>327 Vertrag auswählen328 </p>329 </li>330 <li>331 <p>332 Verbrauchsübersicht333 </p>334 </li>335 <li>336 <p>337 Zeitraum auswählen338 </p>339 </li>340 </ol>341 </div>342 <button class="collapsible">343 Kärnten Netz →344 </button>345 <div class="content">346 <ol>347 <li>348 <p>349 Gehe auf350 <a>351 kaerntennetz.at352 </a>353 </p>354 </li>355 <li>356 <p>357 Kundenportal358 </p>359 </li>360 <li>361 <p>362 Einloggen363 </p>364 </li>365 <li>366 <p>367 "Profildownload" unter "meine.messwerte" auswählen368 </p>369 </li>370 </ol>371 </div>372 <button class="collapsible">373 Salzburg Netz →374 </button>375 <div class="content">376 <ol>377 <li>378 <p>379 Login auf380 <a>381 https://portal.salzburgnetz.at382 </a>383 </p>384 </li>385 <li>386 <p>387 Klick auf Anlagendetails388 </p>389 </li>390 <li>391 <p>392 Anlage bzw. Vertrag auswählen393 </p>394 </li>395 <li>396 <p>397 Daten auswählen und über das "Burger Menü" den Download anstoßen398 </p>399 <img src="rick.jpg">400 </li>401 </ol>402 </div>403 <button class="collapsible">404 TINETZ →405 </button>406 <div class="content">407 <ol>408 <li>409 <p>410 Einloggen beim Tinetz Kundenportal:411 <a>412 https://kundenportal.tinetz.at/413 </a>414 </p>415 </li>416 <li>417 <p>418 Unter "Zähler" auf Verbrauchshistorie gehen419 </p>420 <img src="rick.jpg">421 </li>422 <li>423 <p>424 Zeitraum auswählen425 </p>426 <img src="rick.jpg">427 </li>428 <li>429 <p>430 Herunterladen, "Rohdaten als CSV"431 </p>432 <img src="rick.jpg">433 </li>434 </ol>435 </div>436 <button class="collapsible">437 Wiener Netze →438 </button>439 <div class="content">440 <ol>441 <li>442 <p>443 Gehe auf444 <a>445 smartmeter-web.wienernetze.at446 </a>447 </p>448 </li>449 <li>450 <p>451 Klicke auf452 <i>453 Datenexport454 </i>455 </p>456 </li>457 <li>458 <p>459 Zeitfenster wählen460 </p>461 </li>462 <li>463 <p>464 <i>465 Viertelstundewerte466 </i>467 auswählen468 </p>469 </li>470 </ol>471 </div>472 <button class="collapsible">473 Clam Strom →474 </button>475 <div class="content">476 <ol>477 <li>478 <p>479 Gehe auf480 <a>481 https://www.endkundenwebportal.at482 </a>483 </p>484 </li>485 <li>486 <p>487 Wähle488 <i>489 Strom490 </i>491 </p>492 </li>493 <li>494 <p>495 Zeitfenster auf496 <i>497 Tag498 </i>499 einstellen (nur so werden 15-Minuten Werte geliefert!)500 </p>501 </li>502 <li>503 <p>504 Auf505 <i>506 Angezeigte Werte als CSV-Datei speichern507 </i>508 klicken509 </p>510 </li>511 </ol>512 </div>513 Andere Netzbetreiber die funktionieren, aber keine Anleitung vorhanden:514 <ol>515 <li>516 Ebner Strom517 </li>518 <li>519 Energienetze Steiermark520 </li>521 <li>522 Innsbrucker Kommunalbetriebe (IKB)523 </li>524 <li>525 LinzAG526 </li>527 </ol>528 Sollte ein Netzbetreiber der funktioniert nicht hier aufgelistet sein würde ich mich über eine Nachricht freuen (siehe für Kontaktdaten ganz unten).529 <h3>530 F.A.Q.531 </h3>532 <ul>533 <li>534 <b>535 <i>536 Es funktioniert nicht!537 </i>538 </b>539 Bitte ein neues Issue hier öffnen:540 <a>541 github.com/awattar-backtesting/awattar-backtesting.github.io/issues542 </a>543 </li>544 <li>545 <b>546 <i>547 Mein Netzbetreiber wird noch nicht unterstützt548 </i>549 </b>550 Bitte ebenfalls ein Issue eröffnen und die Datei deines Netzbetreibers anhängen. Oder am besten gleich ein PR :-)551 </li>552 <li>553 <b>554 <i>555 Was passiert mit die Daten die hier upgeloaded werden?556 </i>557 </b>558 Die bleiben lokal, d.h. die verlassen den Computer nicht. Gerne kann das auch im Source Code verifiziert werden.559 </li>560 <li>561 <b>562 <i>563 Wirst Du von aWATTar bezahlt?564 </i>565 </b>566 Nein, und auch von keinem anderen Energielieferanten, Netzanbieter oder ähnlichem.567 </li>568 </ul>569 </body>570</html>571