Update app.py

app.py

@@ -12,7 +12,12 @@ model.eval()
 
 def classify_text(text):
     if not text.strip():
-        return "⚠️ Please enter some text to analyze."
+        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>
+        """
     
     inputs = tokenizer(
         text,
@@ -27,14 +32,49 @@ def classify_text(text):
     
     label = model.config.id2label[pred.item()]
     
-    # Format output with icons and styling
-    icon = "👤" if label.lower() == "human" else "🤖"
-    
-    result = f"""
-    ### {icon} Classification Result
-    
-    **Prediction:** {label}-Written Text
-    """
+    # 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>
+        </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>
+        </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
 
@@ -104,7 +144,7 @@ iface = gr.Interface(
         label="Enter Text",
         elem_id="input-text"
     ),
-    outputs=gr.Markdown(label="Analysis Result"),
+    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</div>",
     theme=gr.themes.Soft(