Update app.py

app.py

@@ -1,10 +1,9 @@
-
-from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import gradio as gr
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import torch
 
+# ====================== MODEL ======================
 model_path = "./best_model"
-
 tokenizer = AutoTokenizer.from_pretrained(model_path)
 model = AutoModelForSequenceClassification.from_pretrained(model_path)
 
@@ -12,30 +11,28 @@ device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 model.to(device)
 model.eval()
 
-
 def predict_sentiment(text):
+    if not text or text.strip() == "":
+        return "Please enter text", "0.00"
+    
     inputs = tokenizer(
         text,
         return_tensors="pt",
         truncation=True,
-        padding=True
+        padding=True,
+        max_length=512
     ).to(device)
-
+    
     with torch.no_grad():
         outputs = model(**inputs)
-
-    probs = torch.softmax(outputs.logits, dim=1)
-
-    pred_id = torch.argmax(probs, dim=1).item()
-    confidence = torch.max(probs).item()
-
-    label = model.config.id2label[pred_id]
-
-    return label, f"{confidence:.2f}"
-
-
-
-
+        probs = torch.softmax(outputs.logits, dim=1)
+        pred_id = torch.argmax(probs, dim=1).item()
+        confidence = torch.max(probs).item()
+        label = model.config.id2label[pred_id]
+    
+    return label, f"{confidence:.2%}"
+
+# ====================== PROFESSIONAL CSS ======================
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
@@ -44,252 +41,154 @@ custom_css = """
     --panel: rgba(255, 255, 255, 0.04);
     --panel-strong: rgba(255, 255, 255, 0.07);
     --border: rgba(255, 255, 255, 0.08);
-
     --primary: #7C3AED;
     --secondary: #22D3EE;
     --text: #E5E7EB;
     --muted: #9CA3AF;
 }
 
-/* GLOBAL */
 body {
     background: radial-gradient(circle at top, #0B1020, #05060A);
     font-family: 'Inter', sans-serif;
 }
 
-/* MAIN CONTAINER */
 .gradio-container {
-    max-width: 1000px !important;
+    max-width: 100% !important;
     margin: auto !important;
-    padding: 40px 20px !important;
+    padding: 40px 20px;
 }
 
-/* MAIN CARD */
+/* Main Card */
 .block {
     background: var(--panel) !important;
     border: 1px solid var(--border) !important;
     border-radius: 24px !important;
-    padding: 32px !important;
-    backdrop-filter: blur(14px);
+    padding: 40px !important;
+    backdrop-filter: blur(12px);
     box-shadow: 0 20px 60px rgba(0,0,0,0.6);
 }
 
-/* TITLE */
+/* Title */
 h1 {
-    font-size: 42px !important;
+    font-size: 46px !important;
     font-weight: 800 !important;
     text-align: center;
-    color: white !important;
-    margin-bottom: 8px;
-    letter-spacing: -0.5px;
+    color: white;
+    letter-spacing: -1px;
 }
-
 h1 span {
-    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    background: linear-gradient(90deg, #7C3AED, #22D3EE);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
-/* SUBTITLE */
+/* Subtitle */
 .subtitle {
     text-align: center;
     color: var(--muted);
-    font-size: 16px;
+    font-size: 17px;
     margin-bottom: 30px;
 }
 
-/* INFO BAR */
-.info-bar {
-    text-align: center;
-    font-size: 13px;
-    color: var(--muted);
-    margin-bottom: 25px;
-    padding: 10px 16px;
-    border-radius: 12px;
-    background: var(--panel-strong);
-    border: 1px solid var(--border);
+/* Button */
+button {
+    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 17px !important;
+    padding: 16px 0 !important;
+    border-radius: 16px !important;
+    width: 100%;
+    margin: 15px 0 25px 0;
+    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
+}
+button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(34, 211, 238, 0.3);
 }
 
-/* INPUT */
+/* Input */
 textarea {
-    background: rgba(0,0,0,0.3) !important;
+    background: rgba(0,0,0,0.35) !important;
     border: 1px solid var(--border) !important;
     border-radius: 16px !important;
     color: var(--text) !important;
-    font-size: 16px !important;
-    padding: 16px !important;
-    min-height: 140px !important;
-    transition: all 0.3s ease;
+    font-size: 16.5px !important;
+    padding: 18px !important;
+    min-height: 160px !important;
 }
-
 textarea:focus {
     border-color: var(--secondary) !important;
-    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
-}
-
-/* BUTTON */
-button {
-    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
-    color: white !important;
-    font-weight: 700 !important;
-    font-size: 16px !important;
-    padding: 14px !important;
-    border-radius: 14px !important;
-    border: none !important;
-    width: 100%;
-    transition: all 0.25s ease;
-    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.25);
-}
-
-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 15px 35px rgba(34, 211, 238, 0.25);
 }
 
-/* OUTPUT LABELS */
+/* Output Labels (Cyan) */
 label {
     color: var(--secondary) !important;
     font-weight: 600 !important;
+    font-size: 15px !important;
 }
 
-/* OUTPUT BOX */
+/* Output Boxes - Subtle Dark */
 .output-text {
     background: rgba(0,0,0,0.35) !important;
     border: 1px solid var(--border) !important;
     border-radius: 16px !important;
-    padding: 18px !important;
+    padding: 20px !important;
     font-size: 18px !important;
     color: white !important;
     font-weight: 600;
     text-align: center;
 }
-
-/* EXAMPLES */
-.gr-examples {
-    margin-top: 20px;
-}
-
-.gr-examples button {
-    background: rgba(255,255,255,0.06) !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    font-weight: 500 !important;
-    border-radius: 10px !important;
-}
-
-.gr-examples button:hover {
-    background: rgba(255,255,255,0.1) !important;
-}
 """
 
