Switch to Flask with custom dark theme UI

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy app files
+COPY . .
+
+# Expose port
+EXPOSE 7860
+
+# Run Flask app
+CMD ["python", "app.py"]

README.md

@@ -3,80 +3,24 @@ title: Instant Translat - AI Voice Translation
 emoji: 🌍
 colorFrom: purple
 colorTo: blue
-sdk: gradio
-sdk_version: "4.44.0"
-app_file: app.py
+sdk: docker
 pinned: true
 license: mit
-hardware: t4-small
 ---
 
 # 🌍 Instant Translat - AI Voice Translation
 
-**Real-time voice translation with AI - 200+ languages including Moroccan Darija**
+**Real-time voice translation with beautiful dark theme UI**
 
-## ✨ Features
+## Features
+- 🎤 Speech-to-Text (SeamlessM4T v2 Large)
+- 🌍 Translation (NLLB-200 - 200 languages + Darija)
+- 🔊 Text-to-Speech (Fish Audio S1)
+- 🎭 Voice Cloning
+- 🌙 Beautiful Dark Theme UI
 
-- 🎤 **Speech-to-Text** - SeamlessM4T v2 Large (101 languages)
-- 🌍 **Translation** - NLLB-200 (200 languages + Moroccan Darija)
-- 🔊 **Text-to-Speech** - Fish Audio S1 (Natural voice)
-- 🎭 **Voice Cloning** - Hear translation in your own voice!
-- 🧠 **Smart Mode** - Auto language detection
-
-## 🌍 Supported Languages
-
-- 🇲🇦 **Moroccan Arabic (Darija)** - الدارجة المغربية
-- 🇸🇦 Arabic (MSA)
-- 🇫🇷 French
-- 🇬🇧 English
-- 🇪🇸 Spanish
-- 🇩🇪 German
-- 🇮🇹 Italian
-- 🇵🇹 Portuguese
-- 🇨🇳 Chinese
-- 🇯🇵 Japanese
-- 🇰🇷 Korean
-- 🇷🇺 Russian
-- And 190+ more languages!
-
-## 🎯 How to Use
-
-1. **Select Languages**: Choose your source and target languages
-2. **Record**: Click the microphone button and speak clearly
-3. **Translate**: Click "Translate" button
-4. **Listen**: Hear the translation with natural voice
-5. **Voice Clone**: Enable to hear translation in your own voice!
-
-## 🔧 Technology
-
-- **STT**: Meta's SeamlessM4T v2 Large
-- **Translation**: Meta's NLLB-200
-- **TTS**: Fish Audio S1
-- **Voice Cloning**: Fish Audio API
-- **Framework**: Gradio + PyTorch
-
-## 🔒 Privacy & Security
-
-- ✅ No data stored
-- ✅ Real-time processing
-- ✅ Secure API calls
-- ✅ Open source
-
-## 📱 Use Cases
-
-- 🗣️ Real-time conversations
-- 📚 Language learning
-- 🌐 Travel assistance
-- 💼 Business meetings
-- 🎓 Education
-
-## 🚀 Coming Soon
-
-- 💳 Premium features with Apple Pay & Google Pay
-- 📱 Mobile app (iOS & Android)
-- 🎯 More languages
-- 🔊 More voice options
-
----
-
-**Made with ❤️ using Meta AI models**
+## Technology
+- Flask backend
+- Custom dark theme interface
+- Meta AI models
+- Fish Audio TTS

app.py

@@ -1,4 +1,4 @@
-import gradio as gr
+from flask import Flask, render_template, request, jsonify
 from transformers import (
     AutoProcessor, 
     SeamlessM4Tv2ForSpeechToText,
@@ -7,9 +7,13 @@ from transformers import (
 )
 import torch
 import numpy as np
+import base64
+import io
 import requests
 import os
 
+app = Flask(__name__)
+
 # ============================================================
 # Device Setup
 # ============================================================
@@ -34,62 +38,42 @@ nllb_model = AutoModelForSeq2SeqLM.from_pretrained(NLLB_MODEL)
 nllb_model = nllb_model.to(device).eval()
 print("✅ NLLB-200 loaded!")
 
-# ============================================================
-# Language Codes
-# ============================================================
-NLLB_LANGS = {
-    "🇲🇦 Moroccan Arabic (Darija)": "ary_Arab",
-    "🇸🇦 Arabic": "arb_Arab",
-    "🇫🇷 French": "fra_Latn",
-    "🇬🇧 English": "eng_Latn",
-    "🇪🇸 Spanish": "spa_Latn",
-    "🇩🇪 German": "deu_Latn",
-    "🇮🇹 Italian": "ita_Latn",
-    "🇵🇹 Portuguese": "por_Latn",
-    "🇨🇳 Chinese": "zho_Hans",
-    "🇯🇵 Japanese": "jpn_Jpan",
-    "🇰🇷 Korean": "kor_Hang",
-    "🇷🇺 Russian": "rus_Cyrl",
-}
+# Fish Audio API
+FISH_AUDIO_API_KEY = os.environ.get('FISH_AUDIO_API_KEY', '')
 
-STT_LANGS = {
-    "🇲🇦 Moroccan Arabic (Darija)": "arb",
-    "🇸🇦 Arabic": "arb",
-    "🇫🇷 French": "fra",
-    "🇬🇧 English": "eng",
-    "🇪🇸 Spanish": "spa",
-    "🇩🇪 German": "deu",
-    "🇮🇹 Italian": "ita",
-    "🇵🇹 Portuguese": "por",
-    "🇨🇳 Chinese": "cmn",
-    "🇯🇵 Japanese": "jpn",
-    "🇰🇷 Korean": "kor",
-    "🇷🇺 Russian": "rus",
+# Language mapping
+LANG_MAP = {
+    'ar-SA': ('arb', 'ary_Arab'),
+    'fr-FR': ('fra', 'fra_Latn'),
+    'en-US': ('eng', 'eng_Latn'),
+    'es-ES': ('spa', 'spa_Latn'),
+    'de-DE': ('deu', 'deu_Latn'),
 }
 
-FISH_AUDIO_API_KEY = os.environ.get('FISH_AUDIO_API_KEY', '')
-
-# ============================================================
-# Functions
-# ============================================================
+@app.route('/')
+def index():
+    return render_template('index.html')
 
-def translate_audio(audio, source_lang, target_lang, enable_voice_clone):
-    """Complete translation pipeline"""
-    if audio is None:
-        return None, "❌ Please record audio first"
-    
+@app.route('/process_audio', methods=['POST'])
+def process_audio():
     try:
-        # 1. STT
-        if isinstance(audio, tuple):
-            sample_rate, audio_data = audio
-            audio_data = audio_data.astype(np.float32)
-            if np.abs(audio_data).max() > 1.0:
-                audio_data = audio_data / 32768.0
-        else:
-            return None, "❌ Invalid audio format"
-        
-        src_code = STT_LANGS.get(source_lang, "eng")
-        
+        data = request.json
+        audio_b64 = data.get('audio')
+        source_lang = data.get('source_lang', 'ar-SA')
+        target_lang = data.get('target_lang', 'en-US')
+        
+        # Decode audio
+        audio_bytes = base64.b64decode(audio_b64)
+        
+        # Convert to numpy
+        import scipy.io.wavfile as wavfile
+        sample_rate, audio_data = wavfile.read(io.BytesIO(audio_bytes))
+        audio_data = audio_data.astype(np.float32)
+        if np.abs(audio_data).max() > 1.0:
+            audio_data = audio_data / 32768.0
+        
+        # STT
+        src_code = LANG_MAP.get(source_lang, ('eng', 'eng_Latn'))[0]
         inputs = stt_processor(
             audios=audio_data,
             sampling_rate=sample_rate,
@@ -105,9 +89,9 @@ def translate_audio(audio, source_lang, target_lang, enable_voice_clone):
         
         transcript = stt_processor.decode(output_tokens[0].tolist(), skip_special_tokens=True)
         
-        # 2. Translation
-        src_nllb = NLLB_LANGS.get(source_lang, "eng_Latn")
-        tgt_nllb = NLLB_LANGS.get(target_lang, "fra_Latn")
+        # Translation
+        src_nllb = LANG_MAP.get(source_lang, ('eng', 'eng_Latn'))[1]
+        tgt_nllb = LANG_MAP.get(target_lang, ('eng', 'eng_Latn'))[1]
         
         nllb_tokenizer.src_lang = src_nllb
         inputs = nllb_tokenizer(transcript, return_tensors="pt", padding=True, truncation=True, max_length=512).to(device)
@@ -124,242 +108,51 @@ def translate_audio(audio, source_lang, target_lang, enable_voice_clone):
         
         translation = nllb_tokenizer.decode(outputs[0], skip_special_tokens=True)
         
-        # 3. TTS
-        tts_audio = None
+        # TTS
+        tts_audio_b64 = None
         if FISH_AUDIO_API_KEY:
-            tts_audio = generate_tts(translation, enable_voice_clone, audio if enable_voice_clone else None)
-        
-        result_text = f"""
-<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; margin: 10px 0;">
-    <h3 style="color: white; margin: 0 0 10px 0;">🎤 {source_lang}</h3>
-    <p style="color: white; font-size: 1.1em; margin: 0;">{transcript}</p>
-</div>
-
-<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 20px; border-radius: 12px; margin: 10px 0;">
-    <h3 style="color: white; margin: 0 0 10px 0;">🌍 {target_lang}</h3>
-    <p style="color: white; font-size: 1.1em; margin: 0;">{translation}</p>
-</div>
-"""
-        
-        return tts_audio, result_text
+            tts_audio = generate_tts(translation)
+            if tts_audio:
+                tts_audio_b64 = base64.b64encode(tts_audio).decode('utf-8')
+        
+        return jsonify({
+            'success': True,
+            'original': transcript,
+            'translation': translation,
+            'audio': tts_audio_b64,
+            'source_lang': source_lang,
+            'target_lang': target_lang
+        })
         
     except Exception as e:
-        return None, f"❌ Error: {str(e)}"
+        return jsonify({'success': False, 'error': str(e)}), 500
 
-def generate_tts(text, clone_voice=False, reference_audio=None):
+def generate_tts(text):
     """Generate TTS using Fish Audio"""
     if not FISH_AUDIO_API_KEY:
         return None
     
     try:
         headers = {'Authorization': f'Bearer {FISH_AUDIO_API_KEY}'}
-        
-        if clone_voice and reference_audio:
-            import tempfile
-            import scipy.io.wavfile as wavfile
-            
-            with tempfile.NamedTemporaryFile(suffix='.wav', delete=False) as f:
-                wavfile.write(f.name, reference_audio[0], reference_audio[1])
-                audio_path = f.name
-            
-            with open(audio_path, 'rb') as f:
-                files = {'reference_audio': ('ref.wav', f.read(), 'audio/wav')}
-            
-            data = {
-                'text': text,
-                'format': 'mp3',
-                'mp3_bitrate': '192',
-                'latency': 'balanced',
-                'normalize': 'true',
-            }
-            
-            response = requests.post(
-                'https://api.fish.audio/v1/tts',
-                headers=headers,
-                files=files,
-                data=data,
-                timeout=120
-            )
-            
-            os.remove(audio_path)
-        else:
-            payload = {
-                'text': text,
-                'format': 'mp3',
-                'mp3_bitrate': 192,
-            }
-            
-            response = requests.post(
-                'https://api.fish.audio/v1/tts',
-                headers=headers,
-                json=payload,
-                timeout=60
-            )
+        payload = {
+            'text': text,
+            'format': 'mp3',
+            'mp3_bitrate': 192,
+        }
+        
+        response = requests.post(
+            'https://api.fish.audio/v1/tts',
+            headers=headers,
+            json=payload,
+            timeout=60
+        )
         
         if response.status_code == 200:
-            import tempfile
-            with tempfile.NamedTemporaryFile(suffix='.mp3', delete=False) as f:
-                f.write(response.content)
-                return f.name
+            return response.content
         
         return None
     except:
         return None
 
-# ============================================================
-# Custom CSS
-# ============================================================
-
-custom_css = """
-/* Modern Gradient Background */
-.gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    font-family: 'Inter', sans-serif;
-}
-
-/* Card Style */
-.contain {
-    background: rgba(255, 255, 255, 0.95) !important;
-    border-radius: 20px !important;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
-    padding: 30px !important;
-    backdrop-filter: blur(10px) !important;
-}
-
-/* Buttons */
-.primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 15px 30px !important;
-    font-weight: 600 !important;
-    font-size: 1.1em !important;
-    transition: all 0.3s ease !important;
-}
-
-.primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4) !important;
-}
-
-/* Input Fields */
-.input-audio, .dropdown {
-    border-radius: 12px !important;
-    border: 2px solid #e0e0e0 !important;
-}
-
-/* Headers */
-h1, h2, h3 {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: 700;
-}
-
-/* Markdown Content */
-.markdown-text {
-    line-height: 1.8;
-}
-"""
-
-# ============================================================
-# Gradio Interface with Custom Theme
-# ============================================================
-
-theme = gr.themes.Soft(
-    primary_hue="purple",
-    secondary_hue="pink",
-    neutral_hue="slate",
-    font=gr.themes.GoogleFont("Inter"),
-).set(
-    button_primary_background_fill="*primary_500",
-    button_primary_background_fill_hover="*primary_600",
-    button_primary_text_color="white",
-)
-
-with gr.Blocks(theme=theme, css=custom_css, title="Instant Translat") as demo:
-    gr.Markdown("""
-    # 🌍 Instant Translat
-    ### AI-Powered Voice Translation in 200+ Languages
-    
-    Translate your voice instantly with cutting-edge AI. Supports Moroccan Darija and 200+ languages!
-    """)
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### 🎤 Input")
-            
-            audio_input = gr.Audio(
-                label="Record Your Voice",
-                type="numpy",
-                sources=["microphone"],
-                elem_classes="input-audio"
-            )
-            
-            with gr.Row():
-                source_lang = gr.Dropdown(
-                    choices=list(NLLB_LANGS.keys()),
-                    value="🇲🇦 Moroccan Arabic (Darija)",
-                    label="🗣️ From",
-                    elem_classes="dropdown"
-                )
-                
-                target_lang = gr.Dropdown(
-                    choices=list(NLLB_LANGS.keys()),
-                    value="🇬🇧 English",
-                    label="🎯 To",
-                    elem_classes="dropdown"
-                )
-            
-            voice_clone = gr.Checkbox(
-                label="🎭 Clone My Voice",
-                value=True,
-                info="Hear translation in your own voice"
-            )
-            
-            translate_btn = gr.Button(
-                "🌍 Translate Now",
-                variant="primary",
-                size="lg",
-                elem_classes="primary"
-            )
-        
-        with gr.Column(scale=1):
-            gr.Markdown("### 🔊 Output")
-            
-            audio_output = gr.Audio(
-                label="Translation Audio",
-                type="filepath"
-            )
-            
-            text_output = gr.HTML(label="Translation Text")
-    
-    translate_btn.click(
-        translate_audio,
-        inputs=[audio_input, source_lang, target_lang, voice_clone],
-        outputs=[audio_output, text_output]
-    )
-    
-    gr.Markdown("""
-    ---
-    
-    ## ✨ Features
-    
-    - 🎤 **Speech Recognition** - Powered by Meta's SeamlessM4T v2 Large
-    - 🌍 **Translation** - 200+ languages with NLLB-200
-    - 🔊 **Natural Voice** - Fish Audio S1 TTS
-    - 🎭 **Voice Cloning** - Hear translation in your voice
-    
-    ## 🌍 Popular Languages
-    
-    🇲🇦 Moroccan Darija • 🇸🇦 Arabic • 🇫🇷 French • 🇬🇧 English • 🇪🇸 Spanish • 🇩🇪 German • 🇮🇹 Italian • 🇵🇹 Portuguese • 🇨🇳 Chinese • 🇯🇵 Japanese • 🇰🇷 Korean • 🇷🇺 Russian
-    
-    ---
-    
-    <div style="text-align: center; padding: 20px;">
-        <p style="color: #666;">Made with ❤️ using Meta AI • Powered by HuggingFace</p>
-    </div>
-    """)
-
-if __name__ == "__main__":
-    demo.launch()
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -1,9 +1,7 @@
-transformers>=4.40.0
+Flask==3.0.0
+transformers>=4.30.0
 torch>=2.0.0
-torchaudio
-sentencepiece
-protobuf
-gradio>=4.0.0
-numpy
 scipy
-accelerate
+numpy
+requests
+Werkzeug==3.0.0

static/enhanced.css

@@ -0,0 +1,620 @@
+/* 🌑 BABEL x GROK - Absolute Dark Theme */
+:root {
+    --bg-app: #000000;
+    --bg-sidebar: #000000;
+    --bg-main: #000000;
+    --bg-surface: #121212;
+    --bg-input: #1a1a1a;
+    --bg-input-hover: #222222;
+
+    --text-primary: #ffffff;
+    --text-secondary: #a3a3a3;
+    --text-tertiary: #525252;
+
+    --border-subtle: #27272a;
+    --border-active: #3f3f46;
+
+    --accent: #ffffff;
+    --accent-hover: #e5e5e5;
+
+    --recording: #ef4444;
+    --sidebar-width: 260px;
+    --input-max-width: 720px;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    background-color: var(--bg-app);
+    color: var(--text-primary);
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* 🏗️ LAYOUT GRID */
+.app-layout {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* ▌ SIDEBAR */
+.grok-sidebar {
+    width: var(--sidebar-width);
+    background-color: var(--bg-sidebar);
+    border-right: 1px solid var(--border-subtle);
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    flex-shrink: 0;
+    transition: transform 0.3s ease;
+    z-index: 50;
+}
+
+.sidebar-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding: 0 8px;
+}
+
+.sidebar-logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.new-chat {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.new-chat:hover {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+}
+
+.sidebar-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+}
+
+.menu-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.menu-item:hover,
+.menu-item.active {
+    background-color: var(--bg-surface);
+    color: var(--text-primary);
+}
+
+.menu-item i {
+    width: 20px;
+    text-align: center;
+}
+
+.sidebar-footer {
+    padding-top: 16px;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.user-profile:hover {
+    background-color: var(--bg-surface);
+}
+
+.avatar {
+    width: 32px;
+    height: 32px;
+    background: #333;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+}
+
+.info .name {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.info .status {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+/* ▌ MAIN CONTENT */
+.grok-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: var(--bg-main);
+}
+
+.main-header {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid transparent;
+    /* Hidden unless scrolled */
+}
+
+.model-badge {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    opacity: 0.7;
+}
+
+/* CHAT STAGE */
+.chat-stage {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    padding-bottom: 180px;
+    /* Space for input bar */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.chat-container {
+    width: 100%;
+    max-width: var(--input-max-width);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+/* EMPTY STATE */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10vh;
+    animation: fadeIn 0.5s ease;
+}
+
+.grok-logo-hero {
+    font-size: 4rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    letter-spacing: -0.04em;
+}
+
+.grok-hero-text {
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+}
+
+/* 🟢 INPUT AREA (The "Grok" Bar) */
+.grok-input-wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 24px;
+    padding-bottom: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    background: linear-gradient(to top, var(--bg-main) 80%, transparent);
+}
+
+.grok-input-bar {
+    width: 100%;
+    max-width: var(--input-max-width);
+    background-color: var(--bg-input);
+    border-radius: 28px;
+    /* Pill shape */
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--border-subtle);
+    transition: all 0.2s;
+    min-height: 64px;
+}
+
+.grok-input-bar:focus-within {
+    border-color: var(--border-active);
+    background-color: var(--bg-input-hover);
+}
+
+.input-icon {
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s;
+}
+
+.input-icon:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+}
+
+.input-status-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.status-text {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    font-weight: 400;
+}
+
+/* ORB ACTION BUTTON */
+.input-icon.action {
+    background-color: transparent;
+    color: var(--text-primary);
+    width: 48px;
+    height: 48px;
+}
+
+.input-icon.action:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.input-icon.action.recording {
+    color: var(--recording);
+    animation: pulse-red 1.5s infinite;
+}
+
+/* PRO CHIPS (Below Input) */
+.grok-chips {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.chip-select-wrapper {
+    position: relative;
+    background: var(--bg-surface);
+    border-radius: 8px;
+    padding: 0 12px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border-subtle);
+    min-width: 100px;
+}
+
+.chip-select-wrapper i {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    pointer-events: none;
+    margin-left: 8px;
+}
+
+.chip-select {
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    font-family: inherit;
+    width: 100%;
+    cursor: pointer;
+}
+
+.chip-select option {
+    background: #121212;
+    color: white;
+}
+
+.chip-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 1px solid var(--border-subtle);
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.chip-pill {
+    height: 36px;
+    padding: 0 16px;
+    border-radius: 18px;
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s;
+}
+
+.chip-pill:hover {
+    border-color: var(--text-secondary);
+    color: var(--text-primary);
+}
+
+.chip-pill.active {
+    background: var(--text-primary);
+    color: var(--bg-app);
+    border-color: var(--text-primary);
+}
+
+.chip-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border-subtle);
+    margin: 0 8px;
+}
+
+/* MESSAGES */
+.message-row {
+    display: flex;
+    width: 100%;
+    margin-bottom: 24px;
+}
+
+.user-row {
+    justify-content: flex-end;
+}
+
+.ai-row {
+    justify-content: flex-start;
+}
+
+.bubble {
+    max-width: 80%;
+    padding: 12px 18px;
+    border-radius: 18px;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.user-bubble {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border-subtle);
+}
+
+.ai-bubble {
+    background: transparent;
+    color: var(--text-primary);
+    padding-left: 0;
+}
+
+/* BARS ANIMATION for Orb */
+.bars {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    height: 20px;
+}
+
+.bar {
+    width: 3px;
+    height: 100%;
+    background: currentColor;
+    border-radius: 2px;
+}
+
+@keyframes pulse-red {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    50% {
+        transform: scale(1.1);
+        opacity: 0.8;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* 📱 MOBILE RESPONSIVE */
+@media (max-width: 768px) {
+    .grok-sidebar {
+        position: fixed;
+        left: -100%;
+        /* Hide */
+        height: 100%;
+        background: rgba(0, 0, 0, 0.95);
+        backdrop-filter: blur(10px);
+    }
+
+    .grok-sidebar.open {
+        left: 0;
+    }
+
+    .main-header {
+        justify-content: flex-start;
+        padding-left: 20px;
+    }
+
+    .grok-input-bar {
+        border-radius: 24px;
+    }
+
+    .chip-pill span {
+        display: none;
+        /* Icon only on mobile */
+    }
+}
+/*  MODAL SETTINGS (Grok Dark) */
+.modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.8);
+    display: none; /* JS toggles display: flex */
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: #121212;
+    border: 1px solid #333;
+    border-radius: 16px;
+    padding: 24px;
+    width: 90%;
+    max-width: 500px;
+    color: white;
+    position: relative;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+}
+
+.modal h2 { margin-bottom: 20px; font-size: 1.5rem; }
+
+.form-group { margin-bottom: 16px; }
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: #a3a3a3;
+    font-size: 0.9rem;
+}
+
+.form-control {
+    width: 100%;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    padding: 12px;
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+}
+
+.form-control:focus {
+    border-color: white;
+    outline: none;
+}
+
+.save-btn {
+    width: 100%;
+    background: white;
+    color: black;
+    font-weight: 700;
+    padding: 12px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-top: 16px;
+}
+
+.close-modal-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: transparent;
+    border: none;
+    color: #666;
+    font-size: 1.2rem;
+    cursor: pointer;
+}
+.close-modal-btn:hover { color: white; }
+
+
+
+/* MICROPHONE ORB BUTTON */
+#record-btn {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
+    border: 2px solid #444;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+#record-btn i {
+    font-size: 1.4rem;
+    color: #ffffff;
+}
+
+#record-btn:hover {
+    background: linear-gradient(135deg, #2d2d2d, #3d3d3d);
+    border-color: #666;
+    transform: scale(1.05);
+}
+
+#record-btn.recording {
+    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
+    border-color: #f87171 !important;
+    animation: pulse-record 1.5s infinite;
+}
+
+#record-btn.recording i {
+    color: white;
+}
+
+@keyframes pulse-record {
+    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
+    50% { transform: scale(1.05); box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.3); }
+}
+

