Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Pocket Diffusion</title> | |
| <style> | |
| :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui; } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; min-height: 100vh; background: #060817; color: #edf4ff; } | |
| canvas { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .55; } | |
| main { position: relative; z-index: 1; width: min(1080px, 92vw); margin: auto; | |
| padding: 72px 0 96px; } | |
| .eyebrow { color: #73e6ff; letter-spacing: .18em; text-transform: uppercase; | |
| font-size: .75rem; font-weight: 800; } | |
| h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: .9; margin: 14px 0 24px; | |
| background: linear-gradient(120deg,#fff,#74e7ff 55%,#b48cff); | |
| -webkit-background-clip: text; color: transparent; } | |
| .lead { max-width: 760px; color: #b8c7e6; font-size: 1.2rem; line-height: 1.65; } | |
| .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 48px; } | |
| a { color: inherit; } | |
| .button { padding: 12px 18px; border-radius: 999px; text-decoration: none; | |
| background: #eaf8ff; color: #07101c; font-weight: 800; } | |
| .button.alt { background: #171d38cc; color: #dce8ff; border: 1px solid #415078; } | |
| .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; } | |
| .card { border: 1px solid #344269; background: #0c1128dd; border-radius: 24px; | |
| padding: 24px; backdrop-filter: blur(18px); box-shadow: 0 24px 80px #0008; } | |
| h2 { margin-top: 0; } | |
| pre { white-space: pre-wrap; word-break: break-word; color: #a9bddf; | |
| max-height: 520px; overflow: auto; } | |
| ul { max-height: 520px; overflow: auto; padding-left: 1.2rem; color: #a9bddf; } | |
| li { margin: 8px 0; } | |
| input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #344269; | |
| background: #070b1a; color: white; margin-bottom: 12px; } | |
| @media (max-width: 780px) { .grid { grid-template-columns: 1fr; } } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="field"></canvas> | |
| <main> | |
| <div class="eyebrow">Jacob Garcia · Hugging Face Model Foundry</div> | |
| <h1>Pocket Diffusion</h1> | |
| <p class="lead">Interactive classifier-free guided digit diffusion. This showcase backs up the | |
| trained artifacts, measured evaluation, and complete runnable source.</p> | |
| <div class="actions"> | |
| <a class="button" href="https://huggingface.co/spaces/ARotting/pocket-diffusion/tree/main">Explore every file</a> | |
| <a class="button alt" href="https://huggingface.co/ARotting">View the full foundry</a> | |
| </div> | |
| <div class="grid"> | |
| <section class="card"> | |
| <h2>Verified project card</h2> | |
| <pre># PocketDiffusion | |
| PocketDiffusion is a compact class-conditional denoising diffusion model for 8x8 | |
| handwritten digits. It learns to predict Gaussian noise over 50 diffusion steps and | |
| uses classifier-free guidance during sampling. | |
| The same frozen Tiny Vision classifier used for GlyphForge evaluates conditional | |
| recognizability, making the VAE and diffusion results directly comparable under one | |
| judge. | |
| ## Reproduce | |
| ```powershell | |
| uv run python projects/tiny-vision-foundry/prepare_data.py | |
| uv run python projects/pocket-diffusion/train.py | |
| ``` | |
| ## Verified results | |
| - Parameters: **55,608** | |
| - Diffusion steps: **50** | |
| - Training epochs: **300** | |
| - Generated samples: **1,000** | |
| - Selected classifier-free guidance: **3.0** | |
| - Frozen-judge class fidelity: **96.20%** | |
| Guidance search improved fidelity monotonically from 46.10% at `1.0` to 96.20% at | |
| `3.0`. Per-class fidelity ranged from 83% for digit `8` to 100% for digits `0` and | |
| `6`. Mean within-class pixel variance ranged from 0.0209 to 0.0456, noticeably higher | |
| than the CVAE's 0.0066 to 0.0168 range under the same 100-samples-per-class protocol. | |
| </pre> | |
| <h2>Evaluation snapshot</h2> | |
| <pre>{ | |
| "model": "PocketDiffusion", | |
| "parameters": 55608, | |
| "diffusion_steps": 50, | |
| "epochs": 300, | |
| "guidance_search": { | |
| "1.0": 0.460999995470047, | |
| "1.5": 0.7149999737739563, | |
| "2.0": 0.8560000061988831, | |
| "2.5": 0.9359999895095825, | |
| "3.0": 0.9620000123977661 | |
| }, | |
| "generation": { | |
| "judge_accuracy": 0.9620000123977661, | |
| "judge_accuracy_by_class": { | |
| "0": 1.0, | |
| "1": 0.9200000166893005, | |
| "2": 0.9900000095367432, | |
| "3": 0.9800000190734863, | |
| "4": 0.9599999785423279, | |
| "5": 0.9800000190734863, | |
| "6": 1.0, | |
| "7": 0.9900000095367432, | |
| "8": 0.8299999833106995, | |
| "9": 0.9700000286102295 | |
| }, | |
| "mean_pixel_variance_by_class": { | |
| "0": 0.020940322428941727, | |
| "1": 0.03187673166394234, | |
| "2": 0.03836727514863014, | |
| "3": 0.03142565116286278, | |
| "4": 0.04158321022987366, | |
| "5": 0.034002821892499924, | |
| "6": 0.022990796715021133, | |
| "7": 0.036991652101278305, | |
| "8": 0.04558330774307251, | |
| "9": 0.03457583114504814 | |
| }, | |
| "samples": 1000, | |
| "guidance": 3.0 | |
| }, | |
| "judge": "Tiny Vision labels-only student, 98.52% real-image test accuracy" | |
| }</pre> | |
| </section> | |
| <section class="card"> | |
| <h2>Backed-up artifact tree</h2> | |
| <input id="filter" placeholder="Filter files…" autocomplete="off"> | |
| <ul id="files"><li><code>README.md</code></li> | |
| <li><code>__pycache__/app.cpython-311.pyc</code></li> | |
| <li><code>__pycache__/model.cpython-311.pyc</code></li> | |
| <li><code>app.py</code></li> | |
| <li><code>artifacts/pocket-diffusion/evaluation.json</code></li> | |
| <li><code>artifacts/pocket-diffusion/model.safetensors</code></li> | |
| <li><code>artifacts/pocket-diffusion/samples.png</code></li> | |
| <li><code>model.py</code></li> | |
| <li><code>requirements.txt</code></li> | |
| <li><code>train.py</code></li></ul> | |
| </section> | |
| </div> | |
| </main> | |
| <script> | |
| const canvas=document.querySelector('#field'),ctx=canvas.getContext('2d'); | |
| let dots=[]; | |
| function resize(){canvas.width=innerWidth;canvas.height=innerHeight; | |
| dots=Array.from({length:90},()=>({x:Math.random()*innerWidth, | |
| y:Math.random()*innerHeight,vx:(Math.random()-.5)*.35,vy:(Math.random()-.5)*.35}));} | |
| function draw(){ctx.clearRect(0,0,canvas.width,canvas.height); | |
| for(const d of dots){d.x=(d.x+d.vx+innerWidth)%innerWidth; | |
| d.y=(d.y+d.vy+innerHeight)%innerHeight;ctx.fillStyle='#65dcff99'; | |
| ctx.beginPath();ctx.arc(d.x,d.y,1.4,0,7);ctx.fill();}requestAnimationFrame(draw);} | |
| addEventListener('resize',resize);resize();draw(); | |
| document.querySelector('#filter').addEventListener('input',e=>{ | |
| const q=e.target.value.toLowerCase();for(const li of document.querySelectorAll('li')) | |
| li.hidden=!li.textContent.toLowerCase().includes(q);}); | |
| </script> | |
| </body> | |
| </html> |