UI redesign: riso-print aesthetic, unified input, branded share card, char-aware truncation, trafilatura URL extraction

app.py

@@ -17,10 +17,18 @@ from adaptive_classifier import AdaptiveClassifier
 # ---------------------------------------------------------------------------
 print("Loading model...")
 classifier = AdaptiveClassifier.from_pretrained(
-    "adaptive-classifier/ai-detector", use_onnx=False
+    "adaptive-classifier/ai-detector", use_onnx="auto", prefer_quantized=True
 )
 print("Model loaded!")
 
+# Warm-up: first inference triggers ONNX session init / JIT — do it eagerly so
+# the first user-facing prediction doesn't pay that cost.
+try:
+    classifier.predict("This is a short warm-up passage so the model session initializes before the first request.", k=2)
+    print("Warm-up complete.")
+except Exception as e:
+    print(f"Warm-up skipped: {e}")
+
 # ---------------------------------------------------------------------------
 # Persistent dataset via CommitScheduler
 # ---------------------------------------------------------------------------
@@ -66,7 +74,7 @@ def _save_dataset(records: list[dict], message: str = "Update dataset"):
 
 
 def save_prediction(pred_id: str, text: str, url: str, label: str, confidence: float):
-    """Save a prediction to memory and push to HF dataset."""
+    """Save a prediction to memory now, push to HF dataset in a background thread."""
     record = {
         "id": pred_id,
         "text": text,
@@ -77,12 +85,17 @@ def save_prediction(pred_id: str, text: str, url: str, label: str, confidence: f
         "timestamp": datetime.now().isoformat(),
     }
     _predictions[pred_id] = record
-    try:
-        records = _load_dataset()
-        records.append(record)
-        _save_dataset(records, f"Add prediction {pred_id}")
-    except Exception as e:
-        print(f"Warning: failed to push prediction: {e}")
+
+    def _push():
+        try:
+            records = _load_dataset()
+            records.append(record)
+            _save_dataset(records, f"Add prediction {pred_id}")
+        except Exception as e:
+            print(f"Warning: failed to push prediction: {e}")
+
+    import threading
+    threading.Thread(target=_push, daemon=True).start()
 
 
 def lookup_prediction(pred_id: str) -> dict | None:
@@ -97,21 +110,26 @@ def lookup_prediction(pred_id: str) -> dict | None:
 
 
 def save_feedback(pred_id: str, feedback: str):
-    """Update the existing prediction record with feedback."""
+    """Update the existing prediction record with feedback (HF write in background)."""
     if pred_id in _predictions:
         _predictions[pred_id]["feedback"] = feedback
-    try:
-        records = _load_dataset()
-        updated = False
-        for rec in records:
-            if rec.get("id") == pred_id:
-                rec["feedback"] = feedback
-                updated = True
-                break
-        if updated:
-            _save_dataset(records, f"Add feedback for {pred_id}")
-    except Exception as e:
-        print(f"Warning: failed to push feedback: {e}")
+
+    def _push():
+        try:
+            records = _load_dataset()
+            updated = False
+            for rec in records:
+                if rec.get("id") == pred_id:
+                    rec["feedback"] = feedback
+                    updated = True
+                    break
+            if updated:
+                _save_dataset(records, f"Add feedback for {pred_id}")
+        except Exception as e:
+            print(f"Warning: failed to push feedback: {e}")
+
+    import threading
+    threading.Thread(target=_push, daemon=True).start()
 
 
 # ---------------------------------------------------------------------------
@@ -129,149 +147,497 @@ HEADERS = {
     "Accept-Language": "en-US,en;q=0.9",
 }
 
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Outfit:wght@300;400;500;600;700&display=swap');
+HEAD = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,300;12..96,75..100,500;12..96,75..100,800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+"""
 
+CSS = """
 :root {
-    --bg-deep: #0a0e17;
-    --bg-surface: #111827;
-    --bg-card: #1a2234;
-    --bg-input: #0f1729;
-    --border-subtle: #1e2d45;
-    --border-accent: #2563eb;
-    --text-primary: #e2e8f0;
-    --text-secondary: #8892a6;
-    --text-muted: #4a5568;
-    --accent-blue: #3b82f6;
-    --accent-cyan: #06b6d4;
-    --accent-human: #10b981;
-    --accent-ai: #f59e0b;
-    --glow-blue: rgba(59, 130, 246, 0.15);
+    --paper:        #fffaf0;
+    --paper-soft:   #fbf2dc;
+    --ink:          #0a0908;
+    --ink-soft:     #2a2826;
+    --ink-faded:    #6b6864;
+    --ai:           #f15baa;       /* fluorescent pink */
+    --ai-soft:      #fde0ee;
+    --human:        #1f4dd6;       /* federal blue */
+    --human-soft:   #d8e1f7;
+    --yellow:       #ffd400;
+    --mint:         #b8eccb;
+    color-scheme: light;
+}
+
+* { box-sizing: border-box; }
+
+/* Force light mode — override Gradio's dark-mode wrappers */
+html, body, .dark, .dark .gradio-container, body.dark {
+    color-scheme: light !important;
+    background: var(--paper) !important;
+    color: var(--ink) !important;
+}
+.dark .input-card,
+.dark .preview-box,
+.dark .preview-box textarea,
+.dark .section-label,
+.dark .section-label * {
+    background: transparent !important;
+    color: var(--ink) !important;
+}
+.dark .input-card { background: var(--paper) !important; }
+.dark textarea, .dark input[type="text"] {
+    background: var(--paper) !important;
+    color: var(--ink) !important;
 }
 
 .gradio-container {
-    background: var(--bg-deep) !important;
-    font-family: 'Outfit', sans-serif !important;
-    max-width: 820px !important;
+    background: var(--paper) !important;
+    font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
+    font-variation-settings: 'wdth' 100, 'wght' 400, 'opsz' 14;
+    color: var(--ink) !important;
+    max-width: 860px !important;
     margin: 0 auto !important;
+    padding: 0 !important;
+    position: relative;
+}
+
+/* Halftone dot field — riso print signature */
+.gradio-container::before {
+    content: '';
+    position: fixed; inset: 0;
+    pointer-events: none; z-index: 0;
+    background-image:
+        radial-gradient(circle at center, rgba(241, 91, 170, 0.16) 1.1px, transparent 1.6px),
+        radial-gradient(circle at center, rgba(31, 77, 214, 0.10) 1.1px, transparent 1.6px);
+    background-size: 9px 9px, 13px 13px;
+    background-position: 0 0, 5px 5px;
+}
+
+/* Tri-color register bar across top — pink / blue / yellow */
+.gradio-container::after {
+    content: '';
+    position: fixed; top: 0; left: 0; right: 0;
+    height: 14px;
+    background:
+        linear-gradient(90deg,
+            var(--ai) 0 38%,
+            var(--human) 38% 72%,
+            var(--yellow) 72% 100%);
+    pointer-events: none; z-index: 2;
+    border-bottom: 2px solid var(--ink);
+}
+
+.main, .contain {
+    background: transparent !important;
+    position: relative; z-index: 1;
+    padding: 0 1.6rem !important;
 }
-.main, .contain { background: transparent !important; }
 footer { display: none !important; }
 
-.header-block { text-align: center; padding: 2rem 1rem 1rem; }
-.header-block h1 {
-    font-family: 'DM Mono', monospace !important;
-    font-size: 1.6rem !important; font-weight: 500 !important;
-    color: var(--text-primary) !important; letter-spacing: 0.04em;
-    margin-bottom: 0.4rem !important;
+/* ============ HEADER ============ */
+.header-block {
+    padding: 3rem 0 1.2rem 0;
+    margin-bottom: 0.4rem;
+    position: relative;
+}
+.wordmark {
+    font-family: 'Bricolage Grotesque', sans-serif !important;
+    font-variation-settings: 'wdth' 88, 'wght' 800, 'opsz' 96;
+    font-size: 4.4rem;
+    font-weight: 800;
+    letter-spacing: -0.06em;
+    line-height: 0.9;
+    color: var(--ink);
+    text-decoration: none !important;
+    display: inline-block;
+    margin: 0;
 }
-.header-block p {
-    font-size: 0.85rem !important; color: var(--text-secondary) !important;
-    line-height: 1.5 !important; max-width: 560px; margin: 0 auto !important;
+.wordmark .slash {
+    color: var(--ai);
+    font-weight: 800;
+    padding: 0;
+    display: inline-block;
+    transform: translateY(-0.04em);
 }
-.header-block a {
-    color: var(--accent-cyan) !important; text-decoration: none !important;
-    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
+a.wordmark { transition: transform 0.2s ease; }
+a.wordmark:hover { transform: rotate(-1deg); }
+.subline {
+    font-family: 'Bricolage Grotesque', sans-serif;
+    font-variation-settings: 'wdth' 100, 'wght' 400, 'opsz' 14;
+    font-size: 1.05rem;
+    color: var(--ink-soft);
+    line-height: 1.5;
+    margin: 1.1rem 0 0 0;
+    max-width: 540px;
+}
+.subline em {
+    font-style: italic;
+    font-weight: 700;
+    color: var(--ink);
+    background: linear-gradient(transparent 62%, var(--yellow) 62%);
+    padding: 0 0.1rem;
 }
-.header-block a:hover { border-bottom-color: var(--accent-cyan); }
 
+/* ============ TABS ============ */
 .tabs { background: transparent !important; border: none !important; }
 .tab-nav {
-    background: transparent !important; border: none !important;
-    justify-content: center !important; gap: 0.25rem !important;
-    padding: 0.5rem 0 !important;
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 2px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    margin-top: 1.6rem !important;
+    gap: 0 !important;
 }
 .tab-nav button {
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.8rem !important; font-weight: 400 !important;
-    letter-spacing: 0.06em; text-transform: uppercase;
-    color: var(--text-muted) !important; background: transparent !important;
-    border: 1px solid var(--border-subtle) !important;
-    border-radius: 6px !important; padding: 0.5rem 1.5rem !important;
-    transition: all 0.2s ease !important;
-}
-.tab-nav button:hover { color: var(--text-secondary) !important; border-color: var(--text-muted) !important; }
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.78rem !important; font-weight: 700 !important;
+    letter-spacing: 0.22em !important; text-transform: uppercase !important;
+    color: var(--ink) !important;
+    background: var(--paper) !important;
+    border: 2px solid var(--ink) !important;
+    border-bottom: 2px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 0.7rem 0 !important;
+    margin: 0 0.5rem -2px 0 !important;
+    transition: background 0.12s ease, color 0.12s ease !important;
+    position: relative;
+    min-width: 120px !important;
+    text-align: center !important;
+    box-sizing: border-box !important;
+}
+.tab-nav button:hover {
+    background: var(--yellow) !important;
+}
 .tab-nav button.selected {
-    color: var(--accent-cyan) !important;
-    background: rgba(6, 182, 212, 0.08) !important;
-    border-color: var(--accent-cyan) !important;
+    color: var(--paper) !important;
+    background: var(--ink) !important;
+    border: 2px solid var(--ink) !important;
+    border-bottom: 2px solid var(--ink) !important;
+}
+.tab-nav button.selected::after {
+    content: '';
+    position: absolute;
+    left: 0; right: 0; bottom: -8px;
+    height: 4px;
+    background: var(--ai);
+}
+
+.tabitem {
+    background: transparent !important; border: none !important;
+    padding: 1.4rem 0 !important; min-height: 540px !important;
+}
+
+/* ============ SECTION LABEL ============ */
+.section-label {
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.62rem !important; font-weight: 700 !important;
+    color: var(--ink) !important;
+    background: transparent !important;
+    letter-spacing: 0.24em !important; text-transform: uppercase !important;
+    margin: 0 0 0.6rem 0 !important; padding: 0 !important;
+    display: flex !important; align-items: baseline !important; gap: 0.6rem !important;
+}
+.section-label .tag {
+    font-family: 'Bricolage Grotesque', sans-serif !important;
+    color: var(--ink-faded) !important;
+    background: transparent !important;
+    font-weight: 400 !important; letter-spacing: 0 !important;
+    text-transform: none !important;
+    font-size: 0.78rem !important;
 }
-.tabitem { background: transparent !important; border: none !important; padding: 0 !important; min-height: 520px !important; }
 
+/* ============ CARDS — bold-bordered riso zine blocks ============ */
 .input-card {
-    background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important;
-    border-radius: 10px !important; padding: 1.25rem !important; margin-top: 0.75rem !important;
+    background: var(--paper) !important;
+    border: 2px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 1.2rem 1.3rem !important;
+    margin: 0 0 1.4rem 0 !important;
+    position: relative !important;
+    box-shadow: 5px 5px 0 var(--ink) !important;
+}
+
+/* ============ INPUT HINT — live char-counter ============ */
+.input-hint {
+    margin: 0.4rem 0 0 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.7rem !important;
+    color: var(--ink-faded) !important;
+    letter-spacing: 0.04em !important;
+}
+.input-hint strong { color: var(--ink); font-weight: 700; }
+.input-hint .hint-meta { color: var(--ink); font-weight: 700; }
+.input-hint .hint-warn {
+    color: var(--ink);
+    background: var(--yellow);
+    padding: 0 0.4rem;
+    font-weight: 700;
+    border: 1px solid var(--ink);
+}
+
+/* ============ STATUS / ERROR MESSAGE ============ */
+.status-msg {
+    margin: 0.4rem 0 1rem 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+}
+.status-msg .status-inner {
+    background: var(--yellow);
+    border: 2px solid var(--ink);
+    box-shadow: 4px 4px 0 var(--ink);
+    padding: 0.9rem 1.1rem;
+    font-family: 'Bricolage Grotesque', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--ink);
 }
 
+/* ============ FORM CONTROLS ============ */
 textarea, input[type="text"] {
-    font-family: 'DM Mono', monospace !important; font-size: 0.85rem !important;
-    line-height: 1.65 !important; color: var(--text-primary) !important;
-    background: var(--bg-input) !important; border: 1px solid var(--border-subtle) !important;
-    border-radius: 8px !important; padding: 0.85rem 1rem !important;
-    transition: border-color 0.2s ease !important;
+    font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
+    font-variation-settings: 'wdth' 100, 'wght' 400, 'opsz' 14;
+    font-size: 1rem !important; line-height: 1.55 !important;
+    color: var(--ink) !important;
+    background: var(--paper) !important;
+    border: 1.5px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 0.75rem 0.85rem !important;
+    transition: all 0.12s ease !important;
+    caret-color: var(--ai) !important;
+    box-shadow: none !important;
+}
+textarea::placeholder, input[type="text"]::placeholder {
+    color: var(--ink-faded) !important;
 }
 textarea:focus, input[type="text"]:focus {
-    border-color: var(--accent-blue) !important;
-    box-shadow: 0 0 0 3px var(--glow-blue) !important; outline: none !important;
+    border-color: var(--ai) !important;
+    box-shadow: 3px 3px 0 var(--ai) !important;
+    outline: none !important;
 }
 label span {
-    font-family: 'DM Mono', monospace !important; font-size: 0.7rem !important;
-    text-transform: uppercase !important; letter-spacing: 0.08em !important;
-    color: var(--text-muted) !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.58rem !important; font-weight: 700 !important;
+    text-transform: uppercase !important; letter-spacing: 0.28em !important;
+    color: var(--ink-faded) !important;
 }
 
+/* ============ PRIMARY BUTTON — pink stamp ============ */
 .detect-btn {
-    font-family: 'DM Mono', monospace !important; font-size: 0.8rem !important;
-    font-weight: 500 !important; letter-spacing: 0.06em !important;
-    text-transform: uppercase !important;
-    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)) !important;
-    color: #fff !important; border: none !important; border-radius: 8px !important;
-    padding: 0.7rem 2rem !important; cursor: pointer !important;
-    transition: all 0.25s ease !important;
-    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.25) !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.72rem !important; font-weight: 700 !important;
+    letter-spacing: 0.22em !important; text-transform: uppercase !important;
+    background: var(--ink) !important;
+    color: var(--paper) !important;
+    border: 2px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 0.9rem 1.8rem !important;
+    cursor: pointer !important;
+    transition: all 0.12s ease !important;
+    box-shadow: 4px 4px 0 var(--ai) !important;
+    margin-top: 0.8rem !important;
+}
+.detect-btn:hover {
+    background: var(--ai) !important;
+    color: var(--ink) !important;
+    box-shadow: 4px 4px 0 var(--human) !important;
+    transform: translate(-2px, -2px) !important;
+}
+.detect-btn:active {
+    transform: translate(2px, 2px) !important;
+    box-shadow: 0 0 0 var(--ai) !important;
 }
