Update app.py

app.py

@@ -1,162 +1,139 @@
 import torch
 import gradio as gr
-from transformers import (
-    AutoTokenizer,
-    AutoModelForSequenceClassification
-)
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
 
+# =====================
+# Model loading
+# =====================
 MODEL_NAME = "duclo90/results"
+
 tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
 model = AutoModelForSequenceClassification.from_pretrained(MODEL_NAME)
 model.eval()
 
+# =====================
+# Inference function
+# =====================
 def classify_text(text):
     if not text.strip():
         return """
-        <div style="text-align: center; padding: 40px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 20px; color: white;">
-            <h2 style="margin: 0;">⚠️ Oops!</h2>
-            <p style="margin-top: 10px; font-size: 18px;">Please enter some text to analyze</p>
+        <div style="text-align:center; padding:40px; background:linear-gradient(135deg,#f093fb,#f5576c);
+                    border-radius:20px; color:white;">
+            <h2>Oops!</h2>
+            <p>Please enter some text to analyze.</p>
         </div>
         """
-    
+
     inputs = tokenizer(
         text,
         return_tensors="pt",
         truncation=True,
         max_length=512
     )
+
     with torch.no_grad():
         outputs = model(**inputs)
         probs = torch.softmax(outputs.logits, dim=-1)
         score, pred = torch.max(probs, dim=-1)
-    
+
     label = model.config.id2label[pred.item()]
-    
-    # Create attractive HTML output
+
     if label.lower() == "human":
-        result = """
-        <div style="text-align: center; padding: 50px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 25px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideIn 0.5s ease-out;">
-            <div style="font-size: 80px; margin-bottom: 20px; animation: bounce 1s ease;">👤</div>
-            <h1 style="color: white; font-size: 42px; margin: 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">Human-Written</h1>
-            <p style="color: rgba(255,255,255,0.9); font-size: 20px; margin-top: 15px;">This text appears to be written by a human</p>
-            <div style="margin-top: 30px; padding: 15px 30px; background: rgba(255,255,255,0.2); border-radius: 15px; display: inline-block;">
-                <span style="color: white; font-size: 18px; font-weight: 600;">✨ Natural & Authentic</span>
-            </div>
+        return """
+        <div style="text-align:center; padding:50px; background:linear-gradient(135deg,#667eea,#764ba2);
+                    border-radius:25px; box-shadow:0 20px 60px rgba(0,0,0,.3);">
+            <div style="font-size:80px;">👤</div>
+            <h1 style="color:white;">Human-Written</h1>
+            <p style="color:rgba(255,255,255,.9); font-size:18px;">
+                This text appears to be written by a human.
+            </p>
         </div>
-        <style>
-            @keyframes slideIn {
-                from { opacity: 0; transform: translateY(20px); }
-                to { opacity: 1; transform: translateY(0); }
-            }
-            @keyframes bounce {
-                0%, 100% { transform: translateY(0); }
-                50% { transform: translateY(-10px); }
-            }
-        </style>
         """
     else:
-        result = """
-        <div style="text-align: center; padding: 50px 30px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 25px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideIn 0.5s ease-out;">
-            <div style="font-size: 80px; margin-bottom: 20px; animation: bounce 1s ease;">🤖</div>
-            <h1 style="color: white; font-size: 42px; margin: 0; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">AI-Generated</h1>
-            <p style="color: rgba(255,255,255,0.9); font-size: 20px; margin-top: 15px;">This text appears to be machine-generated</p>
-            <div style="margin-top: 30px; padding: 15px 30px; background: rgba(255,255,255,0.2); border-radius: 15px; display: inline-block;">
-                <span style="color: white; font-size: 18px; font-weight: 600;">⚡ AI-Powered Content</span>
-            </div>
+        return """
+        <div style="text-align:center; padding:50px; background:linear-gradient(135deg,#f093fb,#f5576c);
+                    border-radius:25px; box-shadow:0 20px 60px rgba(0,0,0,.3);">
+            <div style="font-size:80px;">🤖</div>
+            <h1 style="color:white;">AI-Generated</h1>
+            <p style="color:rgba(255,255,255,.9); font-size:18px;">
+                This text appears to be machine-generated.
+            </p>
         </div>
-        <style>
-            @keyframes slideIn {
-                from { opacity: 0; transform: translateY(20px); }
-                to { opacity: 1; transform: translateY(0); }
-            }
-            @keyframes bounce {
-                0%, 100% { transform: translateY(0); }
-                50% { transform: translateY(-10px); }
-            }
-        </style>
         """
