Update app.py

app.py

@@ -3,213 +3,310 @@ import gradio as gr
 title = "AI Text Detector"
 
 description = """
-<div class="hero">
-    <h1>🔎 AI Text Detector</h1>
-    <p>
-        Built on the <b>ModernBERT</b> ensemble (3 variants, soft-voting).<br>
-        <span class="point">✅ Human verification</span> &nbsp;|&nbsp;
-        <span class="point">🔍 Detects 40+ AI models</span> &nbsp;|&nbsp;
-        <span class="point">📈 Best on longer passages</span>
-    </p>
-    <p class="paper">
-        Read the full paper&nbsp;→&nbsp;
-        <a href="https://aclanthology.org/2025.genaidetect-1.15/" target="_blank">LINK</a>
-    </p>
+<div class="app-description">
+    <p>This tool utilizes the <b>ModernBERT</b> model to discern whether a given text is human-authored or AI-generated. It employs a soft voting ensemble of <b>three</b> models, amalgamating their outputs to enhance detection accuracy.</p>
+    <ul class="features-list">
+        <li><span class="icon">✅</span> <strong>Human Verification:</strong> Clearly identifies human-written content.</li>
+        <li><span class="icon">🔍</span> <strong>Model Detection:</strong> Capable of identifying content from over 40 AI models.</li>
+        <li><span class="icon">📈</span> <strong>Accuracy:</strong> Performs optimally with more extensive text inputs.</li>
+        <li><span class="icon">📄</span> <strong>Read more:</strong> Our methodology is detailed in our research paper:
+            <a href="https://aclanthology.org/2025.genaidetect-1.15/" target="_blank" class="learn-more-link"><b>LINK</b></a>.
+        </li>
+    </ul>
+    <p class="instruction-text">Paste your text into the field below to analyze its origin.</p>
 </div>
 """
+bottom_text = "<p class='footer-text'>Developed by <strong>SzegedAI</strong></p>"
 
