Ship gallery assets as LFS tar (fix broken images)

app.py

@@ -122,6 +122,7 @@ async def process(
     tone_strength: float = Form(0.7),
     grain_mult: float = Form(1.0),
     film_tone_strength: float = Form(0.7),
+    halation_mult: float = Form(1.0),
     x_access_code: str = Header(default=''),
 ):
     if not _check_access(x_access_code):
@@ -163,6 +164,7 @@ async def process(
             tone_strength=tone_strength,
             grain_mult=grain_mult,
             film_tone_strength=film_tone_strength,
+            halation_mult=halation_mult,
             reference_filename=reference.filename or '',
             target_filename=target.filename or '',
         )

pipeline.py

@@ -360,6 +360,7 @@ class DeepAnalogPipeline:
         tone_strength: float = 0.7,
         grain_mult: float = 1.0,
         film_tone_strength: float = 0.7,
+        halation_mult: float = 1.0,
         reference_filename: str = '',
         target_filename: str = '',
     ) -> dict:
@@ -375,10 +376,20 @@ class DeepAnalogPipeline:
         grain_size_t = torch.tensor([[fp['grain_size']]], device=self.device)
         lum_params_t = torch.tensor([[fp['lum_a'], fp['lum_b'], fp['lum_c']]],
                                     device=self.device)
+        # Halation control: scales the red-orange glow around bright lights.
+        # Intensity scales linearly; radius grows gently; pushing above 1x
+        # also warms the glow color for the classic red film bloom.
+        hm = max(0.0, float(halation_mult))
         h_threshold_t = torch.tensor([[fp['h_threshold']]], device=self.device)
-        h_radius_t = torch.tensor([[fp['h_radius']]], device=self.device)
-        h_intensity_t = torch.tensor([[fp['h_intensity']]], device=self.device)
-        h_color_bias_t = torch.tensor([fp['h_color_bias']], device=self.device)
+        h_radius_t = torch.tensor([[fp['h_radius'] * (1.0 + 0.35 * max(hm - 1.0, 0.0))]],
+                                  device=self.device)
+        h_intensity_t = torch.tensor([[fp['h_intensity'] * hm]], device=self.device)
+        bias = list(fp['h_color_bias'])
+        if hm > 1.0:
+            bias = [bias[0] + 0.5 * (hm - 1.0),   # more red
+                    bias[1],
+                    bias[2] - 0.3 * (hm - 1.0)]   # less blue
+        h_color_bias_t = torch.tensor([bias], device=self.device)
 
         # 1. Color grading via predicted LUT
         graded, predicted_lut, _ = self.style_lut(target, ref_224)
@@ -411,6 +422,7 @@ class DeepAnalogPipeline:
             'tone_strength': round(float(tone_strength), 4),
             'film_tone_strength': round(float(film_tone_strength), 4),
             'grain_mult': round(float(grain_mult), 4),
+            'halation_mult': round(hm, 4),
         })
 
         return {

static/index.html

@@ -144,8 +144,11 @@
   }
   .controls.visible { display: block; }
   .controls h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
-  .sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
+  .sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
   @media (max-width: 720px) { .sliders { grid-template-columns: 1fr; } }
+  .help .tip img { display: block; width: 100%; border-radius: 6px; margin-top: 9px; }
+  .slider .help { width: 15px; height: 15px; font-size: 10px; margin-left: 6px; }
+  .slider .tip { width: min(356px, 82vw); }
   .slider label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: var(--text); }
   .slider label output { color: var(--accent); }
   input[type=range] {
@@ -373,29 +376,42 @@
   }
   .look-card .ov .pname { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }
   .look-card .ov .pmeta { font-size: 10.5px; color: rgba(255,255,255,.72); margin-top: 1px; }
+  .look-card .sprk {
+    position: absolute; top: 0; bottom: 0; width: 13px; z-index: 2;
+    background-color: #0b0b0e;
+    background-image: radial-gradient(rgba(255,255,255,.17) 2.1px, transparent 2.6px);
+    background-size: 13px 12px;
+    background-position: center;
+  }
+  .look-card .sprk.l { left: 0; border-right: 1px solid rgba(255,255,255,.05); }
+  .look-card .sprk.r { right: 0; border-left: 1px solid rgba(255,255,255,.05); }
+  .look-card .ov { padding-left: 22px; padding-right: 22px; }
   .look-card a.can-btn {
-    position: absolute; right: 7px; bottom: 7px; z-index: 3;
+    position: absolute; right: 17px; bottom: 7px; z-index: 3;
     display: block; line-height: 0;
     filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
     transition: transform .12s;
   }
   .look-card a.can-btn:hover { transform: scale(1.12); }
   .look-card.sel::after {
-    content: "✓"; position: absolute; top: 7px; right: 7px;
+    content: "✓"; position: absolute; top: 7px; right: 17px;
     width: 20px; height: 20px; border-radius: 50%;
     background: var(--accent); color: #17110a;
     font-size: 12px; font-weight: 700;
     display: flex; align-items: center; justify-content: center;
   }
