Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>PixelModel v1: The Model Is a Thumbnail Now</title> | |
| <link rel="stylesheet" href="../style.css"> | |
| </head> | |
| <body> | |
| <script type="module" src="../summarize.js" defer></script> | |
| <script src="../script.js" defer></script> | |
| <div class="background"></div> | |
| <main class="article"> | |
| <a class="back" href="../index.html"> | |
| ← Back | |
| </a> | |
| <div class="meta"> | |
| July 2026 | |
| </div> | |
| <h1> | |
| PixelModel v1: The Model Is a Thumbnail Now | |
| </h1> | |
| <p> | |
| Last month we released <a href="pixelmodel.html">PixelModel</a> — a neural network whose weights are literally the pixels of a PNG. It was a toy: 202,752 parameters, welded to 32×32 output, trained on six solid-color swatches. It scored FID 566.84 on the <a href="https://huggingface.co/spaces/FlameF0X/Tiny-T2I-Leaderboard">Tiny-T2I-Leaderboard</a>, mostly by producing the same yellow noise for every prompt. | |
| </p> | |
| <p> | |
| Today we're releasing <strong>PixelModel v1</strong>. It is <strong>8.5× smaller</strong> — 23,747 parameters — and it beats v0 on both benchmark metrics while being trained on 20,000 real MS-COCO caption/image pairs instead of six color swatches. The entire model now fits in a 160×149 PNG: | |
| </p> | |
| <h1>cherry on top 🍒</h1> | |
| <p>The model generates 600 images (cpu) in 5 (five) seconds. | |
| Thats 5000 images in 24 seconds on cpu. | |
| The model trained on cpu for just 30 minutes. | |
| </p> | |
| <p> | |
| <img src="images/pixelmodel-v1-model.png" alt="The entire PixelModel v1: a 160x149 PNG containing all 23,747 weights" style="image-rendering: pixelated; width: 320px; max-width: 100%;"> | |
| </p> | |
| <p> | |
| That image is not a visualization of the model. It <em>is</em> the model. All 23,747 weights, one per pixel. | |
| </p> | |
| <h2> | |
| How do you make it smaller AND better? | |
| </h2> | |
| <p> | |
| v0 had a dirty secret: 196,608 of its 202,752 parameters — 97% of the model — were one giant output matrix with one weight row per output pixel. The "neural network" part was tiny; the rest was a lookup table bolted to a fixed 32×32 canvas. | |
| </p> | |
| <p> | |
| v1 replaces that output matrix with a <strong>coordinate-conditioned decoder</strong> (CPPN-style). Instead of storing weights per pixel, the decoder is a small MLP that answers one question: <em>"given this prompt's latent vector and the coordinate (x, y), what color is here?"</em> | |
| </p> | |
| <pre><code>prompt string | |
| → hashed char-trigram + word embedding (64-dim, 0 params) | |
| → T1 (80×64)+b → tanh | |
| → T2 (64×80)+b → tanh = latent z | |
| for every pixel (x, y): | |
| concat(z, fourier features of (x, y)) | |
| → D1 (80×82)+b → tanh | |
| → D2 (80×80)+b → tanh | |
| → D3 (3×80)+b → sigmoid = RGB</code></pre> | |
| <p> | |
| Because pixels are computed from coordinates, the parameter count no longer depends on resolution. The same 23,747 weights render 64×64 natively, or 256×256, or anything else — <code>--res 512</code> just works. | |
| </p> | |
| <h2> | |
| Three more upgrades | |
| </h2> | |
| <ul> | |
| <li><strong>Prompt embedding:</strong> v0 summed character codes — "red circle" and "circle red" collided. v1 hashes character trigrams and words (FNV-1a) into a 64-dim vector. Still deterministic, still zero parameters, but different prompts now get meaningfully different embeddings.</li> | |
| <li><strong>16-bit weights:</strong> v0 stored 8-bit magnitudes in R and wasted the G channel. v1 packs each weight across R (high byte) and G (low byte) — quantization error drops to ~3×10⁻⁵ per weight.</li> | |
| <li><strong>Real data:</strong> 20,000 MS-COCO caption/image pairs at 64×64, hash-checked to be disjoint from the 5,000 evaluation images.</li> | |
| </ul> | |
| <h2> | |
| Training | |
| </h2> | |
| <p> | |
| Training ran on CPU — the whole 50-epoch run over 20K images took 27 minutes. The dashed lines are the two "no-understanding" baselines: outputting one grey value forever (0.0707), and outputting the average COCO image forever (0.0691). The model crossed below the second one at epoch 4 and kept going — everything under that line is caption-conditioning, the part a text-to-image model actually gets judged on: | |
| </p> | |
| <p> | |
| <img src="images/pixelmodel-v1-loss.png" alt="Training loss curve crossing below both naive-predictor baselines" style="width: 100%; max-width: 720px;"> | |
| </p> | |
| <h2> | |
| Honesty section | |
| </h2> | |
| <p> | |
| Here is what generation actually looks like — real training photo on the left, model output for the same caption on the right: | |
| </p> | |
| <p> | |
| <img src="images/pixelmodel-v1-probe.png" alt="Target photos vs model outputs: the model produces caption-conditioned color washes" style="width: 100%; max-width: 640px;"> | |
| </p> | |
| <p> | |
| A 23K-parameter model does not draw sandwiches. With ~1 parameter per training image, the loss-minimizing behavior is to output the <em>average of all plausible images for a caption</em> — caption-conditioned color, light, and layout statistics. Food prompts come out warm and brown; sky prompts come out cool and bright. That is the ceiling for this size class, and we'd rather show it than crop around it. | |
| </p> | |
| <h2> | |
| Numbers | |
| </h2> | |
| <p> | |
| Measured per the leaderboard protocol: FID via <code>torchmetrics.image.fid.FrechetInceptionDistance</code> against MS-COCO val2014 (<code>sayakpaul/coco-30-val-2014</code>, 256×256 center-crop), CLIP Score via <code>torchmetrics.multimodal.CLIPScore</code> with <code>openai/clip-vit-base-patch32</code>, at the native 64×64 generation resolution, n=5000 (v0's numbers were n=40). | |
| </p> | |
| <pre><code> v0 v1 | |
| params 202,752 23,747 (8.5× smaller) | |
| FID ↓ 566.84 439.46 | |
| CLIP ↑ 18.60 20.02 | |
| native res 32×32 64×64 (resolution-free)</code></pre> | |
| <p> | |
| Smaller model, more general behavior, better scores, and the eval pipeline now ships inside the repo instead of living in a throwaway environment. | |
| </p> | |
| <h2> | |
| Try it | |
| </h2> | |
| <pre><code>git clone https://huggingface.co/bench-labs/pixelmodel-v1 | |
| python INFERENCE.py "a red double decker bus" | |
| python main.py "a beach with palm trees" --res 256 --scale 1</code></pre> | |
| <p> | |
| <code>model.png</code> is the canonical model; <code>model.safetensors</code> carries the same weights with the parameter count embedded in its header metadata. Check out the <a href="https://huggingface.co/bench-labs/pixelmodel-v1">PixelModel v1 repository</a>. | |
| </p> | |
| <blockquote> | |
| Still a toy. Slightly less useless. The model is literally a thumbnail. | |
| </blockquote> | |
| </main> | |
| <script> | |
| /* ========================================================== | |
| SYNTAX HIGHLIGHTING | |
| ========================================================== */ | |
| const PY_KW = new Set([ | |
| 'def','class','return','if','elif','else','for','while','import','from','as', | |
| 'try','except','finally','with','yield','lambda','pass','break','continue', | |
| 'raise','and','or','not','in','is','global','nonlocal','assert','del', | |
| 'async','await' | |
| ]); | |
| const JS_KW = new Set([ | |
| 'const','let','var','function','return','if','else','for','while','do', | |
| 'switch','case','break','continue','new','class','extends','import','export', | |
| 'from','default','try','catch','finally','throw','typeof','instanceof', | |
| 'in','of','async','await','yield','void','delete','with' | |
| ]); | |
| const PY_BI = new Set([ | |
| 'print','len','range','int','str','float','list','dict','set','tuple','bool', | |
| 'type','isinstance','input','open','map','filter','zip','enumerate','sorted', | |
| 'reversed','sum','min','max','abs','round','any','all','super','property', | |
| 'staticmethod','classmethod','True','False','None','Exception','ValueError', | |
| 'TypeError','KeyError','IndexError','AttributeError','NotImplementedError', | |
| 'RuntimeError','StopIteration','FileNotFoundError','object' | |
| ]); | |
| const JS_BI = new Set([ | |
| 'console','Math','Array','Object','String','Number','Boolean','Date','RegExp', | |
| 'Error','TypeError','RangeError','SyntaxError','JSON','Promise','Map','Set', | |
| 'Symbol','Proxy','Reflect','parseInt','parseFloat','isNaN','isFinite', | |
| 'undefined','null','true','false','NaN','Infinity' | |
| ]); | |
| function escapeHtml(s) { | |
| return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); | |
| } | |
| function detectLang(code) { | |
| let py = 0, js = 0; | |
| const pyP = /\b(def |class |import |from \w+ import|elif |print\(|True|False|None|self[\.\[])\b/g; | |
| const jsP = /\b(const |let |var |function |=>|console\.|undefined|null|async |await )\b/g; | |
| let m; | |
| while ((m = pyP.exec(code)) !== null) py++; | |
| while ((m = jsP.exec(code)) !== null) js++; | |
| if (py > js) return 'python'; | |
| if (js > 0) return 'javascript'; | |
| return 'text'; | |
| } | |
| function highlight(code) { | |
| const lang = detectLang(code); | |
| const kw = lang === 'python' ? PY_KW : lang === 'javascript' ? JS_KW : new Set(); | |
| const bi = lang === 'python' ? PY_BI : lang === 'javascript' ? JS_BI : new Set(); | |
| const tokens = []; | |
| let i = 0; | |
| const len = code.length; | |
| while (i < len) { | |
| if (lang === 'python') { | |
| const t3 = code.slice(i, i + 3); | |
| if (t3 === '"""' || t3 === "'''") { | |
| const end = code.indexOf(t3, i + 3); | |
| const span = end !== -1 ? code.slice(i, end + 3) : code.slice(i); | |
| tokens.push({ type: 'string', text: span }); | |
| i += span.length; | |
| continue; | |
| } | |
| } | |
| { | |
| const pm = code.slice(i).match(/^[frbFRB]{0,3}/); | |
| if (pm) { | |
| const pLen = pm[0].length; | |
| const nc = code[i + pLen]; | |
| if (nc === '"' || nc === "'") { | |
| const q = nc; | |
| const isF = pm[0].toLowerCase().includes('f'); | |
| let depth = 0, k = i + pLen + 1; | |
| let found = false; | |
| while (k < len) { | |
| const ch = code[k]; | |
| if (ch === '\\') { k += 2; continue; } | |
| if (isF) { | |
| if (ch === '{') { depth++; k++; continue; } | |
| if (ch === '}') { depth = Math.max(0, depth - 1); k++; continue; } | |
| } | |
| if (ch === q && depth === 0) { found = true; break; } | |
| k++; | |
| } | |
| if (found) { | |
| tokens.push({ type: 'string', text: code.slice(i, k + 1) }); | |
| i = k + 1; | |
| continue; | |
| } | |
| } | |
| } | |
| } | |
| if (lang === 'python' && code[i] === '#') { | |
| let end = code.indexOf('\n', i); | |
| if (end === -1) end = len; | |
| tokens.push({ type: 'comment', text: code.slice(i, end) }); | |
| i = end; | |
| continue; | |
| } | |
| if (lang === 'javascript' && code.slice(i, i + 2) === '//') { | |
| let end = code.indexOf('\n', i); | |
| if (end === -1) end = len; | |
| tokens.push({ type: 'comment', text: code.slice(i, end) }); | |
| i = end; | |
| continue; | |
| } | |
| if (lang === 'javascript' && code.slice(i, i + 2) === '/*') { | |
| let end = code.indexOf('*/', i + 2); | |
| if (end === -1) end = len; else end += 2; | |
| tokens.push({ type: 'comment', text: code.slice(i, end) }); | |
| i = end; | |
| continue; | |
| } | |
| { | |
| const m = code.slice(i).match( | |
| /^(0x[0-9a-fA-F_]+|0b[01_]+|0o[0-7_]+|\d[\d_]*\.?\d*(?:e[+-]?\d+)?)/ | |
| ); | |
| if (m) { | |
| tokens.push({ type: 'number', text: m[0] }); | |
| i += m[0].length; | |
| continue; | |
| } | |
| } | |
| if (lang === 'python' && code[i] === '@') { | |
| const m = code.slice(i).match(/^@[\w.]+/); | |
| if (m) { | |
| tokens.push({ type: 'decorator', text: m[0] }); | |
| i += m[0].length; | |
| continue; | |
| } | |
| } | |
| { | |
| const m = code.slice(i).match(/^\w+/); | |
| if (m) { | |
| const w = m[0]; | |
| let type = 'plain'; | |
| if (kw.has(w)) type = 'keyword'; | |
| else if (bi.has(w)) type = 'builtin'; | |
| else if (w === 'self' || w === 'cls' || w === 'this') type = 'self'; | |
| else { | |
| let j = i + w.length; | |
| while (j < len && code[j] === ' ') j++; | |
| if (code[j] === '(') type = 'function'; | |
| } | |
| tokens.push({ type, text: w }); | |
| i += w.length; | |
| continue; | |
| } | |
| } | |
| { | |
| const m = code.slice(i).match(/^[+\-*/%=<>!&|^~:]+/); | |
| if (m) { | |
| tokens.push({ type: 'operator', text: m[0] }); | |
| i += m[0].length; | |
| continue; | |
| } | |
| } | |
| if ('(){}[],;.'.includes(code[i])) { | |
| tokens.push({ type: 'punctuation', text: code[i] }); | |
| i++; | |
| continue; | |
| } | |
| { | |
| const m = code.slice(i).match(/^\s+/); | |
| if (m) { | |
| tokens.push({ type: 'plain', text: m[0] }); | |
| i += m[0].length; | |
| } else { | |
| tokens.push({ type: 'plain', text: code[i] }); | |
| i++; | |
| } | |
| } | |
| } | |
| return tokens.map(t => { | |
| const esc = escapeHtml(t.text); | |
| return t.type === 'plain' ? esc : `<span class="tok-${t.type}">${esc}</span>`; | |
| }).join(''); | |
| } | |
| document.querySelectorAll('pre code').forEach(block => { | |
| block.innerHTML = highlight(block.textContent); | |
| }); | |
| /* ========================================================== | |
| LIGHTBOX | |
| ========================================================== */ | |
| class Lightbox { | |
| constructor() { | |
| this.images = []; | |
| this.currentIndex = 0; | |
| this.isOpen = false; | |
| this._build(); | |
| this._bindImages(); | |
| this._bindKeys(); | |
| this._bindSwipe(); | |
| } | |
| _build() { | |
| this.el = document.createElement('div'); | |
| this.el.className = 'lightbox-overlay'; | |
| this.el.setAttribute('role', 'dialog'); | |
| this.el.setAttribute('aria-modal', 'true'); | |
| this.el.setAttribute('aria-label', 'Image viewer'); | |
| this.el.innerHTML = ` | |
| <button class="lightbox-btn lightbox-close" aria-label="Close"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2.5" stroke-linecap="round"> | |
| <line x1="18" y1="6" x2="6" y2="18"/> | |
| <line x1="6" y1="6" x2="18" y2="18"/> | |
| </svg> | |
| </button> | |
| <button class="lightbox-btn lightbox-arrow lightbox-prev" aria-label="Previous image"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="15 18 9 12 15 6"/> | |
| </svg> | |
| </button> | |
| <button class="lightbox-btn lightbox-arrow lightbox-next" aria-label="Next image"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="9 6 15 12 9 18"/> | |
| </svg> | |
| </button> | |
| <img class="lightbox-img" src="" alt=""> | |
| <div class="lightbox-counter"></div> | |
| `; | |
| document.body.appendChild(this.el); | |
| this.imgEl = this.el.querySelector('.lightbox-img'); | |
| this.counterEl = this.el.querySelector('.lightbox-counter'); | |
| this.prevBtn = this.el.querySelector('.lightbox-prev'); | |
| this.nextBtn = this.el.querySelector('.lightbox-next'); | |
| this.closeBtn = this.el.querySelector('.lightbox-close'); | |
| this.closeBtn.addEventListener('click', () => this.close()); | |
| this.prevBtn.addEventListener('click', (e) => { e.stopPropagation(); this.prev(); }); | |
| this.nextBtn.addEventListener('click', (e) => { e.stopPropagation(); this.next(); }); | |
| this.el.addEventListener('click', (e) => { | |
| if (e.target === this.el) this.close(); | |
| }); | |
| } | |
| _bindImages() { | |
| this.images = Array.from(document.querySelectorAll('.article img')); | |
| this.images.forEach((img, idx) => { | |
| img.addEventListener('click', () => this.open(idx)); | |
| }); | |
| } | |
| _bindKeys() { | |
| document.addEventListener('keydown', (e) => { | |
| if (!this.isOpen) return; | |
| if (e.key === 'Escape') this.close(); | |
| if (e.key === 'ArrowLeft') this.prev(); | |
| if (e.key === 'ArrowRight') this.next(); | |
| }); | |
| } | |
| _bindSwipe() { | |
| let startX = 0; | |
| this.el.addEventListener('touchstart', (e) => { | |
| startX = e.changedTouches[0].clientX; | |
| }, { passive: true }); | |
| this.el.addEventListener('touchend', (e) => { | |
| const dx = startX - e.changedTouches[0].clientX; | |
| if (Math.abs(dx) > 60) { | |
| dx > 0 ? this.next() : this.prev(); | |
| } | |
| }, { passive: true }); | |
| } | |
| open(idx) { | |
| this.currentIndex = idx; | |
| this.isOpen = true; | |
| this._update(); | |
| requestAnimationFrame(() => { | |
| this.el.classList.add('active'); | |
| }); | |
| document.body.style.overflow = 'hidden'; | |
| this.closeBtn.focus(); | |
| } | |
| close() { | |
| this.isOpen = false; | |
| this.el.classList.remove('active'); | |
| document.body.style.overflow = ''; | |
| this.images[this.currentIndex]?.focus(); | |
| } | |
| prev() { | |
| this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length; | |
| this._update(); | |
| } | |
| next() { | |
| this.currentIndex = (this.currentIndex + 1) % this.images.length; | |
| this._update(); | |
| } | |
| _update() { | |
| const srcImg = this.images[this.currentIndex]; | |
| this.imgEl.style.opacity = '0'; | |
| this.imgEl.style.transform = 'scale(0.96)'; | |
| setTimeout(() => { | |
| this.imgEl.src = srcImg.src; | |
| this.imgEl.alt = srcImg.alt; | |
| this.imgEl.removeAttribute('loading'); | |
| this.imgEl.style.opacity = '1'; | |
| this.imgEl.style.transform = 'scale(1)'; | |
| }, 120); | |
| const total = this.images.length; | |
| if (total > 1) { | |
| this.counterEl.textContent = `${this.currentIndex + 1} / ${total}`; | |
| this.prevBtn.style.display = ''; | |
| this.nextBtn.style.display = ''; | |
| } else { | |
| this.counterEl.textContent = ''; | |
| this.prevBtn.style.display = 'none'; | |
| this.nextBtn.style.display = 'none'; | |
| } | |
| } | |
| } | |
| new Lightbox(); | |
| </script> | |
| </body> | |
| </html> | |