Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import os
 from huggingface_hub import login
 
@@ -10,41 +9,29 @@ import torch.nn.functional as F
 from transformers import DistilBertTokenizer, DistilBertForSequenceClassification
 import whisper
 import pickle
+from huggingface_hub import hf_hub_download
 
-# 📁 Load model
+# ── Model Loading ──────────────────────────────────────────
 model_path = "InfoBayAI/Audio-to-Sentiment_Intelligence_Model"
 
 tokenizer = DistilBertTokenizer.from_pretrained(
     model_path,
     token=os.getenv("HF_TOKEN")
 )
-
 model = DistilBertForSequenceClassification.from_pretrained(
     model_path,
     token=os.getenv("HF_TOKEN")
 )
 
-from huggingface_hub import hf_hub_download
-
 label_path = hf_hub_download(
     repo_id=model_path,
     filename="label_encoder.pkl",
     token=os.getenv("HF_TOKEN")
 )
 
-tokenizer = DistilBertTokenizer.from_pretrained(model_path)
-model = DistilBertForSequenceClassification.from_pretrained(model_path)
-
-from huggingface_hub import hf_hub_download
-
-label_path = hf_hub_download(
-    repo_id="InfoBayAI/Audio-to-Sentiment_Intelligence_Model",
-    filename="label_encoder.pkl",
-    token=os.getenv("HF_TOKEN")
-)
-
 with open(label_path, "rb") as f:
     encoder = pickle.load(f)
+
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 model.to(device)
 model.eval()
@@ -53,7 +40,7 @@ model.eval()
 whisper_model = whisper.load_model("base")
 
 
-# 🧠 Sentiment prediction
+# ── Sentiment Prediction ───────────────────────────────────
 def predict_sentiment(text):
     inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
     inputs = {k: v.to(device) for k, v in inputs.items()}
@@ -66,301 +53,568 @@ def predict_sentiment(text):
 
     label = encoder.inverse_transform([predicted_class.item()])[0]
     confidence = confidence.item() * 100
-
     return label, confidence
 
 
-# 🔁 Pipeline
+# ── Main Pipeline ──────────────────────────────────────────
 def process_audio(audio_file):
     if audio_file is None:
