feat: First public release of the VerbaLive app This commit includes the complete application for real-time speech-to-text and translation, with a Flask backend, a JavaScript frontend, and April ASR integration. Includes a Dockerfile for easy deployment on Hugging Face Spaces.

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+april-english-dev-01110_en.april filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,34 @@
+# Temel Python imajını kullan
+# Bu, uygulamanın çalışması için gerekli tüm Python ortamını sağlar.
+FROM python:3.10-slim
+
+# Çalışma dizinini /app olarak belirle
+# Bu, tüm proje dosyalarımızın içinde olacağı dizindir.
+WORKDIR /app
+
+# Gerekli sistem kütüphanelerini yükle
+# Bu kütüphaneler, bazı Python paketleri için gerekli olabilir.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    portaudio19-dev \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# requirements.txt dosyasını kopyala ve Python bağımlılıklarını yükle
+# Bu adım, önbellekleme (caching) sayesinde daha hızlı imaj oluşturur.
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Uygulama dosyalarını Docker imajına kopyala
+# Bu komut, app.py, index.html, static klasörü ve ASR modelini kopyalar.
+COPY . .
+
+# Hugging Face Spaces için varsayılan portu ayarla
+# Hugging Face, port numarasını bu ortam değişkeni ile sağlar.
+ARG PORT=5000
+ENV PORT $PORT
+EXPOSE $PORT
+
+# Uygulamayı başlat
+# Gunicorn, Flask uygulamanızı daha güvenilir bir şekilde çalıştırır.
+# '--bind 0.0.0.0:$PORT' ifadesi, uygulamayı her yerden erişilebilir yapar.
+CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Barış Enes KÜMET
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -11,4 +11,64 @@ license: mit
 short_description: Real-time English captions powered by offline April-ASR, wit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# 🎤 VerbaLive - Real-Time Speech Recognition & Translation
