Deploy Deep Analog web app

static/index.html

@@ -221,6 +221,27 @@
   .dl-btn:hover { border-color: var(--accent); }
   .dl-btn .kind { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
 
+  /* ---------- 3D LUT visualization ---------- */
+  .viz-wrap { margin-top: 20px; }
+  .viz-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
+  .viz-head .t { font-size: 11.5px; color: var(--text-dim); letter-spacing: .12em; text-transform: uppercase; }
+  .viz-head .hint { font-size: 11px; color: var(--text-dim); }
+  .viz-canvas {
+    width: 100%; height: 420px; display: block;
+    border-radius: 10px; border: 1px solid var(--line);
+    background: radial-gradient(600px 380px at 50% 45%, #17171c, #0a0a0c 80%);
+    cursor: grab; touch-action: none;
+  }
+  .viz-canvas:active { cursor: grabbing; }
+  .viz-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
+  .viz-controls .vlbl { font-size: 11px; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; }
+  .viz-controls input[type=range] { flex: 1; }
+  .viz-play {
+    background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
+    color: var(--accent); font-size: 12px; padding: 6px 12px; cursor: pointer;
+  }
+  .viz-play:hover { border-color: var(--accent); }
+
   /* ---------- privacy modal ---------- */
   #privacyModal {
     position: fixed; inset: 0; z-index: 950;
@@ -548,6 +569,10 @@
       initCompare(cmp);
     }
 
+    // 3D visualization of the predicted LUT (both modes)
+    try { body.appendChild(makeVizCard(data.cube_lut)); }
+    catch (e) { /* WebGL unavailable — skip viz silently */ }
+
     const dls = document.createElement('div');
     dls.className = 'downloads';
     dls.appendChild(dlButton('Download LUT', '.CUBE 33³',
@@ -590,6 +615,237 @@
     cmp.addEventListener('pointerup', () => { dragging = false; });
   }
 
+  // ------------------------------------------------ 3D LUT visualization
+  // Self-contained WebGL point cloud — no libraries, no external requests.
+  // Shows the LUT lattice morphing from identity (perfect cube) to the
+  // predicted film transform. Drag to rotate, scroll to zoom.
+
+  function parseCube(text) {
+    let N = 0; const vals = [];
+    const lines = text.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      const t = lines[i].trim();
+      if (!t || t[0] === 'T' || t[0] === 'D') continue;   // TITLE / DOMAIN_*
+      if (t[0] === 'L') { N = parseInt(t.split(/\s+/)[1], 10); continue; }
+      const p = t.split(/\s+/);
+      if (p.length === 3) vals.push(+p[0], +p[1], +p[2]);
+    }
+    return { N, out: new Float32Array(vals) };
+  }
+
+  function makeVizCard(cubeText) {
+    const wrap = document.createElement('div');
+    wrap.className = 'viz-wrap';
+    wrap.innerHTML =
+      '<div class="viz-head"><span class="t">Color space — 3D LUT</span>' +
+      '<span class="hint">drag to rotate · scroll to zoom</span></div>' +
+      '<canvas class="viz-canvas"></canvas>' +
+      '<div class="viz-controls">' +
+      '<button class="viz-play">❚❚</button>' +
+      '<span class="vlbl">Original</span>' +
+      '<input type="range" min="0" max="1" step="0.001" value="0">' +
+      '<span class="vlbl" style="color:var(--accent)">Film</span></div>';
+
+    const canvas = wrap.querySelector('canvas');
+    const slider = wrap.querySelector('input[type=range]');
+    const playBtn = wrap.querySelector('.viz-play');
+
+    const { N, out } = parseCube(cubeText);
+    if (!N || out.length !== N * N * N * 3) throw new Error('bad cube');
+
+    // identity lattice: red varies fastest (.cube convention)
+    const n3 = N * N * N;
+    const idn = new Float32Array(n3 * 3);
+    for (let i = 0; i < n3; i++) {
+      idn[i * 3]     = (i % N) / (N - 1);
+      idn[i * 3 + 1] = (Math.floor(i / N) % N) / (N - 1);
+      idn[i * 3 + 2] = Math.floor(i / (N * N)) / (N - 1);
+    }
+
+    const gl = canvas.getContext('webgl', { antialias: true, alpha: true });
+    if (!gl) throw new Error('no webgl');
+
+    function compile(vs, fs) {
+      function sh(type, src) {
+        const s = gl.createShader(type);
+        gl.shaderSource(s, src); gl.compileShader(s);
+        if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+          throw new Error(gl.getShaderInfoLog(s));
+        return s;
+      }
+      const p = gl.createProgram();
+      gl.attachShader(p, sh(gl.VERTEX_SHADER, vs));
+      gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs));
+      gl.linkProgram(p);
+      if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+        throw new Error(gl.getProgramInfoLog(p));
+      return p;
+    }
+
+    const ptProg = compile(
+      'attribute vec3 aId; attribute vec3 aOut;' +
+      'uniform mat4 uMVP; uniform float uMorph; uniform float uSize;' +
+      'varying vec3 vC;' +
+      'void main(){' +
+      '  vec3 p = mix(aId, aOut, uMorph);' +
+      '  vC = p;' +
+      '  gl_Position = uMVP * vec4(p - 0.5, 1.0);' +
+      '  gl_PointSize = uSize / gl_Position.w;' +
+      '}',
+      'precision mediump float; varying vec3 vC;' +
+      'void main(){' +
+      '  vec2 d = gl_PointCoord - 0.5;' +
+      '  float r = length(d);' +
+      '  if (r > 0.5) discard;' +
+      '  float a = smoothstep(0.5, 0.1, r);' +
+      '  gl_FragColor = vec4(vC * (0.35 + 0.65 * a), a * 0.9);' +
+      '}');
+
+    const lnProg = compile(
+      'attribute vec3 aPos; uniform mat4 uMVP; varying vec3 vC;' +
+      'void main(){ vC = aPos; gl_Position = uMVP * vec4(aPos - 0.5, 1.0); }',
+      'precision mediump float; varying vec3 vC;' +
+      'void main(){ gl_FragColor = vec4(vC * 0.85 + 0.15, 0.22); }');
+
+    // buffers
+    function buf(data) {
+      const b = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, b);
+      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+      return b;
+    }
+    const bId = buf(idn), bOut = buf(out);
+
+    // reference cube wireframe (12 edges)
+    const E = [];
+    const c = [[0,0,0],[1,0,0],[0,1,0],[0,0,1],[1,1,0],[1,0,1],[0,1,1],[1,1,1]];
+    [[0,1],[0,2],[0,3],[1,4],[1,5],[2,4],[2,6],[3,5],[3,6],[4,7],[5,7],[6,7]]
+      .forEach(([a,b2]) => { E.push(...c[a], ...c[b2]); });
+    const bEdge = buf(new Float32Array(E));
+
+    // mat4 helpers (column-major)
+    function mul(a, b) {
+      const o = new Float32Array(16);
+      for (let i = 0; i < 4; i++) for (let j = 0; j < 4; j++) {
+        let s = 0;
+        for (let k = 0; k < 4; k++) s += a[k * 4 + j] * b[i * 4 + k];
+        o[i * 4 + j] = s;
+      }
+      return o;
+    }
+    function persp(fov, asp, n2, f) {
+      const t = 1 / Math.tan(fov / 2);
+      return new Float32Array([t / asp,0,0,0, 0,t,0,0, 0,0,(f+n2)/(n2-f),-1, 0,0,2*f*n2/(n2-f),0]);
+    }
+    function rotY(a) { const s=Math.sin(a),co=Math.cos(a);
+      return new Float32Array([co,0,-s,0, 0,1,0,0, s,0,co,0, 0,0,0,1]); }
+    function rotX(a) { const s=Math.sin(a),co=Math.cos(a);
+      return new Float32Array([1,0,0,0, 0,co,s,0, 0,-s,co,0, 0,0,0,1]); }
+    function trans(z) {
+      return new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,z,1]); }
+
+    // state
+    let yaw = 0.7, pitch = 0.45, dist = 2.6;
+    let dragging = false, lastX = 0, lastY = 0, lastInteract = 0;
+    let morph = 0, playing = true, phase = 0;
+
+    canvas.addEventListener('pointerdown', e => {
+      dragging = true; lastX = e.clientX; lastY = e.clientY;
+      lastInteract = performance.now();
+      canvas.setPointerCapture(e.pointerId);
+    });
+    canvas.addEventListener('pointermove', e => {
+      if (!dragging) return;
+      yaw += (e.clientX - lastX) * 0.008;
+      pitch = Math.max(-1.45, Math.min(1.45, pitch + (e.clientY - lastY) * 0.008));
+      lastX = e.clientX; lastY = e.clientY;
+      lastInteract = performance.now();
+    });
+    canvas.addEventListener('pointerup', () => { dragging = false; });
+    canvas.addEventListener('wheel', e => {
+      e.preventDefault();
+      dist = Math.max(1.5, Math.min(4.5, dist + e.deltaY * 0.002));
+      lastInteract = performance.now();
+    }, { passive: false });
+
+    slider.addEventListener('input', () => {
+      playing = false; playBtn.textContent = '▶';
+      morph = +slider.value;
+    });
+    playBtn.addEventListener('click', () => {
+      playing = !playing;
+      playBtn.textContent = playing ? '❚❚' : '▶';
+    });
+
+    const aId = gl.getAttribLocation(ptProg, 'aId');
+    const aOut = gl.getAttribLocation(ptProg, 'aOut');
+    const aPos = gl.getAttribLocation(lnProg, 'aPos');
+
+    let alive = true;
+    const obs = new MutationObserver(() => {
+      if (!document.body.contains(canvas)) { alive = false; obs.disconnect(); }
+    });
+    obs.observe(document.body, { childList: true, subtree: true });
+
+    function frame(t) {
+      if (!alive) return;
+      // resize
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const w = canvas.clientWidth, h = canvas.clientHeight;
+      if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+        canvas.width = w * dpr; canvas.height = h * dpr;
+      }
+      gl.viewport(0, 0, canvas.width, canvas.height);
+
+      // auto-rotate when idle
+      if (!dragging && t - lastInteract > 2500) yaw += 0.0035;
+
+      // morph ping-pong with holds at each end
+      if (playing) {
+        phase = (phase + 1 / 360) % 2;               // 6 s full cycle
+        const p = phase < 1 ? phase : 2 - phase;      // 0→1→0
+        const q = Math.max(0, Math.min(1, (p - 0.15) / 0.7));
+        morph = q * q * (3 - 2 * q);                  // smoothstep + end holds
+        slider.value = morph;
+      }
+
+      const mvp = mul(persp(0.72, w / h, 0.1, 20),
+                  mul(trans(-dist), mul(rotX(pitch), rotY(yaw))));
+
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.disable(gl.DEPTH_TEST);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE);             // additive glow
+
+      // wireframe
+      gl.useProgram(lnProg);
+      gl.uniformMatrix4fv(gl.getUniformLocation(lnProg, 'uMVP'), false, mvp);
+      gl.bindBuffer(gl.ARRAY_BUFFER, bEdge);
+      gl.enableVertexAttribArray(aPos);
+      gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0);
+      gl.drawArrays(gl.LINES, 0, 24);
+
+      // points
+      gl.useProgram(ptProg);
+      gl.uniformMatrix4fv(gl.getUniformLocation(ptProg, 'uMVP'), false, mvp);
+      gl.uniform1f(gl.getUniformLocation(ptProg, 'uMorph'), morph);
+      gl.uniform1f(gl.getUniformLocation(ptProg, 'uSize'), 9.0 * dpr);
+      gl.bindBuffer(gl.ARRAY_BUFFER, bId);
+      gl.enableVertexAttribArray(aId);
+      gl.vertexAttribPointer(aId, 3, gl.FLOAT, false, 0, 0);
+      gl.bindBuffer(gl.ARRAY_BUFFER, bOut);
+      gl.enableVertexAttribArray(aOut);
+      gl.vertexAttribPointer(aOut, 3, gl.FLOAT, false, 0, 0);
+      gl.drawArrays(gl.POINTS, 0, n3);
+
+      requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+
+    return wrap;
+  }
+
   // ------------------------------------------------ privacy modal
   ['privacyOpen', 'privacyOpen2'].forEach(id => {
     const el = $(id);