Upload 8 files

backend/app.py

@@ -0,0 +1,159 @@
+import os
+import io
+import re
+import tempfile
+# Removed heavy imports from top to speed up startup:
+# import torch
+# import numpy as np
+# import soundfile as sf
+from flask import Flask, request, jsonify, send_file, render_template
+from flask_cors import CORS
+from gtts import gTTS
+from gtts.tts import gTTSError
+# Removed top-level transformers import to lazy-load MMS:
+# from transformers import VitsModel, AutoTokenizer
+
+# Ensure cache environment variables are set (works locally too)
+os.environ.setdefault("XDG_CACHE_HOME", "/data/.cache")
+os.environ.setdefault("HF_HOME", "/data/.cache/huggingface")
+os.environ.setdefault("HUGGINGFACE_HUB_CACHE", "/data/.cache/huggingface/hub")
+os.environ.setdefault("TRANSFORMERS_CACHE", "/data/transformers")
+os.environ.setdefault("TORCH_HOME", "/data/torch")
+
+for p in (
+    os.getenv("XDG_CACHE_HOME"),
+    os.getenv("HF_HOME"),
+    os.getenv("HUGGINGFACE_HUB_CACHE"),
+    os.getenv("TRANSFORMERS_CACHE"),
+    os.getenv("TORCH_HOME"),
+):
+    if p:
+        try:
+            os.makedirs(p, exist_ok=True)
+        except Exception:
+            pass
+
+# If you load MMS-TTS, pass cache_dir to from_pretrained
+MMS_MODEL_ID = "facebook/mms-tts-amh"
+
+_processor = None
+_model = None
+
+def load_mms():
+    global _processor, _model
+    if _processor is not None and _model is not None:
+        return _processor, _model
+    from transformers import AutoProcessor, AutoModelForTextToSpeech
+    cache_dir = os.getenv("TRANSFORMERS_CACHE")
+    _processor = AutoProcessor.from_pretrained(MMS_MODEL_ID, cache_dir=cache_dir)
+    _model = AutoModelForTextToSpeech.from_pretrained(MMS_MODEL_ID, cache_dir=cache_dir)
+    return _processor, _model
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+CORS(app)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+# Health check
+@app.route('/health')
+def health():
+    return jsonify({
+        "ok": True,
+        "mms_loaded": bool(mms_model and mms_tokenizer)
+    })
+
+@app.route('/api/tts', methods=['POST'])
+def text_to_speech():
+    data = request.get_json()
+    if not data or 'text' not in data or not data['text'].strip():
+        return jsonify({"error": "Text is required."}), 400
+
+    text = data.get('text')
+    model = data.get('model', 'gtts')
+    speed = float(data.get('speed', 1.0))
+
+    print(f"--- Received TTS Request for model: {model} ---")
+    
+    try:
+        if model == 'gtts':
+            try:
+                print("Attempting gTTS synthesis with default endpoint (tld='com')...")
+                tts = gTTS(text=text, lang='am', slow=(speed < 1.0), lang_check=False)
+                with tempfile.NamedTemporaryFile(delete=False, suffix='.mp3') as tmp:
+                    tmp_path = tmp.name
+                try:
+                    tts.save(tmp_path)
+                    with open(tmp_path, 'rb') as f:
+                        data_bytes = f.read()
+                finally:
+                    try: os.remove(tmp_path)
+                    except OSError: pass
+                if not data_bytes:
+                    raise RuntimeError("gTTS produced empty audio stream")
+                audio_fp = io.BytesIO(data_bytes)
+                audio_fp.seek(0)
+                print("Successfully generated audio with gTTS.")
+                return send_file(audio_fp, mimetype='audio/mpeg')
+            except gTTSError as ge:
+                msg = ("gTTS failed using the default endpoint (Google TTS). "
+                       "Please try again later or use the MMS model.")
+                print(f"gTTS gTTSError: {ge}")
+                return jsonify({"error": msg, "details": str(ge)}), 502
+            except Exception as ge:
+                msg = "gTTS failed unexpectedly on the default endpoint."
+                print(f"gTTS unexpected error: {ge}")
+                return jsonify({"error": msg, "details": str(ge)}), 502
+
+        elif model == 'mms':
+            try:
+                load_mms()
+            except Exception as e:
+                print(f"Failed to load MMS: {e}")
+                return jsonify({"error": "MMS-TTS model is not available on the server.", "details": str(e)}), 500
+
+            print("Generating audio with MMS-TTS...")
+
+            # Heavy imports only used here
+            import torch
+            import soundfile as sf
+
+            if re.search(r"[^A-Za-z0-9\s\.,\?!;:'\"\-]", text):
+                print("Text contains non-Roman characters. Ensure 'uroman' is installed for auto-romanization.")
+
+            inputs = mms_tokenizer(text, return_tensors="pt")
+            try:
+                input_len = inputs["input_ids"].shape[-1]
+            except Exception:
+                input_len = 0
+            if input_len == 0:
+                msg = ("MMS-TTS received text that tokenized to length 0. "
+                       "Install 'uroman' (Python >= 3.10) or provide romanized Latin text.")
+                print(msg)
+                return jsonify({"error": msg}), 400
+
+            with torch.no_grad():
+                output = mms_model(**inputs).waveform
+            sampling_rate = mms_model.config.sampling_rate
+            speech_waveform = output.cpu().numpy().squeeze()
+
+            audio_fp = io.BytesIO()
+            sf.write(audio_fp, speech_waveform, sampling_rate, format='WAV')
+            audio_fp.seek(0)
+            print("Successfully generated audio with MMS-TTS.")
+            return send_file(audio_fp, mimetype='audio/wav')
+
+        elif model in ['openai', 'azure']:
+            return jsonify({"error": "The keys for this model have expired. Please use other models."}), 403
+
+        else:
+            return jsonify({"error": f"The model '{model}' is not implemented yet."}), 501
+
+    except Exception as e:
+        print(f"An error occurred: {e}")
+        return jsonify({"error": f"An unexpected error occurred during TTS generation: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 7860))
+    app.run(debug=False, port=port, host='0.0.0.0')

backend/requirements.txt

@@ -0,0 +1,8 @@
+Flask==3.0.0
+Flask-Cors==4.0.0
+gunicorn==21.2.0
+gTTS==2.5.1
+transformers==4.44.2
+soundfile==0.12.1
+numpy==1.26.4
+uroman==1.3.1.1

backend/static/script.js

@@ -0,0 +1,271 @@
+$(document).ready(function() {
+    // --- DOM Element References ---
+    const amharicTextInput = $('#amharicText');
+    const ttsModelSelect = $('#ttsModel');
+    const speedInput = $('#speed');
+    const speedValueDisplay = $('#speed-value');
+    const generateBtn = $('#generateBtn');
+    const statusMessage = $('#statusMessage');
+    const audioPlayer = $('#audioPlayer');
+    const downloadBtn = $('#downloadBtn');
+    
+    // --- Other References ---
+    const API_URL = '/api/tts';
+    let lastGeneratedAudioUrl = null; // Variable to store the blob URL
+
+    // --- Event Listeners ---
+    ttsModelSelect.on('change', updateConfigVisibility);
+    
+    // THIS IS THE CORRECTED LINE
+    speedInput.on('input', function() { 
+        speedValueDisplay.text($(this).val() + 'x'); 
+    });
+
+    generateBtn.on('click', function() {
+        const text = amharicTextInput.val();
+        if (!text.trim()) {
+            alert('Please enter some Amharic text.');
+            return;
+        }
+
+        const requestData = buildRequestData();
+        console.log("Sending data to backend:", JSON.stringify(requestData, null, 2));
+
+        // --- 1. Set UI to loading state ---
+        setLoadingState(true);
+
+        fetch(API_URL, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestData),
+        })
+        .then(handleResponse)
+        .then(data => {
+            if (data instanceof Blob) {
+                console.log("Received audio blob from backend!");
+                if (lastGeneratedAudioUrl) {
+                    URL.revokeObjectURL(lastGeneratedAudioUrl);
+                }
+                lastGeneratedAudioUrl = URL.createObjectURL(data);
+                audioPlayer.attr('src', lastGeneratedAudioUrl);
+                setControlsEnabled(true);
+                showStatusMessage("Audio generated successfully!", "success");
+            }
+        })
+        .catch(error => {
+            console.error('Error during fetch operation:', error);
+            showStatusMessage(`Error: ${error.message}`, "danger");
+            setControlsEnabled(false);
+        })
+        .finally(() => {
+            setLoadingState(false);
+        });
+    });
+
+    downloadBtn.on('click', function() {
+        if (!lastGeneratedAudioUrl) return;
+        const link = document.createElement('a');
+        link.href = lastGeneratedAudioUrl;
+        // Choose file extension based on model
+        const model = ttsModelSelect.val();
+        const ext = (model === 'mms') ? 'wav' : 'mp3';
+        link.download = `amharic_speech.${ext}`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    });
+
+    // --- Helper Functions ---
+    function buildRequestData() {
+        const model = ttsModelSelect.val();
+        let modelSettings = {};
+        switch (model) {
+            case 'openai': modelSettings.voice = $('#openai-voice').val(); break;
+            case 'azure': modelSettings.voice = $('#azure-voice').val(); modelSettings.style = $('#azure-style').val(); break;
+            case 'mms': modelSettings.voice = $('#mms-voice').val(); break;
+        }
+        return {
+            text: amharicTextInput.val(),
+            model: model,
+            speed: speedInput.val(),
+            settings: modelSettings
+        };
+    }
+
+    function setLoadingState(isLoading) {
+        if (isLoading) {
+            generateBtn.prop('disabled', true).html('<span class="glyphicon glyphicon-refresh spinning"></span> Generating...');
+            statusMessage.html('');
+            setControlsEnabled(false);
+        } else {
+            generateBtn.prop('disabled', false).html('<span class="glyphicon glyphicon-bullhorn"></span> ድምፅ ፍጠር (Generate)');
+        }
+    }
+
+    function setControlsEnabled(isEnabled) {
+        if (isEnabled) {
+            audioPlayer.removeAttr('disabled');
+            downloadBtn.removeAttr('disabled');
+        } else {
+            audioPlayer.attr('disabled', 'disabled');
+            downloadBtn.attr('disabled', 'disabled');
+        }
+    }
+
+    function showStatusMessage(message, type) {
+        statusMessage.html(`<div class="alert alert-${type}">${message}</div>`);
+    }
+
+    async function handleResponse(response) {
+        if (!response.ok) {
+            let errJson = {};
+            try { errJson = await response.json(); } catch (e) { /* ignore */ }
+            const msg = errJson.details ? `${errJson.error || 'Server returned an error'} - ${errJson.details}` : (errJson.error || 'Server returned an error');
+            throw new Error(msg);
+        }
+        if (response.headers.get("Content-Type").includes("audio")) {
+            return response.blob();
+        }
+        return response.json();
+    }
+    
+    function updateConfigVisibility() {
+        $('.model-config').hide();
+        const selectedModel = ttsModelSelect.val();
+        switch (selectedModel) {
+            case 'openai': $('#openai-config').show(); $('#speed-config').show(); break;
+            case 'azure': $('#azure-config').show(); $('#speed-config').show(); break;
+            case 'mms': $('#mms-config').show(); $('#speed-config').show(); break;
+            case 'gtts': $('#speed-config').show(); break;
+        }
+    }
+
+    // --- Initial page setup ---
+    const spinningGlyph = `<style>.spinning{animation:spin 1s infinite linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>`;
+    $('head').append(spinningGlyph);
+    updateConfigVisibility();
+});
+
+(function () {
+  var $text = $('#amharicText');
+  var $char = $('#charCount');
+  var $model = $('#ttsModel');
+  var $speed = $('#speed');
+  var $speedVal = $('#speed-value');
+  var $status = $('#statusMessage');
+  var $gen = $('#generateBtn');
+  var $spinner = $('#genSpinner');
+  var $audio = $('#audioPlayer');
+  var $download = $('#downloadBtn');
+
+  function updateCharCount() {
+    var n = ($text.val() || '').length;
+    $char.text(n + ' characters');
+    savePrefs();
+  }
+
+  function updateSpeedValue() {
+    $speedVal.text(parseFloat($speed.val()).toFixed(1) + 'x');
+    savePrefs();
+  }
+
+  function showModelConfig() {
+    var v = $model.val();
+    $('.model-config').hide();
+    if (v === 'openai') $('#openai-config').show();
+    if (v === 'azure') $('#azure-config').show();
+    if (v === 'mms') $('#mms-config').show();
+
+    // Hint about output format
+    var hint = (v === 'mms') ? 'Output: WAV for MMS.' : 'Output: MP3 for gTTS/OpenAI/Azure.';
+    $('#formatHint').text(hint);
+    savePrefs();
+  }
+
+  function loadPrefs() {
+    try {
+      var p = JSON.parse(localStorage.getItem('ta_prefs') || '{}');
+      if (p.text) $text.val(p.text);
+      if (p.model) $model.val(p.model);
+      if (p.speed) $speed.val(p.speed);
+    } catch (e) {}
+  }
+  function savePrefs() {
+    try {
+      localStorage.setItem('ta_prefs', JSON.stringify({
+        text: $text.val() || '',
+        model: $model.val(),
+        speed: $speed.val()
+      }));
+    } catch (e) {}
+  }
+
+  function bindButtons() {
+    $('#sampleBtn').on('click', function () {
+      var sample = 'ሰላም! ይህ ሳምፕል ጽሑፍ ነው። በቀላሉ የአማርኛ ንግግር ድምፅ ለመፍጠር፤ መጀመሪያ የአማርኛ ጽሁፉን እዚህ ይጻፉ ወይ ኮፒ ፔስት ያድርጉት። ቀጥሎ በስተቀኝ ያሉትን ማስተካከያዎች ያስተካክሉ። ከዛም ድምጽ ፍጠር የሚለውን በተን ይጫኑ። ከትንሽ ቆይታዎች በኋላ የተፈጠረውን ድምፅ  ማጫወት ወም ማውረድ ይችላሉ። መልካም ግዜ። ';
+      $text.val(sample).trigger('input');
+    });
+    $('#clearBtn').on('click', function () {
+      $text.val('').trigger('input');
+      $text.focus();
+    });
+  }
+
+  // Optional helper: Call window.uiSetLoading(true/false) around your TTS request
+  function setLoading(isLoading, msg) {
+    if (isLoading) {
+      $gen.prop('disabled', true);
+      $spinner.show();
+      $status
+        .removeClass('alert-danger alert-success')
+        .addClass('alert alert-info')
+        .text(msg || 'Generating audio...');
+    } else {
+      $gen.prop('disabled', false);
+      $spinner.hide();
+    }
+  }
+  window.uiSetLoading = setLoading;
+
+  // When audio loads, enable controls and show success
+  $audio.on('loadeddata', function () {
+    $audio.prop('disabled', false);
+    $download.prop('disabled', false);
+    $status
+      .removeClass('alert-info alert-danger')
+      .addClass('alert alert-success')
+      .text('Ready. Press play or download.');
+  });
+
+  $(function () {
+    $('[data-toggle="tooltip"]').tooltip();
+
+    loadPrefs();
+    updateCharCount();
+    updateSpeedValue();
+    showModelConfig();
+    bindButtons();
+
+    $text.on('input', updateCharCount);
+    $model.on('change', showModelConfig);
+    $speed.on('input change', updateSpeedValue);
+  });
+})();
+
+$(function () {
+  // Smooth scroll for in-page links
+  $('a[href^="#"]').on('click', function (e) {
+    var target = this.getAttribute('href');
+    if (target.length > 1 && $(target).length) {
+      e.preventDefault();
+      $('html, body').animate({ scrollTop: $(target).offset().top - 60 }, 400);
+    }
+  });
+
+  // Back to top visibility
+  var $top = $('#backToTop');
+  $(window).on('scroll', function () {
+    if ($(this).scrollTop() > 200) $top.fadeIn();
+    else $top.fadeOut();
+  });
+});

