Remove duplicate OCR progress bars and redesign Smoke Signal hero banner

smoke_signal_tab.py

@@ -117,74 +117,157 @@ SS_CSS = """
     --ss-muted:    #7d8590;
 }
 
-/* Wizard step bar */
+/* Hero banner + wizard */
+.ss-hero {
+    position: relative;
+    overflow: hidden;
+    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);
+}
+
+.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;
+    pointer-events: none;
+}
+
+.ss-hero-top {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 24px 28px 8px;
+    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;
+    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));
+    padding: 12px 10px 10px;
+}
+
 .ss-wizard {
     display: flex;
     align-items: center;
     gap: 0;
-    padding: 20px 28px 0;
-    background: var(--ss-bg);
-    border-bottom: 1px solid var(--ss-border);
     overflow-x: auto;
+    padding: 2px 4px;
 }
 
 .ss-step {
-    display: flex;
+    position: relative;
+    display: inline-flex;
     align-items: center;
     gap: 10px;
-    padding: 14px 20px;
-    cursor: pointer;
-    border-bottom: 3px solid transparent;
+    padding: 12px 14px 18px;
+    cursor: default;
     transition: all 0.2s;
     white-space: nowrap;
     font-family: 'Source Code Pro', 'Courier New', monospace;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--ss-muted);
+    font-size: 11px;
+    font-weight: 700;
+    color: #7f89a0;
     letter-spacing: 1px;
     text-transform: uppercase;
 }
 
 .ss-step.active {
-    color: var(--ss-signal);
-    border-bottom-color: var(--ss-signal);
-}
-
-.ss-step.complete {
-    color: var(--ss-green);
-    border-bottom-color: var(--ss-green);
+    color: #ff8e56;
 }
 
-.ss-step.locked {
-    color: var(--ss-border);
-    cursor: not-allowed;
+.ss-step.active::after {
+    content: "";
+    position: absolute;
+    left: 6px;
+    right: 6px;
+    bottom: 2px;
+    height: 3px;
+    border-radius: 99px;
+    background: linear-gradient(90deg, #ff6c4a, #ffb357);
+    box-shadow: 0 0 14px rgba(240, 136, 62, 0.42);
 }
 
 .ss-num {
     width: 26px;
     height: 26px;
-    border-radius: 50%;
+    border-radius: 999px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: 900;
-    background: var(--ss-surface);
+    background: rgba(11, 18, 35, 0.74);
     border: 2px solid currentColor;
     flex-shrink: 0;
 }
 
-.ss-step.complete .ss-num {
-    background: var(--ss-green);
-    color: var(--ss-bg);
-    border-color: var(--ss-green);
-}
-
 .ss-connector {
-    width: 40px;
+    width: 44px;
     height: 2px;
-    background: var(--ss-border);
+    background: linear-gradient(90deg, rgba(104, 132, 180, 0.4), rgba(104, 132, 180, 0.15));
     flex-shrink: 0;
+    border-radius: 999px;
+}
+
+@media (max-width: 900px) {
+    .ss-hero-title { font-size: 34px; }
+    .ss-hero-sub { letter-spacing: 2px; }
 }
 
 /* Main panel */
@@ -1053,7 +1136,7 @@ def _run_tesseract_batch(images):
     return outputs
 
 
-def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
+def run_ocr() -> tuple:
     """Run Surya OCR on all profiled PDFs."""
     df = load_manifest_df()
     debug = f"[DEBUG] SS_ROOT={SS_ROOT}\nMANIFEST_CSV={MANIFEST_CSV}\nCSV exists={MANIFEST_CSV.exists()}\n"
@@ -1081,9 +1164,6 @@ def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
     log = []
     queue_rows = []
 
-    progress(0, desc="Preparing OCR run...")
-
-    progress(0, desc="Loading OCR engine...")
     surya, surya_error, reused = _get_surya_runtime_with_timeout(SS_SURYA_LOAD_TIMEOUT_SEC)
     if surya:
         if reused:
@@ -1099,26 +1179,6 @@ def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
             )
         )
 
-    total_pages_planned = 0
-    total_ocr_targets_planned = 0
-    for _, row in eligible.iterrows():
-        profile_path = PROFILES_DIR / f"{row['book_id']}_page_profile.json"
-        if not profile_path.exists():
-            continue
-        try:
-            with open(profile_path, encoding="utf-8") as f:
-                profile = json.load(f)
-            pages = profile.get("pages", [])
-            total_pages_planned += len(pages)
-            total_ocr_targets_planned += sum(1 for p in pages if p.get("route") != "embedded_text")
-        except Exception:
-            continue
-    total_pages_planned = max(total_pages_planned, 1)
-    total_ocr_targets_planned = max(total_ocr_targets_planned, 1)
-    rendered_pages = 0
-    ocr_processed_pages = 0
-    total_work_units = max(total_pages_planned + total_ocr_targets_planned, 1)
-
     for _, row in eligible.iterrows():
         book_id = row["book_id"]
         profile_path = PROFILES_DIR / f"{book_id}_page_profile.json"
@@ -1149,11 +1209,6 @@ def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
         for page_data in profile.get("pages", []):
             page_num = page_data["page_number"]
             route = page_data["route"]
-            rendered_pages += 1
-            progress(
-                (rendered_pages, total_work_units),
-                desc=f"Rendering {book_id} p{page_num} @ {render_dpi}dpi",
-            )
 
             if route == "embedded_text":
                 continue
@@ -1260,21 +1315,11 @@ def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
                                 "confidence": conf,
                                 "method": "surya",
                             }
-                            ocr_processed_pages += 1
-                            progress(
-                                (total_pages_planned + ocr_processed_pages, total_work_units),
-                                desc=f"OCR {book_id} p{item['page_num']}",
-                            )
                     else:
                         fallback_preds = _run_tesseract_batch(batch_images)
                         timeout_count = sum(1 for pred in fallback_preds if "batch-timeout" in str(pred.get("method", "")))
                         for item, pred in zip(batch_items_with_images, fallback_preds):
                             ocr_lookup[item["page_num"]] = pred
-                            ocr_processed_pages += 1
-                            progress(
-                                (total_pages_planned + ocr_processed_pages, total_work_units),
-                                desc=f"Tesseract {book_id} p{item['page_num']}",
-                            )
                         if timeout_count:
                             log.append(
                                 log_line(
@@ -1290,11 +1335,6 @@ def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
                         timeout_count = sum(1 for pred in fallback_preds if "batch-timeout" in str(pred.get("method", "")))
                         for item, pred in zip(batch_items_with_images, fallback_preds):
                             ocr_lookup[item["page_num"]] = pred
-                            ocr_processed_pages += 1
-                            progress(
-                                (total_pages_planned + ocr_processed_pages, total_work_units),
-                                desc=f"Tesseract retry {book_id} p{item['page_num']}",
-                            )
                         if timeout_count:
                             log.append(
                                 log_line(
@@ -1421,7 +1461,6 @@ def run_ocr(progress=gr.Progress(track_tqdm=False)) -> tuple:
             qdf = pd.concat([existing, qdf], ignore_index=True).drop_duplicates(subset=["region_id"])
         qdf.to_csv(QUEUE_CSV, index=False)
 
-    progress((total_work_units, total_work_units), desc="OCR complete")
     save_manifest_df(df)
     return _ocr_status_html(), "\n".join(log)
 
@@ -1679,16 +1718,18 @@ def _wizard_header_html(active_step: int = 1) -> str:
             step_html.append('<div class="ss-connector"></div>')
 
     return """
-        <div style="background:linear-gradient(135deg,#0d1117,#161b22);padding:24px 28px 0;border-bottom:1px solid #30363d">
-            <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
-                <div style="font-size:38px;line-height:1">◈</div>
+        <div class="ss-hero">
+            <div class="ss-hero-top">
+                <div class="ss-hero-emblem">✦</div>
                 <div>
-                    <div style="font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:900;color:#e6edf3;line-height:1">Smoke Signal</div>
-                    <div style="font-family:'Source Code Pro',monospace;font-size:10px;color:#7d8590;letter-spacing:3px;text-transform:uppercase;margin-top:4px">Picture-Book OCR · Extraction Pipeline · v1</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-wizard">
-                """ + "".join(step_html) + """
+            <div class="ss-hero-step-wrap">
+                <div class="ss-wizard">
+                    """ + "".join(step_html) + """
+                </div>
             </div>
         </div>
         """