-    
-    return result
 
-# Custom CSS for modern look
+# =====================
+# Custom CSS (NO header / NO footer)
+# =====================
 custom_css = """
-#component-0 {
-    max-width: 900px;
-    margin: auto;
-    padding: 20px;
+/* Remove Gradio top toolbar */
+header,
+footer,
+.gradio-header,
+.gradio-footer,
+.gradio-toolbar,
+#top-bar,
+.svelte-1ipelgc,
+.svelte-1xw6x5s {
+    display: none !important;
+    height: 0 !important;
+    visibility: hidden !important;
 }
 
-.gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    font-family: 'Inter', sans-serif;
+/* Remove reserved spacing */
+body {
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
-#title {
-    text-align: center;
-    color: white;
-    font-size: 2.5em;
-    font-weight: 700;
-    margin-bottom: 10px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+/* App container */
+.gradio-container {
+    min-height: 100vh !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    font-family: Inter, sans-serif;
 }
 
-#description {
-    text-align: center;
-    color: rgba(255,255,255,0.9);
-    font-size: 1.1em;
-    margin-bottom: 30px;
+/* Center content */
+#component-0 {
+    max-width: 900px;
+    margin: auto;
+    padding: 30px;
 }
 
-.input-textarea, .output-markdown {
+/* Inputs & outputs */
+textarea, .output-markdown {
     border-radius: 15px !important;
-    border: 2px solid rgba(255,255,255,0.3) !important;
-    background: rgba(255,255,255,0.95) !important;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+    background: rgba(255,255,255,.95) !important;
 }
 
+/* Buttons */
 button {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
-    border: none !important;
-    border-radius: 10px !important;
-    padding: 12px 30px !important;
+    background: linear-gradient(135deg,#f093fb,#f5576c) !important;
+    border-radius: 12px !important;
     font-weight: 600 !important;
-    font-size: 16px !important;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
-    transition: transform 0.2s !important;
-}
-
-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
-}
-
-.footer {
-    display: none !important;
 }
 """
 
-# Create interface with modern theme
+# =====================
+# Interface
+# =====================
 iface = gr.Interface(
     fn=classify_text,
     inputs=gr.Textbox(
-        lines=8, 
-        placeholder="✍️ Paste or type text here to analyze...",
-        label="Enter Text",
-        elem_id="input-text"
+        lines=8,
+        placeholder="Paste or type text here…",
+        label="Input Text"
     ),
-    outputs=gr.HTML(label="Analysis Result"),
-    title="<div id='title'>🔍 AI Text Classifier</div>",
-    description="<div id='description'>Detect whether text is human-written or AI-generated using advanced NLP<br><span style='font-size: 0.85em; opacity: 0.7; margin-top: 8px; display: inline-block;'>Model by Dergaoui Ayoub</span></div>",
+    outputs=gr.HTML(label="Result"),
+    title="AI Text Classifier",
+    description="Detect whether text is human-written or AI-generated.",
     flagging_mode="never"
 )
 
+# =====================
+# Launch
+# =====================
 iface.launch(
-    theme=gr.themes.Soft(
-        primary_hue="purple",
-        secondary_hue="pink",
-        neutral_hue="slate",
-        font=gr.themes.GoogleFont("Inter")
-    ),
     css=custom_css,
-    share=False
-)
+    share=False,
+    show_footer=False
+)