-        return "⚠️ No audio provided. Please upload or record audio first."
-
-    result = whisper_model.transcribe(audio_file, task="translate")
-    text = result["text"]
-
-    label, confidence = predict_sentiment(text)
-
-    return f"""🎯 Transcription:
-{text}
+        return "⚠️  No audio provided.\n\nPlease upload a file or record audio using your microphone, then click Analyze."
+
+    try:
+        # Transcribe full audio — do NOT pass trim timestamps
+        result = whisper_model.transcribe(audio_file, task="translate")
+        text = result["text"].strip()
+
+        if not text:
+            return "⚠️  Could not transcribe any speech from the audio.\n\nPlease ensure the audio contains clear speech."
+
+        label, confidence = predict_sentiment(text)
+
+        # Confidence bar (ASCII)
+        filled = int(confidence / 5)
+        bar = "█" * filled + "░" * (20 - filled)
+
+        sentiment_emoji = {
+            "positive": "😊", "negative": "😞", "neutral": "😐",
+            "happy": "😄", "sad": "😢", "angry": "😠", "fear": "😨",
+            "surprise": "😲", "disgust": "🤢"
+        }.get(label.lower(), "🎯")
+
+        return (
+            f"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n"
+            f"  🎯  TRANSCRIPTION\n"
+            f"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n"
+            f"{text}\n\n"
+            f"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n"
+            f"  {sentiment_emoji}  SENTIMENT ANALYSIS\n"
+            f"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n"
+            f"  Sentiment   :  {label.upper()}\n"
+            f"  Confidence  :  {confidence:.1f}%\n\n"
+            f"  [{bar}]\n"
+        )
 
-📊 Sentiment: {label}
-🔍 Confidence: {confidence:.2f}%"""
+    except Exception as e:
+        return f"❌  Error during processing:\n\n{str(e)}\n\nPlease try again with a different audio file."
 
 
-# 🎨 UI
+# ── CSS ────────────────────────────────────────────────────
 APP_CSS = """
-    /* ── Reset & Base ── */
-    * { box-sizing: border-box; }
-
-    body, .gradio-container {
-        background-color: #0b0b0f !important;
-        font-family: 'Segoe UI', sans-serif;
-    }
-
-    .gradio-container {
-        max-width: 1200px !important;
-        margin: 0 auto !important;
-        padding: 30px 20px !important;
-    }
-
-    /* ── Header ── */
-    h1 {
-        text-align: center;
-        color: #ffffff !important;
-        font-size: 36px !important;
-        font-weight: 800 !important;
-        letter-spacing: -0.5px;
-        margin-bottom: 6px !important;
-    }
-
-    .subtitle {
-        text-align: center;
-        color: #9ca3af;
-        font-size: 14px;
-        margin-bottom: 30px;
-    }
-
-    /* ── Panel headings ── */
-    h2 {
-        color: #e2e8f0 !important;
-        font-size: 18px !important;
-        font-weight: 600 !important;
-        margin-bottom: 14px !important;
-        padding-bottom: 8px !important;
-        border-bottom: 1px solid #2e2e3a !important;
-    }
-
-    /* ── Cards / Columns ── */
-    .input-col, .output-col {
-        background: #13131f;
-        border: 1px solid #2a2a38;
-        border-radius: 18px;
-        padding: 24px !important;
-    }
-
-    /* ── Audio widget: give it room so all controls show ── */
-    .audio-wrap {
-        background: #1a1a2e;
-        border: 1px solid #2e2e3a;
-        border-radius: 14px;
-        padding: 14px;
-        margin-bottom: 10px;
-        min-height: 130px;          /* ensures toolbar never gets clipped */
-        overflow: visible !important;
-    }
-
-    /* Gradio wraps each audio component in wrappers — make sure nothing clips */
-    .audio-wrap > div,
-    .audio-wrap > div > div {
-        overflow: visible !important;
-    }
-
-    /* The inner Gradio audio player toolbar row */
-    .waveform-controls,
-    [data-testid="waveform-controls"],
-    .waveform-controls-wrapper {
-        overflow: visible !important;
-        flex-wrap: wrap !important;
-        gap: 6px !important;
-    }
-
-    /* Volume, speed, trim, download, share, delete — all should be visible */
-    .waveform-controls button,
-    .audio-controls button,
-    [class*="icon-button"],
-    [class*="control-button"] {
-        background: #2a2a42 !important;
-        color: #c4b5fd !important;
-        border: 1px solid #3f3f5a !important;
-        border-radius: 8px !important;
-        width: 34px !important;
-        height: 34px !important;
-        min-width: 34px !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        font-size: 14px !important;
-        padding: 0 !important;
-    }
-
-    .waveform-controls button:hover,
-    .audio-controls button:hover {
-        background: #3b3b5e !important;
-        border-color: #7c3aed !important;
-    }
-
-    /* Playback progress bar */
-    .waveform-container {
-        border-radius: 8px;
-        overflow: hidden;
-    }
-
-    /* ── Hint text ── */
-    .hint {
-        color: #6b7280;
-        font-size: 12px;
-        margin-top: 4px;
-        margin-bottom: 14px;
-    }
-
-    /* ── Section divider ── */
-    .divider {
-        border: none;
-        border-top: 1px solid #2a2a38;
-        margin: 20px 0;
-    }
-
-    /* ── Buttons ── */
-    button.lg,
-    button[class*="primary"],
-    .svelte-cmf5ev {
-        background: linear-gradient(135deg, #5b21b6, #7c3aed) !important;
-        color: #ffffff !important;
-        border: none !important;
-        border-radius: 12px !important;
-        font-size: 15px !important;
-        font-weight: 600 !important;
-        padding: 12px 20px !important;
-        width: 100% !important;
-        cursor: pointer;
-        transition: opacity 0.2s, transform 0.1s;
-        margin-bottom: 6px !important;
-    }
-
-    button.lg:hover,
-    button[class*="primary"]:hover {
-        opacity: 0.88 !important;
-        transform: translateY(-1px);
-    }
-
-    button.lg:active {
-        transform: translateY(0px);
-    }
-
-    /* Clear button — secondary style */
-    .clear-btn button {
-        background: #1f1f30 !important;
-        border: 1px solid #3a3a52 !important;
-        color: #9ca3af !important;
-    }
-
-    .clear-btn button:hover {
-        background: #2a2a40 !important;
-        color: #e2e8f0 !important;
-    }
-
-    /* Flag button */
-    .flag-btn button {
-        background: linear-gradient(135deg, #7f1d1d, #b91c1c) !important;
-        margin-top: 10px !important;
-    }
-
-    /* ── Output textbox ── */
-    textarea,
-    .output-col textarea {
-        background-color: #0f0f1a !important;
-        color: #e2e8f0 !important;
-        border: 1px solid #2e2e3a !important;
-        border-radius: 12px !important;
-        font-size: 14px !important;
-        line-height: 1.7 !important;
-        min-height: 340px !important;
-        padding: 16px !important;
-        resize: vertical;
-    }
-
-    textarea::placeholder {
-        color: #4b5563 !important;
-    }
-
-    /* ── Hide Gradio footer branding ── */
-    footer,
-    .built-with,
-    [class*="built-with"],
-    .footer,
-    .svelte-1ax1toq,
-    .gradio-container ~ footer {
-        display: none !important;
-        visibility: hidden !important;
-        height: 0 !important;
-        overflow: hidden !important;
-    }
-
-    /* ── Labels ── */
-    label span,
-    .label-wrap span {
-        color: #9ca3af !important;
-        font-size: 13px !important;
-    }
-
-    /* ── Recording indicator pulse ── */
-    @keyframes pulse-red {
-        0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
-        50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
-    }
-
-    /* Record button active state */
-    [data-testid="record-button"][aria-pressed="true"],
-    .recording button {
-        animation: pulse-red 1.2s infinite !important;
-        background: #dc2626 !important;
-        border-color: #ef4444 !important;
-    }
-    """
-
+/* ━━━━ GOOGLE FONTS ━━━━ */
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');
+
+/* ━━━━ RESET & ROOT ━━━━ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+    --bg-base:      #080810;
+    --bg-surface:   #0f0f1c;
+    --bg-card:      #13132a;
+    --bg-element:   #1a1a35;
+    --border:       #252540;
+    --border-glow:  #4f3fbf;
+    --accent:       #7c5cfc;
+    --accent-light: #a78bfa;
+    --accent-dim:   #3d2d8a;
+    --text-primary: #e8e4ff;
+    --text-muted:   #7870a8;
+    --text-dim:     #3d3a6e;
+    --success:      #34d399;
+    --danger:       #f87171;
+    --font-display: 'Syne', sans-serif;
+    --font-mono:    'Space Mono', monospace;
+    --radius-sm:    8px;
+    --radius-md:    14px;
+    --radius-lg:    20px;
+    --shadow-glow:  0 0 30px rgba(124, 92, 252, 0.15);
+}
+
+/* ━━━━ BODY & CONTAINER ━━━━ */
+body,
+.gradio-container,
+.gradio-container > * {
+    background-color: var(--bg-base) !important;
+    font-family: var(--font-display) !important;
+    color: var(--text-primary) !important;
+}
+
+.gradio-container {
+    max-width: 1400px !important;
+    width: 100% !important;
+    min-height: 100vh !important;
+    margin: 0 auto !important;
+    padding: 32px 24px 60px !important;
+}
+
+/* ━━━━ HEADER ━━━━ */
+.app-header {
+    text-align: center;
+    padding: 40px 0 32px;
+}
+
+.app-header h1 {
+    font-family: var(--font-display) !important;
+    font-size: clamp(28px, 4vw, 48px) !important;
+    font-weight: 800 !important;
+    color: var(--text-primary) !important;
+    letter-spacing: -1px !important;
+    line-height: 1.1 !important;
+    margin-bottom: 12px !important;
+}
+
+.app-header h1 span { color: var(--accent-light); }
+
+.app-subtitle {
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    padding: 6px 16px;
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    display: inline-block;
+    background: var(--bg-surface);
+}
+
+/* ━━━━ LAYOUT ROW ━━━━ */
+.main-row {
+    gap: 20px !important;
+    align-items: stretch !important;
+}
+
+/* ━━━━ PANELS ━━━━ */
+.panel-input,
+.panel-output {
+    background: var(--bg-card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: 28px !important;
+    box-shadow: var(--shadow-glow) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0 !important;
+}
+
+.panel-input { flex: 1 !important; min-width: 360px !important; }
+.panel-output { flex: 1.6 !important; min-width: 420px !important; }
+
+/* ━━━━ SECTION HEADINGS ━━━━ */
+.panel-input h2,
+.panel-output h2 {
+    font-family: var(--font-display) !important;
+    font-size: 15px !important;
+    font-weight: 700 !important;
+    color: var(--text-muted) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
+    margin-bottom: 20px !important;
+    padding-bottom: 12px !important;
+    border-bottom: 1px solid var(--border) !important;
+}
+
+/* ━━━━ HINT LABELS ━━━━ */
+.hint-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-muted);
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+    margin-top: 4px;
+}
+
+/* ━━━━ AUDIO COMPONENTS — THE CRITICAL FIX ━━━━ */
+
+/* Outer wrapper Gradio creates */
+.audio-component-wrap {
+    width: 100% !important;
+    margin-bottom: 16px !important;
+}
+
+/* Kill ALL overflow:hidden on audio internals */
+.audio-component-wrap *,
+[data-testid="audio"],
+[data-testid="audio"] *,
+.waveform-container,
+.waveform-container *,
+.waveform-controls,
+.waveform-controls * {
+    overflow: visible !important;
+}
+
+/* The main audio block */
+[data-testid="audio"],
+.gr-audio,
+.audio-wrap > div {
+    background: var(--bg-element) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-md) !important;
+    padding: 0 !important;
+    width: 100% !important;
+    overflow: visible !important;
+}
+
+/* Waveform canvas area — give it proper height */
+.waveform-container canvas,
+[class*="waveform"] canvas {
+    width: 100% !important;
+    min-height: 80px !important;
+    display: block !important;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
+}
+
+/* Controls toolbar row — MUST NOT clip */
+.waveform-controls,
+[class*="controls"],
+.audio-controls,
+[data-testid="waveform-controls"] {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    padding: 10px 12px !important;
+    background: var(--bg-card) !important;
+    border-top: 1px solid var(--border) !important;
+    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
+    width: 100% !important;
+    min-height: 52px !important;
+    overflow: visible !important;
+}
+
+/* Time labels */
+.waveform-controls span,
+[class*="time"],
+[class*="timestamp"] {
+    font-family: var(--font-mono) !important;
+    font-size: 11px !important;
+    color: var(--text-muted) !important;
+    white-space: nowrap !important;
+    flex-shrink: 0 !important;
+}
+
+/* ALL icon/control buttons in audio toolbar */
+.waveform-controls button,
+.audio-controls button,
+[data-testid="audio"] button,
+[class*="icon-button"],
+[class*="control-button"],
+[class*="audio-button"] {
+    background: var(--bg-surface) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--accent-light) !important;
+    border-radius: var(--radius-sm) !important;
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    max-width: 32px !important;
+    max-height: 32px !important;
+    padding: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    flex-shrink: 0 !important;
+    transition: background 0.15s, border-color 0.15s !important;
+}
+
+.waveform-controls button:hover,
+.audio-controls button:hover,
+[data-testid="audio"] button:hover {
+    background: var(--accent-dim) !important;
+    border-color: var(--accent) !important;
+}
+
+/* SVG icons inside buttons */
+.waveform-controls button svg,
+.audio-controls button svg,
+[data-testid="audio"] button svg {
+    width: 14px !important;
+    height: 14px !important;
+    fill: currentColor !important;
+    stroke: currentColor !important;
+    flex-shrink: 0 !important;
+}
+
+/* Play button — slightly larger accent */
+[data-testid="play-pause-button"],
+[aria-label="Play"],
+[aria-label="Pause"] {
+    background: var(--accent) !important;
+    border-color: var(--accent) !important;
+    color: #fff !important;
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    max-width: 36px !important;
+    border-radius: 50% !important;
+}
+
+/* Speed badge */
+[class*="speed"],
+[aria-label*="speed"],
+[aria-label*="Speed"] {
+    font-family: var(--font-mono) !important;
+    font-size: 10px !important;
+    min-width: 36px !important;
+    max-width: 36px !important;
+    padding: 0 4px !important;
+    letter-spacing: 0 !important;
+}
+
+/* Upload drag area */
+[data-testid="audio"] .upload-container,
+[data-testid="audio"] .empty-state,
+.audio-component-wrap .upload-container {
+    background: var(--bg-element) !important;
+    border: 2px dashed var(--border-glow) !important;
+    border-radius: var(--radius-md) !important;
+    min-height: 100px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    color: var(--text-muted) !important;
+    font-family: var(--font-mono) !important;
+    font-size: 12px !important;
+    cursor: pointer !important;
+    transition: border-color 0.2s, background 0.2s !important;
+}
+
+.audio-component-wrap .upload-container:hover {
+    border-color: var(--accent) !important;
+    background: rgba(124, 92, 252, 0.06) !important;
+}
+
+/* ━━━━ DIVIDER ━━━━ */
+.section-divider {
+    border: none !important;
+    border-top: 1px solid var(--border) !important;
+    margin: 22px 0 !important;
+}
+
+/* ━━━━ ANALYZE BUTTONS ━━━━ */
+.btn-analyze {
+    width: 100% !important;
+    padding: 13px 20px !important;
+    font-family: var(--font-display) !important;
+    font-size: 14px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.5px !important;
+    color: #fff !important;
+    background: linear-gradient(135deg, var(--accent-dim), var(--accent)) !important;
+    border: none !important;
+    border-radius: var(--radius-md) !important;
+    cursor: pointer !important;
+    transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s !important;
+    box-shadow: 0 4px 20px rgba(124, 92, 252, 0.3) !important;
+    margin-bottom: 4px !important;
+}
+
+/* Catch all Gradio primary button variants */
+button.lg,
+button[class*="primary"],
+.svelte-cmf5ev,
+[data-testid*="analyze"] {
+    background: linear-gradient(135deg, var(--accent-dim), var(--accent)) !important;
+    color: #fff !important;
+    border: none !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-display) !important;
+    font-size: 14px !important;
+    font-weight: 700 !important;
+    padding: 13px 20px !important;
+    width: 100% !important;
+    cursor: pointer !important;
+    box-shadow: 0 4px 20px rgba(124, 92, 252, 0.3) !important;
+    transition: opacity 0.2s, transform 0.1s !important;
+    margin-bottom: 4px !important;
+}
+
+button.lg:hover,
+button[class*="primary"]:hover {
+    opacity: 0.88 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 28px rgba(124, 92, 252, 0.45) !important;
+}
+
+button.lg:active { transform: translateY(0) !important; }
+
+/* Secondary / clear buttons */
+.btn-secondary button,
+button.secondary,
+button[class*="secondary"] {
+    background: var(--bg-element) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text-muted) !important;
+    font-family: var(--font-display) !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    border-radius: var(--radius-md) !important;
+    padding: 10px 20px !important;
+    width: 100% !important;
+    cursor: pointer !important;
+    transition: background 0.2s, color 0.2s !important;
+}
+
+.btn-secondary button:hover { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
+
+/* ━━━━ OUTPUT TEXTBOX ━━━━ */
+.panel-output textarea,
+.panel-output .gr-textbox textarea,
+textarea {
+    background: var(--bg-surface) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-md) !important;
+    font-family: var(--font-mono) !important;
+    font-size: 13px !important;
+    line-height: 1.8 !important;
+    min-height: 420px !important;
+    max-height: 70vh !important;
+    padding: 20px !important;
+    resize: vertical !important;
+    width: 100% !important;
+    transition: border-color 0.2s !important;
+}
+
+textarea:focus {
+    outline: none !important;
+    border-color: var(--accent) !important;
+    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12) !important;
+}
+
+textarea::placeholder { color: var(--text-dim) !important; }
+
+/* ━━━━ LABELS ━━━━ */
+label span,
+.label-wrap span,
+.gr-textbox label span,
+[class*="label"] {
+    font-family: var(--font-mono) !important;
+    font-size: 11px !important;
+    color: var(--text-muted) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+}
+
+/* ━━━━ SCROLLBARS ━━━━ */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-base); }
+::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 4px; }
+
+/* ━━━━ HIDE GRADIO FOOTER ━━━━ */
+footer,
+.built-with,
+[class*="built-with"],
+.footer,
+.svelte-1ax1toq,
+.gradio-container ~ footer {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    overflow: hidden !important;
+}
+
+/* ━━━━ RECORDING PULSE ━━━━ */
+@keyframes pulse-rec {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
+    50%       { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+}
+
+[data-testid="record-button"][aria-pressed="true"],
+.recording button {
+    animation: pulse-rec 1.2s infinite !important;
+    background: #dc2626 !important;
+    border-color: #ef4444 !important;
+}
+
+/* ━━━━ RESPONSIVE ━━━━ */
+@media (max-width: 800px) {
+    .gradio-container { padding: 16px 12px 40px !important; }
+    .panel-input, .panel-output { min-width: 100% !important; padding: 18px !important; }
+}
+"""
+
+
+# ── Interface ──────────────────────────────────────────────
 def create_interface():
-    with gr.Blocks() as interface:
+    with gr.Blocks(css=APP_CSS, theme=gr.themes.Base()) as interface:
 
-        gr.Markdown("# 🎧 Audio Sentiment Analyzer")
-        gr.HTML("<div class='subtitle'>DistilBERT + Whisper AI pipeline &nbsp;·&nbsp; Upload or Record Audio</div>")
+        # Header
+        gr.HTML("""
+        <div class="app-header">
+            <h1>🎧 Audio Sentiment <span>Analyzer</span></h1>
+            <div class="app-subtitle">DistilBERT · Whisper · Multi-language · Real-time analysis</div>
+        </div>
+        """)
 
-        with gr.Row(equal_height=False):
+        with gr.Row(elem_classes="main-row", equal_height=False):
 
-            # ── LEFT: Input Panel ──────────────────────────────
-            with gr.Column(scale=1, elem_classes="input-col"):
+            # ── INPUT PANEL ───────────────────────────────
+            with gr.Column(scale=1, elem_classes="panel-input"):
                 gr.Markdown("## 🎤 Input Panel")
 
-                # Upload section
-                gr.HTML("<div class='hint'>📁 <b style='color:#c4b5fd'>Upload</b> an audio file (MP3, WAV, M4A…)</div>")
+                # Upload
+                gr.HTML("<div class='hint-label'>📁 Upload audio file — MP3, WAV, M4A, OGG, FLAC</div>")
                 upload_audio = gr.Audio(
                     sources=["upload"],
                     type="filepath",
                     label="Upload Audio File",
-                    elem_classes="audio-wrap",
+                    elem_classes="audio-component-wrap",
+                    show_download_button=False,  # removes download clutter
+                    editable=False,              # ← DISABLES trim entirely
+                )
+                upload_btn = gr.Button(
+                    "🚀  Analyze Uploaded Audio",
+                    variant="primary",
+                    elem_classes="btn-analyze"
                 )
-                upload_btn = gr.Button("🚀 Analyze Uploaded Audio", variant="primary")
 
-                gr.HTML("<hr class='divider'>")
+                gr.HTML("<hr class='section-divider'>")
 
-                # Record section
-                gr.HTML("<div class='hint'>🎙️ <b style='color:#c4b5fd'>Record</b> live using your microphone</div>")
+                # Record
+                gr.HTML("<div class='hint-label'>🎙️ Record live from microphone</div>")
                 record_audio = gr.Audio(
                     sources=["microphone"],
                     type="filepath",
-                    label="Record Audio",
-                    elem_classes="audio-wrap",
+                    label="Microphone Recording",
+                    elem_classes="audio-component-wrap",
+                    editable=False,              # ← DISABLES trim entirely
+                )
+                record_btn = gr.Button(
+                    "🎙️  Analyze Recorded Audio",
+                    variant="primary",
+                    elem_classes="btn-analyze"
                 )
-                record_btn = gr.Button("🎙️ Analyze Recorded Audio", variant="primary")
 
-                gr.HTML("<hr class='divider'>")
+                gr.HTML("<hr class='section-divider'>")
 
-                with gr.Row(elem_classes="clear-btn"):
-                    clear_btn = gr.Button("🧹 Clear All")
+                with gr.Row(elem_classes="btn-secondary"):
+                    clear_btn = gr.Button("🧹  Clear All", variant="secondary")
 
-            # ── RIGHT: Output Panel ────────────────────────────
-            with gr.Column(scale=2, elem_classes="output-col"):
+            # ── OUTPUT PANEL ──────────────────────────────
+            with gr.Column(scale=2, elem_classes="panel-output"):
                 gr.Markdown("## 📊 Result Panel")
 
                 output_text = gr.Textbox(
-                    lines=18,
+                    lines=22,
                     label="Analysis Result",
-                    placeholder="Results will appear here after analysis...\n\n🎯 Transcription\n📊 Sentiment\n🔍 Confidence",
+                    placeholder=(
+                        "Results will appear here after analysis...\n\n"
+                        "  🎯  Transcription\n"
+                        "  📊  Sentiment label\n"
+                        "  🔍  Confidence score\n"
+                        "  ▓▓▓  Confidence bar"
+                    ),
+                    show_copy_button=True,
+                    interactive=False,
                 )
 
-                with gr.Row(elem_classes="flag-btn"):
-                    clear_result_btn = gr.Button("🧹 Clear Result")
+                with gr.Row(elem_classes="btn-secondary"):
+                    clear_result_btn = gr.Button("🧹  Clear Result", variant="secondary")
 
-        # ── Event Handlers ──
+        # ── Events ──────────────────────────────────────
         upload_btn.click(fn=process_audio, inputs=upload_audio, outputs=output_text)
         record_btn.click(fn=process_audio, inputs=record_audio, outputs=output_text)
 
@@ -369,21 +623,16 @@ def create_interface():
             inputs=[],
             outputs=[upload_audio, record_audio, output_text]
         )
-
         clear_result_btn.click(
-            fn=lambda: "🧹 Result is cleared.",
+            fn=lambda: "",
             inputs=[],
             outputs=output_text
         )
-        
+
     return interface
 
 
-# 🚀 Launch
+# ── Launch ─────────────────────────────────────────────────
 if __name__ == "__main__":
     interface = create_interface()
-    interface.launch(
-        share=True,
-        css=APP_CSS,
-        theme=gr.themes.Base(),
-    )
+    interface.launch(share=True)