changes from my side

.gitignore

@@ -1 +1,5 @@
-translator_app/.venv
+translator_app/.venv
+.env
+*.env
+*.sqlite3
+__pycache__/

translator_app/translator/services/translation_service.py

@@ -20,21 +20,16 @@ class TranslationService:
     # NLLB requires its FLORES language tags. MADLAD accepts ISO language codes.
     NLLB_LANGUAGE_CODES = {
         "en": "eng_Latn",
-        "es": "spa_Latn",
+        "sw": "swh_Latn",
+        "lg": "lug_Latn",
+        "luo": "luo_Latn",
+        "nyn": "nyn_Latn",
+        "ach": "ach_Latn",
+        "teo": "teo_Latn",
+        "lgg": "lgg_Latn",
+        "rw": "kin_Latn",
         "fr": "fra_Latn",
-        "de": "deu_Latn",
-        "it": "ita_Latn",
-        "pt": "por_Latn",
-        "ru": "rus_Cyrl",
-        "zh": "zho_Hans",
-        "ja": "jpn_Jpan",
-        "ko": "kor_Hang",
         "ar": "arb_Arab",
-        "hi": "hin_Deva",
-        "sw": "swh_Latn",
-        "yo": "yor_Latn",
-        "ha": "hau_Latn",
-        "ig": "ibo_Latn",
     }
 
     def __init__(self):
@@ -43,21 +38,16 @@ class TranslationService:
     def _get_supported_languages(self):
         return {
             "en": "English",
-            "es": "Spanish",
+            "sw": "Swahili (Kiswahili)",
+            "lg": "Luganda (Ganda)",
+            "luo": "Luo (Acholi / Lango)",
+            "nyn": "Runyankole / Rukiga",
+            "ach": "Acholi",
+            "teo": "Ateso (Teso)",
+            "lgg": "Lugbara",
+            "rw": "Kinyarwanda",
             "fr": "French",
-            "de": "German",
-            "it": "Italian",
-            "pt": "Portuguese",
-            "ru": "Russian",
-            "zh": "Chinese",
-            "ja": "Japanese",
-            "ko": "Korean",
             "ar": "Arabic",
-            "hi": "Hindi",
-            "sw": "Swahili",
-            "yo": "Yoruba",
-            "ha": "Hausa",
-            "ig": "Igbo",
         }
 
     def get_supported_languages(self):
@@ -121,9 +111,8 @@ class TranslationService:
 
     def _translate_model_api(self, text, source_language, target_language, model):
         if not settings.MODEL_API_URL:
-            return {
-                "error": "ML translation is not configured. Add MODEL_API_URL to your environment."
-            }
+            logger.info("MODEL_API_URL not set; falling back to free translation engine.")
+            return self._translate_free_fallback(text, source_language, target_language)
 
         if isinstance(settings.TRANSLATION_MODEL_ENGINES, dict):
             engine_name = settings.TRANSLATION_MODEL_ENGINES.get(model, model)
@@ -156,7 +145,7 @@ class TranslationService:
             response = requests.post(
                 settings.MODEL_API_URL,
                 json=payload,
-                timeout=60,
+                timeout=3,
             )
 
             if response.status_code != 200:
@@ -165,22 +154,43 @@ class TranslationService:
                     response.status_code,
                     response.text,
                 )
-                return {
-                    "error": f"The ML service failed with status {response.status_code}."
-                }
+                return self._translate_free_fallback(text, source_language, target_language)
 
             translated_text = response.json().get("translation")
             if not translated_text:
-                return {"error": "The ML model returned no translation."}
+                return self._translate_free_fallback(text, source_language, target_language)
             return {"translated_text": translated_text}
 
-        except requests.exceptions.Timeout:
-            return {"error": "The ML translation request timed out."}
-        except requests.exceptions.ConnectionError:
-            return {"error": "Could not connect to the ML translation service."}
+        except (requests.exceptions.Timeout, requests.exceptions.ConnectionError):
+            logger.warning("ML translation service unreachable; falling back to free translation engine.")
+            return self._translate_free_fallback(text, source_language, target_language)
         except (ValueError, requests.RequestException) as error:
             logger.exception("Model API translation failed: %s", error)
