Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py — DeepFake AI Forensics (WhatsApp Voice Note Fix)
+# app.py — DeepFake AI Forensics (Audio-Only, Fixed Label Mapping)
 import os
 import subprocess
 import tempfile
@@ -30,12 +30,12 @@ model.to(device)
 print(f"[+] Model loaded on {device}")
 
 # ==========================================
-# 2. AUDIO / VIDEO PREPROCESSING (ROBUST)
+# 2. AUDIO PREPROCESSING (ROBUST)
 # ==========================================
 def normalize_audio(file_path):
     """
-    Converts ANY audio/video to standard 16kHz mono WAV via FFmpeg.
-    This fixes WhatsApp voice notes (Opus/OGG disguised as MP3), 
+    Converts ANY audio to standard 16kHz mono WAV via FFmpeg.
+    Fixes WhatsApp voice notes (Opus/OGG disguised as MP3), 
     corrupt headers, and exotic codecs.
     """
     out = tempfile.mktemp(suffix=".wav")
@@ -52,7 +52,7 @@ def normalize_audio(file_path):
     result = subprocess.run(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
     
     if result.returncode != 0:
-        err = result.stderr.decode('utf-8', errors='ignore')[:200]
+        err = result.stderr.decode('utf-8', errors='ignore')[:300]
         raise RuntimeError(f"FFmpeg could not decode this file. It may be corrupted or use an unsupported codec.\nDetails: {err}")
     
     return out
@@ -62,23 +62,17 @@ def convert_to_audio(file_path):
     
     # Supported audio formats (including WhatsApp Opus)
     audio_exts = ["wav", "mp3", "flac", "m4a", "ogg", "opus", "aac", "wma", "oga"]
-    # Supported video formats
-    video_exts = ["mp4", "mkv", "avi", "mov", "webm", "flv", "3gp"]
     
     if ext in audio_exts:
         print(f"[+] Audio detected ({ext}) → normalizing via ffmpeg...")
         return normalize_audio(file_path)
     
-    if ext in video_exts:
-        print("[+] Video detected → extracting & normalizing audio via ffmpeg...")
-        return normalize_audio(file_path)
-    
     # Unknown extension? Try ffmpeg anyway as last resort
     print(f"[+] Unknown format ({ext}) → attempting ffmpeg decode...")
     try:
         return normalize_audio(file_path)
     except Exception:
-        raise ValueError(f"Unsupported file format: {ext}. Please upload MP3, WAV, M4A, OGG, OPUS, or MP4.")
+        raise ValueError(f"Unsupported file format: {ext}. Please upload MP3, WAV, M4A, OGG, OPUS, or FLAC.")
 
 def load_audio(path):
     audio, _ = librosa.load(path, sr=16000)
@@ -93,30 +87,48 @@ def predict(audio):
     with torch.no_grad():
         logits = model(**inputs).logits
         probs = torch.softmax(logits, dim=-1)[0]
-    return float(probs[0]), float(probs[1])
+    # CORRECTED: config.json says id2label: 0="AIVoice", 1="HumanVoice"
+    ai_p = float(probs[0])
+    human_p = float(probs[1])
+    return ai_p, human_p
 
 def audio_features(audio):
-    mfcc = librosa.feature.mfcc(y=audio, sr=16000)
+    mfcc = librosa.feature.mfcc(y=audio, sr=16000, n_mfcc=13)
     return {
-        "mfcc": float(np.mean(np.var(mfcc, axis=1))),
-        "energy": float(np.mean(audio ** 2))
+        "mfcc_var": float(np.mean(np.var(mfcc, axis=1))),
+        "energy": float(np.mean(audio ** 2)),
+        "zcr": float(np.mean(librosa.feature.zero_crossing_rate(audio))),
+        "spectral_centroid": float(np.mean(librosa.feature.spectral_centroid(y=audio, sr=16000))),
     }
 
 def analyze(file_path):
     audio_path = convert_to_audio(file_path)
     audio = load_audio(audio_path)
-    human_p, ai_p = predict(audio)
+    
+    ai_p, human_p = predict(audio)
     feats = audio_features(audio)
-    anomaly = (feats["mfcc"] / 500.0) + (feats["energy"] * 2.0)
-    ai_score = np.clip((ai_p * 0.6 + anomaly * 0.4), 0.0, 1.0)
+    
+    # Calibrated ensemble: neural model is primary (80%), DSP is secondary (20%)
+    # DSP anomaly score — lower variance in MFCC and unnatural spectral centroid can indicate AI
+    dsp_score = min(1.0, max(0.0, 
+        (feats["mfcc_var"] / 800.0) * 0.5 + 
+        (1.0 - min(feats["zcr"] * 5, 1.0)) * 0.3 +
+        (feats["energy"] * 1.5) * 0.2
+    ))
+    
+    # Weighted fusion: trust the neural model more, use DSP as a soft modifier
+    ai_score = np.clip((ai_p * 0.80 + dsp_score * 0.20), 0.0, 1.0)
+    
+    # Also compute human confidence for display
+    human_score = 1.0 - ai_score
 
-    if ai_score < 0.35:
+    if ai_score < 0.40:
         verdict = "HUMAN VOICE"
         level = "LOW RISK"
         color = "#059669"
         icon = "🧑"
         glow = "rgba(5,150,105,0.18)"
-    elif ai_score < 0.65:
+    elif ai_score < 0.60:
         verdict = "UNCERTAIN / MIXED"
         level = "MEDIUM RISK"
         color = "#d97706"
@@ -129,8 +141,8 @@ def analyze(file_path):
         icon = "🤖"
         glow = "rgba(220,38,38,0.18)"
 
-    confidence = int(ai_score * 100)
-    return verdict, level, confidence, ai_score, feats, audio_path, color, icon, glow
+    confidence = int(max(ai_score, human_score) * 100)
+    return verdict, level, confidence, ai_score, human_score, feats, audio_path, color, icon, glow
 
 # ==========================================
 # 4. VISUALIZATION
@@ -193,6 +205,19 @@ def confidence_circle(percentage, color):
     </div>
     """
 
+def probability_bar(label, percentage, color, icon):
+    return f"""
+    <div style="margin-bottom: 14px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <span style="font-weight: 600; color: #1e293b; font-size: 0.95em;">{icon} {label}</span>
+            <span style="font-weight: 700; color: {color}; font-size: 1em;">{percentage:.1f}%</span>
+        </div>
+        <div style="width: 100%; height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden;">
+            <div style="width: {percentage}%; height: 100%; background: linear-gradient(90deg, {color}, {color}aa); border-radius: 5px; transition: width 1s ease-out;"></div>
+        </div>
+    </div>
+    """
+
 EQUALIZER_HTML = """
 <div style="display: flex; align-items: flex-end; justify-content: center; height: 50px; gap: 5px; margin: 16px 0;">
     <div class="eq-bar" style="width: 6px; height: 40%; background: linear-gradient(to top, #4f46e5, #2563eb); border-radius: 3px; animation: eq-bounce 0.8s infinite ease-in-out 0s;"></div>
@@ -220,12 +245,13 @@ def detect_audio(audio_file):
         )
 
     try:
