Deploy Deep Analog web app

.gitattributes

@@ -1 +1,4 @@
 *.pth filter=lfs diff=lfs merge=lfs -text
+static/demo/ref.jpg filter=lfs diff=lfs merge=lfs -text
+static/demo/result.jpg filter=lfs diff=lfs merge=lfs -text
+static/demo/target.jpg filter=lfs diff=lfs merge=lfs -text

static/index.html

@@ -242,6 +242,60 @@
   }
   .viz-play:hover { border-color: var(--accent); }
 
+  /* ---------- help tooltip ---------- */
+  .help {
+    position: relative; display: inline-flex; align-items: center; justify-content: center;
+    width: 16px; height: 16px; margin-left: 8px;
+    border: 1px solid var(--text-dim); border-radius: 50%;
+    color: var(--text-dim); font-size: 10.5px; font-weight: 600;
+    cursor: help; vertical-align: middle; user-select: none;
+  }
+  .help:hover { border-color: var(--accent); color: var(--accent); }
+  .help .tip {
+    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
+    width: min(320px, 76vw);
+    background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
+    padding: 12px 14px;
+    font-size: 12.5px; font-weight: 400; line-height: 1.6; color: #c9c9cf;
+    text-transform: none; letter-spacing: normal; text-align: left;
+    opacity: 0; pointer-events: none; transition: opacity .15s;
+    z-index: 30;
+  }
+  .help:hover .tip { opacity: 1; }
+
+  /* ---------- look recipe (color mapping) ---------- */
+  .flow-wrap { margin-top: 26px; }
+  .flow-grid { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: stretch; }
+  @media (max-width: 720px) { .flow-grid { grid-template-columns: 1fr; } }
+  .flow-ref { display: flex; flex-direction: column; gap: 8px; }
+  .flow-ref img { width: 100%; border-radius: 8px; display: block; border: 1px solid var(--line); }
+  .flow-ref .pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
+  .flow-ref .pal span { display: block; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(255,255,255,.08); }
+  .flow-ref .cap { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
+  .flow-canvas {
+    width: 100%; height: 100%; min-height: 250px; display: block;
+    border-radius: 10px; border: 1px solid var(--line);
+    background: radial-gradient(500px 300px at 50% 50%, #17171c, #0a0a0c 85%);
+  }
+
+  /* ---------- demo section ---------- */
+  .demo { margin-top: 72px; }
+  .demo > h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; }
+  .demo-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
+  .demo-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
+  @media (max-width: 760px) { .demo-grid { grid-template-columns: 1fr; } }
+  .demo-step { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
+  .demo-step b { color: var(--accent); font-weight: 700; }
+  .demo-ref img { width: 100%; border-radius: 8px; display: block; }
+  .demo-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
+  .demo-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; }
+  .try-btn {
+    background: var(--accent-soft); color: var(--accent);
+    border: 1px solid var(--accent); border-radius: 10px;
+    font-size: 13.5px; font-weight: 600; padding: 10px 20px; cursor: pointer;
+  }
+  .try-btn:hover { background: var(--accent); color: #17110a; }
+
   /* ---------- privacy modal ---------- */
   #privacyModal {
     position: fixed; inset: 0; z-index: 950;
@@ -340,6 +394,33 @@
     <div class="result-card" id="resultBody"></div>
   </div>
 
+  <section class="demo" id="demoSection" style="display:none">
+    <h2>See it in action</h2>
+    <div class="demo-card">
+      <div class="demo-grid">
+        <div class="demo-ref">
+          <div class="demo-step"><b>1</b>&nbsp; Pick a reference — any film look you love</div>
+          <img id="demoRefImg" alt="Reference film still">
+          <div class="demo-note">Still from <i>Happy Together</i> (1997), dir. Wong Kar-wai — shown for demonstration.</div>
+        </div>
+        <div>
+          <div class="demo-step"><b>2</b>&nbsp; Add your photo → <b>3</b>&nbsp; get it rendered in that look. Drag the divider to compare.</div>
+          <div class="compare" id="demoCompare">
+            <img class="base-img" id="demoResultImg" alt="Rendered result">
+            <img class="top-img" id="demoTargetImg" alt="Original photo">
+            <div class="divider"></div>
+            <span class="cmp-label" style="left:12px">RENDERED</span>
+            <span class="cmp-label" style="right:12px">ORIGINAL</span>
+          </div>
+          <div class="demo-actions">
+            <button class="try-btn" id="tryDemoBtn">Try this example yourself →</button>
+            <span style="font-size:12px;color:var(--text-dim)">loads both images into the app above</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <footer>
     Deep Analog — open-set film emulation · research preview.<br>
     Your images are processed in memory and never stored. <a class="privacy-link" id="privacyOpen2">How privacy works here</a>.
@@ -569,7 +650,9 @@
       initCompare(cmp);
     }
 
-    // 3D visualization of the predicted LUT (both modes)
+    // Visualizations of the predicted LUT (both modes)
+    try { body.appendChild(makeFlowCard(data.cube_lut, refFile)); }
+    catch (e) { /* canvas unavailable — skip silently */ }
     try { body.appendChild(makeVizCard(data.cube_lut)); }
     catch (e) { /* WebGL unavailable — skip viz silently */ }
 
@@ -615,6 +698,226 @@
     cmp.addEventListener('pointerup', () => { dragging = false; });
   }
 