-.detect-btn:hover { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important; transform: translateY(-1px) !important; }
 
-.result-card {
-    background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important;
-    border-radius: 10px !important; padding: 1.25rem !important; margin-top: 0.5rem !important;
+/* ============ ACTION ROWS (feedback + share) ============ */
+.action-row {
+    margin: 0.7rem 0 0 0 !important;
+    gap: 0.5rem !important;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    justify-content: flex-start !important;
+    align-items: center !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Share-card image is the result display */
+#share-card {
+    margin: 0.3rem 0 0.6rem 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+}
+#share-card .image-frame,
+#share-card .image-container,
+#share-card .gradio-image {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    border-radius: 0 !important;
+}
+#share-card img {
+    display: block !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    height: auto !important;
+    border: 2px solid var(--ink) !important;
+    border-radius: 0 !important;
+    box-shadow: 5px 5px 0 var(--ink);
+}
+
+
+/* ============ CHIP BUTTONS — natural width, stamp shadow ============ */
+.chip-btn {
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.64rem !important; font-weight: 700 !important;
+    letter-spacing: 0.18em !important; text-transform: uppercase !important;
+    background: var(--paper) !important;
+    color: var(--ink) !important;
+    border: 1.5px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 0.55rem 1rem !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+    transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease !important;
+    box-shadow: 2px 2px 0 var(--ink) !important;
+    flex: 0 0 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    white-space: nowrap !important;
+    line-height: 1 !important;
+}
+.chip-btn:hover { transform: translate(-1px, -1px) !important; box-shadow: 3px 3px 0 var(--ink) !important; }
+.chip-btn:active { transform: translate(1px, 1px) !important; box-shadow: 1px 1px 0 var(--ink) !important; }
+.chip-btn.ok:hover    { background: var(--mint) !important; }
+.chip-btn.no:hover    { background: var(--ai-soft) !important; }
+.chip-btn.share:hover { background: var(--yellow) !important; }
+
+.feedback-msg {
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.68rem !important; font-weight: 700 !important;
+    color: var(--ink) !important;
+    background: var(--mint);
+    border: 1.5px solid var(--ink);
+    padding: 0.55rem 0.9rem !important;
+    letter-spacing: 0.16em !important;
+    text-transform: uppercase;
+    display: inline-block;
+    margin-top: 0.6rem;
 }
