refactor: round 2 — add CropRegion edge/box properties, externalise CSS

pipeline/crop.py
- Add CropRegion.frame_x2 / frame_y2 (exclusive right/bottom edges) and
pil_box (4-tuple for PIL.Image.crop()). The pattern
``(cr.frame_x, cr.frame_y, cr.frame_x + cr.frame_w, cr.frame_y + cr.frame_h)``
was reconstructed in 5+ places; ``cr.pil_box`` is now the single source.
Numpy slices like ``arr[cr.frame_y:cr.frame_y2, cr.frame_x:cr.frame_x2]``
read more cleanly than the previous ``+ cr.frame_h`` arithmetic.

Sites updated to use the new properties:
- pipeline/composite.py: composite_with_alpha numpy slicing (also drops
a redundant trailing .astype(np.uint8) on the already-uint8 result)
- pipeline/lama.py: _load_crop
- pipeline/vace.py: _load_chunk_crops
- pipeline/crop.py: build_inpaint_mask source-mask cropping
- app.py: _create_crop_preview rectangle + mask overlay

static/style.css (new file)
- The 100-line CSS string previously embedded in app.py now lives in its
own file so it gets proper editor syntax highlighting and shows up as
a separate diff in PR reviews. Loaded at module import via
``Path(__file__).parent / "static/style.css"``.

Net: app.py 792 → 688 (-104 lines), other files net -5.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app.py

@@ -76,110 +76,9 @@ ALL_MODES = (MODE_FAST, MODE_QUALITY)
 prewarm_vace_cache()
 
 # ---------------------------------------------------------------------------