-            return {"error": "The ML translation service returned an invalid response."}
+            return self._translate_free_fallback(text, source_language, target_language)
+
+    def _translate_free_fallback(self, text, source_language, target_language):
+        """Free public fallback translation when the ML model API is unconfigured/unavailable."""
+        try:
+            url = "https://translate.googleapis.com/translate_a/single"
+            params = {
+                "client": "gtx",
+                "sl": source_language or "auto",
+                "tl": target_language,
+                "dt": "t",
+                "q": text,
+            }
+            res = requests.get(url, params=params, timeout=10)
+            if res.status_code == 200:
+                data = res.json()
+                translated_text = "".join([chunk[0] for chunk in data[0] if chunk[0]])
+                if translated_text:
+                    return {"translated_text": translated_text}
+        except Exception as err:
+            logger.warning("Free fallback translation failed: %s", err)
+
+        return {
+            "error": "Translation service is currently unavailable. Please check your network or backend settings."
+        }
 
     def _translate_deepl(self, text, source_language, target_language):
         if not settings.TRANSLATION_API_KEY:

translator_app/translator/templates/translator/translator.html

@@ -3,9 +3,11 @@
 <main class="flex-1 w-full max-w-5xl mx-auto px-5 pb-12">
   <form id="translation-form">
     {% csrf_token %}
-    <div class="flex flex-wrap justify-center items-center gap-3 mb-5">
+    
+    <!-- Header Control Bar -->
+    <div class="flex flex-wrap justify-center items-center gap-3 mb-6">
       <select id="source-language" aria-label="Source language"
-        class="rounded-full border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-primary shadow-sm focus:border-primary focus:ring-primary">
+        class="rounded-full border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-primary shadow-sm focus:border-primary focus:ring-primary transition hover:border-stone-300">
         <option value="">Detect language</option>
         {% for language in languages %}
         <option value="{{ language.code }}" {% if language.code == 'en' %}selected{% endif %}>
@@ -13,60 +15,162 @@
         </option>
         {% endfor %}
       </select>
+      
       <button id="swap-languages" type="button" title="Swap languages"
-        class="rounded-full bg-sand px-3 py-2.5 text-primary transition hover:rotate-180">⇄</button>
+        class="rounded-full bg-sand px-3 py-2.5 text-primary shadow-sm transition hover:rotate-180 hover:bg-stone-200">⇄</button>
+      
       <select id="target-language" aria-label="Target language"
-        class="rounded-full border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-primary shadow-sm focus:border-primary focus:ring-primary">
+        class="rounded-full border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-primary shadow-sm focus:border-primary focus:ring-primary transition hover:border-stone-300">
         {% for language in languages %}
         <option value="{{ language.code }}" {% if language.code == 'sw' %} selected{% endif%}>
           {{ language.name }}
         </option>
-          {% endfor %}
+        {% endfor %}
       </select>
+      
       <label
-        class="flex items-center gap-2 rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-600 shadow-sm">Model
+        class="flex items-center gap-2 rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-600 shadow-sm">
+        <span class="text-xs uppercase tracking-wider text-stone-400">Model</span>
         <select id="translation-model" aria-label="Translation model"
-          class="border-0 bg-transparent py-0 pl-1 pr-7 text-primary focus:ring-0">
-          {% for value, label in models %}<option value="{{ value }}" {% if value == default_model %} selected{% endif %}>
-            {{ label }}</option>{% endfor %}
+          class="border-0 bg-transparent py-0 pl-1 pr-7 text-primary font-bold focus:ring-0">
+          {% for value, label in models %}
+          <option value="{{ value }}" {% if value == default_model %} selected{% endif %}>
+            {{ label }}
+          </option>
+          {% endfor %}
         </select>
       </label>
     </div>
-    <div class="rounded-2xl border border-stone-200 bg-white p-5 md:p-7 shadow-xl shadow-stone-200/40 md:flex md:gap-7">
+
+    <!-- Main Translation Panels -->
+    <div class="rounded-3xl border border-stone-200 bg-white p-5 md:p-8 shadow-2xl shadow-stone-200/50 md:flex md:gap-8 transition-all">
+      <!-- Source Panel -->
       <section class="flex min-h-72 flex-1 flex-col">
-        <label for="source-text" class="mb-3 text-xs font-bold uppercase tracking-widest text-stone-400">Source</label>
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-xs font-bold uppercase tracking-widest text-stone-400">Source Text</span>
+          <button id="listen-source" type="button" title="Listen to source text"
+            class="hidden items-center gap-1 rounded-full bg-mist px-3 py-1 text-xs font-bold text-primary hover:bg-stone-200 transition">
+            🔊 Listen
+          </button>
+        </div>
         <textarea id="source-text" maxlength="5000"
           class="min-h-52 w-full flex-1 resize-none border-0 p-0 font-display text-2xl leading-relaxed text-primary placeholder:text-stone-300 focus:ring-0"