-        verdict, level, confidence, ai_score, feats, audio_path, color, icon, glow = analyze(audio_file)
+        verdict, level, confidence, ai_score, human_score, feats, audio_path, color, icon, glow = analyze(audio_file)
         plot_path = generate_audio_plots(audio_path)
-        percentage = ai_score * 100
+        ai_pct = ai_score * 100
+        human_pct = human_score * 100
 
-        status_emoji = "🟢" if percentage < 35 else "🟡" if percentage < 65 else "🔴"
-        status_text = "LIKELY REAL" if percentage < 35 else "SUSPICIOUS" if percentage < 65 else "HIGH RISK"
+        status_emoji = "🟢" if ai_pct < 40 else "🟡" if ai_pct < 60 else "🔴"
+        status_text = "LIKELY REAL" if ai_pct < 40 else "SUSPICIOUS" if ai_pct < 60 else "HIGH RISK"
 
         circle = confidence_circle(confidence, color)
 
@@ -246,10 +272,6 @@ def detect_audio(audio_file):
             </div>
 
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px;">
-                <div style="background: #f8fafc; border-radius: 12px; padding: 16px; border-left: 3px solid {color};">
-                    <div style="font-size: 0.7em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">AI Probability</div>
-                    <div style="font-size: 1.5em; font-weight: 700; color: {color};">{percentage:.1f}%</div>
-                </div>
                 <div style="background: #f8fafc; border-radius: 12px; padding: 16px; border-left: 3px solid {color};">
                     <div style="font-size: 0.7em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">Risk Level</div>
                     <div style="font-size: 1.2em; font-weight: 700; color: {color};">{level}</div>
@@ -264,135 +286,55 @@ def detect_audio(audio_file):
                 </div>
             </div>
 