+  // ------------------------------------------------ look recipe (color mapping)
+  // Canvas ribbons: everyday input colors (top) flow into what the
+  // predicted LUT turns them into (bottom). Left: the reference image
+  // and its dominant palette — the source the model learned from.
+
+  function lutSampler(out, N) {
+    const f = N - 1;
+    function at(i, j, k, ch) { return out[((k * N + j) * N + i) * 3 + ch]; }
+    return function (r, g, b) {
+      const x = Math.min(Math.max(r, 0), 1) * f;
+      const y = Math.min(Math.max(g, 0), 1) * f;
+      const z = Math.min(Math.max(b, 0), 1) * f;
+      const x0 = Math.min(Math.floor(x), N - 2);
+      const y0 = Math.min(Math.floor(y), N - 2);
+      const z0 = Math.min(Math.floor(z), N - 2);
+      const dx = x - x0, dy = y - y0, dz = z - z0;
+      const res = [0, 0, 0];
+      for (let ch = 0; ch < 3; ch++) {
+        const c00 = at(x0,y0,z0,ch)*(1-dx) + at(x0+1,y0,z0,ch)*dx;
+        const c10 = at(x0,y0+1,z0,ch)*(1-dx) + at(x0+1,y0+1,z0,ch)*dx;
+        const c01 = at(x0,y0,z0+1,ch)*(1-dx) + at(x0+1,y0,z0+1,ch)*dx;
+        const c11 = at(x0,y0+1,z0+1,ch)*(1-dx) + at(x0+1,y0+1,z0+1,ch)*dx;
+        res[ch] = (c00*(1-dy) + c10*dy)*(1-dz) + (c01*(1-dy) + c11*dy)*dz;
+      }
+      return res;
+    };
+  }
+
+  function hsv2rgb(h, s, v) {
+    const i = Math.floor(h * 6), fr = h * 6 - i;
+    const p = v * (1 - s), q = v * (1 - fr * s), t = v * (1 - (1 - fr) * s);
+    const m = [[v,t,p],[q,v,p],[p,v,t],[p,q,v],[t,p,v],[v,p,q]][i % 6];
+    return m;
+  }
+
+  function rgbHex(c) {
+    return '#' + c.map(v => Math.round(Math.min(Math.max(v,0),1) * 255)
+      .toString(16).padStart(2, '0')).join('').toUpperCase();
+  }
+
+  function extractPalette(file, done) {
+    createImageBitmap(file).then(bmp => {
+      const S = 48;
+      const cv = document.createElement('canvas');
+      cv.width = S; cv.height = S;
+      const cx = cv.getContext('2d');
+      cx.drawImage(bmp, 0, 0, S, S);
+      const d = cx.getImageData(0, 0, S, S).data;
+      const bins = new Map();
+      for (let i = 0; i < d.length; i += 4) {
+        const key = ((d[i] >> 4) << 8) | ((d[i+1] >> 4) << 4) | (d[i+2] >> 4);
+        let b2 = bins.get(key);
+        if (!b2) { b2 = [0, 0, 0, 0]; bins.set(key, b2); }
+        b2[0] += d[i]; b2[1] += d[i+1]; b2[2] += d[i+2]; b2[3]++;
+      }
+      const sorted = [...bins.values()].sort((a, b2) => b2[3] - a[3]);
+      const picks = [];
+      for (const b2 of sorted) {
+        const c = [b2[0]/b2[3]/255, b2[1]/b2[3]/255, b2[2]/b2[3]/255];
+        if (picks.every(p =>
+          Math.hypot(p[0]-c[0], p[1]-c[1], p[2]-c[2]) > 0.16)) picks.push(c);
+        if (picks.length >= 6) break;
+      }
+      done(picks);
+    }).catch(() => done(null));
+  }
+
+  function makeFlowCard(cubeText, refFileMaybe) {
+    const { N, out } = parseCube(cubeText);
+    if (!N) throw new Error('bad cube');
+    const sample = lutSampler(out, N);
+
+    const wrap = document.createElement('div');
+    wrap.className = 'flow-wrap';
+    wrap.innerHTML =
+      '<div class="viz-head"><span class="t">Look recipe — reference → output' +
+      '<span class="help">?<span class="tip">The model reads the reference’s palette ' +
+      '(left) and distills a recipe from it. Each ribbon takes one everyday color (top) ' +
+      'and shows what this look turns it into (bottom) — hover any ribbon to inspect ' +
+      'the exact values. Together, the ribbons are the DNA of the look.</span></span></span>' +
+      '<span class="hint">hover a ribbon</span></div>' +
+      '<div class="flow-grid">' +
+      '<div class="flow-ref" style="display:none">' +
+      '<span class="cap">Reference — what the model saw</span>' +
+      '<img alt="Reference"><div class="pal"></div></div>' +
+      '<canvas class="flow-canvas"></canvas></div>';
+
+    const refBox = wrap.querySelector('.flow-ref');
+    const grid = wrap.querySelector('.flow-grid');
+    const canvas = wrap.querySelector('canvas');
+
+    // left column: reference thumb + extracted palette (when decodable)
+    if (refFileMaybe && PREVIEWABLE.includes(refFileMaybe.type)) {
+      wrap.querySelector('.flow-ref img').src = URL.createObjectURL(refFileMaybe);
+      extractPalette(refFileMaybe, colors => {
+        if (!colors || colors.length < 3) return;
+        const pal = wrap.querySelector('.pal');
+        colors.forEach(c => {
+          const s = document.createElement('span');
+          s.style.background = rgbHex(c);
+          s.title = rgbHex(c);
+          pal.appendChild(s);
+        });
+        refBox.style.display = 'flex';
+      });
+    } else {
+      grid.style.gridTemplateColumns = '1fr';
+    }
+
+    // ribbon data: 10 hues + 3 grays + skin tone
+    const inputs = [];
+    for (let i = 0; i < 10; i++) inputs.push(hsv2rgb(i / 10, 0.62, 0.85));
+    inputs.push([0.16,0.16,0.16], [0.5,0.5,0.5], [0.85,0.85,0.85], [0.85,0.66,0.52]);
+    const pairs = inputs.map(c => ({ cin: c, cout: sample(c[0], c[1], c[2]) }));
+
+    const ctx = canvas.getContext('2d');
+    let hoverIdx = -1, reveal = 0, raf = null;
+
+    function draw() {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const w = canvas.clientWidth, h = Math.max(canvas.clientHeight, 250);
+      if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+        canvas.width = w * dpr; canvas.height = h * dpr;
+      }
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+
+      const n = pairs.length, mx = 34;
+      const step = (w - mx * 2) / (n - 1);
+      const topY = 34, botY = h - 34, sw = 20;
+
+      ctx.font = '10px ui-monospace, Menlo, monospace';
+      ctx.fillStyle = 'rgba(139,139,147,.9)';
+      ctx.fillText('ANY PHOTO — original colors', mx - 10, 14);
+      ctx.fillText('AFTER THIS LOOK', mx - 10, h - 8);
+
+      pairs.forEach((p, i) => {
+        const x = mx + step * i;
+        const prog = Math.min(Math.max(reveal * n * 1.6 - i, 0), 1);
+        const dim = hoverIdx >= 0 && hoverIdx !== i;
+        ctx.globalAlpha = (dim ? 0.18 : 0.95) * prog;
+
+        // ribbon
+        const grad = ctx.createLinearGradient(0, topY, 0, botY);
+        grad.addColorStop(0, rgbHex(p.cin));
+        grad.addColorStop(1, rgbHex(p.cout));
+        ctx.strokeStyle = grad;
+        ctx.lineWidth = hoverIdx === i ? 15 : 11;
+        ctx.lineCap = 'round';
+        const sway = Math.sin(i * 1.7) * 10;
+        ctx.beginPath();
+        ctx.moveTo(x, topY + sw / 2 + 4);
+        const endY = topY + sw / 2 + 4 + (botY - topY - sw - 8) * prog;
+        ctx.bezierCurveTo(x + sway, topY + (botY - topY) * 0.4,
+                          x - sway, topY + (botY - topY) * 0.6,
+                          x, endY);
+        ctx.stroke();
+
+        // swatches
+        ctx.globalAlpha = dim ? 0.3 : 1;
+        ctx.fillStyle = rgbHex(p.cin);
+        rr(ctx, x - sw/2, topY - sw/2, sw, sw, 5); ctx.fill();
+        ctx.globalAlpha = (dim ? 0.3 : 1) * prog;
+        ctx.fillStyle = rgbHex(p.cout);
+        rr(ctx, x - sw/2, botY - sw/2, sw, sw, 5); ctx.fill();
+        ctx.globalAlpha = 1;
+      });
+
+      // hover readout
+      if (hoverIdx >= 0) {
+        const p = pairs[hoverIdx];
+        const x = mx + step * hoverIdx;
+        ctx.font = '11px ui-monospace, Menlo, monospace';
+        ctx.textAlign = x > w - 90 ? 'right' : 'left';
+        const tx = x > w - 90 ? x - 16 : x + 16;
+        ctx.fillStyle = 'rgba(236,236,236,.95)';
+        ctx.fillText(rgbHex(p.cin), tx, topY + 4);
+        ctx.fillText(rgbHex(p.cout), tx, botY + 4);
+        ctx.textAlign = 'left';
+      }
+    }
+
+    function rr(c, x, y, w2, h2, r) {
+      c.beginPath();
+      c.moveTo(x + r, y);
+      c.arcTo(x + w2, y, x + w2, y + h2, r);
+      c.arcTo(x + w2, y + h2, x, y + h2, r);
+      c.arcTo(x, y + h2, x, y, r);
+      c.arcTo(x, y, x + w2, y, r);
+      c.closePath();
+    }
+
+    function animate() {
+      reveal = Math.min(reveal + 0.02, 1);
+      draw();
+      if (reveal < 1) raf = requestAnimationFrame(animate);
+    }
+    // start when it enters the viewport
+    const io = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) { io.disconnect(); animate(); }
+    }, { threshold: 0.25 });
+    io.observe(canvas);
+
+    canvas.addEventListener('pointermove', e => {
+      const rect = canvas.getBoundingClientRect();
+      const n = pairs.length, mx = 34;
+      const step = (rect.width - mx * 2) / (n - 1);
+      const idx = Math.round((e.clientX - rect.left - mx) / step);
+      hoverIdx = (idx >= 0 && idx < n) ? idx : -1;
+      if (reveal >= 1) draw();
+    });
+    canvas.addEventListener('pointerleave', () => {
+      hoverIdx = -1;
+      if (reveal >= 1) draw();
+    });
+    window.addEventListener('resize', () => { if (reveal > 0) draw(); });
+
+    return wrap;
+  }
+
   // ------------------------------------------------ 3D LUT visualization
   // Self-contained WebGL point cloud — no libraries, no external requests.
   // Shows the LUT lattice morphing from identity (perfect cube) to the