-.result-card .output-class { font-family: 'DM Mono', monospace !important; }
-.output-label { background: transparent !important; }
-.output-label .label-name { font-family: 'DM Mono', monospace !important; font-size: 1.1rem !important; }
+.feedback-msg::before { content: '✓  '; color: var(--human); font-weight: 700; }
 
+/* ============ EXAMPLES & PREVIEW ============ */
 .examples-heading {
-    font-family: 'DM Mono', monospace !important; font-size: 0.7rem !important;
-    text-transform: uppercase !important; letter-spacing: 0.08em !important;
-    color: var(--text-muted) !important; margin-top: 1.25rem !important; margin-bottom: 0.5rem !important;
-}
-.gallery { gap: 0.5rem !important; }
-.gallery .gallery-item {
-    background: var(--bg-input) !important; border: 1px solid var(--border-subtle) !important;
-    border-radius: 8px !important; padding: 0.75rem !important; transition: border-color 0.2s ease !important;
-}
-.gallery .gallery-item:hover { border-color: var(--text-muted) !important; }
-.preview-box textarea { color: var(--text-secondary) !important; font-size: 0.78rem !important; opacity: 0.85; }
-.gr-group, .gr-block, .gr-box, .gr-panel { background: transparent !important; border: none !important; }
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.6rem !important; font-weight: 700 !important;
+    letter-spacing: 0.3em !important; text-transform: uppercase !important;
+    color: var(--ink) !important;
+    margin: 1.6rem 0 0.6rem 0 !important;
+    display: flex; align-items: center; gap: 0.6rem;
+}
+.examples-heading::before {
+    content: '';
+    display: inline-block;
+    width: 12px; height: 12px;
+    background: var(--human);
+    border: 1.5px solid var(--ink);
+}
+.gallery { gap: 0.6rem !important; flex-wrap: wrap !important; }
+.gallery .gallery-item,
+.gallery > div > div {
+    background: var(--paper) !important;
+    border: 1.5px solid var(--ink) !important;
+    border-radius: 0 !important;
+    padding: 0.7rem 0.9rem !important;
+    transition: all 0.12s ease !important;
+    cursor: pointer !important;
+    color: var(--ink) !important;
+    font-family: 'Bricolage Grotesque', sans-serif !important;
+    font-size: 0.88rem !important;
+    line-height: 1.45 !important;
+    box-shadow: 3px 3px 0 var(--ink) !important;
+}
+.gallery .gallery-item:hover,
+.gallery > div > div:hover {
+    background: var(--yellow) !important;
+    transform: translate(-2px, -2px);
+    box-shadow: 5px 5px 0 var(--ink) !important;
+}
+.gallery .gallery-item *,
+.gallery .gallery-item textarea,
+.gallery .gallery-item span,
+.gallery .gallery-item div {
+    color: var(--ink) !important;
+    background: transparent !important;
+    font-family: 'Bricolage Grotesque', sans-serif !important;
+    font-size: 0.88rem !important;
+    border: none !important;
+}
+.preview-box textarea {
+    color: var(--ink-soft) !important;
+    font-size: 0.95rem !important;
+    font-family: 'Bricolage Grotesque', sans-serif !important;
+    background: var(--paper-soft) !important;
+    border: 1.5px solid var(--ink) !important;
+}
+.gr-group, .gr-block, .gr-box, .gr-panel {
+    background: transparent !important; border: none !important;
+}
 .gr-padded { padding: 0 !important; }
 