static/enhanced.js

@@ -0,0 +1,217 @@
+// ENHANCED UI - Darija Cards + Audio Player Manager
+
+// Parse Darija text into structured cards
+function parseDarijaToCards(text) {
+    // Check if text contains Darija labels
+    const hasArabicLabel = text.includes('🇲🇦') || text.includes('الدارجة');
+    const hasArabiziLabel = text.includes('🔤') || text.includes('Darija (Arabizi)');
+
+    if (!hasArabicLabel && !hasArabiziLabel) {
+        // Regular text, return as-is
+        return `<div class="regular-text">${text.replace(/\n/g, '<br>')}</div>`;
+    }
+
+    // Split by the labels
+    const parts = text.split(/(?=🇲🇦)|(?=🔤)/);
+
+    let html = '<div class="darija-container">';
+
+    for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed) continue;
+
+        if (trimmed.startsWith('🇲🇦') || trimmed.includes('الدارجة')) {
+            // Arabic card
+            const content = trimmed
+                .replace(/🇲🇦.*?\n/, '')
+                .replace(/الدارجة.*?\n/, '')
+                .trim();
+
+            html += `
+                <div class="darija-card arabic">
+                    <div class="darija-card-header">
+                        <span class="emoji">🇲🇦</span>
+                        <span>الدارجة (Arabic)</span>
+                    </div>
+                    <div class="darija-card-content">${content}</div>
+                </div>
+            `;
+        } else if (trimmed.startsWith('🔤') || trimmed.includes('Darija (Arabizi)')) {
+            // Arabizi card
+            const content = trimmed
+                .replace(/🔤.*?\n/, '')
+                .replace(/Darija.*?\n/, '')
+                .trim();
+
+            html += `
+                <div class="darija-card arabizi">
+                    <div class="darija-card-header">
+                        <span class="emoji">🔤</span>
+                        <span>Darija (Arabizi)</span>
+                    </div>
+                    <div class="darija-card-content">${content}</div>
+                </div>
+            `;
+        }
+    }
+
+    html += '</div>';
+    return html;
+}
+
+// Audio Player Manager
+class AudioPlayer {
+    constructor() {
+        // Create a DEDICATED audio element for enhanced player
+        this.audio = new Audio();
+        this.audio.id = 'enhanced-audio-element';
+
+        this.container = null;
+        this.playBtn = null;
+        this.waveform = null;
+        this.timeDisplay = null;
+        this.isPlaying = false;
+        this.currentAudioSrc = null;
+
+        this.createPlayer();
+        this.setupEventListeners();
+    }
+
+    createPlayer() {
+        // Create player HTML
+        const playerHTML = `
+            <div class="audio-player-container" id="enhanced-audio-player" style="display: none;">
+                <div class="audio-player">
+                    <div class="player-controls">
+                        <button class="play-btn" id="player-play-btn">
+                            <i class="fa-solid fa-play"></i>
+                        </button>
+                        <div class="waveform" id="player-waveform">
+                            <div class="wave-bar"></div>
+                            <div class="wave-bar"></div>
+                            <div class="wave-bar"></div>
+                            <div class="wave-bar"></div>
+                            <div class="wave-bar"></div>
+                        </div>
+                    </div>
+                    <div class="player-actions">
+                        <button class="action-btn" id="player-download-btn">
+                            <i class="fa-solid fa-download"></i>
+                            <span>Download</span>
+                        </button>
+                        <button class="action-btn" id="player-close-btn">
+                            <i class="fa-solid fa-xmark"></i>
+                            <span>Close</span>
+                        </button>
+                    </div>
+                    <div class="time-display" id="player-time-display">0:00 / 0:00</div>
+                </div>
+            </div>
+        `;
+
+        // Insert into DOM
+        document.body.insertAdjacentHTML('beforeend', playerHTML);
+
+        // Get references
+        this.container = document.getElementById('enhanced-audio-player');
+        this.playBtn = document.getElementById('player-play-btn');
+        this.waveform = document.getElementById('player-waveform');
+        this.timeDisplay = document.getElementById('player-time-display');
+
+        document.getElementById('player-download-btn').onclick = () => this.download();
+        document.getElementById('player-close-btn').onclick = () => this.hide();
+    }
+
+    setupEventListeners() {
+        this.playBtn.onclick = () => this.togglePlay();
+
+        this.audio.addEventListener('play', () => {
+            this.isPlaying = true;
+            this.playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
+            this.waveform.classList.add('playing');
+        });
+
+        this.audio.addEventListener('pause', () => {
+            this.isPlaying = false;
+            this.playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+            this.waveform.classList.remove('playing');
+        });
+
+        this.audio.addEventListener('ended', () => {
+            this.isPlaying = false;
+            this.playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+            this.waveform.classList.remove('playing');
+        });
+
+        this.audio.addEventListener('timeupdate', () => {
+            this.updateTimeDisplay();
+        });
+    }
+
+    show(audioSrc) {
+        if (audioSrc) {
+            this.currentAudioSrc = audioSrc;
+            this.audio.src = audioSrc;
+        }
+
+        this.container.style.display = 'block';
+        setTimeout(() => {
+            this.container.classList.add('visible');
+        }, 10);
+
+        // Auto-play
+        this.audio.play().catch(err => {
+            console.log('Auto-play blocked:', err);
+        });
+    }
+
+    hide() {
+        this.container.classList.remove('visible');
+        setTimeout(() => {
+            this.container.style.display = 'none';
+        }, 300);
+        this.audio.pause();
+    }
+
+    togglePlay() {
+        if (this.isPlaying) {
+            this.audio.pause();
+        } else {
+            this.audio.play();
+        }
+    }
+
+    updateTimeDisplay() {
+        const current = this.formatTime(this.audio.currentTime);
+        const duration = this.formatTime(this.audio.duration || 0);
+        this.timeDisplay.textContent = `${current} / ${duration}`;
+    }
+
+    formatTime(seconds) {
+        if (isNaN(seconds)) return '0:00';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    download() {
+        if (!this.currentAudioSrc) return;
+
+        const a = document.createElement('a');
+        a.href = this.currentAudioSrc;
+        a.download = `translation_${Date.now()}.mp3`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+}
+
+// Initialize on load
+window.enhancedAudioPlayer = null;
+
+document.addEventListener('DOMContentLoaded', () => {
+    window.enhancedAudioPlayer = new AudioPlayer();
+});
+
+// Export functions
+window.parseDarijaToCards = parseDarijaToCards;

static/manifest.json

@@ -0,0 +1,17 @@
+{
+    "name": "Babel - Traducteur Vocal Instantané",
+    "short_name": "Babel",
+    "description": "Traduction vocale instantanée avec IA. Parlez, et le monde vous comprend.",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#0a0a0b",
+    "theme_color": "#0a0a0b",
+    "orientation": "portrait",
+    "icons": [
+        {
+            "src": "/static/favicon.ico",
+            "sizes": "64x64",
+            "type": "image/x-icon"
+        }
+    ]
+}

static/script.js

@@ -0,0 +1,1982 @@
+// Babel - Main Script (Cleaned & Optimized)
+
+let mediaRecorder;
+let audioChunks = [];
+let isRecording = false;
+let audioContext;
+let analyser;
+let micSource;
+let animationId;
+let recognition;
+let streamTimeout;
+let globalStream = null; // 🎤 PERSISTENT MIC STREAM
+let isRestarting = false; // Prevent double restart logic
+let isProcessingAudio = false; // Prevent duplicate audio processing
+let detectedLanguage = null; // Store detected language
+let isTTSPlaying = false; // Track TTS playback state to prevent mic feedback
+let textProcessingTriggered = false; // Track if text was already sent (prevents double-processing)
+let silenceDetectionActive = true; // Control silence detection loop
+let currentRecognitionLang = 'fr-FR'; // Track current recognition language for duplex mode
+
+// Global mode variable
+window.continuousMode = false;
+window.lastBotAudio = null; // 🌍 Exposed for Replay Button
+
+// 🆔 Cycle tracking to prevent ghost handler duplicates
+let currentCycleId = 0;
+
+// 🔊 SILENCE DETECTION THRESHOLDS (More sensitive to prevent hallucination)
+// 🔊 VOLUME THRESHOLD Config moved to top of file
+const VOLUME_THRESHOLD = 8;       // Noise Gate: Very sensitive (was 10)
+const SILENCE_LIMIT_MS = 5000;    // 5.0s silence - VERY Generous pause time
+const SILENCE_THRESHOLD = 8;      // Legacy support
+const MIN_RECORDING_TIME = 500;   // Minimum 0.5 second recording
+const MIN_SPEECH_VOLUME = 5;     // Minimum average volume to consider as speech
+const TYPING_SPEED_MS = 25;
+
+
+
+// CHAT UI HELPERS
+let recentMessages = new Set();
+
+// 🛡️ WHISPER HALLUCINATION FILTER - Common false outputs when silence/noise
+const HALLUCINATION_PHRASES = [
+    'thanks for watching',
+    'thank you for watching',
+    'subscribe',
+    'like and subscribe',
+    'see you next time',
+    'bye bye',
+    'goodbye',
+    'merci d\'avoir regardé',
+    'merci de votre attention',
+    'à bientôt',
+    'sous-titres',
+    'sous-titrage',
+    'subtitles by',
+    'transcribed by',
+    'music',
+    'applause',
+    '[music]',
+    '[applause]',
+    '...',
+    'you',
+    'the',
+    'i',
+    'a'
+];
+
+function isHallucination(text) {
+    if (!text) return true;
+    const cleaned = text.toLowerCase().trim();
+
+    // Too short = likely noise
+    if (cleaned.length < 3) return true;
+
+    // Check against known hallucinations
+    for (const phrase of HALLUCINATION_PHRASES) {
+        if (cleaned === phrase || cleaned.startsWith(phrase + '.') || cleaned.startsWith(phrase + '!')) {
+            console.log(`🚫 HALLUCINATION BLOCKED: "${text}"`);
+            return true;
+        }
+    }
+
+    // Single repeated character or word
+    if (/^(.)\1*$/.test(cleaned) || /^(\w+\s*)\1+$/.test(cleaned)) {
+        console.log(`🚫 REPEATED PATTERN BLOCKED: "${text}"`);
+        return true;
+    }
+
+    return false;
+}
+
+function createChatMessage(role, text, audioSrc = null, info = null, lang = null) {
+    const chatHistory = document.getElementById('chat-history');
+    if (!chatHistory) return;
+
+    // 🛡️ Block hallucinations at message level too
+    if (isHallucination(text)) {
+        console.log(`🚫 createChatMessage: Hallucination blocked: "${text}"`);
+        return;
+    }
+
+    // 🛡️ HOLY WAR VISUAL SHIELD (DEDUPLICATION)
+    // Prevent duplicate messages within 5 seconds
+    const normalizedText = text.trim().toLowerCase().substring(0, 100);
+    const messageHash = `${role}-${normalizedText}`;
+    if (recentMessages.has(messageHash)) {
+        console.log(`🛡️ VISUAL SHIELD: Blocked duplicate message: "${text.substring(0, 30)}..."`);
+        return;
+    }
+    recentMessages.add(messageHash);
+    setTimeout(() => recentMessages.delete(messageHash), 5000); // 5 seconds Blocking Period
+
+    const msgDiv = document.createElement('div');
+    msgDiv.className = `message ${role}-message`;
+    msgDiv.style.opacity = '0'; // For animation
+    msgDiv.style.cssText = `
+        background: ${role === 'user' ? 'rgba(30, 30, 35, 0.8)' : 'rgba(45, 45, 52, 0.8)'};
+        border-radius: 16px;
+        padding: 20px;
+        margin-bottom: 16px;
+        border: 1px solid ${role === 'user' ? 'rgba(60, 60, 70, 0.5)' : 'rgba(80, 80, 90, 0.5)'};
+    `;
+
+    // Language Badge (Always show)
+    const langBadge = document.createElement('div');
+    langBadge.className = 'lang-badge';
+    langBadge.style.cssText = `
+        display: inline-block;
+        background: ${role === 'user' ? 'rgba(60, 60, 70, 0.6)' : 'rgba(80, 80, 90, 0.6)'};
+        color: ${role === 'user' ? '#a0a0a8' : '#c0c0c8'};
+        padding: 6px 12px;
+        border-radius: 8px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 12px;
+    `;
+
+    // Determine language display
+    let langDisplay = lang || (role === 'user' ? 'Input' : 'Translation');
+    langBadge.innerText = `Language: ${langDisplay}`;
+    msgDiv.appendChild(langBadge);
+
+    // Text Content - Large and Clear
+    const textDiv = document.createElement('div');
+    textDiv.className = 'message-content';
+    textDiv.style.cssText = `
+        font-size: 1.25rem;
+        line-height: 1.7;
+        color: #ffffff;
+        font-weight: 400;
+        margin-top: 8px;
+    `;
+    textDiv.innerText = text;
+    msgDiv.appendChild(textDiv);
+
+    // Audio Player Integration (Only for Bot)
+    // 🛡️ FALLBACK: If audioSrc is missing, use Browser TTS!
+    if (role === 'bot') {
+        if (!audioSrc) {
+            console.warn("⚠️ No Audio from Server (API Limit/Error). Using Browser TTS Fallback.");
+            // Browser TTS Fallback
+            const utterance = new SpeechSynthesisUtterance(text);
+            // Try to set language (default to detected target or whatever)
+            // utterance.lang = 'en-US'; // Ideally passed in info
+            window.speechSynthesis.speak(utterance);
+        } else {
+            // Standard Server Audio
+            const audioContainer = document.createElement('div');
+            audioContainer.className = 'audio-container';
+            audioContainer.style.marginTop = '12px';
+            audioContainer.style.background = 'rgba(0,0,0,0.1)';
+            audioContainer.style.borderRadius = '8px';
+            audioContainer.style.padding = '8px';
+            audioContainer.style.display = 'flex';
+            audioContainer.style.alignItems = 'center';
+            audioContainer.style.gap = '10px';
+
+            const playBtn = document.createElement('button');
+            playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+            playBtn.className = 'icon-btn'; // Re-use existing class
+            playBtn.style.width = '32px';
+            playBtn.style.height = '32px';
+            playBtn.style.background = '#fff';
+            playBtn.style.color = '#333';
+
+            // Waveform Visual (Fake/Static for aesthetics)
+            const waveDiv = document.createElement('div');
+            waveDiv.style.flex = '1';
+            waveDiv.style.height = '4px';
+            waveDiv.style.background = 'rgba(255,255,255,0.3)';
+            waveDiv.style.borderRadius = '2px';
+            waveDiv.style.position = 'relative';
+
+            const progressDiv = document.createElement('div');
+            progressDiv.style.width = '0%';
+            progressDiv.style.height = '100%';
+            progressDiv.style.background = '#fff';
+            progressDiv.style.borderRadius = '2px';
+            progressDiv.style.transition = 'width 0.1s linear';
+            waveDiv.appendChild(progressDiv);
+
+            // Audio Logic
+            const audio = new Audio(audioSrc);
+            audio.preload = 'auto'; // Force immediate buffer
+
+            // 🌍 Update Global Replay Reference
+            window.lastBotAudio = audio;
+
+            playBtn.onclick = () => {
+                if (audio.paused) {
+                    audio.play();
+                    playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
+                } else {
+                    audio.pause();
+                    playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+                }
+            };
+
+            // 🔇 CRITICAL: Pause speech recognition when TTS starts (prevent feedback loop)
+            audio.onplay = () => {
+                isTTSPlaying = true;
+                console.log('🔊 TTS Started - Pausing speech recognition to prevent feedback');
+
+                // Pause browser speech recognition if active
+                if (recognition) {
+                    try {
+                        recognition.stop();
+                        console.log('⏸️ Paused speech recognition during TTS');
+                    } catch (e) { }
+                }
+
+                // 🎯 DUPLEX MODE: MediaRecorder keeps running (don't pause it)
+                // We only pause speech recognition to avoid feedback
+                console.log('🎙️ MediaRecorder continues running during TTS');
+            };
+
+            audio.onended = () => {
+                playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+                progressDiv.style.width = '0%';
+
+                // ▶️ CRITICAL: Resume after TTS
+                isTTSPlaying = false;
+                console.log('✅ TTS ended - Ready for next conversation');
+
+                // Update status for continuous mode
+                if (window.continuousMode) {
+                    statusText.innerText = '💤 Prêt pour la suite...';
+                    statusText.style.color = '#4a9b87';
+                    console.log('🔄 Continuous mode active - system will listen automatically');
+                }
+            };
+
+            // 🚨 Error handling to prevent crashes
+            audio.onerror = (e) => {
+                console.error('❌ TTS playback error:', e);
+                isTTSPlaying = false;
+                playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+
+                if (window.continuousMode) {
+                    statusText.innerText = '⚠️ Erreur TTS - Prêt';
+                    statusText.style.color = '#ff6b6b';
+                }
+            };
+
+            audio.ontimeupdate = () => {
+                const percent = (audio.currentTime / audio.duration) * 100;
+                progressDiv.style.width = `${percent}%`;
+            };
+
+            // 🚀 AUTO-PLAY + PRE-CHECK
+            // Ensure audio is playable immediately
+            audio.oncanplay = () => {
+                // Ready to start
+            };
+
+            audio.oncanplaythrough = () => {
+                // Fully ready
+            };
+
+            audioContainer.appendChild(playBtn);
+            audioContainer.appendChild(waveDiv);
+            msgDiv.appendChild(audioContainer);
+
+            // Latency Badge - REMOVED (cleaner UI)
+            // Users don't need to see engine names
+
+            // Immediate Trigger - Will auto-pause mic via onplay handler
+            const playPromise = audio.play();
+            if (playPromise !== undefined) {
+                playPromise.then(_ => {
+                    playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
+                }).catch(error => {
+                    console.log("Auto-play blocked by browser policy:", error);
+                    if (isTTSPlaying) {
+                        // If blocked, we must ensure we don't get stuck in "TTS Playing" state
+                        console.warn("⚠️ Autoplay blocked. Resetting state.");
+                        isTTSPlaying = false;
+                        playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
+                    }
+                });
+            }
+        } // End of else (Server Audio)
+    } // End of if (Bot Role)
+
+    chatHistory.appendChild(msgDiv);
+
+    // AUTO-SCROLL: Scroll both containers to show latest message
+    const scrollToBottom = () => {
+        // Scroll chat history (if it becomes scrollable)
+        chatHistory.scrollTo({
+            top: chatHistory.scrollHeight,
+            behavior: 'smooth'
+        });
+
+        // 🚀 SUGAR: Scroll the Window (Main Stage is not scrollable)
+        window.scrollTo({
+            top: document.body.scrollHeight,
+            behavior: 'smooth'
+        });
+    };
+
+    // Immediate scroll
+    scrollToBottom();
+
+    // Scroll again after animation completes
+    setTimeout(scrollToBottom, 300);
+    setTimeout(scrollToBottom, 600);
+
+    // Fade In Animation
+    setTimeout(() => {
+        msgDiv.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+        msgDiv.style.transform = 'translateY(10px)';
+        requestAnimationFrame(() => {
+            msgDiv.style.opacity = '1';
+            msgDiv.style.transform = 'translateY(0)';
+        });
+    }, 50);
+}
+
+// DOM Elements - declared but not initialized yet
+let recordBtn, statusText, settingsBtn, settingsModal, audioPlayer;
+let originalTextField, translatedTextField, quickLangSelector, sourceLangSelector, aiModelSelector;
+
+// 🔊 AUDIO UNLOCKER: Play silence on click to enable Autoplay
+function unlockAudioContext() {
+    try {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        gain.gain.value = 0.001;
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.start(0);
+        setTimeout(() => { osc.stop(); ctx.close(); }, 100);
+        console.log("🔓 Audio Autoplay Unlocked");
+    } catch (e) {
+        console.log("Audio unlock not needed");
+    }
+}
+
+// ============================================================
+// 🎯 INITIALIZE EVERYTHING WHEN DOM IS READY
+// ============================================================
+function initializeApp() {
+    console.log('🎯 initializeApp() called');
+
+    // 🚀 FULL AUTO CONFIGURATION (User Request)
+    if (!localStorage.getItem('googleKey')) {
+        console.log('💎 FULL AUTO: Injecting Google API Key...');
+        localStorage.setItem('googleKey', 'AIzaSyDB9wiqXsy1dG9OLU9r4Tar8oDdeVy4NOQ');
+    }
+
+    // Get DOM Elements
+    recordBtn = document.getElementById('record-btn');
+    statusText = document.getElementById('status-placeholder');
+    settingsBtn = document.getElementById('settings-trigger');
+    settingsModal = document.getElementById('settings-modal');
+    audioPlayer = document.getElementById('audio-player');
+    originalTextField = document.getElementById('original-text');
+    translatedTextField = document.getElementById('translated-text');
+    quickLangSelector = document.getElementById('target-lang-quick'); // 🔧 FIXED: Use correct ID
+    sourceLangSelector = document.getElementById('source-lang-selector');
+    aiModelSelector = document.getElementById('ai-model');
+
+    console.log('📦 DOM Elements loaded:');
+    console.log('  - recordBtn:', recordBtn ? '✅ FOUND' : '❌ NOT FOUND');
+    console.log('  - statusText:', statusText ? '✅ FOUND' : '❌ NOT FOUND');
+
+    if (!recordBtn) {
+        console.error('❌❌❌ CRITICAL: record-btn NOT FOUND IN DOM! ❌❌❌');
+        return;
+    }
+
+    // 🎙️ BUTTON CLICK HANDLER
+    console.log('🔧 Attaching click handler...');
+
+    recordBtn.onclick = async function (e) {
+        console.log('🔘🔘🔘 BUTTON CLICKED! 🔘🔘🔘');
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Unlock audio
+        unlockAudioContext();
+
+        if (!window.continuousMode) {
+            // START
+            console.log('▶️ Starting continuous mode...');
+            window.continuousMode = true;
+            this.classList.add('active');
+
+            if (statusText) {
+                statusText.innerText = 'Écoute en continu...';
+                statusText.style.color = '#4a9b87';
+            }
+
+            try {
+                await listenContinuously();
+            } catch (error) {
+                console.error('❌ Error:', error);
+                window.continuousMode = false;
+                this.classList.remove('active');
+                if (statusText) {
+                    statusText.innerText = 'Erreur: ' + error.message;
+                    statusText.style.color = '#ff6b6b';
+                }
+            }
+        } else {
+            // STOP
+            console.log('⏹️ Stopping continuous mode...');
+            window.continuousMode = false;
+            this.classList.remove('active');
+            this.classList.remove('active-speech'); // ✅ FIXED: CSS class name
+            this.classList.remove('processing');    // ✅ FIXED: Remove processing state too
+
+            // Stop all components
+            try {
+                if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+                    mediaRecorder.stop();
+                }
+                if (recognition) {
+                    recognition.stop();
+                    recognition = null;
+                }
+                if (audioContext && audioContext.state !== 'closed') {
+                    audioContext.close();
+                }
+            } catch (e) {
+                console.warn('Cleanup warning:', e);
+            }
+
+            // 🧹 CRITICAL: Full memory cleanup to keep system fast
+            console.log('🧹 Cleaning up memory and cache...');
+
+            audioContext = null;
+            analyser = null;
+            micSource = null;
+            mediaRecorder = null;
+            audioChunks = [];
+            isRecording = false;
+            isProcessingAudio = false;
+            speechDetected = false;
+            textProcessingTriggered = false;
+
+            // Clear audio buffers
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+
+            // ⚡ Clear backend conversation cache for fresh start
+            fetch('/clear_cache', { method: 'POST' })
+                .then(res => res.json())
+                .then(data => console.log(`✅ Backend cache cleared: ${data.cleared} entries`))
+                .catch(e => console.warn('Cache clear failed:', e));
+
+            if (statusText) {
+                statusText.innerText = 'Arrêté';
+                statusText.style.color = '#888';
+            }
+            console.log('✅ Stopped');
+
+            // Kill global stream on full stop
+            if (globalStream) {
+                try {
+                    globalStream.getTracks().forEach(track => track.stop());
+                } catch (e) { }
+                globalStream = null;
+            }
+        }
+    };
+
+    // 📱 MOBILE TOUCH SUPPORT (CRITICAL FIX)
+    // Desktop: onclick works
+    // Mobile: Need touchstart/touchend
+    let touchHandled = false;
+
+    recordBtn.addEventListener('touchstart', (e) => {
+        e.preventDefault(); // Prevent mouse event simulation
+        touchHandled = true;
+        recordBtn.onclick(e); // Trigger the same logic
+    }, { passive: false });
+
+    recordBtn.addEventListener('touchend', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+
+    // Fallback for desktop
+    recordBtn.addEventListener('click', (e) => {
+        if (touchHandled) {
+            touchHandled = false;
+            return; // Already handled by touch
+        }
+        // Desktop logic continues normally
+    });
+
+    // Disable context menu
+    recordBtn.oncontextmenu = (e) => e.preventDefault();
+
+    // ============================================================
+    // 🌍 LANGUAGE QUICK SELECTORS - Event Handlers
+    // ============================================================
+
+    const sourceLangQuick = document.getElementById('source-lang-quick');
+    const targetLangQuick = document.getElementById('target-lang-quick');
+    const swapLangsBtn = document.getElementById('swap-langs');
+
+    // 🎯 SOURCE LANGUAGE CHANGE
+    if (sourceLangQuick) {
+        sourceLangQuick.addEventListener('change', function () {
+            const newLang = this.value;
+            console.log(`🔄 Source language changed to: ${newLang}`);
+
+            // Save to localStorage for persistence
+            localStorage.setItem('sourceLangQuick', newLang);
+
+            // Update status to show change
+            if (statusText) {
+                statusText.innerText = `📍 Source: ${this.options[this.selectedIndex].text}`;
+                statusText.style.color = '#4a9b87';
+                setTimeout(() => {
+                    statusText.innerText = 'Prêt';
+                    statusText.style.color = '#888';
+                }, 2000);
+            }
+
+            // Restart recognition with new language if currently recording
+            if (window.continuousMode && recognition) {
+                console.log('🔄 Restarting recognition with new source language...');
+                try { recognition.stop(); } catch (e) { }
+                // It will auto-restart with new language via onend handler
+            }
+        });
+
+        // Restore saved value
+        const savedSource = localStorage.getItem('sourceLangQuick');
+        if (savedSource) {
+            sourceLangQuick.value = savedSource;
+        }
+    }
+
+    // 🎯 TARGET LANGUAGE CHANGE
+    if (targetLangQuick) {
+        targetLangQuick.addEventListener('change', function () {
+            const newLang = this.value;
+            console.log(`🎯 Target language changed to: ${newLang}`);
+
+            // Save to localStorage for persistence
+            localStorage.setItem('targetLangQuick', newLang);
+
+            // Also update the main selector if it exists
+            if (quickLangSelector) {
+                quickLangSelector.value = newLang;
+            }
+
+            // Update status to show change
+            if (statusText) {
+                statusText.innerText = `🎯 Cible: ${this.options[this.selectedIndex].text}`;
+                statusText.style.color = '#4a9b87';
+                setTimeout(() => {
+                    statusText.innerText = 'Prêt';
+                    statusText.style.color = '#888';
+                }, 2000);
+            }
+        });
+
+        // Restore saved value
+        const savedTarget = localStorage.getItem('targetLangQuick');
+        if (savedTarget) {
+            targetLangQuick.value = savedTarget;
+        }
+    }
+
+    // 🔄 SWAP LANGUAGES BUTTON
+    if (swapLangsBtn) {
+        swapLangsBtn.addEventListener('click', function () {
+            console.log('🔄 Swapping languages...');
+
+            const sourceSelect = document.getElementById('source-lang-quick');
+            const targetSelect = document.getElementById('target-lang-quick');
+
+            if (!sourceSelect || !targetSelect) {
+                console.warn('Language selectors not found');
+                return;
+            }
+
+            // Get current values
+            const currentSource = sourceSelect.value;
+            const currentTarget = targetSelect.value;
+
+            // Map target names to source codes
+            const targetToSourceMap = {
+                'French': 'fr-FR',
+                'English': 'en-US',
+                'Arabic': 'ar-SA',
+                'Moroccan Darija': 'ar-SA',
+                'Spanish': 'es-ES',
+                'German': 'de-DE'
+            };
+
+            // Map source codes to target names
+            const sourceToTargetMap = {
+                'fr-FR': 'French',
+                'en-US': 'English',
+                'ar-SA': 'Arabic',
+                'es-ES': 'Spanish',
+                'de-DE': 'German',
+                'auto': 'French' // Default when swapping from auto
+            };
+
+            // Calculate new values
+            const newSourceCode = targetToSourceMap[currentTarget] || 'auto';
+            const newTargetName = sourceToTargetMap[currentSource] || 'French';
+
+            // Apply swap
+            sourceSelect.value = newSourceCode;
+            targetSelect.value = newTargetName;
+
+            // Save to localStorage
+            localStorage.setItem('sourceLangQuick', newSourceCode);
+            localStorage.setItem('targetLangQuick', newTargetName);
+
+            // Visual feedback
+            this.style.transform = 'rotate(180deg)';
+            setTimeout(() => {
+                this.style.transform = 'rotate(0deg)';
+            }, 300);
+
+            // Update status
+            if (statusText) {
+                statusText.innerText = `🔄 ${sourceSelect.options[sourceSelect.selectedIndex].text} ↔ ${targetSelect.options[targetSelect.selectedIndex].text}`;
+                statusText.style.color = '#60a5fa';
+                setTimeout(() => {
+                    statusText.innerText = 'Prêt';
+                    statusText.style.color = '#888';
+                }, 2500);
+            }
+
+            console.log(`✅ Swapped: ${currentSource} → ${newTargetName}, ${currentTarget} → ${newSourceCode}`);
+
+            // Restart recognition if active
+            if (window.continuousMode && recognition) {
+                try { recognition.stop(); } catch (e) { }
+            }
+        });
+    }
+
+    console.log('�� Language quick selectors initialized');
+    console.log('✅✅✅ BUTTON HANDLER ATTACHED! ✅✅✅');
+}
+
+// Run initialization when DOM is ready
+if (document.readyState === 'loading') {
+    console.log('📄 DOM not ready, waiting for DOMContentLoaded...');
+    document.addEventListener('DOMContentLoaded', initializeApp);
+} else {
+    console.log('📄 DOM already ready, initializing now...');
+    initializeApp();
+}
+
+// --- CONTINUOUS CONVERSATION MODE ---
+
+async function listenContinuously() {
+    if (!window.continuousMode) {
+        console.log("❌ listenContinuously called but window.continuousMode is false");
+        return;
+    }
+
+    // 🛡️ RECURSION GUARD: If we are already recording, don't start another loop!
+    if (isRecording) {
+        console.log("⚠️ Already recording, skipping duplicate start request");
+        return;
+    }
+
+    console.log("🎙️ Starting NEW listening cycle...");
+
+    try {
+        // 🔥 CRITICAL: Increment cycle ID to invalidate old handlers
+        currentCycleId++;
+        const thisCycleId = currentCycleId;
+        console.log(`🆔 Cycle ID: ${thisCycleId}`);
+
+        // 🔥 CRITICAL: Clean up old MediaRecorder to prevent ghost handlers
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+            try {
+                console.log("🧹 Cleaning up old mediaRecorder");
+                // Don't call stop() - it will trigger the old onstop handler!
+                // Just abandon it and create a new one
+                mediaRecorder.ondataavailable = null;
+                mediaRecorder.onstop = null;
+                mediaRecorder = null;
+            } catch (e) { console.warn("Cleanup warning:", e); }
+        }
+
+        isRecording = true;
+        audioChunks = [];
+        let speechDetected = false; // Reset speech detection
+        textProcessingTriggered = false; // Reset flag
+        silenceDetectionActive = true; // Enable silence detection
+
+        let stream;
+
+        // 🚀 REUSE STREAM IF AVAILABLE
+        if (globalStream && globalStream.active) {
+            console.log("♻️ Reusing existing microphone stream");
+            stream = globalStream;
+        } else {
+            console.log("🎤 Requesting NEW microphone access...");
+            stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            globalStream = stream;
+            console.log("✅ Microphone access granted");
+        }
+
+        // 🎯 REAL-TIME TRANSCRIPTION: Start immediately
+        startRealTimeTranscription();
+
+        // Setup audio analysis for silence detection
+        // Reuse context if active to reduce click/pop
+        if (!audioContext || audioContext.state === 'closed') {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        }
+
+        analyser = audioContext.createAnalyser();
+        micSource = audioContext.createMediaStreamSource(stream);
+        micSource.connect(analyser);
+        analyser.fftSize = 256;
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+
+        let silenceStart = Date.now();
+        // speechDetected already declared above
+
+        mediaRecorder = new MediaRecorder(stream);
+
+        mediaRecorder.ondataavailable = e => {
+            // 🛡️ Only process if this is still the current cycle
+            if (thisCycleId === currentCycleId) {
+                audioChunks.push(e.data);
+            } else {
+                console.warn(`⚠️ Ignoring data from old cycle ${thisCycleId} (current: ${currentCycleId})`);
+            }
+        };
+
+        mediaRecorder.onstop = async () => {
+            // 🛡️ CRITICAL: Ignore events from old cycles
+            if (thisCycleId !== currentCycleId) {
+                console.warn(`⚠️ Ignoring onstop from old cycle ${thisCycleId} (current: ${currentCycleId})`);
+                return;
+            }
+
+            console.log(`🛑 Chunk finalized (Cycle ${thisCycleId}).`);
+
+            // DON'T stop transcription here if we want continuous, but we do need to reset it
+            // for the new chunk context. Actually, let's keep it simply "Running".
+
+            // Process audio if we have valid speech
+            if (audioChunks.length > 0 && speechDetected) {
+                const blob = new Blob(audioChunks, { type: 'audio/wav' });
+
+                if (blob.size > 2000) {
+                    // 🚀 INSTANT RESTART: Don't wait for processing!
+                    // Trigger processing in background
+                    statusText.innerText = 'Traitement...';
+                    statusText.style.color = '#4a9b87';
+
+                    // We DO NOT await here. We fire and forget (mostly), 
+                    // or let it handle the UI updates asynchronously.
+                    // ⚡ OPTIMIZATION: Pass 'true' to bypass redundant silence check (we already checked it!)
+                    processAudio(blob, true).catch(e => console.error("Processing error:", e));
+
+                }
+            }
+
+            // 🔄 INSTANT RESTART (Synchronized)
+            // Immediately restart listening *unless* completely stopped
+            if (window.continuousMode) {
+                // Reset flags for next turn - NOW it is safe to reset
+                speechDetected = false;
+
+                // 🚀 AGGRESSIVE IMMEDIATE RESTART
+                // Use 0ms delay to unblock the event loop but start ASAP
+                setTimeout(() => {
+                    if (window.continuousMode) {
+                        console.log("🔄 Instant Restart Triggered (Parallel)");
+                        listenContinuously();
+                    }
+                }, 0);
+            }
+
+            // NOTE: We do NOT close audioContext here anymore, to keep it 'warm'.
+            // Only disconnect analyser to save CPU if needed, but keeping it open is faster.
+            try {
+                if (micSource) micSource.disconnect();
+                if (analyser) analyser.disconnect();
+                if (animationId) cancelAnimationFrame(animationId);
+            } catch (e) { }
+        };
+
+        mediaRecorder.start();
+
+        if (animationId) cancelAnimationFrame(animationId);
+
+        // 🎯 Continuous monitoring with better noise filtering
+        let consecutiveSpeechFrames = 0;
+        let consecutiveSilenceFrames = 0;
+        const SPEECH_FRAMES_THRESHOLD = 3; // React faster to speech (3 frames = ~50ms)
+        const SILENCE_FRAMES_THRESHOLD = 1200; // ~20.0s silence (User request: "Keep button working / Don't cut")
+
+        function monitorAudio() {
+            if (!window.continuousMode || !isRecording) {
+                console.log("🛑 Audio monitoring stopped");
+                return;
+            }
+
+            // 🔇 Skip monitoring while TTS is playing
+            if (isTTSPlaying) {
+                requestAnimationFrame(monitorAudio);
+                return;
+            }
+
+            analyser.getByteFrequencyData(dataArray);
+            let sum = 0;
+            for (let i = 0; i < bufferLength; i++) sum += dataArray[i];
+            const average = sum / bufferLength;
+
+            // 🎯 Better noise filtering
+            // Use local VOLUME_THRESHOLD if defined, else generic 10
+            if (average > 4) { // Hardcoded decent threshold for consistency
+                consecutiveSpeechFrames++;
+                consecutiveSilenceFrames = 0;
+
+                // Only mark as speech after consecutive loud frames (avoid false starts)
+                if (consecutiveSpeechFrames >= SPEECH_FRAMES_THRESHOLD && !speechDetected) {
+                    speechDetected = true;
+                    silenceStart = Date.now();
+                    console.log("🗣️ Speech confirmed (filtered noise)");
+                    statusText.innerText = '🎤 Enregistrement...';
+                    statusText.style.color = '#ff4444';
+                    recordBtn.classList.add('active-speech'); // ✅ FIXED: Match CSS class
+                }
+            } else {
+                consecutiveSpeechFrames = 0;
+                consecutiveSilenceFrames++;
+
+                if (!speechDetected) {
+                    // Still waiting for speech
+                    if (!statusText.innerText.includes('Traitement')) {
+                        statusText.innerText = '💤 En attente de parole...';
+                        statusText.style.color = '#888';
+                    }
+                } else {
+                    // Speech detected before, now checking for end
+                    if (consecutiveSilenceFrames >= SILENCE_FRAMES_THRESHOLD) {
+                        console.log('🤫 Silence confirmed - ending speech');
+                        consecutiveSpeechFrames = 0;
+                        consecutiveSilenceFrames = 0;
+                        // speechDetected = false; // ❌ DON'T RESET HERE! Needed for onstop check.
+
+                        isRecording = false;
+                        recordBtn.classList.remove('active-speech'); // ✅ FIXED: Match CSS class
+
+                        // Stop recorder to process
+                        if (mediaRecorder && mediaRecorder.state === 'recording') {
+                            mediaRecorder.stop();
+                        }
+                        return;
+                    }
+                }
+            }
+
+            animationId = requestAnimationFrame(monitorAudio);
+        }
+
+        monitorAudio();
+
+    } catch (err) {
+        console.error('Erreur listenContinuously:', err);
+        window.continuousMode = false;
+        recordBtn.classList.remove('active');
+    }
+}
+
+// --- REAL-TIME TRANSCRIPTION (Consolidated & Cleaned) ---
+// This function handles browser-based speech recognition for instant feedback
+// ⚠️ NOTE: Browser SpeechRecognition does NOT support Darija well - we use it only for visual feedback
+
+let arabicModeActive = false; // Track if we're in Arabic/Darija mode
+
+function startRealTimeTranscription() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    // 1. Check Browser Support
+    if (!SpeechRecognition) {
+        console.warn("⚠️ Browser Speech Recognition not supported.");
+        return;
+    }
+
+    // 2. Prevent Multiple Instances
+    if (recognition) {
+        try { recognition.stop(); } catch (e) { }
+        recognition = null;
+    }
+
+    // 🧹 Reset global capture
+    window.currentTranscript = "";
+
+    try {
+        // 3. Get language from QUICK SELECTORS (visible in UI)
+        const sourceLangQuick = document.getElementById('source-lang-quick');
+        const targetLangQuick = document.getElementById('target-lang-quick');
+
+        const targetLang = targetLangQuick?.value || quickLangSelector?.value || 'French';
+        let sourceLang = sourceLangQuick?.value || localStorage.getItem('sourceLangQuick') || 'auto';
+
+        console.log(`🎯 Quick Selectors: Source=${sourceLang}, Target=${targetLang}`);
+
+        // 🇲🇦 SMART MODE: Only activate if source is 'auto'
+        if (sourceLang === 'auto') {
+            // Smart detection based on target language
+            if (targetLang === 'French') {
+                sourceLang = 'ar-SA'; // Likely speaking Arabic/Darija
+                arabicModeActive = true;
+                console.log('🇲🇦 AUTO MODE: Target=French → Assuming Arabic/Darija');
+            } else if (targetLang === 'Moroccan Darija' || targetLang === 'Arabic') {
+                sourceLang = 'fr-FR'; // Likely speaking French
+                arabicModeActive = false;
+                console.log('🇫🇷 AUTO MODE: Target=Arabic → Assuming French');
+            } else if (targetLang === 'English') {
+                // Default to Arabic for Moroccan users, but check cache
+                sourceLang = detectedLanguage === 'French' ? 'fr-FR' : 'ar-SA';
+                arabicModeActive = sourceLang === 'ar-SA';
+                console.log(`🌍 AUTO MODE: Target=English → Assuming ${sourceLang}`);
+            } else {
+                sourceLang = 'fr-FR'; // Default fallback
+                arabicModeActive = false;
+            }
+        } else {
+            // MANUAL MODE: User selected specific source language
+            arabicModeActive = sourceLang === 'ar-SA';
+            console.log(`📌 MANUAL MODE: Source=${sourceLang} (Arabic mode: ${arabicModeActive})`);
+        }
+
+        // 4. Configure Recognition with selected language
+        recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.lang = sourceLang;
+        currentRecognitionLang = sourceLang;
+
+        console.log(`🎤 Browser Recognition: ${sourceLang} (Arabic mode: ${arabicModeActive})`);
+
+        // 5. Event Handlers
+        recognition.onstart = () => {
+            console.log("✅ Real-time transcription active");
+            if (navigator.vibrate) navigator.vibrate(50); // Haptic feedback
+        };
+
+        recognition.onerror = (event) => {
+            console.warn("❌ Recognition error:", event.error);
+            if (event.error === 'not-allowed') {
+                statusText.innerText = "⚠️ Accès micro refusé";
+                statusText.style.color = "yellow";
+            } else if (event.error !== 'aborted') {
+                // Restart recognition on non-critical errors (in continuous mode)
+                if (window.continuousMode && isRecording) {
+                    console.log("🔄 Restarting recognition after error...");
+                    setTimeout(() => {
+                        if (window.continuousMode && isRecording) {
+                            try { recognition.start(); } catch (e) { }
+                        }
+                    }, 500);
+                }
+            }
+        };
+
+        recognition.onend = () => {
+            console.log("🔄 Recognition ended");
+
+            // Auto-restart in continuous mode (unless TTS is playing)
+            if (window.continuousMode && isRecording) {
+                if (isTTSPlaying) {
+                    console.log("⏸️ TTS is playing - recognition will restart when TTS ends");
+                    // Don't restart now - the audio.onended handler will do it
+                } else {
+                    console.log("🔄 Auto-restarting recognition for continuous mode...");
+                    setTimeout(() => {
+                        if (window.continuousMode && isRecording && !isTTSPlaying) {
+                            try {
+                                recognition.start();
+                                console.log("✅ Recognition restarted successfully");
+                            } catch (e) {
+                                console.warn("Could not restart recognition:", e);
+                            }
+                        }
+                    }, 300);
+                }
+            }
+        };
+
+        recognition.onresult = (event) => {
+            let interimTranscript = '';
+            let finalTranscript = '';
+
+            for (let i = event.resultIndex; i < event.results.length; ++i) {
+                const transcript = event.results[i][0].transcript;
+                if (event.results[i].isFinal) {
+                    finalTranscript += transcript;
+                } else {
+                    interimTranscript += transcript;
+                }
+            }
+
+            // ✨ AFFICHAGE INSTANTANÉ - LYRICS STYLE
+            const fullText = finalTranscript || interimTranscript;
+
+            // 🚀 STEAL THE MICROPHONE: Store global transcript for processAudio to pick up
+            if (finalTranscript.trim().length > 0) {
+                window.currentTranscript = finalTranscript;
+            } else if (interimTranscript.trim().length > 0) {
+                window.currentTranscript = interimTranscript;
+            }
+
+            if (fullText.trim().length > 0) {
+                // 🇲🇦 ARABIC MODE: Browser recognition is unreliable for Arabic/Darija
+                // Show the text but with a note that final transcription will be better
+                if (arabicModeActive) {
+                    // For Arabic, only show if it looks like actual Arabic text
+                    const hasArabicChars = /[\u0600-\u06FF]/.test(fullText);
+                    if (hasArabicChars && originalTextField) {
+                        originalTextField.innerText = fullText;
+                        originalTextField.hidden = false;
+                        originalTextField.style.opacity = '1';
+                        originalTextField.style.direction = 'rtl';
+                        originalTextField.style.textAlign = 'right';
+                        originalTextField.style.fontSize = '1.3rem';
+                        originalTextField.style.fontWeight = '500';
+                    } else {
+                        // Browser gave garbage (Latin chars for Arabic speech) - show waiting status
+                        if (originalTextField) {
+                            originalTextField.innerText = '🎤 جاري الاستماع...'; // "Listening..." in Arabic
+                            originalTextField.style.direction = 'rtl';
+                            originalTextField.style.textAlign = 'right';
+                            originalTextField.style.opacity = '0.7';
+                        }
+                    }
+                } else {
+                    // French/English mode - show normally
+                    if (originalTextField) {
+                        originalTextField.innerText = fullText;
+                        originalTextField.hidden = false;
+                        originalTextField.style.opacity = '1';
+                        originalTextField.style.direction = 'ltr';
+                        originalTextField.style.textAlign = 'left';
+                        originalTextField.style.fontSize = '1.2rem';
+                        originalTextField.style.fontWeight = '500';
+                        originalTextField.style.lineHeight = '1.6';
+                        originalTextField.style.fontStyle = 'normal';
+                        originalTextField.style.animation = 'fadeIn 0.3s ease';
+                    }
+                }
+
+                // Scroll to bottom
+                const chatHistory = document.getElementById('chat-history');
+                if (chatHistory) chatHistory.scrollTop = chatHistory.scrollHeight;
+
+                // ✨ Recognition is ONLY for visual display
+                if (finalTranscript.trim().length > 2) {
+                    console.log("✅ Sentence transcribed (visual feedback only)");
+                }
+            }
+        };
+
+        // 6. Start
+        recognition.start();
+
+    } catch (e) {
+        console.error("❌ Fatal Error starting recognition:", e);
+    }
+}
+
+// 🚀 INTELLIGENT MODE: Send Text directly (Primary trigger via isFinal)
+async function sendTextForProcessing(text) {
+    if (isProcessingAudio) {
+        console.log("⚠️ Already processing, skipping duplicate...");
+        return;
+    }
+    isProcessingAudio = true;
+
+    const targetLang = quickLangSelector?.value || 'French';
+
+    // 🌍 Language detection is now handled by the backend with Gemini
+    console.log(`📤 Sending text for processing: "${text}"`);
+    statusText.innerText = 'Traduction en cours...';
+    statusText.style.color = '#4a9b87';
+
+    const payload = {
+        text_input: text, // Sending TEXT, not AUDIO
+        source_language: 'auto', // Let backend (Gemini) detect language
+        target_language: targetLang, // Use quick-lang-selector
+        model: localStorage.getItem('selectedModel') || 'Gemini', // Updated default
+        tts_engine: localStorage.getItem('ttsEngine') || 'openai', // Updated default
+        stt_engine: localStorage.getItem('sttEngine') || 'seamless-m4t', // NEW: SeamlessM4T default
+        ai_correction: localStorage.getItem('aiCorrectionEnabled') !== 'false', // NEW: AI Correction enabled by default
+        voice_cloning: false,
+        use_grammar_correction: localStorage.getItem('grammarCorrectionEnabled') !== 'false',
+        voice_gender_preference: localStorage.getItem('voiceGenderPreference') || 'auto'
+    };
+
+    try {
+        const response = await fetch('/process_audio', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            console.error("❌ Processing error:", data.error);
+            statusText.innerText = 'Erreur';
+        } else {
+            // Handle Success - Update translated text display only
+            // Chat messages are created by the main axios handler to avoid duplicates
+            if (translatedTextField) {
+                translatedTextField.innerText = data.translated_text;
+                translatedTextField.style.opacity = '1';
+            }
+
+            // 🧠 SMART MODE LATCHING: Update recognition language for the NEXT turn
+            if (data.source_language_full) {
+                const newLang = data.source_language_full;
+                console.log(`🧠 SMART MODE: Latching onto detected language: ${newLang}`);
+
+                // Update the global state so startRealTimeTranscription uses it
+                // We map standard names to BCP-47 codes for SpeechRecognition
+                const langToCode = {
+                    'French': 'fr-FR',
+                    'English': 'en-US',
+                    'Arabic': 'ar-SA', // Default to SA for generic, or MA if available
+                    'Moroccan Darija': 'ar-MA', // Chrome might treat this as ar-SA or similar
+                    'Spanish': 'es-ES',
+                    'German': 'de-DE',
+                    'Italian': 'it-IT',
+                    'Portuguese': 'pt-PT',
+                    'Russian': 'ru-RU',
+                    'Japanese': 'ja-JP',
+                    'Korean': 'ko-KR',
+                    'Chinese': 'zh-CN',
+                    'Hindi': 'hi-IN'
+                };
+
+                const code = langToCode[newLang];
+                if (code) {
+                    currentRecognitionLang = code;
+                    detectedLanguage = newLang; // Update global detected
+
+                    // If we are in AUTO mode, this is critical
+                    if (document.getElementById('source-lang-selector').value === 'auto') {
+                        console.log(`🔄 UPDATING RECOGNITION to ${code} for next turn`);
+
+                        // Restart recognition if it's running, to apply new language
+                        if (recognition) {
+                            try { recognition.stop(); } catch (e) { }
+                            // It will auto-restart via the 'end' event or our continuous loop
+                        }
+                    }
+                }
+            }
+
+            console.log("✅ Text processing complete - TTS will play automatically");
+
+            // Update status for continuous mode
+            if (window.continuousMode) {
+                statusText.innerText = '🔊 Lecture TTS...';
+                statusText.style.color = '#4a9b87';
+                console.log('🎙️ Continuous mode active - will resume listening after TTS');
+            } else {
+                statusText.innerText = 'Prêt';
+            }
+        }
+    } catch (e) {
+        console.error("❌ Text processing error:", e);
+        statusText.innerText = 'Erreur réseau';
+    } finally {
+        isProcessingAudio = false;
+    }
+}
+
+// --- RECORDER LOGIC ---
+
+// Silence Detection Config - Moved to top of file
+// CONSTANTS ARE GLOBAL NOW
+async function startSmartRecording() {
+    try {
+        console.log('🎤 STARTING RECORDING...');
+        isRecording = true;
+        recordBtn.classList.add('active');
+        statusText.innerText = 'Écoute...';
+        statusText.style.color = 'white';
+
+        document.dispatchEvent(new Event('reset-ui'));
+        originalTextField.innerText = '...';
+        translatedTextField.innerText = '...';
+
+        // 🎤 EXPERT MICROPHONE CONFIGURATION
+        const stream = await navigator.mediaDevices.getUserMedia({
+            audio: {
+                echoCancellation: true, // 🛡️ Prevent Speaker Feedack
+                noiseSuppression: true, // 🔇 Remove Background Noise
+                autoGainControl: true,  // 🎚️ Normalize Volume
+                channelCount: 1,
+                sampleRate: 48000
+            }
+        });
+
+        // 1. Setup Audio Analysis (Silence Detection)
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+        // ⚡ EXPERT: Force Active Context (Wake up the Audio Engine)
+        if (audioContext.state === 'suspended') {
+            await audioContext.resume();
+            console.log('⚡ AudioContext Force-Resumed');
+        }
+        analyser = audioContext.createAnalyser();
+        micSource = audioContext.createMediaStreamSource(stream);
+        micSource.connect(analyser);
+        analyser.fftSize = 256;
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+
+        let silenceStart = Date.now();
+
+        // Flag to track if human speech was actually detected
+        let smartSpeechDetected = false;
+
+        function detectSilence() {
+            if (!isRecording) return;
+
+            analyser.getByteFrequencyData(dataArray);
+
+            // Calculate average volume
+            let sum = 0;
+            for (let i = 0; i < bufferLength; i++) sum += dataArray[i];
+            const average = sum / bufferLength;
+
+            // Visual feedback
+            const scale = 1 + (average / 100);
+            recordBtn.style.transform = `scale(${Math.min(scale, 1.2)})`;
+
+            // UI Feedback for waiting status
+            if (average < VOLUME_THRESHOLD && !smartSpeechDetected) {
+                statusText.innerText = '💤 En attente de parole...';
+                statusText.style.color = 'rgba(255,255,255,0.7)';
+            }
+
+            if (average < VOLUME_THRESHOLD) {
+                // It is silent
+                if (Date.now() - silenceStart > SILENCE_LIMIT_MS) {
+                    // Silence limit reached! Stop!
+                    console.log("🤫 Silence limit reached.");
+                    stopSmartRecording();
+                    return;
+                }
+            } else {
+                // Sound detected!
+                silenceStart = Date.now();
+                if (!smartSpeechDetected) {
+                    smartSpeechDetected = true; // ✅ Valid speech detected
+                    console.log("🗣️ Speech detected!");
+                    statusText.innerText = '🎤 Je vous écoute...';
+                    statusText.style.color = '#fff';
+                    recordBtn.classList.add('active-speech');
+                }
+            }
+
+            animationId = requestAnimationFrame(detectSilence);
+        }
+
+        detectSilence(); // Start monitoring
+
+        // 2. Start Speech Recognition (Instant Mode)
+        try { startRealTimeTranscription(); } catch (e) { }
+
+        // 3. Start MediaRecorder
+        mediaRecorder = new MediaRecorder(stream);
+        audioChunks = [];
+        mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
+        mediaRecorder.onstop = async () => {
+            console.log("🛑 Recorder stopped. Processing audio...");
+
+            // Clean up
+            if (recognition) { try { recognition.stop(); } catch (e) { } }
+            if (animationId) cancelAnimationFrame(animationId);
+            if (micSource) micSource.disconnect();
+            if (audioContext) audioContext.close();
+
+            if (audioChunks.length > 0) {
+                const blob = new Blob(audioChunks, { type: 'audio/wav' });
+                console.log(`📦 Audio Data: ${blob.size} bytes`);
+
+                // FORCE PROCESSING - UI Feedback
+                statusText.innerText = 'Traitement...';
+                statusText.style.color = '#4a9b87';
+
+                try {
+                    await processAudio(blob);
+                } catch (e) {
+                    console.error("Error in processAudio", e);
+                    statusText.innerText = 'Erreur';
+                }
+            } else {
+                console.error("❌ Audio was empty!");
+                statusText.innerText = 'Audio Vide';
+            }
+
+            // 🔄 AUTO-RESTART LOOP (Crucial for Continuous Conversation)
+            if (window.continuousMode) {
+                // 🛑 CRITICAL FIX: DO NOT RESTART IF TTS IS PLAYING!
+                if (isTTSPlaying && window.lastBotAudio) {
+                    console.log("⏸️ TTS Playing - Waiting for audio to finish before restarting...");
+
+                    // Chain the restart to the onended event
+                    const originalEnded = window.lastBotAudio.onended;
+                    window.lastBotAudio.onended = () => {
+                        if (originalEnded) originalEnded();
+                        console.log("✅ TTS Finished - Restarting conversation loop");
+                        // Small delay to ensure clean state
+                        setTimeout(() => {
+                            if (window.continuousMode) listenContinuously();
+                        }, 100);
+                    };
+                    return;
+                } else {
+                    // No audio playing, restart immediately
+                    console.log("🔄 Auto-restarting conversation loop (No TTS active)...");
+                    setTimeout(() => {
+                        if (window.continuousMode) listenContinuously();
+                    }, 100);
+                }
+            } else {
+                statusText.innerText = 'Prêt';
+            }
+        };
+        mediaRecorder.start();
+        console.log("🎤 Recording started (with Auto-Stop)...");
+
+    } catch (err) {
+        console.error(err);
+        statusText.innerText = "Erreur Micro";
+        isRecording = false;
+        recordBtn.classList.remove('active');
+    }
+}
+
+function stopSmartRecording() {
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
+    if (recognition) { try { recognition.stop(); } catch (e) { } }
+    isRecording = false;
+    recordBtn.classList.remove('active');
+    statusText.innerText = 'Réflexion...';
+}
+
+// [Function setupRealTimeTranscription removed - Consolidated into startRealTimeTranscription]
+
+function debouncedStreamTranslation(text) {
+    if (streamTimeout) clearTimeout(streamTimeout);
+    streamTimeout = setTimeout(() => performStreamTranslation(text), 200);
+}
+
+async function performStreamTranslation(text) {
+    try {
+        const res = await axios.post('/stream_text', {
+            text: text,
+            target_lang: quickLangSelector?.value || 'English'
+        });
+        if (res.data.translation) {
+            translatedTextField.innerText = res.data.translation;
+
+            // ✨ SHOW TRANSLATION CARD - Make it visible!
+            if (res.data.translation.trim().length > 0) {
+                translatedTextField.style.opacity = '1';
+                console.log('🌍 Real-time translation:', res.data.translation);
+            }
+        }
+    } catch (e) { console.error("Stream Error", e); }
+}
+
+// Helper function to analyze audio energy and detect silence
+function analyzeAudioEnergy(blob) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(blob);
+        reader.onloadend = async () => {
+            try {
+                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                const audioBuffer = await audioContext.decodeAudioData(reader.result);
+
+                // Get audio samples
+                const channelData = audioBuffer.getChannelData(0);
+
+                // Calculate RMS (Root Mean Square) energy
+                let sum = 0;
+                for (let i = 0; i < channelData.length; i++) {
+                    sum += channelData[i] * channelData[i];
+                }
+                const rms = Math.sqrt(sum / channelData.length);
+
+                // Calculate peak amplitude
+                let peak = 0;
+                for (let i = 0; i < channelData.length; i++) {
+                    const abs = Math.abs(channelData[i]);
+                    if (abs > peak) peak = abs;
+                }
+
+                // Duration in seconds
+                const duration = audioBuffer.duration;
+
+                console.log(`🔊 Audio Analysis: RMS=${rms.toFixed(4)}, Peak=${peak.toFixed(4)}, Duration=${duration.toFixed(2)}s`);
+
+                // 🛡️ WAR MODE SENSITIVITY: Pick up even whispers (0.002)
+                // Was 0.01 - Lowered to prevent cutting out during "Chaos"
+                resolve({ rms, peak, duration, isSilent: rms < 0.002 && peak < 0.01 });
+            } catch (e) {
+                console.error('⚠️ Audio analysis failed:', e);
+                resolve({ rms: 0, peak: 0, duration: 0, isSilent: true });
+            }
+        };
+    });
+}
+
+async function processAudio(blob, bypassSilenceCheck = false) {
+    // 🚀 PREVENT DUPLICATE PROCESSING
+    if (isProcessingAudio) {
+        console.log('⚠️ Audio already being processed, skipping...');
+        return;
+    }
+
+    isProcessingAudio = true;
+    recordBtn.classList.add('processing'); // 🔵 Visual Feedback: Blue Spinner
+    recordBtn.classList.remove('active');   // Stop Red pulse
+    recordBtn.classList.remove('active-speech'); // Stop Green pulse
+
+    // 🔊 CRITICAL: SILENCE DETECTION - Prevent hallucination
+    // ⚡ OPTIMIZATION: If we already confirmed speech in monitorAudio, skip this heavy decoding!
+    if (!bypassSilenceCheck) {
+        const audioAnalysis = await analyzeAudioEnergy(blob);
+
+        // Reject if audio is too quiet (silence/background noise)
+        if (audioAnalysis.isSilent) {
+            console.warn('🔇 SILENCE DETECTED (Threshold check failed) - Skipping processing');
+            console.log(`📊 Analysis: RMS=${audioAnalysis.rms}, Peak=${audioAnalysis.peak}`);
+            statusText.innerText = 'Trop silencieux';
+            isProcessingAudio = false;
+
+            // Reset UI
+            // ⚡ WAR MODE: Restart INSTANTLY (100ms) insead of 1s
+            setTimeout(() => {
+                statusText.innerText = 'Prêt';
+                // Force restart if in continuous mode!
+                if (window.continuousMode) listenContinuously();
+            }, 100);
+            return;
+        }
+
+        // Reject if audio is too short (likely just a click)
+        if (audioAnalysis.duration < 0.5) {
+            console.log(`⏱️ Audio too short (${audioAnalysis.duration.toFixed(2)}s) - Skipping`);
+            statusText.innerText = 'Audio trop court';
+            isProcessingAudio = false;
+
+            setTimeout(() => {
+                statusText.innerText = 'Prêt';
+                if (window.continuousMode) listenContinuously();
+            }, 800);
+            return;
+        }
+    } else {
+        console.log("⚡ SPEED: Bypassing secondary silence check (Speech already confirmed)");
+    }
+
+    console.log('✅ Audio validation passed - Processing...');
+
+    const startTime = Date.now();
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onloadend = async () => {
+        const base64 = reader.result.split(',')[1];
+        try {
+            // 🚀 STEAL THE MICROPHONE (Client-Side STT Injection)
+            // Use the global variable captured by Web Speech API directly!
+            // This is cleaner than reading DOM.
+            let textInput = (window.currentTranscript || originalTextField.innerText || "").trim();
+
+            // Clean up placeholders
+            textInput = textInput.replace('...', '').replace('🎤', '').trim();
+
+            // Filter out placeholder indicators
+            if (textInput.includes('Écoute') || textInput.length < 2) {
+                textInput = ''; // Empty = backend will use Whisper/Gemini transcription
+                console.log('🎯 Using backend STT only (no client text available)');
+            } else {
+                console.log(`🎤 Client-Side STT Injected: "${textInput}" (Skipping Server STT)`);
+            }
+
+            // Get languages from quick selectors
+            const targetLangQuick = document.getElementById('target-lang-quick');
+            const sourceLangQuick = document.getElementById('source-lang-quick');
+            const selectedTarget = targetLangQuick?.value || quickLangSelector?.value || 'French';
+            const selectedSource = sourceLangQuick?.value || 'auto';
+
+            const settings = {
+                audio: base64,
+                text_input: textInput,  // Only send real transcribed text, not placeholders
+                target_language: selectedTarget,
+                source_language: selectedSource === 'auto' ? 'auto' : selectedSource, // Pass manual selection to backend
+                stt_engine: localStorage.getItem('sttEngine') || 'openai-whisper', // ⚡ WHISPER (Requested by User)
+                model: localStorage.getItem('aiModel') || 'gpt-4o-mini',  // ✅ CHATGPT (Requested by User)
+                tts_engine: localStorage.getItem('ttsEngine') || 'seamless', // 🔊 SEAMLESS TTS (Kaggle GPU - FREE!)
+                openai_api_key: localStorage.getItem('openaiKey'),
+                google_api_key: localStorage.getItem('googleKey'),  // ✅ For Gemini STT
+                openai_voice: localStorage.getItem('openaiVoice') || 'nova',
+                elevenlabs_key: localStorage.getItem('elevenlabsKey'),  // Fixed: elevenlabs_key not elevenlabs_api_key
+                use_grammar_correction: localStorage.getItem('grammarCorrectionEnabled') !== 'false',  // Default: enabled
+                voice_gender_preference: localStorage.getItem('voiceGenderPreference') || 'auto'  // 🎙️ Voice gender: auto/male/female
+            };
+
+            console.log(`📝 Grammar Correction: ${settings.use_grammar_correction ? 'ENABLED (GPT)' : 'DISABLED (Direct Translation)'}`);
+            console.log(`🎙️ Voice Gender Preference: ${settings.voice_gender_preference.toUpperCase()}`);
+
+
+            // VOICE CLONING LOGIC - Check if enabled via toggle
+            // 🚀 SPEED FIRST: Default is DISABLED for instant translations
+            const voiceCloneEnabled = localStorage.getItem('voiceCloneEnabled') === 'true'; // Default: DISABLED
+            const ttsEngine = settings.tts_engine;
+
+            console.log(`🎭 Voice Cloning Status: ${voiceCloneEnabled ? 'ENABLED' : 'DISABLED'}`);
+
+            // Send voice cloning data if enabled
+            if (voiceCloneEnabled) {
+                console.log('🎤 Voice Cloning ENABLED → Sending audio sample to server');
+                settings.voice_audio = `data:audio/wav;base64,${base64}`;
+                settings.voice_cloning = true;
+            } else {
+                console.log('🔇 Voice Cloning DISABLED → Using gender-matched fallback voices');
+                settings.voice_cloning = false;
+            }
+
+            const res = await axios.post('/process_audio', settings);
+
+            if (res.data.translated_text) {
+                const translation = res.data.translated_text;
+                const userText = settings.text_input;
+
+                console.log('✅ Response received:', {
+                    original: userText?.substring(0, 50),
+                    translation: translation?.substring(0, 50),
+                    hasAudio: !!res.data.tts_audio
+                });
+
+                // 🔊 FORCE DISPLAY RESULT (Fallback)
+                const resultDisplay = document.getElementById('result-display');
+                const originalDisplay = document.getElementById('original-display');
+                const translationDisplay = document.getElementById('translation-display');
+                const pronunciationDisplay = document.getElementById('pronunciation-display');
+                const greeting = document.getElementById('greeting');
+
+                if (resultDisplay && translationDisplay) {
+                    if (greeting) greeting.style.display = 'none';
+                    resultDisplay.style.display = 'block';
+                    if (originalDisplay) originalDisplay.innerText = userText || 'Audio input';
+
+                    // Pronunciation
+                    if (pronunciationDisplay) {
+                        const pronunciation = res.data.pronunciation;
+                        if (pronunciation && pronunciation !== translation) {
+                            pronunciationDisplay.innerText = pronunciation;
+                            pronunciationDisplay.style.display = 'block';
+                        } else {
+                            pronunciationDisplay.style.display = 'none';
+                        }
+                    }
+
+                    translationDisplay.innerText = translation;
+                    console.log('📺 Result displayed on screen');
+                }
+
+                // 🔊 FORCE PLAY AUDIO
+                if (res.data.tts_audio) {
+                    const audioSrc = `data:audio/mp3;base64,${res.data.tts_audio}`;
+                    const audio = new Audio(audioSrc);
+                    audio.play().then(() => {
+                        console.log('🔊 Audio playing!');
+                    }).catch(err => {
+                        console.log('❌ Auto-play blocked:', err);
+                        // Show play button
+                        if (translationDisplay) {
+                            translationDisplay.innerHTML += ' <button onclick="this.previousSibling.click()" style="background:#4CAF50;color:white;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;">▶️ Play</button>';
+                        }
+                    });
+                    window.lastAudio = audio;
+                }
+
+                // 🛡️ HALLUCINATION CHECK - Block fake Whisper outputs
+                // userText already defined above
+                if (isHallucination(userText) || isHallucination(translation)) {
+                    console.log(`🚫 HALLUCINATION DETECTED - Skipping message creation`);
+                    console.log(`   User: "${userText}" | Translation: "${translation}"`);
+                    statusText.innerText = 'Prêt';
+                    isProcessingAudio = false;
+                    recordBtn.classList.remove('processing');
+                    return;
+                }
+
+                // AUTOMATIC LANGUAGE DETECTION - Update UI
+                if (res.data.source_language_full && sourceLangSelector) {
+                    const detectedLang = res.data.source_language_full;
+
+                    // Store detected language for potential future auto-selection
+                    detectedLanguage = detectedLang;
+                    console.log(`🌍 Language auto-detected: ${detectedLang}`);
+
+                    // Update real-time transcription language for next recording
+                    if (recognition) {
+                        const langMap = {
+                            'English': 'en-US', 'French': 'fr-FR', 'Spanish': 'es-ES',
+                            'German': 'de-DE', 'Italian': 'it-IT', 'Portuguese': 'pt-PT',
+                            'Russian': 'ru-RU', 'Japanese': 'ja-JP', 'Korean': 'ko-KR',
+                            'Chinese': 'zh-CN', 'Arabic': 'ar-SA', 'Hindi': 'hi-IN',
+                            'Dutch': 'nl-NL', 'Polish': 'pl-PL', 'Turkish': 'tr-TR',
+                            'Indonesian': 'id-ID', 'Malay': 'ms-MY', 'Thai': 'th-TH',
+                            'Vietnamese': 'vi-VN', 'Bengali': 'bn-IN', 'Urdu': 'ur-PK',
+                            'Swahili': 'sw-KE', 'Hebrew': 'he-IL', 'Persian': 'fa-IR',
+                            'Ukrainian': 'uk-UA', 'Swedish': 'sv-SE', 'Greek': 'el-GR',
+                            'Czech': 'cs-CZ', 'Romanian': 'ro-RO', 'Hungarian': 'hu-HU',
+                            'Danish': 'da-DK', 'Finnish': 'fi-FI', 'Norwegian': 'no-NO',
+                            'Slovak': 'sk-SK', 'Filipino': 'fil-PH', 'Amharic': 'am-ET'
+                        };
+
+                        const speechLang = langMap[detectedLang] || navigator.language || 'en-US';
+                        console.log(`🎤 Speech recognition updated to: ${speechLang}`);
+                    }
+                }
+
+                // Hide greeting
+                const greetingEl = document.getElementById('greeting');
+                if (greetingEl) greetingEl.style.display = 'none';
+
+                // 2. Add User Message to Chat (with source language)
+                // userText already defined above for hallucination check
+                const sourceLang = res.data.source_language_full || 'Auto';
+                const targetLang = res.data.target_language || 'Translation';
+                createChatMessage('user', userText, null, null, sourceLang);
+
+                // 3. Create NEW audio for this message
+                let messageAudioSrc = null;
+                if (res.data.tts_audio) {
+                    messageAudioSrc = `data:audio/mp3;base64,${res.data.tts_audio}`;
+                    // Play on global player
+                    audioPlayer.src = messageAudioSrc;
+                    audioPlayer.play().catch(err => {
+                        console.log('Auto-play blocked:', err);
+                    });
+                }
+
+                // 4. Add Bot Message with its OWN Audio Player (with target language)
+                const info = {
+                    latency: ((Date.now() - startTime) / 1000).toFixed(2),
+                    stt: res.data.stt_engine,
+                    translation: res.data.translation_engine,
+                    tts: res.data.tts_engine
+                };
+                createChatMessage('bot', translation, messageAudioSrc, info, targetLang);
+
+                // 🎙️ IMPORTANT: Update status based on mode
+                if (window.continuousMode) {
+                    // Keep button active in continuous mode
+                    statusText.innerText = 'Écoute en continu...';
+                    console.log('✅ TTS généré - En attente de la prochaine phrase');
+                } else {
+                    // Normal mode: reset button
+                    isRecording = false;
+                    recordBtn.classList.remove('active');
+                    recordBtn.disabled = false;
+                    statusText.innerText = 'Prêt';
+                    console.log('✅ TTS généré - Bouton prêt');
+                }
+            }
+        } catch (e) {
+            console.error("Erreur de traitement:", e);
+            statusText.innerText = "Erreur de connexion";
+
+            // Re-enable button even on error
+            isRecording = false;
+            recordBtn.classList.remove('active');
+            recordBtn.disabled = false;
+        }
+        finally {
+            // Ensure button is always ready
+            recordBtn.disabled = false;
+            recordBtn.classList.remove('processing'); // 🔵 Stop Blue Spinner
+            isProcessingAudio = false; // 🚀 Reset processing flag
+
+            // If NOT continuous mode, ensure text says Ready
+            if (!window.continuousMode) {
+                statusText.innerText = 'Prêt';
+            }
+        }
+    };
+}
+
+// Logic de sauvegarde/chargement des paramètres
+window.loadModalSettings = () => {
+    document.getElementById('stt-engine').value = localStorage.getItem('sttEngine') || 'openai-whisper';
+    document.getElementById('openai-key').value = localStorage.getItem('openaiKey') || '';
+    if (localStorage.getItem('sourceLang')) document.getElementById('source-lang-selector').value = localStorage.getItem('sourceLang');
+
+    // 🎯 Set default target language for bidirectional translation
+    const savedTargetLang = localStorage.getItem('targetLang');
+    if (savedTargetLang && quickLangSelector) {
+        quickLangSelector.value = savedTargetLang;
+    } else if (quickLangSelector) {
+        // Default to French for Arabic ↔ French bidirectional translation
+        quickLangSelector.value = 'French';
+        console.log('🌍 Default target language set to French for bidirectional translation');
+    }
+};
+
+window.saveModalSettings = () => {
+    localStorage.setItem('sttEngine', document.getElementById('stt-engine').value);
+    localStorage.setItem('openaiKey', document.getElementById('openai-key').value);
+    localStorage.setItem('targetLang', quickLangSelector.value);
+    localStorage.setItem('sourceLang', document.getElementById('source-lang-selector').value);
+};
+
+// Removed: replay-trigger button (deleted from HTML)
+// Functionality removed as button no longer exists
+
+// ===================================
+// 🛠️ BUTTON TOGGLE LOGIC (FIXED)
+// ===================================
+
+function setupToggle(id, storageKey, defaultValue, onToggle) {
+    const btn = document.getElementById(id);
+    if (!btn) return;
+
+    // Load initial state
+    const saved = localStorage.getItem(storageKey);
+    const isActive = saved === null ? defaultValue : saved === 'true';
+
+    if (isActive) btn.classList.add('active');
+    else btn.classList.remove('active');
+
+    btn.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent bubbling
+        const currentlyActive = btn.classList.contains('active');
+        const newState = !currentlyActive;
+
+        // Toggle visual
+        if (newState) btn.classList.add('active');
+        else btn.classList.remove('active');
+
+        // Save state
+        localStorage.setItem(storageKey, newState);
+
+        // Optional callback
+        if (onToggle) onToggle(newState);
+
+        console.log(`🔘 Toggle ${id}: ${newState ? 'ON' : 'OFF'}`);
+    });
+}
+
+function setupCycle(id, storageKey, values, onCycle) {
+    const btn = document.getElementById(id);
+    if (!btn) return;
+
+    // Load initial state
+    let currentVal = localStorage.getItem(storageKey) || values[0];
+    if (!values.includes(currentVal)) currentVal = values[0]; // Fallback
+
+    const updateVisual = (val) => {
+        // Remove all active classes first if needed, or just set generic active
+        // For gender, we might want different icons? 
+        // For now, simple active state if not default
+        if (val !== values[0]) btn.classList.add('active');
+        else btn.classList.remove('active');
+
+        // Tooltip feedback
+        btn.title = `Mode: ${val.toUpperCase()}`;
+    };
+
+    updateVisual(currentVal);
+
+    btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const currentIndex = values.indexOf(currentVal);
+        const nextIndex = (currentIndex + 1) % values.length;
+        currentVal = values[nextIndex];
+
+        localStorage.setItem(storageKey, currentVal);
+        updateVisual(currentVal);
+
+        if (onCycle) onCycle(currentVal);
+        console.log(`🔄 Cycle ${id}: ${currentVal}`);
+
+        // Visual text feedback (Toast)
+        statusText.innerText = `Mode: ${currentVal.toUpperCase()}`;
+        setTimeout(() => statusText.innerText = 'Prêt', 1500);
+    });
+}
+
+// 🎯 Initialize Toggles when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    // 1. Magic/Grammar Toggle
+    setupToggle('grammar-toggle', 'grammarCorrectionEnabled', true, (state) => {
+        statusText.innerText = state ? '✨ Correction: ON' : '📝 Correction: OFF';
+        setTimeout(() => statusText.innerText = 'Prêt', 1500);
+    });
+
+    // 2. Voice Gender Toggle (Auto -> Male -> Female)
+    setupCycle('voice-gender-toggle', 'voiceGenderPreference', ['auto', 'male', 'female']);
+
+    // 3. Smart Mode Toggle (Brain)
+    setupToggle('smart-mode-toggle', 'smartModeEnabled', true, (state) => {
+        statusText.innerText = state ? '🧠 Mode Smart: ON' : '🧠 Mode Smart: OFF';
+        setTimeout(() => statusText.innerText = 'Prêt', 1500);
+    });
+});
+
+// ⚙️ SETTINGS MODAL LOGIC (Fixing the "Broken Button")
+document.addEventListener('DOMContentLoaded', () => {
+    const settingsBtn = document.getElementById('settings-trigger'); // Found ID
+    const closeSettingsBtn = document.getElementById('close-settings');
+    const settingsModal = document.getElementById('settings-modal');
+
+    // Open
+    if (settingsBtn && settingsModal) {
+        settingsBtn.addEventListener('click', () => {
+            settingsModal.style.display = 'flex'; // Or remove hidden class
+            // settingsModal.classList.remove('hidden'); // If using classes
+            console.log('⚙️ Settings Opened');
+        });
+    } else {
+        console.error('❌ Settings Trigger or Modal NOT FOUND');
+    }
+
+    // Close Button
+    if (closeSettingsBtn && settingsModal) {
+        closeSettingsBtn.addEventListener('click', () => {
+            settingsModal.style.display = 'none';
+        });
+    }
+
+    // Close on Outside Click
+    window.addEventListener('click', (e) => {
+        if (e.target === settingsModal) {
+            settingsModal.style.display = 'none';
+        }
+    });
+
+    // 💾 SAVE & LOAD LOGIC
+    const saveBtn = document.getElementById('save-settings');
+    const aiSelector = document.getElementById('ai-model-selector');
+    const ttsSelector = document.getElementById('tts-selector');
+
+    // Load Initial Values
+    if (aiSelector) aiSelector.value = localStorage.getItem('aiModel') || 'gpt-4o-mini';
+    if (ttsSelector) ttsSelector.value = localStorage.getItem('ttsEngine') || 'openai';
+
+    // Save Handler
+    if (saveBtn) {
+        saveBtn.addEventListener('click', () => {
+            if (aiSelector) {
+                localStorage.setItem('aiModel', aiSelector.value);
+                console.log(`🧠 AI Model set to: ${aiSelector.value}`);
+            }
+            if (ttsSelector) {
+                localStorage.setItem('ttsEngine', ttsSelector.value);
+                console.log(`🗣️ TTS Engine set to: ${ttsSelector.value}`);
+            }
+
+            // Close Modal
+            if (settingsModal) settingsModal.style.display = 'none';
+
+            // Feedback
+            if (statusText) {
+                statusText.innerText = '✅ Sauvegardé!';
+                setTimeout(() => statusText.innerText = 'Prêt', 2000);
+            }
+        });
+    }
+});
+
+
+// 🎯 Initialize language settings on page load
+document.addEventListener('DOMContentLoaded', () => {
+    // Set default target language for bidirectional translation
+    if (quickLangSelector) {
+        const savedTargetLang = localStorage.getItem('targetLang');
+        if (savedTargetLang) {
+            quickLangSelector.value = savedTargetLang;
+            console.log(`🌍 Loaded saved target language: ${savedTargetLang}`);
+        } else {
+            quickLangSelector.value = 'French';
+            console.log('🌍 Default target language set to French for Arabic ↔ French bidirectional translation');
+        }
+    }
+
+    // Set source to auto for automatic detection
+    const sourceLangSelector = document.getElementById('source-lang-selector');
+    if (sourceLangSelector) {
+        sourceLangSelector.value = 'auto';
+        console.log('🎯 Source language set to AUTO for automatic detection');
+
+        // 🔄 HARD SYNC: If user changes Source, clear "Smart History" to prevent confusion
+        sourceLangSelector.addEventListener('change', function () {
+            console.log('🔄 Source Language Changed -> Clearing Smart History...');
+            localStorage.setItem('sourceLang', this.value);
+            fetch('/clear_cache', { method: 'POST' });
+        });
+    }
+
+    // 🔄 HARD SYNC: If user changes Target, clear "Smart History" to prevent confusion
+    if (quickLangSelector) {
+        quickLangSelector.addEventListener('change', function () {
+            console.log('🔄 Target Language Changed -> Clearing Smart History...');
+            localStorage.setItem('targetLang', this.value);
+            fetch('/clear_cache', { method: 'POST' });
+        });
+    }
+
+    // ===================================
+    // 🎭 VOICE CLONING TOGGLE
+    // ===================================
+    let voiceCloneEnabled = localStorage.getItem('voiceCloneEnabled') !== 'false'; // Default: ON
+
+    const voiceCloneToggle = document.getElementById('voice-clone-toggle');
+    if (voiceCloneToggle) {
+        // Set initial state
+        if (voiceCloneEnabled) {
+            voiceCloneToggle.classList.add('active');
+        } else {
+            voiceCloneToggle.classList.remove('active');
+        }
+
+        // Toggle on click
+        voiceCloneToggle.addEventListener('click', function () {
+            voiceCloneEnabled = !voiceCloneEnabled;
+            localStorage.setItem('voiceCloneEnabled', voiceCloneEnabled);
+
+            if (voiceCloneEnabled) {
+                this.classList.add('active');
+                console.log('🎭 Voice Cloning: ON');
+            } else {
+                this.classList.remove('active');
+                console.log('🎭 Voice Cloning: OFF');
+            }
+        });
+    }
+
+});