-bottom_text = "**Developed by SzegedAI - Mihaly Kiss**"
-
-# ----------  UI  ----------
-iface = gr.Blocks(
-    theme=gr.themes.Default(),   # keep defaults; we'll override in CSS
-    css="""
-/* ---------- Global tokens ---------- */
-:root{
-  --primary:#203A6B;             /* midnight-indigo */
-  --accent :#14B8A6;             /* teal-mint      */
-  --bg     :#F8FAFC;             /* light-gray     */
-  --bg-card:rgba(255,255,255,0.55);
-  --radius :16px;
-  --shadow :0 6px 24px rgba(0,0,0,.08);
-  --transition:180ms cubic-bezier(.4,0,.2,1);
-  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
-}
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-
-html,body{
-  font-family:var(--font);
-  background: var(--bg);
-  color:var(--primary);
-  height:100%;
-  margin:0;
-}
-
-/* ---------- Main container ---------- */
-.gradio-container{
-  display:grid;
-  place-items:center;
-  padding:5vmin;
-  min-height:100dvh;
-  animation:fade-slide-in .6s ease-out both;
-}
-
-.container{
-  background:var(--bg-card);
-  backdrop-filter:blur(12px) saturate(120%);
-  border:1px solid rgba(255,255,255,.35);
-  border-radius:var(--radius);
-  box-shadow:var(--shadow);
-  padding:clamp(1.5rem,4vw,3rem);
-  width:min(680px,90vw);
-  display:grid;
-  gap:2rem;
-}
-
-/* ---------- Hero / heading ---------- */
-.hero{
-  text-align:center;
-  line-height:1.6;
-}
-.hero h1{
-  margin:0 0 .5rem;
-  font-size:clamp(1.8rem,4vw,2.4rem);
-  font-weight:700;
-}
-.point{
-  font-weight:600;
-}
-.paper a{
-  color:var(--accent);
-  text-decoration:none;
-  font-weight:600;
-}
-
-/* ---------- Inputs & button ---------- */
-#text_input_box{
-  border:2px solid rgba(32,58,107,.25);
-  border-radius:var(--radius);
-  padding:1rem 1.25rem;
-  font-size:1rem;
-  width:100%;
-  transition:border-color var(--transition), box-shadow var(--transition);
-}
-#text_input_box:focus{
-  outline:none;
-  border-color:var(--accent);
-  box-shadow:0 0 0 4px rgba(20,184,166,.18);
-}
-
-.analyze-btn{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  gap:.5rem;
-  font-weight:600;
-  font-size:1rem;
-  padding:.9rem 1.6rem;
-  background:var(--primary);
-  color:#fff;
-  border:none;
-  border-radius:var(--radius);
-  cursor:pointer;
-  transition:transform var(--transition), box-shadow var(--transition);
-}
-.analyze-btn:hover{
-  transform:translateY(-2px);
-  box-shadow:0 8px 24px rgba(0,0,0,.12);
-}
-.analyze-btn:active{
-  transform:translateY(1px) scale(.98);
-}
-
-/* spinner placeholder */
-.spinner{
-  width:1rem;height:1rem;
-  border:3px solid rgba(255,255,255,.4);
-  border-top-color:#fff;
-  border-radius:50%;
-  animation:spin 1s linear infinite;
-}
-
-@keyframes spin{to{transform:rotate(360deg);}}
+# Placeholder for the actual classification function
+def classify_text(text):
+    if not text.strip():
+        return "<div style='text-align: center; color: #7f8c8d;'>Please enter some text to analyze.</div>"
+    # Simulate model output
+    if "bert" in text.lower() or "sentence" in text.lower() or "token" in text.lower():
+        return "<div class='highlight-human'>Likely Human-Written</div><p style='font-size:0.9em; color: #7f8c8d; margin-top: 5px;'>Based on linguistic patterns.</p>"
+    elif len(text) > 50 : # Simple heuristic for demo
+        return "<div class='highlight-ai'>Likely AI-Generated</div><p style='font-size:0.9em; color: #7f8c8d; margin-top: 5px;'>Based on predictive analysis.</p>"
+    else:
+        return "<div class='highlight-ai'>Potentially AI-Generated</div><p style='font-size:0.9em; color: #7f8c8d; margin-top: 5px;'>Analysis suggests non-human origin, but more text may improve accuracy.</p>"
 
-/* ---------- Output box ---------- */
-#result_output_box{
-  text-align:center;
-  font-size:1.15rem;
-  padding:1rem 1.5rem;
-  border-radius:var(--radius);
-  border:2px solid transparent;
-  min-height:3.5rem;
-  word-wrap:break-word;
-}
-.highlight-human{color:var(--accent);}
-.highlight-ai{color:#EF4444;}    /* red-500 */
-
-/* ---------- Tabs ---------- */
-.gradio-container .tabs{
-  margin-top:1rem!important;
-}
-.gradio-container .tab{
-  border:none!important;
-}
-.gradio-container .tabitem{
-  padding:.35rem .75rem!important;
-  border-radius:var(--radius) var(--radius) 0 0!important;
-}
-
-/* ---------- Utilities & media ---------- */
-@media(max-width:768px){
-  .container{padding:1.25rem;}
+AI_texts = [
+    "Camels are remarkable desert animals known for their unique adaptations to harsh, arid environments. Native to the Middle East, North Africa, and parts of Asia, camels have been essential to human life for centuries, serving as a mode of transportation, a source of food, and even a symbol of endurance and survival. There are two primary species of camels: the dromedary camel, which has a single hump and is commonly found in the Middle East and North Africa, and the Bactrian camel, which has two humps and is native to Central Asia. Their humps store fat, not water, as commonly believed, allowing them to survive long periods without food by metabolizing the stored fat for energy. Camels are highly adapted to desert life. They can go for weeks without water, and when they do drink, they can consume up to 40 gallons in one sitting. Their thick eyelashes, sealable nostrils, and wide, padded feet protect them from sand and help them walk easily on loose desert terrain.",
+]
+
+Human_texts = [
+    "To make BERT handle a variety of down-stream tasks, our input representation is able to unambiguously represent both a single sentence and a pair of sentences (e.g., h Question, Answeri) in one token sequence. Throughout this work, a “sentence” can be an arbitrary span of contiguous text, rather than an actual linguistic sentence. A “sequence” refers to the input token sequence to BERT, which may be a single sentence or two sentences packed together. We use WordPiece embeddings (Wu et al., 2016) with a 30,000 token vocabulary. The first token of every sequence is always a special classification token ([CLS]). The final hidden state corresponding to this token is used as the aggregate sequence representation for classification tasks. Sentence pairs are packed together into a single sequence."
+]
+
+modern_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --primary-bg: #F8F9FA; /* Light Gray for page body */
+    --app-bg: #FFFFFF; /* White for app container */
+    --text-primary: #2C3E50; /* Dark Slate Blue */
+    --text-secondary: #7F8C8D; /* Cool Gray */
+    --accent-color: #1ABC9C; /* Teal */
+    --accent-color-darker: #16A085; /* Darker Teal for hover */
+    --border-color: #E0E0E0; /* Light Gray for borders */
+    --input-bg: #FFFFFF; /* White for input fields */
+    --input-focus-border: var(--accent-color);
+    --human-color: #2ECC71; /* Green */
+    --human-bg: rgba(46, 204, 113, 0.1);
+    --ai-color: #E74C3C; /* Red */
+    --ai-bg: rgba(231, 76, 60, 0.1);
+    --shadow-color: rgba(44, 62, 80, 0.1); /* Subtle shadow */
+    --container-max-width: 700px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); /* Subtle gradient background */
+    color: var(--text-primary);
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start; /* Align to top for scroll */
+    min-height: 100vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+}
+
+.gradio-container {
+    background-color: var(--app-bg);
+    border-radius: var(--border-radius-lg);
+    padding: clamp(20px, 5vw, 40px); /* Responsive padding */
+    box-shadow: 0 8px 25px var(--shadow-color);
+    max-width: var(--container-max-width);
+    width: 100%;
+    margin: 20px auto; /* Centering with margin for scroll */
+    border: none; /* Remove default Gradio border */
+}
+
+/* Hide default Gradio Form styling that might interfere */
+.form.svelte-633qhp, .block.svelte-11xb1hd {
+    background: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important; /* Reset padding if it causes issues */
+}
+
+h1 { /* Targets the main title */
+    color: var(--text-primary);
+    font-size: clamp(24px, 5vw, 32px); /* Responsive font size */
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 25px;
+    letter-spacing: -0.5px;
+}
+
+.app-description p {
+    color: var(--text-secondary);
+    font-size: clamp(14px, 2.5vw, 16px);
+    line-height: 1.7;
+    margin-bottom: 15px;
+}
+
+.app-description .instruction-text {
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-top: 20px;
+    text-align: center;
+}
+
+.features-list {
+    list-style: none;
+    padding-left: 0;
+    margin: 20px 0;
+}
+
+.features-list li {
+    display: flex;
+    align-items: center;
+    font-size: clamp(14px, 2.5vw, 16px);
+    color: var(--text-secondary);
+    margin-bottom: 12px;
+    line-height: 1.6;
+}
+
+.features-list .icon {
+    margin-right: 12px;
+    font-size: 1.2em;
+    color: var(--accent-color);
+}
+
+.learn-more-link, .learn-more-link b {
+    color: var(--accent-color) !important;
+    text-decoration: none;
+    font-weight: 600;
+}
+.learn-more-link:hover, .learn-more-link:hover b {
+    color: var(--accent-color-darker) !important;
+    text-decoration: underline;
+}
+
+#text_input_box textarea { /* Targeting the textarea inside the Gradio Textbox component */
+    background-color: var(--input-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-md);
+    font-size: clamp(15px, 2.5vw, 16px);
+    padding: 15px;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--text-primary);
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    min-height: 120px; /* Ensure enough space for typing */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 
-@keyframes fade-slide-in{
-  from{opacity:0;transform:translateY(12px);}
-  to{opacity:1;transform:none;}
+#text_input_box textarea::placeholder {
+    color: #B0BEC5; /* Lighter placeholder text */
+}
+
+#text_input_box textarea:focus {
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2);
+    outline: none;
+}
+
+#result_output_box { /* Style the Markdown block for results */
+    background-color: var(--input-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-md);
+    padding: 20px;
+    margin-top: 25px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: clamp(16px, 3vw, 18px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+.highlight-human, .highlight-ai {
+    font-weight: 600;
+    padding: 8px 15px;
+    border-radius: var(--border-radius-md);
+    display: inline-block; /* So padding applies correctly */
+    font-size: 1.1em;
+    margin-bottom: 5px; /* Space for sub-text if any */
+}
+
+.highlight-human {
+    color: var(--human-color);
+    background-color: var(--human-bg);
+    border: 1px solid var(--human-color);
+}
+
+.highlight-ai {
+    color: var(--ai-color);
+    background-color: var(--ai-bg);
+    border: 1px solid var(--ai-color);
+}
+
+/* Styling for Gradio Tabs and Examples */
+.tabs > div:first-child button { /* Tab buttons */
+    background-color: transparent !important;
+    color: var(--text-secondary) !important;
+    border: none !important;
+    border-bottom: 2px solid transparent !important;
+    border-radius: 0 !important;
+    padding: 10px 15px !important;
+    font-weight: 500 !important;
+    transition: color 0.3s ease, border-bottom-color 0.3s ease !important;
+}
+
+.tabs > div:first-child button.selected { /* Selected tab */
+    color: var(--accent-color) !important;
+    border-bottom-color: var(--accent-color) !important;
+    font-weight: 600 !important;
+}
+
+.gr-examples { /* Container for examples */
+    padding: 15px !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius-md) !important;
+    background-color: #fdfdfd !important;
+}
+.gr-sample-textbox { /* Example textboxes */
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius-md) !important;
+    font-size: 14px !important;
+}
+
+.footer-text, #bottom_text {
+    text-align: center;
+    margin-top: 40px;
+    font-size: clamp(13px, 2vw, 14px);
+    color: var(--text-secondary);
+}
+#bottom_text p { /* Ensure p tag inside Markdown inherits */
+    margin: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+        align-items: flex-start; /* Keep at top for mobile */
+    }
+    .gradio-container {
+        padding: 20px;
+        margin: 10px; /* Reduce margin on mobile */
+    }
+    h1 {
+        font-size: 24px;
+    }
+    .app-description p, .features-list li {
+        font-size: 14px;
+    }
+    #text_input_box textarea {
+        font-size: 15px;
+        min-height: 100px;
+    }
+    #result_output_box {
+        font-size: 16px;
+        padding: 15px;
+    }
 }
 """
-)
 