-.info-strip { text-align: center; padding: 1.25rem 1rem; }
-.info-strip p { font-family: 'DM Mono', monospace !important; font-size: 0.68rem !important; color: var(--text-muted) !important; letter-spacing: 0.03em; }
-.info-strip a { color: var(--text-secondary) !important; text-decoration: none !important; border-bottom: 1px dotted var(--text-muted); }
+/* ============ FOOTER ============ */
+.info-strip {
+    border-top: 1.5px solid var(--ink);
+    margin-top: 2.4rem;
+    padding: 1rem 0 2.5rem 0;
+    text-align: left;
+}
+.info-strip p.links {
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 0.68rem !important; font-weight: 700 !important;
+    color: var(--ink) !important;
+    letter-spacing: 0.18em !important; text-transform: uppercase !important;
+    margin: 0 0 0.5rem 0 !important; line-height: 1.6;
+}
+.info-strip .note {
+    font-weight: 400 !important;
+    color: var(--ink-faded) !important;
+    text-transform: none !important;
+    letter-spacing: 0.06em !important;
+    font-style: italic;
+    margin-left: 0.1rem;
+}
+.info-strip a {
+    color: var(--ink) !important;
+    text-decoration: none !important;
+    border-bottom: 1.5px solid var(--ink);
+    padding: 0 1px 1px 1px;
+    transition: color 0.12s ease, border-color 0.12s ease;
+    background: none;
+}
+.info-strip a:hover {
+    color: var(--ai) !important;
+    border-bottom-color: var(--ai);
+}
+.info-strip .sep {
+    color: var(--ink-faded);
+    margin: 0 0.55rem;
+    background: none; border: none; padding: 0;
+    display: inline;
+    font-weight: 400;
+}
 
+/* hide share-card image toolbars */
 #share-card .image-toolbar, #text-share-card .image-toolbar,
 #share-card .icon-buttons, #text-share-card .icon-buttons,
 #share-card button[aria-label], #text-share-card button[aria-label] { display: none !important; }
