Spaces:
Sleeping
Sleeping
File size: 3,538 Bytes
3030398 0eff3a9 3030398 0eff3a9 45769da 3030398 45769da 785e85b 3030398 45769da 3030398 45769da 3030398 45769da b9ee99f 45769da 785e85b 45769da 3030398 45769da 3030398 45769da 3030398 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!doctype html>
<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>
|