Update app.py

app.py

@@ -1,23 +1,26 @@
-# app.py - Voice Cloning with FastAPI
-import gradio as gr
-import torch
-import tempfile
+# app.py - Full Featured VoxForge TTS with FastAPI
 import os
+import tempfile
 import subprocess
 import re
 import hashlib
 import gc
-import time
 import json
+import shutil
+from pathlib import Path
+from datetime import datetime
+from typing import Optional
+import torch
 from fastapi import FastAPI, Request, File, UploadFile, Form, HTTPException
-from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
-from fastapi.templating import Jinja2Templates
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
 import uvicorn
 
 # ============================================================
 # CONFIGURATION
 # ============================================================
-MAX_TEXT_LENGTH = 3000
+MAX_TEXT_LENGTH = 5000
+MAX_BATCH_SIZE = 10
 SUPPORTED_LANGUAGES = ["en", "es", "fr", "de", "it", "pt", "pl", "tr", "ru", "nl", "cs", "ar", "zh-cn", "ja"]
 
 # ============================================================
@@ -30,7 +33,9 @@ class TTSengine:
         self._loading = False
         self._error = None
         self._cache = {}
+        self._audio_cache = {}
         self._model_loaded = False
+        self._generation_count = 0
         
     def get_model(self):
         if self._tts is not None:
@@ -58,25 +63,52 @@ class TTSengine:
             self._loading = False
             raise Exception(f"Model loading failed: {str(e)}")
     
-    def optimize_audio(self, input_path):
-        """Convert audio to the right format"""
+    def check_audio_duration(self, file_path):
+        """Get audio duration using ffmpeg"""
+        try:
+            result = subprocess.run(['ffmpeg', '-i', file_path], capture_output=True, text=True, stderr=subprocess.PIPE)
+            match = re.search(r'Duration: (\d{2}):(\d{2}):(\d{2}\.\d{2})', result.stderr)
+            if match:
+                h, m, s = match.groups()
+                return int(h) * 3600 + int(m) * 60 + float(s)
+            return 0
+        except:
+            return 0
+    
+    def optimize_audio(self, input_path, target_sample_rate=22050):
+        """Optimize audio for XTTS"""
+        file_hash = self._get_file_hash(input_path)
+        if file_hash in self._audio_cache and os.path.exists(self._audio_cache[file_hash]):
+            return self._audio_cache[file_hash]
+        
         output_path = tempfile.NamedTemporaryFile(suffix=".wav", delete=False).name
         
         cmd = [
             'ffmpeg', '-i', input_path,
             '-ac', '1',
-            '-ar', '22050',
+            '-ar', str(target_sample_rate),
+            '-af', 'loudnorm=I=-16:LRA=11:TP=-1.5, silenceremove=1:0:-50dB',
             '-acodec', 'pcm_s16le',
             '-y', output_path
         ]
         
         try:
-            subprocess.run(cmd, capture_output=True, check=True, timeout=10)
-            return output_path
+            subprocess.run(cmd, capture_output=True, check=True, timeout=30)
+            if os.path.exists(output_path) and os.path.getsize(output_path) > 10000:
+                self._audio_cache[file_hash] = output_path
+                return output_path
         except:
-            cmd2 = ['ffmpeg', '-i', input_path, '-ac', '1', '-ar', '22050', '-y', output_path]
-            subprocess.run(cmd2, capture_output=True, check=True)
-            return output_path
+            pass
+        
+        # Fallback
+        cmd2 = ['ffmpeg', '-i', input_path, '-ac', '1', '-ar', str(target_sample_rate), '-y', output_path]
+        subprocess.run(cmd2, capture_output=True, check=True)
+        self._audio_cache[file_hash] = output_path
+        return output_path
+    
+    def _get_file_hash(self, file_path):
+        with open(file_path, 'rb') as f:
+            return hashlib.md5(f.read()).hexdigest()[:16]
     
     def synthesize(self, text, audio_path, language="en", speed=1.0):
         """Generate speech"""
@@ -86,11 +118,18 @@ class TTSengine:
         if not os.path.exists(audio_path):
             raise Exception(f"Audio file not found: {audio_path}")
         
+        self._generation_count += 1
+        
         # Check cache
-        cache_key = hashlib.md5(f"{text[:100]}_{language}_{speed}".encode()).hexdigest()[:12]
+        cache_key = hashlib.md5(f"{text[:200]}_{language}_{speed}".encode()).hexdigest()[:12]
         if cache_key in self._cache and os.path.exists(self._cache[cache_key]):
             return self._cache[cache_key]
         
+        # Check audio duration
+        duration = self.check_audio_duration(audio_path)
+        if duration > 0 and duration < 3:
+            raise Exception(f"Audio too short ({duration:.1f}s). Need 6-10 seconds")
+        
         # Optimize audio
         processed_audio = self.optimize_audio(audio_path)
         
@@ -101,7 +140,6 @@ class TTSengine:
         output_path = tempfile.NamedTemporaryFile(suffix=".wav", delete=False).name
         
         try:
-            print(f"Generating speech for: {text[:50]}...")
             tts.tts_to_file(
                 text=text.strip(),
                 speaker_wav=processed_audio,
@@ -111,7 +149,7 @@ class TTSengine:
             )
             
             # Cache result