@@ -637,7 +940,12 @@
     const wrap = document.createElement('div');
     wrap.className = 'viz-wrap';
     wrap.innerHTML =
-      '<div class="viz-head"><span class="t">Color space — 3D LUT</span>' +
+      '<div class="viz-head"><span class="t">Color space — 3D LUT' +
+      '<span class="help">?<span class="tip">A 3D LUT (look-up table) is a color recipe: ' +
+      'for every color a photo can contain, it stores the color the film would turn it into. ' +
+      'Each glowing dot below is one color — press play to watch the film’s recipe bend ' +
+      'the entire color space. The .cube file you download is exactly this transform, ready ' +
+      'for Photoshop, Lightroom, or DaVinci Resolve.</span></span></span>' +
       '<span class="hint">drag to rotate · scroll to zoom</span></div>' +
       '<canvas class="viz-canvas"></canvas>' +
       '<div class="viz-controls">' +
@@ -846,6 +1154,43 @@
     return wrap;
   }
 
+  // ------------------------------------------------ demo section
+  // Shown only if demo assets exist on the server (static/demo/*.jpg).
+  (function initDemo() {
+    const paths = {
+      ref: 'static/demo/ref.jpg',
+      target: 'static/demo/target.jpg',
+      result: 'static/demo/result.jpg',
+    };
+    const probe = new Image();
+    probe.onload = () => {
+      $('demoRefImg').src = paths.ref;
+      $('demoTargetImg').src = paths.target;
+      $('demoResultImg').src = paths.result;
+      $('demoSection').style.display = 'block';
+      initCompare($('demoCompare'));
+
+      $('tryDemoBtn').addEventListener('click', async () => {
+        try {
+          $('tryDemoBtn').textContent = 'Loading…';
+          const [rb, tb] = await Promise.all([
+            fetch(paths.ref).then(r => r.blob()),
+            fetch(paths.target).then(r => r.blob()),
+          ]);
+          refFile = new File([rb], 'demo-reference.jpg', { type: 'image/jpeg' });
+          tgtFile = new File([tb], 'demo-photo.jpg', { type: 'image/jpeg' });
+          fillZone('refZone', refFile, () => { refFile = null; clearZone('refZone'); update(); });
+          fillZone('tgtZone', tgtFile, () => { tgtFile = null; clearZone('tgtZone'); update(); });
+          update();
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        } finally {
+          $('tryDemoBtn').textContent = 'Try this example yourself →';
+        }
+      });
+    };
+    probe.src = paths.ref;
+  })();
+
   // ------------------------------------------------ privacy modal
   ['privacyOpen', 'privacyOpen2'].forEach(id => {
     const el = $(id);