Update app.py

app.py

@@ -1,138 +1,173 @@
 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,#f5576c);
-                    border-radius:20px; color:white;">
-            <h2>Oops!</h2>
-            <p>Please enter some text to analyze.</p>
+        <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>
         """
-
+    
     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":
-        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>
+        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>
         </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:
-        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>
+        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>
         </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 (NO header / NO footer)
-# =====================
+# Custom CSS for modern look
 custom_css = """
-/* 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;
-}
-
-/* Remove reserved spacing */
-body {
-    margin: 0 !important;
-    padding: 0 !important;
+#component-0 {
+    max-width: 900px;
+    margin: auto;
+    padding: 20px;
 }
 
-/* App container */
 .gradio-container {
-    min-height: 100vh !important;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    font-family: Inter, sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
-/* Center content */
-#component-0 {
-    max-width: 900px;
-    margin: auto;
-    padding: 30px;
+#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);
+}
+
+#description {
+    text-align: center;
+    color: rgba(255,255,255,0.9);
+    font-size: 1.1em;
+    margin-bottom: 30px;
 }
 
-/* Inputs & outputs */
-textarea, .output-markdown {
+.input-textarea, .output-markdown {
     border-radius: 15px !important;
-    background: rgba(255,255,255,.95) !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;
 }
 
-/* Buttons */
 button {
-    background: linear-gradient(135deg,#f093fb,#f5576c) !important;
-    border-radius: 12px !important;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 12px 30px !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;
+}
+
+.gradio-header,
+.gradio-toolbar,
+header,
+#top-bar,
+.svelte-1ipelgc,
+.svelte-1xw6x5s {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
 }
 """
 
-# =====================
-# Interface
-# =====================
+# Create interface with modern theme
 iface = gr.Interface(
     fn=classify_text,
     inputs=gr.Textbox(
-        lines=8,
-        placeholder="Paste or type text here…",
-        label="Input Text"
+        lines=8, 
+        placeholder="✍️ Paste or type text here to analyze...",
+        label="Enter Text",
+        elem_id="input-text"
     ),
-    outputs=gr.HTML(label="Result"),
-    title="AI Text Classifier",
-    description="Detect whether text is human-written or AI-generated.",
+    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>",
     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
+)