Deploy Deep Analog web app

.gitattributes

@@ -1,4 +1,4 @@
 *.pth filter=lfs diff=lfs merge=lfs -text
-static/movies/mov_03.jpg filter=lfs diff=lfs merge=lfs -text
-static/movies/mov_04.jpg filter=lfs diff=lfs merge=lfs -text
-static/movies/mov_08.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/tar_1.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/tar_4.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/tar_6.jpg filter=lfs diff=lfs merge=lfs -text

static/index.html

@@ -319,6 +319,27 @@
     pointer-events: none;
   }
   .movie-card:hover .use { opacity: 1; transform: translateY(0); }
+  .movie-card.sel { border-color: var(--accent); }
+  .movie-card.sel .use { opacity: 1; transform: translateY(0); }
+
+  /* ---------- playground tabs + pair bar ---------- */
+  .ref-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
+  .tab-btn {
+    background: var(--bg-3); border: 1.5px solid var(--line); border-radius: 20px;
+    color: var(--text-dim); font-size: 12.5px; font-weight: 600;
+    padding: 7px 18px; cursor: pointer; transition: all .15s;
+  }
+  .tab-btn:hover { color: var(--text); }
+  .tab-btn.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
+  .pair-bar {
+    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+    background: var(--bg-3); border: 1px solid var(--line); border-radius: 11px;
+    padding: 12px 14px; margin-top: 22px;
+  }
+  .pair-bar img { height: 52px; width: 78px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
+  .pair-plus { color: var(--text-dim); font-size: 16px; }
+  .pair-info { flex: 1; min-width: 160px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
+  .pair-info b { color: var(--text); font-weight: 600; }
 
   /* ---------- film lab ---------- */
   .lab-films { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
@@ -447,7 +468,7 @@
     <div class="result-card" id="resultBody"></div>
   </div>
 
-  <section class="demo" id="demoSection" style="display:none">
+  <section class="demo" id="demoSection">
     <h2>See it in action</h2>
     <div class="demo-card">
       <div class="demo-grid">
@@ -476,33 +497,43 @@
     </div>
   </section>
 
-  <section class="demo" id="moviesSection" style="display:none">
-    <h2>Movie looks — start from a still you love</h2>
-    <p class="section-sub">Click any still to load it as your reference, then drop in your own photo.
-      Stills from the films credited below, shown for demonstration.</p>
-    <div class="movies-grid" id="moviesGrid"></div>
-  </section>
-
-  <section class="demo" id="labSection" style="display:none">
-    <h2>Film lab — explore the looks</h2>
-    <p class="section-sub">Five real film stocks × seven scenes, pre-rendered for instant comparison.
+  <section class="demo" id="playSection">
+    <h2>Try it yourself — pick a pair</h2>
+    <p class="section-sub">Choose a reference look and an input photo, then run the pair through the model.
+      Film-stock pairs with the seven test photos also show an instant pre-rendered preview.
       All test photographs shot by <b style="color:var(--text)">Eton Mu</b>.</p>
     <div class="demo-card">
-      <div class="demo-step" style="margin-bottom:12px">Pick a film stock — click its name for the full story of that emulsion</div>
-      <div class="lab-films" id="labFilms"></div>
-      <div class="demo-step" style="margin-bottom:10px">Pick a photo</div>
+      <div class="demo-step" style="margin-bottom:10px"><b>1</b>&nbsp; Choose a reference</div>
+      <div class="ref-tabs">
+        <button class="tab-btn sel" id="tabMovies">🎬&nbsp; Movie looks</button>
+        <button class="tab-btn" id="tabFilms">🎞&nbsp; Film lab</button>
+      </div>
+      <div class="movies-grid" id="moviesGrid"></div>
+      <div class="lab-films" id="labFilms" style="display:none"></div>
+      <p class="lab-caption" id="filmsHint" style="display:none;margin-top:10px">
+        Click a film's name to read the full story of that emulsion.</p>
+
+      <div class="demo-step" style="margin:24px 0 10px"><b>2</b>&nbsp; Choose an input photo</div>
       <div class="lab-inputs" id="labInputs"></div>
-      <p class="lab-caption" id="labCaption"></p>
-      <div class="compare" id="labCompare">
-        <img class="base-img" alt="Rendered">
-        <img class="top-img" alt="Original">
-        <div class="divider"></div>
-        <span class="cmp-label" style="left:12px">RENDERED</span>
-        <span class="cmp-label" style="right:12px">ORIGINAL</span>
+
+      <div class="pair-bar">
+        <img id="pairRef" alt="Selected reference">
+        <span class="pair-plus">+</span>
+        <img id="pairInput" alt="Selected input">
+        <div class="pair-info" id="pairInfo"></div>
+        <button class="try-btn" id="runPairBtn">Run this pair in the app →</button>
       </div>
-      <div class="demo-actions">
-        <button class="try-btn" id="tryLabBtn">Open this pair in the app →</button>
-        <span style="font-size:12px;color:var(--text-dim)">predicts the LUT live from this reference</span>
+
+      <div id="instantWrap" style="display:none">
+        <div class="demo-step" style="margin:24px 0 10px">Instant preview — pre-rendered · drag to compare</div>
+        <div class="compare" id="labCompare">
+          <img class="base-img" alt="Rendered">
+          <img class="top-img" alt="Original">
+          <div class="divider"></div>
+          <span class="cmp-label" style="left:12px">RENDERED</span>
+          <span class="cmp-label" style="right:12px">ORIGINAL</span>
+        </div>
+        <p class="lab-caption" id="labCaption" style="margin-top:10px"></p>
       </div>
     </div>
   </section>
@@ -1240,91 +1271,41 @@
     return wrap;
   }
 
-  // ------------------------------------------------ demo section
-  // Shown only if demo assets exist on the server (static/demo/*.jpg).
+  // ------------------------------------------------ demo section (Happy Together walkthrough)
   (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;
-      $('demoInputImg').src = paths.target;
-      $('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;
-  })();
-
-  // ------------------------------------------------ movie looks
-  (function initMovies() {
-    const MOVIES = [
-      { file: 'static/demo/ref.jpg', title: 'Happy Together', meta: '1997 · Wong Kar-wai' },
-      { file: 'static/movies/mov_01.jpg', title: 'In the Mood for Love', meta: '2000 · Wong Kar-wai' },
-      { file: 'static/movies/mov_02.jpg', title: 'Days of Being Wild', meta: '1990 · Wong Kar-wai' },
-      { file: 'static/movies/mov_03.jpg', title: 'Close-Up', meta: '1990 · Abbas Kiarostami' },
-      { file: 'static/movies/mov_04.jpg', title: 'The Grand Budapest Hotel', meta: '2014 · Wes Anderson' },
-      { file: 'static/movies/mov_05.jpg', title: 'Barry Lyndon', meta: '1975 · Stanley Kubrick' },
-      { file: 'static/movies/mov_06.jpg', title: 'The Good, the Bad and the Ugly', meta: '1966 · Sergio Leone' },
-      { file: 'static/movies/mov_07.jpg', title: 'A Touch of Zen', meta: '1971 · King Hu' },
-      { file: 'static/movies/mov_08.jpg', title: 'Kagemusha', meta: '1980 · Akira Kurosawa' },
-    ];
-
-    function build() {
-      const grid = $('moviesGrid');
-      MOVIES.forEach(m => {
-        const card = document.createElement('div');
-        card.className = 'movie-card';
-        card.innerHTML =
-          '<img class="still" loading="lazy" alt="">' +
-          '<span class="use">USE AS REFERENCE</span>' +
-          '<div class="cap"><div class="title"></div><div class="meta"></div></div>';
-        card.querySelector('img').src = m.file;
-        card.querySelector('img').alt = m.title;
-        card.querySelector('.title').textContent = m.title;
-        card.querySelector('.meta').textContent = m.meta;
-        card.addEventListener('click', async () => {
-          const blob = await fetch(m.file).then(r => r.blob());
-          refFile = new File([blob], 'reference.jpg', { type: 'image/jpeg' });
-          fillZone('refZone', refFile, () => { refFile = null; clearZone('refZone'); update(); });
-          update();
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        grid.appendChild(card);
-      });
-    }
-
-    const probe = new Image();
-    probe.onload = () => { $('moviesSection').style.display = 'block'; build(); };
-    probe.src = 'static/movies/mov_01.jpg';
+    $('demoRefImg').src = paths.ref;
+    $('demoInputImg').src = paths.target;
+    $('demoTargetImg').src = paths.target;
+    $('demoResultImg').src = paths.result;
+    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 →';
+      }
+    });
   })();
 
-  // ------------------------------------------------ film lab
-  // Interactive gallery over the pre-rendered experiment set
-  // (static/lab/*). Each stock links to a full introduction page.
-  (function initLab() {
+  // ------------------------------------------------ demo playground
+  // Reference (movie stills OR film stocks) × input photo picker.
+  (function initPlayground() {
     const FILMS = [
       { id: 'vision3', name: 'Kodak Vision3 250D 5207', short: '250D',
         label: '#E8B23A', text: '#181205',
@@ -1342,12 +1323,32 @@
         label: '#A8503A', text: '#f7e8e2',
         url: 'https://www.pandacamera.com/products/escura-showa-400-iso-30exp-135-35mm-color-negative-film' },
     ];
-    const INPUTS = [
-      ['01', 'Tokyo alley'], ['02', 'Bicycle corridor'], ['03', 'Asakusa & Skytree'],
-      ['04', 'Rainy night, NYC'], ['05', 'Window still life'], ['06', 'Portrait at the bar'],
-      ['07', 'Pond reflection'],
+    const MOVIES = [
+      { file: 'static/demo/ref.jpg', title: 'Happy Together', meta: '1997 · Wong Kar-wai' },
+      { file: 'static/movies/mov_01.jpg', title: 'In the Mood for Love', meta: '2000 · Wong Kar-wai' },
+      { file: 'static/movies/mov_02.jpg', title: 'Days of Being Wild', meta: '1990 · Wong Kar-wai' },
+      { file: 'static/movies/mov_03.jpg', title: 'Close-Up', meta: '1990 · Abbas Kiarostami' },
+      { file: 'static/movies/mov_04.jpg', title: 'The Grand Budapest Hotel', meta: '2014 · Wes Anderson' },
+      { file: 'static/movies/mov_05.jpg', title: 'Barry Lyndon', meta: '1975 · Stanley Kubrick' },
+      { file: 'static/movies/mov_06.jpg', title: 'The Good, the Bad and the Ugly', meta: '1966 · Sergio Leone' },
+      { file: 'static/movies/mov_07.jpg', title: 'A Touch of Zen', meta: '1971 · King Hu' },
+      { file: 'static/movies/mov_08.jpg', title: 'Kagemusha', meta: '1980 · Akira Kurosawa' },
     ];
-    let film = FILMS[0], input = INPUTS[0];
+    const INPUTS = [
+      ['01', 'Tokyo alley', true], ['02', 'Bicycle corridor', true],
+      ['03', 'Asakusa & Skytree', true], ['04', 'Rainy night, NYC', true],
+      ['05', 'Window still life', true], ['06', 'Portrait at the bar', true],
+      ['07', 'Pond reflection', true],
+      ['t1', 'Hilltop monastery, Tibet', false],
+      ['t4', 'Hanging garden', false],
+      ['t6', 'Cypress swamp', false],
+    ].map(a => ({
+      id: a[0], name: a[1], lab: a[2],
+      src: a[2] ? 'static/lab/input_' + a[0] + '.jpg'
+                : 'static/lab/tar_' + a[0].slice(1) + '.jpg',
+    }));
+
+    let refType = 'movie', movie = MOVIES[0], film = FILMS[0], input = INPUTS[0];
 
     function canisterSvg(f) {
       return '<svg class="canister" width="34" height="46" viewBox="0 0 34 46" aria-hidden="true">' +
@@ -1362,67 +1363,106 @@
         '<rect x="3" y="40" width="28" height="4" rx="2" fill="#333338"/></svg>';
     }
 
-    function refresh(resetDivider) {
+    function refSrc() { return refType === 'movie' ? movie.file : 'static/lab/ref_' + film.id + '.jpg'; }
+    function refName() { return refType === 'movie' ? movie.title : film.name; }
+
+    function refresh() {
+      document.querySelectorAll('#moviesGrid .movie-card').forEach((el, i) => {
+        const sel = refType === 'movie' && MOVIES[i] === movie;
+        el.classList.toggle('sel', sel);
+        el.querySelector('.use').textContent = sel ? '✓ SELECTED' : 'SELECT';
+      });
       document.querySelectorAll('#labFilms .film-card').forEach((el, i) =>
-        el.classList.toggle('sel', FILMS[i] === film));
+        el.classList.toggle('sel', refType === 'film' && FILMS[i] === film));
       document.querySelectorAll('#labInputs img').forEach((el, i) =>
         el.classList.toggle('sel', INPUTS[i] === input));
-      const cmp = $('labCompare');
-      cmp.querySelector('.base-img').src = 'static/lab/' + input[0] + '_' + film.id + '.jpg';
-      cmp.querySelector('.top-img').src = 'static/lab/input_' + input[0] + '.jpg';
-      $('labCaption').innerHTML = '<b>' + input[1] + '</b> rendered as <b>' + film.name + '</b>';
+
+      $('pairRef').src = refSrc();
+      $('pairInput').src = input.src;
+      $('pairInfo').innerHTML = '<b>' + refName() + '</b> &nbsp;→&nbsp; <b>' + input.name + '</b>';
+
+      const instant = refType === 'film' && input.lab;
+      $('instantWrap').style.display = instant ? 'block' : 'none';
+      if (instant) {
+        const cmp = $('labCompare');
+        cmp.querySelector('.base-img').src = 'static/lab/' + input.id + '_' + film.id + '.jpg';
+        cmp.querySelector('.top-img').src = input.src;
+        $('labCaption').innerHTML = '<b>' + input.name + '</b> rendered as <b>' + film.name + '</b>';
+      }
     }
 
-    function build() {
-      const filmsBox = $('labFilms');
-      FILMS.forEach(f => {
-        const card = document.createElement('div');
-        card.className = 'film-card';
-        card.innerHTML =
-          '<img class="thumb" alt="" src="static/lab/ref_' + f.id + '.jpg">' +
-          '<div class="meta">' + canisterSvg(f) +
-          '<a class="stock" target="_blank" rel="noopener">' + f.name +
-          ' <span class="ext">↗</span></a></div>';
-        const a = card.querySelector('a.stock');
-        a.href = f.url;
-        a.title = 'About ' + f.name;
-        a.addEventListener('click', e => e.stopPropagation());
-        card.addEventListener('click', () => { film = f; refresh(); });
-        filmsBox.appendChild(card);
-      });
-      const inputsBox = $('labInputs');
-      INPUTS.forEach(inp => {
-        const im = document.createElement('img');
-        im.src = 'static/lab/input_' + inp[0] + '.jpg';
-        im.alt = inp[1]; im.title = inp[1];
-        im.addEventListener('click', () => { input = inp; refresh(); });
-        inputsBox.appendChild(im);
-      });
-      initCompare($('labCompare'));
+    function setTab(t) {
+      refType = t;
+      $('tabMovies').classList.toggle('sel', t === 'movie');
+      $('tabFilms').classList.toggle('sel', t === 'film');
+      $('moviesGrid').style.display = t === 'movie' ? 'grid' : 'none';
+      $('labFilms').style.display = t === 'film' ? 'grid' : 'none';
+      $('filmsHint').style.display = t === 'film' ? 'block' : 'none';
       refresh();
-
-      $('tryLabBtn').addEventListener('click', async () => {
-        try {
-          $('tryLabBtn').textContent = 'Loading…';
-          const [rb, tb] = await Promise.all([
-            fetch('static/lab/ref_' + film.id + '.jpg').then(r => r.blob()),
-            fetch('static/lab/input_' + input[0] + '.jpg').then(r => r.blob()),
-          ]);
-          refFile = new File([rb], film.id + '-reference.jpg', { type: 'image/jpeg' });
-          tgtFile = new File([tb], '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 {
-          $('tryLabBtn').textContent = 'Open this pair in the app →';
-        }
-      });
     }
+    $('tabMovies').addEventListener('click', () => setTab('movie'));
+    $('tabFilms').addEventListener('click', () => setTab('film'));
+
+    MOVIES.forEach(m => {
+      const card = document.createElement('div');
+      card.className = 'movie-card';
+      card.innerHTML =
+        '<img class="still" loading="lazy" alt="">' +
+        '<span class="use">SELECT</span>' +
+        '<div class="cap"><div class="title"></div><div class="meta"></div></div>';
+      card.querySelector('img').src = m.file;
+      card.querySelector('img').alt = m.title;
+      card.querySelector('.title').textContent = m.title;
+      card.querySelector('.meta').textContent = m.meta;
+      card.addEventListener('click', () => { movie = m; refresh(); });
+      $('moviesGrid').appendChild(card);
+    });
+
+    FILMS.forEach(f => {
+      const card = document.createElement('div');
+      card.className = 'film-card';
+      card.innerHTML =
+        '<img class="thumb" loading="lazy" alt="" src="static/lab/ref_' + f.id + '.jpg">' +
+        '<div class="meta">' + canisterSvg(f) +
+        '<a class="stock" target="_blank" rel="noopener">' + f.name +
+        ' <span class="ext">↗</span></a></div>';
+      const a = card.querySelector('a.stock');
+      a.href = f.url;
+      a.title = 'About ' + f.name;
+      a.addEventListener('click', e => e.stopPropagation());
+      card.addEventListener('click', () => { film = f; refresh(); });
+      $('labFilms').appendChild(card);
+    });
 
-    const probe = new Image();
-    probe.onload = () => { $('labSection').style.display = 'block'; build(); };
-    probe.src = 'static/lab/ref_vision3.jpg';
+    INPUTS.forEach(inp => {
+      const im = document.createElement('img');
+      im.src = inp.src;
+      im.loading = 'lazy';
+      im.alt = inp.name; im.title = inp.name;
+      im.addEventListener('click', () => { input = inp; refresh(); });
+      $('labInputs').appendChild(im);
+    });
+
+    initCompare($('labCompare'));
+    setTab('movie');
+
+    $('runPairBtn').addEventListener('click', async () => {
+      try {
+        $('runPairBtn').textContent = 'Loading…';
+        const [rb, tb] = await Promise.all([
+          fetch(refSrc()).then(r => r.blob()),
+          fetch(input.src).then(r => r.blob()),
+        ]);
+        refFile = new File([rb], 'reference.jpg', { type: 'image/jpeg' });
+        tgtFile = new File([tb], '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 {
+        $('runPairBtn').textContent = 'Run this pair in the app →';
+      }
+    });
   })();
 
   // ------------------------------------------------ privacy modal