Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="theme-color" content="#f3f2ec"> | |
| <title>Diffusion — A DDPM in motion</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <header class="topbar"> | |
| <a class="brand" href="#top"><span class="brand-mark" | |
| aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>diffusion model</span></a> | |
| <div class="topbar-right"><span class="live-dot"></span></div> | |
| </header> | |
| <main id="top"> | |
| <section class="control-panel lab-panel" aria-labelledby="controls-title"> | |
| <h1 id="controls-title">Configure</h1> | |
| <div class="config-rows"> | |
| <div class="config-row"> | |
| <label for="model-input">Model</label> | |
| <select id="model-input"> | |
| <option value="google/ddpm-celebahq-256">google/ddpm-celebahq-256</option> | |
| <option value="google/ddpm-cifar10-32">google/ddpm-cifar10-32</option> | |
| </select> | |
| </div> | |
| <div class="config-row"> | |
| <label for="timesteps-input">Timesteps</label> | |
| <input id="timesteps-input" type="text" value="0, 50, 100, 200, 350, 500, 700, 1000" spellcheck="false" aria-describedby="timesteps-help config-error"> | |
| <button id="apply-timesteps" type="button">Apply</button> | |
| </div> | |
| <div class="config-row"> | |
| <button id="randomize-seed" class="row-label-button" type="button" title="Generate a new random seed">Seed</button> | |
| <input id="seed-input" type="text" inputmode="numeric" value="42" spellcheck="false" aria-describedby="seed-help config-error"> | |
| </div> | |
| <p id="config-error" class="field-error" role="alert"></p> | |
| </div> | |
| </section> | |
| <section class="process-panel lab-panel" aria-labelledby="diffusion-title"> | |
| <div class="process-heading"><div class="panel-heading"><div> | |
| <h2 id="diffusion-title">Forward process: image to noise</h2> | |
| </div></div> | |
| <span class="equation">x<sub>t</sub> = √α̅<sub>t</sub> x<sub>0</sub> + √(1 − α̅<sub>t</sub>) ε</span> | |
| </div> | |
| <output id="forward-progress-label" class="step-progress">0/1000</output> | |
| <div id="diffusion-track" class="image-track" aria-label="Forward diffusion checkpoints"></div> | |
| </section> | |
| <section class="process-panel lab-panel" aria-labelledby="denoising-title"> | |
| <div class="process-heading"><div class="panel-heading"><div> | |
| <h2 id="denoising-title">Reverse process: noise to image</h2></div></div> | |
| <p class="reverse-equation">x<sub>t−1</sub> = 1/√α<sub>t</sub> (x<sub>t</sub> − β<sub>t</sub>/√(1−α̅<sub>t</sub>) ε<sub>θ</sub>(x<sub>t</sub>,t)) + σ<sub>t</sub>z</p> | |
| </div> | |
| <output id="reverse-progress-label" class="step-progress">0/1000</output> | |
| <div id="denoising-track" class="image-track" aria-label="Reverse denoising checkpoints"></div> | |
| </section> | |
| </main> | |
| </div> | |
| <input id="image-upload" type="file" accept="image/*" hidden> | |
| <script src="app.js" defer></script> | |
| </body> | |
| </html> | |