-
 examples = [
     ["یہ بہت اچھا پروڈکٹ ہے"],
     ["مجھے یہ بالکل پسند نہیں آیا"],
-    ["یہ ٹھیک تھا"],
     ["زبردست تجربہ تھا"],
-    ["خدمات بہت خراب تھیں"]
+    ["خدمات بہت خراب تھیں"],
+    ["یہ ٹھیک تھا"]
 ]
 
-
 with gr.Blocks(css=custom_css, title="Urdu Sentiment Analysis") as interface:
+    
+    gr.Markdown("# 🇵🇰 Urdu Sentiment <span>Analyzer</span>")
+    gr.Markdown('<p class="subtitle">Fine-tuned mBERT for Accurate Urdu Sentiment Classification</p>')
 
-    # FULL HERO HEADER
-    gr.Markdown("""
-    <div style="
-        width:100%;
-        text-align:center;
-        padding:30px 0 10px 0;
-    ">
-        <h1 style="
-            font-size:46px;
-            font-weight:900;
-            margin:0;
-            color:white;
-        ">
-            🇵🇰 Urdu Sentiment <span style="
-                background: linear-gradient(90deg,#7C3AED,#22D3EE);
-                -webkit-background-clip:text;
-                -webkit-text-fill-color:transparent;
-            ">Analyzer</span>
-        </h1>
-
-        <p style="
-            color:#9CA3AF;
-            font-size:16px;
-            margin-top:10px;
-        ">
-            Production-grade NLP system for Urdu text understanding
-        </p>
-    </div>
-    """)
-
-    # FULL WIDTH MAIN AREA (NO CONDENSED BOX FEEL)
     with gr.Row():
-
-        # INPUT AREA (FULL HEIGHT PANEL STYLE)
-        with gr.Column(scale=6):
-
+        with gr.Column(scale=7):
             text_input = gr.Textbox(
-                label="Input Text",
+                label="Enter Urdu Text",
                 placeholder="یہاں اردو جملہ لکھیں...",
-                lines=10,
+                lines=9
             )
-
+            
             analyze_btn = gr.Button("Analyze Sentiment")
-
+            
             gr.Examples(
                 examples=examples,
                 inputs=text_input,
-                label="Examples"
+                label="Example Sentences"
             )
 
-        # OUTPUT AREA (DARK DASHBOARD PANEL)
-        with gr.Column(scale=4):
-
-            gr.Markdown("### Prediction")
-
+        with gr.Column(scale=5):
+            gr.Markdown("### Prediction Results")
+            
             sentiment = gr.Textbox(
-                label="Sentiment Result",
+                label="Predicted Sentiment",
                 interactive=False,
                 elem_classes="output-text"
             )
-
+            
             confidence = gr.Textbox(
                 label="Confidence Score",
                 interactive=False,
                 elem_classes="output-text"
             )
 
-            gr.Markdown("""
-            <div style="
-                margin-top:20px;
-                padding:16px;
-                border-radius:16px;
-                background: rgba(255,255,255,0.03);
-                border: 1px solid rgba(255,255,255,0.08);
-                color:#9CA3AF;
-                font-size:13px;
-                line-height:1.6;
-            ">
-            ⚡ Model uses fine-tuned mBERT architecture<br>
-            📊 Output is softmax probability distribution<br>
-            🧠 Trained on Urdu sentiment dataset
-            </div>
-            """)
-
-    # FULL WIDTH FOOTER
+    # Footer
     gr.Markdown("""
-    <div style="
-        margin-top:40px;
-        padding:25px;
-        text-align:center;
-        color:#6B7280;
-        font-size:13px;
-        border-top:1px solid rgba(255,255,255,0.08);
-    ">
-        Built with Transformers + Gradio • Deployed NLP Demo •
-        <b>Urdu Sentiment AI System</b>
+    <div style="text-align:center; margin-top:50px; color:#6B7280; font-size:14px;">
+        Built with Transformers + Gradio • Production-ready Urdu NLP Demo
     </div>
     """)