Redesign UI with dark editorial theme, add URL tab, fix examples

app.py

@@ -24,6 +24,286 @@ 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');
+
+: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);
+}
+
+/* Global overrides */
+.gradio-container {
+    background: var(--bg-deep) !important;
+    font-family: 'Outfit', sans-serif !important;
+    max-width: 820px !important;
+    margin: 0 auto !important;
+}
+
+.main, .contain {
+    background: transparent !important;
+}
+
+footer { display: none !important; }
+
+/* Header */
+.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-block p {
+    font-size: 0.85rem !important;
+    color: var(--text-secondary) !important;
+    line-height: 1.5 !important;
+    max-width: 560px;
+    margin: 0 auto !important;
+}
+
+.header-block a {
+    color: var(--accent-cyan) !important;
+    text-decoration: none !important;
+    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
+}
+
+.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;
+}
+
+.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;
+}
+
+.tab-nav button.selected {
+    color: var(--accent-cyan) !important;
+    background: rgba(6, 182, 212, 0.08) !important;
+    border-color: var(--accent-cyan) !important;
+}
+
+.tabitem {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+}
+
+/* Input card */
+.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;
+}
+
+/* Textbox overrides */
+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;
+}
+
+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;
+}
+
+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;
+}
+
+/* Button */
+.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;
+}
+
+.detect-btn:hover {
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Result label */
+.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;
+}
+
+.result-card .output-class {
+    font-family: 'DM Mono', monospace !important;
+}
+
+/* Label component overrides */
+.output-label {
+    background: transparent !important;
+}
+
+.output-label .label-name {
+    font-family: 'DM Mono', monospace !important;
+    font-size: 1.1rem !important;
+}
+
+/* Examples section */
+.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;
+}
+
+/* Example buttons */
+.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 textbox */
+.preview-box textarea {
+    color: var(--text-secondary) !important;
+    font-size: 0.78rem !important;
+    opacity: 0.85;
+}
+
+/* Misc */
+.gr-group, .gr-block, .gr-box, .gr-panel {
+    background: transparent !important;
+    border: none !important;
+}
+
+.gr-padded {
+    padding: 0 !important;
+}
+
+/* Info strip */
+.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);
+}
+"""
+
+HUMAN_EXAMPLE = (
+    "Beware! Bait & Switch Scam! $1685 job turns into $4634 at Home Depot. "
+    "I was pricing flooring for a new construction project in my home. I went to "
+    "Home Depot, right seems to make sense? My project had about 900sqft of flooring "
+    "to do. The flooring I chose was $1.59/sqft and with labor it came to $1685. "
+    "I signed up, paid the deposit, and scheduled the install. The installer came out "
+    "and suddenly the price jumped to $4634 because of 'subfloor prep' and 'transitions'. "
+    "Nobody mentioned any of this when I was in the store. Complete bait and switch."
+)
+
+AI_EXAMPLE = (
+    "Understanding Intramuscular Injections: A Vital Medical Delivery Method. "
+    "When we think about receiving medication, most people immediately picture "
+    "swallowing pills or receiving shots in the arm. That said, intramuscular "
+    "injections represent a crucial and nuanced approach to drug delivery that "
+    "deserves a closer look. These injections deliver medication directly into "
+    "muscle tissue, allowing for efficient absorption into the bloodstream. "
+    "The technique requires careful consideration of injection site selection, "
+    "needle gauge, and proper anatomical knowledge to ensure both safety and "
+    "efficacy for the patient."
+)
+
 
 class _TextExtractor(HTMLParser):
     """Simple HTML to text extractor."""
@@ -72,7 +352,7 @@ def fetch_url(url: str) -> str:
 def detect_text(text: str) -> dict:
     """Classify text as human-written or AI-generated."""
     if not text or len(text.strip().split()) < 10:
-        return {"error": "Please enter at least a few sentences of text (~50 words)."}
+        return {"error": "Please enter at least a few sentences (~50 words)."}
     predictions = classifier.predict(text, k=2)
     return {label: round(score, 4) for label, score in predictions}
 
@@ -84,58 +364,88 @@ def detect_url(url: str) -> tuple[dict, str]:
     try:
         text = fetch_url(url)
     except Exception as e:
-        return {"error": f"Failed to fetch URL: {e}"}, ""
+        return {"error": f"Could not fetch URL: {e}"}, ""
     if len(text.split()) < 10:
-        return {"error": "Could not extract enough text from that URL."}, text[:500]
-    # Truncate to ~2000 words to keep inference fast
+        return {"error": "Not enough readable text found at that URL."}, text[:500]
     words = text.split()
     if len(words) > 2000:
         text = " ".join(words[:2000])
     result = detect_text(text)
-    # Show a preview of what was extracted
-    preview = text[:1000] + ("..." if len(text) > 1000 else "")
+    preview = text[:1500] + ("..." if len(text) > 1500 else "")
     return result, preview
 
 
-with gr.Blocks(title="AI Text Detector") as demo:
-    gr.Markdown(
-        "# AI Text Detector\n"
-        "Detects whether text is **human-written** or **AI-generated/edited**. "
-        "Built with [adaptive-classifier](https://github.com/codelion/adaptive-classifier) "
-        "using frozen [RADAR](https://huggingface.co/TrustSafeAI/RADAR-Vicuna-7B) embeddings, "
-        "trained on the [EditLens](https://huggingface.co/datasets/pangram/editlens_iclr) dataset. "
-        "Works best with 50+ words."
-    )
+with gr.Blocks(css=CSS, title="AI Text 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>
+    </div>
+    """)
 
     with gr.Tabs():
-        with gr.TabItem("Text"):
-            text_input = gr.Textbox(
-                lines=8,
-                placeholder="Paste text here to check if it's human-written or AI-generated...",
-                label="Input Text",
-            )
-            text_btn = gr.Button("Detect", variant="primary")
-            text_output = gr.Label(num_top_classes=2, label="Prediction")
+        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_btn.click(fn=detect_text, inputs=text_input, outputs=text_output, api_name="detect")
 
+            gr.HTML('<div class="examples-heading">Try an example</div>')
             gr.Examples(
-                examples=[
-                    ["The quick brown fox jumps over the lazy dog. I went to the store yesterday and forgot my wallet, which was pretty embarrassing. Had to ask the cashier to hold my stuff while I ran back to the car."],
-                    ["The implementation leverages a novel approach to address the fundamental challenges inherent in modern natural language processing systems. By utilizing advanced transformer architectures, we demonstrate significant improvements across multiple benchmark datasets."],
-                ],
+                examples=[[HUMAN_EXAMPLE], [AI_EXAMPLE]],
                 inputs=text_input,
+                label="",
             )
 
-        with gr.TabItem("URL"):
-            url_input = gr.Textbox(
-                lines=1,
-                placeholder="Enter a URL to fetch and analyze (e.g. https://example.com/article)",
-                label="URL",
-            )
-            url_btn = gr.Button("Fetch & Detect", variant="primary")
-            url_output = gr.Label(num_top_classes=2, label="Prediction")
-            url_preview = gr.Textbox(label="Extracted Text (preview)", lines=6, interactive=False)
+        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")
+
+            with gr.Group(elem_classes="input-card"):
+                url_preview = gr.Textbox(
+                    label="Extracted Text",
+                    lines=5,
+                    interactive=False,
+                    elem_classes="preview-box",
+                )
+
             url_btn.click(fn=detect_url, inputs=url_input, outputs=[url_output, url_preview], api_name="detect_url")
 
+    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>
+    </div>
+    """)
+
 if __name__ == "__main__":
     demo.launch(share=False)