-          placeholder="Enter text to translate..."></textarea>
-        <div class="mt-3 flex justify-between border-t border-stone-100 pt-3 text-xs text-stone-400"><button
-            id="clear-source" type="button" class="font-semibold text-primary hover:underline">Clear</button><span
-            id="character-count">0 / 5000 characters</span></div>
+          placeholder="Type or use the Voice Assistant below to dictate..."></textarea>
+        
+        <!-- Source Footer Bar with Text Translate Button -->
+        <div class="mt-4 flex items-center justify-between border-t border-stone-100 pt-3 text-xs text-stone-400">
+          <div class="flex items-center gap-3">
+            <button id="clear-source" type="button" class="font-semibold text-primary hover:underline">Clear text</button>
+            <span id="character-count">0 / 5000 characters</span>
+          </div>
+          <button id="translate-text-btn" type="submit"
+            class="translate-trigger flex items-center gap-1.5 rounded-full bg-primary px-5 py-2 text-xs font-bold uppercase tracking-wider text-white shadow-md shadow-primary/20 transition hover:scale-105 active:scale-95 disabled:cursor-wait disabled:opacity-70">
+            <span>✨</span> <span>Translate Text</span>
+          </button>
+        </div>
       </section>
+
       <div class="my-5 hidden w-px bg-stone-100 md:block"></div>
+
+      <!-- Translation Output Panel -->
       <section class="relative flex min-h-72 flex-1 flex-col">
-        <div class="mb-3 flex items-center justify-between"><span
-            class="text-xs font-bold uppercase tracking-widest text-stone-400">Translation</span><button
-            id="copy-result" type="button"
-            class="hidden rounded-full px-3 py-1 text-xs font-bold text-primary hover:bg-mist">Copy</button></div>
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-xs font-bold uppercase tracking-widest text-stone-400">Translation</span>
+          <div class="flex items-center gap-2">
+            <button id="listen-result" type="button" title="Listen to translation"
+              class="hidden items-center gap-1 rounded-full bg-mist px-3 py-1 text-xs font-bold text-primary hover:bg-stone-200 transition">
+              🔊 Listen
+            </button>
+            <button id="copy-result" type="button"
+              class="hidden rounded-full bg-mist px-3 py-1 text-xs font-bold text-primary hover:bg-stone-200 transition">
+              📋 Copy
+            </button>
+          </div>
+        </div>
         <p id="translated-text" aria-live="polite"
-          class="relative flex-1 whitespace-pre-wrap font-display text-2xl leading-relaxed text-primary"><span
-            class="text-stone-300">Your translation will appear here.</span></p>
-        <p id="result-meta" class="mt-3 text-xs text-stone-400"></p>
+          class="relative flex-1 whitespace-pre-wrap font-display text-2xl leading-relaxed text-primary">
+          <span class="text-stone-300">Your translation will appear here.</span>
+        </p>
+        <p id="result-meta" class="mt-4 text-xs text-stone-400 border-t border-stone-100 pt-3"></p>
       </section>
     </div>