-
-.feedback-btn {
-    font-family: 'DM Mono', monospace !important; font-size: 0.75rem !important;
-    border-radius: 6px !important; padding: 0.4rem 1rem !important;
-    cursor: pointer !important; transition: all 0.2s ease !important;
-}
-.feedback-msg {
-    font-family: 'DM Mono', monospace !important; font-size: 0.75rem !important;
-    color: var(--accent-cyan) !important; padding: 0.4rem 0 !important;
-}
 """
 
 HUMAN_EXAMPLE = (
@@ -326,6 +692,13 @@ class _TextExtractor(HTMLParser):
         return re.sub(r"\s+", " ", " ".join(self._parts)).strip()
 
 
+try:
+    import trafilatura
+    _HAVE_TRAFILATURA = True
+except ImportError:
+    _HAVE_TRAFILATURA = False
+
+
 def fetch_url(url: str) -> str:
     if not url or not url.strip():
         return ""
@@ -335,6 +708,22 @@ def fetch_url(url: str) -> str:
     req = urllib.request.Request(url, headers=HEADERS)
     with urllib.request.urlopen(req, timeout=15) as resp:
         html = resp.read().decode("utf-8", errors="ignore")
+
+    # Prefer trafilatura — it extracts just the main article body,
+    # dropping nav menus, sidebars, footers, infoboxes, edit links, ToCs, references.
+    if _HAVE_TRAFILATURA:
+        extracted = trafilatura.extract(
+            html, url=url,
+            include_comments=False,
+            include_tables=False,
+            include_links=False,
+            deduplicate=True,
+            favor_recall=False,
+        )
+        if extracted and len(extracted.split()) >= 50:
+            return extracted
+
+    # Fallback: simple home-grown HTML stripper.
     parser = _TextExtractor()
     parser.feed(html)
     return parser.get_text()
@@ -343,75 +732,217 @@ def fetch_url(url: str) -> str:
 # ---------------------------------------------------------------------------
 # Result card image
 # ---------------------------------------------------------------------------
-def make_result_card(source: str, label: str, confidence: float) -> Image.Image:
-    W, H = 800, 418
-    bg, card_bg = "#0a0e17", "#1a2234"
-    human_color, ai_color = "#10b981", "#f59e0b"
-    text_color, muted_color = "#e2e8f0", "#8892a6"
+def make_result_card(source: str, label: str, confidence: float, extracted_text: str = "") -> Image.Image:
+    """Share card layout (top-down):
+       1. Tri-color register strip
+       2. Header strip: wordmark left, TRY IT -> URL top-right
+       3. Verdict block (in one paper sheet):
+            - VERDICT label
+            - Small verdict word + percentage
+            - Hatched confidence bar
+            - TEXT/URL ANALYZED label
+            - 3 lines of source preview
+    """
+    W, H = 1100, 560
+    PAPER      = "#fffaf0"
+    PAPER_SOFT = "#fbf2dc"
+    INK        = "#0a0908"
+    INK_F      = "#6b6864"
+    AI         = "#f15baa"
+    HUMAN      = "#1f4dd6"
+    YELLOW     = "#ffd400"
 
-    img = Image.new("RGB", (W, H), bg)
+    is_ai = label.lower() == "ai"
+    accent = AI if is_ai else HUMAN
+    verdict_word = "ai" if is_ai else "human"
+
+    img = Image.new("RGB", (W, H), PAPER)
     draw = ImageDraw.Draw(img)
-    try:
-        fl = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 32)
-        fm = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 20)
-        fs = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 14)
-        fmono = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf", 16)
-    except OSError:
-        fl = fm = fs = fmono = ImageFont.load_default()
 
-    draw.rounded_rectangle([30, 30, W - 30, H - 30], radius=16, fill=card_bg)
-    draw.text((60, 55), "AI Text Detector", fill=text_color, font=fl)
+    def load(*paths_sizes):
+        for path, size in paths_sizes:
+            try:
+                return ImageFont.truetype(path, size)
+            except OSError:
+                continue
+        return ImageFont.load_default()
+
+    # Smaller verdict (was 160)
+    f_verdict = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 112),
+        ("/System/Library/Fonts/Supplemental/Arial Bold.ttf", 112),
+    )
+    f_wordmark = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 26),
+        ("/System/Library/Fonts/Supplemental/Arial Bold.ttf", 26),
+    )
+    f_try = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 14),
+        ("/System/Library/Fonts/Supplemental/Arial Bold.ttf", 14),
+    )
+    f_url = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf", 14),
+        ("/System/Library/Fonts/Menlo.ttc", 14),
+    )
+    f_pct = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf", 44),
+        ("/System/Library/Fonts/Menlo.ttc", 44),
+    )
+    f_pct_mark = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf", 24),
+        ("/System/Library/Fonts/Menlo.ttc", 24),
+    )
+    f_mono_s = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf", 13),
+        ("/System/Library/Fonts/Menlo.ttc", 13),
+    )
+    f_preview = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 17),
+        ("/System/Library/Fonts/Supplemental/Arial.ttf", 17),
+    )
+    f_url_preview = load(
+        ("/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf", 15),
+        ("/System/Library/Fonts/Menlo.ttc", 15),
+    )
 
-    is_ai = label.lower() == "ai"
-    rc = ai_color if is_ai else human_color
-    draw.text((60, 120), "Result:", fill=muted_color, font=fm)
-    draw.text((60, 155), "AI-Generated" if is_ai else "Human-Written", fill=rc, font=fl)
-    draw.text((60, 200), f"Confidence: {confidence * 100:.1f}%", fill=text_color, font=fm)
-
-    bx, by, bw, bh = 60, 240, W - 120, 24
-    draw.rounded_rectangle([bx, by, bx + bw, by + bh], radius=12, fill="#0f1729")
-    fw = int(bw * confidence)
-    if fw > 0:
-        draw.rounded_rectangle([bx, by, bx + fw, by + bh], radius=12, fill=rc)
-
-    is_url = source.startswith("http") or source.startswith("www")
-    draw.text((60, 285), "URL analyzed:" if is_url else "Text analyzed:", fill=muted_color, font=fs)
-
-    max_text_w = W - 120  # 60px padding each side
-    if is_url:
-        # URLs: single line, truncate with ...
-        disp = source
-        while fmono.getlength(disp) > max_text_w and len(disp) > 10:
-            disp = disp[:-4] + "..."
-        draw.text((60, 308), disp, fill=text_color, font=fmono)
+    # ===== Tri-color strip =====
+    bar_h = 8
+    third = W // 3
+    draw.rectangle([0, 0, third, bar_h], fill=AI)
+    draw.rectangle([third, 0, third * 2, bar_h], fill=HUMAN)
+    draw.rectangle([third * 2, 0, W, bar_h], fill=YELLOW)
+
+    # ===== Header strip =====
+    strip_top = bar_h
+    strip_h = 90
+    draw.line([(0, strip_top + strip_h), (W, strip_top + strip_h)], fill=INK, width=1)
+
+    # Wordmark left
+    wm_x, wm_y = 40, strip_top + 22
+    draw.text((wm_x, wm_y), "ai", fill=INK, font=f_wordmark)
+    bbox = draw.textbbox((wm_x, wm_y), "ai", font=f_wordmark)
+    draw.text((bbox[2] + 2, wm_y), "/", fill=AI, font=f_wordmark)
+    bbox2 = draw.textbbox((bbox[2] + 2, wm_y), "/", font=f_wordmark)
+    draw.text((bbox2[2] + 2, wm_y), "detector", fill=INK, font=f_wordmark)
+    draw.text((wm_x, wm_y + 36), "HUMAN-vs-AI TEXT CLASSIFIER", fill=INK_F, font=f_mono_s)
+
+    # TRY IT -> URL top-right
+    full_url = "adaptive-classifier-ai-detector.hf.space"
+    url_bbox = draw.textbbox((0, 0), full_url, font=f_url)
+    url_w = url_bbox[2] - url_bbox[0]
+    try_bbox = draw.textbbox((0, 0), "TRY IT →", font=f_try)
+    try_w = try_bbox[2] - try_bbox[0]
+    line_w = max(url_w, try_w)
+    right_edge = W - 40
+    line1_x = right_edge - try_w
+    line2_x = right_edge - url_w
+    draw.text((line1_x, strip_top + 22), "TRY IT →", fill=INK, font=f_try)
+    draw.text((line2_x, strip_top + 42), full_url, fill=INK, font=f_url)
+    # Underline the URL so it reads as clickable
+    draw.line([(line2_x, strip_top + 60), (line2_x + url_w, strip_top + 60)], fill=accent, width=2)
+
+    # ===== Verdict block =====
+    bx, by = 40, strip_top + strip_h + 26
+    bw = W - 80
+    bh = H - by - 30
+    # offset shadow
+    draw.rectangle([bx + 7, by + 7, bx + bw + 7, by + bh + 7], fill=accent)
+    # main block
+    draw.rectangle([bx, by, bx + bw, by + bh], fill=PAPER, outline=INK, width=2)
+
+    pad_x = 36
+    inner_x = bx + pad_x
+    inner_right = bx + bw - pad_x
+
+    # VERDICT label
+    cur_y = by + 26
+    draw.text((inner_x, cur_y), "VERDICT", fill=INK_F, font=f_mono_s)
+    cur_y += 22
+
+    # Verdict word + colored period + percentage on the right
+    word_y = cur_y
+    draw.text((inner_x, word_y), verdict_word, fill=INK, font=f_verdict)
+    wbb = draw.textbbox((inner_x, word_y), verdict_word, font=f_verdict)
+    draw.text((wbb[2] + 4, word_y), ".", fill=accent, font=f_verdict)
+
+    # Percentage on the right, vertically centered with verdict word
+    pct = int(round(confidence * 100))
+    pct_str = str(pct)
+    pct_bbox = draw.textbbox((0, 0), pct_str, font=f_pct)
+    pct_w = pct_bbox[2] - pct_bbox[0]
+    mark_bbox = draw.textbbox((0, 0), "%", font=f_pct_mark)
+    mark_w = mark_bbox[2] - mark_bbox[0]
+    pct_total_w = pct_w + 6 + mark_w
+    pct_x = inner_right - pct_total_w
+    pct_y = word_y + 30
+    draw.text((pct_x, pct_y), pct_str, fill=INK, font=f_pct)
+    draw.text((pct_x + pct_w + 6, pct_y + 16), "%", fill=INK_F, font=f_pct_mark)
+
+    cur_y = word_y + 120
+
+    # Hatched confidence bar
+    bar_y = cur_y
+    bar_h_px = 20
+    bar_w = bw - 2 * pad_x
+    draw.rectangle([inner_x, bar_y, inner_x + bar_w, bar_y + bar_h_px], fill=PAPER_SOFT, outline=INK, width=2)
+    fw = int(bar_w * confidence)
+    if fw > 4:
+        draw.rectangle([inner_x + 2, bar_y + 2, inner_x + fw - 2, bar_y + bar_h_px - 2], fill=accent)
+        for x in range(inner_x - bar_h_px, inner_x + fw, 6):
+            draw.line([(x, bar_y + bar_h_px - 2), (x + bar_h_px - 2, bar_y + 2)], fill=PAPER, width=1)
+
+    cur_y = bar_y + bar_h_px + 26
+
+    # Source preview — under verdict
+    is_url_src = source.startswith("http") or source.startswith("www")
+    src_label = "URL ANALYZED" if is_url_src else "TEXT ANALYZED"
+    draw.text((inner_x, cur_y), src_label, fill=INK_F, font=f_mono_s)
+    cur_y += 22
+
+    max_w = bw - 2 * pad_x
+
+    # URL case: show URL on one mono line, then 3 lines of extracted text below.
+    # Text case: show 4 lines of the input text.
+    if is_url_src:
+        url_line = source.strip()
+        while f_url_preview.getlength(url_line) > max_w and len(url_line) > 10:
+            url_line = url_line[:-4] + "..."
+        draw.text((inner_x, cur_y), url_line, fill=INK, font=f_url_preview)
+        cur_y += 24
+        body = (extracted_text or "").strip().replace("\n", " ")
+        pf = f_preview
+        max_lines = 3
     else:
-        # Text: wrap into up to 3 lines
-        words = source.split()
-        lines = []
-        current = ""
-        for w in words:
-            test = f"{current} {w}".strip()
-            if fmono.getlength(test) > max_text_w:
-                if current:
-                    lines.append(current)
-                current = w
-            else:
-                current = test
-            if len(lines) >= 2:
-                current = current + "..."
-                break
-        if current:
-            lines.append(current)
-        for i, line in enumerate(lines[:3]):
-            draw.text((60, 308 + i * 20), line, fill=text_color, font=fmono)
-
-    draw.text((60, H - 60), "adaptive-classifier-ai-detector.hf.space", fill=muted_color, font=fs)
-    return img
+        body = source.strip().replace("\n", " ")
+        pf = f_preview
+        max_lines = 4
+
+    lines, current = [], ""
+    for w in body.split():
+        test = (current + " " + w).strip()
+        if pf.getlength(test) > max_w:
+            if current:
+                lines.append(current)
+            current = w
+        else:
+            current = test
+        if len(lines) >= max_lines:
+            break
+    if current and len(lines) < max_lines:
+        lines.append(current)
+    if lines:
+        total_in_lines = sum(len(l) for l in lines) + len(lines) - 1
+        if len(body) > total_in_lines + 5:
+            last = lines[-1]
+            while pf.getlength(last + "...") > max_w and len(last) > 4:
+                last = last[:-1]
+            lines[-1] = last + "..."
+    line_h = 24
+    for i, line in enumerate(lines):
+        draw.text((inner_x, cur_y + i * line_h), line, fill=INK, font=pf)
 
+    return img
 
-# ---------------------------------------------------------------------------
-# Detection logic
-# ---------------------------------------------------------------------------
 def _error_label(msg: str) -> dict:
     return {msg: 1.0}
 
@@ -425,15 +956,16 @@ def _classify(text: str) -> dict:
 
 def detect_text_full(text: str):
     """Returns (result, share_link, card, pred_id)"""
-    result = _classify(text)
+    # Mirror the URL flow: cap at 2,000 chars (~512 tokens) before scoring.
+    scored_text = text.strip()[:2000]
+    result = _classify(scored_text)
     if any(k.startswith("Please") for k in result):
         return result, "", None, ""
     top_label = max(result, key=result.get)
     pred_id = uuid4().hex[:12]
-    save_prediction(pred_id, text, "", top_label, result[top_label])
+    save_prediction(pred_id, scored_text, "", top_label, result[top_label])
     share_link = f"{SPACE_URL}/?id={pred_id}"
-    preview = text.strip()[:80] + ("..." if len(text.strip()) > 80 else "")
-    card = make_result_card(preview, top_label, result[top_label])
+    card = make_result_card(scored_text, top_label, result[top_label])
     return result, share_link, card, pred_id
 
 
@@ -453,243 +985,247 @@ def detect_url_full(url: str):
         return _error_label("This site requires JavaScript (e.g. Twitter/X). Paste the text directly instead."), "", "", None, ""
     if len(text.split()) < 10:
         return _error_label("Not enough readable text found at that URL"), text[:500], "", None, ""
-    words = text.split()
-    if len(words) > 2000:
-        text = " ".join(words[:2000])
-    result = _classify(text)
+    # full_text: everything trafilatura extracted (shown to user for assurance).
+    # scored_text: first ~2000 chars (~512 tokens, RoBERTa limit) — what the model sees.
+    full_text = text
+    scored_text = text[:2000]
+    result = _classify(scored_text)
     if any(k.startswith("Please") or k.startswith("Not enough") for k in result):
-        return result, text[:500], "", None, ""
+        return result, full_text[:500], "", None, ""
     top_label = max(result, key=result.get)
     pred_id = uuid4().hex[:12]
-    save_prediction(pred_id, text, url.strip(), top_label, result[top_label])
-    preview = text[:1500] + ("..." if len(text) > 1500 else "")
+    save_prediction(pred_id, scored_text, url.strip(), top_label, result[top_label])
     share_link = f"{SPACE_URL}/?id={pred_id}"
-    card = make_result_card(url.strip(), top_label, result[top_label])
-    return result, preview, share_link, card, pred_id
+    card = make_result_card(url.strip(), top_label, result[top_label], extracted_text=scored_text)
+    return result, full_text, share_link, card, pred_id
 
 
 # ---------------------------------------------------------------------------
 # UI
 # ---------------------------------------------------------------------------
-with gr.Blocks(css=CSS, title="AI Text Detector", theme=gr.themes.Base()) as demo:
+URL_PATTERN = re.compile(r"^(https?://|www\.)\S+", re.IGNORECASE)
+
+
+def _is_url(s: str) -> bool:
+    s = s.strip()
+    if URL_PATTERN.match(s):
+        return True
+    # Bare domain like "example.com/path"
+    if " " not in s and len(s) < 250 and re.match(r"^[a-zA-Z0-9.-]+\.[a-z]{2,}(/.*)?$", s):
+        return True
+    return False
+
+
+def detect_any(input_text: str):
+    """Return (result_dict, preview_text, share_link, card, pred_id, was_url)."""
+    s = (input_text or "").strip()
+    if not s:
+        return _error_label("Please enter text or a URL"), "", "", None, "", False
+    if _is_url(s):
+        result, preview, link, card, pid = detect_url_full(s)
+        return result, preview, link, card, pid, True
+    result, link, card, pid = detect_text_full(s)
+    return result, "", link, card, pid, False
+
+
+def _render_verdict(result: dict) -> str:
+    """Render the verdict block as HTML — single confidence row for the top class."""
+    if not result:
+        return ""
+    if any(k.startswith(("Please", "Not enough", "Could not", "This site"))
+           for k in result):
+        msg = next(iter(result))
+        return (
+            '<div class="verdict-block error">'
+            f'  <div class="verdict-error">{msg}</div>'
+            '</div>'
+        )
+
+    top = max(result, key=result.get)
+    top_conf = result[top]
+    accent_class = "ai" if top == "ai" else "human"
+    pct = int(round(top_conf * 100))
+
+    return f'''
+    <div class="verdict-block {accent_class}">
+      <div class="verdict-meta">VERDICT</div>
+      <div class="verdict-word">{top}<span class="verdict-dot">.</span></div>
+      <div class="verdict-row">
+        <div class="vrow-bar"><div class="vrow-fill" style="width: {top_conf*100:.1f}%;"></div></div>
+        <span class="vrow-pct">{pct}<span class="vrow-pct-mark">%</span></span>
+      </div>
+    </div>
+    '''
+
+
+with gr.Blocks(css=CSS, head=HEAD, title="AI Detector", theme=gr.themes.Base()) as demo:
 
     gr.HTML("""
     <div class="header-block">