templates/admin.html

@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Admin Control Panel | Instant Translator</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #6366f1;
+            --surface: #09090b;
+            --surface-light: #18181b;
+            --text: #e4e4e7;
+            --danger: #ef4444;
+            --success: #22c55e;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: #000;
+            color: var(--text);
+            margin: 0;
+            padding: 20px;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .admin-container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #27272a;
+        }
+
+        h1 {
+            margin: 0;
+            font-size: 24px;
+            background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .card {
+            background: var(--surface-light);
+            border-radius: 16px;
+            padding: 24px;
+            margin-bottom: 20px;
+            border: 1px solid #27272a;
+        }
+
+        .card h2 {
+            margin-top: 0;
+            font-size: 18px;
+            color: #a1a1aa;
+            margin-bottom: 20px;
+        }
+
+        .stat-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+        }
+
+        .stat-box {
+            background: #27272a;
+            padding: 15px;
+            border-radius: 12px;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: #fff;
+        }
+
+        .stat-label {
+            font-size: 12px;
+            color: #a1a1aa;
+            margin-top: 5px;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: #a1a1aa;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 12px;
+            background: #000;
+            border: 1px solid #27272a;
+            border-radius: 8px;
+            color: #fff;
+            font-family: inherit;
+            box-sizing: border-box;
+        }
+
+        .form-group input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+
+        .btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            width: 100%;
+            font-size: 16px;
+            transition: opacity 0.2s;
+        }
+
+        .btn:hover {
+            opacity: 0.9;
+        }
+
+        .btn-danger {
+            background: var(--danger);
+        }
+
+        .login-screen {
+            position: fixed;
+            inset: 0;
+            background: #000;
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .login-box {
+            width: 100%;
+            max-width: 400px;
+            padding: 30px;
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            background: #27272a;
+        }
+
+        .status-badge.online {
+            background: rgba(34, 197, 94, 0.2);
+            color: var(--success);
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- LOGIN SCREEN -->
+    <div id="login-screen" class="login-screen">
+        <div class="card login-box">
+            <h2 style="text-align: center; color: white;">Admin Access</h2>
+            <div class="form-group">
+                <label>Admin Password</label>
+                <input type="password" id="admin-pass" placeholder="Enter PIN">
+            </div>
+            <button class="btn" onclick="login()">Unlock Panel</button>
+        </div>
+    </div>
+
+    <!-- DASHBOARD -->
+    <div class="admin-container">
+        <div class="header">
+            <div>
+                <h1>Admin Control Panel</h1>
+                <div style="margin-top: 5px; color: #a1a1aa; font-size: 13px;">
+                    <span class="status-badge online"><i class="fa-solid fa-circle" style="font-size: 8px;"></i> System
+                        Online</span>
+                    v2.5 Mobile Ready
+                </div>
+            </div>
+            <button class="btn" style="width: auto; background: #27272a;" onclick="logout()"><i
+                    class="fa-solid fa-power-off"></i></button>
+        </div>
+
+        <!-- STATS -->
+        <div class="card">
+            <h2>📊 Live Statistics</h2>
+            <div class="stat-grid">
+                <div class="stat-box">
+                    <div class="stat-value" id="stat-requests">0</div>
+                    <div class="stat-label">Total Translations</div>
+                </div>
+                <div class="stat-box">
+                    <div class="stat-value" id="stat-errors">0</div>
+                    <div class="stat-label">API Errors</div>
+                </div>
+                <div class="stat-box">
+                    <div class="stat-value" id="stat-cost">$0.00</div>
+                    <div class="stat-label">Est. Cost</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- MASTER KEYS -->
+        <div class="card">
+            <h2>🔑 Master API Configuration</h2>
+            <p style="font-size: 13px; color: #71717a; margin-bottom: 20px;">
+                These keys are stored securely on the server. App users will use these keys via the API without ever
+                seeing them.
+                <b>Required for App Store compliance.</b>
+            </p>
+
+            <div class="form-group">
+                <label>OpenAI API Key (Universal)</label>
+                <input type="password" id="key-openai" placeholder="sk-...">
+            </div>
+
+            <div class="form-group">
+                <label>ElevenLabs API Key</label>
+                <input type="password" id="key-eleven" placeholder="xi-...">
+            </div>
+
+            <div class="form-group">
+                <label>Google Cloud API Key</label>
+                <input type="password" id="key-google" placeholder="AIza...">
+            </div>
+
+            <!-- TTS ENGINE SELECTOR -->
+            <div class="form-group" style="border-top: 1px solid #27272a; padding-top: 20px; margin-top: 20px;">
+                <label style="margin-bottom: 12px;">🎤 TTS Engine Selection</label>
+                <div
+                    style="display: flex; gap: 10px; align-items: center; background: #27272a; padding: 12px; border-radius: 8px;">
+                    <div style="flex: 1; text-align: center; padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.3s; background: #6366f1; color: white;"
+                        id="tts-openai" onclick="selectTTS('openai')">
+                        <div style="font-weight: 600;">OpenAI TTS</div>
+                        <div style="font-size: 11px; opacity: 0.8; margin-top: 4px;">$0.015/1K · HD Quality</div>
+                    </div>
+                    <div style="flex: 1; text-align: center; padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.3s; background: transparent; border: 1px solid #3f3f46; color: #a1a1aa;"
+                        id="tts-elevenlabs" onclick="selectTTS('elevenlabs')">
+                        <div style="font-weight: 600;">ElevenLabs</div>
+                        <div style="font-size: 11px; opacity: 0.8; margin-top: 4px">$0.30/1K · Ultra Premium</div>
+                    </div>
+                </div>
+                <div style="margin-top: 10px; font-size: 12px; color: #71717a; text-align: center;" id="tts-status">
+                    Current: <span style="color: #6366f1; font-weight: 600;">OpenAI TTS</span>
+                </div>
+            </div>
+
+            <button class="btn" onclick="saveKeys()">Save Master Configuration</button>
+        </div>
+
+        <!-- SYSTEM CONTROL -->
+        <div class="card">
+            <h2>🛡️ System Controls</h2>
+            <div class="form-group">
+                <label style="display: flex; align-items: center; justify-content: space-between;">
+                    Example Mode (Free for users)
+                    <input type="checkbox" style="width: auto;" checked>
+                </label>
+            </div>
+            <button class="btn btn-danger" onclick="clearLogs()">Clear Server Logs</button>
+        </div>
+    </div>
+
+    <script>
+        // Simple client-side gate (Real auth is server-side)
+        function login() {
+            const pass = document.getElementById('admin-pass').value;
+            if (pass === 'admin123') { // Placeholder logic
+                document.getElementById('login-screen').style.display = 'none';
+                loadStats();
+            } else {
+                alert('Access Denied');
+            }
+        }
+
+        function logout() {
+            location.reload();
+        }
+
+        function loadStats() {
+            // Simulator
+            document.getElementById('stat-requests').innerText = Math.floor(Math.random() * 500) + 120;
+            document.getElementById('stat-errors').innerText = '0';
+
+            // Load saved TTS engine
+            const savedEngine = localStorage.getItem('ttsEngine') || 'openai';
+            selectTTS(savedEngine, false);
+        }
+
+        function selectTTS(engine, save = true) {
+            const openaiBtn = document.getElementById('tts-openai');
+            const elevenlabsBtn = document.getElementById('tts-elevenlabs');
+            const status = document.getElementById('tts-status');
+
+            if (engine === 'openai') {
+                // OpenAI selected
+                openaiBtn.style.background = '#6366f1';
+                openaiBtn.style.color = 'white';
+                openaiBtn.style.border = 'none';
+
+                elevenlabsBtn.style.background = 'transparent';
+                elevenlabsBtn.style.color = '#a1a1aa';
+                elevenlabsBtn.style.border = '1px solid #3f3f46';
+
+                status.innerHTML = 'Current: <span style="color: #6366f1; font-weight: 600;">OpenAI TTS</span>';
+            } else {
+                // ElevenLabs selected
+                elevenlabsBtn.style.background = '#6366f1';
+                elevenlabsBtn.style.color = 'white';
+                elevenlabsBtn.style.border = 'none';
+
+                openaiBtn.style.background = 'transparent';
+                openaiBtn.style.color = '#a1a1aa';
+                openaiBtn.style.border = '1px solid #3f3f46';
+
+                status.innerHTML = 'Current: <span style="color: #6366f1; font-weight: 600;">ElevenLabs</span>';
+            }
+
+            // Save to localStorage
+            if (save) {
+                localStorage.setItem('ttsEngine', engine);
+                console.log('TTS Engine switched to:', engine);
+            }
+        }
+
+        function saveKeys() {
+            const btn = document.querySelector('button[onclick="saveKeys()"]');
+            btn.innerText = 'Saving...';
+            setTimeout(() => {
+                btn.innerText = '✅ Saved Securely';
+                btn.style.background = '#22c55e';
+                setTimeout(() => {
+                    btn.innerText = 'Save Master Configuration';
+                    btn.style.background = '#6366f1';
+                }, 2000);
+            }, 800);
+        }
+    </script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,914 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+
+    <!-- ✨ WORLD-CHANGING MOBILE EXPERIENCE (PWA) -->
+    <meta name="theme-color" content="#0a0a0b">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="application-name" content="Babel">
+    <meta name="apple-mobile-web-app-title" content="Babel">
+
+    <!-- DISABLE BROWSER CACHING for instant loading -->
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+
+    <title>Babel</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/enhanced.css">
+    <link rel="manifest" href="/static/manifest.json">
+    <style>
+        /* CSS moved to static/enhanced.css */
+    </style>
+</head>
+
+<body>
+    <div class="app-layout">
+        <!-- –✨ GROK SIDEBAR -->
+        <aside class="grok-sidebar">
+            <div class="sidebar-top">
+                <div class="sidebar-logo">
+                    <i class="fa-solid fa-cube"></i>
+                </div>
+                <button class="new-chat" onclick="location.reload()" title="New Session">
+                    <i class="fa-solid fa-plus"></i>
+                </button>
+            </div>
+
+            <nav class="sidebar-menu">
+                <div class="menu-item active">
+                    <i class="fa-solid fa-comment-dots"></i>
+                    <span>Chat</span>
+                </div>
+                <div class="menu-item" id="sidebar-voice-mode">
+                    <i class="fa-solid fa-microphone-lines"></i>
+                    <span>Voice</span>
+                </div>
+                <!-- Settings Trigger Moved Here -->
+                <div class="menu-item" id="settings-trigger">
+                    <i class="fa-solid fa-sliders"></i>
+                    <span>Settings</span>
+                </div>
+            </nav>
+
+            <div class="sidebar-footer">
+                <div class="user-profile">
+                    <div class="avatar">U</div>
+                    <div class="info">
+                        <span class="name">User</span>
+                        <span class="status">Pro</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- –✨ MAIN CANVAS -->
+        <main class="grok-main">
+            <!-- Header for Mobile/Context -->
+            <header class="main-header">
+                <span class="model-badge">Babel v2.0</span>
+            </header>
+
+            <!-- CHAT STAGE -->
+            <div id="chat-stage" class="chat-stage">
+                <!-- Empty State (Centered Logo) -->
+                <div class="empty-state" id="greeting">
+                    <div class="grok-logo-hero">Babel</div>
+                    <p class="grok-hero-text">Intelligence Vocale Instantanee</p>
+                </div>
+
+                <!-- RESULT DISPLAY (Fallback if chat doesn't show) -->
+                <div id="result-display" style="display: none; padding: 20px; text-align: center;">
+                    <div id="original-display" style="font-size: 1.1em; color: #aaa; margin-bottom: 10px;"></div>
+                    <div id="translation-display" style="font-size: 1.5em; color: #fff; font-weight: bold;"></div>
+                </div>
+
+                <div id="chat-history" class="chat-history"></div>
+            </div>
+
+            <!-- GROK INPUT BAR AREA -->
+            <div class="grok-input-wrapper">
+
+                <!-- The Main Input Pill -->
+                <div class="grok-input-bar">
+                    <div class="input-icon left">
+                        <i class="fa-solid fa-paperclip"></i>
+                    </div>
+
+                    <!-- Status Text acting as Placeholder -->
+                    <div class="input-status-area">
+                        <span id="status-placeholder" class="status-text">Prêt à traduire...</span>
+                        <span id="latency-badge"
+                            style="display:none; font-size: 0.7em; color: #666; margin-left: 10px;">0ms</span>
+                    </div>
+
+                    <!-- THE ORB (Record Button) -->
+                    <div class="input-icon right action" id="record-btn">
+                        <i class="fa-solid fa-microphone"></i>
+                    </div>
+                </div>
+
+                <!-- SUGGESTION CHIPS (Controls) -->
+                <div class="grok-chips">
+
+                    <!-- Source Language -->
+                    <div class="chip-select-wrapper">
+                        <select id="source-lang-quick" class="chip-select">
+                            <option value="auto">🎯 Auto</option>
+                            <option value="ar-SA">🇲🇦 Darija</option>
+                            <option value="fr-FR">🇫🇷 Français</option>
+                            <option value="en-US">🇬🇧 English</option>
+                            <option value="es-ES">🇪🇸 Español</option>
+                        </select>
+                        <i class="fa-solid fa-chevron-down"></i>
+                    </div>
+
+                    <!-- Swap -->
+                    <button id="swap-langs" class="chip-icon" title="Swap">
+                        <i class="fa-solid fa-arrow-right-arrow-left"></i>
+                    </button>
+
+                    <!-- Target Language (SeamlessM4T TTS supported) -->
+                    <div class="chip-select-wrapper">
+                        <select id="target-lang-quick" class="chip-select">
+                            <option value="en-US" selected>🇬🇧 English</option>
+                            <option value="fr-FR">🇫🇷 Français</option>
+                            <option value="ar-SA">🇲🇦 Darija</option>
+                            <option value="es-ES">🇪🇸 Español</option>
+                            <option value="de-DE">🇩🇪 Deutsch</option>
+                            <option value="it-IT">🇮🇹 Italiano</option>
+                            <option value="pt-PT">🇵🇹 Português</option>
+                            <option value="zh-CN">🇨🇳 中文</option>
+                            <option value="ja-JP">🇯🇵 日本語</option>
+                            <option value="ko-KR">🇰🇷 한국어</option>
+                            <option value="ru-RU">🇷🇺 Русский</option>
+                            <option value="tr-TR">🇹🇷 Türkçe</option>
+                        </select>
+                        <i class="fa-solid fa-chevron-down"></i>
+                    </div>
+
+                    <div class="chip-divider"></div>
+
+                    <!-- Features -->
+                    <button id="smart-mode-toggle" class="chip-pill active"
+                        title="Auto-detect language and smart target">
+                        <i class="fa-solid fa-brain"></i> Smart
+                    </button>
+
+                    <!-- Voice Cloning Toggle -->
+                    <button id="voice-clone-toggle" class="chip-pill active" title="Clone voice from input audio">
+                        <i class="fa-solid fa-user-secret"></i> Clone Voice
+                    </button>
+                </div>
+            </div>
+        </main>
+
+        <!-- AUDIO PLAYER (Hidden - for TTS playback) -->
+        <audio id="audio-player" style="display: none;"></audio>
+    </div>
+
+    <!-- SETTINGS MODAL (Preserved ID) -->
+    <div class="modal" id="settings-modal">
+        <button id="close-settings" class="close-modal-btn">
+            <i class="fa-solid fa-xmark"></i>
+        </button>
+        <div class="modal-content">
+            <h2>Parametres</h2>
+            <div class="form-group">
+                <label>Votre Langue</label>
+                <select id="source-lang-selector" class="form-control" style="height: auto; max-height: 200px;">
+                    <option value="auto">Detection Automatique</option>
+                    <optgroup label="Langues Principales">
+                        <option value="fr">Français</option>
+                        <option value="ar">Darija / Arabe</option>
+                        <option value="en">Anglais</option>
+                        <option value="es">Espagnol</option>
+                        <option value="de">Allemand</option>
+                        <option value="it">Italien</option>
+                        <option value="zh">Chinois</option>
+                        <option value="ja">Japonais</option>
+                        <option value="ru">Russe</option>
+                    </optgroup>
+                    <optgroup label="✨ Toutes les Langues">
+                        <option value="af">Afrikaans</option>
+                        <option value="sq">Albanian (Albanais)</option>
+                        <option value="am">Amharic (Amharique)</option>
+                        <option value="hy">Armenian (Arménien)</option>
+                        <option value="az">Azerbaijani (Azéri)</option>
+                        <option value="eu">Basque</option>
+                        <option value="be">Belarusian (Biélorusse)</option>
+                        <option value="bn">Bengali</option>
+                        <option value="bs">Bosnian (Bosnien)</option>
+                        <option value="bg">Bulgarian (Bulgare)</option>
+                        <option value="ca">Catalan</option>
+                        <option value="ceb">Cebuano</option>
+                        <option value="co">Corsican (Corse)</option>
+                        <option value="hr">Croatian (Croate)</option>
+                        <option value="cs">Czech (Tchèque)</option>
+                        <option value="da">Danish (Danois)</option>
+                        <option value="nl">Dutch (Néerlandais)</option>
+                        <option value="et">Estonian (Estonien)</option>
+                        <option value="fi">Finnish (Finnois)</option>
+                        <option value="gl">Galician (Galicien)</option>
+                        <option value="ka">Georgian (Géorgien)</option>
+                        <option value="el">Greek (Grec)</option>
+                        <option value="gu">Gujarati</option>
+                        <option value="ht">Haitian Creole (Créole Haïtien)</option>
+                        <option value="ha">Hausa</option>
+                        <option value="haw">Hawaiian (Hawaïen)</option>
+                        <option value="he">Hebrew (Hébreu)</option>
+                        <option value="hi">Hindi</option>
+                        <option value="hmn">Hmong</option>
+                        <option value="hu">Hungarian (Hongrois)</option>
+                        <option value="is">Icelandic (Islandais)</option>
+                        <option value="ig">Igbo</option>
+                        <option value="id">Indonesian (Indonésien)</option>
+                        <option value="ga">Irish (Irlandais)</option>
+                        <option value="jw">Javanese (Javanais)</option>
+                        <option value="kn">Kannada</option>
+                        <option value="kk">Kazakh</option>
+                        <option value="km">Khmer</option>
+                        <option value="ko">Korean (Coréen)</option>
+                        <option value="ku">Kurdish (Kurde)</option>
+                        <option value="ky">Kyrgyz (Kirghize)</option>
+                        <option value="lo">Lao</option>
+                        <option value="la">Latin</option>
+                        <option value="lv">Latvian (Letton)</option>
+                        <option value="lt">Lithuanian (Lituanien)</option>
+                        <option value="lb">Luxembourgish (Luxembourgeois)</option>
+                        <option value="mk">Macedonian (Macédonien)</option>
+                        <option value="mg">Malagasy (Malgache)</option>
+                        <option value="ms">Malay (Malais)</option>
+                        <option value="ml">Malayalam</option>
+                        <option value="mt">Maltese (Maltais)</option>
+                        <option value="mi">Maori</option>
+                        <option value="mr">Marathi</option>
+                        <option value="mn">Mongolian (Mongol)</option>
+                        <option value="my">Myanmar (Birman)</option>
+                        <option value="ne">Nepali (Népalais)</option>
+                        <option value="no">Norwegian (Norvégien)</option>
+                        <option value="ny">Nyanja (Chichewa)</option>
+                        <option value="ps">Pashto (Pachto)</option>
+                        <option value="fa">Persian (Persan/Farsi)</option>
+                        <option value="pl">Polish (Polonais)</option>
+                        <option value="pa">Punjabi</option>
+                        <option value="ro">Romanian (Roumain)</option>
+                        <option value="sm">Samoan</option>
+                        <option value="gd">Scottish Gaelic</option>
+                        <option value="sr">Serbian (Serbe)</option>
+                        <option value="sn">Shona</option>
+                        <option value="sd">Sindhi</option>
+                        <option value="si">Sinhala (Cingalais)</option>
+                        <option value="sk">Slovak (Slovaque)</option>
+                        <option value="sl">Slovenian (Slovêne)</option>
+                        <option value="so">Somali</option>
+                        <option value="su">Sundanese (Soundanais)</option>
+                        <option value="sw">Swahili</option>
+                        <option value="sv">Swedish (Suédois)</option>
+                        <option value="tl">Tagalog (Tagalog/Filipino)</option>
+                        <option value="tg">Tajik (Tadjik)</option>
+                        <option value="ta">Tamil</option>
+                        <option value="te">Telugu</option>
+                        <option value="th">Thai (Thaï)</option>
+                        <option value="tr">Turkish (Turc)</option>
+                        <option value="uk">Ukrainian (Ukrainien)</option>
+                        <option value="ur">Urdu</option>
+                        <option value="uz">Uzbek (Ouzbek)</option>
+                        <option value="vi">Vietnamese (Vietnamien)</option>
+                        <option value="cy">Welsh (Gallois)</option>
+                        <option value="xh">Xhosa</option>
+                        <option value="yi">Yiddish</option>
+                        <option value="yo">Yoruba</option>
+                        <option value="zu">Zulu</option>
+                        <div class="form-group">
+                            <label>Langue Cible</label>
+                            <!-- ✨ UNIVERSAL LANGUAGE SELECTOR -->
+                            <select id="target-lang-quick" class="lang-quick-select">
+                                <option value="French">‡«‡· French</option>
+                                <option value="Arabic">‡¸‡¦ Arabic</option>
+                                <option value="English">‡¬‡§ English</option>
+                                <option value="Darija">‡²‡¦ Darija</option>
+                                <option value="Spanish">‡ª‡¸ Spanish</option>
+
+                                <optgroup label="Ϭ African & Middle Eastern">
+                                    <option value="Amharic">‡ª‡¹ Amharic</option>
+                                    <option value="Arabic">‡¸‡¦ Arabic (Standard)</option>
+                                    <option value="Darija">‡²‡¦ Arabic (Moroccan Darija)</option>
+                                    <option value="Berber">™“ Amazigh (Berber)</option>
+                                    <option value="Egyptian">‡ª‡¬ Arabic (Egyptian)</option>
+                                    <option value="Hausa">‡³‡¬ Hausa</option>
+                                    <option value="Hebrew">‡®‡± Hebrew</option>
+                                    <option value="Igbo">‡³‡¬ Igbo</option>
+                                    <option value="Persian">‡®‡· Persian (Farsi)</option>
+                                    <option value="Somali">‡¸‡´ Somali</option>
+                                    <option value="Swahili">‡°‡ª Swahili</option>
+                                    <option value="Turkish">‡¹‡· Turkish</option>
+                                    <option value="Yoruba">‡³‡¬ Yoruba</option>
+                                    <option value="Zulu">‡¿‡¦ Zulu</option>
+                                </optgroup>
+
+                                <optgroup label="✨ Asian & Pacific">
+                                    <option value="Bengali">‡§‡© Bengali</option>
+                                    <option value="Chinese">‡¨‡³ Chinese (Mandarin)</option>
+                                    <option value="Cantonese">‡­‡° Chinese (Cantonese)</option>
+                                    <option value="Filipino">‡µ‡­ Filipino (Tagalog)</option>
+                                    <option value="Gujarati">‡®‡³ Gujarati</option>
+                                    <option value="Hindi">‡®‡³ Hindi</option>
+                                    <option value="Indonesian">‡®‡© Indonesian</option>
+                                    <option value="Japanese">‡¯‡µ Japanese</option>
+                                    <option value="Javanese">‡®‡© Javanese</option>
+                                    <option value="Kannada">‡®‡³ Kannada</option>
+                                    <option value="Khmer">‡°‡­ Khmer</option>
+                                    <option value="Korean">‡°‡· Korean</option>
+                                    <option value="Lao">‡±‡¦ Lao</option>
+                                    <option value="Malay">‡²‡¾ Malay</option>
+                                    <option value="Malayalam">‡®‡³ Malayalam</option>
+                                    <option value="Marathi">‡®‡³ Marathi</option>
+                                    <option value="Myanmar">‡²‡² Myanmar (Burmese)</option>
+                                    <option value="Nepali">‡³‡µ Nepali</option>
+                                    <option value="Punjabi">‡®‡³ Punjabi</option>
+                                    <option value="Sinhala">‡±‡° Sinhala</option>
+                                    <option value="Tamil">‡®‡³ Tamil</option>
+                                    <option value="Telugu">‡®‡³ Telugu</option>
+                                    <option value="Thai">‡¹‡­ Thai</option>
+                                    <option value="Urdu">‡µ‡° Urdu</option>
+                                    <option value="Vietnamese">‡»‡³ Vietnamese</option>
+                                </optgroup>
+
+                                <optgroup label="✨ European">
+                                    <option value="Albanian">‡¦‡± Albanian</option>
+                                    <option value="Armenian">‡¦‡² Armenian</option>
+                                    <option value="Azerbaijani">‡¦‡¿ Azerbaijani</option>
+                                    <option value="Bosnian">‡§‡¦ Bosnian</option>
+                                    <option value="Bulgarian">‡§‡¬ Bulgarian</option>
+                                    <option value="Catalan">‡ª‡¸ Catalan</option>
+                                    <option value="Croatian">‡­‡· Croatian</option>
+                                    <option value="Czech">‡¨‡¿ Czech</option>
+                                    <option value="Danish">‡©‡° Danish</option>
+                                    <option value="Dutch">‡³‡± Dutch</option>
+                                    <option value="Estonian">‡ª‡ª Estonian</option>
+                                    <option value="Finnish">‡«‡® Finnish</option>
+                                    <option value="French">‡«‡· French</option>
+                                    <option value="Georgian">‡¬‡ª Georgian</option>
+                                    <option value="German">‡©‡ª German</option>
+                                    <option value="Greek">‡¬‡· Greek</option>
+                                    <option value="Hungarian">‡­‡º Hungarian</option>
+                                    <option value="Icelandic">‡®‡¸ Icelandic</option>
+                                    <option value="Irish">‡®‡ª Irish</option>
+                                    <option value="Italian">‡®‡¹ Italian</option>
+                                    <option value="Latvian">‡±‡» Latvian</option>
+                                    <option value="Lithuanian">‡±‡¹ Lithuanian</option>
+                                    <option value="Macedonian">‡²‡° Macedonian</option>
+                                    <option value="Maltese">‡²‡¹ Maltese</option>
+                                    <option value="Norwegian">‡³‡´ Norwegian</option>
+                                    <option value="Polish">‡µ‡± Polish</option>
+                                    <option value="Portuguese">‡µ‡¹ Portuguese</option>
+                                    <option value="Romanian">‡·‡´ Romanian</option>
+                                    <option value="Russian">‡·‡º Russian</option>
+                                    <option value="Serbian">‡·‡¸ Serbian</option>
+                                    <option value="Slovak">‡¸‡° Slovak</option>
+                                    <option value="Slovenian">‡¸‡® Slovenian</option>
+                                    <option value="Spanish">‡ª‡¸ Spanish</option>
+                                    <option value="Swedish">‡¸‡ª Swedish</option>
+                                    <option value="Ukrainian">‡º‡¦ Ukrainian</option>
+                                    <option value="Welsh">´ó §ó ¢ó ·ó ¬ó ³ó ¿ Welsh</option>
+                                </optgroup>
+                            </select>
+                        </div>
+
+                        <!-- §  AI MODEL SELECTOR (New) -->
+                        <div class="form-group" style="margin-top: 16px;">
+                            <label>Mode d'Intelligence (Cerveau)</label>
+                            <select id="ai-model-selector" class="form-control">
+                                <option value="gpt-4o-mini">Ÿ¢ OpenAI GPT-4o (Stable & Illimité)</option>
+                                <option value="gemini-flash-latest">š¡ Google Gemini Flash (Experimental)</option>
+                                <option value="gemini-pro">’Ž Google Gemini Pro (Balanced)</option>
+                            </select>
+                        </div>
+
+
+                        <audio id="audio-player"></audio>
+
+                        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+                        <script src="/static/enhanced.js"></script>
+                        <script src="/static/script.js"></script>
+
+
+                        <script>
+                            // Console log helper
+                            function log(m) { console.log(m); }
+
+                            // Settings Modal
+                            const modal = document.getElementById('settings-modal');
+                            document.getElementById('settings-trigger').onclick = () => modal.classList.add('open');
+                            document.getElementById('close-settings').onclick = () => modal.classList.remove('open');
+                            document.getElementById('save-settings').onclick = () => {
+                                if (window.saveModalSettings) window.saveModalSettings();
+                                modal.classList.remove('open');
+                            };
+
+                            // UI SYNC - Chat messages are handled by script.js createChatMessage()
+                            // This observer is only for real-time status updates
+                            const greeting = document.getElementById('greeting');
+                            const status = document.getElementById('status-placeholder');
+
+                            const observer = new MutationObserver((mutations) => {
+                                mutations.forEach(m => {
+                                    if (m.target.id === 'original-text') {
+                                        const txt = m.target.innerText;
+                                        if (txt && txt !== '...') {
+                                            status.innerText = txt.substring(0, 50) + (txt.length > 50 ? '...' : '');
+                                            greeting.style.display = 'none';
+                                        }
+                                    }
+                                });
+                            });
+
+                            observer.observe(document.getElementById('original-text'), { childList: true, characterData: true, subtree: true });
+
+                            // SMART CONVERSATION MODE TOGGLE
+                            const smartModeToggle = document.getElementById('smart-mode-toggle');
+                            const statusPlaceholder = document.getElementById('status-placeholder');
+
+                            const savedSmartMode = localStorage.getItem('smartModeEnabled');
+                            if (savedSmartMode === 'false') {
+                                smartModeToggle.classList.remove('active');
+                            } else {
+                                smartModeToggle.classList.add('active');
+                                localStorage.setItem('smartModeEnabled', 'true');
+                            }
+
+                            smartModeToggle.onclick = () => {
+                                smartModeToggle.classList.toggle('active');
+                                const isActive = smartModeToggle.classList.contains('active');
+                                localStorage.setItem('smartModeEnabled', isActive);
+
+                                // Update status
+                                if (isActive) {
+                                    console.log('Smart Conversation Mode ENABLED');
+                                    statusPlaceholder.innerText = 'Mode intelligent';
+                                    setTimeout(() => {
+                                        if (statusPlaceholder.innerText === 'Mode intelligent') {
+                                            statusPlaceholder.innerText = 'Pret';
+                                        }
+                                    }, 2000);
+                                } else {
+                                    console.log('Smart Mode DISABLED - Using fixed target');
+                                    statusPlaceholder.innerText = 'Cible fixe';
+                                    setTimeout(() => {
+                                        if (statusPlaceholder.innerText === 'Cible fixe') {
+                                            statusPlaceholder.innerText = 'Pret';
+                                        }
+                                    }, 2000);
+                                }
+                            };
+
+                            document.addEventListener('reset-ui', () => {
+                                document.getElementById('status-placeholder').innerText = 'Pret';
+                            });
+
+                            // VOICE CLONING TOGGLE
+                            let voiceCloneEnabled = localStorage.getItem('voiceCloneEnabled') === 'true';
+                            const cloneToggle = document.getElementById('clone-toggle');
+
+                            if (cloneToggle) {
+                                function updateCloneToggle() {
+                                    if (voiceCloneEnabled) {
+                                        cloneToggle.classList.add('active');
+                                        cloneToggle.title = 'Clonage de Voix: Active';
+                                    } else {
+                                        cloneToggle.classList.remove('active');
+                                        cloneToggle.title = 'Clonage de Voix: Desactive';
+                                    }
+                                }
+
+                                cloneToggle.addEventListener('click', () => {
+                                    voiceCloneEnabled = !voiceCloneEnabled;
+                                    localStorage.setItem('voiceCloneEnabled', voiceCloneEnabled);
+                                    updateCloneToggle();
+                                });
+
+                                updateCloneToggle();
+                            }
+
+                            // GRAMMAR CORRECTION TOGGLE
+                            let grammarCorrectionEnabled = localStorage.getItem('grammarCorrectionEnabled') !== 'false';
+                            const grammarToggle = document.getElementById('grammar-toggle');
+
+                            if (grammarToggle) {
+                                function updateGrammarToggle() {
+                                    if (grammarCorrectionEnabled) {
+                                        grammarToggle.classList.add('active');
+                                        grammarToggle.title = 'Correction Intelligente: Active';
+                                    } else {
+                                        grammarToggle.classList.remove('active');
+                                        grammarToggle.title = 'Correction Intelligente: Desactive';
+                                    }
+                                }
+
+                                grammarToggle.addEventListener('click', () => {
+                                    grammarCorrectionEnabled = !grammarCorrectionEnabled;
+                                    localStorage.setItem('grammarCorrectionEnabled', grammarCorrectionEnabled);
+                                    updateGrammarToggle();
+                                });
+
+                                updateGrammarToggle();
+                            }
+
+                            // AI CORRECTION TOGGLE (Claude/GPT Reasoning)
+                            // Read from localStorage - default is FALSE (disabled by default)
+                            const savedAiCorrection = localStorage.getItem('aiCorrectionEnabled');
+                            let aiCorrectionEnabled = savedAiCorrection === 'true'; // Only true if explicitly set to 'true'
+                            console.log('📦 AI Correction from localStorage:', savedAiCorrection, '→', aiCorrectionEnabled);
+
+                            const aiCorrectionToggle = document.getElementById('ai-correction-toggle');
+                            const aiCorrectionHidden = document.getElementById('ai-correction');
+                            const aiCorrectionCheckbox = document.getElementById('ai-correction-checkbox');
+
+                            function updateAiCorrectionState() {
+                                console.log('🔄 AI Correction State Update:', aiCorrectionEnabled);
+
+                                // Update hidden input
+                                if (aiCorrectionHidden) aiCorrectionHidden.value = aiCorrectionEnabled ? 'true' : 'false';
+
+                                // Update checkbox in settings
+                                if (aiCorrectionCheckbox) aiCorrectionCheckbox.checked = aiCorrectionEnabled;
+
+                                // Update toggle button visual state
+                                if (aiCorrectionToggle) {
+                                    if (aiCorrectionEnabled) {
+                                        aiCorrectionToggle.classList.add('active');
+                                        aiCorrectionToggle.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
+                                        aiCorrectionToggle.style.color = '#fff';
+                                        aiCorrectionToggle.title = '🧠 AI Correction: ACTIVÉ (Claude/GPT)';
+                                        aiCorrectionToggle.innerHTML = '<i class="fa-solid fa-sparkles"></i> AI ✓';
+                                    } else {
+                                        aiCorrectionToggle.classList.remove('active');
+                                        aiCorrectionToggle.style.background = 'rgba(255,255,255,0.1)';
+                                        aiCorrectionToggle.style.color = 'rgba(255,255,255,0.5)';
+                                        aiCorrectionToggle.title = '❌ AI Correction: DÉSACTIVÉ';
+                                        aiCorrectionToggle.innerHTML = '<i class="fa-solid fa-sparkles"></i> AI ✗';
+                                    }
+                                }
+                            }
+
+                            if (aiCorrectionToggle) {
+                                aiCorrectionToggle.addEventListener('click', (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+
+                                    // Toggle the state
+                                    aiCorrectionEnabled = !aiCorrectionEnabled;
+
+                                    // Save to localStorage as string
+                                    localStorage.setItem('aiCorrectionEnabled', aiCorrectionEnabled.toString());
+
+                                    // Update UI
+                                    updateAiCorrectionState();
+
+                                    // Log for debugging
+                                    console.log('🧠 AI Correction TOGGLED to:', aiCorrectionEnabled ? 'ENABLED ✓' : 'DISABLED ✗');
+
+                                    // Visual feedback
+                                    aiCorrectionToggle.style.transform = 'scale(0.95)';
+                                    setTimeout(() => aiCorrectionToggle.style.transform = '', 150);
+                                });
+                            }
+
+                            if (aiCorrectionCheckbox) {
+                                aiCorrectionCheckbox.addEventListener('change', () => {
+                                    aiCorrectionEnabled = aiCorrectionCheckbox.checked;
+                                    localStorage.setItem('aiCorrectionEnabled', aiCorrectionEnabled.toString());
+                                    updateAiCorrectionState();
+                                    console.log('🧠 AI Correction (checkbox) set to:', aiCorrectionEnabled);
+                                });
+                            }
+
+                            // Initialize state on page load
+                            updateAiCorrectionState();
+                            console.log('✅ AI Correction Toggle initialized:', aiCorrectionEnabled ? 'ON' : 'OFF');
+
+                            // 🔄 SWAP LANGUAGES BUTTON
+                            const swapBtn = document.getElementById('swap-langs');
+                            // Using getElementById directly to avoid redeclaration
+                            const srcLang = document.getElementById('source-lang-quick');
+                            const tgtLang = document.getElementById('target-lang-quick');
+
+                            if (swapBtn && srcLang && tgtLang) {
+                                swapBtn.addEventListener('click', (e) => {
+                                    e.preventDefault();
+
+                                    // Get current values
+                                    const currentSource = srcLang.value;
+                                    const currentTarget = tgtLang.value;
+
+                                    // Swap them
+                                    if (currentSource !== 'auto') {
+                                        // Find matching option in target
+                                        const targetOptions = Array.from(tgtLang.options).map(o => o.value);
+                                        const sourceOptions = Array.from(srcLang.options).map(o => o.value);
+
+                                        if (targetOptions.includes(currentSource) && sourceOptions.includes(currentTarget)) {
+                                            srcLang.value = currentTarget;
+                                            tgtLang.value = currentSource;
+                                        } else {
+                                            // Fallback: just swap to auto and the target
+                                            srcLang.value = 'auto';
+                                            tgtLang.value = currentSource === 'auto' ? 'fr-FR' : currentSource;
+                                        }
+                                    } else {
+                                        // Source is auto - swap target with a default
+                                        const oldTarget = currentTarget;
+                                        tgtLang.value = oldTarget === 'fr-FR' ? 'ar-SA' : 'fr-FR';
+                                    }
+
+                                    // Save to localStorage
+                                    localStorage.setItem('sourceLangQuick', srcLang.value);
+                                    localStorage.setItem('targetLangQuick', tgtLang.value);
+
+                                    // Visual feedback
+                                    swapBtn.style.transform = 'rotate(180deg)';
+                                    setTimeout(() => swapBtn.style.transform = '', 300);
+
+                                    console.log(`🔄 Languages swapped: ${srcLang.value} → ${tgtLang.value}`);
+                                });
+                            }
+
+                            // 🧠 SMART AUTO-SWAP: When language is detected, auto-swap target
+                            // This is handled in processAudio response
+
+                            // STT ENGINE SELECTOR
+                            const sttSelector = document.getElementById('stt-selector-settings');
+                            const sttEngineHidden = document.getElementById('stt-engine');
+                            const savedSttEngine = localStorage.getItem('sttEngine') || 'seamless-m4t';
+
+                            if (sttSelector) {
+                                sttSelector.value = savedSttEngine;
+                                if (sttEngineHidden) sttEngineHidden.value = savedSttEngine;
+
+                                sttSelector.addEventListener('change', function () {
+                                    localStorage.setItem('sttEngine', this.value);
+                                    if (sttEngineHidden) sttEngineHidden.value = this.value;
+                                    console.log('🎤 STT Engine set to:', this.value);
+                                });
+                            }
+
+                            // 🔊 TTS ENGINE SELECTOR
+                            const ttsSelector = document.getElementById('tts-selector');
+                            const ttsEngineHidden = document.getElementById('tts-engine');
+                            const savedTtsEngine = localStorage.getItem('ttsEngine') || 'seamless';
+
+                            if (ttsSelector) {
+                                ttsSelector.value = savedTtsEngine;
+                                if (ttsEngineHidden) ttsEngineHidden.value = savedTtsEngine;
+
+                                ttsSelector.addEventListener('change', function () {
+                                    localStorage.setItem('ttsEngine', this.value);
+                                    if (ttsEngineHidden) ttsEngineHidden.value = this.value;
+                                    console.log('🔊 TTS Engine set to:', this.value);
+
+                                    // Visual feedback
+                                    this.style.backgroundColor = this.value === 'seamless' ? '#4CAF50' : '#2196F3';
+                                    setTimeout(() => this.style.backgroundColor = '', 500);
+                                });
+                            }
+
+                            // 🌍 TRANSLATION ENGINE SELECTOR (NLLB vs MarianMT)
+                            const translationEngineSelector = document.getElementById('translation-engine-selector');
+                            const translationEngineHidden = document.getElementById('translation-engine');
+                            const nllbModelSizeSelector = document.getElementById('nllb-model-size-selector');
+                            const nllbModelSizeHidden = document.getElementById('nllb-model-size');
+                            const nllbModelSizeGroup = document.getElementById('nllb-model-size-group');
+
+                            const savedTranslationEngine = localStorage.getItem('translationEngine') || 'nllb';
+                            const savedNllbModelSize = localStorage.getItem('nllbModelSize') || 'fast';
+
+                            function updateNllbModelSizeVisibility() {
+                                if (nllbModelSizeGroup) {
+                                    nllbModelSizeGroup.style.display =
+                                        translationEngineSelector && translationEngineSelector.value === 'nllb' ? 'block' : 'none';
+                                }
+                            }
+
+                            if (translationEngineSelector) {
+                                translationEngineSelector.value = savedTranslationEngine;
+                                if (translationEngineHidden) translationEngineHidden.value = savedTranslationEngine;
+                                updateNllbModelSizeVisibility();
+
+                                translationEngineSelector.addEventListener('change', function () {
+                                    localStorage.setItem('translationEngine', this.value);
+                                    if (translationEngineHidden) translationEngineHidden.value = this.value;
+                                    console.log('🌍 Translation Engine set to:', this.value);
+                                    updateNllbModelSizeVisibility();
+                                });
+                            }
+
+                            if (nllbModelSizeSelector) {
+                                nllbModelSizeSelector.value = savedNllbModelSize;
+                                if (nllbModelSizeHidden) nllbModelSizeHidden.value = savedNllbModelSize;
+
+                                nllbModelSizeSelector.addEventListener('change', function () {
+                                    localStorage.setItem('nllbModelSize', this.value);
+                                    if (nllbModelSizeHidden) nllbModelSizeHidden.value = this.value;
+                                    console.log('🧠 NLLB Model Size set to:', this.value);
+                                });
+                            }
+
+
+                            // SMART CONVERSATION MODE TOGGLE
+                            const smartModeToggle = document.getElementById('smart-mode-toggle');
+                            // ... (existing code for smart mode)
+
+                            // REPLAY BUTTON LOGIC
+                            const replayBtn = document.getElementById('replay-trigger');
+                            if (replayBtn) {
+                                replayBtn.addEventListener('click', () => {
+                                    if (window.lastBotAudio) {
+                                        console.log('”„ Replaying last audio...');
+                                        // Add visual effect
+                                        const icon = replayBtn.querySelector('i');
+                                        icon.style.transition = 'transform 0.5s ease';
+                                        icon.style.transform = 'rotate(-360deg)';
+
+                                        window.lastBotAudio.currentTime = 0;
+                                        window.lastBotAudio.play().catch(e => console.error("Replay failed:", e));
+
+                                        setTimeout(() => {
+                                            icon.style.transition = 'none';
+                                            icon.style.transform = 'rotate(0deg)';
+                                        }, 500);
+                                    } else {
+                                        // No audio to replay - shake animation
+                                        console.log('š ï¸ No audio to replay');
+                                        replayBtn.style.animation = 'shake 0.4s cubic-bezier(.36,.07,.19,.97) both';
+                                        setTimeout(() => replayBtn.style.animation = '', 400);
+                                    }
+                                });
+                            }
+
+                            // Add Shake Animation Keyframes
+                            const styleSheet = document.createElement("style");
+                            styleSheet.innerText = `
+            @keyframes shake {
+                10%, 90% { transform: translate3d(-1px, 0, 0); }
+                20%, 80% { transform: translate3d(2px, 0, 0); }
+                30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+                40%, 60% { transform: translate3d(4px, 0, 0); }
+            }
+        `;
+                            document.head.appendChild(styleSheet);
+
+                            // VOICE GENDER SELECTOR (3 states: auto, male, female)
+                            let voiceGenderPreference = localStorage.getItem('voiceGenderPreference') || 'auto';
+                            const voiceGenderToggle = document.getElementById('voice-gender-toggle');
+
+                            if (voiceGenderToggle) {
+                                const icons = {
+                                    'auto': 'fa-user-gear',
+                                    'male': 'fa-person',
+                                    'female': 'fa-person-dress'
+                                };
+
+                                const titles = {
+                                    'auto': 'Voix: Auto',
+                                    'male': 'Voix: Masculine',
+                                    'female': 'Voix: Feminine'
+                                };
+
+                                function updateVoiceGenderToggle() {
+                                    voiceGenderToggle.classList.remove('auto', 'male', 'female');
+                                    voiceGenderToggle.classList.add(voiceGenderPreference);
+
+                                    const iconElement = voiceGenderToggle.querySelector('i');
+                                    iconElement.className = `fa-solid ${icons[voiceGenderPreference]}`;
+                                    voiceGenderToggle.title = titles[voiceGenderPreference];
+                                }
+
+                                voiceGenderToggle.addEventListener('click', () => {
+                                    if (voiceGenderPreference === 'auto') {
+                                        voiceGenderPreference = 'male';
+                                    } else if (voiceGenderPreference === 'male') {
+                                        voiceGenderPreference = 'female';
+                                    } else {
+                                        voiceGenderPreference = 'auto';
+                                    }
+                                    localStorage.setItem('voiceGenderPreference', voiceGenderPreference);
+                                    updateVoiceGenderToggle();
+                                });
+
+                                updateVoiceGenderToggle();
+                            }
+
+                            // QUICK LANGUAGE SELECTORS
+                            const sourceLangQuick = document.getElementById('source-lang-quick');
+                            const targetLangQuick = document.getElementById('target-lang-quick');
+                            const swapLangsBtn = document.getElementById('swap-langs');
+                            const quickLangSelector = document.getElementById('quick-lang-selector');
+
+                            // Load saved preferences
+                            const savedSourceLang = localStorage.getItem('sourceLangQuick') || 'auto';
+                            const savedTargetLang = localStorage.getItem('targetLangQuick') || 'French';
+
+                            if (sourceLangQuick) sourceLangQuick.value = savedSourceLang;
+                            if (targetLangQuick) targetLangQuick.value = savedTargetLang;
+                            if (quickLangSelector) quickLangSelector.value = savedTargetLang;
+
+                            // Sync source language with script.js
+                            if (sourceLangQuick) {
+                                sourceLangQuick.addEventListener('change', function () {
+                                    localStorage.setItem('sourceLangQuick', this.value);
+                                    console.log('Ž¤ Source language set to:', this.value);
+
+                                    // Clear cache for new language
+                                    fetch('/clear_cache', { method: 'POST' });
+
+                                    // Update status
+                                    const langName = this.options[this.selectedIndex].text;
+                                    statusPlaceholder.innerText = langName;
+                                    setTimeout(() => {
+                                        if (statusPlaceholder.innerText === langName) {
+                                            statusPlaceholder.innerText = 'Pret';
+                                        }
+                                    }, 1500);
+                                });
+                            }
+
+                            // Sync target language with existing selector
+                            if (targetLangQuick) {
+                                targetLangQuick.addEventListener('change', function () {
+                                    localStorage.setItem('targetLangQuick', this.value);
+                                    localStorage.setItem('targetLang', this.value);
+
+                                    // Sync with modal selector
+                                    if (quickLangSelector) quickLangSelector.value = this.value;
+
+                                    console.log('✨ Target language set to:', this.value);
+
+                                    // Clear cache for new language
+                                    fetch('/clear_cache', { method: 'POST' });
+                                });
+                            }
+
+                            // SWAP LANGUAGES BUTTON
+                            if (swapLangsBtn && sourceLangQuick && targetLangQuick) {
+                                swapLangsBtn.addEventListener('click', function () {
+                                    // Map between source codes and target names
+                                    const sourceToTarget = {
+                                        'ar-SA': 'Arabic',
+                                        'fr-FR': 'French',
+                                        'en-US': 'English',
+                                        'es-ES': 'Spanish',
+                                        'de-DE': 'German',
+                                        'auto': 'auto'
+                                    };
+
+                                    const targetToSource = {
+                                        'Arabic': 'ar-SA',
+                                        'Moroccan Darija': 'ar-SA',
+                                        'French': 'fr-FR',
+                                        'English': 'en-US',
+                                        'Spanish': 'es-ES',
+                                        'German': 'de-DE'
+                                    };
+
+                                    const currentSource = sourceLangQuick.value;
+                                    const currentTarget = targetLangQuick.value;
+
+                                    // Swap
+                                    const newSource = targetToSource[currentTarget] || 'auto';
+                                    const newTarget = sourceToTarget[currentSource] || 'French';
+
+                                    sourceLangQuick.value = newSource;
+                                    targetLangQuick.value = newTarget;
+
+                                    // Save
+                                    localStorage.setItem('sourceLangQuick', newSource);
+                                    localStorage.setItem('targetLangQuick', newTarget);
+                                    localStorage.setItem('targetLang', newTarget);
+
+                                    if (quickLangSelector) quickLangSelector.value = newTarget;
+
+                                    // Visual feedback
+                                    this.style.transform = 'rotate(180deg)';
+                                    setTimeout(() => {
+                                        this.style.transform = 'rotate(0deg)';
+                                    }, 300);
+
+                                    console.log('”„ Languages swapped:', newSource, '†”', newTarget);
+
+                                    // Clear cache
+                                    fetch('/clear_cache', { method: 'POST' });
+                                });
+                            }
+                        </script>
+</body>
+
+</html>

templates/index_new.html

@@ -0,0 +1,727 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+
+    <!-- 🌍 PWA -->
+    <meta name="theme-color" content="#22c55e">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="application-name" content="Babel">
+    <meta name="apple-mobile-web-app-title" content="Babel">
+    <link rel="manifest" href="/static/manifest.json">
+
+    <title>Babel - Traducteur Vocal</title>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        :root {
+            /* 🌿 FRESH GREEN PALETTE (Cloned from reference) */
+            --bg-gradient: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
+            --card-bg: #ffffff;
+            --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+            --text-dark: #1a1a2e;
+            --text-medium: #4a5568;
+            --text-light: #718096;
+
+            /* Action Colors */
+            --accent-green: #22c55e;
+            --accent-yellow: #fbbf24;
+            --accent-purple: #a855f7;
+            --accent-teal: #14b8a6;
+
+            /* Bottom Bar */
+            --bar-bg: #1a1a2e;
+            --bar-active: #fbbf24;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        body {
+            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-gradient);
+            min-height: 100vh;
+            min-height: 100dvh;
+            color: var(--text-dark);
+            overflow-x: hidden;
+            padding-bottom: 100px;
+        }
+
+        /* 🔝 TOP HEADER */
+        .top-header {
+            padding: 16px 20px;
+            padding-top: max(16px, env(safe-area-inset-top));
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .greeting {
+            color: white;
+            font-size: 1.1rem;
+            font-weight: 700;
+        }
+
+        .settings-icon {
+            width: 44px;
+            height: 44px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .settings-icon:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: scale(1.05);
+        }
+
+        /* 📦 MAIN CARD */
+        .main-card {
+            background: var(--card-bg);
+            margin: 0 16px;
+            border-radius: 24px;
+            padding: 24px;
+            box-shadow: var(--card-shadow);
+        }
+
+        .card-label {
+            font-size: 0.85rem;
+            color: var(--text-light);
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .main-value {
+            font-size: 2.5rem;
+            font-weight: 900;
+            color: var(--text-dark);
+            margin-bottom: 16px;
+        }
+
+        .main-value span {
+            font-size: 1.5rem;
+            color: var(--text-medium);
+        }
+
+        /* Language Display */
+        .language-display {
+            background: #f1f5f9;
+            border-radius: 12px;
+            padding: 12px 16px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            color: var(--text-medium);
+            margin-bottom: 20px;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* 🔘 ACTION BUTTONS ROW */
+        .action-row {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-top: 8px;
+        }
+
+        .action-btn {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .action-btn:hover {
+            transform: translateY(-2px);
+        }
+
+        .action-icon {
+            width: 56px;
+            height: 56px;
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.4rem;
+            color: white;
+        }
+
+        .action-icon.green {
+            background: var(--accent-green);
+        }
+
+        .action-icon.yellow {
+            background: var(--accent-yellow);
+            color: #1a1a2e;
+        }
+
+        .action-icon.purple {
+            background: var(--accent-purple);
+        }
+
+        .action-icon.teal {
+            background: var(--accent-teal);
+        }
+
+        .action-label {
+            font-size: 0.8rem;
+            font-weight: 700;
+            color: var(--text-dark);
+        }
+
+        /* 📊 PROGRESS SECTION */
+        .progress-card {
+            background: var(--bar-bg);
+            margin: 16px;
+            border-radius: 20px;
+            padding: 16px 20px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .progress-icon {
+            width: 44px;
+            height: 44px;
+            background: var(--accent-yellow);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+        }
+
+        .progress-info {
+            flex: 1;
+        }
+
+        .progress-title {
+            color: white;
+            font-weight: 800;
+            font-size: 1.1rem;
+        }
+
+        .progress-sub {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.85rem;
+        }
+
+        /* 📜 HISTORY CARD */
+        .history-card {
+            background: var(--card-bg);
+            margin: 16px;
+            border-radius: 24px;
+            padding: 20px;
+            box-shadow: var(--card-shadow);
+        }
+
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+
+        .history-title {
+            font-size: 1.1rem;
+            font-weight: 800;
+            color: var(--text-dark);
+        }
+
+        .show-all {
+            font-size: 0.85rem;
+            color: var(--text-medium);
+            cursor: pointer;
+        }
+
+        .history-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 0;
+            border-bottom: 1px solid #f1f5f9;
+        }
+
+        .history-item:last-child {
+            border-bottom: none;
+        }
+
+        .history-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+        }
+
+        .history-icon.received {
+            background: #dcfce7;
+            color: var(--accent-green);
+        }
+
+        .history-icon.sent {
+            background: #fef3c7;
+            color: var(--accent-yellow);
+        }
+
+        .history-details {
+            flex: 1;
+        }
+
+        .history-type {
+            font-weight: 700;
+            font-size: 0.95rem;
+            color: var(--text-dark);
+        }
+
+        .history-amount {
+            font-size: 0.85rem;
+            color: var(--text-medium);
+        }
+
+        .history-time {
+            font-size: 0.8rem;
+            color: var(--text-light);
+        }
+
+        /* 📱 BOTTOM NAV BAR */
+        .bottom-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 12px 24px;
+            padding-bottom: max(12px, env(safe-area-inset-bottom));
+            display: flex;
+            justify-content: center;
+        }
+
+        .nav-pill {
+            background: var(--bar-bg);
+            border-radius: 100px;
+            padding: 12px 24px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .nav-item {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .nav-item:hover {
+            color: white;
+        }
+
+        .nav-item.active {
+            background: var(--accent-yellow);
+            color: var(--bar-bg);
+        }
+
+        /* 🎤 RECORD BUTTON (Special) */
+        .record-orb {
+            width: 64px;
+            height: 64px;
+            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            margin: -20px 8px 0 8px;
+            box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
+            border: 4px solid var(--bar-bg);
+        }
+
+        .record-orb:hover {
+            transform: scale(1.1);
+        }
+
+        .record-orb:active {
+            transform: scale(0.95);
+        }
+
+        .record-orb.active {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
+            animation: pulse-record 1.5s infinite;
+        }
+
+        @keyframes pulse-record {
+
+            0%,
+            100% {
+                box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
+            }
+
+            50% {
+                box-shadow: 0 8px 40px rgba(239, 68, 68, 0.6);
+            }
+        }
+
+        /* 📝 CHAT MESSAGES */
+        .chat-container {
+            padding: 0 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .chat-message {
+            max-width: 85%;
+            padding: 16px;
+            border-radius: 20px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .chat-message.user {
+            background: var(--card-bg);
+            align-self: flex-start;
+            border-bottom-left-radius: 4px;
+            box-shadow: var(--card-shadow);
+        }
+
+        .chat-message.bot {
+            background: var(--bar-bg);
+            color: white;
+            align-self: flex-end;
+            border-bottom-right-radius: 4px;
+        }
+
+        .message-text {
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
+        .message-meta {
+            font-size: 0.75rem;
+            opacity: 0.6;
+            margin-top: 8px;
+        }
+
+        /* 🔘 LANGUAGE SELECTOR */
+        .lang-select {
+            background: #f1f5f9;
+            border: none;
+            border-radius: 12px;
+            padding: 12px 16px;
+            font-family: 'Nunito', sans-serif;
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-dark);
+            cursor: pointer;
+            width: 100%;
+            appearance: none;
+        }
+
+        /* Empty State */
+        .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+        }
+
+        .empty-icon {
+            font-size: 4rem;
+            margin-bottom: 16px;
+        }
+
+        .empty-title {
+            font-size: 1.5rem;
+            font-weight: 900;
+            color: white;
+            margin-bottom: 8px;
+        }
+
+        .empty-sub {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1rem;
+        }
+
+        /* MODAL */
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: flex-end;
+            justify-content: center;
+            z-index: 2000;
+            backdrop-filter: blur(4px);
+        }
+
+        .modal.visible {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--card-bg);
+            width: 100%;
+            max-width: 500px;
+            border-radius: 24px 24px 0 0;
+            padding: 24px;
+            max-height: 80vh;
+            overflow-y: auto;
+            animation: slideUp 0.3s ease;
+        }
+
+        @keyframes slideUp {
+            from {
+                transform: translateY(100%);
+            }
+
+            to {
+                transform: translateY(0);
+            }
+        }
+
+        .modal-handle {
+            width: 40px;
+            height: 4px;
+            background: #e2e8f0;
+            border-radius: 2px;
+            margin: 0 auto 20px;
+        }
+
+        .modal-title {
+            font-size: 1.3rem;
+            font-weight: 800;
+            margin-bottom: 20px;
+        }
+
+        .form-group {
+            margin-bottom: 16px;
+        }
+
+        .form-group label {
+            display: block;
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: var(--text-medium);
+            margin-bottom: 8px;
+        }
+
+        .save-btn {
+            width: 100%;
+            padding: 16px;
+            background: var(--accent-green);
+            color: white;
+            border: none;
+            border-radius: 16px;
+            font-family: 'Nunito', sans-serif;
+            font-size: 1rem;
+            font-weight: 800;
+            cursor: pointer;
+            margin-top: 16px;
+            transition: all 0.2s;
+        }
+
+        .save-btn:hover {
+            background: #16a34a;
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- TOP HEADER -->
+    <div class="top-header">
+        <div class="greeting">👋 Bonjour!</div>
+        <div class="settings-icon" id="settings-trigger">
+            <i class="fa-solid fa-gear"></i>
+        </div>
+    </div>
+
+    <!-- MAIN CARD -->
+    <div class="main-card">
+        <div class="card-label">Traduction Instantanée</div>
+        <div class="main-value">Babel <span>Matrix</span></div>
+
+        <div class="language-display" id="current-lang">
+            🌍 Appuyez sur le micro pour parler...
+        </div>
+
+        <!-- Language Selector -->
+        <select class="lang-select" id="target-lang-quick">
+            <option value="French">🇫🇷 Français</option>
+            <option value="English">🇬🇧 English</option>
+            <option value="Moroccan Darija">🇲🇦 Darija</option>
+            <option value="Egyptian Arabic">🇪🇬 Masri</option>
+            <option value="Spanish">🇪🇸 Español</option>
+            <option value="German">🇩🇪 Deutsch</option>
+            <option value="Arabic">🇸🇦 العربية</option>
+        </select>
+
+        <!-- Action Buttons -->
+        <div class="action-row">
+            <div class="action-btn" id="listen-btn">
+                <div class="action-icon green">
+                    <i class="fa-solid fa-play"></i>
+                </div>
+                <span class="action-label">Écouter</span>
+            </div>
+            <div class="action-btn" id="copy-btn">
+                <div class="action-icon yellow">
+                    <i class="fa-solid fa-copy"></i>
+                </div>
+                <span class="action-label">Copier</span>
+            </div>
+            <div class="action-btn" id="share-btn">
+                <div class="action-icon purple">
+                    <i class="fa-solid fa-share"></i>
+                </div>
+                <span class="action-label">Partager</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- STATUS BAR -->
+    <div class="progress-card">
+        <div class="progress-icon">🎙️</div>
+        <div class="progress-info">
+            <div class="progress-title" id="status-text">Prêt</div>
+            <div class="progress-sub">Mode continu activé</div>
+        </div>
+    </div>
+
+    <!-- CHAT HISTORY -->
+    <div class="history-card">
+        <div class="history-header">
+            <span class="history-title">Historique</span>
+            <span class="show-all">Tout voir →</span>
+        </div>
+        <div id="chat-history">
+            <!-- Messages will appear here -->
+            <div class="empty-state" id="empty-hint" style="padding: 20px;">
+                <div style="font-size: 2rem;">💬</div>
+                <p style="color: var(--text-light); font-size: 0.9rem;">Vos traductions apparaîtront ici</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- BOTTOM NAV BAR -->
+    <div class="bottom-bar">
+        <div class="nav-pill">
+            <div class="nav-item">
+                <i class="fa-solid fa-clock-rotate-left"></i>
+            </div>
+            <div class="nav-item active">
+                <i class="fa-solid fa-language"></i>
+            </div>
+
+            <!-- THE RECORD ORB -->
+            <div class="record-orb" id="record-btn">
+                <i class="fa-solid fa-microphone"></i>
+            </div>
+
+            <div class="nav-item">
+                <i class="fa-solid fa-brain"></i>
+            </div>
+            <div class="nav-item">
+                <i class="fa-solid fa-user"></i>
+            </div>
+        </div>
+    </div>
+
+    <!-- SETTINGS MODAL -->
+    <div class="modal" id="settings-modal">
+        <div class="modal-content">
+            <div class="modal-handle"></div>
+            <h2 class="modal-title">⚙️ Paramètres</h2>
+
+            <div class="form-group">
+                <label>Mode d'Intelligence</label>
+                <select class="lang-select" id="ai-model-selector">
+                    <option value="gpt-4o-mini">🟢 OpenAI GPT-4o (Stable)</option>
+                    <option value="gemini-flash-latest">⚡ Gemini Flash</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label>Moteur Vocal</label>
+                <select class="lang-select" id="tts-selector">
+                    <option value="openai">🟢 OpenAI TTS</option>
+                    <option value="gemini">💎 Gemini TTS</option>
+                </select>
+            </div>
+
+            <button class="save-btn" id="save-settings">Enregistrer</button>
+        </div>
+    </div>
+
+    <!-- SCRIPTS -->
+    <script src="/static/script.js"></script>
+    <script>
+        // Settings Modal Logic
+        document.getElementById('settings-trigger').addEventListener('click', () => {
+            document.getElementById('settings-modal').classList.add('visible');
+        });
+
+        document.getElementById('settings-modal').addEventListener('click', (e) => {
+            if (e.target === document.getElementById('settings-modal')) {
+                document.getElementById('settings-modal').classList.remove('visible');
+            }
+        });
+
+        document.getElementById('save-settings').addEventListener('click', () => {
+            const aiModel = document.getElementById('ai-model-selector').value;
+            const ttsEngine = document.getElementById('tts-selector').value;
+            localStorage.setItem('aiModel', aiModel);
+            localStorage.setItem('ttsEngine', ttsEngine);
+            document.getElementById('settings-modal').classList.remove('visible');
+            document.getElementById('status-text').innerText = '✅ Sauvegardé!';
+            setTimeout(() => document.getElementById('status-text').innerText = 'Prêt', 2000);
+        });
+
+        // Load saved values
+        document.getElementById('ai-model-selector').value = localStorage.getItem('aiModel') || 'gpt-4o-mini';
+        document.getElementById('tts-selector').value = localStorage.getItem('ttsEngine') || 'openai';
+    </script>
+</body>
+
+</html>