-    <div class="mt-6 flex flex-col items-center gap-3"><button id="translate-button"
-        class="rounded-full bg-primary px-10 py-4 font-display text-lg font-bold uppercase tracking-wider text-white shadow-lg shadow-primary/30 transition hover:scale-105 disabled:cursor-wait disabled:opacity-70">Translate</button>
-      <p id="form-message" role="alert" class="min-h-5 text-sm text-red-700"></p>
+
+    <!-- Modern Voice Assistant Chatbot Card -->
+    <div class="mt-6 rounded-3xl border border-stone-200/80 bg-gradient-to-br from-stone-50 via-white to-sand/40 p-5 md:p-6 shadow-xl shadow-stone-200/40">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-5">
+        
+        <!-- Left Info & Waveform -->
+        <div class="flex items-center gap-4 text-center md:text-left">
+          <!-- Mic Floating Action Hub -->
+          <div class="relative">
+            <button id="voice-record" type="button" title="Toggle Voice Dictation"
+              class="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-xl text-white shadow-md shadow-primary/30 transition-all hover:scale-105 active:scale-95 focus:outline-none">
+              <span id="mic-icon">🎙️</span>
+            </button>
+            <!-- Animated Pulsing Ring when Recording -->
+            <span id="pulse-ring" class="hidden absolute inset-0 -z-10 rounded-full bg-red-400/40 animate-ping"></span>
+          </div>
+
+          <div>
+            <div class="flex items-center gap-2 justify-center md:justify-start">
+              <h3 id="record-status-heading" class="font-display font-bold text-primary text-sm">Voice AI Assistant</h3>
+              <span id="recording-badge" class="hidden rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-bold uppercase text-red-700 animate-pulse">
+                🔴 Live Dictating
+              </span>
+            </div>
+            <p id="record-subtext" class="text-xs text-stone-500 mt-0.5">Tap the mic to dictate live in any supported language.</p>
+          </div>
+        </div>
+
+        <!-- Center Sound Wave Visualization (Appears when active) -->
+        <div id="sound-wave" class="hidden flex items-center gap-1.5 h-6">
+          <span class="w-1 bg-primary rounded-full animate-[bounce_1s_infinite_100ms] h-3"></span>
+          <span class="w-1 bg-primary rounded-full animate-[bounce_1s_infinite_300ms] h-6"></span>
+          <span class="w-1 bg-primary rounded-full animate-[bounce_1s_infinite_200ms] h-4"></span>
+          <span class="w-1 bg-primary rounded-full animate-[bounce_1s_infinite_400ms] h-6"></span>
+          <span class="w-1 bg-primary rounded-full animate-[bounce_1s_infinite_150ms] h-3"></span>
+        </div>
+
+        <!-- Dedicated Voice Translate Action Button -->
+        <div class="flex items-center gap-2">
+          <button id="translate-voice-btn" type="submit"
+            class="translate-trigger flex items-center gap-1.5 rounded-full bg-primary px-5 py-2 text-xs font-bold uppercase tracking-wider text-white shadow-md shadow-primary/20 transition hover:scale-105 active:scale-95 disabled:cursor-wait disabled:opacity-70">
+            <span>⚡</span> <span>Translate Voice</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Alert / Message bar -->
+    <div class="mt-4 text-center">
+      <p id="form-message" role="alert" class="min-h-5 text-sm font-semibold text-red-600"></p>
     </div>
   </form>
-  <div class="mt-12 text-center"><a href="{% url 'translator:history' %}"
-      class="text-sm font-bold text-primary underline underline-offset-4 hover:text-stone-700">View history</a></div>
+
+  <!-- History Footer Navigation -->
+  <div class="mt-10 text-center">
+    <a href="{% url 'translator:history' %}"
+      class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-6 py-2.5 text-sm font-bold text-primary shadow-sm hover:bg-sand transition">
+      📜 View Translation History
+    </a>
+  </div>
 </main>
+
 <script>
   const form = document.querySelector('#translation-form'), source = document.querySelector('#source-text'), result = document.querySelector('#translated-text'), message = document.querySelector('#form-message'), button = document.querySelector('#translate-button'), count = document.querySelector('#character-count');
   const csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
   const modelSelect = document.querySelector('#translation-model');
   const sourceSelect = document.querySelector('#source-language');
+  const targetSelect = document.querySelector('#target-language');
+  const recordBtn = document.querySelector('#voice-record');
+  const micIcon = document.querySelector('#mic-icon');
+  const pulseRing = document.querySelector('#pulse-ring');
+  const recordBadge = document.querySelector('#recording-badge');
+  const recordSubtext = document.querySelector('#record-subtext');
+  const soundWave = document.querySelector('#sound-wave');
+  const listenSourceBtn = document.querySelector('#listen-source');
+  const listenResultBtn = document.querySelector('#listen-result');
+  const copyBtn = document.querySelector('#copy-result');
 
   function syncSourceForModel() {
     const isMadlad = modelSelect.value === 'madlad';
@@ -74,14 +178,176 @@
     if (isMadlad) sourceSelect.value = '';
   }
   modelSelect.addEventListener('change', syncSourceForModel);