-# CSS — dark premium theme
+# CSS — dark theme; lives in static/style.css for syntax highlighting & diffability
 # ---------------------------------------------------------------------------
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-* { box-sizing: border-box; }
-
-body, .gradio-container {
-    font-family: 'Inter', sans-serif !important;
-    background: #0d1117 !important;
-    color: #e6edf3 !important;
-}
-
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    padding: 24px !important;
-}
-
-/* Header */
-.header-block {
-    text-align: center;
-    padding: 32px 0 24px;
-}
-.header-block h1 {
-    font-size: 2rem;
-    font-weight: 700;
-    background: linear-gradient(135deg, #2dd4bf, #06b6d4);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 8px;
-}
-.header-block p {
-    color: #8b949e;
-    font-size: 0.95rem;
-}
-
-/* Cards */
-.card {
-    background: #161b22;
-    border: 1px solid #30363d;
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 16px;
-}
-.card-title {
-    font-size: 0.8rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: #8b949e;
-    margin-bottom: 12px;
-}
-
-/* Buttons */
-.btn-primary {
-    background: linear-gradient(135deg, #0f766e, #0e7490) !important;
-    border: none !important;
-    color: white !important;
-    font-weight: 600 !important;
-    border-radius: 8px !important;
-    padding: 10px 24px !important;
-    transition: opacity 0.2s !important;
-}
-.btn-primary:hover { opacity: 0.85 !important; }
-
-.btn-secondary {
-    background: #21262d !important;
-    border: 1px solid #30363d !important;
-    color: #e6edf3 !important;
-    font-weight: 500 !important;
-    border-radius: 8px !important;
-    transition: border-color 0.2s !important;
-}
-.btn-secondary:hover { border-color: #2dd4bf !important; }
-
-/* Status */
-.status-box textarea {
-    background: #0d1117 !important;
-    border: 1px solid #30363d !important;
-    color: #8b949e !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.82rem !important;
-    border-radius: 8px !important;
-}
-
-/* Mode radio */
-.mode-radio label { font-weight: 500 !important; }
-
-/* Steps badge */
-.step-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: #0f766e;
-    color: white;
-    font-size: 0.75rem;
-    font-weight: 700;
-    margin-right: 8px;
-}
-"""
+CSS = (Path(__file__).resolve().parent / "static" / "style.css").read_text()
 
 # ---------------------------------------------------------------------------
 # Helpers
@@ -261,7 +160,7 @@ def _create_crop_preview(
 
     # Semi-transparent teal fill for crop region
     draw.rectangle(
-        [cr.frame_x, cr.frame_y, cr.frame_x + cr.frame_w, cr.frame_y + cr.frame_h],
+        list(cr.pil_box),
         fill=(13, 148, 136, 40),
         outline=(45, 212, 191, 200),
         width=2,
@@ -270,10 +169,7 @@ def _create_crop_preview(
     # Inpaint mask overlay (red, semi-transparent)
     if inpaint_mask is not None:
         mask_full = np.zeros((img.height, img.width), dtype=np.uint8)
-        mask_full[
-            cr.frame_y : cr.frame_y + cr.frame_h,
-            cr.frame_x : cr.frame_x + cr.frame_w,
-        ] = inpaint_mask
+        mask_full[cr.frame_y : cr.frame_y2, cr.frame_x : cr.frame_x2] = inpaint_mask
         rgba = np.zeros((img.height, img.width, 4), dtype=np.uint8)
         rgba[mask_full > 0] = (239, 68, 68, 140)
         overlay = Image.alpha_composite(overlay, Image.fromarray(rgba, mode="RGBA"))

pipeline/composite.py

@@ -108,19 +108,14 @@ def composite_with_alpha(
 
     inpainted_crop = _resize_crop_if_needed(inpainted_crop, cr)
 
-    original_crop = result[
-        cr.frame_y : cr.frame_y + cr.frame_h,
-        cr.frame_x : cr.frame_x + cr.frame_w,
-    ].astype(np.float32)
-
+    region = result[cr.frame_y : cr.frame_y2, cr.frame_x : cr.frame_x2]
     alpha_3 = alpha[:, :, np.newaxis]   # broadcast over RGB channels
-    blended = alpha_3 * inpainted_crop.astype(np.float32) + (1.0 - alpha_3) * original_crop
-    result[
-        cr.frame_y : cr.frame_y + cr.frame_h,
-        cr.frame_x : cr.frame_x + cr.frame_w,
-    ] = np.clip(blended, 0, 255).astype(np.uint8)
+    blended = alpha_3 * inpainted_crop.astype(np.float32) + (1.0 - alpha_3) * region.astype(np.float32)
+    result[cr.frame_y : cr.frame_y2, cr.frame_x : cr.frame_x2] = (
+        np.clip(blended, 0, 255).astype(np.uint8)
+    )
 
-    return result.astype(np.uint8)
+    return result
 
 
 # ---------------------------------------------------------------------------

pipeline/crop.py

@@ -163,6 +163,22 @@ class CropRegion:
     target_h: int
     mask_bbox: BBox          # in crop-local pixel space
 
+    # Right/bottom edge as exclusive coordinates, mirroring numpy slicing
+    # semantics. Use these to keep ``frame[y:cr.frame_y2, x:cr.frame_x2]``
+    # readable instead of ``frame[y:y+cr.frame_h, x:x+cr.frame_w]``.
+    @property
+    def frame_x2(self) -> int:
+        return self.frame_x + self.frame_w
+
+    @property
+    def frame_y2(self) -> int:
+        return self.frame_y + self.frame_h
+
+    @property
+    def pil_box(self) -> Tuple[int, int, int, int]:
+        """(left, upper, right, lower) — 4-tuple expected by PIL.Image.crop()."""
+        return (self.frame_x, self.frame_y, self.frame_x2, self.frame_y2)
+
     def __repr__(self) -> str:
         return (
             f"CropRegion(frame=({self.frame_x},{self.frame_y},"
@@ -430,11 +446,8 @@ def build_inpaint_mask(
         if source_mask.ndim == 3:
             source_mask = source_mask.max(axis=2)
         # Crop to the crop region
-        y1 = crop_region.frame_y
-        y2 = crop_region.frame_y + crop_region.frame_h
-        x1 = crop_region.frame_x
-        x2 = crop_region.frame_x + crop_region.frame_w
-        cropped = source_mask[y1:y2, x1:x2]
+        cr = crop_region
+        cropped = source_mask[cr.frame_y : cr.frame_y2, cr.frame_x : cr.frame_x2]
         # Binarise: any non-zero value (including raw Gradio layer values
         # like 200 that are not exactly 255) becomes 255.
         binarised = (cropped > 0).astype(np.uint8) * 255

pipeline/lama.py

@@ -165,15 +165,7 @@ def inpaint_frames_lama(
 def _load_crop(frame_path: Path, crop_region: CropRegion) -> np.ndarray:
     """Load a frame and return only the crop region (RGB uint8)."""
     img = Image.open(frame_path).convert("RGB")
-    cr = crop_region
-    # PIL box is (left, upper, right, lower) — exclusive right/lower
-    box = (
-        cr.frame_x,
-        cr.frame_y,
-        cr.frame_x + cr.frame_w,
-        cr.frame_y + cr.frame_h,
-    )
-    return np.array(img.crop(box))
+    return np.array(img.crop(crop_region.pil_box))
 
 
 def _mask_to_pil(mask: np.ndarray) -> Image.Image:

pipeline/vace.py

@@ -270,12 +270,7 @@ def _load_chunk_crops(
     end: int,
 ) -> List[Image.Image]:
     """Load crops for [start, end) at VACE target resolution."""
-    box = (
-        crop_region.frame_x,
-        crop_region.frame_y,
-        crop_region.frame_x + crop_region.frame_w,
-        crop_region.frame_y + crop_region.frame_h,
-    )
+    box = crop_region.pil_box
     crops: List[Image.Image] = []
     for fp in frame_paths[start:end]:
         img = Image.open(fp).convert("RGB")

static/style.css

@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+* { box-sizing: border-box; }
+
+body, .gradio-container {
+    font-family: 'Inter', sans-serif !important;
+    background: #0d1117 !important;
+    color: #e6edf3 !important;
+}
+
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 24px !important;
+}
+
+/* Header */
+.header-block {
+    text-align: center;
+    padding: 32px 0 24px;
+}
+.header-block h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #2dd4bf, #06b6d4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 8px;
+}
+.header-block p {
+    color: #8b949e;
+    font-size: 0.95rem;
+}
+
+/* Cards */
+.card {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 16px;
+}
+.card-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #8b949e;
+    margin-bottom: 12px;
+}
+
+/* Buttons */
+.btn-primary {
+    background: linear-gradient(135deg, #0f766e, #0e7490) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    padding: 10px 24px !important;
+    transition: opacity 0.2s !important;
+}
+.btn-primary:hover { opacity: 0.85 !important; }
+
+.btn-secondary {
+    background: #21262d !important;
+    border: 1px solid #30363d !important;
+    color: #e6edf3 !important;
+    font-weight: 500 !important;
+    border-radius: 8px !important;
+    transition: border-color 0.2s !important;
+}
+.btn-secondary:hover { border-color: #2dd4bf !important; }
+
+/* Status */
+.status-box textarea {
+    background: #0d1117 !important;
+    border: 1px solid #30363d !important;
+    color: #8b949e !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.82rem !important;
+    border-radius: 8px !important;
+}
+
+/* Mode radio */
+.mode-radio label { font-weight: 500 !important; }
+
+/* Steps badge */
+.step-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #0f766e;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    margin-right: 8px;
+}