-        <h1>AI Text Detector</h1>
-        <p>
-            Classify text as <strong>human-written</strong> or <strong>AI-generated</strong>.
-            Built with <a href="https://github.com/codelion/adaptive-classifier">adaptive-classifier</a>
-            and trained on the <a href="https://huggingface.co/datasets/pangram/editlens_iclr">EditLens</a> dataset.
-            Paste text directly or enter a URL to fetch and analyze.
-        </p>
+        <a class="wordmark" href="https://huggingface.co/adaptive-classifier/ai-detector" target="_blank">ai<span class="slash">/</span>detector</a>
+        <div class="subline">
+            A small classifier that reads a passage of text, or a web page at a URL,
+            and tells you whether it was written by a <em>human</em> or by a <em>language model</em>.
+        </div>
     </div>
     """)
 
-    with gr.Tabs() as tabs:
-        # ---- TEXT TAB ----
-        with gr.TabItem("Text", id="text-tab"):
-            with gr.Group(elem_classes="input-card"):
-                text_input = gr.Textbox(lines=7, placeholder="Paste text here to analyze...", label="Input Text", show_label=True)
-                text_btn = gr.Button("Analyze", variant="primary", elem_classes="detect-btn")
-
-            with gr.Group(elem_classes="result-card"):
-                text_output = gr.Label(num_top_classes=2, label="Result")
-                text_pred_id = gr.Textbox(visible=False, elem_id="text-pred-id")
-                # Feedback
-                with gr.Row(visible=False) as text_fb_row:
-                    text_fb_up = gr.Button("Correct", size="sm", elem_classes="feedback-btn")
-                    text_fb_down = gr.Button("Incorrect", size="sm", elem_classes="feedback-btn")
-                text_fb_msg = gr.HTML(visible=False, elem_classes="feedback-msg")
-                # Share
-                text_share_link = gr.Textbox(label="Share this result", visible=False, interactive=False, elem_id="text-share-url")
-                with gr.Row(visible=False) as text_share_row:
-                    text_copy_link_btn = gr.Button("Copy Link", size="sm", elem_classes="detect-btn")
-                    text_copy_img_btn = gr.Button("Copy Image", size="sm", elem_classes="detect-btn")
-                    text_dl_img_btn = gr.Button("Download Image", size="sm", elem_classes="detect-btn")
-                text_share_card = gr.Image(label="Result card", visible=False, type="pil", elem_id="text-share-card")
-
-            def run_text(text):
-                result, link, card, pid = detect_text_full(text)
-                has = bool(link)
-                return (
-                    result, gr.update(value=pid, visible=False),
-                    gr.update(visible=has), gr.update(visible=False),
-                    gr.update(value=link, visible=has), gr.update(visible=has),
-                    gr.update(value=card, visible=has),
-                )
-
-            text_btn.click(
-                fn=run_text, inputs=text_input,
-                outputs=[text_output, text_pred_id, text_fb_row, text_fb_msg, text_share_link, text_share_row, text_share_card],
-                api_name="detect",
-            )
-
-            def text_fb_positive(pid):
-                if pid:
-                    save_feedback(pid, "correct")
-                return gr.update(visible=False), gr.update(value='<span class="feedback-msg">Thanks for your feedback!</span>', visible=True)
-
-            def text_fb_negative(pid):
-                if pid:
-                    save_feedback(pid, "incorrect")
-                return gr.update(visible=False), gr.update(value='<span class="feedback-msg">Thanks for your feedback!</span>', visible=True)
-
-            text_fb_up.click(fn=text_fb_positive, inputs=text_pred_id, outputs=[text_fb_row, text_fb_msg])
-            text_fb_down.click(fn=text_fb_negative, inputs=text_pred_id, outputs=[text_fb_row, text_fb_msg])
-
-            text_copy_link_btn.click(fn=None, inputs=text_share_link, js="(u) => { navigator.clipboard.writeText(u); }")
-            text_copy_img_btn.click(fn=None, js="""() => {
-                const img = document.querySelector('#text-share-card img');
-                if (img) { const c = document.createElement('canvas'); c.width = img.naturalWidth; c.height = img.naturalHeight;
-                c.getContext('2d').drawImage(img, 0, 0);
-                c.toBlob(b => navigator.clipboard.write([new ClipboardItem({'image/png': b})]), 'image/png'); }
-            }""")
-            text_dl_img_btn.click(fn=None, js="""() => {
-                const img = document.querySelector('#text-share-card img');
-                if (img) { const a = document.createElement('a'); a.href = img.src; a.download = 'ai-detector-result.png'; a.click(); }
-            }""")
-
-            gr.HTML('<div class="examples-heading">Try an example</div>')
-            gr.Examples(examples=[[HUMAN_EXAMPLE], [AI_EXAMPLE]], inputs=text_input, label="")
-
-        # ---- URL TAB ----
-        with gr.TabItem("URL", id="url-tab"):
-            with gr.Group(elem_classes="input-card"):
-                url_input = gr.Textbox(lines=1, placeholder="https://example.com/article", label="Web Page URL", show_label=True)
-                url_btn = gr.Button("Fetch & Analyze", variant="primary", elem_classes="detect-btn")
-
-            with gr.Group(elem_classes="result-card"):
-                url_output = gr.Label(num_top_classes=2, label="Result")
-                url_pred_id = gr.Textbox(visible=False, elem_id="url-pred-id")
-                # Feedback
-                with gr.Row(visible=False) as url_fb_row:
-                    url_fb_up = gr.Button("Correct", size="sm", elem_classes="feedback-btn")
-                    url_fb_down = gr.Button("Incorrect", size="sm", elem_classes="feedback-btn")
-                url_fb_msg = gr.HTML(visible=False, elem_classes="feedback-msg")
-                # Share
-                share_link = gr.Textbox(label="Share this result", visible=False, interactive=False, elem_id="share-url")
-                with gr.Row(visible=False) as share_row:
-                    copy_link_btn = gr.Button("Copy Link", size="sm", elem_classes="detect-btn")
-                    copy_img_btn = gr.Button("Copy Image", size="sm", elem_classes="detect-btn")
-                    dl_img_btn = gr.Button("Download Image", size="sm", elem_classes="detect-btn")
-                share_card = gr.Image(label="Result card", visible=False, type="pil", elem_id="share-card")
-
-            with gr.Group(elem_classes="input-card"):
-                url_preview = gr.Textbox(label="Extracted Text", lines=5, interactive=False, elem_classes="preview-box")
-
-            def run_url(url):
-                result, preview, link, card, pid = detect_url_full(url)
-                has = bool(link)
-                return (
-                    result, gr.update(value=pid, visible=False),
-                    gr.update(visible=has), gr.update(visible=False),
-                    gr.update(value=link, visible=has), gr.update(visible=has),
-                    gr.update(value=card, visible=has), preview,
-                )
-
-            url_btn.click(
-                fn=run_url, inputs=url_input,
-                outputs=[url_output, url_pred_id, url_fb_row, url_fb_msg, share_link, share_row, share_card, url_preview],
-                api_name="detect_url",
-            )
+    with gr.Group(elem_classes="input-card"):
+        main_input = gr.Textbox(
+            lines=6,
+            placeholder="paste text or a URL here…",
+            label="Input",
+            show_label=False,
+        )
+        input_hint = gr.HTML(visible=False, elem_classes="input-hint")
+        main_btn = gr.Button("Analyze", variant="primary", elem_classes="detect-btn")
+
+    status_msg = gr.HTML(visible=False, elem_classes="status-msg")
+    # The share card IS the result display — no separate verdict block.
+    share_card = gr.Image(visible=False, type="pil", elem_id="share-card", show_label=False, container=False)
+    main_pred_id = gr.Textbox(visible=False, elem_id="main-pred-id")
+    share_link = gr.Textbox(visible=False, interactive=False, elem_id="share-url", show_label=False, container=False)
+    # Single action row: feedback (correct / incorrect) + share (link / image / download)
+    with gr.Row(visible=False, elem_classes="action-row") as actions_row:
+        fb_up = gr.Button("Correct", elem_classes="chip-btn ok")
+        fb_down = gr.Button("Incorrect", elem_classes="chip-btn no")
+        copy_link_btn = gr.Button("Copy link", elem_classes="chip-btn share")
+        copy_img_btn = gr.Button("Copy image", elem_classes="chip-btn share")
+        dl_img_btn = gr.Button("Download image", elem_classes="chip-btn share")
+    fb_msg = gr.HTML(visible=False, elem_classes="feedback-msg")
+
+    with gr.Group(elem_classes="input-card", visible=False) as preview_group:
+        gr.HTML('<div class="section-label">Extracted from URL<span class="tag">full text shown &middot; first 2,000 characters sent to the model</span></div>')
+        url_preview = gr.Textbox(label="", lines=5, interactive=False, elem_classes="preview-box", show_label=False)
+
+    def run_and_show(input_text):
+        result, preview, link, card, pid, is_url = detect_any(input_text)
+        has_card = card is not None
+        is_error = (not has_card) and result and any(
+            k.startswith(("Please", "Not enough", "Could not", "This site"))
+            for k in result
+        )
+        error_html = ""
+        if is_error:
+            msg = next(iter(result))
+            error_html = f'<div class="status-inner">⚠  {msg}</div>'
+        return (
+            gr.update(value=error_html, visible=is_error),
+            gr.update(value=card, visible=has_card),
+            gr.update(value=pid, visible=False),
+            gr.update(value=link, visible=has_card),
+            gr.update(visible=has_card),
+            gr.update(visible=False),
+            gr.update(visible=is_url and has_card),
+            preview,
+        )
+
+    main_btn.click(
+        fn=run_and_show, inputs=main_input,
+        outputs=[status_msg, share_card, main_pred_id, share_link, actions_row, fb_msg, preview_group, url_preview],
+        api_name="detect",
+    )
 
-            def url_fb_positive(pid):
-                if pid:
-                    save_feedback(pid, "correct")
-                return gr.update(visible=False), gr.update(value='<span class="feedback-msg">Thanks for your feedback!</span>', visible=True)
-
-            def url_fb_negative(pid):
-                if pid:
-                    save_feedback(pid, "incorrect")
-                return gr.update(visible=False), gr.update(value='<span class="feedback-msg">Thanks for your feedback!</span>', visible=True)
-
-            url_fb_up.click(fn=url_fb_positive, inputs=url_pred_id, outputs=[url_fb_row, url_fb_msg])
-            url_fb_down.click(fn=url_fb_negative, inputs=url_pred_id, outputs=[url_fb_row, url_fb_msg])
-
-            copy_link_btn.click(fn=None, inputs=share_link, js="(u) => { navigator.clipboard.writeText(u); }")
-            copy_img_btn.click(fn=None, js="""() => {
-                const img = document.querySelector('#share-card img');
-                if (img) { const c = document.createElement('canvas'); c.width = img.naturalWidth; c.height = img.naturalHeight;
-                c.getContext('2d').drawImage(img, 0, 0);
-                c.toBlob(b => navigator.clipboard.write([new ClipboardItem({'image/png': b})]), 'image/png'); }
-            }""")
-            dl_img_btn.click(fn=None, js="""() => {
-                const img = document.querySelector('#share-card img');
-                if (img) { const a = document.createElement('a'); a.href = img.src; a.download = 'ai-detector-result.png'; a.click(); }
-            }""")
-
-            gr.HTML('<div class="examples-heading">Try an example</div>')
-            gr.Examples(
-                examples=[
-                    ["https://en.wikipedia.org/wiki/Constitution_of_the_United_States"],
-                    ["https://garryslist.org/posts/richmond-just-voted-to-reinstate-their-flock-cameras-after-crime-spiked"],
-                ],
-                inputs=url_input, label="",
+    def _update_hint(text):
+        s = (text or "").strip()
+        n = len(s)
+        if n == 0:
+            return gr.update(value="", visible=False)
+        # Treat URL inputs separately — no truncation warning, just say it'll be fetched.
+        if _is_url(s):
+            return gr.update(value=f'<span class="hint-meta">URL detected</span> &middot; will fetch and analyze the page', visible=True)
+        if n > 2000:
+            extra = n - 2000
+            return gr.update(
+                value=f'<span class="hint-warn">{n:,} chars</span> &middot; first <strong>2,000</strong> sent to the model ({extra:,} chars truncated)',
+                visible=True,
             )
+        return gr.update(value=f'<span class="hint-meta">{n:,} chars</span> &middot; under the 2,000-char model limit', visible=True)
+
+    main_input.change(fn=_update_hint, inputs=main_input, outputs=input_hint, show_progress="hidden")
+
+    def fb_positive(pid):
+        if pid:
+            save_feedback(pid, "correct")
+        return gr.update(value='Thanks for your feedback!', visible=True)
+
+    def fb_negative(pid):
+        if pid:
+            save_feedback(pid, "incorrect")
+        return gr.update(value='Thanks for your feedback!', visible=True)
+
+    fb_up.click(fn=fb_positive, inputs=main_pred_id, outputs=[fb_msg])
+    fb_down.click(fn=fb_negative, inputs=main_pred_id, outputs=[fb_msg])
+
+    copy_link_btn.click(fn=None, inputs=share_link, js="(u) => { navigator.clipboard.writeText(u); }")
+    copy_img_btn.click(fn=None, js="""() => {
+        const img = document.querySelector('#share-card img');
+        if (img) { const c = document.createElement('canvas'); c.width = img.naturalWidth; c.height = img.naturalHeight;
+        c.getContext('2d').drawImage(img, 0, 0);
+        c.toBlob(b => navigator.clipboard.write([new ClipboardItem({'image/png': b})]), 'image/png'); }
+    }""")
+    dl_img_btn.click(fn=None, js="""() => {
+        const img = document.querySelector('#share-card img');
+        if (img) { const a = document.createElement('a'); a.href = img.src; a.download = 'ai-detector-result.png'; a.click(); }
+    }""")
+
+    gr.HTML('<div class="examples-heading">Try one</div>')
+    gr.Examples(
+        examples=[
+            [HUMAN_EXAMPLE],
+            [AI_EXAMPLE],
+            ["https://en.wikipedia.org/wiki/Constitution_of_the_United_States"],
+            ["https://garryslist.org/posts/richmond-just-voted-to-reinstate-their-flock-cameras-after-crime-spiked"],
+        ],
+        inputs=main_input, label="",
+    )
 
     gr.HTML("""
     <div class="info-strip">