-  syncSourceForModel(); // run once on load in case MADLAD is the default
-  source.addEventListener('input', () => count.textContent = `${source.value.length} / 5000 characters`);
-  document.querySelector('#clear-source').onclick = () => { source.value = ''; source.dispatchEvent(new Event('input')); source.focus() };
-  document.querySelector('#swap-languages').onclick = () => { const a = document.querySelector('#source-language'), b = document.querySelector('#target-language'); if (a.value) { [a.value, b.value] = [b.value, a.value] } };
-  document.querySelector('#copy-result').onclick = async () => { await navigator.clipboard.writeText(result.textContent); document.querySelector('#copy-result').textContent = 'Copied'; setTimeout(() => document.querySelector('#copy-result').textContent = 'Copy', 1200) };
+  syncSourceForModel();
+
+  function updateSourceControls() {
+    count.textContent = `${source.value.length} / 5000 characters`;
+    if (source.value.trim().length > 0) {
+      listenSourceBtn.classList.remove('hidden');
+      listenSourceBtn.classList.add('inline-flex');
+    } else {
+      listenSourceBtn.classList.add('hidden');
+      listenSourceBtn.classList.remove('inline-flex');
+    }
+  }
+  source.addEventListener('input', updateSourceControls);
+
+  document.querySelector('#clear-source').onclick = () => { 
+    source.value = ''; 
+    updateSourceControls(); 
+    source.focus(); 
+  };
+
+  document.querySelector('#swap-languages').onclick = () => { 
+    if (sourceSelect.value) { 
+      [sourceSelect.value, targetSelect.value] = [targetSelect.value, sourceSelect.value];
+    } 
+  };
+
+  // Text-to-Speech Audio Reader
+  function speakText(text, langCode) {
+    if (!('speechSynthesis' in window) || !text || !text.trim()) return;
+    window.speechSynthesis.cancel();
+    const utterance = new SpeechSynthesisUtterance(text);
+    if (langCode) utterance.lang = langCode;
+    window.speechSynthesis.speak(utterance);
+  }
+
+  listenSourceBtn.onclick = () => speakText(source.value, sourceSelect.value || 'en');
+  listenResultBtn.onclick = () => speakText(result.textContent, targetSelect.value || 'sw');
+
+  // Speech-to-Text Voice Dictation Assistant
+  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  let recognition = null;
+  let isRecording = false;
+
+  function stopRecordingUI() {
+    isRecording = false;
+    pulseRing.classList.add('hidden');
+    recordBadge.classList.add('hidden');
+    soundWave.classList.add('hidden');
+    recordSubtext.textContent = 'Tap the mic to dictate your message live in any language.';
+    micIcon.textContent = '🎙️';
+    recordBtn.classList.remove('bg-red-600');
+    recordBtn.classList.add('bg-primary');
+  }
+
+  if (SpeechRecognition) {
+    recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+
+    recognition.onstart = () => {
+      isRecording = true;
+      pulseRing.classList.remove('hidden');
+      recordBadge.classList.remove('hidden');
+      soundWave.classList.remove('hidden');
+      soundWave.classList.add('flex');
+      recordSubtext.textContent = 'Speak clearly into your microphone...';
+      micIcon.textContent = '⏹️';
+      recordBtn.classList.remove('bg-primary');
+      recordBtn.classList.add('bg-red-600');
+    };
+
+    recognition.onresult = (event) => {
+      let transcript = '';
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        transcript += event.results[i][0].transcript;
+      }
+      source.value = transcript;
+      updateSourceControls();
+    };
+
+    recognition.onerror = (event) => {
+      console.error('Speech recognition error:', event.error);
+      stopRecordingUI();
+      if (event.error !== 'no-speech') {
+        message.textContent = `Voice dictation status: ${event.error}`;
+      }
+    };
+
+    recognition.onend = () => {
+      stopRecordingUI();
+    };
+
+    recordBtn.addEventListener('click', () => {
+      if (isRecording) {
+        recognition.stop();
+      } else {
+        message.textContent = '';
+        const langCode = sourceSelect.value || 'en';
+        recognition.lang = langCode;
+        try {
+          recognition.start();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    });
+  } else {
+    recordBtn.addEventListener('click', () => {
+      message.textContent = 'Voice dictation is supported in Google Chrome, Microsoft Edge, Safari, and Opera.';
+    });
+  }
+
+  copyBtn.onclick = async () => { 
+    await navigator.clipboard.writeText(result.textContent); 
+    copyBtn.textContent = 'Copied!'; 
+    setTimeout(() => copyBtn.textContent = '📋 Copy', 1200);
+  };
+
+  const triggerBtns = document.querySelectorAll('.translate-trigger');
+
   form.addEventListener('submit', async e => {
-    e.preventDefault(); message.textContent = ''; button.disabled = true; button.textContent = 'Translating…'; result.classList.add('quiet-loading');
-    try { const response = await fetch("{% url 'translator:translate_api' %}", { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrf }, body: JSON.stringify({ text: source.value, source_language: document.querySelector('#source-language').value, target_language: document.querySelector('#target-language').value, model: document.querySelector('#translation-model').value }) }); const data = await response.json(); if (!response.ok) throw Error(data.error || 'Translation could not be completed.'); result.textContent = data.translated_text; document.querySelector('#result-meta').textContent = `${data.model_label || 'Translation'} · saved to history`; document.querySelector('#copy-result').classList.remove('hidden') } catch (error) { message.textContent = error.message; result.innerHTML = '<span class="text-stone-300">Your translation will appear here.</span>' } finally { button.disabled = false; button.textContent = 'Translate'; result.classList.remove('quiet-loading') }
+    e.preventDefault(); 
+    message.textContent = ''; 
+    
+    // Immediately stop recording & reset Voice UI to default when translating
+    if (recognition && isRecording) {
+      try { recognition.stop(); } catch (err) {}
+    }
+    stopRecordingUI();
+    
+    triggerBtns.forEach(btn => { 
+      btn.disabled = true; 
+      btn.classList.add('opacity-50'); 
+    });
+    
+    result.classList.add('quiet-loading');
+    
+    try { 
+      const response = await fetch("{% url 'translator:translate_api' %}", { 
+        method: 'POST', 
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrf }, 
+        body: JSON.stringify({ 
+          text: source.value, 
+          source_language: sourceSelect.value, 
+          target_language: targetSelect.value, 
+          model: modelSelect.value 
+        }) 
+      }); 
+      
+      const data = await response.json(); 
+      if (!response.ok) throw Error(data.error || 'Translation could not be completed.'); 
+      
+      result.textContent = data.translated_text; 
+      document.querySelector('#result-meta').textContent = `Engine: ${data.model_label || 'Translation'} · Saved to history`; 
+      copyBtn.classList.remove('hidden');
+      copyBtn.classList.add('inline-flex');
+      listenResultBtn.classList.remove('hidden');
+      listenResultBtn.classList.add('inline-flex');
+    } catch (error) { 
+      message.textContent = error.message; 
+      result.innerHTML = '<span class="text-stone-300">Your translation will appear here.</span>';
+      listenResultBtn.classList.add('hidden');
+      listenResultBtn.classList.remove('inline-flex');
+    } finally { 
+      triggerBtns.forEach(btn => { 
+        btn.disabled = false; 
+        btn.classList.remove('opacity-50'); 
+      });
+      result.classList.remove('quiet-loading');
+    }
   });
 </script>
 {% endblock %}

