Embed supplied banner art as text data URI and refine hero

smoke_signal_tab.py

@@ -57,6 +57,26 @@ for d in [SOURCE_DIR, MANIFEST_CSV.parent, PROFILES_DIR, OCR_RAW_DIR,
 GOLD_FILE    = GOLD_DIR / "gold_corrections.jsonl"
 DECISIONS_CSV = REVIEW_DIR / "review_decisions.csv"
 QUEUE_CSV    = REVIEW_DIR / "review_queue.csv"
+BANNER_DATA_URI_FILE = Path(__file__).resolve().parent / "assets" / "smoke_signal_banner_data_uri.txt"
+
+
+def _load_banner_image_css() -> str:
+    """
+    Return a CSS-ready background-image value.
+    Uses a text data-URI file so HF push is text-only (no binary file tracking needed).
+    """
+    try:
+        uri = BANNER_DATA_URI_FILE.read_text(encoding="utf-8").strip()
+        if not uri:
+            return "none"
+        if not uri.startswith("data:image/"):
+            return "none"
+        return f"url('{uri}')"
+    except Exception:
+        return "none"
+
+
+SS_BANNER_IMAGE_CSS = _load_banner_image_css()
 
 # ── Confidence calibration state (in-memory, persisted to disk) ────────────────
 CALIBRATION_FILE = SS_ROOT / "manifest" / "confidence_calibration.json"
@@ -124,78 +144,39 @@ SS_CSS = """
     border-radius: 16px;
     border: 1px solid #2a3240;
     margin: 12px 0 16px;
-    background:
-        radial-gradient(1000px 420px at 8% 10%, rgba(86, 151, 255, 0.22), transparent 55%),
-        radial-gradient(820px 380px at 88% 0%, rgba(240, 136, 62, 0.18), transparent 60%),
-        linear-gradient(132deg, #040816 0%, #0a1329 45%, #030916 100%);
-    box-shadow: 0 24px 70px rgba(3, 9, 25, 0.42);
+    padding-top: 230px;
+    background: linear-gradient(132deg, #040816 0%, #0a1329 45%, #030916 100%);
+    box-shadow: 0 24px 70px rgba(3, 9, 25, 0.38);
 }
 
 .ss-hero::before {
     content: "";
     position: absolute;
     inset: 0;
-    background-image:
-        radial-gradient(circle at 14% 26%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px),
-        radial-gradient(circle at 58% 16%, rgba(255, 185, 120, 0.20) 0 1px, transparent 2px),
-        radial-gradient(circle at 84% 30%, rgba(110, 193, 255, 0.24) 0 1px, transparent 2px),
-        radial-gradient(circle at 75% 72%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px);
-    background-size: 220px 220px, 280px 280px, 300px 300px, 260px 260px;
-    opacity: 0.8;
+    background-image: radial-gradient(circle at 12% 18%, rgba(90, 164, 255, 0.35), transparent 25%);
+    opacity: 0.7;
     pointer-events: none;
 }
 
-.ss-hero-top {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 24px 28px 8px;
+.ss-hero-art {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    height: 205px;
+    border-radius: 14px;
+    border: 1px solid rgba(125, 133, 144, 0.24);
+    background-image: __SS_BANNER_IMAGE_CSS__;
+    background-size: cover;
+    background-position: center top;
+    box-shadow: inset 0 -26px 40px rgba(3, 9, 22, 0.65);
     z-index: 1;
 }
 
-.ss-hero-emblem {
-    width: 54px;
-    height: 54px;
-    border-radius: 12px;
-    border: 1px solid rgba(125, 133, 144, 0.35);
-    background: linear-gradient(140deg, rgba(94, 160, 255, 0.25), rgba(240, 136, 62, 0.22));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 28px;
-    box-shadow: 0 8px 28px rgba(88, 166, 255, 0.25);
-}
-
-.ss-hero-title {
-    margin: 0;
-    line-height: 1;
-    font-family: 'Playfair Display', Georgia, serif;
-    font-size: 48px;
-    font-weight: 900;
-    letter-spacing: 0.4px;
-    background: linear-gradient(90deg, #c892ff 0%, #f39d53 45%, #58a6ff 95%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    text-shadow:
-        0 0 16px rgba(195, 146, 255, 0.30),
-        0 0 24px rgba(88, 166, 255, 0.16);
-}
-
-.ss-hero-sub {
-    margin: 8px 0 0;
-    font-family: 'Source Code Pro', monospace;
-    font-size: 11px;
-    color: #ffb46f;
-    letter-spacing: 3px;
-    text-transform: uppercase;
-}
-
 .ss-hero-step-wrap {
     position: relative;
-    z-index: 1;
-    margin: 12px 20px 20px;
+    z-index: 2;
+    margin: 0 20px 20px;
     border-radius: 14px;
     border: 1px solid rgba(125, 133, 144, 0.26);
     background: linear-gradient(180deg, rgba(11, 18, 35, 0.88), rgba(8, 14, 30, 0.88));
@@ -266,8 +247,12 @@ SS_CSS = """
 }
 
 @media (max-width: 900px) {
-    .ss-hero-title { font-size: 34px; }
-    .ss-hero-sub { letter-spacing: 2px; }
+    .ss-hero {
+        padding-top: 156px;
+    }
+    .ss-hero-art {
+        height: 134px;
+    }
 }
 
 /* Main panel */
@@ -519,6 +504,8 @@ SS_CSS = """
 #ss-tab .label-wrap span { color: var(--ss-smoke) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
 """
 
+SS_CSS = SS_CSS.replace("__SS_BANNER_IMAGE_CSS__", SS_BANNER_IMAGE_CSS)
+
 
 # ── Utility functions ──────────────────────────────────────────────────────────
 def sha256_file(path: Path) -> str:
@@ -1719,13 +1706,7 @@ def _wizard_header_html(active_step: int = 1) -> str:
 
     return """
         <div class="ss-hero">
-            <div class="ss-hero-top">
-                <div class="ss-hero-emblem">✦</div>
-                <div>
-                    <p class="ss-hero-title">Smoke Signal</p>
-                    <p class="ss-hero-sub">Picture-Book OCR · Extraction Pipeline · v1</p>
-                </div>
-            </div>
+            <div class="ss-hero-art" aria-hidden="true"></div>
             <div class="ss-hero-step-wrap">
                 <div class="ss-wizard">
                     """ + "".join(step_html) + """