backend/static/style.css

@@ -0,0 +1,66 @@
+body {
+    background-color: #f4f4f4;
+}
+
+/* Space for fixed-top navbar */
+body { padding-top: 70px; }
+
+/* Brand */
+.navbar-brand { font-size: 22px; font-weight: 700; letter-spacing: 0.3px; }
+@media (min-width: 992px) { .navbar-brand { font-size: 26px; } }
+.navbar-brand .brand-logo {
+  height: 28px; width: auto; margin-right: 8px; margin-top: -4px; vertical-align: middle; border-radius: 4px; display: inline-block;
+}
+
+
+.navbar-brand .brand-text {
+  display: inline-block;
+  font-size: 22px;
+  font-weight: 700;
+  vertical-align: middle;
+}
+
+/* Hero */
+.hero { margin-top: 10px; padding: 30px 20px; }
+.hero-title { margin-top: 10px; margin-bottom: 10px; }
+.hero-subtitle { font-size: 16px; color: #555; }
+.hero-link { text-decoration: underline; }
+
+/* Subtle elevation for panels */
+.panel-elevated { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+.panel-elevated:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.08); transition: box-shadow .2s ease; }
+
+/* Icon spacing */
+.navbar-nav > li > a .glyphicon, .navbar-nav > li > a .fa { margin-right: 6px; }
+.btn .glyphicon, .btn .fa { margin-right: 6px; }
+
+/* Contact spacing */
+.contact-section .panel { margin-top: 20px; }
+
+/* Footer */
+.footer { margin: 40px 0 20px; padding: 12px 0; border-top: 1px solid #eee; color: #777; }
+
+/* Back to top */
+.back-to-top {
+  position: fixed; right: 16px; bottom: 20px; z-index: 1030;
+  display: none; background: #337ab7; color: #fff; padding: 8px 10px;
+  border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+.back-to-top:hover { text-decoration: none; background: #2e6da4; }
+
+/* Spinner animation */
+.glyphicon-refresh-animate { -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }
+@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg);} to { -webkit-transform: rotate(359deg);} }
+@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(359deg);} }
+
+/* Dark mode (optional) */
+@media (prefers-color-scheme: dark) {
+  body { background: #121212; color: #ddd; }
+  .navbar-default { background-color: #1f1f1f; border-color: #2a2a2a; }
+  .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a { color: #ddd; }
+  .jumbotron.hero { background-color: #1b1b1b; color: #ddd; }
+  .panel { background-color: #1a1a1a; border-color: #2a2a2a; }
+  .panel .panel-heading { background-color: #252525 !important; color: #eee; border-color: #2a2a2a; }
+  .help-block { color: #aaa; }
+  .footer { border-top-color: #2a2a2a; color: #aaa; }
+}

backend/templates/index.html

@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NegaritAI - A Web Based Amharic Text to Speech</title>
+    <!-- Bootstrap 3 CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <!-- Font Awesome (icons for GitHub, etc.) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <!-- Favicon -->
+    <link rel="icon" href="{{ url_for('static', filename='img/log3.jpg') }}" type="image/jpeg">
+</head>
+<body>
+
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">
+        <img src="{{ url_for('static', filename='img/logo3.jpg') }}" alt="NegaritAI logo" class="brand-logo">
+        <span class="brand-text">NegaritAI</span>
+      </a>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-nav">
+        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
+      </button>
+    </div>
+    <div id="top-nav" class="collapse navbar-collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="https://huggingface.co/spaces/bushra-kb/talk-amharic-tts" target="_blank"><i class="fa fa-cloud"></i> Space</a></li>
+        <li><a href="https://github.com/bushra-kb/" target="_blank"><i class="fa fa-github"></i> GitHub</a></li>
+        <li><a href="https://github.com/bushra-kb/" target="_blank"><span class="glyphicon glyphicon-book"></span> Docs</a></li>
+        <li><a href="#contact"><span class="glyphicon glyphicon-earphone"></span> Contact Me</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<div class="container">
+    <!-- Hero -->
+    <div class="jumbotron hero text-center">
+      <p class="hero-subtitle">
+        <strong>NegaritAI: </strong>
+        Practical AI for Ethiopian languages—this page showcases the Amharic Text‑to‑Speech demo.<br>
+        Developed by <a href="https://github.com/bushra-kb/" class="hero-link">Bushra KB</a> (2025).
+      </p>
+     
+    </div>
+
+    <!-- Demo section -->
+    <div id="demo" class="row">
+      <div class="col-md-8">
+        <div class="panel panel-primary panel-elevated">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+              የጽሑፍ ማስገቢያ (Text Input)
+            </h3>
+          </div>
+          <div class="panel-body">
+            <textarea id="amharicText" class="form-control" rows="6" placeholder="የአማርኛ ጽሑፍ እዚህ ያስገቡ... (Enter Amharic text here...)"></textarea>
+            <div class="clearfix" style="margin-top:8px;">
+              <div class="pull-left text-muted">
+                <small id="charCount">0 characters</small>
+              </div>
+              <div class="pull-right">
+                <div class="btn-group btn-group-sm" role="group" aria-label="Text actions">
+                  <button id="sampleBtn" type="button" class="btn btn-default" title="Insert sample text" data-toggle="tooltip">
+                    <span class="glyphicon glyphicon-file"></span> Sample
+                  </button>
+                  <button id="clearBtn" type="button" class="btn btn-default" title="Clear text" data-toggle="tooltip">
+                    <span class="glyphicon glyphicon-trash"></span> Clear
+                  </button>
+                </div>
+              </div>
+            </div>
+            <p class="help-block">Tip: Write or paste any Amharic text. Configure settings, then click “Generate”.</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="panel panel-info panel-elevated">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+              ማስተካከያዎች (Configurations)
+            </h3>
+          </div>
+          <div class="panel-body">
+            <form class="form-horizontal">
+              <!-- TTS Model Selection -->
+              <div class="form-group">
+                  <label for="ttsModel" class="col-sm-3 control-label">TTS ሞዴል (Model)</label>
+                  <div class="col-sm-9">
+                      <select id="ttsModel" class="form-control" title="Choose a TTS provider">
+                          <option value="gtts">gTTS (Google)</option>
+                          <option value="mms">Hugging Face MMS-TTS</option>
+                          <option value="openai">OpenAI TTS</option>
+                          <option value="azure">Microsoft Azure TTS</option>
+                      </select>
+                      <p class="help-block" id="formatHint">Output: MP3 for gTTS/OpenAI/Azure, WAV for MMS.</p>
+                  </div>
+              </div>
+
+              <!-- Common Configurations: Speed -->
+              <div class="form-group config-group" id="speed-config">
+                  <label for="speed" class="col-sm-3 control-label">ፍጥነት (Speed)</label>
+                  <div class="col-sm-7">
+                      <input type="range" id="speed" class="form-control" min="0.5" max="2" step="0.1" value="1" aria-label="Playback speed">
+                  </div>
+                  <div class="col-sm-2">
+                      <p class="form-control-static" id="speed-value">1.0x</p>
+                  </div>
+              </div>
+
+              <!-- OpenAI Specific Configurations -->
+              <div class="model-config" id="openai-config">
+                  <div class="form-group">
+                      <label for="openai-voice" class="col-sm-3 control-label">ድምፅ (Voice)</label>
+                      <div class="col-sm-9">
+                          <select id="openai-voice" class="form-control">
+                              <option value="alloy">Alloy</option>
+                              <option value="echo">Echo</option>
+                              <option value="fable">Fable</option>
+                              <option value="onyx">Onyx</option>
+                              <option value="nova">Nova</option>
+                              <option value="shimmer">Shimmer</option>
+                          </select>
+                      </div>
+                  </div>
+              </div>
+
+              <!-- Azure Specific Configurations -->
+              <div class="model-config" id="azure-config">
+                  <div class="form-group">
+                      <label for="azure-voice" class="col-sm-3 control-label">ድምፅ (Voice)</label>
+                      <div class="col-sm-9">
+                          <select id="azure-voice" class="form-control">
+                              <option value="am-ET-Mekdes-Neural">Mekdes (Female)</option>
+                              <option value="am-ET-Ameha-Neural">Ameha (Male)</option>
+                          </select>
+                      </div>
+                  </div>
+                  <div class="form-group">
+                      <label for="azure-style" class="col-sm-3 control-label">የንግግር ስልት (Style)</label>
+                      <div class="col-sm-9">
+                          <select id="azure-style" class="form-control">
+                              <option value="general">General</option>
+                              <option value="cheerful">Cheerful</option>
+                              <option value="sad">Sad</option>
+                          </select>
+                      </div>
+                  </div>
+              </div>
+
+              <!-- MMS-TTS Specific Configurations -->
+              <div class="model-config" id="mms-config">
+                  <div class="form-group">
+                      <label for="mms-voice" class="col-sm-3 control-label">ድምፅ (Voice)</label>
+                      <div class="col-sm-9">
+                          <select id="mms-voice" class="form-control">
+                              <option value="default">Default</option>
+                          </select>
+                      </div>
+                  </div>
+              </div>
+
+            </form>
+          </div>
+          <div class="panel-footer">
+            <button id="generateBtn" class="btn btn-block btn-success">
+              <span class="glyphicon glyphicon-bullhorn"></span>
+              ድምፅ ፍጠር (Generate)
+              <span id="genSpinner" class="glyphicon glyphicon-refresh glyphicon-refresh-animate" style="margin-left:8px; display:none;"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="audio" class="row text-center" >
+      <div class="col-md-8 col-md-offset-2">
+        <div id="statusMessage" role="status" style="margin-bottom: 15px;" aria-live="polite"></div>
+        <div class="panel panel-info panel-elevated">
+          <div class="panel-heading">
+            <h3 class="panel-title">የተፈጠረው ድምፅ (Generated Audio)</h3>
+          </div>
+          <div class="panel-body">
+            <audio id="audioPlayer" controls disabled style="width: 100%;"></audio>
+            <button id="downloadBtn" class="btn btn-primary" style="margin-top: 15px;" disabled>
+              <span class="glyphicon glyphicon-download-alt"></span> አውርድ (Download)
+            </button>
+            <p class="help-block" style="margin-top:10px;">
+              First play may take longer after idle time. Heavy usage can be rate-limited.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Contact section -->
+    <section id="contact" class="contact-section">
+      <div class="row">
+        <div class="col-md-8 col-md-offset-2">
+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <h3 class="panel-title"><span class="glyphicon glyphicon-envelope"></span> Contact Me</h3>
+            </div>
+            <div class="panel-body text-center">
+              <p>Questions, feedback, or collaboration? Welcome, Bro! Here are some ways to reach out:</p>
+              <div class="btn-group">
+                <a class="btn btn-default" href="mailto:[email protected]"><i class="fa fa-envelope"></i> Email</a>
+                <a class="btn btn-default" href="https://github.com/bushra-kb/talk-amharic-tts/issues" target="_blank"><i class="fa fa-github"></i> GitHub Issues</a>
+                <a class="btn btn-default" href="https://huggingface.co/spaces/bushra-kb/talk-amharic-tts/discussions" target="_blank"><span class="glyphicon glyphicon-comment"></span> Discussions</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer text-center text-muted">
+      <small>&copy; 2025 NegaritAI • Developed by Bushra KB</small>
+    </footer>
+</div>
+
+<!-- Back to top -->
+<a href="#top" id="backToTop" class="back-to-top" title="Back to top">
+  <span class="glyphicon glyphicon-chevron-up"></span>
+</a>
+
+<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<!-- Bootstrap 3 JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<!-- Custom JS -->
+<script src="{{ url_for('static', filename='script.js') }}"></script>
+
+</body>
+</html>