Add mechanism visualization page (static/index.html)

static/index.html

@@ -835,7 +835,7 @@
       <div class="brand-sub">machine learning powered color rebuild</div>
     </div>
     <div class="head-right">
-      <a class="head-link" id="howOpen"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2.5"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/><circle cx="12" cy="12" r="2.4"/></svg><span>How the ML algorithm works here</span></a>
+      <a class="head-link" id="howOpen" href="static/visualization.html" target="_blank" rel="noopener"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2.5"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/><circle cx="12" cy="12" r="2.4"/></svg><span>How the ML algorithm works here</span></a>
       <a class="head-link" id="privacyOpen"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><rect x="4" y="10.5" width="16" height="10" rx="2.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg><span>Your privacy is strictly guaranteed</span></a>
     </div>
   </header>
@@ -1030,67 +1030,6 @@
 </div>
 
 <!-- ======================= HOW IT WORKS MODAL ======================= -->
-<div id="howModal" class="modal-bg">
-  <div class="modal-card wide">
-    <h2>How Deep Analog works</h2>
-    <div class="sub">From a single reference image to a reusable film look — in seconds</div>
-
-    <p style="margin-top:14px"><a href="static/visualization.html" target="_blank" rel="noopener"
-       style="display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;text-decoration:none;border:1px solid var(--accent);border-radius:10px;padding:9px 16px;">
-       <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/></svg>
-       Visualization of mechanisms&nbsp;→</a></p>
-
-    <p>In plain English: Deep Analog <b>reverse-engineers film through data</b>. During
-    training, the model studied thousands of photograph pairs — the same picture with and
-    without a look applied — over and over, hundreds of thousands of exposures in total,
-    until it learned the hidden mapping between <i>how an image looks</i> and <i>the recipe
-    that makes it look that way</i>. It's like an apprentice darkroom printer who has studied
-    so many of the master's prints that, shown any new frame just once, they can write down
-    the complete formula — color, tone, grain, glow — to recreate it. That written-down
-    formula is exactly what this site hands you.</p>
-
-    <img class="figure" src="static/how/teaser.jpg" alt="Deep Analog teaser: reference film scan to predicted LUT to rendered photo">
-
-    <h4><span class="step-n">1</span>Two networks read your reference</h4>
-    <p>When you upload a reference — a film scan, a movie still, anything with a look you love —
-    two small neural networks study it. <b>StyleLUTNet</b> encodes its color character and predicts
-    a complete <b>3D LUT</b>: a 33×33×33 lattice that says, for every color a photo can contain,
-    what color the film would turn it into. <b>FilmAnalyzerNet</b> estimates the physical
-    parameters of the film itself: grain density and size, and the threshold, radius and tint
-    of its halation.</p>
-    <img class="figure" src="static/how/architecture.jpg" alt="Deep Analog architecture: StyleLUTNet predicts a 3D LUT, FilmAnalyzerNet extracts physical parameters">
-    <p class="figcap">The Deep Analog architecture (from the paper).</p>
-
-    <h4><span class="step-n">2</span>A six-stage digital darkroom</h4>
-    <p>Your photo is then developed through a deterministic pipeline, mirroring how film actually
-    forms an image: the predicted <b>3D LUT</b> grades the color → <b>tone-curve matching</b> aligns
-    the brightness distribution with the reference → <b>film tone</b> lifts the blacks, rolls off
-    the highlights and applies the stock's shadow/highlight tints → <b>multi-scale grain</b> is
-    synthesized → <b>per-channel halation</b> scatters a red glow around bright lights.</p>
-    <img class="figure" src="static/how/stages.jpg" alt="Reference-conditioned processing workflow: input, LUT grading, tone matching, film tone, grain, halation">
-    <p class="figcap">The reference-conditioned processing workflow (from the paper).</p>
-
-    <h4><span class="step-n">3</span>Everything is yours to keep</h4>
-    <p>The extracted look leaves with you: the exact <b>.cube LUT</b> for Photoshop, Resolve,
-    Premiere or Final Cut; <b>.xmp</b> and <b>.costyle</b> presets for Lightroom and Capture One;
-    and the full parameter set as <b>JSON</b>. Your images are processed in memory and never
-    stored — see the privacy statement for details.</p>
-
-    <h4><span class="step-n">4</span>Under the hood</h4>
-    <p>StyleLUTNet is an <b>82.6-million-parameter</b> model built on a ResNet-18 encoder and an
-    MLP decoder that predicts a 17³ residual LUT, upsampled trilinearly to 33³. It was trained
-    for <b>100 epochs</b> on style-transfer pairs built from the
-    <b>MIT-Adobe FiveK</b> dataset (5,000 professionally retouched photographs), with smoothness,
-    monotonicity and histogram-matching losses to keep the predicted LUTs physically plausible,
-    and evaluated on a held-out 350-image test set. Because the reference is read at 224×224
-    and the LUT is applied by interpolation, the whole pipeline runs in seconds on a CPU —
-    no GPU needed, which is exactly what this demo is running on.</p>
-
-    <p class="patent-note">Deep Analog · MSCS capstone research by Eton Mu · Patent pending.</p>
-    <button class="close-btn" id="howClose">Close</button>
-  </div>
-</div>
-
 <!-- ======================= PRIVACY MODAL ======================= -->
 <div id="privacyModal">
   <div class="modal-card">
@@ -2349,12 +2288,6 @@
     if (e.target === $('privacyModal')) $('privacyModal').classList.remove('open');
   });
 
-  // ------------------------------------------------ how-it-works modal
-  $('howOpen').addEventListener('click', () => $('howModal').classList.add('open'));
-  $('howClose').addEventListener('click', () => $('howModal').classList.remove('open'));
-  $('howModal').addEventListener('click', e => {
-    if (e.target === $('howModal')) $('howModal').classList.remove('open');
-  });
 })();
 </script>
 </body>