+            <div style="background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
+                <div style="font-size: 0.75em; color: #64748b; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px;">📊 Probability Breakdown</div>
+                {probability_bar("AI / Synthetic", ai_pct, "#dc2626", "🤖")}
+                {probability_bar("Human / Real", human_pct, "#059669", "🧑")}
+            </div>
+
             <div style="background: #f8fafc; border-radius: 12px; padding: 18px; margin-bottom: 20px;">
                 <div style="font-size: 0.75em; color: #64748b; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;">🔬 DSP Forensic Signatures</div>
                 <div style="display: flex; justify-content: space-around; font-family: 'SF Mono', monospace; font-size: 0.9em; flex-wrap: wrap; gap: 12px;">
                     <div style="text-align: center;">
                         <div style="color: #94a3b8; font-size: 0.8em;">MFCC Variance</div>
-                        <div style="color: #1e293b; font-weight: 600;">{feats['mfcc']:.4f}</div>
+                        <div style="color: #1e293b; font-weight: 600;">{feats['mfcc_var']:.4f}</div>
                     </div>
                     <div style="text-align: center;">
                         <div style="color: #94a3b8; font-size: 0.8em;">Signal Energy</div>
                         <div style="color: #1e293b; font-weight: 600;">{feats['energy']:.6f}</div>
                     </div>
                     <div style="text-align: center;">
-                        <div style="color: #94a3b8; font-size: 0.8em;">Neural Score</div>
-                        <div style="color: #1e293b; font-weight: 600;">{ai_score:.4f}</div>
+                        <div style="color: #94a3b8; font-size: 0.8em;">Zero Crossing</div>
+                        <div style="color: #1e293b; font-weight: 600;">{feats['zcr']:.4f}</div>
                     </div>
-                </div>
-            </div>
-
-            <div style="font-size: 0.8em; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 14px; line-height: 1.6;">
-                <strong style="color: #475569;">Interpretation Guide:</strong><br>
-                <span style="color: #059669;">● 0–35%</span> Very likely genuine human voice &nbsp;|&nbsp;
-                <span style="color: #d97706;">● 35–65%</span> Mixed signal, manual review advised &nbsp;|&nbsp;
-                <span style="color: #dc2626;">● 65–100%</span> Strong synthetic / AI indicators detected
-            </div>
-        </div>
-        """
-        return plot_path, result_html, f"{percentage:.1f}%", color, ""
-
-    except Exception as e:
-        err_msg = str(e)
-        if "FFmpeg" in err_msg:
-            err_html = f"<div style='color:#dc2626;padding:30px;'><strong>❌ File Decode Error</strong><br><br>{err_msg}<br><br><span style='color:#475569;font-size:0.9em;'>WhatsApp voice notes are often .opus or .ogg files disguised as .mp3. Try renaming the file to .ogg or exporting it differently.</span></div>"
-        else:
-            err_html = f"<div style='color:#dc2626;padding:30px;'>❌ Analysis Error: {err_msg}</div>"
-        return None, err_html, "Error", "#dc2626", ""
-
-
-def detect_video(video_file):
-    if video_file is None:
-        return (
-            None,
-            '<div style="text-align:center;color:#dc2626;padding:30px;">❌ No video file provided</div>',
-            "Waiting...",
-            "#64748b",
-            EQUALIZER_HTML + '<div style="text-align:center;color:#64748b;font-size:0.9em;">Upload video to extract & analyze audio track</div>'
-        )
-
-    try:
-        verdict, level, confidence, ai_score, feats, audio_path, color, icon, glow = analyze(video_file)
-        plot_path = generate_audio_plots(audio_path)
-        percentage = ai_score * 100
-
-        status_emoji = "🟢" if percentage < 35 else "🟡" if percentage < 65 else "🔴"
-        status_text = "LIKELY REAL" if percentage < 35 else "SUSPICIOUS" if percentage < 65 else "HIGH RISK"
-
-        circle = confidence_circle(confidence, color)
-
-        result_html = f"""
-        <div style="background: #ffffff; 
-                    border: 1px solid {color}35; border-radius: 20px; padding: 28px; 
-                    box-shadow: 0 4px 24px {glow}, 0 1px 3px rgba(0,0,0,0.08);">
-            
-            <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap;">
-                <div style="font-size: 3em; line-height: 1;">{icon}</div>
-                <div style="flex: 1; min-width: 200px;">
-                    <div style="font-size: 0.8em; color: #64748b; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px;">Audio Track Verdict</div>
-                    <div style="font-size: 1.5em; font-weight: 800; color: {color}; letter-spacing: -0.5px;">{verdict}</div>
-                </div>
-                <div style="min-width: 140px;">
-                    {circle}
-                </div>
-            </div>
-
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px;">
-                <div style="background: #f8fafc; border-radius: 12px; padding: 16px; border-left: 3px solid {color};">
-                    <div style="font-size: 0.7em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">AI Probability</div>
-                    <div style="font-size: 1.5em; font-weight: 700; color: {color};">{percentage:.1f}%</div>
-                </div>
-                <div style="background: #f8fafc; border-radius: 12px; padding: 16px; border-left: 3px solid {color};">
-                    <div style="font-size: 0.7em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">Risk Level</div>
-                    <div style="font-size: 1.2em; font-weight: 700; color: {color};">{level}</div>
-                </div>
-                <div style="background: #f8fafc; border-radius: 12px; padding: 16px; border-left: 3px solid #2563eb;">
-                    <div style="font-size: 0.7em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">Confidence</div>
-                    <div style="font-size: 1.2em; font-weight: 700; color: #2563eb;">{confidence}%</div>
-                </div>
-                <div style="background: #f8fafc; border-radius: 12px; padding: 16px; border-left: 3px solid #d97706;">
-                    <div style="font-size: 0.7em; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;">Status</div>
-                    <div style="font-size: 1em; font-weight: 600; color: #d97706;">{status_emoji} {status_text}</div>
-                </div>
-            </div>
-
-            <div style="background: #f8fafc; border-radius: 12px; padding: 18px; margin-bottom: 20px;">
-                <div style="font-size: 0.75em; color: #64748b; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;">🔬 DSP Forensic Signatures (Audio Track)</div>
-                <div style="display: flex; justify-content: space-around; font-family: 'SF Mono', monospace; font-size: 0.9em; flex-wrap: wrap; gap: 12px;">
                     <div style="text-align: center;">
