Update app.py

Major update on the UI, Color schema, functional theme change button.

app.py

@@ -1,1041 +1,422 @@
-import os
-import torch
-import numpy as np
-import gradio as gr
-from transformers import AutoTokenizer, AutoModelForSequenceClassification
-
-
-# === Model setup ===
-MODEL_NAME = "ourafla/mental-health-bert-finetuned"
-id2label = {0: "Anxiety", 1: "Depression", 2: "Normal", 3: "Suicidal"}
-hf_token = os.getenv("HUGGINGFACE_HUB_TOKEN")
-
-
-tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME, token=hf_token)
-model = AutoModelForSequenceClassification.from_pretrained(
-    MODEL_NAME, token=hf_token, output_attentions=True
-)
-model.eval()
-
-
-# === Core function (Unchanged) ===
-def analyze_text(text):
-    text = text.strip()
-    if not text or len(text) < 5:
-        error_html = """
-        <div style='text-align:center; background: rgba(239, 68, 68, 0.1); 
-                    color: #fca5a5; padding: 20px; border-radius: 12px; 
-                    border: 2px solid rgba(239, 68, 68, 0.3); font-size: 1.1em;'>
-            <div style='font-size: 2em; margin-bottom: 8px;'>⚠️</div>
-            <div style='font-weight: 600;'>Please enter more meaningful text</div>
-            <div style='margin-top: 8px; font-size: 0.9em; opacity: 0.9;'>
-                (at least 5 characters required)
-            </div>
-        </div>
-        """
-        return error_html, "N/A"
-
-    inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
-    with torch.no_grad():
-        outputs = model(**inputs)
-
-    probs = torch.softmax(outputs.logits, dim=-1)[0]
-    label_idx = torch.argmax(probs).item()
-    label = id2label[label_idx]
-    confidence = float(probs[label_idx])
-    
-    # Get all probabilities for statistics
-    all_probs = {id2label[i]: float(probs[i]) for i in range(len(id2label))}
-    sorted_probs = sorted(all_probs.items(), key=lambda x: x[1], reverse=True)
-
-    try:
-        attn = outputs.attentions[-1]
-        scores = attn.mean(dim=1).mean(dim=1)[0]
-        scores = scores / (scores.max() + 1e-8)
-        tokens = tokenizer.convert_ids_to_tokens(inputs["input_ids"][0])
-        top = torch.argsort(scores)[-5:].tolist()[::-1]
-        top_tokens = [tokens[i] for i in top if tokens[i] not in ["[CLS]", "[SEP]", "[PAD]"]]
-        explanation = ", ".join(top_tokens[:3])
-    except Exception:
-        explanation = "Explanation not available."
-
-    # Determine status class and emoji based on label
-    status_map = {
-        "Anxiety": ("status-anxiety", "😰", "#fbbf24"),
-        "Depression": ("status-depression", "😔", "#3b82f6"),
-        "Normal": ("status-normal", "😊", "#22c55e"),
-        "Suicidal": ("status-suicidal", "⚠️", "#ef4444")
-    }
-    status_class, emoji, status_color = status_map.get(label, ("", "📊", "#6b7280"))
-    
-    # Create confidence bar
-    confidence_percent = int(confidence * 100)
-    confidence_bar_width = confidence_percent
-    
-    # Build probability breakdown HTML
-    prob_breakdown = ""
-    for prob_label, prob_value in sorted_probs:
-        prob_pct = int(prob_value * 100)
-        bar_color = status_map.get(prob_label, ("", "", "#6b7280"))[2]
-        prob_breakdown += f"""
-        <div style='margin: 12px 0;'>
-            <div style='display: flex; justify-content: space-between; margin-bottom: 6px;'>
-                <span style='color: #e2e8f0; font-weight: 500;'>{prob_label}</span>
-                <span style='color: #93c5fd; font-weight: 600;'>{prob_pct}%</span>
-            </div>
-            <div style='width: 100%; background: rgba(15, 23, 42, 0.5); 
-                        border-radius: 8px; height: 8px; overflow: hidden;'>
-                <div style='background: {bar_color}; height: 100%; width: {prob_pct}%; 
-                            transition: width 0.5s ease; border-radius: 8px;'></div>
-            </div>
-        </div>
-        """
-    
-    summary_html = f"""
-    <div class='prediction-result {status_class}'>
-        <div style='font-size: 3em; margin-bottom: 16px; animation: pulse 2s ease-in-out infinite;'>{emoji}</div>
-        <div class='prediction-label'>{label}</div>
-        <div class='prediction-confidence'>
-            Confidence: {confidence_percent}%
-        </div>
-        <div style='margin-top: 20px; width: 100%; background: rgba(15, 23, 42, 0.5); 
-                    border-radius: 10px; height: 14px; overflow: hidden;'>
-            <div style='background: linear-gradient(90deg, {status_color}, {status_color}dd); 
-                        height: 100%; width: {confidence_bar_width}%; 
-                        transition: width 0.5s ease; border-radius: 10px; 
-                        box-shadow: 0 0 10px {status_color}40;'></div>
-        </div>
-        <div style='margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(148, 163, 184, 0.2);'>
-            <div style='font-size: 0.95em; color: #94a3b8; margin-bottom: 12px; font-weight: 600;'>
-                Probability Breakdown:
-            </div>
-            {prob_breakdown}
-        </div>
-        <div style='margin-top: 16px; font-size: 0.85em; color: #64748b; font-style: italic;'>
-            Analysis based on BERT-based sentiment classification
-        </div>
-    </div>
-    """
-    return summary_html, explanation
-
-
-
-# === ENHANCED GRADIO INTERFACE WITH MODERN UI ===
-with gr.Blocks(
-    theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="gray",
-        neutral_hue="slate",
-    ),
-    css="""
-/* === 1. Main Container: Modern Gradient Background === */
-.gradio-container {
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
-  background-attachment: fixed;
-  color: #F9FAFB;
-  width: 100%;
-  min-height: 100vh;
-  padding: 2rem;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-/* App panel with glassmorphism effect */
-.gradio-container > .wrap {
-  max-width: 1000px;
-  margin: 0 auto;
-  background: rgba(30, 41, 59, 0.85);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  padding: 3rem;
-  border: 1px solid rgba(148, 163, 184, 0.1);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
-              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-}
-
-/* === 2. Enhanced Typography === */
-.title-container {
-  text-align: center;
-  width: 100%;
-  margin-bottom: 1rem;
-  position: relative;
-}
-
-.title-container::after {
-  content: '';
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80px;
-  height: 4px;
-  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-  border-radius: 2px;
-}
-
-h1 {
-  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 900;
-  font-size: 2.5em;
-  letter-spacing: -0.5px;
-  margin-bottom: 0.5rem;
-  text-shadow: 0 0 30px rgba(96, 165, 250, 0.3);
-}
-
-.subtitle {
-  color: #cbd5e1;
-  font-size: 1.15em;
-  margin: 2rem 0 2.5rem 0;
-  text-align: center;
-  line-height: 1.6;
-  font-weight: 400;
-}
-
-.subtitle b {
-  color: #93c5fd;
-  font-weight: 600;
-}
-
-/* === 3. Enhanced Input Components === */
-textarea, .gr-textbox, .gr-input textarea {
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
-  border: 2px solid rgba(148, 163, 184, 0.2) !important;
-  border-radius: 16px !important;
-  color: #f1f5f9 !important;
-  padding: 20px !important;
-  font-size: 1.05em !important;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-  line-height: 1.7 !important;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
-              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
-  resize: vertical !important;
-  min-height: 120px !important;
-}
-
-textarea::placeholder, .gr-textbox::placeholder {
-  color: #64748b !important;
-  opacity: 0.7 !important;
-  font-style: italic !important;
-}
-
-textarea:hover, .gr-textbox:hover, .gr-input textarea:hover {
-  border-color: rgba(59, 130, 246, 0.4) !important;
-  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15),
-              inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
-  transform: translateY(-1px) !important;
-}
-
-textarea:focus, .gr-textbox:focus, .gr-input textarea:focus {
-  border-color: #3b82f6 !important;
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15),
-              0 8px 24px rgba(59, 130, 246, 0.3),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
-  outline: none !important;
-  transform: translateY(-2px) scale(1.01) !important;
-  animation: inputGlow 2s ease-in-out infinite !important;
-}
-
-@keyframes inputGlow {
-  0%, 100% {
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15),
-                0 8px 24px rgba(59, 130, 246, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  }
-  50% {
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25),
-                0 8px 24px rgba(59, 130, 246, 0.4),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  }
-}
-
-.gr-textbox label, .gr-input label {
-  color: #e2e8f0 !important;
-  font-weight: 700 !important;
-  font-size: 1.15em !important;
-  margin-bottom: 1rem !important;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
-  letter-spacing: 0.3px !important;
-}
-
-/* === 4. Enhanced Button === */
-button.primary {
-  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%) !important;
-  background-size: 200% 200% !important;
-  color: #ffffff !important;
-  border-radius: 14px !important;
-  border: none !important;
-  font-weight: 800 !important;
-  font-size: 1.15em !important;
-  padding: 18px 36px !important;
-  width: 100% !important;
-  margin-top: 1.5rem !important;
-  cursor: pointer !important;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4),
-              0 0 0 0 rgba(59, 130, 246, 0.4),
-              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-  text-transform: none !important;
-  letter-spacing: 0.5px !important;
-  position: relative !important;
-  overflow: hidden !important;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
-  animation: buttonShimmer 3s ease-in-out infinite !important;
-}
-
-button.primary::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
-}
-
-button.primary:hover::before {
-  left: 100%;
-}
-
-@keyframes buttonShimmer {
-  0%, 100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-button.primary:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%) !important;
-  background-size: 200% 200% !important;
-  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6),
-              0 0 0 4px rgba(59, 130, 246, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
-  transform: translateY(-3px) scale(1.02) !important;
-  animation: buttonShimmer 2s ease-in-out infinite !important;
-}
-
-button.primary:active {
-  transform: translateY(-1px) scale(0.98) !important;
-  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.5),
-              0 0 0 2px rgba(59, 130, 246, 0.3) !important;
-  transition: all 0.1s ease !important;
-}
-
-button.primary:disabled {
-  opacity: 0.6 !important;
-  cursor: not-allowed !important;
-  transform: none !important;
-}
-
-/* Example Buttons */
-button.secondary {
-  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
-  color: #cbd5e1 !important;
-  border: 2px solid rgba(148, 163, 184, 0.3) !important;
-  border-radius: 12px !important;
-  font-weight: 600 !important;
-  padding: 10px 20px !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-}
-
-button.secondary:hover {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%) !important;
-  border-color: rgba(59, 130, 246, 0.5) !important;
-  color: #60a5fa !important;
-  transform: translateY(-2px) !important;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
-}
-
-button.secondary:active {
-  transform: translateY(0) scale(0.98) !important;
-}
-
-/* === 5. Enhanced Output Cards === */
-.output-card {
-  background: rgba(15, 23, 42, 0.6) !important;
-  border: 2px solid rgba(148, 163, 184, 0.15) !important;
-  border-radius: 12px !important;
-  padding: 16px !important;
-  color: #f1f5f9 !important;
-  font-size: 1.05em !important;
-  transition: all 0.3s ease !important;
-}
-
-.output-card-html {
-  background: rgba(15, 23, 42, 0.6) !important;
-  border-radius: 12px !important;
-  padding: 20px !important;
-  border: 2px solid rgba(148, 163, 184, 0.15) !important;
-}
-
-/* Prediction result styling */
-.prediction-result {
-  text-align: center;
-  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
-  background-size: 200% 200%;
-  color: #f9fafb;
-  border-radius: 20px;
-  padding: 32px;
-  border: 2px solid rgba(59, 130, 246, 0.3);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
-              0 0 0 1px rgba(255, 255, 255, 0.05) inset,
-              0 0 60px rgba(59, 130, 246, 0.1);
-  font-size: 1.1em;
-  margin: 10px 0;
-  position: relative;
-  overflow: hidden;
-  animation: resultAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1),
-             gradientShift 8s ease infinite;
-}
-
-.prediction-result::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
-  animation: rotate 20s linear infinite;
-  pointer-events: none;
-}
-
-@keyframes resultAppear {
-  0% {
-    opacity: 0;
-    transform: scale(0.9) translateY(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.prediction-label {
-  font-size: 1.5em;
-  font-weight: 800;
-  margin: 12px 0;
-  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.prediction-confidence {
-  font-size: 1.2em;
-  color: #93c5fd;
-  font-weight: 600;
-  margin-top: 8px;
-}
-
-/* Status indicators */
-.status-anxiety { border-color: rgba(251, 191, 36, 0.4) !important; }
-.status-depression { border-color: rgba(59, 130, 246, 0.4) !important; }
-.status-normal { border-color: rgba(34, 197, 94, 0.4) !important; }
-.status-suicidal { border-color: rgba(239, 68, 68, 0.4) !important; }
-
-/* === 6. Enhanced Footer === */
-.app-credits {
-  text-align: center;
-  color: #94a3b8;
-  font-size: 0.95em;
-  margin-top: 40px;
-  border-top: 1px solid rgba(148, 163, 184, 0.2);
-  padding-top: 24px;
-  line-height: 1.8;
-}
-
-.app-credits a {
-  color: #60a5fa;
-  text-decoration: none;
-  font-weight: 600;
-  transition: all 0.2s ease;
-}
-
-.app-credits a:hover {
-  color: #93c5fd;
-  text-decoration: underline;
-}
-
-footer {
-  width: 100% !important;
-  text-align: center !important;
-  background: transparent !important;
-  color: #94a3b8 !important;
-  padding: 20px 0 0 0 !important;
-  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
-  margin-top: 30px !important;
-}
-
-footer .built-with {
-  display: none !important;
-}
-
-footer .duplicate-button {
-  background: rgba(30, 41, 59, 0.8) !important;
-  color: #e2e8f0 !important;
-  border: 1px solid rgba(148, 163, 184, 0.3) !important;
-  border-radius: 8px !important;
-  padding: 8px 16px !important;
-  text-decoration: none !important;
-  font-weight: 600 !important;
-  margin: 0 6px !important;
-  transition: all 0.2s ease !important;
-}
-
-footer .duplicate-button:hover {
-  background: rgba(59, 130, 246, 0.2) !important;
-  border-color: rgba(59, 130, 246, 0.4) !important;
-  color: #93c5fd !important;
-}
-
-/* === 7. Loading States === */
-.gr-loading {
-  opacity: 0.7;
-}
-
-/* === 8. Mobile Responsive === */
-@media (max-width: 768px) {
-  .gradio-container {
-    padding: 1rem;
-  }
-  
-  .gradio-container > .wrap {
-    padding: 2rem 1.5rem;
-    border-radius: 16px;
-  }
-  
-  h1 {
-    font-size: 2em;
-  }
-  
-  .subtitle {
-    font-size: 1em;
-    margin: 1.5rem 0 2rem 0;
-  }
-  
-  button.primary {
-    padding: 14px 24px !important;
-    font-size: 1em !important;
-  }
-}
-
-@media (max-width: 480px) {
-  h1 {
-    font-size: 1.75em;
-  }
-  
-  .gradio-container > .wrap {
-    padding: 1.5rem 1rem;
-  }
-}
-
-/* === 9. Smooth Animations === */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-    filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.5));
-  }
-  50% {
-    transform: scale(1.15);
-    opacity: 0.95;
-    filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.8));
-  }
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-@keyframes gradientShift {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.output-card, .output-card-html {
-  animation: fadeIn 0.4s ease-out;
-}
-
-/* === 11. Container-based Layout System === */
-.main-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.content-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-  width: 100%;
-}
-
-.input-container {
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.5) 100%);
-  border-radius: 20px;
-  padding: 2.5rem;
-  border: 2px solid rgba(148, 163, 184, 0.1);
-  backdrop-filter: blur(15px);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  position: relative;
-  overflow: hidden;
-}
-
-.input-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
-  transition: left 0.6s;
-}
-
-.input-container:hover::before {
-  left: 100%;
-}
-
-.input-container:hover {
-  border-color: rgba(59, 130, 246, 0.4);
-  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
-}
-
-.output-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-  margin-top: 1rem;
-}
-
-.result-container {
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.5) 100%);
-  border-radius: 20px;
-  padding: 2rem;
-  border: 2px solid rgba(148, 163, 184, 0.1);
-  backdrop-filter: blur(15px);
-  animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  position: relative;
-  overflow: hidden;
-}
-
-.result-container::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
-  background-size: 200% 100%;
-  animation: gradientShift 3s ease infinite;
-}
-
-.stats-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-
-.stat-card {
-  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
-  border-radius: 14px;
-  padding: 1.5rem;
-  border: 2px solid rgba(148, 163, 184, 0.15);
-  text-align: center;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  position: relative;
-  overflow: hidden;
-}
-
-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
-  transition: left 0.5s;
-}
-
-.stat-card:hover::before {
-  left: 100%;
-}
-
-.stat-card:hover {
-  transform: translateY(-6px) scale(1.05);
-  border-color: rgba(59, 130, 246, 0.5);
-  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.3),
-              0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-.stat-label {
-  font-size: 0.85em;
-  color: #94a3b8;
-  margin-bottom: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.stat-value {
-  font-size: 1.5em;
-  font-weight: 700;
-  color: #60a5fa;
-}
-
-/* Tab Container */
-.tab-container {
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.5) 100%);
-  border-radius: 20px;
-  padding: 2rem;
-  margin-top: 1rem;
-  border: 2px solid rgba(148, 163, 184, 0.1);
-  backdrop-filter: blur(15px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-  animation: fadeIn 0.5s ease-out;
-}
-
-/* Enhanced Tab Styling */
-.tab-nav {
-  border-bottom: 2px solid rgba(148, 163, 184, 0.1) !important;
-  margin-bottom: 1.5rem !important;
-}
-
-.tab-nav button {
-  background: transparent !important;
-  border: none !important;
-  color: #94a3b8 !important;
-  padding: 12px 24px !important;
-  font-weight: 600 !important;
-  transition: all 0.3s ease !important;
-  border-radius: 8px 8px 0 0 !important;
-  position: relative !important;
-}
-
-.tab-nav button:hover {
-  color: #60a5fa !important;
-  background: rgba(59, 130, 246, 0.1) !important;
-}
-
-.tab-nav button.selected {
-  color: #60a5fa !important;
-  background: rgba(59, 130, 246, 0.15) !important;
-}
-
-.tab-nav button.selected::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-  border-radius: 2px 2px 0 0;
-  animation: gradientShift 3s ease infinite;
-}
-
-.example-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.example-card {
-  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.7) 100%);
-  border-radius: 14px;
-  padding: 1.25rem;
-  border: 2px solid rgba(148, 163, 184, 0.15);
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.example-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
-  transition: left 0.5s;
-}
-
-.example-card:hover::before {
-  left: 100%;
-}
-
-.example-card:hover {
-  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
-  border-color: rgba(59, 130, 246, 0.5);
-  transform: translateY(-4px) scale(1.02);
-  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3),
-              0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-.example-card:active {
-  transform: translateY(-2px) scale(0.98);
-  transition: all 0.1s ease;
-}
-
-.example-label {
-  font-size: 0.75em;
-  color: #60a5fa;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  text-transform: uppercase;
-}
-
-.example-text {
-  font-size: 0.9em;
-  color: #cbd5e1;
-  line-height: 1.5;
-  font-style: italic;
-}
-
-/* === 10. Scrollbar Styling === */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.5);
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(59, 130, 246, 0.5);
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(59, 130, 246, 0.7);
-}
-""") as demo:
-
-    # Header Section
-    gr.HTML("""
-        <div class='title-container'>
-            <h1>🧠 Mental Health Text Analyzer</h1>
-        </div>
-    """)
-    
-    gr.HTML("""
-        <div class='subtitle'>
-            Analyze text to detect mental health indicators: 
-            <b>Anxiety</b>, <b>Depression</b>, <b>Normal</b>, or <b>Suicidal</b> tendencies.
-            <br><br>
-            <span style="font-size: 0.9em; color: #94a3b8;">
-                Powered by advanced BERT-based NLP models for accurate sentiment analysis.
-            </span>
-        </div>
-    """)
-
-    # Main Container with Tabs
-    with gr.Tabs() as tabs:
-        with gr.Tab("🔍 Analyze", id="analyze_tab"):
-            # Input Container
-            gr.HTML("""
-                <div class='input-container'>
-                    <div style='font-size: 1.1em; color: #e2e8f0; margin-bottom: 1rem; font-weight: 600;'>
-                        📝 Enter Your Text
-                    </div>
-                </div>
-            """)
-            
-            text_input = gr.Textbox(
-                label="",
-                placeholder="Example: I've been feeling overwhelmed lately and struggling to find motivation...",
-                lines=6,
-                value="",
-                container=True,
-            )
-
-            # Example Cards Container
-            with gr.Row():
-                example_anxiety = gr.Button("😰 Anxiety Example", variant="secondary", size="sm", scale=1)
-                example_depression = gr.Button("😔 Depression Example", variant="secondary", size="sm", scale=1)
-                example_normal = gr.Button("😊 Normal Example", variant="secondary", size="sm", scale=1)
-            
-            gr.HTML("""
-                <div class='example-container'>
-                    <div class='example-card'>
-                        <div class='example-label'>💡 Try Example Texts</div>
-                        <div class='example-text'>Click the buttons above to load example texts for different mental health indicators</div>
-                    </div>
-                </div>
-            """)
-            
-            # Example text handlers
-            example_anxiety.click(
-                fn=lambda: "I feel anxious about everything lately. My heart races and I can't stop worrying about the future.",
-                outputs=text_input
-            )
-            example_depression.click(
-                fn=lambda: "I've been feeling really down and hopeless. Nothing seems to bring me joy anymore.",
-                outputs=text_input
-            )
-            example_normal.click(
-                fn=lambda: "I'm doing well today! Had a great day at work and feeling positive about the week ahead.",
-                outputs=text_input
-            )
-
-            # Analyze Button
-            analyze_btn = gr.Button("🔍 Analyze Text", elem_classes="primary")
-
-            # Output Container
-            gr.HTML("""
-                <div class='output-container'>
-                    <div class='result-container'>
-                        <div style='font-size: 1.1em; color: #e2e8f0; margin-bottom: 1rem; font-weight: 600;'>
-                            📊 Analysis Results
-                        </div>
-                    </div>
-                </div>
-            """)
-            
-            msg_box = gr.HTML(elem_classes="output-card-html", value="", container=True)
-            
-            expl_output = gr.Textbox(
-                label="🔑 Key Phrases & Explanation",
-                interactive=False,
-                elem_classes="output-card",
-                placeholder="Analysis results will appear here...",
-                container=True
-            )
-
-        with gr.Tab("ℹ️ About", id="about_tab"):
-            gr.HTML("""
-                <div class='tab-container'>
-                    <h2 style='color: #60a5fa; margin-bottom: 1.5rem;'>About This Tool</h2>
-                    <div style='color: #cbd5e1; line-height: 1.8;'>
-                        <p style='margin-bottom: 1rem;'>
-                            This Mental Health Text Analyzer uses advanced BERT-based natural language processing 
-                            to analyze text and detect potential mental health indicators.
-                        </p>
-                        <h3 style='color: #93c5fd; margin-top: 1.5rem; margin-bottom: 0.75rem;'>Detection Categories:</h3>
-                        <ul style='margin-left: 1.5rem; margin-bottom: 1rem;'>
-                            <li><b style='color: #fbbf24;'>Anxiety:</b> Signs of worry, nervousness, or excessive concern</li>
-                            <li><b style='color: #3b82f6;'>Depression:</b> Indicators of sadness, hopelessness, or low mood</li>
-                            <li><b style='color: #22c55e;'>Normal:</b> Healthy, positive, or neutral emotional state</li>
-                            <li><b style='color: #ef4444;'>Suicidal:</b> Warning signs of self-harm or suicidal thoughts</li>
-                        </ul>
-                        <p style='margin-top: 1.5rem; font-size: 0.9em; color: #94a3b8;'>
-                            <b>Note:</b> This tool is for informational purposes only and should not replace 
-                            professional mental health advice. If you're experiencing a mental health crisis, 
-                            please contact a mental health professional or emergency services.
-                        </p>
-                    </div>
-                </div>
-            """)
-
-    # Event Handler
-    analyze_btn.click(
-        fn=analyze_text,
-        inputs=text_input,
-        outputs=[msg_box, expl_output],
-    )
-
-    # Credits Footer
-    gr.Markdown(
-        """
-        <div class='app-credits'>
-        <p>
-            Built with <a href="https://huggingface.co/transformers" target="_blank">🤗 Transformers</a> 
-            & <a href="https://gradio.app" target="_blank">Gradio</a>
-        </p>
-        <p>
-            Model by <a href="https://huggingface.co/ourafla" target="_blank">Priyangshu Mukherjee</a>
-        </p>
-        </div>
-        """,
-        elem_classes="app-credits"
-    )
-
-
-if __name__ == "__main__":
-    print("\n" + "="*60)
-    print("🧠 Mental Health Text Analyzer - Starting Server...")
-    print("="*60)
-    print("\n📌 Access the app at:")
-    print("   → http://localhost:7860")
-    print("   → http://127.0.0.1:7860")
-    print("\n⏳ Loading model (this may take a moment on first run)...")
-    print("="*60 + "\n")
-    
-    demo.launch(
-        server_name="0.0.0.0",  # Allow access from all network interfaces
-        server_port=7860,        # Default Gradio port
-        share=False,             # Set to True if you want a public link
-        show_error=True,         # Show errors in the UI
-        inbrowser=True          # Automatically open browser
-    )
+import os
+import torch
+import gradio as gr
+from transformers import AutoTokenizer, AutoModelForSequenceClassification
+
+# === 1. Model Setup ===
+MODEL_NAME = "ourafla/mental-health-bert-finetuned"
+hf_token = os.getenv("HUGGINGFACE_HUB_TOKEN")
+
+print("⏳ Loading model... this may take a few seconds.")
+try:
+    tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME, token=hf_token)
+    model = AutoModelForSequenceClassification.from_pretrained(
+        MODEL_NAME, token=hf_token, output_attentions=True
+    )
+    model.eval()
+    print("✅ Model loaded successfully.")
+except Exception as e:
+    print(f"❌ Error loading model: {e}")
+    tokenizer = None
+    model = None
+
+id2label = {0: "Anxiety", 1: "Depression", 2: "Normal", 3: "Suicidal"}
+
+# === 2. CSS & THEME VARIABLES ===
+# This JS toggles the 'dark' class on the body element
+js_func = """
+function toggleTheme() {
+    const body = document.querySelector('body');
+    if (body.classList.contains('dark')) {
+        body.classList.remove('dark');
+    } else {
+        body.classList.add('dark');
+    }
+}
+"""
+
+CUSTOM_CSS = """
+/* === COLOR VARIABLES === */
+:root {
+    /* Light Mode (Default) */
+    --bg-app: #F3F4F6;
+    --bg-card: #FFFFFF;
+    --bg-input: #F9FAFB;
+    --border-color: #E5E7EB;
+    --text-main: #111827;
+    --text-sub: #4B5563;
+    --primary: #2563EB;
+    --primary-hover: #1D4ED8;
+    --accent-bg: #EFF6FF;
+    
+    /* API Modal Specifics - Light */
+    --modal-bg: #FFFFFF;
+    --code-bg: #F3F4F6;
+    --code-text: #1F2937;
+}
+
+body.dark {
+    /* Dark Mode */
+    --bg-app: #0B0F19;         /* Very dark blue/black */
+    --bg-card: #111827;        /* Dark Slate */
+    --bg-input: #1F2937;       /* Darker Slate */
+    --border-color: #374151;   /* Medium Gray */
+    --text-main: #F9FAFB;      /* Almost White */
+    --text-sub: #D1D5DB;       /* Light Gray */
+    --primary: #3B82F6;        /* Bright Blue */
+    --primary-hover: #60A5FA;
+    --accent-bg: #1E293B;
+
+    /* API Modal Specifics - Dark */
+    --modal-bg: #111827;
+    --code-bg: #020617;
+    --code-text: #E2E8F0;
+}
+
+/* Global Background Application */
+body, .gradio-container {
+    background-color: var(--bg-app) !important;
+    color: var(--text-main) !important;
+    transition: background-color 0.3s, color 0.3s;
+    font-family: 'Inter', system-ui, sans-serif !important;
+}
+
+/* === MAIN COMPONENT STYLES === */
+
+/* Card Container */
+.main-card {
+    background-color: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 16px !important;
+    padding: 32px !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+    max-width: 900px !important;
+    margin: 20px auto !important;
+}
+
+/* Header & Typography */
+h1 {
+    color: var(--text-main) !important;
+    font-weight: 800 !important;
+    text-align: center;
+}
+
+.subtitle {
+    color: var(--text-sub) !important;
+    text-align: center;
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+}
+
+/* Theme Toggle Button */
+.theme-btn {
+    position: absolute !important;
+    top: 20px !important;
+    right: 20px !important;
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-main) !important;
+    border-radius: 50% !important;
+    width: 40px !important;
+    height: 40px !important;
+    padding: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 1.2rem !important;
+    cursor: pointer !important;
+    z-index: 100 !important;
+}
+
+/* Tabs */
+.tabs {
+    border-bottom: 2px solid var(--border-color) !important;
+    background: transparent !important;
+    margin-bottom: 24px !important;
+}
+.tab-nav button {
+    color: var(--text-sub) !important;
+    font-weight: 600 !important;
+}
+.tab-nav button.selected {
+    color: var(--primary) !important;
+    border-bottom-color: var(--primary) !important;
+}
+
+/* Input Fields */
+textarea {
+    background-color: var(--bg-input) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-main) !important;
+    border-radius: 12px !important;
+}
+textarea::placeholder {
+    color: var(--text-sub) !important;
+    opacity: 0.7;
+}
+
+/* Read-only Textbox (Explanation) */
+textarea:read-only {
+    background-color: var(--accent-bg) !important;
+    border-color: var(--border-color) !important;
+}
+
+/* Action Button */
+.analyze-btn {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
+    color: white !important;
+    font-weight: 700 !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+}
+
+/* Example Chips */
+.example-btn {
+    background-color: var(--bg-card) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-main) !important;
+    border-radius: 99px !important;
+}
+.example-btn:hover {
+    border-color: var(--primary) !important;
+    color: var(--primary) !important;
+}
+
+/* About Text */
+.about-text p, .about-text li {
+    color: var(--text-sub) !important;
+}
+.about-text h3, .about-text b {
+    color: var(--text-main) !important;
+}
+
+/* === API DOCUMENTATION MODAL FIXES === */
+/* Force the API Modal to respect our theme variables */
+.gradio-container div[role="dialog"], 
+div[data-testid="settings-dialog"],
+.modal {
+    background-color: var(--modal-bg) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+/* Text inside modal */
+div[role="dialog"] h2, div[role="dialog"] h3, div[role="dialog"] p, 
+div[role="dialog"] label, div[role="dialog"] span, div[role="dialog"] td {
+    color: var(--text-main) !important;
+}
+
+/* Code Blocks in API Modal */
+div[role="dialog"] pre, div[role="dialog"] code {
+    background-color: var(--code-bg) !important;
+    color: var(--code-text) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+/* Close button in modal */
+div[role="dialog"] button.close {
+    color: var(--text-main) !important;
+}
+"""
+
+# === 3. HELPER FUNCTIONS (WITH DOCSTRINGS) ===
+# Docstrings are crucial: they appear in the API documentation
+def get_anxiety_example():
+    """Returns a sample text demonstrating anxiety symptoms."""
+    return "I feel incredibly anxious and my heart won't stop racing."
+
+def get_depression_example():
+    """Returns a sample text demonstrating depression symptoms."""
+    return "I wake up feeling empty and I don't see the point in anything anymore."
+
+def get_normal_example():
+    """Returns a sample text demonstrating a healthy emotional state."""
+    return "I had a pretty good day at work and looking forward to the weekend."
+
+# === 4. ANALYSIS LOGIC ===
+def analyze_text(text):
+    """
+    Analyzes text to detect mental health indicators (Anxiety, Depression, Normal, Suicidal).
+    
+    Parameters:
+        text (str): Input text (min 5 chars).
+        
+    Returns:
+        (html_output, explanation_text): Visual HTML dashboard and key token extraction.
+    """
+    if not text or len(text.strip()) < 5:
+        return f"""
+        <div style='background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px; padding: 24px; text-align: center;'>
+            <div style='font-size: 3rem; margin-bottom: 16px;'>⚠️</div>
+            <div style='color: #991B1B; font-weight: 800; font-size: 1.25rem; margin-bottom: 8px;'>Input too short</div>
+            <div style='color: #7F1D1D; font-size: 1rem; font-weight: 500;'>Please enter at least 5 characters.</div>
+        </div>
+        """, "N/A"
+
+    if model is None:
+        return "Model not loaded.", "Error"
+
+    inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+    with torch.no_grad():
+        outputs = model(**inputs)
+
+    probs = torch.softmax(outputs.logits, dim=-1)[0]
+    label_idx = torch.argmax(probs).item()
+    label = id2label[label_idx]
+    confidence = float(probs[label_idx])
+    
+    all_probs = {id2label[i]: float(probs[i]) for i in range(len(id2label))}
+    sorted_probs = sorted(all_probs.items(), key=lambda x: x[1], reverse=True)
+
+    # Explanation Logic
+    try:
+        attn = outputs.attentions[-1]
+        scores = attn.mean(dim=1).mean(dim=1)[0]
+        tokens = tokenizer.convert_ids_to_tokens(inputs["input_ids"][0])
+        token_scores = []
+        for i, score in enumerate(scores):
+            tok = tokens[i]
+            if tok not in ["[CLS]", "[SEP]", "[PAD]"]:
+                token_scores.append((tok, score.item()))
+        token_scores.sort(key=lambda x: x[1], reverse=True)
+        top_tokens = [t[0].replace("##", "") for t in token_scores[:3]]
+        explanation = ", ".join(top_tokens)
+    except:
+        explanation = "Analysis unavailable"
+
+    # UI Configurations
+    status_config = {
+        "Anxiety":    {"emoji": "😰", "color": "#D97706"}, 
+        "Depression": {"emoji": "😔", "color": "#2563EB"}, 
+        "Normal":     {"emoji": "😊", "color": "#059669"}, 
+        "Suicidal":   {"emoji": "🆘", "color": "#DC2626"}, 
+    }
+    cfg = status_config.get(label, {"emoji": "😐", "color": "#4B5563"})
+    
+    # HTML Generation (Inline styles used for results to ensure they persist in all themes)
+    bars_html = ""
+    for name, score in sorted_probs:
+        pct = int(score * 100)
+        bar_color = status_config.get(name, {}).get("color", "#6B7280")
+        opacity = "1.0" if name == label else "0.5"
+        
+        # We use CSS variables for text inside the HTML block to adapt to dark mode
+        bars_html += f"""
+        <div style='margin-bottom: 16px;'>
+            <div style='display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 6px;'>
+                <span style='font-weight: 700; color: var(--text-main);'>{name}</span>
+                <span style='font-weight: 700; color: var(--text-sub);'>{pct}%</span>
+            </div>
+            <div style='background: var(--border-color); border-radius: 8px; height: 12px; width: 100%; overflow: hidden;'>
+                <div style='background: {bar_color}; opacity: {opacity}; width: {pct}%; height: 100%; border-radius: 8px;'></div>
+            </div>
+        </div>
+        """
+
+    html_output = f"""
+    <div class='result-container' style='border-top: 6px solid {cfg['color']}; background: var(--bg-card); padding: 32px; border-radius: 16px; border: 1px solid var(--border-color);'>
+        <div style='display: flex; align-items: center; justify-content: center; flex-direction: column; padding-bottom: 32px; border-bottom: 2px solid var(--border-color);'>
+            <div style='font-size: 4rem; margin-bottom: 16px;'>{cfg['emoji']}</div>
+            <div style='font-size: 2rem; font-weight: 800; color: var(--text-main); margin-bottom: 8px;'>{label}</div>
+            <div style='color: var(--text-sub); font-size: 1.1rem; font-weight: 600;'>Confidence: {int(confidence*100)}%</div>
+        </div>
+        <div style='margin-top: 32px;'>
+            <div style='font-size: 1.1rem; font-weight: 800; color: var(--text-main); margin-bottom: 24px;'>Detailed Breakdown</div>
+            {bars_html}
+        </div>
+    </div>
+    """
+    
+    return html_output, explanation
+
+# === 5. UI LAYOUT ===
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default()) as demo:
+    
+    # Theme Toggle Button (Floating)
+    toggle_btn = gr.Button("🌗", elem_classes="theme-btn")
+    
+    with gr.Column(elem_classes="main-card"):
+        
+        gr.HTML("""
+            <h1>Mental Health Text Analyzer</h1>
+            <div class="subtitle">AI-powered analysis for Anxiety, Depression, and Suicidal tendencies</div>
+        """)
+        
+        with gr.Tabs():
+            
+            # --- Tab 1: Analyze ---
+            with gr.TabItem("Analyze Text"):
+                
+                input_text = gr.Textbox(
+                    placeholder="Type or paste text here...",
+                    lines=5,
+                    label="Input Text", 
+                )
+                
+                gr.HTML("<div style='font-size: 0.95rem; color: var(--text-sub); font-weight: 600; margin-bottom: 12px; margin-top: 20px;'>Try an example:</div>")
+                
+                with gr.Row():
+                    ex_anxiety = gr.Button("😰 Anxiety", elem_classes="example-btn")
+                    ex_depression = gr.Button("😔 Depression", elem_classes="example-btn")
+                    ex_normal = gr.Button("😊 Normal", elem_classes="example-btn")
+
+                analyze_btn = gr.Button("Analyze Mental Health", elem_classes="analyze-btn")
+                
+                html_result = gr.HTML(label="Analysis Result")
+                
+                explanation_box = gr.Textbox(
+                    label="Key Keywords Detected", 
+                    interactive=False, 
+                    visible=True
+                )
+
+            # --- Tab 2: About ---
+            with gr.TabItem("About & Privacy"):
+                gr.HTML("""
+                    <div class="about-text">
+                        <h3>🤖 How it works</h3>
+                        <p>This tool utilizes a fine-tuned BERT model. It analyzes semantic patterns to classify text.</p>
+                        <h3>📊 Detection Categories</h3>
+                        <ul>
+                            <li><b>Anxiety:</b> Signs of worry or excessive concern.</li>
+                            <li><b>Depression:</b> Signs of sadness or hopelessness.</li>
+                            <li><b>Normal:</b> Neutral or positive state.</li>
+                            <li><b>Suicidal:</b> Warning signs of self-harm.</li>
+                        </ul>
+                    </div>
+                """)
+
+    # === 6. EVENT WIRING (Including API Names for Documentation) ===
+    
+    # 1. Theme Toggle
+    toggle_btn.click(None, js=js_func)
+
+    # 2. Example Buttons (Named APIs for Doc)
+    ex_anxiety.click(
+        fn=get_anxiety_example, 
+        outputs=input_text, 
+        api_name="get_anxiety_example"  # <--- API NAME 1
+    )
+    ex_depression.click(
+        fn=get_depression_example, 
+        outputs=input_text, 
+        api_name="get_depression_example" # <--- API NAME 2
+    )
+    ex_normal.click(
+        fn=get_normal_example, 
+        outputs=input_text, 
+        api_name="get_normal_example"     # <--- API NAME 3
+    )
+    
+    # 3. Main Analysis (Named API for Doc)
+    analyze_btn.click(
+        fn=analyze_text,
+        inputs=input_text,
+        outputs=[html_result, explanation_box],
+        api_name="predict"                # <--- API NAME 4
+    )
+
+if __name__ == "__main__":
+    print("🚀 Starting Gradio Server...")
+    demo.launch(server_name="0.0.0.0", server_port=7860)