Redesign UI as a single guided flow with a modern, professional theme

Replaces the two-tab layout with one linear page (Step 1: describe what
to extract via chat or quick-start buttons -> Step 2: upload multiple
PDFs/images -> Step 3: run and review results in tabs), so a business
owner can tell the assistant exactly what data it's looking for before
uploading documents for review. Adds an indigo Soft theme, card-style
sections, and one-click category starting points (Construction/SAP,
Compliance, Finance/AR) that pre-fill and send a chat prompt. Manual
settings and the HF token field are tucked into collapsed accordions
since the chat is now the primary path. Verified the full render and
quick-start -> chat interaction in a real browser.

app.py

@@ -7,7 +7,6 @@ amounts plus any custom labels the user names), and export everything to
 CSV as tidy (one-fact-per-row) tables, alongside an audit record of the
 settings that produced the run.
 """
-import json
 import os
 import tempfile
 import uuid
@@ -42,6 +41,32 @@ METADATA_COLUMNS = [
     "custom_fields", "only_matches_filter", "chat_model", "chat_transcript",
 ]
 
+QUICK_PROMPTS = {
+    "🏗️ Construction / SAP": (
+        "Flag change orders, delay notices, and safety violations. "
+        "Pull PO numbers, SAP document numbers, and reference numbers."
+    ),
+    "✅ Compliance": (
+        "Flag non-compliance, violations, and expired certifications. "
+        "Pull certification codes and expiration dates."
+    ),
+    "💵 Finance / AR": (
+        "Flag overdue and past-due invoices, credit holds, and disputes. "
+        "Pull invoice numbers, amounts, and due dates."
+    ),
+}
+
+CUSTOM_CSS = """
+#hero { text-align: center; padding: 8px 8px 4px 8px; }
+#hero h1 { font-size: 1.9rem; margin-bottom: 2px; }
+#hero p { color: var(--body-text-color-subdued); max-width: 720px; margin: 0 auto; }
+.step-card { border-radius: 16px !important; padding: 22px !important; margin-bottom: 18px; }
+.step-kicker { font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; }
+.step-subtitle { color: var(--body-text-color-subdued); margin-bottom: 14px; font-size: 0.92rem; }
+#run-button button { font-size: 1.05rem !important; padding: 14px !important; }
+#quick-prompts button { font-size: 0.85rem !important; }
+"""
+
 
 def _file_path(f):
     return f if isinstance(f, str) else f.name
@@ -186,83 +211,90 @@ def handle_chat(history, message, settings, hf_token):
     )
 
 
-with gr.Blocks(title="OCR Notification & Data Extractor") as demo:
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="slate",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+)
+
+with gr.Blocks(title="OCR Notification & Data Extractor", theme=theme, css=CUSTOM_CSS) as demo:
     gr.Markdown(
-        "# OCR Notification & Data Extractor\n"
-        "Upload scanned PDFs or images (construction reports, compliance "
-        "certificates, invoices, SAP printouts, etc.). The app OCRs each "
-        "page, flags notification-worthy keywords per domain, and pulls out "
-        "labeled data fields - standard ones scoped to the categories you "
-        "pick, plus any custom labels you name (e.g. \"gross weight\", "
-        "\"delivery date\"). Every run exports three tidy CSVs: extracted "
-        "fields, notification hits, and a metadata/audit record of exactly "
-        "what settings produced them."
+        "# 🧾 OCR Notification & Data Extractor\n"
+        "Tell it what you need, upload your documents, and get a clean, "
+        "audit-ready CSV back — built for construction/SAP, compliance, "
+        "and finance teams.",
+        elem_id="hero",
     )
 
     settings_state = gr.State(dict(DEFAULT_SETTINGS))
 
-    with gr.Tab("1. Tailor extraction (chat)"):
+    with gr.Group(elem_classes=["step-card"]):
+        gr.Markdown('<div class="step-kicker">Step 1 · Tell us what you need</div>')
         gr.Markdown(
-            "Describe what you want **flagged** (notifications) vs. **pulled "
-            "as data** (fields), in plain language, e.g. *\"flag overdue "
-            "invoices and non-compliance notices, and pull the reference "
-            "number, gross weight, and delivery date\"*. This updates the "
-            "settings used in **Upload & Run** - you can still edit them by "
-            "hand there too."
-        )
-        hf_token_input = gr.Textbox(
-            label="Hugging Face token (optional if HF_TOKEN is set as a Space secret)",
-            type="password",
-            placeholder="hf_...",
+            '<div class="step-subtitle">Describe what to flag and what to pull as data, '
+            "in your own words — or tap a starting point below.</div>"
         )
-        chatbot = gr.Chatbot(height=350, label="Extraction assistant")
+        with gr.Row(elem_id="quick-prompts"):
+            quick_buttons = {label: gr.Button(label, size="sm") for label in QUICK_PROMPTS}
+
+        with gr.Accordion("Use your own Hugging Face token (optional)", open=False):
+            gr.Markdown("Only needed if this Space's `HF_TOKEN` secret isn't set, or you want to use your own.")
+            hf_token_input = gr.Textbox(label="Hugging Face token", type="password", placeholder="hf_...", show_label=False)
+
+        chatbot = gr.Chatbot(height=320, label="Extraction assistant")
         with gr.Row():
             chat_input = gr.Textbox(
-                label="Message", scale=4,
+                label="Message", scale=4, show_label=False, container=False,
                 placeholder="e.g. Flag overdue invoices; pull reference number, gross weight, delivery date",
             )
             chat_send = gr.Button("Send", scale=1, variant="primary")
-        settings_display = gr.JSON(label="Active extraction settings", value=DEFAULT_SETTINGS)
+        settings_display = gr.JSON(label="What we'll extract", value=DEFAULT_SETTINGS)
+
+    with gr.Group(elem_classes=["step-card"]):
+        gr.Markdown('<div class="step-kicker">Step 2 · Upload your documents</div>')
+        gr.Markdown('<div class="step-subtitle">Upload as many PDFs or images as you need reviewed at once.</div>')
+        files_input = gr.Files(
+            label="PDF or image files",
+            file_types=[".pdf", ".png", ".jpg", ".jpeg", ".tif", ".tiff", ".bmp"],
+            file_count="multiple",
+        )
+        with gr.Accordion("Advanced: edit settings manually", open=False):
+            categories_input = gr.CheckboxGroup(
+                choices=CATEGORY_CHOICES,
+                value=CATEGORY_CHOICES,
+                label="Notification categories",
+                info="Also scopes which standard fields (PO/SAP/invoice/cert) get extracted.",
+            )
+            custom_keywords_input = gr.Textbox(
+                label="Custom notification keywords (comma-separated)",
+                placeholder="e.g. re-inspection, warranty claim, hold payment",
+                info="Phrases that just raise a flag - not extracted as values.",
+            )
+            custom_fields_input = gr.Textbox(
+                label="Custom fields to extract as data (comma-separated labels)",
+                placeholder="e.g. reference number, gross weight, delivery date",
+                info="Labels looked up in the document; the value after each label is captured.",
+            )
+            only_matches_input = gr.Checkbox(
+                value=True,
+                label="Only export pages with a notification hit or extracted field",
+            )
 
-    with gr.Tab("2. Upload & Run"):
-        with gr.Row():
-            with gr.Column(scale=1):
-                files_input = gr.Files(
-                    label="PDF or image files",
-                    file_types=[".pdf", ".png", ".jpg", ".jpeg", ".tif", ".tiff", ".bmp"],
-                )
-                categories_input = gr.CheckboxGroup(
-                    choices=CATEGORY_CHOICES,
-                    value=CATEGORY_CHOICES,
-                    label="Notification categories",
-                    info="Also scopes which standard fields (PO/SAP/invoice/cert) get extracted - see CATEGORY_FIELD_MAP.",
-                )
-                custom_keywords_input = gr.Textbox(
-                    label="Custom notification keywords (comma-separated)",
-                    placeholder="e.g. re-inspection, warranty claim, hold payment",
-                    info="Phrases that just raise a flag - not extracted as values.",
-                )
-                custom_fields_input = gr.Textbox(
-                    label="Custom fields to extract as data (comma-separated labels)",
-                    placeholder="e.g. reference number, gross weight, delivery date",
-                    info="Labels looked up in the document; the value after each label is captured.",
-                )
-                only_matches_input = gr.Checkbox(
-                    value=True,
-                    label="Only export pages with a notification hit or extracted field",
-                )
-                run_button = gr.Button("Run OCR & Extract", variant="primary")
-
-            with gr.Column(scale=2):
-                status_output = gr.Textbox(label="Status", lines=3, interactive=False)
-                fields_table_output = gr.Dataframe(label="Extracted fields (tidy)", headers=FIELDS_COLUMNS, wrap=True)
-                notifications_table_output = gr.Dataframe(
-                    label="Notification hits (tidy)", headers=NOTIFICATIONS_COLUMNS, wrap=True
-                )
-                csv_output = gr.Files(label="Download CSVs (fields, notifications, run metadata)")
-                run_metadata_output = gr.JSON(label="This run's settings (audit record)")
-                with gr.Accordion("Full OCR text (debug)", open=False):
-                    text_output = gr.Textbox(label="Raw extracted text", lines=20)
+    with gr.Group(elem_classes=["step-card"]):
+        gr.Markdown('<div class="step-kicker">Step 3 · Run &amp; review</div>')
+        run_button = gr.Button("Run OCR & Extract", variant="primary", elem_id="run-button")
+        status_output = gr.Textbox(label="Status", lines=2, interactive=False)
+        csv_output = gr.Files(label="Download CSVs (fields, notifications, run metadata)")
+        with gr.Tabs():
+            with gr.Tab("Extracted fields"):
+                fields_table_output = gr.Dataframe(headers=FIELDS_COLUMNS, wrap=True)
+            with gr.Tab("Notification hits"):
+                notifications_table_output = gr.Dataframe(headers=NOTIFICATIONS_COLUMNS, wrap=True)
+            with gr.Tab("Run audit"):
+                run_metadata_output = gr.JSON(label="Exactly what settings produced this run")
+            with gr.Tab("Raw OCR text (debug)"):
+                text_output = gr.Textbox(label="Raw extracted text", lines=20, show_label=False)
 
     chat_outputs = [
         chatbot, chat_input, settings_state, settings_display,
@@ -271,6 +303,11 @@ with gr.Blocks(title="OCR Notification & Data Extractor") as demo:
     chat_send.click(fn=handle_chat, inputs=[chatbot, chat_input, settings_state, hf_token_input], outputs=chat_outputs)
     chat_input.submit(fn=handle_chat, inputs=[chatbot, chat_input, settings_state, hf_token_input], outputs=chat_outputs)
 
+    for label, prompt in QUICK_PROMPTS.items():
+        quick_buttons[label].click(fn=lambda p=prompt: p, outputs=chat_input).then(
+            fn=handle_chat, inputs=[chatbot, chat_input, settings_state, hf_token_input], outputs=chat_outputs
+        )
+
     run_button.click(
         fn=process_files,
         inputs=[files_input, categories_input, custom_keywords_input, custom_fields_input, only_matches_input, chatbot],