-  .input-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+  .input-grid {
+    display: grid; grid-template-columns: 1fr; gap: 10px;
+    max-height: 640px; overflow-y: auto; padding-right: 5px;
+  }
   .input-grid .in-card {
-    position: relative; border-radius: 8px; overflow: hidden;
+    position: relative; border-radius: 9px; overflow: hidden;
     border: 1.5px solid var(--line); cursor: pointer;
-    transition: border-color .12s;
+    transition: border-color .12s, transform .1s;
   }
-  .input-grid .in-card:hover { border-color: var(--text-dim); }
+  .input-grid .in-card:hover { border-color: var(--text-dim); transform: translateY(-1px); }
   .input-grid .in-card.sel { border-color: var(--accent); }
-  .input-grid .in-card img { width: 100%; height: 64px; object-fit: cover; display: block; }
+  .input-grid .in-card img { width: 100%; height: 118px; object-fit: cover; display: block; }
   .input-grid .in-card.sel::after {
     content: "✓"; position: absolute; top: 5px; right: 5px;
     width: 17px; height: 17px; border-radius: 50%;
@@ -629,17 +645,38 @@
     <h3>Rendering controls</h3>
     <div class="sliders">
       <div class="slider">
-        <label>Tone match <output id="toneOut">0.70</output></label>
+        <label><span>Tone match<span class="help">?<span class="tip">Matches your photo’s
+          brightness distribution to the reference — shadows, mids and highlights are moved
+          to where the film puts them. Left: off · right: full strength.
+          <img src="static/help/tone.jpg" alt="Tone match comparison"></span></span></span>
+          <output id="toneOut">0.70</output></label>
         <input type="range" id="toneRange" min="0" max="1" step="0.05" value="0.7">
       </div>
       <div class="slider">
-        <label>Film tone <output id="filmOut">0.70</output></label>
+        <label><span>Film tone<span class="help">?<span class="tip">Film’s tonal signature:
+          lifted blacks (no pure black), a soft highlight roll-off, and the subtle color
+          tint film leaves in shadows and highlights. Left: off · right: full strength.
+          <img src="static/help/filmtone.jpg" alt="Film tone comparison"></span></span></span>
+          <output id="filmOut">0.70</output></label>
         <input type="range" id="filmRange" min="0" max="1" step="0.05" value="0.7">
       </div>
       <div class="slider">
-        <label>Grain <output id="grainOut">1.0×</output></label>
+        <label><span>Grain<span class="help">?<span class="tip">How much film grain is
+          layered onto the result. 0 = clean, 2 = gritty high-ISO texture.
+          Left: 0 · right: 2×.
+          <img src="static/help/grain.jpg" alt="Grain comparison"></span></span></span>
+          <output id="grainOut">1.0×</output></label>
         <input type="range" id="grainRange" min="0" max="2" step="0.1" value="1.0">
       </div>
+      <div class="slider">
+        <label><span>Halation<span class="help">?<span class="tip">The warm red glow film
+          creates around bright lights — light scatters off the film base and re-exposes
+          the red-sensitive layer. Push past 1× for the classic red night-street bloom.
+          Left: off · right: 3×.
+          <img src="static/help/halation.jpg" alt="Halation comparison"></span></span></span>
+          <output id="halOut">1.0×</output></label>
+        <input type="range" id="halRange" min="0" max="3" step="0.1" value="1.0">
+      </div>
     </div>
   </div>
 
@@ -891,7 +928,8 @@
   // ------------------------------------------------ sliders
   [['toneRange', 'toneOut', v => (+v).toFixed(2)],
    ['filmRange', 'filmOut', v => (+v).toFixed(2)],
-   ['grainRange', 'grainOut', v => (+v).toFixed(1) + '×']]
+   ['grainRange', 'grainOut', v => (+v).toFixed(1) + '×'],
+   ['halRange', 'halOut', v => (+v).toFixed(1) + '×']]
   .forEach(([r, o, fmt]) => {
     $(r).addEventListener('input', () => { $(o).textContent = fmt($(r).value); });
   });
@@ -905,6 +943,7 @@
       fd.append('tone_strength', $('toneRange').value);
       fd.append('film_tone_strength', $('filmRange').value);
       fd.append('grain_mult', $('grainRange').value);
+      fd.append('halation_mult', $('halRange').value);
     }
     setBusy(true, tgtFile ? 'Rendering — this can take up to a minute for large photos…'
                           : 'Predicting LUT…');
@@ -1617,6 +1656,8 @@
       card.className = 'look-card';
       card.innerHTML =
         '<img class="bg" loading="lazy" alt="">' +
+        '<span class="sprk l" aria-hidden="true"></span>' +
+        '<span class="sprk r" aria-hidden="true"></span>' +
         '<div class="ov"><div class="pname"></div><div class="pmeta"></div></div>';
       card.querySelector('.bg').src = imgSrc;
       card.querySelector('.bg').alt = name;

static_assets.tar

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d02a18a96d7015feb41ebda93fcbb5a9a745bea9beec39bdcb5c343c2f8cef16
-size 69908480
+oid sha256:32ead0e949236298f20f1ddae551e4d2e97d84052a6b8463e7dd489152181ed6
+size 70062080