Update app.py

app.py

@@ -5,50 +5,41 @@ from transformers import (
     AutoModelForSequenceClassification
 )
 
-
 MODEL_NAME = "duclo90/results"
 tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
 model = AutoModelForSequenceClassification.from_pretrained(MODEL_NAME)
 model.eval()
 
-
 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;">
+        <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 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;">
+        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;">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;">
+            <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>
@@ -64,18 +55,12 @@ def classify_text(text):
         </style>
         """
     else:
-        return """
-        <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;">
+        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;">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;">
+            <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>
@@ -90,36 +75,11 @@ def classify_text(text):
             }
         </style>
         """
+    
+    return result
 
-
+# Custom CSS for modern look
 custom_css = """
-/* Remove Gradio top bar, API button, settings, footer */
-header,
-footer,
-.gradio-header,
-.gradio-footer,
-.gradio-toolbar,
-#top-bar,
-[class*="header"],
-[class*="toolbar"],
-[class*="footer"],
-.svelte-1ipelgc,
-.svelte-1xw6x5s {
-    display: none !important;
-    height: 0 !important;
-    min-height: 0 !important;
-    visibility: hidden !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-/* Remove leftover spacing */
-body {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-/* Your existing styles */
 #component-0 {
     max-width: 900px;
     margin: auto;
@@ -129,7 +89,6 @@ body {
 .gradio-container {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     font-family: 'Inter', sans-serif;
-    min-height: 100vh !important;
 }
 
 #title {
@@ -138,6 +97,7 @@ body {
     font-size: 2.5em;
     font-weight: 700;
     margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
 }
 
 #description {
@@ -151,31 +111,45 @@ body {
     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;
 }
 
 button {
     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;
+}
+"""
+
+# Create interface with modern theme
 iface = gr.Interface(
     fn=classify_text,
     inputs=gr.Textbox(
-        lines=8,
+        lines=8, 
         placeholder="✍️ Paste or type text here to analyze...",
-        label="Enter Text"
+        label="Enter Text",
+        elem_id="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;'>Model by Dergaoui Ayoub</span></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"
 )
 
-
 iface.launch(
     theme=gr.themes.Soft(
         primary_hue="purple",
@@ -185,4 +159,4 @@ iface.launch(
     ),
     css=custom_css,
     share=False
-)
+)