-        <p>
-            Model: <a href="https://huggingface.co/adaptive-classifier/ai-detector">adaptive-classifier/ai-detector</a>
-            &nbsp;&middot;&nbsp;
-            <a href="https://github.com/codelion/adaptive-classifier">GitHub</a>
-            &nbsp;&middot;&nbsp;
-            Best with 50+ words
+        <p class="links">
+            <a href="https://huggingface.co/adaptive-classifier/ai-detector">Model</a>
+            <span class="sep">&middot;</span>
+            <a href="https://huggingface.co/datasets/adaptive-classifier/ai-detector-data">Dataset</a>
+            <span class="sep">&middot;</span>
+            <a href="https://github.com/codelion/adaptive-classifier">Source code</a>
+            <span class="sep">&middot;</span>
+            <span class="note">best with 50+ words</span>
         </p>
     </div>
     """)
 
-    # Handle ?id= share links on page load
     def _on_load(request: gr.Request):
         pred_id = request.query_params.get("id", "")
-
-        # Defaults for all outputs
-        d = gr.update()
-        n = ""
-        hide = gr.update(visible=False)
-        empty = {}
-        defaults = (d, n, empty, hide, hide, hide, n, hide, hide, n, empty, hide, hide, hide, hide, hide, hide, n)
-
         rec = lookup_prediction(pred_id) if pred_id else None
-        if rec:
-            result = {rec["prediction"]: rec["confidence"]}
-            other = "human" if rec["prediction"] == "ai" else "ai"
-            result[other] = round(1.0 - rec["confidence"], 4)
-            source = rec["url"] or rec["text"][:80] + "..."
-            card = make_result_card(source, rec["prediction"], rec["confidence"])
-            link = f"{SPACE_URL}/?id={pred_id}"
-            if rec["url"]:
-                return (
-                    gr.update(selected="url-tab"),
-                    n, empty, hide, hide, hide, n, hide, hide,
-                    rec["url"], result, gr.update(value=pred_id, visible=False),
-                    gr.update(visible=True), hide,
-                    gr.update(value=link, visible=True), gr.update(visible=True),
-                    gr.update(value=card, visible=True), rec["text"][:1500],
-                )
-            else:
-                return (
-                    gr.update(selected="text-tab"),
-                    rec["text"], result, gr.update(value=pred_id, visible=False),
-                    gr.update(visible=True), hide,
-                    gr.update(value=link, visible=True), gr.update(visible=True),
-                    gr.update(value=card, visible=True),
-                    n, empty, hide, hide, hide, hide, hide, hide, n,
-                )
-
-        return defaults
+
+        if not rec:
+            hide = gr.update(visible=False)
+            return ("", gr.update(value="", visible=False), gr.update(value=None, visible=False),
+                    gr.update(value="", visible=False), gr.update(value="", visible=False), hide, hide, hide, "")
+
+        is_url = bool(rec.get("url"))
+        if is_url:
+            card = make_result_card(rec["url"], rec["prediction"], rec["confidence"], extracted_text=rec["text"])
+        else:
+            card = make_result_card(rec["text"], rec["prediction"], rec["confidence"])
+        link = f"{SPACE_URL}/?id={pred_id}"
+        main_value = rec["url"] if is_url else rec["text"]
+
+        return (
+            main_value,
+            gr.update(value="", visible=False),
+            gr.update(value=card, visible=True),
+            gr.update(value=pred_id, visible=False),
+            gr.update(value=link, visible=True),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=is_url),
+            rec["text"] if is_url else "",
+        )
 
     demo.load(
         fn=_on_load, inputs=None,
-        outputs=[
-            tabs,
-            # text tab
-            text_input, text_output, text_pred_id, text_fb_row, text_fb_msg,
-            text_share_link, text_share_row, text_share_card,
-            # url tab
-            url_input, url_output, url_pred_id, url_fb_row, url_fb_msg,
-            share_link, share_row, share_card, url_preview,
-        ],
+        outputs=[main_input, status_msg, share_card, main_pred_id, share_link, actions_row, fb_msg, preview_group, url_preview],
     )
 
 if __name__ == "__main__":

requirements.txt

@@ -2,3 +2,4 @@ adaptive-classifier>=0.1.2
 torch>=2.0.0
 transformers>=4.30.0
 Pillow>=10.0.0
+trafilatura>=1.12