-def classify_text():
-    pass
+iface = gr.Blocks(css=modern_css, theme=gr.themes.Base(font=[gr.themes.GoogleFont("Inter"), "sans-serif"]))
 
-AI_texts = [""]
-Human_texts = [""]
 with iface:
-    with gr.Column(elem_classes="container"):
-        # Hero section
-        gr.Markdown(description)
-        
-        # Input
-        text_input = gr.Textbox(
-            label="Paste or type your text...",
-            placeholder="Start writing here…",
-            elem_id="text_input_box",
-            lines=6
-        )
-        
-        # Analyze button (triggers classify_text)
-        analyze_btn = gr.Button("Analyze", elem_classes="analyze-btn")
-        
-        # Output
-        result_output = gr.Markdown("", elem_id="result_output_box")
-        
-        # Example tabs
-        with gr.Tab("AI examples"):
-            gr.Examples(examples=AI_texts, inputs=text_input)
-        with gr.Tab("Human examples"):
-            gr.Examples(examples=Human_texts, inputs=text_input)
-        
-        gr.Markdown(bottom_text, elem_id="bottom_text", elem_classes="footer")
-    
-    # Wire the interaction
-    analyze_btn.click(
-        fn=classify_text,
-        inputs=text_input,
-        outputs=result_output,
-        show_progress="minimal"   # toggles spinner internally
+    gr.Markdown(f"<h1>{title}</h1>") # Use h1 directly for title
+    gr.Markdown(description) # HTML is now within the description string
+
+    text_input = gr.Textbox(
+        label="", # Label is visually less important now due to structure
+        placeholder="Type or paste your content here...",
+        elem_id="text_input_box",
+        lines=6 # Adjusted lines
     )
+    result_output = gr.HTML(elem_id="result_output_box") # Use HTML for richer output formatting
+
+    text_input.change(classify_text, inputs=text_input, outputs=result_output)
+
+    with gr.Row(): # Keep examples side-by-side if space allows, stack on mobile by default
+        with gr.Column(scale=1):
+             with gr.Accordion("AI Text Examples", open=False):
+                gr.Examples(
+                    examples=AI_texts,
+                    inputs=text_input,
+                    label="Click an example to load it",
+                    elem_classes="gr-examples"
+                )
+        with gr.Column(scale=1):
+            with gr.Accordion("Human Text Examples", open=False):
+                gr.Examples(
+                    examples=Human_texts,
+                    inputs=text_input,
+                    label="Click an example to load it",
+                    elem_classes="gr-examples"
+                )
+
+    gr.Markdown(bottom_text, elem_id="bottom_text")
 
-iface.launch(share=True)
+iface.launch(share=False) # Set share=True if you need a public link