Deploy Deep Analog web app

.gitattributes

@@ -1 +1,48 @@
 *.pth filter=lfs diff=lfs merge=lfs -text
+static/lab/01_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/01_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/01_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/01_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/01_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/02_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/02_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/02_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/02_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/02_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/03_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/03_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/03_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/03_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/03_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/04_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/04_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/04_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/04_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/04_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/05_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/05_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/05_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/05_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/05_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/06_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/06_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/06_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/06_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/06_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/07_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/07_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/07_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/07_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/07_vision3.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_01.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_02.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_03.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_04.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_05.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_06.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/input_07.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/ref_edo400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/ref_fuji400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/ref_gold400.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/ref_showa.jpg filter=lfs diff=lfs merge=lfs -text
+static/lab/ref_vision3.jpg filter=lfs diff=lfs merge=lfs -text

static/index.html

@@ -296,6 +296,35 @@
   }
   .try-btn:hover { background: var(--accent); color: #17110a; }
 
+  /* ---------- film lab ---------- */
+  .lab-films { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
+  @media (max-width: 820px) { .lab-films { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
+  .film-card {
+    background: var(--bg-3); border: 1.5px solid var(--line); border-radius: 11px;
+    overflow: hidden; cursor: pointer; transition: border-color .15s, transform .1s;
+  }
+  .film-card:hover { transform: translateY(-2px); }
+  .film-card.sel { border-color: var(--accent); }
+  .film-card .thumb { width: 100%; height: 76px; object-fit: cover; display: block; }
+  .film-card .meta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
+  .film-card .canister { flex: 0 0 auto; }
+  .film-card a.stock {
+    font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--text);
+    text-decoration: none; border-bottom: 1px dotted var(--text-dim);
+  }
+  .film-card a.stock:hover { color: var(--accent); border-color: var(--accent); }
+  .film-card a.stock .ext { color: var(--text-dim); font-size: 10px; }
+  .lab-inputs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
+  .lab-inputs img {
+    width: 86px; height: 58px; object-fit: cover; border-radius: 7px;
+    border: 1.5px solid var(--line); cursor: pointer; opacity: .75;
+    transition: opacity .15s, border-color .15s;
+  }
+  .lab-inputs img:hover { opacity: 1; }
+  .lab-inputs img.sel { border-color: var(--accent); opacity: 1; }
+  .lab-caption { font-size: 12px; color: var(--text-dim); margin: 0 0 10px; }
+  .lab-caption b { color: var(--accent); font-weight: 600; }
+
   /* ---------- privacy modal ---------- */
   #privacyModal {
     position: fixed; inset: 0; z-index: 950;
@@ -402,9 +431,11 @@
           <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 class="demo-step" style="margin-top:18px"><b>2</b>&nbsp; Add your own photo — the input</div>
+          <img id="demoInputImg" alt="Input photo" style="width:100%;border-radius:8px;display:block">
         </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="demo-step"><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">
@@ -421,6 +452,28 @@
     </div>
   </section>
 
+  <section class="demo" id="labSection" style="display:none">
+    <h2>Film lab — explore the looks</h2>
+    <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="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>
+      <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>
+    </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>.
@@ -1165,6 +1218,7 @@
     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';
@@ -1191,6 +1245,110 @@
     probe.src = paths.ref;
   })();
 
+  // ------------------------------------------------ film lab
+  // Interactive gallery over the pre-rendered experiment set
+  // (static/lab/*). Each stock links to a full introduction page.
+  (function initLab() {
+    const FILMS = [
+      { id: 'vision3', name: 'Kodak Vision3 250D 5207', short: '250D',
+        label: '#E8B23A', text: '#181205',
+        url: 'https://www.kodak.com/en/motion/product/camera-films/250d-5207-7207/' },
+      { id: 'gold400', name: 'Kodak Gold 400', short: 'GOLD 400',
+        label: '#F2C230', text: '#181205',
+        url: 'https://en.wikipedia.org/wiki/Kodak_Gold' },
+      { id: 'fuji400', name: 'Fujifilm 400', short: 'FUJI 400',
+        label: '#1A9E60', text: '#04160c',
+        url: 'https://www.fujifilm.com/us/en/consumer/films/consumer-film/fujifilm-400' },
+      { id: 'edo400', name: 'Escura Edo Ukiyo-e 400', short: 'EDO 400',
+        label: '#2C3D5C', text: '#dfe6f2',
+        url: 'https://www.pandacamera.com/products/escura-%E6%B1%9F%E6%88%B6-%E6%B5%AE%E4%B8%96%E7%B9%AA-edo-ukiyo-e-400-iso-24exp-135-35mm-color-negative-film' },
+      { id: 'showa', name: 'Escura Showa 400', short: 'SHOWA',
+        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'],
+    ];
+    let 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">' +
+        '<rect x="11" y="1" width="12" height="5" rx="1.5" fill="#4a4a52"/>' +
+        '<rect x="8" y="5" width="18" height="3" rx="1" fill="#333338"/>' +
+        '<rect x="3" y="8" width="28" height="36" rx="4" fill="#232328"/>' +
+        '<rect x="3" y="14" width="28" height="22" fill="' + f.label + '"/>' +
+        '<text x="17" y="27" text-anchor="middle" font-size="6.5" font-weight="700" ' +
+        'font-family="ui-monospace,Menlo,monospace" fill="' + f.text + '">' + f.short + '</text>' +
+        '<text x="17" y="33.5" text-anchor="middle" font-size="4.6" ' +
+        'font-family="ui-monospace,Menlo,monospace" fill="' + f.text + '" opacity="0.75">35mm · C-41</text>' +
+        '<rect x="3" y="40" width="28" height="4" rx="2" fill="#333338"/></svg>';
+    }
+
+    function refresh(resetDivider) {
+      document.querySelectorAll('#labFilms .film-card').forEach((el, i) =>
+        el.classList.toggle('sel', 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>';
+    }
+
+    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'));
+      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 →';
+        }
+      });
+    }
+
+    const probe = new Image();
+    probe.onload = () => { $('labSection').style.display = 'block'; build(); };
+    probe.src = 'static/lab/ref_vision3.jpg';
+  })();
+
   // ------------------------------------------------ privacy modal
   ['privacyOpen', 'privacyOpen2'].forEach(id => {
     const el = $(id);