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 lang="en">3 <head>4 <style>5 :root {6 --body-background-color: hsl(0, 0%, 100%);7 --body-color: hsl(0, 0%, 25%);8 --link-color: hsl(210, 90%, 50%);9 --textarea-background-color: hsl(0, 0%, 95%);10 --button-background-color: hsl(0, 0%, 92.5%);11 --button-background-color-hover: hsl(0, 0%, 85%);12 --button-background-color-active: hsl(0, 0%, 77.5%);13}14 15@media (prefers-color-scheme: dark) {16 :root {17 --body-background-color: hsl(180, 5%, 15%);18 --body-color: hsl(0, 0%, 80%);19 --link-color: hsl(200, 50%, 60%);20 --textarea-background-color: hsl(180, 5%, 22.5%);21 --button-background-color: hsl(180, 5%, 27.5%);22 --button-background-color-hover: hsl(180, 5%, 33%);23 --button-background-color-active: hsl(180, 5%, 22.5%);24 }25}26 27body {28 background-color: var(--body-background-color);29 color: var(--body-color);30 /* Use a modern font stack inspired by Bootstrap 4. */31 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,32 "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",33 "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";34 max-width: 1200px;35 margin: 0 auto;36 padding: 0 20px;37 line-height: 1.5;38}39 40h1 {41 text-align: center;42}43 44a {45 color: var(--link-color);46 text-decoration: none;47}48 49a:hover {50 text-decoration: underline;51}52 53textarea {54 color: var(--body-color);55 background-color: var(--textarea-background-color);56 font-size: 14px;57 padding: 6px;58}59 60button {61 background-color: var(--button-background-color);62 color: var(--body-color);63 border: none;64 border-radius: 3px;65 padding: 8px 14px;66}67 68button:hover {69 background-color: var(--button-background-color-hover);70}71 72button:active {73 background-color: var(--button-background-color-active);74}75 76@media (min-width: 800px) {77 .grid {78 display: grid;79 grid-template-columns: repeat(2, 1fr);80 grid-gap: 20px;81 }82 83 .preview {84 position: fixed;85 left: calc(50% + 20px);86 width: calc(50% - 60px);87 top: 1.6rem;88 }89}90 91label {92 /* Prevent selecting the text when double-clicking. */93 user-select: none;94}95 96.option-label {97 display: block;98 margin-bottom: 10px;99 padding: 5px 10px;100 border-radius: 3px;101 background-color: var(--button-background-color);102}103 104.option-label:hover {105 background-color: var(--button-background-color-hover);106}107 108.option-label:active {109 background-color: var(--button-background-color-active);110}111 </style>112 <meta charset="utf-8">113 <meta content="width=device-width, initial-scale=1" name="viewport">114 <meta content="Hugo Locurcio" name="author">115 <meta content="Generate SCons options to compile custom export templates with size optimizations." name="description">116 <meta content="#3d8fcc" name="theme-color">117 <title>118 Godot build options generator119 </title>120 </head>121 <body>122 <main x-data="buildOptionsGenerator()">123 <div class="grid">124 <div class="options">125 <h1>126 Godot build options generator127 </h1>128 <em style="opacity: 0.7">129 Last updated for130 <strong>131 Godot 4.2.x132 </strong>133 . This generator may134 work with other Godot versions, but certain options may not have an135 effect.136 </em>137 <p>138 This tool generates SCons custom option files to build smaller139 export templates. After downloading a140 <code>141 custom.py142 </code>143 file,144 place it at the root of your Godot source repository and compile145 export templates for the platforms you need. Once this is done,146 you'll only have to specify the147 <code>148 platform=<platform> target=release149 </code>150 options on the151 SCons command line. See152 <a>153 Optimizing a build for size154 </a>155 in the Godot documentation for more information.156 </p>157 <p>158 <strong>159 Note:160 </strong>161 Since this tool is dedicated to building162 smaller export templates, it doesn't list modules that are only163 compiled in editor builds.164 </p>165 <h2>166 Select options and modules167 </h2>168 <template :key="option.id" x-for="(option, index) in options">169 <label class="option-label">170 <input type="checkbox" x-model="option.enabled">171 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">172 </span>173 <!-- Visually align the description with the name. -->174 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">175 </span>176 <input type="text" x-model="option.value" x-show="option.text & option.enabled">177 </label>178 </template>179 <label class="option-label">180 <input type="checkbox" x-model="option.enabled">181 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">182 Extra suffix183 </span>184 <!-- Visually align the description with the name. -->185 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">186 Changes the "custom_build" suffix. Useful for adding your "game_title" to a build.187 </span>188 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">189 </label>190 <label class="option-label">191 <input type="checkbox" x-model="option.enabled">192 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">193 Production194 </span>195 <!-- Visually align the description with the name. -->196 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">197 Set defaults to build Godot for use in production.198 </span>199 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">200 </label>201 <label class="option-label">202 <input type="checkbox" x-model="option.enabled">203 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">204 Disable 3D205 </span>206 <!-- Visually align the description with the name. -->207 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">208 Disable 3D nodes for a smaller binary.209 </span>210 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">211 </label>212 <label class="option-label">213 <input type="checkbox" x-model="option.enabled">214 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">215 Optimize for size216 </span>217 <!-- Visually align the description with the name. -->218 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">219 Optimize the compiled binary for size instead of speed.220 </span>221 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">222 </label>223 <label class="option-label">224 <input type="checkbox" x-model="option.enabled">225 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">226 Enable double-precision floats227 </span>228 <!-- Visually align the description with the name. -->229 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">230 Increase precision for large-scale worlds. This has a performance impact and requires GDExtensions specifically compiled for it (i.e.231 </span>232 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">233 </label>234 <label class="option-label">235 <input type="checkbox" x-model="option.enabled">236 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">237 Disable advanced GUI238 </span>239 <!-- Visually align the description with the name. -->240 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">241 Disable advanced GUI nodes and behaviors such as Tree and GraphEdit.242 </span>243 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">244 </label>245 <label class="option-label">246 <input type="checkbox" x-model="option.enabled">247 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">248 Enable deprecated features249 </span>250 <!-- Visually align the description with the name. -->251 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">252 Disabling deprecated features can make the binary slightly smaller.253 </span>254 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">255 </label>256 <label class="option-label">257 <input type="checkbox" x-model="option.enabled">258 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">259 Enable Minizip260 </span>261 <!-- Visually align the description with the name. -->262 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">263 Required to use the ZIPReader and ZIPWriter classes. Also required to run projects that use data packed in a ZIP archive instead of a PCK.264 </span>265 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">266 </label>267 <label class="option-label">268 <input type="checkbox" x-model="option.enabled">269 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">270 Enable Brotli271 </span>272 <!-- Visually align the description with the name. -->273 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">274 Required to use Brotli (de)compression. Also required to use fonts in the WOFF2 format.275 </span>276 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">277 </label>278 <label class="option-label">279 <input type="checkbox" x-model="option.enabled">280 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">281 Enable Vulkan282 </span>283 <!-- Visually align the description with the name. -->284 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">285 Required to use the Forward+ and Mobile rendering methods with Vulkan.286 </span>287 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">288 </label>289 <label class="option-label">290 <input type="checkbox" x-model="option.enabled">291 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">292 Enable OpenGL293 </span>294 <!-- Visually align the description with the name. -->295 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">296 Required to use the Compatibility rendering method with OpenGL 3.3/OpenGL ES 3.0/WebGL 2.0.297 </span>298 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">299 </label>300 <label class="option-label">301 <input type="checkbox" x-model="option.enabled">302 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">303 Enable module: Basis Universal304 </span>305 <!-- Visually align the description with the name. -->306 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">307 Required to load textures imported as Basis Universal.308 </span>309 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">310 </label>311 <label class="option-label">312 <input type="checkbox" x-model="option.enabled">313 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">314 Enable module: BMP315 </span>316 <!-- Visually align the description with the name. -->317 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">318 Required to load BMP images.319 </span>320 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">321 </label>322 <label class="option-label">323 <input type="checkbox" x-model="option.enabled">324 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">325 Enable module: Camera326 </span>327 <!-- Visually align the description with the name. -->328 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">329 Required for webcam support (unrelated to the Camera2D/Camera3D nodes).330 </span>331 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">332 </label>333 <label class="option-label">334 <input type="checkbox" x-model="option.enabled">335 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">336 Enable module: CSG337 </span>338 <!-- Visually align the description with the name. -->339 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">340 Required to use Constructive Solid Geometry nodes.341 </span>342 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">343 </label>344 <label class="option-label">345 <input type="checkbox" x-model="option.enabled">346 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">347 Enable module: DDS348 </span>349 <!-- Visually align the description with the name. -->350 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">351 Required to load DirectDraw Surface images.352 </span>353 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">354 </label>355 <label class="option-label">356 <input type="checkbox" x-model="option.enabled">357 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">358 Enable module: ENet359 </span>360 <!-- Visually align the description with the name. -->361 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">362 Required to use NetworkedMultiplayerENet and NetworkedMultiplayerPeer.363 </span>364 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">365 </label>366 <label class="option-label">367 <input type="checkbox" x-model="option.enabled">368 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">369 Enable module: FreeType370 </span>371 <!-- Visually align the description with the name. -->372 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">373 Required to render DynamicFonts. Bitmap fonts can still be used without FreeType.374 </span>375 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">376 </label>377 <label class="option-label">378 <input type="checkbox" x-model="option.enabled">379 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">380 Enable module: GDScript381 </span>382 <!-- Visually align the description with the name. -->383 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">384 Required to run scripts written in GDScript.385 </span>386 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">387 </label>388 <label class="option-label">389 <input type="checkbox" x-model="option.enabled">390 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">391 Enable module: GLTF392 </span>393 <!-- Visually align the description with the name. -->394 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">395 Required to load non-imported 3D scenes in the glTF format.396 </span>397 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">398 </label>399 <label class="option-label">400 <input type="checkbox" x-model="option.enabled">401 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">402 Enable module: GridMap403 </span>404 <!-- Visually align the description with the name. -->405 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">406 Required to use GridMap nodes.407 </span>408 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">409 </label>410 <label class="option-label">411 <input type="checkbox" x-model="option.enabled">412 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">413 Enable module: HDR414 </span>415 <!-- Visually align the description with the name. -->416 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">417 Required to load Radiance HDR images.418 </span>419 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">420 </label>421 <label class="option-label">422 <input type="checkbox" x-model="option.enabled">423 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">424 Enable module: JPG425 </span>426 <!-- Visually align the description with the name. -->427 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">428 Required to load JPEG images.429 </span>430 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">431 </label>432 <label class="option-label">433 <input type="checkbox" x-model="option.enabled">434 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">435 Enable module: JSON-RPC436 </span>437 <!-- Visually align the description with the name. -->438 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">439 Required to use the JSONRPC class.440 </span>441 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">442 </label>443 <label class="option-label">444 <input type="checkbox" x-model="option.enabled">445 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">446 Enable module: KTX447 </span>448 <!-- Visually align the description with the name. -->449 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">450 Required to load Khronos KTX images.451 </span>452 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">453 </label>454 <label class="option-label">455 <input type="checkbox" x-model="option.enabled">456 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">457 Enable module: mbedTLS458 </span>459 <!-- Visually align the description with the name. -->460 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">461 Required to make secure requests with HTTPClient, HTTPRequest and WebSocket classes.462 </span>463 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">464 </label>465 <label class="option-label">466 <input type="checkbox" x-model="option.enabled">467 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">468 Enable module: meshoptimizer469 </span>470 <!-- Visually align the description with the name. -->471 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">472 Required for optimized SurfaceTool usage, including automatic LOD generation.473 </span>474 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">475 </label>476 <label class="option-label">477 <input type="checkbox" x-model="option.enabled">478 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">479 Enable module: minimp3480 </span>481 <!-- Visually align the description with the name. -->482 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">483 Required to play back MP3 sounds in AudioStreamPlayer.484 </span>485 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">486 </label>487 <label class="option-label">488 <input type="checkbox" x-model="option.enabled">489 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">490 Enable module: Mobile VR491 </span>492 <!-- Visually align the description with the name. -->493 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">494 Required to use VR on Android and iOS.495 </span>496 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">497 </label>498 <label class="option-label">499 <input type="checkbox" x-model="option.enabled">500 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">501 Enable module: Mono502 </span>503 <!-- Visually align the description with the name. -->504 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">505 Required to run scripts written in C#. (Godot uses .NET in 4.x, despite the option name mentioning Mono.)506 </span>507 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">508 </label>509 <label class="option-label">510 <input type="checkbox" x-model="option.enabled">511 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">512 Enable module: MSDFGen513 </span>514 <!-- Visually align the description with the name. -->515 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">516 Required to use Multichannel Signed Distance Fields on fonts.517 </span>518 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">519 </label>520 <label class="option-label">521 <input type="checkbox" x-model="option.enabled">522 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">523 Enable module: Multiplayer524 </span>525 <!-- Visually align the description with the name. -->526 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">527 Required to use the multiplayer replication system (RPCs).528 </span>529 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">530 </label>531 <label class="option-label">532 <input type="checkbox" x-model="option.enabled">533 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">534 Enable module: Navigation535 </span>536 <!-- Visually align the description with the name. -->537 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">538 Required to use NavigationServer.539 </span>540 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">541 </label>542 <label class="option-label">543 <input type="checkbox" x-model="option.enabled">544 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">545 Enable module: Noise546 </span>547 <!-- Visually align the description with the name. -->548 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">549 Required to use Noise, FastNoiseLite and NoiseTextures that rely on it.550 </span>551 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">552 </label>553 <label class="option-label">554 <input type="checkbox" x-model="option.enabled">555 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">556 Enable module: OGG557 </span>558 <!-- Visually align the description with the name. -->559 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">560 Required by `vorbis` for Ogg Vorbis audio playback. See also `stb_vorbis`.561 </span>562 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">563 </label>564 <label class="option-label">565 <input type="checkbox" x-model="option.enabled">566 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">567 Enable module: OpenXR568 </span>569 <!-- Visually align the description with the name. -->570 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">571 Required to use virtual reality and augmented reality with OpenXR.572 </span>573 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">574 </label>575 <label class="option-label">576 <input type="checkbox" x-model="option.enabled">577 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">578 Enable module: Raycast579 </span>580 <!-- Visually align the description with the name. -->581 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">582 Required to use occlusion culling. (This option is disabled by default in web exports to reduce binary size.)583 </span>584 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">585 </label>586 <label class="option-label">587 <input type="checkbox" x-model="option.enabled">588 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">589 Enable module: RegEx590 </span>591 <!-- Visually align the description with the name. -->592 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">593 Required to parse regular expressions with the RegEx class.594 </span>595 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">596 </label>597 <label class="option-label">598 <input type="checkbox" x-model="option.enabled">599 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">600 Enable module: Squish601 </span>602 <!-- Visually align the description with the name. -->603 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">604 Required to decompress images compressed with Squish (including S3TC VRAM compression).605 </span>606 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">607 </label>608 <label class="option-label">609 <input type="checkbox" x-model="option.enabled">610 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">611 Enable module: SVG612 </span>613 <!-- Visually align the description with the name. -->614 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">615 Required to load non-imported SVG images.616 </span>617 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">618 </label>619 <label class="option-label">620 <input type="checkbox" x-model="option.enabled">621 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">622 Enable module: Text Server Advanced623 </span>624 <!-- Visually align the description with the name. -->625 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">626 Required to use TextServerAdvanced, which is the default TextServer. Supports right-to-left typesetting and complex scripts.627 </span>628 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">629 </label>630 <label class="option-label">631 <input type="checkbox" x-model="option.enabled">632 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">633 Enable module: Text Server Fallback634 </span>635 <!-- Visually align the description with the name. -->636 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">637 Required to use TextServerFallback. Does not support right-to-left typesetting or complex scripts.638 </span>639 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">640 </label>641 <label class="option-label">642 <input type="checkbox" x-model="option.enabled">643 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">644 Enable module: TGA645 </span>646 <!-- Visually align the description with the name. -->647 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">648 Required to load TrueVision Targa images.649 </span>650 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">651 </label>652 <label class="option-label">653 <input type="checkbox" x-model="option.enabled">654 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">655 Enable module: Theora656 </span>657 <!-- Visually align the description with the name. -->658 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">659 Required to play back Ogg Theora videos in VideoStreamPlayer/VideoPlayer.660 </span>661 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">662 </label>663 <label class="option-label">664 <input type="checkbox" x-model="option.enabled">665 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">666 Enable module: UPnP667 </span>668 <!-- Visually align the description with the name. -->669 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">670 Required to use the UPNP classes for network discovery and automatic port forwarding.671 </span>672 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">673 </label>674 <label class="option-label">675 <input type="checkbox" x-model="option.enabled">676 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">677 Enable module: V-HACD678 </span>679 <!-- Visually align the description with the name. -->680 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">681 Required to create convex collision shapes in Mesh at runtime. (Not required if convex shapes were created on import.)682 </span>683 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">684 </label>685 <label class="option-label">686 <input type="checkbox" x-model="option.enabled">687 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">688 Enable module: Vorbis689 </span>690 <!-- Visually align the description with the name. -->691 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">692 Required to play back Ogg Vorbis sounds in AudioStreamPlayer. See also `ogg`.693 </span>694 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">695 </label>696 <label class="option-label">697 <input type="checkbox" x-model="option.enabled">698 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">699 Enable module: WebRTC700 </span>701 <!-- Visually align the description with the name. -->702 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">703 Required to use WebRTC connections.704 </span>705 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">706 </label>707 <label class="option-label">708 <input type="checkbox" x-model="option.enabled">709 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">710 Enable module: WebSocket711 </span>712 <!-- Visually align the description with the name. -->713 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">714 Required to use WebSocket connections.715 </span>716 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">717 </label>718 <label class="option-label">719 <input type="checkbox" x-model="option.enabled">720 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">721 Enable module: WebXR722 </span>723 <!-- Visually align the description with the name. -->724 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">725 Required to run AR/VR on browsers.726 </span>727 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">728 </label>729 <label class="option-label">730 <input type="checkbox" x-model="option.enabled">731 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 700" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">732 Enable module: ZIP733 </span>734 <!-- Visually align the description with the name. -->735 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">736 Required to use the ZIPReader and ZIPPacker classes (also requires Minizip to be enabled).737 </span>738 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">739 </label>740 <label class="option-label">741 <input type="checkbox" x-model="option.enabled">742 <span :style="`font-weight: ${option.enabled ? '700' : '400'}`" style="font-weight: 400" x-text="!option.notModule ? `Enable module: ${option.name}` : option.name">743 Custom modules path744 </span>745 <!-- Visually align the description with the name. -->746 <span style="display: block; margin-left: 30px; opacity: 0.65" x-text="option.description">747 Specifies a path to a folder containing custom C++ modules to build. Useful for keeping custom modules separate from the Godot repository.748 </span>749 <input style="display: none;" type="text" x-model="option.value" x-show="option.text & option.enabled">750 </label>751 </div>752 <div class="preview">753 <h2>754 Resulting755 <code>756 custom.py757 </code>758 </h2>759 <textarea @click="$refs.textarea.select()" readonly style="width: 100%; height: 500px" x-html="generatedOptions()" x-ref="textarea"># Generated using https://godot-build-options-generator.github.io760 761</textarea>762 <div style="margin-top: 10px">763 <button @click="downloadOptions()" type="button">764 Download765 </button>766 <button @click="copyOptionsToClipboard()" type="button">767 Copy to clipboard768 </button>769 </div>770 </div>771 </div>772 <footer style="margin: 2rem 0 4rem 0; opacity: 0.8; text-align: center">773 © 2020-present Hugo Locurcio and contributors774 <br>775 <a>776 Contribute to this generator on GitHub!777 </a>778 </footer>779 </main>780 </body>781</html>782