translator_app/translator/tests.py

@@ -15,17 +15,17 @@ class TranslatorViewsTests(TestCase):
     def test_translation_api_saves_history(self, translate):
         translate.return_value = {
             'source_text': 'Hello', 'translated_text': 'Jambo',
-            'source_language': 'en', 'target_language': 'sw', 'model': 'nllb_600m',
+            'source_language': 'en', 'target_language': 'sw', 'model': 'nllb',
         }
         response = self.client.post(
             reverse('translator:translate_api'),
-            data='{"text":"Hello","source_language":"en","target_language":"sw","model":"nllb_600m"}',
+            data='{"text":"Hello","source_language":"en","target_language":"sw","model":"nllb"}',
             content_type='application/json',
         )
         self.assertEqual(response.status_code, 200)
         self.assertEqual(response.json()['translated_text'], 'Jambo')
         history = TranslationHistory.objects.get()
-        self.assertEqual(history.translation_model, 'nllb_600m')
+        self.assertEqual(history.translation_model, 'nllb')
         self.assertEqual(history.source_text, 'Hello')
 
     def test_translation_api_rejects_missing_text(self):

translator_app/translator/views.py

@@ -10,9 +10,19 @@ from .services.translation_service import TranslationService
 
 
 def _languages():
-    """Use database languages when curated, otherwise use provider defaults."""
-    saved = Language.objects.filter(is_active=True).values('code', 'name')
-    return list(saved) or TranslationService().get_supported_languages()
+    """Sync curated East African languages with TranslationService and return them."""
+    service_languages = TranslationService().get_supported_languages()
+    active_codes = {item['code'] for item in service_languages}
+    
+    # Mark old non-East African languages as inactive in DB
+    Language.objects.exclude(code__in=active_codes).update(is_active=False)
+    
+    for item in service_languages:
+        Language.objects.update_or_create(
+            code=item['code'],
+            defaults={'name': item['name'], 'is_active': True}
+        )
+    return list(Language.objects.filter(is_active=True).order_by('name').values('code', 'name'))
 
 
 def translator(request):