feat: add crossfade overlap indicators to waveform display

Draws diagonal hatch pattern with 'CF' label over overlap zones between
adjacent segments so users can visually identify where crossfade blending
occurs. Helps correlate audio artifacts with crossfade regions during testing.

app.py

@@ -1066,7 +1066,8 @@ def _splice_and_save(new_wav, seg_idx, meta, slot_id):
 
     waveform_html = _build_waveform_html(audio_path, segments, slot_id, "",
                                          state_json=state_json_new,
-                                         video_path=video_path)
+                                         video_path=video_path,
+                                         crossfade_s=crossfade_s)
     return video_path, audio_path, updated_meta, waveform_html
 
 
@@ -1612,7 +1613,8 @@ def _build_regen_pending_html(segments: list, regen_seg_idx: int, slot_id: str,
 
 def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
                          hidden_input_id: str, state_json: str = "",
-                         fn_index: int = -1, video_path: str = "") -> str:
+                         fn_index: int = -1, video_path: str = "",
+                         crossfade_s: float = 0.0) -> str:
     """Return a self-contained HTML block with a Canvas waveform (display only),
     segment boundary markers, and a download link.
 
@@ -1659,6 +1661,7 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
   const SLOT_ID  = '{slot_id}';
   const segments = {segs_json};
   const segColors = {json.dumps(seg_colors)};
+  const crossfadeSec = {crossfade_s};
   let   audioDuration = 0;
 
   // ── Popup via postMessage to parent global listener ─────────────────
@@ -1746,6 +1749,39 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
       }});
     }});
 
+    // ── Crossfade overlap indicators ──
+    if (crossfadeSec > 0 && segments.length > 1) {{
+      for (let i = 0; i < segments.length - 1; i++) {{
+        // Overlap zone: where segment i ends and segment i+1 starts
+        const overlapStart = segments[i+1][0];
+        const overlapEnd   = Math.min(segments[i][1], overlapStart + crossfadeSec);
+        const xL = (overlapStart / duration) * W;
+        const xR = (overlapEnd   / duration) * W;
+        // Diagonal hatch pattern over the overlap zone
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(xL, 0, xR - xL, H);
+        ctx.clip();
+        ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+        ctx.lineWidth = 1;
+        const spacing = 6;
+        for (let lx = xL - H; lx < xR + H; lx += spacing) {{
+          ctx.beginPath();
+          ctx.moveTo(lx, H);
+          ctx.lineTo(lx + H, 0);
+          ctx.stroke();
+        }}
+        ctx.restore();
+        // Label
+        ctx.fillStyle = 'rgba(255,255,255,0.5)';
+        ctx.font = '9px sans-serif';
+        const cfW = xR - xL;
+        if (cfW > 20) {{
+          ctx.fillText('CF', xL + (cfW - ctx.measureText('CF').width) / 2, H - 3);
+        }}
+      }}
+    }}
+
     cv.onclick = function(e) {{
       const r=cv.getBoundingClientRect();
       const xRel=(e.clientX-r.left)/r.width;
@@ -1912,7 +1948,8 @@ def _unpack_outputs(flat: list, n: int, tab_prefix: str) -> list:
             state_json   = json.dumps(meta)
             html = _build_waveform_html(aud_path, meta["segments"], slot_id,
                                         "", state_json=state_json,
-                                        video_path=meta.get("video_path", ""))
+                                        video_path=meta.get("video_path", ""),
+                                        crossfade_s=float(meta.get("crossfade_s", 0)))
             wave_updates.append(gr.update(value=html))
         else:
             wave_updates.append(gr.update(