+
+[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces)
+[![Python](https://img.shields.io/badge/python-v3.9+-blue.svg)](https://python.org)
+[![FastAPI](https://img.shields.io/badge/FastAPI-green.svg)](https://fastapi.tiangolo.com)
+[![React](https://img.shields.io/badge/React-18+-blue.svg)](https://reactjs.org)
+
+VerbaLive, mikrofondan gelen sesi anlık olarak metne dönüştüren ve farklı dillere çeviren gerçek zamanlı konuşma tanıma ve çeviri sistemidir.
+
+## 🌟 Özellikler
+
+- 🎯 **Gerçek Zamanlı Ses Tanıma**: Web Audio API ile anlık ses işleme
+- 🌍 **Çok Dilli Çeviri**: Google Translate ile 12+ dil desteği
+- ⚡ **Anlık Çeviri**: Konuşma sırasında satır satır çeviri
+- 📝 **Toplu Çeviri**: Sessizlik algılaması ile tam cümle çevirisi
+- 🎨 **Modern Web Arayüzü**: React tabanlı responsive tasarım
+- 🐳 **Docker Desteği**: Container ortamında çalışır
+- 🤗 **Hugging Face Uyumlu**: Spaces'de deploy edilebilir
+
+## 🚀 Kullanım
+
+1. **Başlat** butonuna tıklayın
+2. Mikrofon izni verin
+3. İngilizce konuşun
+4. Anlık transkripsiyon ve çeviri sonuçlarını görün
+
+## 🔧 Teknik Detaylar
+
+- **Backend**: FastAPI + WebSocket
+- **Frontend**: React 18 + Web Audio API
+- **Çeviri**: Google Translate API
+- **Deployment**: Docker + Hugging Face Spaces
+
+## 📱 Arayüz
+
+- **🇺🇸 English Speech**: Anlık ses tanıma sonuçları
+- **⚡ Anlık Çeviri**: Gerçek zamanlı çeviri
+- **📝 Toplu Çeviri**: Tamamlanan cümlelerin detaylı çevirisi
+
+## 🌐 Desteklenen Diller
+
+🇹🇷 Türkçe | 🇫🇷 Français | 🇩🇪 Deutsch | 🇪🇸 Español | 🇮🇹 Italiano | 🇷🇺 Русский | 🇯🇵 日本語 | 🇨🇳 中文 | 🇸🇦 العربية | 🇵🇹 Português | 🇳🇱 Nederlands | 🇰🇷 한국어
+
+## 🏗️ Docker Deployment
+
+```bash
+# Build the image
+docker build -t verbalive .
+
+# Run the container
+docker run -p 7860:7860 verbalive
+```
+
+## 📄 License
+
+MIT License - Detaylar için [LICENSE](LICENSE) dosyasını inceleyin.
+
+## 👨‍💻 Geliştirici
+
+[GitHub Repository](https://github.com/koesan/VerbaLive)

app.py

@@ -0,0 +1,228 @@
+import os
+import sys
+import time
+import threading
+from flask import Flask, render_template, request, jsonify, Response
+import numpy as np
+import requests
+import re
+import queue
+import april_asr as april
+import json
+
+# Google çeviri için farklı yaklaşım
+try:
+    from googletrans import Translator
+    GOOGLE_TRANSLATE_AVAILABLE = True
+except Exception as e:
+    print(f"Google Translate loading error: {e}")
+    GOOGLE_TRANSLATE_AVAILABLE = False
+
+try:
+    import deepl
+    DEEPL_AVAILABLE = True
+except ImportError:
+    DEEPL_AVAILABLE = False
+
+# Flask uygulamasını başlat
+app = Flask(__name__)
+
+# Global değişkenler ve nesneler
+live_caption_instance = None
+is_running = False
+asr_queue = queue.Queue()
+translator = None # Translator nesnesini global tanımla
+
+class SimpleGoogleTranslator:
+    def __init__(self):
+        self.session = requests.Session()
+        self.session.headers.update({
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+        })
+        
+    def translate(self, text, target_lang='tr', source_lang='en'):
+        try:
+            url = "https://translate.googleapis.com/translate_a/single"
+            params = {
+                'client': 'gtx',
+                'sl': source_lang,
+                'tl': target_lang,
+                'dt': 't',
+                'q': text
+            }
+            response = self.session.get(url, params=params, timeout=10)
+            if response.status_code == 200:
+                result = response.json()
+                if result and len(result) > 0 and len(result[0]) > 0:
+                    translated_text = ''.join([item[0] for item in result[0] if item[0]])
+                    return translated_text
+            return None
+        except Exception as e:
+            print(f"Simple Google Translate error: {e}")
+            return None
+
+class ImprovedTranslator:
+    def __init__(self):
+        self.google_translator = None
+        self.simple_translator = SimpleGoogleTranslator()
+        self.deepl_translator = None
+        
+    def translate(self, text, target_lang, service="Google Translate", deepl_key=""):
+        if not text or not text.strip():
+            return ""
+            
+        try:
+            cleaned_text = self._clean_text(text)
+            
+            if service == "Google Translate":
+                return self._google_translate(cleaned_text, target_lang)
+            elif service == "DeepL" and DEEPL_AVAILABLE and deepl_key:
+                return self._deepl_translate(cleaned_text, target_lang, deepl_key)
+            else:
+                return f"[{service} not available]"
+                
+        except Exception as e:
+            return f"[Translation error: {str(e)[:50]}...]"
+    
+    def _clean_text(self, text):
+        text = text.strip()
+        text = re.sub(r'\s+', ' ', text)
+        return text
+    
+    def _google_translate(self, text, target_lang):
+        try:
+            result = self.simple_translator.translate(text, target_lang)
+            if result:
+                return result
+        except Exception as e:
+            print(f"Simple translator failed: {e}")
+        
+        if GOOGLE_TRANSLATE_AVAILABLE:
+            try:
+                if self.google_translator is None:
+                    self.google_translator = Translator()
+                result = self.google_translator.translate(text, dest=target_lang, src='en')
+                if result and result.text:
+                    return result.text
+            except Exception as e:
+                print(f"Googletrans failed: {e}")
+        
+        return "[Google translation failed]"
+    
+    def _deepl_translate(self, text, target_lang, deepl_key):
+        try:
+            if self.deepl_translator is None:
+                self.deepl_translator = deepl.Translator(deepl_key)
+            
+            deepl_lang_map = {
+                'tr': 'TR', 'fr': 'FR', 'de': 'DE', 'es': 'ES', 
+                'it': 'IT', 'ru': 'RU', 'ja': 'JA', 'zh-CN': 'ZH',
+                'pt': 'PT', 'nl': 'NL', 'ko': 'KO'
+            }
+            deepl_target = deepl_lang_map.get(target_lang, target_lang.upper())
+            
+            result = self.deepl_translator.translate_text(text, target_lang=deepl_target)
+            return result.text if result else "[DeepL no result]"
+            
+        except Exception as e:
+            return f"[DeepL error]"
+
+def init_asr():
+    """ASR modelini başlatır."""
+    global live_caption_instance
+    if live_caption_instance is None:
+        try:
+            model_path = "april-english-dev-01110_en.april"
+            if not os.path.exists(model_path):
+                print(f"[HATA] Model dosyası bulunamadı: {model_path}")
+                return
+                
+            model = april.Model(model_path)
+            
+            def asr_handler(result_type, tokens):
+                text = "".join(token.token for token in tokens).strip()
+                if not text:
+                    return
+                if result_type == april.Result.PARTIAL_RECOGNITION:
+                    asr_queue.put({"english": text, "type": "partial"})
+                elif result_type == april.Result.FINAL_RECOGNITION:
+                    asr_queue.put({"english": text, "type": "final"})
+            
+            live_caption_instance = april.Session(model, asr_handler, asynchronous=True)
+            print("ASR Model başarıyla başlatıldı.")
+        except Exception as e:
+            print(f"[HATA] ASR Model yükleme hatası: {e}")
+            live_caption_instance = None # Hata durumunda nesneyi None yap
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/start', methods=['POST'])
+def start_stream():
+    global is_running, translator
+    if not is_running:
+        init_asr()
+        translator = ImprovedTranslator()
+        is_running = True
+    return jsonify({"status": "started"})
+
+@app.route('/stop', methods=['POST'])
+def stop_stream():
+    global is_running, live_caption_instance
+    if is_running:
+        is_running = False
+        if live_caption_instance:
+            live_caption_instance = None
+    return jsonify({"status": "stopped"})
+
+@app.route('/upload_audio', methods=['POST'])
+def upload_audio():
+    audio_data = request.data
+    
+    if live_caption_instance:
+        try:
+            live_caption_instance.feed_pcm16(audio_data)
+        except Exception as e:
+            print(f"[HATA] ASR feed hatası: {e}")
+            return jsonify({"status": "error", "message": str(e)}), 500
+
+    return '', 204
+
+@app.route('/stream_results')
+def stream_results():
+    target_lang = request.args.get("target_lang", "tr")
+    service = request.args.get("service", "Google Translate")
+    deepl_key = request.args.get("deepl_key", "")
+    
+    def generate():
+        while is_running:
+            try:
+                result = asr_queue.get(timeout=0.1)
+                english_text = result["english"]
+                result_type = result["type"]
+                
+                translated_text = ""
+                if result_type == "partial":
+                    translated_text = translator.translate(english_text, target_lang, "Google Translate", "")
+                elif result_type == "final":
+                    translated_text = translator.translate(english_text, target_lang, service, deepl_key)
+                    
+                response_data = {
+                    "english": english_text,
+                    "type": result_type,
+                    "translation": translated_text,
+                }
+                yield f"data: {json.dumps(response_data)}\n\n"
+                
+            except queue.Empty:
+                continue
+            except Exception as e:
+                print(f"SSE hatası: {e}")
+                break
+    
+    return Response(generate(), mimetype='text/event-stream')
+
+if __name__ == '__main__':
+    init_asr()
+    app.run(host='0.0.0.0', port=5000, threaded=True)

april-english-dev-01110_en.april

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:77eb95d0fa4f7708a37e868c2265301ee6c42dcb25e63ca63eea3d9cbadbc1f3
+size 336679370

requirements.txt

@@ -0,0 +1,10 @@
+april-asr==0.0.4
+sounddevice==0.5.2
+numpy==1.26.4
+PyQt5==5.15.10
+googletrans==3.1.0a0
+deepl==1.22.0
+requests>=2.25.0
+six>=1.15.0
+Flask
+gunicorn

static/css/style.css

@@ -0,0 +1,177 @@
+body {
+    background-color: #0a0a0a;
+    color: #e5e5e7;
+    font-family: 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden; /* Scrollbarları kontrol etmek için */
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Kontrol Çubuğu */
+.control-bar {
+    display: flex;
+    align-items: center;
+    background: linear-gradient(to bottom, #1c1c1e, #171719);
+    border-bottom: 1px solid #2c2c2e;
+    padding: 8px 16px;
+    gap: 20px;
+}
+
+.title {
+    font-size: 17px;
+    font-weight: 600;
+    color: #ffffff;
+    letter-spacing: -0.5px;
+}
+
+label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #8e8e93;
+}
+
+select, input[type="text"] {
+    background: #2c2c2e;
+    border: 1px solid #48484a;
+    border-radius: 8px;
+    padding: 4px 12px;
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 400;
+    min-width: 140px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+select:hover, input[type="text"]:hover {
+    border-color: #0a84ff;
+    background: #3a3a3c;
+}
+
+input[type="text"] {
+    min-width: 280px;
+}
+
+#clear-btn {
+    background: #ff453a;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 6px 16px;
+    font-weight: 500;
+    font-size: 13px;
+    cursor: pointer;
+    margin-left: auto;
+}
+#clear-btn:hover { background: #ff6961; }
+#clear-btn:active { background: #d70015; }
+
+/* Ana İçerik Alanı */
+.main-content {
+    display: flex;
+    flex: 1;
+    padding: 6px;
+    gap: 6px;
+}
+
+.text-group {
+    flex: 1;
+    border: 1px solid #48484a;
+    border-radius: 12px;
+    margin-top: 8px;
+    padding-top: 16px;
+    background: #1c1c1e;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.english-group {
+    flex: 0 0 500px; /* Genişliği sabit tutmak için */
+}
+
+.translation-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 6px;
+}
+
+.group-title {
+    position: absolute;
+    top: -8px;
+    left: 16px;
+    padding: 0 8px;
+    background: #1c1c1e;
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.3px;
+}
+
+.text-editor {
+    background: #000000;
+    color: #e5e5e7;
+    border: none;
+    border-radius: 8px;
+    padding: 16px;
+    font-size: 16px;
+    line-height: 1.6;
+    flex: 1;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.english-group .text-editor {
+    background: #1a0f00;
+    color: #ffcc99;
+}
+
+/* Durum Çubuğu */
+.status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: linear-gradient(to bottom, #1c1c1e, #171719);
+    border-top: 1px solid #2c2c2e;
+    padding: 4px 16px;
+}
+
+#status-label {
+    color: #30d158;  /* Yeşil */
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.mic-button-container {
+    display: flex;
+    gap: 10px;
+}
+
+#start-mic-btn, #stop-mic-btn {
+    background-color: #0a84ff;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+#start-mic-btn:hover { background-color: #38b4ff; }
+#stop-mic-btn { background-color: #ff453a; }
+#stop-mic-btn:hover { background-color: #ff6961; }
+
+.version {
+    color: #8e8e93;
+    font-size: 11px;
+}

static/js/script.js

@@ -0,0 +1,178 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const startBtn = document.getElementById('start-mic-btn');
+    const stopBtn = document.getElementById('stop-mic-btn');
+    const clearBtn = document.getElementById('clear-btn');
+    const serviceSelect = document.getElementById('service-select');
+    const langSelect = document.getElementById('lang-select');
+    const deeplKeyInput = document.getElementById('deepl-key');
+    const deeplLabel = document.getElementById('deepl-label');
+
+    const englishOutput = document.getElementById('english-output');
+    const realtimeOutput = document.getElementById('realtime-output');
+    const detailedOutput = document.getElementById('detailed-output');
+    const statusLabel = document.getElementById('status-label');
+
+    let isRecording = false;
+    let audioContext;
+    let processor;
+    let eventSource = null;
+    let lastEnglishText = ""; // Tamamlanmış son İngilizce metin
+    let lastRealtimeText = ""; // Tamamlanmış son çeviri metni
+
+    // DeepL API key girişini göster/gizle
+    serviceSelect.addEventListener('change', (e) => {
+        if (e.target.value === 'DeepL') {
+            deeplKeyInput.style.display = 'inline-block';
+            deeplLabel.style.display = 'inline-block';
+        } else {
+            deeplKeyInput.style.display = 'none';
+            deeplLabel.style.display = 'none';
+        }
+    });
+
+    // Ses verisini sunucuya gönderme
+    function sendAudioToServer(data) {
+        if (!isRecording) return;
+        fetch('/upload_audio', {
+            method: 'POST',
+            body: data,
+            headers: {
+                'Content-Type': 'application/octet-stream'
+            }
+        }).catch(error => console.error('Error sending audio:', error));
+    }
+    
+    // SSE bağlantısını başlat
+    function startEventSource() {
+        const params = new URLSearchParams({
+            target_lang: langSelect.value,
+            service: serviceSelect.value,
+            deepl_key: deeplKeyInput.value
+        });
+        
+        eventSource = new EventSource(`/stream_results?${params.toString()}`);
+        
+        eventSource.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            const asrText = data.english;
+            const asrType = data.type;
+            const translation = data.translation;
+            
+            if (asrType === "partial") {
+                // Anlık İngilizce ve çeviri metnini güncelle
+                englishOutput.textContent = lastEnglishText + asrText;
+                realtimeOutput.textContent = lastRealtimeText + translation;
+
+            } else if (asrType === "final") {
+                // Final cümle geldiğinde alt satıra geç ve metinleri sakla
+                lastEnglishText += asrText + "\n";
+                lastRealtimeText += translation + "\n";
+
+                // Detaylı çeviriye ekle
+                detailedOutput.textContent += asrText + " --> " + translation + "\n";
+                
+                // Anlık çeviri kutusunu sıfırla
+                englishOutput.textContent = lastEnglishText;
+                realtimeOutput.textContent = lastRealtimeText;
+            }
+            englishOutput.scrollTop = englishOutput.scrollHeight;
+            realtimeOutput.scrollTop = realtimeOutput.scrollHeight;
+            detailedOutput.scrollTop = detailedOutput.scrollHeight;
+        };
+        
+        eventSource.onerror = (err) => {
+            console.error("EventSource hatası:", err);
+            statusLabel.textContent = "🔴 Hata: Bağlantı kesildi!";
+            statusLabel.style.color = "#ff453a";
+            if (eventSource) eventSource.close();
+            stopRecording();
+        };
+    }
+    
+    function stopEventSource() {
+        if (eventSource) {
+            eventSource.close();
+            eventSource = null;
+        }
+    }
+
+    // Olay Dinleyicileri
+    startBtn.addEventListener('click', async () => {
+        if (isRecording) return;
+        isRecording = true;
+        startBtn.style.display = 'none';
+        stopBtn.style.display = 'block';
+        statusLabel.textContent = "🟢 Kaydediyor...";
+        statusLabel.style.color = "#30d158";
+        
+        // Metin alanlarını temizle
+        englishOutput.textContent = "";
+        realtimeOutput.textContent = "";
+        detailedOutput.textContent = "";
+        lastEnglishText = "";
+        lastRealtimeText = "";
+
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 16000 } });
+            audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+            const source = audioContext.createMediaStreamSource(stream);
+            
+            const bufferSize = 4096;
+            processor = audioContext.createScriptProcessor(bufferSize, 1, 1);
+            
+            source.connect(processor);
+            processor.connect(audioContext.destination);
+
+            processor.onaudioprocess = (e) => {
+                if (!isRecording) return;
+                const pcmData = e.inputBuffer.getChannelData(0);
+                const pcm16 = new Int16Array(pcmData.length);
+                for (let i = 0; i < pcmData.length; i++) {
+                    pcm16[i] = Math.max(-1, Math.min(1, pcmData[i])) * 0x7FFF;
+                }
+                sendAudioToServer(pcm16.buffer);
+            };
+
+            await fetch('/start', { method: 'POST' });
+            startEventSource();
+
+        } catch (err) {
+            console.error('Mikrofon erişimi reddedildi veya hata oluştu:', err);
+            statusLabel.textContent = "🔴 Hata: Mikrofon erişimi reddedildi!";
+            statusLabel.style.color = "#ff453a";
+            isRecording = false;
+            startBtn.style.display = 'block';
+            stopBtn.style.display = 'none';
+        }
+    });
+
+    stopBtn.addEventListener('click', () => {
+        stopRecording();
+    });
+
+    function stopRecording() {
+        if (!isRecording) return;
+        isRecording = false;
+        if (audioContext) {
+            audioContext.close();
+            audioContext = null;
+        }
+        
+        startBtn.style.display = 'block';
+        stopBtn.style.display = 'none';
+        statusLabel.textContent = "🔴 Hazır - 'Başlat' butonuna basın";
+        statusLabel.style.color = "#30d158";
+        
+        stopEventSource();
+        fetch('/stop', { method: 'POST' });
+    }
+
+    clearBtn.addEventListener('click', () => {
+        englishOutput.textContent = "";
+        realtimeOutput.textContent = "";
+        detailedOutput.textContent = "";
+        lastEnglishText = "";
+        lastRealtimeText = "";
+        statusLabel.textContent = "🟢 Tüm veriler temizlendi.";
+    });
+});

templates/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VerbaLive - Canlı Konuşma ve Çeviri</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+
+    <div class="container">
+        <div class="control-bar">
+            <span class="title">🎤 VerbaLive</span>
+            <span class="separator"></span>
+            <label for="service">Servis</label>
+            <select id="service-select">
+                <option value="Google Translate">Google Translate</option>
+                <option value="DeepL">DeepL</option>
+            </select>
+            <label for="language">Dil</label>
+            <select id="lang-select">
+                <option value="tr">🇹🇷 Türkçe</option>
+                <option value="fr">🇫🇷 Français</option>
+                <option value="de">🇩🇪 Deutsch</option>
+                <option value="es">🇪🇸 Español</option>
+                <option value="it">🇮🇹 Italiano</option>
+                <option value="ru">🇷🇺 Русский</option>
+                <option value="ja">🇯🇵 日本語</option>
+                <option value="zh-CN">🇨🇳 中文</option>
+                <option value="ar">🇸🇦 العربية</option>
+                <option value="pt">🇵🇹 Português</option>
+                <option value="nl">🇳🇱 Nederlands</option>
+                <option value="ko">🇰🇷 한국어</option>
+            </select>
+            <label for="deepl-key" id="deepl-label" style="display:none;">API Key</label>
+            <input type="text" id="deepl-key" placeholder="DeepL API anahtarını girin..." style="display:none;">
+            <button id="clear-btn">Temizle</button>
+        </div>
+
+        <div class="main-content">
+            <div class="text-group english-group">
+                <div class="group-title">🇺🇸 İngilizce Konuşma</div>
+                <div class="text-editor" id="english-output"></div>
+            </div>
+
+            <div class="translation-panel">
+                <div class="text-group realtime-group">
+                    <div class="group-title">⚡ Anlık Çeviri</div>
+                    <div class="text-editor" id="realtime-output"></div>
+                </div>
+                <div class="text-group detailed-group">
+                    <div class="group-title">📝 Detaylı Çeviri</div>
+                    <div class="text-editor" id="detailed-output"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="status-bar">
+            <span id="status-label">🔴 Hazır - 'Başlat' butonuna basın</span>
+            <div class="mic-button-container">
+                <button id="start-mic-btn">🎤 Başlat</button>
+                <button id="stop-mic-btn" style="display:none;">⏹ Durdur</button>
+            </div>
+            <span class="version">v2.1</span>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>