-            if len(self._cache) > 2:
+            if len(self._cache) > 5:
                 oldest_key = next(iter(self._cache))
                 try:
                     if os.path.exists(self._cache[oldest_key]):
@@ -129,181 +167,394 @@ class TTSengine:
                 except:
                     pass
             
-            print("✅ Generation complete!")
             return output_path
             
         except Exception as e:
-            raise Exception(f"Synthesis failed: {str(e)}")
+            if "out of memory" in str(e).lower():
+                self._cleanup_cache()
+                raise Exception("🔄 Memory limit reached. Please try again.")
+            raise
+        
         finally:
             gc.collect()
+    
+    def _cleanup_cache(self):
+        import gc
+        self._cache = {}
+        self._audio_cache = {}
+        gc.collect()
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
 
 # Initialize TTS
 tts_engine = TTSengine()
 
 # ============================================================
-# FASTAPI APP
+# HTML TEMPLATE
 # ============================================================
 
-# Create FastAPI app
-app = FastAPI(title="VoxForge TTS API")
-
-# Simple HTML page
-HTML_PAGE = """
+HTML_TEMPLATE = """
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>VoxForge TTS</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VoxForge TTS - Voice Cloning</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
             padding: 20px;
-            background: #f5f5f5;
         }
         .container {
+            max-width: 1200px;
+            margin: 0 auto;
             background: white;
+            border-radius: 20px;
             padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
         }
         h1 {
-            color: #6c5ce7;
-            margin-top: 0;
+            font-size: 2.5em;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 10px;
         }
-        .status {
-            padding: 10px;
-            border-radius: 5px;
-            margin: 10px 0;
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 1.1em;
+        }
+        .status-bar {
+            padding: 12px 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .status-ready {
             background: #e8f5e9;
             color: #2e7d32;
         }
+        .status-loading {
+            background: #fff3e0;
+            color: #e65100;
+        }
+        .status-error {
+            background: #ffebee;
+            color: #c62828;
+        }
+        .status-success {
+            background: #e8f5e9;
+            color: #2e7d32;
+        }
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 30px;
+            border-bottom: 2px solid #e0e0e0;
+            flex-wrap: wrap;
+        }
+        .tab {
+            padding: 12px 24px;
+            cursor: pointer;
+            border: none;
+            background: none;
+            font-size: 16px;
+            font-weight: 600;
+            color: #666;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s;
+        }
+        .tab:hover {
+            color: #667eea;
+        }
+        .tab.active {
+            color: #667eea;
+            border-bottom-color: #667eea;
+        }
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.5s;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
         .form-group {
-            margin: 20px 0;
+            margin-bottom: 20px;
         }
         label {
             display: block;
             font-weight: 600;
-            margin-bottom: 5px;
+            margin-bottom: 8px;
+            color: #333;
         }
-        textarea, input, select {
+        textarea, input[type="text"], select {
             width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
             font-size: 14px;
+            transition: border-color 0.3s;
+            font-family: inherit;
+        }
+        textarea:focus, input:focus, select:focus {
+            outline: none;
+            border-color: #667eea;
         }
         textarea {
-            min-height: 100px;
-            font-family: inherit;
+            min-height: 120px;
+            resize: vertical;
+        }
+        input[type="file"] {
+            padding: 12px;
+            border: 2px dashed #e0e0e0;
+            border-radius: 10px;
+            width: 100%;
+            cursor: pointer;
+        }
+        input[type="file"]:hover {
+            border-color: #667eea;
+        }
+        .row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
         }
         .btn {
-            background: #6c5ce7;
-            color: white;
-            padding: 12px 30px;
+            padding: 14px 40px;
             border: none;
-            border-radius: 5px;
+            border-radius: 10px;
             font-size: 16px;
+            font-weight: 600;
             cursor: pointer;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
         }
-        .btn:hover {
-            background: #5f3dc4;
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
         }
