Upload app.py

app.py

@@ -1,5 +1,5 @@
 """
-ValuationAI OCR — Streamlit App
+ValuationAI — Nairobi Valuation Sheet OCR
 Model: rasmodev/Handwriting_trocr_model
 """
 import io, time, logging
@@ -17,273 +17,255 @@ logging.basicConfig(level=logging.INFO)
 
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Outfit:wght@300;400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');
 
-html, body, [class*="css"] {
-    font-family: 'Outfit', sans-serif;
-    background-color: #080D1A;
-    color: #E2E8F0;
+html, body, [class*="css"], .stApp {
+    font-family: 'Inter', sans-serif;
+    background: #F8F7F4;
+    color: #1A1A2E;
 }
 
-.stApp {
-    background: #080D1A;
-}
-
-/* Remove default padding */
 .block-container {
-    padding-top: 2rem !important;
-    padding-bottom: 3rem !important;
-    max-width: 1200px !important;
+    padding: 3rem 4rem !important;
+    max-width: 1100px !important;
 }
 
-/* Hide Streamlit chrome */
-#MainMenu, footer { visibility: hidden; }
+#MainMenu, footer, header { visibility: hidden; }
 
-/* ── Brand bar ── */
-.brand {
+/* ── Top bar ── */
+.topbar {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: space-between;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid rgba(255,255,255,0.06);
-    margin-bottom: 2.5rem;
-}
-.brand-left { display: flex; align-items: center; gap: 10px; }
-.brand-dot {
-    width: 10px; height: 10px; border-radius: 50%;
-    background: #6366F1;
-    box-shadow: 0 0 14px rgba(99,102,241,0.9);
-    animation: glow 2s ease-in-out infinite;
-}
-@keyframes glow {
-    0%,100% { opacity:1; transform:scale(1); }
-    50% { opacity:0.5; transform:scale(0.8); }
+    padding-bottom: 2rem;
+    margin-bottom: 3rem;
+    border-bottom: 2px solid #1A1A2E;
+}
+.logo {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: #1A1A2E;
+    letter-spacing: -0.02em;
+    line-height: 1;
+}
+.logo span { color: #2563EB; }
+.logo-sub {
+    font-size: 0.68rem;
+    font-weight: 500;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: #9CA3AF;
+    margin-top: 0.3rem;
+}
+.model-ref {
+    font-size: 0.7rem;
+    color: #9CA3AF;
+    font-weight: 400;
+    letter-spacing: 0.04em;
+    text-align: right;
+}
+.model-ref strong { color: #2563EB; font-weight: 600; }
+
+/* ── Hero headline ── */
+.headline {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 3.4rem;
+    font-weight: 700;
+    line-height: 1.08;
+    letter-spacing: -0.03em;
+    color: #1A1A2E;
+    margin-bottom: 1rem;
+    max-width: 700px;
+}
+.headline em {
+    font-style: italic;
+    color: #2563EB;
+}
+.subline {
+    font-size: 0.95rem;
+    font-weight: 300;
+    color: #6B7280;
+    line-height: 1.7;
+    max-width: 500px;
+    margin-bottom: 3rem;
+}
+
+/* ── Upload area ── */
+[data-testid="stFileUploader"] section {
+    background: #fff !important;
+    border: 2px dashed #D1D5DB !important;
+    border-radius: 12px !important;
+    padding: 2.5rem !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
 }
-.brand-name {
-    font-family: 'Playfair Display', serif;
-    font-size: 1.3rem; font-weight: 700; color: #fff;
+[data-testid="stFileUploader"] section:hover {
+    border-color: #2563EB !important;
+    box-shadow: 0 0 0 4px rgba(37,99,235,0.06) !important;
 }
-.brand-tag {
-    font-size: 0.68rem; color: #4B5563; letter-spacing: 0.1em;
-    text-transform: uppercase; font-weight: 500;
+[data-testid="stFileUploader"] label {
+    color: #6B7280 !important;
+    font-size: 0.9rem !important;
 }
-.model-pill {
-    font-size: 0.7rem; font-weight: 500;
-    background: rgba(99,102,241,0.12);
-    border: 1px solid rgba(99,102,241,0.28);
-    color: #A5B4FC; padding: 0.3rem 0.9rem;
-    border-radius: 20px; letter-spacing: 0.04em;
+[data-testid="stFileUploadDropzone"] p {
+    color: #6B7280 !important;
 }
 
-/* ── Hero ── */
-.hero-eyebrow {
-    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
-    text-transform: uppercase; color: #6366F1; margin-bottom: 0.7rem;
-}
-.hero-h1 {
-    font-family: 'Playfair Display', serif;
-    font-size: 2.8rem; font-weight: 700; line-height: 1.12;
-    letter-spacing: -0.025em; color: #fff; margin-bottom: 0.8rem;
+/* ── Run button ── */
+.stButton > button {
+    background: #1A1A2E !important;
+    color: #fff !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 0.85rem 2.5rem !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.88rem !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em !important;
+    text-transform: uppercase !important;
+    transition: all 0.2s !important;
+    box-shadow: 0 2px 8px rgba(26,26,46,0.2) !important;
+    width: 100% !important;
 }
-.hero-h1 span {
-    background: linear-gradient(130deg, #6366F1, #10B981);
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-    background-clip: text;
+.stButton > button:hover {
+    background: #2563EB !important;
+    box-shadow: 0 4px 16px rgba(37,99,235,0.3) !important;
+    transform: translateY(-1px) !important;
 }
-.hero-sub {
-    font-size: 1rem; font-weight: 300; color: #6B7280;
-    line-height: 1.7; max-width: 460px; margin-bottom: 2.5rem;
+.stButton > button:disabled {
+    background: #E5E7EB !important;
+    color: #9CA3AF !important;
+    box-shadow: none !important;
+    transform: none !important;
+    cursor: not-allowed !important;
 }
 
-/* ── Cards ── */
-.card {
-    background: rgba(255,255,255,0.025);
-    border: 1px solid rgba(255,255,255,0.065);
-    border-radius: 18px; padding: 1.8rem;
-    transition: border-color 0.2s;
-}
-.card:hover { border-color: rgba(99,102,241,0.28); }
-.card-label {
-    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em;
-    text-transform: uppercase; color: #4B5563; margin-bottom: 1.2rem;
-    display: flex; align-items: center; gap: 8px;
-}
-.card-label::before {
-    content:''; display:inline-block; width:16px; height:2px;
-    background:#6366F1; border-radius:2px;
+/* ── Progress ── */
+.stProgress > div > div > div {
+    background: #2563EB !important;
+    border-radius: 4px !important;
 }
-
-/* ── File chips ── */
-.chip {
-    display: inline-flex; align-items: center; gap: 5px;
-    background: rgba(16,185,129,0.1);
-    border: 1px solid rgba(16,185,129,0.22);
-    color: #6EE7B7; padding: 0.25rem 0.7rem;
-    border-radius: 20px; font-size: 0.72rem; font-weight: 500; margin: 2px;
+.stProgress > div > div {
+    background: #E5E7EB !important;
+    border-radius: 4px !important;
+    height: 4px !important;
 }
 
-/* ── Stats ── */
-.stat-grid {
-    display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
-    margin: 1.8rem 0;
-}
-.stat {
-    background: rgba(255,255,255,0.025);
-    border: 1px solid rgba(255,255,255,0.06);
-    border-radius: 14px; padding: 1.2rem 1.4rem;
-    position: relative; overflow: hidden;
-}
-.stat::after {
-    content:''; position:absolute; top:0; left:0; right:0; height:2px;
-    background: linear-gradient(90deg,#6366F1,#10B981);
-}
+/* ── Stats strip ── */
+.stats-strip {
+    display: flex;
+    gap: 0;
+    background: #1A1A2E;
+    border-radius: 12px;
+    overflow: hidden;
+    margin: 2.5rem 0 2rem;
+}
+.stat-item {
+    flex: 1;
+    padding: 1.6rem 2rem;
+    border-right: 1px solid rgba(255,255,255,0.08);
+    text-align: left;
+}
+.stat-item:last-child { border-right: none; }
 .stat-n {
-    font-family: 'Playfair Display', serif;
-    font-size: 2rem; font-weight: 700; color: #fff; line-height: 1;
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 2.6rem;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1;
+    margin-bottom: 0.3rem;
 }
 .stat-l {
-    font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em;
-    text-transform: uppercase; color: #4B5563; margin-top: 4px;
-}
-
-/* ── Result header ── */
-.result-row {
-    display: flex; align-items: center;
-    justify-content: space-between; margin-bottom: 1.2rem;
-}
-.result-title {
-    font-family: 'Playfair Display', serif;
-    font-size: 1.4rem; font-weight: 600; color: #fff;
-}
-.result-badge {
-    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
-    text-transform: uppercase; color: #10B981;
-    background: rgba(16,185,129,0.1);
-    border: 1px solid rgba(16,185,129,0.2);
-    padding: 0.28rem 0.8rem; border-radius: 20px;
-}
-
-/* ── Divider ── */
-.divider {
-    height: 1px; margin: 2rem 0;
-    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
+    font-size: 0.68rem;
+    font-weight: 500;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #6B7280;
 }
 
-/* ── Empty state boxes ── */
-.empty-card {
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.055);
-    border-radius: 14px; padding: 2rem 1.5rem; text-align: center;
-}
-.empty-icon { font-size: 1.8rem; margin-bottom: 0.7rem; }
-.empty-title { font-weight: 600; color: #E2E8F0; margin-bottom: 0.4rem; font-size: 0.95rem; }
-.empty-desc { font-size: 0.78rem; color: #4B5563; line-height: 1.6; }
-
-/* ── Streamlit widget overrides ── */
-/* File uploader */
-[data-testid="stFileUploader"] section {
-    background: rgba(99,102,241,0.04) !important;
-    border: 2px dashed rgba(99,102,241,0.3) !important;
-    border-radius: 14px !important;
-    transition: all 0.2s !important;
-}
-[data-testid="stFileUploader"] section:hover {
-    border-color: rgba(99,102,241,0.6) !important;
-    background: rgba(99,102,241,0.08) !important;
-}
-[data-testid="stFileUploader"] label { color: #6B7280 !important; }
-
-/* Primary button */
-.stButton > button[kind="primary"] {
-    background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
-    color: white !important; border: none !important;
-    border-radius: 12px !important; padding: 0.75rem 2rem !important;
-    font-family: 'Outfit', sans-serif !important;
-    font-size: 0.9rem !important; font-weight: 600 !important;
-    box-shadow: 0 4px 20px rgba(99,102,241,0.4) !important;
-    transition: all 0.2s !important; width: 100% !important;
-}
-.stButton > button[kind="primary"]:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 28px rgba(99,102,241,0.55) !important;
+/* ── Section heading ── */
+.section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #E5E7EB;
 }
-.stButton > button:disabled {
-    background: rgba(255,255,255,0.05) !important;
-    color: #374151 !important; box-shadow: none !important;
-    transform: none !important; border: 1px solid rgba(255,255,255,0.06) !important;
+.section-title {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #1A1A2E;
+    letter-spacing: -0.01em;
 }
 
-/* Download button */
+/* ── Download button ── */
 div[data-testid="stDownloadButton"] > button {
-    background: rgba(16,185,129,0.1) !important;
-    border: 1px solid rgba(16,185,129,0.28) !important;
-    color: #6EE7B7 !important; border-radius: 10px !important;
+    background: #fff !important;
+    border: 1.5px solid #1A1A2E !important;
+    color: #1A1A2E !important;
+    border-radius: 8px !important;
     padding: 0.6rem 1.4rem !important;
-    font-family: 'Outfit', sans-serif !important;
-    font-weight: 600 !important; font-size: 0.85rem !important;
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 0.82rem !important;
+    letter-spacing: 0.04em !important;
+    text-transform: uppercase !important;
     transition: all 0.2s !important;
+    box-shadow: none !important;
+    width: auto !important;
 }
 div[data-testid="stDownloadButton"] > button:hover {
-    background: rgba(16,185,129,0.18) !important;
-    transform: translateY(-1px) !important;
-}
-
-/* Select box */
-[data-testid="stSelectbox"] > div > div {
-    background: rgba(255,255,255,0.04) !important;
-    border: 1px solid rgba(255,255,255,0.09) !important;
-    border-radius: 10px !important; color: #E2E8F0 !important;
-}
-
-/* Slider */
-[data-testid="stSlider"] > div > div > div > div {
-    background: #6366F1 !important;
-}
-
-/* Progress bar */
-.stProgress > div > div > div {
-    background: linear-gradient(90deg,#6366F1,#10B981) !important;
-    border-radius: 4px !important;
-}
-.stProgress > div > div {
-    background: rgba(255,255,255,0.06) !important;
-    border-radius: 4px !important; height: 5px !important;
+    background: #1A1A2E !important;
+    color: #fff !important;
 }
 
-/* Dataframe */
+/* ── Dataframe ── */
 [data-testid="stDataFrame"] {
-    border-radius: 14px !important;
-    border: 1px solid rgba(255,255,255,0.07) !important;
+    border-radius: 10px !important;
+    border: 1px solid #E5E7EB !important;
     overflow: hidden !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
 }
 
-/* Number input */
-[data-testid="stNumberInput"] input {
-    background: rgba(255,255,255,0.04) !important;
-    border: 1px solid rgba(255,255,255,0.09) !important;
-    border-radius: 10px !important; color: #E2E8F0 !important;
+/* ── File chip ── */
+.fchip {
+    display: inline-flex; align-items: center; gap: 5px;
+    background: #EFF6FF;
+    border: 1px solid #BFDBFE;
+    color: #1D4ED8;
+    padding: 0.25rem 0.7rem;
+    border-radius: 6px;
+    font-size: 0.73rem;
+    font-weight: 500;
+    margin: 2px;
 }
 
-/* Expander */
-[data-testid="stExpander"] {
-    background: rgba(255,255,255,0.02) !important;
-    border: 1px solid rgba(255,255,255,0.06) !important;
-    border-radius: 12px !important;
+/* ── Divider ── */
+.rule { height:1px; background:#E5E7EB; margin: 2.5rem 0; }
+
+/* ── Step tag ── */
+.step {
+    font-size: 0.65rem; font-weight: 700;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: #2563EB; margin-bottom: 0.5rem;
 }
 
-/* Alert/success */
-[data-testid="stAlert"] {
-    border-radius: 12px !important;
-    border: none !important;
+/* ── Success alert ── */
+[data-testid="stAlert"][data-baseweb="notification"] {
+    border-radius: 10px !important;
+    border-left: 3px solid #2563EB !important;
 }
 </style>
 """, unsafe_allow_html=True)
 
 
 # ═══════════════════════════════════════════════════════════
-# MODEL LOADING
+# MODEL  (cached — loads once)
 # ═══════════════════════════════════════════════════════════
-@st.cache_resource(show_spinner="Loading model from HuggingFace Hub…")
+@st.cache_resource(show_spinner="Loading recognition model…")
 def load_model():
     import torch
     from transformers import TrOCRProcessor, VisionEncoderDecoderModel
@@ -294,16 +276,11 @@ def load_model():
     model.to(device).eval()
     return processor, model, device
 
-@st.cache_resource(show_spinner="Loading EasyOCR…")
-def load_easyocr():
-    import easyocr
-    return easyocr.Reader(["en"], gpu=False)
-
 
 # ═══════════════════════════════════════════════════════════
 # HELPERS
 # ═══════════════════════════════════════════════════════════
-def run_finetuned(img):
+def ocr(img: Image.Image) -> str:
     import torch
     processor, model, device = load_model()
     pv = processor(images=img.convert("RGB"), return_tensors="pt").pixel_values.to(device)
@@ -311,67 +288,55 @@ def run_finetuned(img):
         gen = model.generate(pv, max_new_tokens=64)
     return processor.batch_decode(gen, skip_special_tokens=True)[0].strip()
 
-def run_easyocr(img):
-    import numpy as np
-    results = load_easyocr().readtext(np.array(img.convert("RGB")), detail=0, paragraph=True)
-    return "\n".join(results).strip()
-
-def ocr_image(img, engine):
-    try:
-        return run_finetuned(img) if engine == "finetuned" else run_easyocr(img)
-    except:
-        try: return run_easyocr(img)
-        except: return ""
-
-def pdf_to_images(file_bytes, dpi=200, max_pages=None):
+def pdf_pages(file_bytes: bytes) -> list:
     import fitz
-    doc   = fitz.open(stream=file_bytes, filetype="pdf")
-    mat   = fitz.Matrix(dpi/72, dpi/72)
-    limit = min(len(doc), max_pages) if max_pages else len(doc)
-    pages = []
-    for i in range(limit):
+    doc  = fitz.open(stream=file_bytes, filetype="pdf")
+    mat  = fitz.Matrix(200/72, 200/72)
+    out  = []
+    for i in range(len(doc)):
         pix = doc[i].get_pixmap(matrix=mat, alpha=False)
-        pages.append((i+1, Image.open(io.BytesIO(pix.tobytes("png"))).convert("RGB")))
+        out.append(Image.open(io.BytesIO(pix.tobytes("png"))).convert("RGB"))
     doc.close()
-    return pages
+    return out
 
-def extract_fields(text, filename):
+def extract(text: str, filename: str) -> dict:
     import re
-    def find(label):
+    def g(label):
         m = re.search(label + r'[:\s]+([^\|\n]{1,80})', text, re.IGNORECASE)
         return m.group(1).strip() if m else ""
     amounts = re.findall(r'AMT:\s*([\d,]+)', text)
-    dates   = re.search(r'DATE:\s*(\d{4}-\d{2}-\d{2})', text)
+    date_m  = re.search(r'DATE:\s*(\d{4}-\d{2}-\d{2})', text)
     return {
-        "File":          filename,
-        "Plot Number":   find("PLOT"),
-        "Location":      find("LOC"),
-        "Area":          find("AREA"),
-        "Amount (KES)":  int(amounts[0].replace(",","")) if amounts else None,
-        "Date":          dates.group(1) if dates else None,
-        "VOS":           find("VOS"),
+        "File":         filename,
+        "Plot Number":  g("PLOT"),
+        "Location":     g("LOC"),
+        "Area":         g("AREA"),
+        "Amount (KES)": int(amounts[0].replace(",","")) if amounts else None,
+        "Date":         date_m.group(1) if date_m else None,
+        "VOS":          g("VOS"),
     }
 
-def to_excel(records):
+def make_excel(records: list) -> bytes:
     from openpyxl import load_workbook
     from openpyxl.styles import Font, PatternFill, Alignment
     from openpyxl.utils import get_column_letter
     buf = io.BytesIO()
     pd.DataFrame(records).to_excel(buf, index=False, sheet_name="Valuation Data")
     buf.seek(0)
-    wb = load_workbook(buf)
-    ws = wb.active
+    wb  = load_workbook(buf)
+    ws  = wb.active
+    hdr_fill = PatternFill("solid", start_color="1A1A2E")
     for ci, cell in enumerate(ws[1], 1):
         cell.font      = Font(name="Calibri", bold=True, color="FFFFFF", size=11)
-        cell.fill      = PatternFill("solid", start_color="1E1B4B")
+        cell.fill      = hdr_fill
         cell.alignment = Alignment(horizontal="center", vertical="center")
-        ws.column_dimensions[get_column_letter(ci)].width = 22
+        ws.column_dimensions[get_column_letter(ci)].width = 24
     ws.row_dimensions[1].height = 30
     for row in ws.iter_rows(min_row=2):
         for cell in row:
             cell.alignment = Alignment(vertical="center", wrap_text=True)
             if cell.row % 2 == 0:
-                cell.fill = PatternFill("solid", start_color="F5F4FF")
+                cell.fill = PatternFill("solid", start_color="F0F4FF")
     ws.freeze_panes = "A2"
     out = io.BytesIO(); wb.save(out)
     return out.getvalue()
@@ -380,211 +345,172 @@ def to_excel(records):
 # ═══════════════════════════════════════════════════════════
 # SESSION STATE
 # ═══════════════════════════════════��═══════════════════════
-for k, v in [("records",[]),("errors",[]),("excel_bytes",None),("done",False)]:
+for k, v in [("records",[]),("excel",None),("done",False),("errors",[])]:
     if k not in st.session_state:
         st.session_state[k] = v
 
 
 # ═══════════════════════════════════════════════════════════
-# BRAND BAR
+# TOP BAR
 # ═══════════════════════════════════════════════════════════
 st.markdown("""
-<div class="brand">
-  <div class="brand-left">
-    <div class="brand-dot"></div>
-    <div>
-      <div class="brand-name">ValuationAI</div>
-      <div class="brand-tag">Handwriting Recognition System</div>
-    </div>
+<div class="topbar">
+  <div>
+    <div class="logo">Valuation<span>AI</span></div>
+    <div class="logo-sub">Nairobi City County — Document Intelligence</div>
+  </div>
+  <div class="model-ref">
+    Recognition model<br>
+    <strong>rasmodev/Handwriting_trocr_model</strong>
   </div>
-  <div class="model-pill">rasmodev/Handwriting_trocr_model</div>
 </div>
 """, unsafe_allow_html=True)
 
 
 # ═══════════════════════════════════════════════════════════
-# HERO
+# HEADLINE
 # ═══════════════════════════════════════════════════════════
 st.markdown("""
-<div class="hero-eyebrow">AI-Powered Document Intelligence</div>
-<div class="hero-h1">Extract data from<br><span>handwritten valuations</span></div>
-<div class="hero-sub">Upload scanned valuation sheet PDFs and get a clean,
-structured Excel export in seconds — powered by a fine-tuned TrOCR model.</div>
+<div class="headline">
+  Digitise handwritten<br>valuation sheets <em>instantly.</em>
+</div>
+<div class="subline">
+  Upload one or more scanned PDF valuation sheets.
+  The system reads every handwritten field and delivers
+  a structured Excel file — ready for records management.
+</div>
 """, unsafe_allow_html=True)
 
 
 # ═══════════════════════════════════════════════════════════
-# UPLOAD + SETTINGS (side by side)
+# UPLOAD
 # ═══════════════════════════════════════════════════════════
-col_up, col_cfg = st.columns([3, 2], gap="large")
-
-with col_up:
-    st.markdown('<div class="card"><div class="card-label">Upload Documents</div>', unsafe_allow_html=True)
-    uploaded_files = st.file_uploader(
-        "Drag & drop PDF files here",
-        type=["pdf","png","jpg","jpeg","tiff","tif","bmp"],
-        accept_multiple_files=True,
-        label_visibility="collapsed",
-    )
-    if uploaded_files:
-        chips = "".join(
-            f'<span class="chip">📄 {f.name[:30]}{"…" if len(f.name)>30 else ""}</span>'
-            for f in uploaded_files
-        )
-        st.markdown(f'<div style="margin-top:0.8rem">{chips}</div>', unsafe_allow_html=True)
-    st.markdown('</div>', unsafe_allow_html=True)
-
-with col_cfg:
-    st.markdown('<div class="card"><div class="card-label">Settings</div>', unsafe_allow_html=True)
-
-    engine_sel = st.selectbox(
-        "OCR Engine",
-        ["🟢  Fine-tuned Model  (Recommended)", "🔵  EasyOCR  (Fallback)"],
-        label_visibility="visible",
-    )
-    engine = "finetuned" if "Fine-tuned" in engine_sel else "easyocr"
+st.markdown('<div class="step">Step 1 — Upload Documents</div>', unsafe_allow_html=True)
 
-    dpi = st.select_slider("Resolution (DPI)", options=[150, 200, 250, 300], value=200)
+uploaded = st.file_uploader(
+    "Drag and drop valuation sheet PDFs here, or click to browse",
+    type=["pdf", "png", "jpg", "jpeg", "tiff", "bmp"],
+    accept_multiple_files=True,
+    label_visibility="collapsed",
+)
 
-    max_p = st.number_input("Max pages per PDF  (0 = all)", 0, 100, 0)
-    max_pages = None if max_p == 0 else int(max_p)
+if uploaded:
+    chips = "".join(
+        f'<span class="fchip">📄 {f.name[:35]}{"…" if len(f.name)>35 else ""}</span>'
+        for f in uploaded
+    )
+    st.markdown(f'<div style="margin-top:0.6rem">{chips}</div>', unsafe_allow_html=True)
 
-    st.markdown("</div>", unsafe_allow_html=True)
+st.markdown('<div style="height:1.2rem"></div>', unsafe_allow_html=True)
+st.markdown('<div class="step">Step 2 — Extract & Download</div>', unsafe_allow_html=True)
 
-# Run button below settings
-_, btn_col, _ = st.columns([3, 2, 0.01])
-with btn_col:
-    run = st.button(
-        "⚡  Run OCR & Extract Fields",
-        type="primary",
-        disabled=not uploaded_files,
-        use_container_width=True,
-    )
+run = st.button(
+    "Extract Data from Documents",
+    disabled=not uploaded,
+    use_container_width=True,
+)
 
 
 # ═══════════════════════════════════════════════════════════
 # PROCESSING
 # ═══════════════════════════════════════════════════════════
-if run and uploaded_files:
+if run and uploaded:
     st.session_state.records = []
     st.session_state.errors  = []
     st.session_state.done    = False
 
-    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
     bar    = st.progress(0.0)
     status = st.empty()
     t0     = time.time()
 
-    for fi, uf in enumerate(uploaded_files):
+    for fi, uf in enumerate(uploaded):
         fname      = uf.name
-        file_bytes = uf.read()
-        bar.progress(fi / len(uploaded_files), text=f"Reading {fname}…")
+        raw        = uf.read()
+        bar.progress(fi / len(uploaded), text=f"Reading {fname}…")
 
         try:
             ext = fname.lower().rsplit(".", 1)[-1]
-            pages = pdf_to_images(file_bytes, dpi=dpi, max_pages=max_pages) \
-                    if ext == "pdf" \
-                    else [(1, Image.open(io.BytesIO(file_bytes)).convert("RGB"))]
+            imgs = pdf_pages(raw) if ext == "pdf" \
+                   else [Image.open(io.BytesIO(raw)).convert("RGB")]
 
-            for page_no, img in pages:
-                status.caption(f"Processing **{fname}** — page {page_no} of {len(pages)}")
-                text   = ocr_image(img, engine)
-                record = extract_fields(text, fname)
-                st.session_state.records.append(record)
+            for pi, img in enumerate(imgs, 1):
+                status.caption(f"Processing **{fname}** — page {pi} of {len(imgs)}")
+                text = ocr(img)
+                st.session_state.records.append(extract(text, fname))
 
         except Exception as e:
             st.session_state.errors.append(f"{fname}: {e}")
 
-        bar.progress((fi+1)/len(uploaded_files))
+        bar.progress((fi+1) / len(uploaded))
 
     bar.empty(); status.empty()
-    st.session_state.excel_bytes = to_excel(st.session_state.records) if st.session_state.records else None
-    st.session_state.done = True
+    st.session_state.excel = make_excel(st.session_state.records) \
+                             if st.session_state.records else None
+    st.session_state.done  = True
 
     elapsed = time.time() - t0
-    st.success(f"✅  Done — {len(st.session_state.records)} page(s) from {len(uploaded_files)} file(s) in {elapsed:.1f}s")
+    st.success(
+        f"Processed {len(st.session_state.records)} page(s) "
+        f"from {len(uploaded)} document(s) in {elapsed:.1f}s."
+    )
 
 
 # ═══════════════════════════════════════════════════════════
 # RESULTS
 # ═══════════════════════════════════════════════════════════
 if st.session_state.done and st.session_state.records:
-    records = st.session_state.records
-    df      = pd.DataFrame(records)
+    df = pd.DataFrame(st.session_state.records)
 
-    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
-
-    # Stats
-    n_plots   = df["Plot Number"].astype(bool).sum() if "Plot Number" in df else 0
-    n_amounts = df["Amount (KES)"].notna().sum()      if "Amount (KES)" in df else 0
-    n_dates   = df["Date"].astype(bool).sum()         if "Date" in df else 0
+    # Stats strip
+    n_plots   = df["Plot Number"].astype(bool).sum()
+    n_amounts = df["Amount (KES)"].notna().sum()
+    n_dates   = df["Date"].astype(bool).sum()
 
     st.markdown(f"""
-    <div class="stat-grid">
-      <div class="stat">
-        <div class="stat-n">{len(records)}</div>
-        <div class="stat-l">Pages Processed</div>
+    <div class="stats-strip">
+      <div class="stat-item">
+        <div class="stat-n">{len(df)}</div>
+        <div class="stat-l">Pages processed</div>
       </div>
-      <div class="stat">
+      <div class="stat-item">
         <div class="stat-n">{n_plots}</div>
-        <div class="stat-l">Plot Numbers</div>
+        <div class="stat-l">Plot numbers</div>
       </div>
-      <div class="stat">
+      <div class="stat-item">
         <div class="stat-n">{n_amounts}</div>
-        <div class="stat-l">Amounts Found</div>
+        <div class="stat-l">Amounts extracted</div>
       </div>
-      <div class="stat">
+      <div class="stat-item">
         <div class="stat-n">{n_dates}</div>
-        <div class="stat-l">Dates Captured</div>
+        <div class="stat-l">Dates captured</div>
       </div>
     </div>
     """, unsafe_allow_html=True)
 
-    # Title + download
-    hdr_l, hdr_r = st.columns([4, 1])
-    with hdr_l:
-        st.markdown('<div class="result-row"><div class="result-title">Extracted Data</div><div class="result-badge">✓ Ready to export</div></div>', unsafe_allow_html=True)
-    with hdr_r:
-        if st.session_state.excel_bytes:
+    # Table header + download
+    col_t, col_d = st.columns([5, 1])
+    with col_t:
+        st.markdown("""
+        <div class="section-head">
+          <div class="section-title">Extracted Records</div>
+        </div>
+        """, unsafe_allow_html=True)
+    with col_d:
+        st.markdown('<div style="padding-top:0.3rem"></div>', unsafe_allow_html=True)
+        if st.session_state.excel:
             st.download_button(
-                "⬇  Download Excel",
-                data=st.session_state.excel_bytes,
-                file_name="valuation_extracted.xlsx",
+                "⬇ Export Excel",
+                data=st.session_state.excel,
+                file_name="valuation_records.xlsx",
                 mime="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
             )
 
-    # Dataframe
+    # Table
     st.dataframe(df, use_container_width=True,
-                 height=min(80 + len(df)*38, 520), hide_index=True)
+                 height=min(80 + len(df)*38, 560), hide_index=True)
 
     # Errors
     if st.session_state.errors:
-        with st.expander(f"⚠  {len(st.session_state.errors)} file(s) had errors"):
+        with st.expander(f"⚠  {len(st.session_state.errors)} file(s) could not be processed"):
             for e in st.session_state.errors:
-                st.markdown(f'<span style="color:#F87171;font-size:0.85rem">{e}</span>', unsafe_allow_html=True)
-
-
-# ═══════════════════════════════════════════════════════════
-# EMPTY STATE
-# ═══════════════════════════════════════════════════════════
-if not st.session_state.done and not uploaded_files:
-    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
-    c1, c2, c3 = st.columns(3, gap="medium")
-    with c1:
-        st.markdown("""<div class="empty-card">
-          <div class="empty-icon">📄</div>
-          <div class="empty-title">Upload PDFs</div>
-          <div class="empty-desc">Drag in one or multiple scanned valuation sheet PDFs</div>
-        </div>""", unsafe_allow_html=True)
-    with c2:
-        st.markdown("""<div class="empty-card">
-          <div class="empty-icon">🤖</div>
-          <div class="empty-title">AI Reads Fields</div>
-          <div class="empty-desc">Fine-tuned TrOCR extracts plot numbers, amounts, dates and locations</div>
-        </div>""", unsafe_allow_html=True)
-    with c3:
-        st.markdown("""<div class="empty-card">
-          <div class="empty-icon">📊</div>
-          <div class="empty-title">Download Excel</div>
-          <div class="empty-desc">Get a clean formatted spreadsheet ready for data entry</div>
-        </div>""", unsafe_allow_html=True)
+                st.caption(e)