-                        <div style="color: #94a3b8; font-size: 0.8em;">MFCC Variance</div>
-                        <div style="color: #1e293b; font-weight: 600;">{feats['mfcc']:.4f}</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="color: #94a3b8; font-size: 0.8em;">Signal Energy</div>
-                        <div style="color: #1e293b; font-weight: 600;">{feats['energy']:.6f}</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="color: #94a3b8; font-size: 0.8em;">Neural Score</div>
-                        <div style="color: #1e293b; font-weight: 600;">{ai_score:.4f}</div>
+                        <div style="color: #94a3b8; font-size: 0.8em;">Spectral Centroid</div>
+                        <div style="color: #1e293b; font-weight: 600;">{feats['spectral_centroid']:.1f} Hz</div>
                     </div>
                 </div>
             </div>
 
             <div style="font-size: 0.8em; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 14px; line-height: 1.6;">
-                <strong style="color: #475569;">Analysis Note:</strong> Deepfake videos frequently contain synthetic audio tracks. 
-                This scan was performed on the extracted audio waveform. Always verify visual cues separately for complete assessment.
+                <strong style="color: #475569;">Interpretation Guide:</strong><br>
+                <span style="color: #059669;">● 0–40%</span> Very likely genuine human voice &nbsp;|&nbsp;
+                <span style="color: #d97706;">● 40–60%</span> Mixed signal, manual review advised &nbsp;|&nbsp;
+                <span style="color: #dc2626;">● 60–100%</span> Strong synthetic / AI indicators detected
             </div>
         </div>
         """
-        return plot_path, result_html, f"{percentage:.1f}%", color, ""
+        return plot_path, result_html, f"{ai_pct:.1f}%", color, ""
 
     except Exception as e:
         err_msg = str(e)
         if "FFmpeg" in err_msg:
-            err_html = f"<div style='color:#dc2626;padding:30px;'><strong>❌ File Decode Error</strong><br><br>{err_msg}</div>"
+            err_html = f"<div style='color:#dc2626;padding:30px;'><strong>❌ File Decode Error</strong><br><br>{err_msg}<br><br><span style='color:#475569;font-size:0.9em;'>WhatsApp voice notes are often .opus or .ogg files disguised as .mp3. Try renaming the file to .ogg or exporting it differently.</span></div>"
         else:
             err_html = f"<div style='color:#dc2626;padding:30px;'>❌ Analysis Error: {err_msg}</div>"
         return None, err_html, "Error", "#dc2626", ""
 
 
 # ==========================================
-# 7. GRADIO UI — LIGHT ROYAL BLUE THEME
+# 7. GRADIO UI — ENHANCED AUDIO-ONLY
 # ==========================================
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@@ -405,31 +347,6 @@ CUSTOM_CSS = """
 }
 body { background: #e8f0fe !important; }
 
-/* Tabs */
-.tab-nav {
-    background: #dbeafe !important;
-    border-radius: 14px !important;
-    padding: 6px !important;
-    border: 1px solid #bfdbfe !important;
-    margin-bottom: 24px !important;
-    gap: 6px !important;
-}
-.tab-nav button {
-    color: #475569 !important;
-    font-weight: 600 !important;
-    border-radius: 10px !important;
-    padding: 10px 28px !important;
-    border: none !important;
-    background: transparent !important;
-    transition: all 0.3s ease !important;
-}
-.tab-nav button:hover { color: #1e40af !important; }
-.tab-nav button.selected {
-    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
-    color: #ffffff !important;
-    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3) !important;
-}
-
 /* Upload zones */
 .upload-container {
     background: #ffffff !important;
@@ -490,11 +407,26 @@ input, textarea {
     background: #ffffff !important;
     border: 1px solid #bfdbfe !important;
 }
+
+/* Audio player styling */
+audio {
+    border-radius: 12px !important;
+    width: 100% !important;
+}
+
+/* Result cards */
+.result-card {
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 24px;
+    border: 1px solid #bfdbfe;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
 """
 
 def build_ui():
     with gr.Blocks(
-        title="DeepFake AI Forensics",
+        title="DeepFake AI Forensics — Audio Detector",
         theme=gr.themes.Base(
             primary_hue="blue",
             neutral_hue="slate",
@@ -517,196 +449,136 @@ def build_ui():
             </div>
             <p style="font-size: 1.05em; color: #475569; margin-top: 14px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6;">
                 Neural + DSP ensemble detection for synthetic voice identification.
+                <br><span style="color: #2563eb; font-weight: 600;">Audio-only analysis</span>
             </p>
         </div>
         """)
 
-        with gr.Tabs():
-
+        with gr.Row():
             # ═══════════════════════════════════════════
-            # AUDIO TAB
+            # LEFT COLUMN — Upload
             # ═══════════════════════════════════════════
-            with gr.TabItem("🔊 Audio Detection", id=0):
-                with gr.Row():
-                    with gr.Column(scale=1, min_width=340):
-                        gr.Markdown("### Upload Audio File", elem_classes="section-title")
-                        
-                        gr.HTML("""
-                        <div style="margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px;">
-                            <span class="format-badge">MP3</span>
-                            <span class="format-badge">WAV</span>
-                            <span class="format-badge">M4A</span>
-                            <span class="format-badge">FLAC</span>
-                            <span class="format-badge">OGG</span>
-                            <span class="format-badge">OPUS</span>
-                        </div>
-                        <div style="font-size: 0.8em; color: #475569; margin-bottom: 16px; display: flex; align-items: center; gap: 6px;">
-                            <span style="font-size: 1.2em;">📎</span>
-                            <span>Maximum file size: <strong style="color: #1e40af;">50 MB</strong></span>
-                        </div>
-                        <div style="font-size: 0.75em; color: #94a3b8; background: #eff6ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.5;">
-                            💡 <strong>WhatsApp voice notes:</strong> If your file fails to upload, try renaming it from <code>.mp3</code> to <code>.ogg</code> or <code>.opus</code> before uploading.
-                        </div>
-                        """)
-                        
-                        audio_input = gr.Audio(
-                            label="",
-                            type="filepath",
-                            elem_classes="upload-container"
-                        )
-                        
-                        audio_waves = gr.HTML(value=EQUALIZER_HTML + '<div style="text-align:center;color:#64748b;font-size:0.85em;">Audio waveform ready for analysis</div>')
-                        
-                        audio_btn = gr.Button("🔍 Analyze Audio", variant="primary", size="lg")
-                        
-                        audio_score_text = gr.Textbox(
-                            label="",
-                            value="--%",
-                            interactive=False
-                        )
-
-                    with gr.Column(scale=2):
-                        gr.Markdown("### Forensic Analysis Report", elem_classes="section-title")
-                        
-                        audio_plot = gr.Image(
-                            label="",
-                            show_label=False,
-                            elem_classes="result-image"
-                        )
-                        
-                        audio_result = gr.HTML(
-                            value="""
-                            <div style="background: #ffffff; border: 2px dashed #bfdbfe; border-radius: 20px; padding: 50px 30px; text-align: center; margin-top: 8px;">
-                                <div style="font-size: 3em; margin-bottom: 16px;">📊</div>
-                                <div style="color: #64748b; font-size: 1.1em; font-weight: 600;">Results will appear here</div>
-                                <div style="color: #94a3b8; font-size: 0.9em; margin-top: 8px;">Upload an audio file and click analyze to begin</div>
-                            </div>
-                            """
-                        )
-
-                audio_btn.click(
-                    fn=detect_audio,
-                    inputs=[audio_input],
-                    outputs=[audio_plot, audio_result, audio_score_text, audio_score_text, audio_waves]
+            with gr.Column(scale=1, min_width=360):
+                gr.Markdown("### 📤 Upload Audio File", elem_classes="section-title")
+                
+                gr.HTML("""
+                <div style="margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px;">
+                    <span class="format-badge">MP3</span>
+                    <span class="format-badge">WAV</span>
+                    <span class="format-badge">M4A</span>
+                    <span class="format-badge">FLAC</span>
+                    <span class="format-badge">OGG</span>
+                    <span class="format-badge">OPUS</span>
+                    <span class="format-badge">AAC</span>
+                </div>
+                <div style="font-size: 0.8em; color: #475569; margin-bottom: 16px; display: flex; align-items: center; gap: 6px;">
+                    <span style="font-size: 1.2em;">📎</span>
+                    <span>Maximum file size: <strong style="color: #1e40af;">50 MB</strong></span>
+                </div>
+                <div style="font-size: 0.75em; color: #94a3b8; background: #eff6ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.5;">
+                    💡 <strong>WhatsApp voice notes:</strong> If your file fails to upload, try renaming it from <code>.mp3</code> to <code>.ogg</code> or <code>.opus</code> before uploading.
+                </div>
+                """)
+                
+                audio_input = gr.Audio(
+                    label="",
+                    type="filepath",
+                    elem_classes="upload-container"
                 )
-
-            # ═══════════════════════════════════════════
-            # VIDEO TAB
-            # ═══════════════════════════════════════════
-            with gr.TabItem("🎬 Video Detection", id=1):
-                with gr.Row():
-                    with gr.Column(scale=1, min_width=340):
-                        gr.Markdown("### Upload Video File", elem_classes="section-title")
-                        
-                        gr.HTML("""
-                        <div style="margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px;">
-                            <span class="format-badge">MP4</span>
-                            <span class="format-badge">MOV</span>
-                            <span class="format-badge">AVI</span>
-                            <span class="format-badge">MKV</span>
-                            <span class="format-badge">WEBM</span>
-                        </div>
-                        <div style="font-size: 0.8em; color: #475569; margin-bottom: 16px; display: flex; align-items: center; gap: 6px;">
-                            <span style="font-size: 1.2em;">📎</span>
-                            <span>Maximum file size: <strong style="color: #1e40af;">100 MB</strong></span>
-                        </div>
-                        """)
-                        
-                        video_input = gr.Video(
-                            label="",
-                            elem_classes="upload-container"
-                        )
-                        
-                        video_waves = gr.HTML(value=EQUALIZER_HTML + '<div style="text-align:center;color:#64748b;font-size:0.85em;">Video loaded — audio track ready for extraction</div>')
-                        
-                        video_btn = gr.Button("🔍 Analyze Video", variant="primary", size="lg")
-                        
-                        video_score_text = gr.Textbox(
-                            label="",
-                            value="--%",
-                            interactive=False
-                        )
-
-                    with gr.Column(scale=2):
-                        gr.Markdown("### Forensic Analysis Report", elem_classes="section-title")
-                        
-                        video_plot = gr.Image(
-                            label="",
-                            show_label=False
-                        )
-                        
-                        video_result = gr.HTML(
-                            value="""
-                            <div style="background: #ffffff; border: 2px dashed #bfdbfe; border-radius: 20px; padding: 50px 30px; text-align: center; margin-top: 8px;">
-                                <div style="font-size: 3em; margin-bottom: 16px;">🎬</div>
-                                <div style="color: #64748b; font-size: 1.1em; font-weight: 600;">Results will appear here</div>
-                                <div style="color: #94a3b8; font-size: 0.9em; margin-top: 8px;">Upload a video to extract & analyze its audio track</div>
-                            </div>
-                            """
-                        )
-
-                video_btn.click(
-                    fn=detect_video,
-                    inputs=[video_input],
-                    outputs=[video_plot, video_result, video_score_text, video_score_text, video_waves]
+                
+                audio_waves = gr.HTML(value=EQUALIZER_HTML + '<div style="text-align:center;color:#64748b;font-size:0.85em;">Audio waveform ready for analysis</div>')
+                
+                audio_btn = gr.Button("🔍 Analyze Audio", variant="primary", size="lg")
+                
+                audio_score_text = gr.Textbox(
+                    label="",
+                    value="--%",
+                    interactive=False
                 )
 
             # ═══════════════════════════════════════════
-            # ABOUT TAB
+            # RIGHT COLUMN — Results
             # ═══════════════════════════════════════════
-            with gr.TabItem("ℹ️ How It Works", id=2):
-                gr.HTML("""
-                <div style="max-width: 900px; margin: auto; padding: 20px 0 40px 0;">
-                    <h2 style="color: #1e293b; font-size: 1.7em; margin-bottom: 28px; text-align: center; font-weight: 700;">🧠 Detection Pipeline</h2>
-                    
-                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 36px;">
-                        <div style="background: #ffffff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
-                            <div style="font-size: 2em; margin-bottom: 10px;">🧠</div>
-                            <h3 style="color: #1e40af; margin: 0 0 6px 0; font-size: 1.1em;">Transformer Classifier</h3>
-                            <p style="color: #475569; font-size: 0.9em; line-height: 1.5; margin: 0;">
-                                <code style="background: #eff6ff; padding: 2px 6px; border-radius: 4px; color: #2563eb;">Hemgg/Deepfake-audio-detection</code> 
-                                base model running on GPU/CPU with HuggingFace Transformers.
-                            </p>
-                        </div>
-                        <div style="background: #ffffff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
-                            <div style="font-size: 2em; margin-bottom: 10px;">📊</div>
-                            <h3 style="color: #2563eb; margin: 0 0 6px 0; font-size: 1.1em;">DSP Ensemble</h3>
-                            <p style="color: #475569; font-size: 0.9em; line-height: 1.5; margin: 0;">
-                                MFCC variance + signal energy anomaly detection fused with neural output (60/40 weighting).
-                            </p>
-                        </div>
-                        <div style="background: #ffffff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
-                            <div style="font-size: 2em; margin-bottom: 10px;">🎬</div>
-                            <h3 style="color: #7c3aed; margin: 0 0 6px 0; font-size: 1.1em;">Video Extraction</h3>
-                            <p style="color: #475569; font-size: 0.9em; line-height: 1.5; margin: 0;">
-                                FFmpeg extracts mono 16kHz audio from any video format before forensic scanning.
-                            </p>
-                        </div>
+            with gr.Column(scale=2):
+                gr.Markdown("### 📊 Forensic Analysis Report", elem_classes="section-title")
+                
+                audio_plot = gr.Image(
+                    label="",
+                    show_label=False,
+                    elem_classes="result-image"
+                )
+                
+                audio_result = gr.HTML(
+                    value="""
+                    <div style="background: #ffffff; border: 2px dashed #bfdbfe; border-radius: 20px; padding: 50px 30px; text-align: center; margin-top: 8px;">
+                        <div style="font-size: 3em; margin-bottom: 16px;">📊</div>
+                        <div style="color: #64748b; font-size: 1.1em; font-weight: 600;">Results will appear here</div>
+                        <div style="color: #94a3b8; font-size: 0.9em; margin-top: 8px;">Upload an audio file and click analyze to begin</div>
                     </div>
+                    """
+                )
 
-                    <h3 style="color: #1e293b; margin-bottom: 16px; font-size: 1.2em;">📈 Score Interpretation</h3>
-                    <div style="background: #ffffff; border-radius: 14px; padding: 20px; border: 1px solid #bfdbfe; margin-bottom: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
-                        <div style="display: flex; align-items: center; margin-bottom: 10px; padding: 10px 14px; background: #f0fdf4; border-radius: 10px; border-left: 4px solid #059669;">
-                            <span style="color: #059669; font-weight: 700; min-width: 70px; font-size: 0.95em;">0–35%</span>
-                            <span style="color: #475569; margin-left: 12px; font-size: 0.9em;">🟢 Very likely genuine / human-created</span>
-                        </div>
-                        <div style="display: flex; align-items: center; margin-bottom: 10px; padding: 10px 14px; background: #fffbeb; border-radius: 10px; border-left: 4px solid #d97706;">
-                            <span style="color: #d97706; font-weight: 700; min-width: 70px; font-size: 0.95em;">35–65%</span>
-                            <span style="color: #475569; margin-left: 12px; font-size: 0.9em;">🟡 Uncertain / mixed signal — manual review recommended</span>
-                        </div>
-                        <div style="display: flex; align-items: center; padding: 10px 14px; background: #fef2f2; border-radius: 10px; border-left: 4px solid #dc2626;">
-                            <span style="color: #dc2626; font-weight: 700; min-width: 70px; font-size: 0.95em;">65–100%</span>
-                            <span style="color: #475569; margin-left: 12px; font-size: 0.9em;">🔴 Strong AI-generated / synthetic voice indicators</span>
-                        </div>
-                    </div>
+        audio_btn.click(
+            fn=detect_audio,
+            inputs=[audio_input],
+            outputs=[audio_plot, audio_result, audio_score_text, audio_score_text, audio_waves]
+        )
 
-                    <div style="background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 20px; color: #9a3412; font-size: 0.88em; line-height: 1.6;">
-                        <strong style="color: #c2410c;">⚠️ Important Limitations</strong><br><br>
-                        No automated detector is 100% accurate. Adversarial AI models may evade detection. 
-                        Compressed or noisy audio reduces reliability. Always use human expert judgment for critical decisions.
-                    </div>
+        # ═══════════════════════════════════════════
+        # HOW IT WORKS SECTION
+        # ═══════════════════════════════════════════
+        gr.HTML("""
+        <div style="max-width: 900px; margin: 40px auto 0 auto; padding: 20px 0 40px 0;">
+            <h2 style="color: #1e293b; font-size: 1.7em; margin-bottom: 28px; text-align: center; font-weight: 700;">🧠 Detection Pipeline</h2>
+            
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 36px;">
+                <div style="background: #ffffff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
+                    <div style="font-size: 2em; margin-bottom: 10px;">🧠</div>
+                    <h3 style="color: #1e40af; margin: 0 0 6px 0; font-size: 1.1em;">Transformer Classifier</h3>
+                    <p style="color: #475569; font-size: 0.9em; line-height: 1.5; margin: 0;">
+                        <code style="background: #eff6ff; padding: 2px 6px; border-radius: 4px; color: #2563eb;">Hemgg/Deepfake-audio-detection</code> 
+                        Wav2Vec 2.0 base model running on GPU/CPU with HuggingFace Transformers.
+                    </p>
                 </div>
-                """)
+                <div style="background: #ffffff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
+                    <div style="font-size: 2em; margin-bottom: 10px;">📊</div>
+                    <h3 style="color: #2563eb; margin: 0 0 6px 0; font-size: 1.1em;">DSP Ensemble</h3>
+                    <p style="color: #475569; font-size: 0.9em; line-height: 1.5; margin: 0;">
+                        MFCC variance + signal energy + zero-crossing rate + spectral centroid fused with neural output (80/20 weighting).
+                    </p>
+                </div>
+                <div style="background: #ffffff; border: 1px solid #bfdbfe; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
+                    <div style="font-size: 2em; margin-bottom: 10px;">🔧</div>
+                    <h3 style="color: #7c3aed; margin: 0 0 6px 0; font-size: 1.1em;">Universal Decoder</h3>
+                    <p style="color: #475569; font-size: 0.9em; line-height: 1.5; margin: 0;">
+                        FFmpeg extracts and normalizes audio from any format — including WhatsApp voice notes with disguised extensions.
+                    </p>
+                </div>
+            </div>
+
+            <h3 style="color: #1e293b; margin-bottom: 16px; font-size: 1.2em;">📈 Score Interpretation</h3>
+            <div style="background: #ffffff; border-radius: 14px; padding: 20px; border: 1px solid #bfdbfe; margin-bottom: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
+                <div style="display: flex; align-items: center; margin-bottom: 10px; padding: 10px 14px; background: #f0fdf4; border-radius: 10px; border-left: 4px solid #059669;">
+                    <span style="color: #059669; font-weight: 700; min-width: 70px; font-size: 0.95em;">0–40%</span>
+                    <span style="color: #475569; margin-left: 12px; font-size: 0.9em;">🟢 Very likely genuine / human-created</span>
+                </div>
+                <div style="display: flex; align-items: center; margin-bottom: 10px; padding: 10px 14px; background: #fffbeb; border-radius: 10px; border-left: 4px solid #d97706;">
+                    <span style="color: #d97706; font-weight: 700; min-width: 70px; font-size: 0.95em;">40–60%</span>
+                    <span style="color: #475569; margin-left: 12px; font-size: 0.9em;">🟡 Uncertain / mixed signal — manual review recommended</span>
+                </div>
+                <div style="display: flex; align-items: center; padding: 10px 14px; background: #fef2f2; border-radius: 10px; border-left: 4px solid #dc2626;">
+                    <span style="color: #dc2626; font-weight: 700; min-width: 70px; font-size: 0.95em;">60–100%</span>
+                    <span style="color: #475569; margin-left: 12px; font-size: 0.9em;">🔴 Strong AI-generated / synthetic voice indicators</span>
+                </div>
+            </div>
+
+            <div style="background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 20px; color: #9a3412; font-size: 0.88em; line-height: 1.6;">
+                <strong style="color: #c2410c;">⚠️ Important Limitations</strong><br><br>
+                No automated detector is 100% accurate. Adversarial AI models may evade detection. 
+                Compressed or noisy audio reduces reliability. Always use human expert judgment for critical decisions.
+            </div>
+        </div>
+        """)
 
         gr.HTML("""
         <div style="text-align: center; padding: 30px 20px; color: #94a3b8; font-size: 0.82em; border-top: 1px solid #bfdbfe; margin-top: 10px;">