-        .btn:disabled {
-            background: #bdbdbd;
+        .btn-primary:disabled {
+            opacity: 0.6;
             cursor: not-allowed;
+            transform: none;
         }
-        .result {
+        .btn-secondary {
+            background: #f5f5f5;
+            color: #333;
+        }
+        .btn-secondary:hover {
+            background: #e0e0e0;
+        }
+        .btn-danger {
+            background: #ef5350;
+            color: white;
+        }
+        .btn-danger:hover {
+            background: #d32f2f;
+        }
+        .btn-group {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .result-box {
             margin-top: 20px;
             padding: 20px;
             background: #f8f9fa;
-            border-radius: 5px;
+            border-radius: 10px;
             display: none;
         }
-        .result audio {
+        .result-box.show {
+            display: block;
+        }
+        .result-box audio {
             width: 100%;
+            margin: 10px 0;
         }
-        .error {
-            color: #d32f2f;
-            padding: 10px;
+        .result-box .download-link {
+            display: inline-block;
+            margin-top: 10px;
+            color: #667eea;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .result-box .download-link:hover {
+            text-decoration: underline;
+        }
+        .error-box {
+            padding: 15px;
             background: #ffebee;
-            border-radius: 5px;
+            border-radius: 10px;
+            color: #c62828;
             display: none;
+            margin-top: 10px;
         }
-        .loading {
-            display: none;
+        .error-box.show {
+            display: block;
+        }
+        .loading-box {
             text-align: center;
-            padding: 20px;
+            padding: 30px;
+            display: none;
+        }
+        .loading-box.show {
+            display: block;
         }
         .spinner {
             border: 4px solid #f3f3f3;
-            border-top: 4px solid #6c5ce7;
+            border-top: 4px solid #667eea;
             border-radius: 50%;
-            width: 40px;
-            height: 40px;
+            width: 50px;
+            height: 50px;
             animation: spin 1s linear infinite;
-            margin: 0 auto;
+            margin: 0 auto 20px;
         }
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .stat-card {
+            background: #f5f5f5;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+        }
+        .stat-card .number {
+            font-size: 24px;
+            font-weight: bold;
+            color: #667eea;
+        }
+        .stat-card .label {
+            color: #666;
+            font-size: 14px;
+        }
         .tips {
             background: #e3f2fd;
-            padding: 15px;
-            border-radius: 5px;
+            padding: 20px;
+            border-radius: 10px;
             margin: 20px 0;
         }
         .tips ul {
-            margin: 5px 0;
             padding-left: 20px;
+            margin: 10px 0;
         }
-        .lang-select {
-            width: 100%;
-            padding: 10px;
+        .tips li {
+            margin: 5px 0;
         }
-        .row {
-            display: flex;
-            gap: 20px;
+        .badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
         }
-        .col {
-            flex: 1;
+        .badge-success {
+            background: #e8f5e9;
+            color: #2e7d32;
         }
-        @media (max-width: 600px) {
-            .row {
-                flex-direction: column;
-            }
+        .badge-warning {
+            background: #fff3e0;
+            color: #e65100;
+        }
+        .char-counter {
+            text-align: right;
+            color: #999;
+            font-size: 14px;
+            margin-top: 5px;
+        }
+        .char-counter.warning {
+            color: #f57c00;
+        }
+        .char-counter.danger {
+            color: #d32f2f;
+        }
+        @media (max-width: 768px) {
             .container {
                 padding: 15px;
             }
+            .row {
+                grid-template-columns: 1fr;
+            }
+            h1 {
+                font-size: 1.8em;
+            }
+            .tabs {
+                gap: 5px;
+            }
+            .tab {
+                padding: 10px 15px;
+                font-size: 14px;
+            }
+            .stats {
+                grid-template-columns: 1fr 1fr;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>🎙️ VoxForge TTS</h1>
-        <p>Clone any voice with just 3-10 seconds of audio</p>
+        <p class="subtitle">Advanced Voice Cloning with XTTS-v2</p>
         
-        <div id="status" class="status">✅ Ready</div>
+        <div id="statusBar" class="status-bar status-ready">
+            <span id="statusText">✅ Ready</span>
+            <span id="modelStatus" class="badge badge-warning">⏳ Model: Not Loaded</span>
+        </div>
         
-        <form id="ttsForm" enctype="multipart/form-data">
-            <div class="form-group">
-                <label for="text">📝 Text to Synthesize</label>
-                <textarea id="text" name="text" placeholder="Enter text up to 3000 characters..." required>Hello, this is my cloned voice. It sounds just like me!</textarea>
-            </div>
-            
-            <div class="form-group">
-                <label for="audio">🎤 Reference Voice (Upload WAV/MP3)</label>
-                <input type="file" id="audio" name="audio" accept=".wav,.mp3,.m4a,.flac" required>
-            </div>
-            
-            <div class="row">
-                <div class="col">
+        <div class="tabs">
+            <button class="tab active" data-tab="synthesize">🎵 Synthesize</button>
+            <button class="tab" data-tab="batch">📦 Batch</button>
+            <button class="tab" data-tab="video">🎬 Video</button>
+            <button class="tab" data-tab="help">💡 Help</button>
+        </div>
+        
+        <!-- Tab 1: Synthesize -->
+        <div id="tab-synthesize" class="tab-content active">
+            <form id="synthesizeForm" enctype="multipart/form-data">
+                <div class="form-group">
+                    <label for="text">📝 Text to Synthesize</label>
+                    <textarea id="text" name="text" placeholder="Enter text up to 5000 characters..." required>Hello, this is my cloned voice. It sounds just like me!</textarea>
+                    <div id="charCounter" class="char-counter">0 / 5000</div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="audio">🎤 Reference Voice (Upload WAV/MP3)</label>
+                    <input type="file" id="audio" name="audio" accept=".wav,.mp3,.m4a,.flac" required>
+                    <small style="color:#666;display:block;margin-top:5px;">Upload 3-10 seconds of clear speech</small>
+                </div>
+                
+                <div class="row">
                     <div class="form-group">
                         <label for="language">🌐 Language</label>
-                        <select id="language" name="language" class="lang-select">
+                        <select id="language" name="language">
                             <option value="en">English</option>
                             <option value="es">Spanish</option>
                             <option value="fr">French</option>
@@ -320,74 +571,315 @@ HTML_PAGE = """
                             <option value="ja">Japanese</option>
                         </select>
                     </div>
-                </div>
-                <div class="col">
                     <div class="form-group">
                         <label for="speed">⚡ Speed</label>
-                        <input type="range" id="speed" name="speed" min="0.7" max="1.3" step="0.05" value="1.0">
-                        <span id="speedValue">1.0</span>
+                        <input type="range" id="speed" name="speed" min="0.5" max="2.0" step="0.05" value="1.0">
+                        <span id="speedDisplay">1.0x</span>
                     </div>
                 </div>
+                
+                <div class="btn-group">
+                    <button type="submit" class="btn btn-primary" id="generateBtn">🎵 Generate Speech</button>
+                    <button type="button" class="btn btn-secondary" id="loadModelBtn">📥 Load Model</button>
+                    <button type="button" class="btn btn-secondary" id="clearBtn">🗑️ Clear All</button>
+                </div>
+            </form>
+            
+            <div id="loadingBox" class="loading-box">
+                <div class="spinner"></div>
+                <p id="loadingText">⏳ Generating speech... This may take 10-30 seconds</p>
             </div>
             
-            <button type="submit" class="btn" id="generateBtn">🎵 Generate Speech</button>
-        </form>
-        
-        <div id="loading" class="loading">
-            <div class="spinner"></div>
-            <p>⏳ Generating speech... This may take 10-30 seconds</p>
+            <div id="errorBox" class="error-box"></div>
+            
+            <div id="resultBox" class="result-box">
+                <h3>🎵 Generated Speech</h3>
+                <audio id="audioResult" controls></audio>
+                <br>
+                <a id="downloadLink" href="#" download="speech.wav" class="download-link">⬇️ Download Audio</a>
+            </div>
+            
+            <div class="stats">
+                <div class="stat-card">
+                    <div class="number" id="genCount">0</div>
+                    <div class="label">Generations</div>
+                </div>
+                <div class="stat-card">
+                    <div class="number" id="cacheSize">0</div>
+                    <div class="label">Cache Items</div>
+                </div>
+                <div class="stat-card">
+                    <div class="number" id="modelStatusText">Not Loaded</div>
+                    <div class="label">Model Status</div>
+                </div>
+            </div>
         </div>
         
-        <div id="error" class="error"></div>
+        <!-- Tab 2: Batch -->
+        <div id="tab-batch" class="tab-content">
+            <div class="form-group">
+                <label for="batchText">📝 Multiple Paragraphs</label>
+                <textarea id="batchText" name="batchText" rows="8" placeholder="Paste multiple paragraphs separated by blank lines...">This is the first paragraph.
+                
+This is the second paragraph.
+                
+This is the third paragraph.</textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="batchAudio">🎤 Reference Voice</label>
+                <input type="file" id="batchAudio" accept=".wav,.mp3,.m4a,.flac">
+            </div>
+            
+            <div class="row">
+                <div class="form-group">
+                    <label>🌐 Language</label>
+                    <select id="batchLanguage">
+                        <option value="en">English</option>
+                        <option value="es">Spanish</option>
+                        <option value="fr">French</option>
+                        <option value="de">German</option>
+                        <option value="it">Italian</option>
+                        <option value="pt">Portuguese</option>
+                        <option value="pl">Polish</option>
+                        <option value="tr">Turkish</option>
+                        <option value="ru">Russian</option>
+                        <option value="nl">Dutch</option>
+                        <option value="cs">Czech</option>
+                        <option value="ar">Arabic</option>
+                        <option value="zh-cn">Chinese</option>
+                        <option value="ja">Japanese</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Chunk Size</label>
+                    <input type="number" id="chunkSize" value="500" min="200" max="800">
+                    <small style="color:#666;">Characters per chunk</small>
+                </div>
+            </div>
+            
+            <button class="btn btn-primary" id="batchBtn">📦 Generate Batch</button>
+            
+            <div id="batchResult" class="result-box">
+                <h3>📦 Batch Results</h3>
+                <div id="batchStatus"></div>
+                <audio id="batchAudioResult" controls></audio>
+                <br>
+                <a id="batchDownloadLink" href="#" download="batch_speech.wav" class="download-link">⬇️ Download Combined Audio</a>
+            </div>
+            
+            <div id="batchError" class="error-box"></div>
+            <div id="batchLoading" class="loading-box">
+                <div class="spinner"></div>
+                <p>⏳ Generating batch...</p>
+            </div>
+        </div>
         
-        <div id="result" class="result">
-            <h3>🎵 Generated Speech</h3>
-            <audio id="audioResult" controls></audio>
-            <br>
-            <a id="downloadLink" href="#" download="speech.wav">⬇️ Download Audio</a>
+        <!-- Tab 3: Video -->
+        <div id="tab-video" class="tab-content">
+            <div class="form-group">
+                <label for="videoText">🎬 Text for Video</label>
+                <textarea id="videoText" rows="3" placeholder="Text to display on video...">This is a video with voiceover</textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="videoAudio">🎤 Reference Voice</label>
+                <input type="file" id="videoAudio" accept=".wav,.mp3,.m4a,.flac">
+            </div>
+            
+            <div class="row">
+                <div class="form-group">
+                    <label>Video Duration (seconds)</label>
+                    <input type="number" id="videoDuration" value="10" min="5" max="120">
+                </div>
+                <div class="form-group">
+                    <label>🌐 Language</label>
+                    <select id="videoLanguage">
+                        <option value="en">English</option>
+                        <option value="es">Spanish</option>
+                        <option value="fr">French</option>
+                        <option value="de">German</option>
+                        <option value="it">Italian</option>
+                        <option value="pt">Portuguese</option>
+                        <option value="pl">Polish</option>
+                        <option value="tr">Turkish</option>
+                        <option value="ru">Russian</option>
+                        <option value="nl">Dutch</option>
+                        <option value="cs">Czech</option>
+                        <option value="ar">Arabic</option>
+                        <option value="zh-cn">Chinese</option>
+                        <option value="ja">Japanese</option>
+                    </select>
+                </div>
+            </div>
+            
+            <button class="btn btn-primary" id="videoBtn">🎬 Generate Video</button>
+            
+            <div id="videoResult" class="result-box">
+                <h3>🎬 Generated Video</h3>
+                <video id="videoOutput" controls style="width:100%;max-height:500px;"></video>
+                <br>
+                <a id="videoDownloadLink" href="#" download="video.mp4" class="download-link">⬇️ Download Video</a>
+            </div>
+            
+            <div id="videoError" class="error-box"></div>
+            <div id="videoLoading" class="loading-box">
+                <div class="spinner"></div>
+                <p>⏳ Generating video...</p>
+            </div>
         </div>
         
-        <div class="tips">
-            <strong>💡 Tips for Best Results:</strong>
-            <ul>
-                <li>Record 3-10 seconds of clear speech</li>
-                <li>No background noise</li>
-                <li>One speaker only</li>
-                <li>First use: Model downloads (2-5 min)</li>
-            </ul>
+        <!-- Tab 4: Help -->
+        <div id="tab-help" class="tab-content">
+            <h2>💡 Help Guide</h2>
+            
+            <div class="tips">
+                <h3>Quick Start</h3>
+                <ol>
+                    <li>Record or upload 3-10 seconds of clear speech</li>
+                    <li>Enter text you want to synthesize</li>
+                    <li>Click "Generate Speech"</li>
+                    <li>Download your cloned voice audio!</li>
+                </ol>
+            </div>
+            
+            <div class="tips">
+                <h3>🎯 For Best Results</h3>
+                <ul>
+                    <li><strong>Record 3-10 seconds</strong> of clear, uninterrupted speech</li>
+                    <li><strong>No background noise</strong> - find a quiet space</li>
+                    <li><strong>One speaker only</strong> - avoid multiple voices</li>
+                    <li><strong>Match language</strong> to the speaker's accent</li>
+                    <li><strong>First use</strong>: Model downloads (2-5 min)</li>
+                </ul>
+            </div>
+            
+            <div class="tips">
+                <h3>⚡ Performance Tips</h3>
+                <ul>
+                    <li>Keep text under 3000 characters for best results</li>
+                    <li>Use WAV format for fastest processing</li>
+                    <li>Be patient with first generation (model download)</li>
+                    <li>Subsequent generations: 10-30 seconds</li>
+                </ul>
+            </div>
+            
+            <div class="tips">
+                <h3>🌐 Supported Languages</h3>
+                <p>English, Spanish, French, German, Italian, Portuguese, Polish, Turkish, Russian, Dutch, Czech, Arabic, Chinese, Japanese</p>
+            </div>
+            
+            <div class="tips">
+                <h3>📦 Batch Mode</h3>
+                <ul>
+                    <li>Splits text at sentence boundaries (., !, ?)</li>
+                    <li>Synthesizes each chunk separately</li>
+                    <li>Combines all chunks into one file</li>
+                    <li>Perfect for audiobooks and long narrations</li>
+                </ul>
+            </div>
         </div>
     </div>
     
     <script>
-        const form = document.getElementById('ttsForm');
-        const statusDiv = document.getElementById('status');
-        const errorDiv = document.getElementById('error');
-        const resultDiv = document.getElementById('result');
-        const loadingDiv = document.getElementById('loading');
-        const audioResult = document.getElementById('audioResult');
-        const downloadLink = document.getElementById('downloadLink');
-        const generateBtn = document.getElementById('generateBtn');
-        const speedSlider = document.getElementById('speed');
-        const speedValue = document.getElementById('speedValue');
-        
-        speedSlider.addEventListener('input', function() {
-            speedValue.textContent = this.value;
+        // ============================================================
+        // Global State
+        // ============================================================
+        let generationCount = 0;
+        
+        // ============================================================
+        // Tab Switching
+        // ============================================================
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', function() {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+                this.classList.add('active');
+                document.getElementById('tab-' + this.dataset.tab).classList.add('active');
+            });
+        });
+        
+        // ============================================================
+        // Character Counter
+        // ============================================================
+        const textInput = document.getElementById('text');
+        const charCounter = document.getElementById('charCounter');
+        const MAX_CHARS = 5000;
+        
+        textInput.addEventListener('input', function() {
+            const len = this.value.length;
+            charCounter.textContent = len + ' / ' + MAX_CHARS;
+            charCounter.className = 'char-counter';
+            if (len > MAX_CHARS * 0.8) charCounter.classList.add('warning');
+            if (len > MAX_CHARS) charCounter.classList.add('danger');
         });
+        textInput.dispatchEvent(new Event('input'));
         
-        form.addEventListener('submit', async function(e) {
+        // ============================================================
+        // Speed Display
+        // ============================================================
+        document.getElementById('speed').addEventListener('input', function() {
+            document.getElementById('speedDisplay').textContent = this.value + 'x';
+        });
+        
+        // ============================================================
+        // Load Model
+        // ============================================================
+        document.getElementById('loadModelBtn').addEventListener('click', async function() {
+            const statusBar = document.getElementById('statusBar');
+            const statusText = document.getElementById('statusText');
+            const modelStatus = document.getElementById('modelStatus');
+            
+            statusBar.className = 'status-bar status-loading';
+            statusText.textContent = '⏳ Loading model...';
+            modelStatus.textContent = '⏳ Loading...';
+            this.disabled = true;
+            
+            try {
+                const response = await fetch('/load_model', { method: 'POST' });
+                const data = await response.json();
+                
+                if (data.success) {
+                    statusBar.className = 'status-bar status-success';
+                    statusText.textContent = '✅ Model loaded!';
+                    modelStatus.textContent = '✅ Model: Loaded';
+                    modelStatus.className = 'badge badge-success';
+                    document.getElementById('modelStatusText').textContent = 'Loaded';
+                } else {
+                    throw new Error(data.error || 'Failed to load model');
+                }
+            } catch (error) {
+                statusBar.className = 'status-bar status-error';
+                statusText.textContent = '❌ Error: ' + error.message;
+                modelStatus.textContent = '❌ Error';
+            }
+            
+            this.disabled = false;
+        });
+        
+        // ============================================================
+        // Synthesize Form
+        // ============================================================
+        document.getElementById('synthesizeForm').addEventListener('submit', async function(e) {
             e.preventDefault();
             
+            const formData = new FormData(this);
+            const statusBar = document.getElementById('statusBar');
+            const statusText = document.getElementById('statusText');
+            const loadingBox = document.getElementById('loadingBox');
+            const errorBox = document.getElementById('errorBox');
+            const resultBox = document.getElementById('resultBox');
+            const generateBtn = document.getElementById('generateBtn');
+            
             // Reset displays
-            errorDiv.style.display = 'none';
-            resultDiv.style.display = 'none';
-            loadingDiv.style.display = 'block';
+            errorBox.classList.remove('show');
+            resultBox.classList.remove('show');
+            loadingBox.classList.add('show');
             generateBtn.disabled = true;
-            statusDiv.textContent = '⏳ Generating...';
-            statusDiv.className = 'status';
-            statusDiv.style.background = '#fff3e0';
-            statusDiv.style.color = '#e65100';
             
-            const formData = new FormData(form);
+            statusBar.className = 'status-bar status-loading';
+            statusText.textContent = '⏳ Generating...';
+            document.getElementById('loadingText').textContent = '⏳ Generating speech... This may take 10-30 seconds';
             
             try {
                 const response = await fetch('/synthesize', {
@@ -395,7 +887,7 @@ HTML_PAGE = """
                     body: formData
                 });
                 
-                loadingDiv.style.display = 'none';
+                loadingBox.classList.remove('show');
                 
                 if (!response.ok) {
                     const error = await response.json();
@@ -405,63 +897,244 @@ HTML_PAGE = """
                 const blob = await response.blob();
                 const url = URL.createObjectURL(blob);
                 
-                audioResult.src = url;
-                downloadLink.href = url;
-                downloadLink.download = 'speech.wav';
+                document.getElementById('audioResult').src = url;
+                document.getElementById('downloadLink').href = url;
+                
+                resultBox.classList.add('show');
+                generationCount++;
+                document.getElementById('genCount').textContent = generationCount;
                 
-                resultDiv.style.display = 'block';
-                statusDiv.textContent = '✅ Generation complete!';
-                statusDiv.style.background = '#e8f5e9';
-                statusDiv.style.color = '#2e7d32';
+                statusBar.className = 'status-bar status-success';
+                statusText.textContent = '✅ Generation complete!';
                 
             } catch (error) {
-                loadingDiv.style.display = 'none';
-                errorDiv.textContent = '❌ ' + error.message;
-                errorDiv.style.display = 'block';
-                statusDiv.textContent = '❌ Error';
-                statusDiv.style.background = '#ffebee';
-                statusDiv.style.color = '#c62828';
+                loadingBox.classList.remove('show');
+                errorBox.textContent = '❌ ' + error.message;
+                errorBox.classList.add('show');
+                
+                statusBar.className = 'status-bar status-error';
+                statusText.textContent = '❌ Error';
             }
             
             generateBtn.disabled = false;
         });
         
-        // Check status
-        async function checkStatus() {
+        // ============================================================
+        // Batch Generation
+        // ============================================================
+        document.getElementById('batchBtn').addEventListener('click', async function() {
+            const batchText = document.getElementById('batchText').value;
+            const batchAudio = document.getElementById('batchAudio').files[0];
+            const language = document.getElementById('batchLanguage').value;
+            const chunkSize = document.getElementById('chunkSize').value;
+            
+            if (!batchText.trim()) {
+                document.getElementById('batchError').textContent = '❌ Please enter text';
+                document.getElementById('batchError').classList.add('show');
+                return;
+            }
+            
+            if (!batchAudio) {
+                document.getElementById('batchError').textContent = '❌ Please upload reference audio';
+                document.getElementById('batchError').classList.add('show');
+                return;
+            }
+            
+            const formData = new FormData();
+            formData.append('text', batchText);
+            formData.append('audio', batchAudio);
+            formData.append('language', language);
+            formData.append('chunk_size', chunkSize);
+            
+            document.getElementById('batchError').classList.remove('show');
+            document.getElementById('batchResult').classList.remove('show');
+            document.getElementById('batchLoading').classList.add('show');
+            this.disabled = true;
+            
+            try {
+                const response = await fetch('/batch_synthesize', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                document.getElementById('batchLoading').classList.remove('show');
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Batch generation failed');
+                }
+                
+                const blob = await response.blob();
+                const url = URL.createObjectURL(blob);
+                
+                document.getElementById('batchAudioResult').src = url;
+                document.getElementById('batchDownloadLink').href = url;
+                document.getElementById('batchStatus').textContent = '✅ Batch generation complete!';
+                document.getElementById('batchResult').classList.add('show');
+                
+            } catch (error) {
+                document.getElementById('batchLoading').classList.remove('show');
+                document.getElementById('batchError').textContent = '❌ ' + error.message;
+                document.getElementById('batchError').classList.add('show');
+            }
+            
+            this.disabled = false;
+        });
+        
+        // ============================================================
+        // Video Generation
+        // ============================================================
+        document.getElementById('videoBtn').addEventListener('click', async function() {
+            const videoText = document.getElementById('videoText').value;
+            const videoAudio = document.getElementById('videoAudio').files[0];
+            const language = document.getElementById('videoLanguage').value;
+            const duration = document.getElementById('videoDuration').value;
+            
+            if (!videoText.trim()) {
+                document.getElementById('videoError').textContent = '❌ Please enter text';
+                document.getElementById('videoError').classList.add('show');
+                return;
+            }
+            
+            if (!videoAudio) {
+                document.getElementById('videoError').textContent = '❌ Please upload reference audio';
+                document.getElementById('videoError').classList.add('show');
+                return;
+            }
+            
+            const formData = new FormData();
+            formData.append('text', videoText);
+            formData.append('audio', videoAudio);
+            formData.append('language', language);
+            formData.append('duration', duration);
+            
+            document.getElementById('videoError').classList.remove('show');
+            document.getElementById('videoResult').classList.remove('show');
+            document.getElementById('videoLoading').classList.add('show');
+            this.disabled = true;
+            
+            try {
+                const response = await fetch('/generate_video', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                document.getElementById('videoLoading').classList.remove('show');
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Video generation failed');
+                }
+                
+                const blob = await response.blob();
+                const url = URL.createObjectURL(blob);
+                
+                document.getElementById('videoOutput').src = url;
+                document.getElementById('videoDownloadLink').href = url;
+                document.getElementById('videoResult').classList.add('show');
+                
+            } catch (error) {
+                document.getElementById('videoLoading').classList.remove('show');
+                document.getElementById('videoError').textContent = '❌ ' + error.message;
+                document.getElementById('videoError').classList.add('show');
+            }
+            
+            this.disabled = false;
+        });
+        
+        // ============================================================
+        // Clear All
+        // ============================================================
+        document.getElementById('clearBtn').addEventListener('click', function() {
+            document.getElementById('text').value = '';
+            document.getElementById('audio').value = '';
+            document.getElementById('resultBox').classList.remove('show');
+            document.getElementById('errorBox').classList.remove('show');
+            document.getElementById('charCounter').textContent = '0 / 5000';
+            document.getElementById('charCounter').className = 'char-counter';
+        });
+        
+        // ============================================================
+        // Auto-check model status
+        // ============================================================
+        async function checkModelStatus() {
             try {
                 const response = await fetch('/status');
                 const data = await response.json();
+                
+                const modelStatus = document.getElementById('modelStatus');
+                const modelStatusText = document.getElementById('modelStatusText');
+                
                 if (data.model_loaded) {
-                    document.getElementById('status').textContent = '✅ Model ready';
+                    modelStatus.textContent = '✅ Model: Loaded';
+                    modelStatus.className = 'badge badge-success';
+                    modelStatusText.textContent = 'Loaded';
+                } else if (data.model_loading) {
+                    modelStatus.textContent = '⏳ Model: Loading...';
+                    modelStatus.className = 'badge badge-warning';
+                    modelStatusText.textContent = 'Loading...';
+                } else {
+                    modelStatus.textContent = '⏳ Model: Not Loaded';
+                    modelStatus.className = 'badge badge-warning';
+                    modelStatusText.textContent = 'Not Loaded';
+                }
+                
+                // Update generation count
+                if (data.generation_count !== undefined) {
+                    document.getElementById('genCount').textContent = data.generation_count;
                 }
-            } catch (e) {
-                console.log('Status check failed');
+                
+                // Update cache size
+                if (data.cache_size !== undefined) {
+                    document.getElementById('cacheSize').textContent = data.cache_size;
+                }
+                
+            } catch (error) {
+                console.log('Status check failed:', error);
             }
         }
         
-        checkStatus();
+        // Check status every 5 seconds
+        checkModelStatus();
+        setInterval(checkModelStatus, 5000);
     </script>
 </body>
 </html>
 """
 
+# ============================================================
+# FASTAPI APP
+# ============================================================
+
+app = FastAPI(title="VoxForge TTS API")
+
 # ============================================================
 # API ENDPOINTS
 # ============================================================
 
 @app.get("/", response_class=HTMLResponse)
 async def root():
-    return HTML_PAGE
+    return HTML_TEMPLATE
 
 @app.get("/status")
-async def status():
+async def get_status():
     return {
         "model_loaded": tts_engine._model_loaded,
-        "model_loading": tts_engine._loading
+        "model_loading": tts_engine._loading,
+        "generation_count": tts_engine._generation_count,
+        "cache_size": len(tts_engine._cache)
     }
 
+@app.post("/load_model")
+async def load_model():
+    try:
+        tts_engine.get_model()
+        return {"success": True, "message": "Model loaded successfully"}
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
 @app.post("/synthesize")
-async def synthesize(
+async def synthesize_endpoint(
     text: str = Form(...),
     language: str = Form("en"),
     speed: float = Form(1.0),
@@ -480,10 +1153,7 @@ async def synthesize(
     temp_audio.close()
     
     try:
-        # Generate speech
         output_path = tts_engine.synthesize(text, temp_audio.name, language, speed)
-        
-        # Return audio file
         return FileResponse(
             output_path,
             media_type="audio/wav",
@@ -492,7 +1162,148 @@ async def synthesize(
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
     finally:
-        # Cleanup temp file
+        try:
+            if os.path.exists(temp_audio.name):
+                os.unlink(temp_audio.name)
+        except:
+            pass
+
+@app.post("/batch_synthesize")
+async def batch_synthesize_endpoint(
+    text: str = Form(...),
+    language: str = Form("en"),
+    chunk_size: int = Form(500),
+    audio: UploadFile = File(...)
+):
+    if not text or not text.strip():
+        raise HTTPException(status_code=400, detail="Text cannot be empty")
+    
+    # Save uploaded audio
+    temp_audio = tempfile.NamedTemporaryFile(delete=False, suffix=".wav")
+    content = await audio.read()
+    temp_audio.write(content)
+    temp_audio.close()
+    
+    try:
+        # Split text into chunks
+        sentences = re.split(r'(?<=[.!?])\s+', text)
+        chunks = []
+        current = ""
+        
+        for sent in sentences:
+            if len(current) + len(sent) + 1 <= chunk_size:
+                current += (" " + sent) if current else sent
+            else:
+                if current:
+                    chunks.append(current)
+                current = sent
+        if current:
+            chunks.append(current)
+        
+        if len(chunks) > MAX_BATCH_SIZE:
+            chunks = chunks[:MAX_BATCH_SIZE]
+        
+        # Synthesize each chunk
+        audio_files = []
+        for chunk in chunks:
+            output = tts_engine.synthesize(chunk, temp_audio.name, language, 1.0)
+            audio_files.append(output)
+        
+        # Combine audio files
+        from pydub import AudioSegment
+        combined = AudioSegment.empty()
+        for f in audio_files:
+            combined += AudioSegment.from_wav(f)
+        
+        output_path = tempfile.NamedTemporaryFile(suffix="_combined.wav", delete=False).name
+        combined.export(output_path, format="wav")
+        
+        # Cleanup individual files
+        for f in audio_files:
+            try:
+                os.unlink(f)
+            except:
+                pass
+        
+        return FileResponse(
+            output_path,
+            media_type="audio/wav",
+            filename="batch_speech.wav"
+        )
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    finally:
+        try:
+            if os.path.exists(temp_audio.name):
+                os.unlink(temp_audio.name)
+        except:
+            pass
+
+@app.post("/generate_video")
+async def generate_video_endpoint(
+    text: str = Form(...),
+    language: str = Form("en"),
+    duration: int = Form(10),
+    audio: UploadFile = File(...)
+):
+    if not text or not text.strip():
+        raise HTTPException(status_code=400, detail="Text cannot be empty")
+    
+    # Save uploaded audio
+    temp_audio = tempfile.NamedTemporaryFile(delete=False, suffix=".wav")
+    content = await audio.read()
+    temp_audio.write(content)
+    temp_audio.close()
+    
+    try:
+        # Generate speech
+        speech_path = tts_engine.synthesize(text, temp_audio.name, language, 1.0)
+        
+        # Create video
+        output_video = tempfile.NamedTemporaryFile(suffix=".mp4", delete=False).name
+        
+        cmd = [
+            'ffmpeg',
+            '-f', 'lavfi',
+            '-i', f'color=c=black:s=1920x1080:d={duration}:r=30',
+            '-i', speech_path,
+            '-vf', f"drawtext=text='{text[:100]}...':fontcolor=white:fontsize=60:x=(w-text_w)/2:y=(h-text_h)/2",
+            '-c:v', 'libx264',
+            '-preset', 'ultrafast',
+            '-c:a', 'aac',
+            '-shortest',
+            '-y',
+            output_video
+        ]
+        
+        try:
+            subprocess.run(cmd, capture_output=True, check=True, timeout=60)
+        except:
+            # Fallback: simpler video
+            cmd2 = [
+                'ffmpeg',
+                '-f', 'lavfi',
+                '-i', f'color=c=black:s=1280x720:d={duration}:r=30',
+                '-i', speech_path,
+                '-c:v', 'libx264',
+                '-preset', 'ultrafast',
+                '-c:a', 'aac',
+                '-shortest',
+                '-y',
+                output_video
+            ]
+            subprocess.run(cmd2, capture_output=True, check=True, timeout=60)
+        
+        return FileResponse(
+            output_video,
+            media_type="video/mp4",
+            filename="video.mp4"
+        )
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    finally:
         try:
             if os.path.exists(temp_audio.name):
                 os.unlink(temp_audio.name)