Auto-deploy from GitHub: 6cd5884f5f59c8acb069f7a2a8f8ce8558f018b5

.gitattributes

@@ -1,5 +1,5 @@
-*.wav filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
 *.flac filter=lfs diff=lfs merge=lfs -text
 *.pth filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -3,20 +3,20 @@ FROM python:3.10-slim
 # Set working directory
 WORKDIR /app
 
-# Install system dependencies
 # Install system dependencies
 RUN apt-get update && apt-get install -y \
-    ffmpeg \
     git \
     curl \
-    espeak-ng \
+    build-essential \
+    ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
-# Copy application files
+# Copy project files
+COPY pyproject.toml .
 COPY . .
 
-# Install Python dependencies
-RUN pip install --no-cache-dir -r requirements.txt
+# Install dependencies and project
+RUN pip install --no-cache-dir .
 
 # Create necessary directories
 RUN mkdir -p uploads temp_dir
@@ -24,5 +24,5 @@ RUN mkdir -p uploads temp_dir
 # Expose port
 EXPOSE 7860
 
-# Run only the Flask app (worker starts automatically on first upload)
-CMD ["python", "app.py"]
+# Run the FastAPI app (worker starts automatically on first upload)
+CMD ["python", "run.py"]

README.md

@@ -1,5 +1,5 @@
 ---
-title: TTS Text-to-Speech Generator
+title: TTS Text-to-Speech
 emoji: 🎵
 colorFrom: blue
 colorTo: purple
@@ -8,12 +8,12 @@ pinned: false
 license: mit
 ---
 
-# TTS Text-to-Speech Generator
+# TTS Text-to-Speech
 
 A Python-based text-to-speech service with a neobrutalist web interface.
 
 ## Features
-- 📝 Text-to-Speech generation
+- 📝 Text-to-Speech
 - 🤖 Multiple voices and speeds
 - 💾 SQLite database for queue management
 - 🎨 Neobrutalist UI with smooth animations

app.py

@@ -1,434 +0,0 @@
-from flask import Flask, request, jsonify, send_from_directory, send_file
-from flask_cors import CORS
-import sqlite3
-import os
-import uuid
-from datetime import datetime, timedelta
-from werkzeug.utils import secure_filename
-import threading
-import subprocess
-import time
-import shutil
-
-app = Flask(__name__)
-CORS(app)
-
-UPLOAD_FOLDER = 'uploads'
-os.makedirs(UPLOAD_FOLDER, exist_ok=True)
-os.makedirs('temp_dir', exist_ok=True)
-
-# Worker state
-worker_thread = None
-worker_running = False
-
-# Cleanup settings
-RETENTION_DAYS = 10  # Delete entries older than this many days
-
-def init_db():
-    conn = sqlite3.connect('tts_tasks.db')
-    c = conn.cursor()
-    c.execute('''CREATE TABLE IF NOT EXISTS tasks
-                 (id TEXT PRIMARY KEY,
-                  text TEXT NOT NULL,
-                  voice TEXT,
-                  speed REAL,
-                  status TEXT NOT NULL,
-                  output_file TEXT,
-                  created_at TEXT NOT NULL,
-                  processed_at TEXT,
-                  error TEXT,
-                  progress INTEGER DEFAULT 0,
-                  progress_text TEXT,
-                  hide_from_ui INTEGER DEFAULT 0)'''
-    )
-
-    conn.commit()
-    conn.close()
-
-def cleanup_old_entries():
-    """Delete entries older than RETENTION_DAYS along with their audio files"""
-    cutoff_date = (datetime.now() - timedelta(days=RETENTION_DAYS)).isoformat()
-    
-    print(f"\n🧹 Running cleanup for entries older than {RETENTION_DAYS} days...")
-    
-    try:
-        conn = sqlite3.connect('tts_tasks.db')
-        conn.row_factory = sqlite3.Row
-        c = conn.cursor()
-        
-        # Find old entries
-        c.execute('SELECT id, output_file FROM tasks WHERE created_at < ?', (cutoff_date,))
-        old_entries = c.fetchall()
-        
-        if not old_entries:
-            print("   No old entries to clean up.")
-            conn.close()
-            return
-        
-        deleted_count = 0
-        for entry in old_entries:
-            task_id = entry['id']
-            output_file = entry['output_file']
-            
-            # Delete audio file if it exists
-            if output_file:
-                file_path = os.path.join(UPLOAD_FOLDER, output_file)
-                if os.path.exists(file_path):
-                    os.remove(file_path)
-                    print(f"   🗑️  Deleted audio: {output_file}")
-            
-            # Delete database entry
-            c.execute('DELETE FROM tasks WHERE id = ?', (task_id,))
-            deleted_count += 1
-        
-        conn.commit()
-        conn.close()
-        
-        print(f"   ✅ Cleaned up {deleted_count} old entries.\n")
-        
-    except Exception as e:
-        print(f"   ⚠️  Cleanup error: {str(e)}\n")
-
-def start_worker():
-    """Start the worker thread if not already running"""
-    global worker_thread, worker_running
-    
-    if not worker_running:
-        worker_running = True
-        worker_thread = threading.Thread(target=worker_loop, daemon=True)
-        worker_thread.start()
-        print("✅ Worker thread started")
-
-def worker_loop():
-    """Main worker loop that processes TTS tasks"""
-    print("🤖 TTS Worker started. Monitoring for new tasks...")
-    
-    CWD = "./"
-    PYTHON_PATH = "python3" # Or just python
-    POLL_INTERVAL = 2  # seconds
-    
-    while worker_running:
-        try:
-            # Get next unprocessed task
-            conn = sqlite3.connect('tts_tasks.db')
-            conn.row_factory = sqlite3.Row
-            c = conn.cursor()
-            c.execute('''SELECT * FROM tasks 
-                         WHERE status = 'not_started' 
-                         ORDER BY created_at ASC 
-                         LIMIT 1''')
-            row = c.fetchone()
-            conn.close()
-            
-            if row:
-                task_id = row['id']
-                text = row['text']
-                voice = row['voice'] or '4' # Default voice index (American Male)
-                speed = row['speed'] or 1.0
-                
-                # Run cleanup before processing each task
-                cleanup_old_entries()
-                
-                print(f"\n{'='*60}")
-                print(f"🎵 Processing Task: {task_id}")
-                print(f"📝 Text: {text[:50]}...")
-                print(f"{'='*60}")
-                
-                # Update status to processing
-                update_status(task_id, 'processing')
-                
-                try:
-                    # Write text to content.txt
-                    with open('content.txt', 'w', encoding='utf-8') as f:
-                        f.write(text)
-                    
-                    # Run TTS command
-                    # python3 -m tts_runner.runner --model kokoro --voice <voice> --speed <speed>
-                    print(f"🔄 Running TTS...")
-                    command = [
-                        PYTHON_PATH, "-m", "tts_runner.runner",
-                        "--model", "chatterbox",
-                        "--voice", str(voice),
-                        "--speed", str(speed)
-                    ]
-                    
-                    # Run with output capture for progress tracking
-                    import re
-                    process = subprocess.Popen(
-                        command,
-                        stdout=subprocess.PIPE,
-                        stderr=subprocess.STDOUT,
-                        cwd=CWD,
-                        text=True,
-                        bufsize=1,
-                        env={
-                            **os.environ,
-                            'PYTHONUNBUFFERED': '1',
-                            'CUDA_LAUNCH_BLOCKING': '1'
-                        }
-                    )
-                    
-                    total_sentences = 0
-                    current_sentence = 0
-                    
-                    for line in process.stdout:
-                        print(line, end='')  # Echo to console
-                        
-                        # Parse "Sentence X processed" lines
-                        match = re.search(r'Sentence\s+(\d+)\s+processed', line)
-                        if match:
-                            current_sentence = int(match.group(1))
-                            # Try to get total from "Combining X audio files"
-                            if total_sentences > 0:
-                                progress = int((current_sentence / total_sentences) * 100)
-                                update_progress(task_id, progress, f"Processing sentence {current_sentence}/{total_sentences}")
-                        
-                        # Parse "Combining X audio files" to get total count
-                        combine_match = re.search(r'Combining\s+(\d+)\s+audio\s+files', line)
-                        if combine_match:
-                            total_sentences = int(combine_match.group(1))
-                            update_progress(task_id, 90, "Combining audio files...")
-                        
-                        # Parse "Processing text sentences..." as start
-                        if 'Processing text sentences' in line:
-                            update_progress(task_id, 5, "Processing text sentences...")
-                        
-                        # Parse model loading
-                        if 'Model loaded successfully' in line:
-                            update_progress(task_id, 10, "Model loaded, starting TTS...")
-                    
-                    process.wait()
-                    if process.returncode != 0:
-                        raise Exception(f"TTS process failed with return code {process.returncode}")
-                    
-                    # Check for output file
-                    output_filename = "output_audio.wav"
-                    if os.path.exists(output_filename):
-                        # Move to uploads folder
-                        target_filename = f"{task_id}.wav"
-                        target_path = os.path.join(UPLOAD_FOLDER, target_filename)
-                        shutil.move(output_filename, target_path)
-                        
-                        print(f"✅ Successfully processed: {target_filename}")
-                        
-                        # Update database with success
-                        update_status(task_id, 'completed', output_file=target_filename)
-                    else:
-                        raise Exception("Output audio file not found")
-                    
-                except Exception as e:
-                    print(f"❌ Failed to process: {task_id}")
-                    print(f"Error: {str(e)}")
-                    update_status(task_id, 'failed', error=str(e))
-                    
-            else:
-                # No tasks to process, sleep for a bit
-                time.sleep(POLL_INTERVAL)
-                
-        except Exception as e:
-            print(f"⚠️  Worker error: {str(e)}")
-            time.sleep(POLL_INTERVAL)
-
-def update_progress(task_id, progress, progress_text=None):
-    """Update the progress of a task"""
-    conn = sqlite3.connect('tts_tasks.db')
-    c = conn.cursor()
-    c.execute('UPDATE tasks SET progress = ?, progress_text = ? WHERE id = ?',
-              (progress, progress_text, task_id))
-    conn.commit()
-    conn.close()
-
-def update_status(task_id, status, output_file=None, error=None):
-    """Update the status of a task in the database"""
-    conn = sqlite3.connect('tts_tasks.db')
-    c = conn.cursor()
-    
-    if status == 'completed':
-        c.execute('''UPDATE tasks 
-                     SET status = ?, output_file = ?, processed_at = ?, progress = 100, progress_text = 'Completed'
-                     WHERE id = ?''',
-                  (status, output_file, datetime.now().isoformat(), task_id))
-    elif status == 'failed':
-        c.execute('''UPDATE tasks 
-                     SET status = ?, error = ?, processed_at = ?, progress_text = 'Failed'
-                     WHERE id = ?''',
-                  (status, str(error), datetime.now().isoformat(), task_id))
-    else:
-        c.execute('UPDATE tasks SET status = ? WHERE id = ?', (status, task_id))
-    
-    conn.commit()
-    conn.close()
-
-@app.route('/')
-def index():
-    return send_from_directory('.', 'index.html')
-
-@app.route('/api/generate', methods=['POST'])
-def generate_audio():
-    data = request.json
-    if not data or 'text' not in data:
-        return jsonify({'error': 'No text provided'}), 400
-    
-    text = data['text']
-    voice = data.get('voice', '4')
-    speed = data.get('speed', 1.0)
-    hide_from_ui = 1 if data.get('hide_from_ui') else 0
-    
-    if not text.strip():
-        return jsonify({'error': 'Text cannot be empty'}), 400
-    
-    task_id = str(uuid.uuid4())
-    
-    conn = sqlite3.connect('tts_tasks.db')
-    c = conn.cursor()
-    c.execute('''INSERT INTO tasks 
-                 (id, text, voice, speed, status, created_at, hide_from_ui)
-                 VALUES (?, ?, ?, ?, ?, ?, ?)''',
-              (task_id, text, voice, speed, 'not_started', datetime.now().isoformat(), hide_from_ui))
-    conn.commit()
-    conn.close()
-    
-    # Start worker on first request
-    start_worker()
-    
-    return jsonify({
-        'id': task_id,
-        'status': 'not_started',
-        'message': 'Task queued successfully'
-    }), 201
-
-@app.route('/api/files', methods=['GET'])
-def get_files():
-    conn = sqlite3.connect('tts_tasks.db')
-    conn.row_factory = sqlite3.Row
-    c = conn.cursor()
-    c.execute('SELECT * FROM tasks WHERE hide_from_ui = 0 OR hide_from_ui IS NULL ORDER BY created_at DESC')
-    rows = c.fetchall()
-    
-    # Get queue order for not_started tasks (oldest first = position 1)
-    c.execute('''SELECT id FROM tasks 
-                 WHERE status = 'not_started' 
-                 ORDER BY created_at ASC''')
-    queue_order = [r['id'] for r in c.fetchall()]
-    
-    # Check if any task is currently processing
-    c.execute('SELECT COUNT(*) as count FROM tasks WHERE status = "processing"')
-    processing_count = c.fetchone()['count']
-    
-    conn.close()
-    
-    # Average processing time in seconds (can be adjusted based on actual metrics)
-    AVG_PROCESSING_TIME = 30
-    
-    files = []
-    for row in rows:
-        file_data = {
-            'id': row['id'],
-            'text': row['text'],
-            'status': row['status'],
-            'output_file': row['output_file'],
-            'created_at': row['created_at'],
-            'processed_at': row['processed_at'],
-            'error': row['error'],
-            'progress': row['progress'] or 0,
-            'progress_text': row['progress_text']
-        }
-        
-        # Add queue position for not_started tasks
-        if row['status'] == 'not_started' and row['id'] in queue_order:
-            queue_position = queue_order.index(row['id']) + 1  # 1-indexed
-            file_data['queue_position'] = queue_position
-            # Estimated time = (position - 1 + processing_count) * avg_time
-            # If something is processing, add that to the wait
-            tasks_ahead = queue_position - 1 + processing_count
-            file_data['estimated_start_seconds'] = tasks_ahead * AVG_PROCESSING_TIME
-        
-        files.append(file_data)
-    
-    return jsonify(files)
-
-@app.route('/api/files/<task_id>', methods=['GET'])
-def get_file(task_id):
-    conn = sqlite3.connect('tts_tasks.db')
-    conn.row_factory = sqlite3.Row
-    c = conn.cursor()
-    c.execute('SELECT * FROM tasks WHERE id = ?', (task_id,))
-    row = c.fetchone()
-    
-    if row is None:
-        conn.close()
-        return jsonify({'error': 'Task not found'}), 404
-        
-    # Get queue order for not_started tasks (oldest first = position 1)
-    c.execute('''SELECT id FROM tasks 
-                 WHERE status = 'not_started' 
-                 ORDER BY created_at ASC''')
-    queue_order = [r['id'] for r in c.fetchall()]
-    
-    # Check if any task is currently processing
-    c.execute('SELECT COUNT(*) as count FROM tasks WHERE status = "processing"')
-    processing_count = c.fetchone()['count']
-    
-    conn.close()
-    
-    # Average processing time in seconds
-    AVG_PROCESSING_TIME = 30
-    
-    file_data = {
-        'id': row['id'],
-        'text': row['text'],
-        'status': row['status'],
-        'output_file': row['output_file'],
-        'created_at': row['created_at'],
-        'processed_at': row['processed_at'],
-        'error': row['error'],
-        'progress': row['progress'] or 0,
-        'progress_text': row['progress_text']
-    }
-    
-    # Add queue position for not_started tasks
-    if row['status'] == 'not_started' and row['id'] in queue_order:
-        queue_position = queue_order.index(row['id']) + 1  # 1-indexed
-        file_data['queue_position'] = queue_position
-        tasks_ahead = queue_position - 1 + processing_count
-        file_data['estimated_start_seconds'] = tasks_ahead * AVG_PROCESSING_TIME
-        
-    return jsonify(file_data)
-
-@app.route('/api/download/<task_id>', methods=['GET'])
-def download_file(task_id):
-    conn = sqlite3.connect('tts_tasks.db')
-    conn.row_factory = sqlite3.Row
-    c = conn.cursor()
-    c.execute('SELECT * FROM tasks WHERE id = ?', (task_id,))
-    row = c.fetchone()
-    conn.close()
-    
-    if row is None or not row['output_file']:
-        return jsonify({'error': 'File not found'}), 404
-    
-    file_path = os.path.join(UPLOAD_FOLDER, row['output_file'])
-    if not os.path.exists(file_path):
-        return jsonify({'error': 'File missing on server'}), 404
-        
-    return send_file(file_path, as_attachment=True, download_name=f"tts_{task_id}.wav")
-
-@app.route('/health', methods=['GET'])
-def health():
-    return jsonify({
-        'status': 'healthy',
-        'service': 'tts-generator',
-        'worker_running': worker_running
-    })
-
-if __name__ == '__main__':
-    init_db()
-    print("\n" + "="*60)
-    print("🚀 TTS Generator API Server")
-    print("="*60)
-    print("📌 Worker will start automatically on first request")
-    print("="*60 + "\n")
-    
-    # Use PORT environment variable for Hugging Face compatibility
-    port = int(os.environ.get('PORT', 7860))
-    app.run(debug=False, host='0.0.0.0', port=port)

app/api/routes.py

@@ -0,0 +1,125 @@
+from fastapi import APIRouter, UploadFile, File, Form, HTTPException
+from fastapi.responses import FileResponse, JSONResponse
+import os
+import uuid
+import aiofiles
+from app.core.config import settings
+from custom_logger import logger_config as logger
+from app.db import crud
+from app.services.worker import start_worker, is_worker_running
+
+router = APIRouter()
+
+@router.get("/")
+async def index():
+    return FileResponse('index.html')
+
+@router.post("/api/tasks/upload")
+async def create_task(
+    text: str = Form(None),
+    file: UploadFile = File(None),
+    voice: str = Form("4"),
+    speed: float = Form(1.0),
+    hide_from_ui: str = Form("")
+):
+    task_text = ""
+    
+    if text:
+        task_text = text
+    elif file:
+        try:
+            content = await file.read()
+            task_text = content.decode('utf-8')
+        except Exception as e:
+            logger.error(f"Error reading uploaded file: {e}")
+            raise HTTPException(status_code=400, detail="Could not read file content")
+    
+    if not task_text.strip():
+        raise HTTPException(status_code=400, detail="No text provided")
+    
+    task_id = str(uuid.uuid4())
+    filename = file.filename if file else f"{task_text[:20]}..."
+    hide_from_ui_val = 1 if hide_from_ui.lower() in ['true', '1'] else 0
+    
+    await crud.insert_task(task_id, filename, task_text, voice, speed, 'not_started', hide_from_ui_val)
+    await start_worker()
+    
+    return JSONResponse(status_code=201, content={
+        'id': task_id,
+        'filename': filename,
+        'status': 'not_started',
+        'message': 'Task created successfully'
+    })
+
+@router.get("/api/tasks")
+async def get_tasks():
+    rows, queue_ids, processing_count, avg_time = await crud.get_all_tasks()
+    
+    tasks = []
+    for row in rows:
+        queue_position = None
+        estimated_start_seconds = None
+        
+        if row['status'] == 'not_started' and row['id'] in queue_ids:
+            queue_position = queue_ids.index(row['id']) + 1
+            tasks_ahead = queue_position - 1 + processing_count
+            estimated_start_seconds = round(tasks_ahead * avg_time)
+        
+        tasks.append({
+            'id': row['id'],
+            'filename': row['filename'],
+            'status': row['status'],
+            'result': "HIDDEN_IN_LIST_VIEW",
+            'created_at': row['created_at'],
+            'processed_at': row['processed_at'],
+            'progress': row['progress'] or 0,
+            'progress_text': row['progress_text'],
+            'queue_position': queue_position,
+            'estimated_start_seconds': estimated_start_seconds
+        })
+    
+    return tasks
+
+@router.get("/api/tasks/{task_id}")
+async def get_task(task_id: str):
+    result = await crud.get_task_by_id(task_id)
+    if not result:
+        raise HTTPException(status_code=404, detail="Task not found")
+        
+    row, queue_position, estimated_start_seconds = result
+    
+    return {
+        'id': row['id'],
+        'filename': row['filename'],
+        'text': row['text'],
+        'status': row['status'],
+        'result': row['text'], # result maps to text for detail view
+        'output_file': row['output_file'],
+        'created_at': row['created_at'],
+        'processed_at': row['processed_at'],
+        'progress': row['progress'] or 0,
+        'progress_text': row['progress_text'],
+        'queue_position': queue_position,
+        'estimated_start_seconds': estimated_start_seconds
+    }
+
+@router.get("/api/download/{task_id}")
+async def download_task(task_id: str):
+    result = await crud.get_task_by_id(task_id)
+    if not result or not result[0]['output_file']:
+        raise HTTPException(status_code=404, detail="Audio file not found")
+        
+    row = result[0]
+    filepath = os.path.join(settings.UPLOAD_FOLDER, row['output_file'])
+    if not os.path.exists(filepath):
+        raise HTTPException(status_code=404, detail="File missing on server")
+        
+    return FileResponse(filepath, media_type="audio/wav", filename=f"tts_{task_id}.wav")
+
+@router.get("/health")
+async def health():
+    return {
+        'status': 'healthy',
+        'service': 'tts-runner',
+        'worker_running': is_worker_running()
+    }

app/core/config.py

@@ -0,0 +1,20 @@
+import os
+
+class Config:
+    PORT = int(os.environ.get('PORT', 7860))
+    UPLOAD_FOLDER = 'uploads'
+    TEMP_DIR = 'temp_dir'
+    DATABASE_FILE = 'tts_results.db'
+    ALLOWED_EXTENSIONS = {'txt', 'md', 'text'}
+    
+    CWD = "./"
+    PYTHON_PATH = "python3"
+    POLL_INTERVAL = 2
+    
+    # TTS Specifics
+    RETENTION_DAYS = 10
+
+settings = Config()
+
+os.makedirs(settings.UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(settings.TEMP_DIR, exist_ok=True)

app/db/crud.py

@@ -0,0 +1,159 @@
+import aiosqlite
+import os
+from datetime import datetime, timedelta
+from app.core.config import settings
+from custom_logger import logger_config as logger
+
+async def insert_task(task_id: str, filename: str, text: str, voice: str, speed: float, status: str, hide_from_ui: int):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        await db.execute('''INSERT INTO tasks 
+                     (id, filename, text, voice, speed, status, created_at, hide_from_ui)
+                     VALUES (?, ?, ?, ?, ?, ?, ?, ?)''',
+                  (task_id, filename, text, voice, speed, status, datetime.now().isoformat(), hide_from_ui))
+        await db.commit()
+    logger.debug(f"Inserted task {task_id} into database.")
+
+async def update_status(task_id: str, status: str, output_file: str = None, error: str = None):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        if status == 'completed':
+            await db.execute('''UPDATE tasks 
+                         SET status = ?, output_file = ?, processed_at = ?, progress = 100, progress_text = 'Completed'
+                         WHERE id = ?''',
+                      (status, output_file, datetime.now().isoformat(), task_id))
+            logger.info(f"Task ID {task_id} marked as completed.")
+        elif status == 'failed':
+            await db.execute('''UPDATE tasks 
+                         SET status = ?, error = ?, processed_at = ?, progress_text = 'Failed'
+                         WHERE id = ?''',
+                      (status, str(error), datetime.now().isoformat(), task_id))
+            logger.error(f"Task ID {task_id} marked as failed. Error: {error}")
+        else:
+            await db.execute('UPDATE tasks SET status = ? WHERE id = ?', (status, task_id))
+            logger.debug(f"Task ID {task_id} status updated to {status}.")
+        await db.commit()
+
+async def update_progress(task_id: str, progress: int, progress_text: str = None):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        await db.execute('UPDATE tasks SET progress = ?, progress_text = ? WHERE id = ?',
+                  (progress, progress_text, task_id))
+        await db.commit()
+    logger.debug(f"Task ID {task_id} progress updated to {progress}% ({progress_text}).")
+
+async def get_next_not_started():
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('''SELECT * FROM tasks 
+                     WHERE status = 'not_started' 
+                     ORDER BY created_at ASC 
+                     LIMIT 1''') as cursor:
+            return await cursor.fetchone()
+
+async def cleanup_old_entries():
+    try:
+        async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+            db.row_factory = aiosqlite.Row
+            cutoff_date = (datetime.now() - timedelta(days=settings.RETENTION_DAYS)).isoformat()
+            
+            async with db.execute('''SELECT id, output_file FROM tasks 
+                         WHERE created_at < ?''', (cutoff_date,)) as cursor:
+                old_entries = await cursor.fetchall()
+            
+            if old_entries:
+                deleted_files = 0
+                deleted_rows = 0
+                
+                for entry in old_entries:
+                    output_file = entry['output_file']
+                    if output_file:
+                        filepath = os.path.join(settings.UPLOAD_FOLDER, output_file)
+                        if os.path.exists(filepath):
+                            try:
+                                os.remove(filepath)
+                                deleted_files += 1
+                            except Exception as e:
+                                logger.warning(f"Failed to delete old file {filepath}: {e}")
+                
+                async with db.execute('''DELETE FROM tasks WHERE created_at < ?''', (cutoff_date,)) as cursor:
+                    deleted_rows = cursor.rowcount
+                await db.commit()
+                
+                if deleted_rows > 0 or deleted_files > 0:
+                    logger.info(f"Cleanup: Deleted {deleted_rows} old entries and {deleted_files} audio files")
+    except Exception as e:
+        logger.error(f"Cleanup error: {e}")
+
+async def get_average_processing_time():
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('''SELECT created_at, processed_at FROM tasks 
+                          WHERE status = 'completed' AND processed_at IS NOT NULL
+                          ORDER BY processed_at DESC LIMIT 20''') as cursor:
+            completed_rows = await cursor.fetchall()
+        
+        if not completed_rows:
+            return 30.0
+        
+        total_seconds = 0
+        count = 0
+        for r in completed_rows:
+            try:
+                created = datetime.fromisoformat(r['created_at'])
+                processed = datetime.fromisoformat(r['processed_at'])
+                duration = (processed - created).total_seconds()
+                if duration > 0:
+                    total_seconds += duration
+                    count += 1
+            except:
+                continue
+        
+        return total_seconds / count if count > 0 else 30.0
+
+async def get_all_tasks():
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        
+        avg_time = await get_average_processing_time()
+        
+        async with db.execute('''SELECT id FROM tasks 
+                     WHERE status = 'not_started' 
+                     ORDER BY created_at ASC''') as cursor:
+            queue_ids = [row['id'] for row in await cursor.fetchall()]
+        
+        async with db.execute('''SELECT COUNT(*) as count FROM tasks WHERE status = 'processing' ''') as cursor:
+            row = await cursor.fetchone()
+            processing_count = row['count']
+        
+        async with db.execute('SELECT * FROM tasks WHERE hide_from_ui = 0 OR hide_from_ui IS NULL ORDER BY created_at DESC') as cursor:
+            rows = await cursor.fetchall()
+            
+        return rows, queue_ids, processing_count, avg_time
+
+async def get_task_by_id(task_id: str):
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('SELECT * FROM tasks WHERE id = ?', (task_id,)) as cursor:
+            row = await cursor.fetchone()
+            
+        if not row:
+            return None
+            
+        queue_position = None
+        estimated_start_seconds = None
+        
+        if row['status'] == 'not_started':
+            avg_time = await get_average_processing_time()
+            
+            async with db.execute('''SELECT COUNT(*) as position FROM tasks 
+                         WHERE status = 'not_started' AND created_at < ?''',
+                      (row['created_at'],)) as cursor:
+                position_row = await cursor.fetchone()
+                queue_position = position_row['position'] + 1
+            
+            async with db.execute('''SELECT COUNT(*) as count FROM tasks WHERE status = 'processing' ''') as cursor:
+                count_row = await cursor.fetchone()
+                processing_count = count_row['count']
+            
+            tasks_ahead = queue_position - 1 + processing_count
+            estimated_start_seconds = round(tasks_ahead * avg_time)
+            
+        return row, queue_position, estimated_start_seconds

app/db/database.py

@@ -0,0 +1,24 @@
+import aiosqlite
+from app.core.config import settings
+from custom_logger import logger_config as logger
+
+async def init_db():
+    logger.info(f"Initializing database at {settings.DATABASE_FILE}")
+    async with aiosqlite.connect(settings.DATABASE_FILE) as db:
+        await db.execute('''CREATE TABLE IF NOT EXISTS tasks
+                     (id TEXT PRIMARY KEY,
+                      filename TEXT,
+                      text TEXT NOT NULL,
+                      voice TEXT,
+                      speed REAL,
+                      status TEXT NOT NULL,
+                      output_file TEXT,
+                      created_at TEXT NOT NULL,
+                      processed_at TEXT,
+                      error TEXT,
+                      progress INTEGER DEFAULT 0,
+                      progress_text TEXT,
+                      hide_from_ui INTEGER DEFAULT 0)'''
+        )
+        await db.commit()
+    logger.info("Database initialized successfully.")

app/main.py

@@ -0,0 +1,31 @@
+from contextlib import asynccontextmanager
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from app.api.routes import router
+from app.db.database import init_db
+from custom_logger import logger_config as logger
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    logger.info("="*60)
+    logger.info("TTS Runner API Server Starting Up")
+    logger.info("="*60)
+    logger.info("Worker will start automatically on first request")
+    logger.info("Audio files will be retained for 10 days")
+    logger.info("="*60)
+    
+    await init_db()
+    yield
+    logger.info("TTS Runner API Server Shutting Down")
+
+app = FastAPI(title="TTS Runner API", version="2.0.0", lifespan=lifespan)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(router)

app/services/worker.py

@@ -0,0 +1,122 @@
+import asyncio
+import os
+import subprocess
+import re
+import shutil
+from app.core.config import settings
+from app.db import crud
+from custom_logger import logger_config as logger
+
+_worker_task = None
+
+async def start_worker():
+    global _worker_task
+    if _worker_task is None or _worker_task.done():
+        _worker_task = asyncio.create_task(worker_loop())
+        logger.info("TTS Worker background task started")
+
+def is_worker_running():
+    return _worker_task is not None and not _worker_task.done()
+
+async def worker_loop():
+    global _worker_task
+    logger.info("TTS Worker loop started. Monitoring for new tasks...")
+    
+    while True:
+        try:
+            # Cleanup old entries
+            await crud.cleanup_old_entries()
+            
+            # Get next unprocessed task
+            task = await crud.get_next_not_started()
+            
+            if task:
+                task_id = task['id']
+                text = task['text']
+                filename = task['filename']
+                voice = task['voice'] or '4'
+                speed = task['speed'] or 1.0
+                
+                logger.info(f"\n{'='*60}\nProcessing: {filename}\nID: {task_id}\n{'='*60}")
+                await crud.update_status(task_id, 'processing')
+                
+                try:
+                    await crud.update_progress(task_id, 5, "Initializing TTS...")
+                    
+                    # Write text to content.txt
+                    content_path = os.path.join(settings.CWD, 'content.txt')
+                    with open(content_path, 'w', encoding='utf-8') as f:
+                        f.write(text)
+                    
+                    # Run TTS command
+                    command = [
+                        settings.PYTHON_PATH, "-m", "tts_runner.runner",
+                        "--model", "chatterbox",
+                        "--voice", str(voice),
+                        "--speed", str(speed)
+                    ]
+                    
+                    logger.debug(f"Executing command: {' '.join(command)}")
+                    
+                    process = await asyncio.create_subprocess_exec(
+                        *command,
+                        stdout=subprocess.PIPE,
+                        stderr=subprocess.STDOUT,
+                        cwd=settings.CWD,
+                        env={
+                            **os.environ,
+                            'PYTHONUNBUFFERED': '1',
+                            'CUDA_LAUNCH_BLOCKING': '1'
+                        }
+                    )
+                    
+                    total_sentences = 0
+                    current_sentence = 0
+                    
+                    async for line in process.stdout:
+                        line_str = line.decode('utf-8', errors='replace').strip()
+                        if line_str:
+                            logger.info(f"[TTS] {line_str}")
+                            
+                            # Parse "Sentence X processed" lines
+                            match = re.search(r'Sentence\s+(\d+)\s+processed', line_str)
+                            if match:
+                                current_sentence = int(match.group(1))
+                                if total_sentences > 0:
+                                    progress = int((current_sentence / total_sentences) * 90)
+                                    await crud.update_progress(task_id, max(progress, 10), f"Processing sentence {current_sentence}/{total_sentences}")
+                            
+                            # Parse "Combining X audio files"
+                            combine_match = re.search(r'Combining\s+(\d+)\s+audio\s+files', line_str)
+                            if combine_match:
+                                total_sentences = int(combine_match.group(1))
+                                await crud.update_progress(task_id, 90, "Combining audio files...")
+                            
+                            if 'Model loaded successfully' in line_str:
+                                await crud.update_progress(task_id, 10, "Model ready, starting synthesis...")
+                    
+                    await process.wait()
+                    
+                    if process.returncode == 0:
+                        output_filename = "output_audio.wav"
+                        if os.path.exists(output_filename):
+                            target_filename = f"{task_id}.wav"
+                            target_path = os.path.join(settings.UPLOAD_FOLDER, target_filename)
+                            shutil.move(output_filename, target_path)
+                            
+                            logger.success(f"Successfully processed: {filename}")
+                            await crud.update_status(task_id, 'completed', output_file=target_filename)
+                        else:
+                            raise Exception("Output audio file not found")
+                    else:
+                        raise Exception(f"TTS process failed with return code {process.returncode}")
+                        
+                except Exception as e:
+                    logger.error(f"Failed to process {filename}: {str(e)}")
+                    await crud.update_status(task_id, 'failed', error=str(e))
+            else:
+                await asyncio.sleep(settings.POLL_INTERVAL)
+                
+        except Exception as e:
+            logger.error(f"Worker error: {str(e)}")
+            await asyncio.sleep(settings.POLL_INTERVAL)

index.html

@@ -2,987 +2,1041 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TTS Generator</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>TTS - Text-to-Speech</title>
+
+    <!-- External Assets -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Caveat:wght@400..700&display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+
+    <!-- Tailwind Configuration -->
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface: "#e6f0fd",
+                        "crayon-blue": "#2563eb",
+                        "crayon-red": "#dc2626",
+                        "crayon-green": "#16a34a",
+                        "crayon-yellow": "#ca8a04",
+                        "crayon-orange": "#ea580c",
+                        "crayon-purple": "#7c3aed",
+                        "crayon-dark": "#1A1A1A"
+                    },
+                    fontFamily: {
+                        "fredoka": ["Fredoka", "sans-serif"],
+                        "caveat": ["Caveat", "cursive"]
+                    },
+                    fontSize: {
+                        "headline-lg": ["42px", { lineHeight: "1.1", fontWeight: "700" }],
+                        "headline-md": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
+                        "body-lg": ["24px", { lineHeight: "1.5", fontWeight: "500" }],
+                        "label-sm": ["18px", { lineHeight: "1.2", letterSpacing: "0.01em", fontWeight: "500" }],
+                        "body-md": ["20px", { lineHeight: "1.5", fontWeight: "400" }]
+                    }
+                },
+            },
         }
+    </script>
 
-        :root {
-            --bg: #0a0e27;
-            --surface: #141b3d;
-            --primary: #00ff88;
-            --secondary: #ff00ff;
-            --accent: #00d4ff;
-            --error: #ff1744;
-            --text: #ffffff;
-            --border: 4px;
-        }
+    <svg height="0" style="position: absolute;" width="0">
+        <filter height="120%" id="crayon-texture" width="120%" x="-10%" y="-10%">
+            <feTurbulence baseFrequency="0.4" numOctaves="3" result="noise" type="fractalNoise"></feTurbulence>
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G">
+            </feDisplacementMap>
+        </filter>
+        <filter height="120%" id="crayon-heavy" width="120%" x="-10%" y="-10%">
+            <feTurbulence baseFrequency="0.5" numOctaves="4" result="noise" type="fractalNoise"></feTurbulence>
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G">
+            </feDisplacementMap>
+        </filter>
+    </svg>
 
+    <style>
+        /* Sketchbook Styles */
         body {
-            font-family: 'Space Grotesk', 'Courier New', monospace;
-            background: var(--bg);
-            color: var(--text);
-            min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
+            background-color: #e6f0fd;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
+            color: #1A1A1A;
+            font-family: 'Fredoka', sans-serif;
         }
 
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background:
-                radial-gradient(circle at 20% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
-            pointer-events: none;
-            z-index: 0;
+        .bg-surface {
+            background-color: rgb(255 255 255 / 0%) !important;
+            backdrop-filter: blur(2px);
         }
 
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 2rem;
-            position: relative;
-            z-index: 1;
+        .crayon-filter {
+            filter: url('#crayon-texture');
         }
 
-        header {
-            text-align: center;
-            margin-bottom: 3rem;
-            animation: slideDown 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        .crayon-heavy {
+            filter: url('#crayon-heavy');
         }
 
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+        .crayon-border-green {
+            border: 4px solid #16a34a;
+            border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px;
+            filter: url('#crayon-texture');
         }
 
-        h1 {
-            font-size: clamp(2rem, 5vw, 4rem);
-            font-weight: 900;
-            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--secondary) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-transform: uppercase;
-            letter-spacing: -2px;
-            margin-bottom: 1rem;
-            position: relative;
-            display: inline-block;
+        .task-card {
+            border: 3px solid rgba(124, 58, 237, 0.4);
+            border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px;
+            filter: url('#crayon-texture');
         }
 
-        h1::after {
-            content: '';
-            position: absolute;
-            bottom: -10px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 60%;
-            height: 6px;
-            background: linear-gradient(90deg, transparent, var(--primary), transparent);
-            animation: glow 2s ease-in-out infinite;
+        .crayon-border-blue {
+            border: 4px dashed #2563eb;
+            border-radius: 15px 10px 12px 18px / 12px 18px 15px 10px;
+            filter: url('#crayon-texture');
         }
 
-        @keyframes glow {
-
-            0%,
-            100% {
-                opacity: 0.5;
-            }
+        .crayon-border-purple {
+            border: 4px solid #7c3aed;
+            border-radius: 10px 16px 12px 14px / 16px 12px 14px 10px;
+            filter: url('#crayon-texture');
+        }
 
-            50% {
-                opacity: 1;
-            }
+        .crayon-button {
+            border: 4px solid #2563eb;
+            border-radius: 12px 8px 14px 10px / 8px 14px 10px 12px;
+            transition: all 0.2s ease;
+            filter: url('#crayon-texture');
+            cursor: pointer;
         }
 
-        .subtitle {
-            font-size: 1.2rem;
-            color: var(--accent);
-            letter-spacing: 2px;
+        .crayon-button:hover {
+            transform: scale(1.05) rotate(1deg);
+            box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.1);
         }
 
-        .input-section {
-            background: var(--surface);
-            border: var(--border) solid var(--primary);
-            box-shadow: 8px 8px 0 var(--primary);
-            padding: 2rem;
-            margin-bottom: 3rem;
-            position: relative;
-            transition: all 0.3s ease;
-            animation: slideUp 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
+        .crayon-button:hover .material-symbols-outlined.spin-on-hover {
+            animation: spin 2s linear infinite;
         }
 
-        @keyframes slideUp {
+        @keyframes spin {
             from {
-                opacity: 0;
-                transform: translateY(50px);
+                transform: rotate(0deg);
             }
 
             to {
-                opacity: 1;
-                transform: translateY(0);
+                transform: rotate(360deg);
             }
         }
 
-        .input-section:hover {
-            transform: translate(-2px, -2px);
-            box-shadow: 12px 12px 0 var(--primary);
-        }
-
-        textarea {
-            width: 100%;
-            height: 150px;
-            background: rgba(0, 212, 255, 0.05);
-            border: 3px solid var(--accent);
-            color: var(--text);
-            padding: 1rem;
-            font-family: inherit;
-            font-size: 1.1rem;
-            resize: vertical;
-            margin-bottom: 1.5rem;
-            transition: all 0.3s ease;
-        }
-
-        textarea:focus {
-            outline: none;
-            border-color: var(--primary);
-            background: rgba(0, 255, 136, 0.05);
-        }
-
-        .controls {
-            display: flex;
-            gap: 1rem;
-            margin-bottom: 1.5rem;
-            flex-wrap: wrap;
-        }
-
-        .control-group {
-            flex: 1;
-            min-width: 200px;
-        }
+        @keyframes drift {
+            0% {
+                transform: translateX(0);
+            }
 
-        label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: var(--accent);
-            font-weight: bold;
-        }
+            50% {
+                transform: translateX(20px);
+            }
 
-        select,
-        input[type="number"] {
-            width: 100%;
-            padding: 0.8rem;
-            background: var(--bg);
-            border: 2px solid var(--accent);
-            color: var(--text);
-            font-family: inherit;
-            font-size: 1rem;
-        }
-
-        .btn {
-            background: var(--primary);
-            color: var(--bg);
-            border: var(--border) solid var(--bg);
-            padding: 1rem 2rem;
-            font-size: 1.1rem;
-            font-weight: 900;
-            text-transform: uppercase;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            box-shadow: 4px 4px 0 var(--bg);
-            letter-spacing: 1px;
-            position: relative;
-            width: 100%;
+            100% {
+                transform: translateX(0);
+            }
         }
 
-        .btn:hover:not(:disabled) {
-            transform: translate(-2px, -2px);
-            box-shadow: 6px 6px 0 var(--bg);
+        .drift-slow {
+            animation: drift 8s ease-in-out infinite;
         }
 
-        .btn:active:not(:disabled) {
-            transform: translate(2px, 2px);
-            box-shadow: 2px 2px 0 var(--bg);
+        .drift-medium {
+            animation: drift 5s ease-in-out infinite;
         }
 
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
+        .organic-shape {
+            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+            filter: url('#crayon-texture');
         }
 
-        .btn-secondary {
-            background: var(--accent);
+        .scribble-fill-green {
+            background: repeating-linear-gradient(60deg, #16a34a, #16a34a 2px, #15803d 3px, #16a34a 4px);
         }
 
-        .btn-small {
-            padding: 0.5rem 1rem;
-            font-size: 0.85rem;
-            box-shadow: 3px 3px 0 var(--bg);
-            text-decoration: none;
-            display: inline-block;
-            color: var(--bg);
+        .progress-fill {
+            background: repeating-linear-gradient(80deg, #2563eb, #2563eb 2px, #1d4ed8 3px, #2563eb 5px);
         }
 
-        .btn-small:hover:not(:disabled) {
-            box-shadow: 4px 4px 0 var(--bg);
-            transform: translate(-2px, -2px);
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+            filter: url('#crayon-texture');
         }
 
-        .table-section {
-            animation: slideUp 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
+        /* --- Modals --- */
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 23, 42, 0.6);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+            padding: 2rem;
         }
 
-        .table-wrapper {
-            overflow-x: auto;
-            background: var(--surface);
-            border: var(--border) solid var(--secondary);
-            box-shadow: 8px 8px 0 var(--secondary);
+        .modal.active {
+            display: flex;
         }
 
-        table {
+        .modal-content {
+            border: 4px solid #2563eb;
             width: 100%;
-            border-collapse: collapse;
+            max-width: 900px;
+            border-radius: 24px;
+            display: flex;
+            flex-direction: column;
+            max-height: 85vh;
+            box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 0.1);
+            position: relative;
         }
 
-        thead {
-            background: linear-gradient(135deg, var(--primary), var(--accent));
+        .modal-sketch-bg {
+            position: absolute;
+            inset: -8px;
+            border: 6px solid #2563eb;
+            backdrop-filter: blur(10px);
+            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+            z-index: -1;
+            filter: url('#crayon-texture');
+            pointer-events: none;
         }
 
-        th {
-            padding: 1.5rem 1rem;
-            text-align: left;
-            font-weight: 900;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: var(--bg);
-            border-right: 3px solid var(--bg);
+        .modal-header {
+            padding: 1.5rem 2rem;
+            border-bottom: 3px dashed #adc6ff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+            z-index: 10;
         }
 
-        th:last-child {
-            border-right: none;
+        .modal-body {
+            padding: 2rem;
+            overflow-y: auto;
+            position: relative;
+            z-index: 10;
+        }
+
+        #resultText,
+        pre {
+            border: 3px dashed #adc6ff !important;
+            padding: 2rem !important;
+            border-radius: 20px !important;
+            font-family: 'Fredoka', sans-serif !important;
+            font-size: 1.5rem !important;
+            font-weight: 600 !important;
+            color: #1A1A1A !important;
+            white-space: pre-wrap !important;
+            word-break: break-all !important;
+            line-height: 1.6 !important;
+            filter: url('#crayon-texture');
+        }
+
+        .close-modal {
+            background: transparent;
+            border: none;
+            color: #dc2626;
+            font-size: 3rem;
+            cursor: pointer;
+            font-weight: 700;
         }
 
-        tbody tr {
-            border-bottom: 2px solid rgba(0, 212, 255, 0.2);
-            transition: all 0.3s ease;
-            animation: fadeIn 0.5s ease;
+        .text-headline-lg {
+            filter: url('#crayon-texture');
         }
 
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
-
-            to {
-                opacity: 1;
-            }
+        .copy-btn {
+            background: #16a34a;
+            color: white;
+            padding: 0.5rem 1.5rem;
+            border-radius: 12px;
+            font-weight: 700;
+            box-shadow: 4px 4px 0px 0px #15803d;
+            transition: all 0.2s;
+            filter: url('#crayon-texture');
         }
 
-        tbody tr:hover {
-            background: rgba(0, 255, 136, 0.1);
+        .copy-btn:hover {
+            transform: translate(-2px, -2px);
+            box-shadow: 6px 6px 0px 0px #15803d;
         }
 
-        td {
-            padding: 1.5rem 1rem;
-            color: var(--text);
+        /* --- Specific UI Elements --- */
+        .status-modal-content {
+            max-width: 450px;
+            text-align: center;
+            padding: 3rem 2rem;
         }
 
-        .status {
-            display: inline-block;
-            padding: 0.5rem 1rem;
-            border: 3px solid;
-            font-weight: 900;
-            text-transform: uppercase;
-            font-size: 0.85rem;
-            letter-spacing: 1px;
+        .status-modal-bg {
+            position: absolute;
+            inset: -12px;
+            border: 8px solid #2563eb;
+            background: #e6f0fd;
+            border-radius: 20px 40px 15px 35px / 35px 15px 40px 20px;
+            z-index: -1;
+            filter: url('#crayon-texture');
+            pointer-events: none;
         }
 
-        .status-not_started {
-            background: var(--bg);
-            border-color: var(--accent);
-            color: var(--accent);
+        .status-icon-container {
+            width: 100px;
+            height: 100px;
+            margin: 0 auto 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px;
+            border: 4px solid currentColor;
+            filter: url('#crayon-texture');
+            position: relative;
+            z-index: 20;
         }
 
-        .status-processing {
-            background: var(--bg);
-            border-color: var(--primary);
-            color: var(--primary);
-            animation: pulse 1.5s ease-in-out infinite;
+        .status-icon-bg {
+            position: absolute;
+            inset: 0;
+            background: currentColor;
+            opacity: 0.15;
+            z-index: -1;
+            border-radius: inherit;
         }
 
-        @keyframes pulse {
-
-            0%,
-            100% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: 0.6;
-            }
+        .modal-decoration {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0.3;
+            z-index: 5;
+            filter: url('#crayon-texture');
         }
 
-        .status-completed {
-            background: var(--primary);
-            border-color: var(--primary);
-            color: var(--bg);
+        .table-container::-webkit-scrollbar {
+            width: 10px;
         }
 
-        .status-failed {
-            background: var(--error);
-            border-color: var(--error);
-            color: var(--text);
+        .table-container::-webkit-scrollbar-track {
+            background: #f1f5f9;
+            border-radius: 10px;
         }
 
-        /* Progress display */
-        .status-progress {
-            display: flex;
-            flex-direction: column;
-            gap: 0.3rem;
-            min-width: 120px;
+        .table-container::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 10px;
+            border: 2px solid #f1f5f9;
         }
 
-        .progress-bar-container {
-            width: 100%;
-            height: 6px;
-            background: rgba(0, 212, 255, 0.2);
-            border: 1px solid var(--accent);
-            overflow: hidden;
+        .dragging {
+            border-color: #16a34a !important;
+            background-color: #f0fdf4 !important;
         }
 
-        .progress-bar {
+        textarea {
+            background: rgba(255, 255, 255, 0.4);
+            border: 4px solid #2563eb;
+            border-radius: 15px 10px 12px 18px / 12px 18px 15px 10px;
+            outline: none;
+            resize: none;
+            font-family: 'Fredoka', sans-serif;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #1A1A1A;
+            width: 100%;
             height: 100%;
-            background: linear-gradient(90deg, var(--primary), var(--accent));
-            transition: width 0.3s ease;
-            animation: progressPulse 1.5s ease-in-out infinite;
-        }
-
-        @keyframes progressPulse {
-
-            0%,
-            100% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: 0.7;
-            }
-        }
-
-        .progress-text {
-            font-size: 0.7rem;
-            color: var(--accent);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .text-cell {
-            max-width: 300px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            min-height: 100px;
+            padding: 1rem;
+            filter: url('#crayon-texture');
+            transition: border-color 0.2s;
         }
 
-        .empty-state {
-            text-align: center;
-            padding: 4rem 2rem;
-            color: var(--accent);
-            font-size: 1.2rem;
+        textarea:focus {
+            border-color: #7c3aed;
+            background: #fff;
         }
 
-        .refresh-btn {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background: var(--secondary);
-            border: var(--border) solid var(--bg);
-            box-shadow: 4px 4px 0 var(--bg);
+        select,
+        input[type="number"] {
+            background: rgba(255, 255, 255, 0.4);
+            border: 4px solid #7c3aed;
+            border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px;
+            padding: 0.5rem 0.8rem;
+            font-family: 'Fredoka', sans-serif;
+            color: #1e1b4b;
+            filter: url('#crayon-texture');
+            outline: none;
+            appearance: none;
+            transition: all 0.2s;
             cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             font-size: 1.5rem;
-            z-index: 1000;
+            font-weight: 600;
         }
 
-        .refresh-btn:hover {
-            transform: rotate(180deg) scale(1.1);
-            box-shadow: 6px 6px 0 var(--bg);
+        /* --- Custom Dropdown --- */
+        .custom-dropdown {
+            position: relative;
+            width: 100%;
         }
 
-        /* Loader styles */
-        .loader-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(10, 14, 39, 0.95);
+        .dropdown-trigger {
             display: flex;
             align-items: center;
-            justify-content: center;
-            z-index: 9999;
-            animation: fadeIn 0.3s ease;
-        }
-
-        .loader {
-            width: 80px;
-            height: 80px;
-            border: 6px solid var(--surface);
-            border-top: 6px solid var(--primary);
-            border-right: 6px solid var(--accent);
-            border-bottom: 6px solid var(--secondary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
+            justify-content: space-between;
+            background: rgba(255, 255, 255, 0.4);
+            border: 4px solid #7c3aed;
+            border-radius: 12px 8px 15px 10px / 8px 14px 10px 12px;
+            padding: 0.5rem 0.8rem;
+            font-family: 'Fredoka', sans-serif;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #1e1b4b;
+            filter: url('#crayon-texture');
+            cursor: pointer;
+            transition: all 0.2s;
         }
 
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-
-            100% {
-                transform: rotate(360deg);
-            }
+        .dropdown-trigger:hover {
+            transform: scale(1.02) rotate(-0.5deg);
+            border-color: #2563eb;
         }
 
-        .loader-text {
+        .dropdown-popup {
             position: absolute;
-            margin-top: 120px;
-            font-size: 1.2rem;
-            font-weight: 900;
-            color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-
-            .input-section,
-            .table-wrapper {
-                box-shadow: 4px 4px 0 var(--primary);
-            }
-
-            th,
-            td {
-                padding: 1rem 0.5rem;
-                font-size: 0.9rem;
-            }
-
-            .text-cell {
-                max-width: 150px;
-            }
+            top: calc(100% + 8px);
+            left: 0;
+            width: 100%;
+            background: #fff;
+            border: 4px solid #7c3aed;
+            border-radius: 15px 25px 18px 22px / 22px 18px 25px 15px;
+            z-index: 150;
+            display: none;
+            flex-direction: column;
+            overflow-y: auto;
+            max-height: 200px;
+            box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1);
+            filter: url('#crayon-texture');
+            font-size: 1.5rem;
+            font-weight: 600;
         }
 
-        .notification {
-            position: fixed;
-            top: 2rem;
-            right: 2rem;
-            padding: 1.5rem 2rem;
-            background: var(--primary);
-            color: var(--bg);
-            border: var(--border) solid var(--bg);
-            box-shadow: 6px 6px 0 var(--bg);
-            font-weight: 900;
-            z-index: 2000;
-            animation: slideInRight 0.5s ease, slideOutRight 0.5s ease 3.5s;
+        .dropdown-popup::-webkit-scrollbar {
+            width: 8px;
         }
 
-        @keyframes slideInRight {
-            from {
-                transform: translateX(400px);
-                opacity: 0;
-            }
-
-            to {
-                transform: translateX(0);
-                opacity: 1;
-            }
+        .dropdown-popup::-webkit-scrollbar-track {
+            background: #f1f5f9;
         }
 
-        @keyframes slideOutRight {
-            to {
-                transform: translateX(400px);
-                opacity: 0;
-            }
+        .dropdown-popup::-webkit-scrollbar-thumb {
+            background: #adc6ff;
+            border-radius: 10px;
         }
 
-        /* Text Popup Modal */
-        .text-modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(10, 14, 39, 0.95);
+        .dropdown-popup.active {
             display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 9999;
-            animation: fadeIn 0.3s ease;
-            padding: 2rem;
         }
 
-        .text-modal {
-            background: var(--surface);
-            border: var(--border) solid var(--accent);
-            box-shadow: 8px 8px 0 var(--accent);
-            max-width: 800px;
-            width: 100%;
-            max-height: 80vh;
-            display: flex;
-            flex-direction: column;
-            animation: slideUp 0.3s ease;
+        .dropdown-group {
+            padding: 0.3rem 0.8rem;
+            background: #e6f0fd;
+            color: #7c3aed;
+            border-bottom: 2px dashed #adc6ff;
         }
 
-        .text-modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem 1.5rem;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            border-bottom: 3px solid var(--bg);
+        .dropdown-option {
+            padding: 0.8rem 1.2rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: 600;
+            border-bottom: 1px solid #f1f5f9;
         }
 
-        .text-modal-header h3 {
-            color: var(--bg);
-            font-weight: 900;
-            text-transform: uppercase;
-            letter-spacing: 1px;
+        .dropdown-option:last-child {
+            border-bottom: none;
         }
 
-        .text-modal-close {
-            background: var(--bg);
-            border: 2px solid var(--bg);
-            color: var(--primary);
-            width: 36px;
-            height: 36px;
-            font-size: 1.2rem;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
+        .dropdown-option:hover {
+            background: #f5f3ff;
+            color: #7c3aed;
+            padding-left: 1.5rem;
         }
 
-        .text-modal-close:hover {
-            background: var(--error);
-            color: var(--text);
+        .dropdown-option.selected {
+            background: #e6f0fd;
+            color: #2563eb;
         }
 
-        .text-modal-content {
-            padding: 1.5rem;
-            overflow-y: auto;
-            flex: 1;
+        audio {
+            width: 100%;
+            height: 50px;
+            border-radius: 12px;
+            filter: url('#crayon-texture');
         }
+    </style>
+</head>
 
-        .text-modal-content pre {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            font-family: inherit;
-            font-size: 1rem;
-            line-height: 1.6;
-            color: var(--text);
-            margin: 0;
-        }
+<body class="h-screen flex flex-col overflow-hidden relative">
+    <!-- Main Background Decorations -->
+    <div class="fixed inset-0 pointer-events-none overflow-hidden -z-10 opacity-40">
+        <!-- Stars -->
+        <span
+            class="material-symbols-outlined absolute text-5xl text-crayon-yellow top-20 left-[10%] rotate-12 crayon-heavy animate-pulse">star</span>
+        <span
+            class="material-symbols-outlined absolute text-3xl text-crayon-orange top-[40%] left-[5%] -rotate-12 crayon-filter">star</span>
+        <span
+            class="material-symbols-outlined absolute text-4xl text-crayon-yellow bottom-[20%] left-[15%] rotate-45 animate-pulse">star</span>
+        <span
+            class="material-symbols-outlined absolute text-6xl text-crayon-orange top-[15%] right-[15%] rotate-[-15deg] crayon-heavy">star</span>
+        <span
+            class="material-symbols-outlined absolute text-3xl text-crayon-yellow bottom-[30%] right-[10%] rotate-12 animate-pulse">star</span>
+
+        <!-- Clouds -->
+        <span
+            class="material-symbols-outlined absolute text-[120px] text-crayon-blue top-[10%] left-[25%] opacity-20 drift-slow">cloud</span>
+        <span
+            class="material-symbols-outlined absolute text-[80px] text-crayon-purple bottom-[15%] left-[40%] opacity-10 drift-medium">cloud</span>
+        <span
+            class="material-symbols-outlined absolute text-[100px] text-crayon-blue top-[60%] right-[25%] opacity-15 drift-slow">cloud</span>
+        <span
+            class="material-symbols-outlined absolute text-[150px] text-crayon-purple top-[30%] right-[5%] opacity-10 drift-medium">cloud</span>
+
+        <!-- Hearts -->
+        <span
+            class="material-symbols-outlined absolute text-4xl text-crayon-red top-[25%] left-[18%] rotate-[-15deg] crayon-filter animate-pulse">favorite</span>
+        <span
+            class="material-symbols-outlined absolute text-2xl text-crayon-red bottom-[10%] right-[20%] rotate-12 crayon-filter">favorite</span>
+        <span
+            class="material-symbols-outlined absolute text-5xl text-crayon-red top-[70%] left-[8%] rotate-[10deg] animate-pulse">favorite</span>
+    </div>
 
-        .text-modal-footer {
-            padding: 1rem 1.5rem;
-            border-top: 2px solid rgba(0, 212, 255, 0.2);
-            display: flex;
-            gap: 1rem;
-            justify-content: flex-end;
-        }
+    <!-- Header -->
+    <header
+        class="bg-surface flex justify-between items-center w-[calc(100%-48px)] mx-6 mt-6 px-8 py-5 crayon-border-green z-10 shrink-0 organic-shape shadow-sm">
+        <div class="flex items-center gap-5">
+            <div
+                class="bg-crayon-green text-white w-14 h-14 rounded-2xl flex items-center justify-center border-[3px] border-crayon-green rotate-[-4deg] crayon-filter scribble-fill-green shadow-md">
+                <span class="material-symbols-outlined text-4xl">record_voice_over</span>
+            </div>
+            <div class="flex flex-col -rotate-1">
+                <h1 class="text-headline-lg text-[#4c1d95] leading-none mb-1">TTS</h1>
+                <span class="text-label-sm text-[#4b5563] font-bold">Text-to-Speech</span>
+            </div>
+        </div>
 
-        .btn-view-text {
-            background: var(--accent);
-            padding: 0.4rem 0.8rem;
-            font-size: 0.8rem;
-            box-shadow: 2px 2px 0 var(--bg);
-        }
+        <div class="flex items-center gap-10 relative">
+            <div class="absolute -left-48 top-2 rotate-12 crayon-heavy">
+                <span class="material-symbols-outlined text-4xl text-crayon-yellow">star</span>
+            </div>
+            <div class="absolute -left-24 top-0 -rotate-6 crayon-heavy opacity-80">
+                <span class="material-symbols-outlined text-5xl text-crayon-blue">cloud</span>
+            </div>
+            <button id="apiDocBtn"
+                class="flex items-center gap-2 text-headline-md text-crayon-purple px-8 py-3 bg-surface crayon-button rotate-1 shadow-md">
+                <span class="material-symbols-outlined text-3xl">menu_book</span>
+                API DOC
+            </button>
+            <div
+                class="flex items-center gap-4 bg-surface px-6 py-3 rounded-full border-[4px] border-crayon-green organic-shape shadow-md">
+                <div id="healthDot" class="w-4 h-4 rounded-full bg-crayon-green shadow-[0_0_12px_rgba(22,163,74,0.5)]">
+                </div>
+                <span id="healthText" class="text-headline-md text-crayon-green text-2xl">Service Online</span>
+                <div class="text-crayon-orange flex items-center justify-center rotate-[15deg]">
+                    <span class="material-symbols-outlined text-4xl">light_mode</span>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex overflow-hidden p-8 gap-8 mx-auto w-full relative">
+        <!-- Input Section -->
+        <section class="w-[350px] flex flex-col gap-8">
+            <div
+                class="flex flex-col gap-4 p-6 bg-surface crayon-border-blue flex-1 relative organic-shape shadow-sm hover:shadow-md transition-shadow overflow-y-auto table-container">
+                <div class="flex items-center gap-4 mb-2 rotate-1">
+                    <div
+                        class="bg-crayon-blue text-white rounded-full w-12 h-12 flex items-center justify-center border-2 border-crayon-blue crayon-filter shadow-md">
+                        <span class="material-symbols-outlined text-3xl">edit_note</span>
+                    </div>
+                    <div>
+                        <h2 class="text-headline-md text-crayon-blue leading-none mb-1 flex items-center gap-2">
+                            INPUT
+                            <span class="material-symbols-outlined text-crayon-red text-xl rotate-12">favorite</span>
+                        </h2>
+                        <p class="text-label-sm text-[#6b7280]">Type or upload text</p>
+                    </div>
+                </div>
 
-        .btn-view-text:hover {
-            transform: translate(-1px, -1px);
-            box-shadow: 3px 3px 0 var(--bg);
-        }
+                <div class="flex-1 flex flex-col gap-4">
+                    <div class="flex-1 min-h-[120px]">
+                        <textarea id="textInput" placeholder="Enter text to speak..."></textarea>
+                    </div>
 
-        .text-cell-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
+                    <div class="flex flex-col gap-1">
+                        <label class="text-label-sm font-bold text-crayon-purple">VOICE</label>
+                        <div class="custom-dropdown" id="voiceDropdown">
+                            <div class="dropdown-trigger" id="voiceTrigger">
+                                <span id="selectedVoice">American Male</span>
+                                <span class="material-symbols-outlined">expand_more</span>
+                            </div>
+                            <div class="dropdown-popup" id="voicePopup">
+                                <div class="dropdown-group">Female</div>
+                                <div class="dropdown-option" data-value="1">Main</div>
+                                <div class="dropdown-option" data-value="2">Ellen</div>
+                                <div class="dropdown-option" data-value="5">Ellen (Young)</div>
+                                <div class="dropdown-option" data-value="9">British Woman</div>
+                                <div class="dropdown-option" data-value="11">Kelly (Story)</div>
+                                <div class="dropdown-option" data-value="14">News Female</div>
+                                <div class="dropdown-group">Male</div>
+                                <div class="dropdown-option" data-value="3">Kratos</div>
+                                <div class="dropdown-option selected" data-value="4">American Male</div>
+                                <div class="dropdown-option" data-value="6">Simple Guy</div>
+                                <div class="dropdown-option" data-value="8">BBC News</div>
+                                <div class="dropdown-option" data-value="10">David (News)</div>
+                                <div class="dropdown-option" data-value="12">Coach</div>
+                                <div class="dropdown-option" data-value="13">Motivational</div>
+                            </div>
+                        </div>
+                        <input type="hidden" id="voiceSelect" value="4">
+                    </div>
 
-        .text-cell-wrapper .text-preview {
-            max-width: 200px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    </style>
-</head>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-label-sm font-bold text-crayon-purple">SPEED</label>
+                        <input type="number" id="speedInput" value="1.0" step="0.1" min="0.5" max="2.0">
+                    </div>
 
-<body>
-    <div class="container">
-        <header>
-            <h1>TTS Generator</h1>
-            <p class="subtitle">Text • Process • Audio</p>
-        </header>
-
-        <div class="input-section">
-            <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Generate Audio</h2>
-
-            <textarea id="textInput" placeholder="Enter text to convert to speech..."></textarea>
-
-            <div class="controls">
-                <div class="control-group">
-                    <label>Voice</label>
-                    <select id="voiceSelect">
-                        <!-- Chatterbox Voice References (indices match base.py) -->
-                        <optgroup label="Female Voices">
-                            <option value="1">Main</option>
-                            <option value="2">Ellen</option>
-                            <option value="5">Ellen (Young)</option>
-                            <option value="9">English Woman</option>
-                            <option value="11">Kelly - Storytelling</option>
-                            <option value="14">Female News Reader</option>
-                        </optgroup>
-
-                        <optgroup label="Male Voices">
-                            <option value="3">Kratos</option>
-                            <option value="4" selected>American Male</option>
-                            <option value="6">Simple Guy</option>
-                            <option value="8">BBC News</option>
-                            <option value="10">David Castlemore - Newsreader</option>
-                            <option value="12">Motivational Coach</option>
-                            <option value="13">Sevan Bomar - Motivational</option>
-                        </optgroup>
-                    </select>
+                    <button id="generateBtn"
+                        class="crayon-button bg-crayon-blue text-white py-3 text-headline-md mt-2 flex items-center justify-center gap-2">
+                        <span class="material-symbols-outlined text-3xl">rocket_launch</span>
+                        GENERATE
+                    </button>
+
+                    <div class="text-center py-2">
+                        <span class="text-label-sm text-[#94a3b8] font-bold">OR</span>
+                        <div id="uploadZone"
+                            class="mt-2 py-3 border-[3px] border-dashed border-crayon-green rounded-xl cursor-pointer hover:bg-green-50 transition-colors">
+                            <p class="text-label-sm text-crayon-green font-bold flex items-center justify-center gap-2">
+                                <span class="material-symbols-outlined">upload_file</span>
+                                Upload .txt
+                            </p>
+                        </div>
+                    </div>
                 </div>
-                <div class="control-group">
-                    <label>Speed</label>
-                    <input type="number" id="speedInput" value="1.0" step="0.1" min="0.5" max="2.0">
+                <input type="file" id="fileInput" hidden accept=".txt,.md,.text">
+            </div>
+        </section>
+
+        <!-- Activity Section -->
+        <section
+            class="flex-1 flex flex-col bg-surface crayon-border-purple p-8 relative organic-shape overflow-hidden shadow-sm">
+            <div class="flex items-center justify-between mb-8">
+                <div class="flex items-center gap-4 rotate-1">
+                    <div
+                        class="bg-crayon-purple text-white rounded-full w-14 h-14 flex items-center justify-center border-[3px] border-crayon-purple shadow-md">
+                        <span class="material-symbols-outlined text-4xl">schedule</span>
+                    </div>
+                    <div>
+                        <h2 class="text-headline-lg text-[#4c1d95] leading-none mb-1">ACTIVITY</h2>
+                        <p class="text-label-sm text-[#6b7280] font-bold">Recent speech generations</p>
+                    </div>
                 </div>
+                <button onclick="loadTasks()"
+                    class="flex items-center gap-2 text-headline-md text-crayon-blue px-8 py-3 bg-surface crayon-button border-[4px] -rotate-1 shadow-md">
+                    <span class="material-symbols-outlined text-3xl spin-on-hover">sync</span>
+                    Refresh
+                </button>
             </div>
 
-            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
-                <button class="btn" id="generateBtn" style="flex: 1; min-width: 200px;">
-                    🚀 Generate Audio
-                </button>
-                <button class="btn btn-secondary" id="uploadBtn" style="flex: 1; min-width: 200px;">
-                    📁 Upload File
-                </button>
-                <input type="file" id="fileInput" accept=".txt,.md,.text" style="display: none;">
+            <!-- List Header -->
+            <div class="flex w-full px-6 pb-4 border-b-[5px] text-[#4c1d95] font-bold text-xl uppercase tracking-wider"
+                style="border-color: rgba(124, 58, 237, 0.4); border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px; filter: url(#crayon-texture);">
+                <div class="w-1/2">CONTENT</div>
+                <div class="w-1/6 text-center">STATUS</div>
+                <div class="w-1/4 text-center">PROGRESS</div>
+                <div class="w-[10%] text-center">ACTION</div>
             </div>
-        </div>
 
-        <div class="table-section">
-            <h2 style="margin-bottom: 1.5rem; color: var(--secondary);">Processing Queue</h2>
-            <div class="table-wrapper">
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Text</th>
-                            <th>Status</th>
-                            <th>Audio</th>
-                            <th>Created</th>
-                            <th>Processed</th>
-                        </tr>
-                    </thead>
-                    <tbody id="filesTable">
-                        <tr>
-                            <td colspan="5" class="empty-state">No tasks yet. Start by generating audio!
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+            <!-- Task List Body -->
+            <div id="queueBody" class="flex flex-col gap-5 mt-6 overflow-y-auto flex-1 table-container pr-4">
+                <div class="text-center py-32 text-headline-md text-[#94a3b8] font-bold opacity-60">No speech tasks
+                    found yet...</div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Modals -->
+    <!-- Result & API Modal -->
+    <div id="resultModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-sketch-bg"></div>
+
+            <!-- Decorations -->
+            <span
+                class="material-symbols-outlined modal-decoration text-6xl text-crayon-yellow top-4 left-4 -rotate-12">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-8xl text-crayon-blue top-12 right-20 opacity-20">cloud</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-4xl text-crayon-orange bottom-10 left-10 rotate-45">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-7xl text-crayon-purple bottom-4 right-4 -rotate-6 opacity-40">cloud</span>
+
+            <div class="modal-header">
+                <div class="flex items-center gap-6">
+                    <span id="modalTitle" class="text-headline-lg text-[#1e1b4b]">Result</span>
+                    <button id="copyBtn" onclick="copyResult()" class="copy-btn">📋 Copy</button>
+                    <a id="downloadBtn" href="#" download class="copy-btn bg-crayon-blue shadow-blue-800">⬇️ Download
+                        Audio</a>
+                </div>
+                <button class="close-modal" onclick="closeModal()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div id="audioContainer" class="mb-6 hidden">
+                    <audio id="audioPlayer" controls></audio>
+                </div>
+                <pre id="resultText"></pre>
             </div>
         </div>
     </div>
 
-    <button class="refresh-btn" id="refreshBtn" title="Refresh">🔄</button>
-
-    <!-- Loader -->
-    <div class="loader-overlay" id="loader" style="display: none;">
-        <div>
-            <div class="loader"></div>
-            <div class="loader-text">Queuing...</div>
+    <!-- Status Modal -->
+    <div id="statusModal" class="modal">
+        <div class="modal-content status-modal-content">
+            <div id="statusBg" class="status-modal-bg"></div>
+
+            <span
+                class="material-symbols-outlined modal-decoration text-4xl text-crayon-yellow top-6 right-6 rotate-12">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-6xl text-crayon-blue top-10 left-4 opacity-30">cloud</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-3xl text-crayon-orange bottom-8 right-10 -rotate-12">star</span>
+            <span
+                class="material-symbols-outlined modal-decoration text-5xl text-crayon-purple bottom-10 left-8 rotate-6 opacity-30">cloud</span>
+
+            <div id="statusIconContainer" class="status-icon-container text-crayon-blue">
+                <div class="status-icon-bg"></div>
+                <span id="statusIcon" class="material-symbols-outlined text-6xl animate-bounce">upload</span>
+            </div>
+            <h2 id="statusMessage" class="text-headline-lg text-crayon-blue mb-2">Processing...</h2>
+            <p id="statusSubMessage" class="text-body-lg text-[#4b5563]">Creating your audio task, please wait.</p>
         </div>
     </div>
 
+    <!-- Application Logic -->
     <script>
-        const API_URL = '/api';
-
-        // Elements
-        const textInput = document.getElementById('textInput');
-        const voiceSelect = document.getElementById('voiceSelect');
-        const speedInput = document.getElementById('speedInput');
-        const generateBtn = document.getElementById('generateBtn');
-        const uploadBtn = document.getElementById('uploadBtn');
-        const fileInput = document.getElementById('fileInput');
-        const loader = document.getElementById('loader');
-        const refreshBtn = document.getElementById('refreshBtn');
-
-        // Generate button
-        generateBtn.addEventListener('click', async () => {
-            const text = textInput.value.trim();
-            if (!text) {
-                showNotification('Please enter some text!', 'error');
-                return;
+        // --- Configuration ---
+        const API_BASE = '/api';
+
+        // --- DOM Elements ---
+        const UI = {
+            generateBtn: document.getElementById('generateBtn'),
+            uploadZone: document.getElementById('uploadZone'),
+            fileInput: document.getElementById('fileInput'),
+            textInput: document.getElementById('textInput'),
+            voiceSelect: document.getElementById('voiceSelect'),
+            voiceDropdown: document.getElementById('voiceDropdown'),
+            voiceTrigger: document.getElementById('voiceTrigger'),
+            voicePopup: document.getElementById('voicePopup'),
+            selectedVoice: document.getElementById('selectedVoice'),
+            speedInput: document.getElementById('speedInput'),
+            queueBody: document.getElementById('queueBody'),
+            resultModal: document.getElementById('resultModal'),
+            statusModal: document.getElementById('statusModal'),
+            resultText: document.getElementById('resultText'),
+            modalTitle: document.getElementById('modalTitle'),
+            copyBtn: document.getElementById('copyBtn'),
+            downloadBtn: document.getElementById('downloadBtn'),
+            audioContainer: document.getElementById('audioContainer'),
+            audioPlayer: document.getElementById('audioPlayer'),
+            statusMessage: document.getElementById('statusMessage'),
+            statusSubMessage: document.getElementById('statusSubMessage'),
+            statusIcon: document.getElementById('statusIcon'),
+            statusIconContainer: document.getElementById('statusIconContainer'),
+            statusBg: document.getElementById('statusBg'),
+            healthDot: document.getElementById('healthDot'),
+            healthText: document.getElementById('healthText'),
+            apiDocBtn: document.getElementById('apiDocBtn')
+        };
+
+        // --- Custom Dropdown Logic ---
+        UI.voiceTrigger.onclick = (e) => {
+            e.stopPropagation();
+            UI.voicePopup.classList.toggle('active');
+        };
+
+        document.querySelectorAll('.dropdown-option').forEach(option => {
+            option.onclick = (e) => {
+                const value = option.getAttribute('data-value');
+                const text = option.innerText;
+
+                UI.voiceSelect.value = value;
+                UI.selectedVoice.innerText = text;
+
+                document.querySelectorAll('.dropdown-option').forEach(opt => opt.classList.remove('selected'));
+                option.classList.add('selected');
+
+                UI.voicePopup.classList.remove('active');
+            };
+        });
+
+        window.onclick = () => {
+            UI.voicePopup.classList.remove('active');
+        };
+
+        // --- UI Helpers ---
+        function updateStatusModal(type, msg, subMsg) {
+            UI.statusMessage.innerText = msg;
+            UI.statusSubMessage.innerText = subMsg || "Processing your request, please wait.";
+            UI.statusIconContainer.className = "status-icon-container";
+            UI.statusIcon.className = "material-symbols-outlined text-6xl";
+            UI.statusBg.style.borderColor = "";
+
+            if (type === 'working') {
+                UI.statusIconContainer.classList.add('text-crayon-blue');
+                UI.statusIcon.innerText = "settings";
+                UI.statusIcon.classList.add('animate-spin');
+                UI.statusBg.style.borderColor = "#2563eb";
+            } else if (type === 'success') {
+                UI.statusIconContainer.classList.add('text-crayon-green');
+                UI.statusIcon.innerText = "check_circle";
+                UI.statusBg.style.borderColor = "#16a34a";
+            } else if (type === 'error') {
+                UI.statusIconContainer.classList.add('text-crayon-red');
+                UI.statusIcon.innerText = "error";
+                UI.statusBg.style.borderColor = "#dc2626";
             }
+        }
 
-            const voice = voiceSelect.value;
-            const speed = parseFloat(speedInput.value);
+        function closeModal() {
+            UI.resultModal.classList.remove('active');
+            UI.audioPlayer.pause();
+        }
 
-            // Show loader
-            loader.style.display = 'flex';
-            generateBtn.disabled = true;
+        function copyResult() {
+            const text = UI.resultText.innerText;
+            navigator.clipboard.writeText(text).then(() => {
+                const orig = UI.copyBtn.innerText;
+                UI.copyBtn.innerText = '✓ Copied!';
+                setTimeout(() => { UI.copyBtn.innerText = orig; }, 2000);
+            });
+        }
 
+        // --- API Functions ---
+        async function loadTasks() {
             try {
-                const response = await fetch(`${API_URL}/generate`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        text,
-                        voice,
-                        speed
-                    })
-                });
-
-                const data = await response.json();
-
-                if (response.ok) {
-                    showNotification('Task queued successfully! 🎉');
-                    textInput.value = '';
-                    loadFiles();
-                } else {
-                    showNotification(data.error || 'Generation failed', 'error');
-                }
-            } catch (error) {
-                showNotification('Network error: ' + error.message, 'error');
-            } finally {
-                // Hide loader
-                loader.style.display = 'none';
-                generateBtn.disabled = false;
+                const res = await fetch(`${API_BASE}/tasks`);
+                const data = await res.json();
+                renderQueue(data);
+            } catch (err) {
+                console.error("Load tasks error:", err);
             }
-        });
+        }
 
-        // Upload button - opens file picker
-        uploadBtn.addEventListener('click', () => {
-            fileInput.click();
-        });
+        async function handleGenerate() {
+            const text = UI.textInput.value.trim();
+            if (!text) return;
 
-        // File input change - fill textarea with file content
-        fileInput.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            if (!file) return;
+            UI.statusModal.classList.add('active');
+            updateStatusModal('working', "Queuing...", "Sending text to server...");
 
-            // Read file content
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                const text = event.target.result.trim();
+            const formData = new FormData();
+            formData.append('text', text);
+            formData.append('voice', UI.voiceSelect.value);
+            formData.append('speed', UI.speedInput.value);
 
-                if (!text) {
-                    showNotification('File is empty!', 'error');
-                    fileInput.value = '';
-                    return;
+            try {
+                const res = await fetch(`${API_BASE}/tasks/upload`, { method: 'POST', body: formData });
+                if (res.ok) {
+                    updateStatusModal('success', "Queued! ✨", "Task created and starting soon.");
+                    UI.textInput.value = '';
+                    setTimeout(() => {
+                        UI.statusModal.classList.remove('active');
+                        loadTasks();
+                    }, 1200);
+                } else {
+                    updateStatusModal('error', "Failed ❌", "Could not create task.");
+                    setTimeout(() => UI.statusModal.classList.remove('active'), 2000);
                 }
+            } catch (err) {
+                console.error("Upload error:", err);
+                updateStatusModal('error', "Error ⚠️", "Could not reach server.");
+                setTimeout(() => UI.statusModal.classList.remove('active'), 2000);
+            }
+        }
 
-                // Fill textarea with file content
-                textInput.value = text;
-                showNotification(`Loaded "${file.name}" - Ready to generate! 📄`);
-                fileInput.value = ''; // Reset for next upload
-            };
+        async function handleFile(file) {
+            if (!file) return;
 
-            reader.onerror = () => {
-                showNotification('Error reading file!', 'error');
-                fileInput.value = '';
-            };
+            UI.statusModal.classList.add('active');
+            updateStatusModal('working', "Uploading...", "Reading text file...");
 
-            reader.readAsText(file);
-        });
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('voice', UI.voiceSelect.value);
+            formData.append('speed', UI.speedInput.value);
 
-        // Load files
-        async function loadFiles() {
             try {
-                const response = await fetch(`${API_URL}/files`);
-                const files = await response.json();
-
-                // Store files data for popup access
-                filesData = files;
-
-                const tbody = document.getElementById('filesTable');
-
-                if (files.length === 0) {
-                    tbody.innerHTML = '<tr><td colspan="5" class="empty-state">No tasks yet. Start by generating audio!</td></tr>';
-                    return;
+                const res = await fetch(`${API_BASE}/tasks/upload`, { method: 'POST', body: formData });
+                if (res.ok) {
+                    updateStatusModal('success', "Uploaded! ✨", "Task created from file.");
+                    setTimeout(() => {
+                        UI.statusModal.classList.remove('active');
+                        loadTasks();
+                    }, 1200);
+                } else {
+                    updateStatusModal('error', "Failed ❌", "Invalid file or server error.");
+                    setTimeout(() => UI.statusModal.classList.remove('active'), 2000);
                 }
-
-                tbody.innerHTML = files.map((file, index) => {
-                    // Escape text for HTML attribute and display
-                    const escapedText = escapeHtml(file.text);
-                    const truncatedText = file.text.length > 50 ? file.text.substring(0, 50) + '...' : file.text;
-
-                    // Build status display with progress
-                    let statusDisplay = '';
-                    if (file.status === 'processing') {
-                        const progressPercent = file.progress || 0;
-                        const progressText = file.progress_text || 'Processing...';
-                        statusDisplay = `
-                            <div class="status-progress">
-                                <span class="status status-${file.status}">${progressPercent}%</span>
-                                <div class="progress-bar-container">
-                                    <div class="progress-bar" style="width: ${progressPercent}%"></div>
-                                </div>
-                                <span class="progress-text">${escapeHtml(progressText)}</span>
-                            </div>
-                        `;
-                    } else {
-                        statusDisplay = `<span class="status status-${file.status}">${file.status.replace('_', ' ')}</span>`;
-                    }
-
-                    return `
-                    <tr>
-                        <td>
-                            <div class="text-cell-wrapper">
-                                <span class="text-preview" title="${escapedText}">${escapeHtml(truncatedText)}</span>
-                                <button class="btn btn-small btn-view-text" onclick="showTextPopup(${index})">👁️ View</button>
-                            </div>
-                        </td>
-                        <td>${statusDisplay}</td>
-                        <td>
-                            ${file.status === 'completed' && file.output_file ?
-                            `<a href="${API_URL}/download/${file.id}" class="btn btn-small btn-secondary" target="_blank">⬇️</a>`
-                            : '—'}
-                        </td>
-                        <td>${new Date(file.created_at).toLocaleString()}</td>
-                        <td>${file.processed_at ? new Date(file.processed_at).toLocaleString() : '—'}</td>
-                    </tr>
-                `;
-                }).join('');
-            } catch (error) {
-                console.error('Error loading files:', error);
+            } catch (err) {
+                console.error("Upload error:", err);
+                updateStatusModal('error', "Error ⚠️", "Connection failed.");
+                setTimeout(() => UI.statusModal.classList.remove('active'), 2000);
             }
         }
 
-        // Refresh button
-        refreshBtn.addEventListener('click', () => {
-            loadFiles();
-            const icon = refreshBtn.textContent;
-            refreshBtn.textContent = '⏳';
-            setTimeout(() => refreshBtn.textContent = icon, 500);
-        });
+        async function showResult(id) {
+            try {
+                const res = await fetch(`${API_BASE}/tasks/${id}`);
+                const data = await res.json();
 
-        // Auto-refresh every 10 minutes
-        setInterval(loadFiles, 1000 * 60 * 10);
+                UI.modalTitle.innerText = "Speech Task Details";
+                UI.resultText.innerText = data.text || data.filename;
 
-        // Initial load
-        loadFiles();
+                UI.copyBtn.classList.remove('hidden');
 
-        // Notification system
-        function showNotification(message, type = 'success') {
-            const notification = document.createElement('div');
-            notification.className = 'notification';
-            if (type === 'error') {
-                notification.style.background = 'var(--error)';
-                notification.style.borderColor = 'var(--error)';
-            }
-            notification.textContent = message;
-            document.body.appendChild(notification);
+                if (data.status === 'completed') {
+                    UI.audioContainer.classList.remove('hidden');
+                    UI.downloadBtn.classList.remove('hidden');
+                    UI.audioPlayer.src = `${API_BASE}/download/${id}`;
+                    UI.downloadBtn.href = `${API_BASE}/download/${id}`;
+                } else {
+                    UI.audioContainer.classList.add('hidden');
+                    UI.downloadBtn.classList.add('hidden');
+                }
 
-            setTimeout(() => {
-                notification.remove();
-            }, 4000);
+                UI.resultModal.classList.add('active');
+            } catch (err) {
+                console.error("Show result error:", err);
+            }
         }
 
-        // Store files data for popup access
-        let filesData = [];
-
-        // Escape HTML to prevent XSS
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
+        async function checkHealth() {
+            try {
+                const res = await fetch('/health');
+                const data = await res.json();
+                const healthy = data.status === 'healthy';
+
+                UI.healthDot.className = `w-4 h-4 rounded-full ${healthy ? 'bg-crayon-green' : 'bg-crayon-red'} shadow-md`;
+                UI.healthText.innerText = healthy ? 'Service Online' : 'Service Down';
+                UI.healthText.className = `text-headline-md font-bold ${healthy ? 'text-crayon-green' : 'text-crayon-red'}`;
+            } catch (e) {
+                UI.healthDot.className = 'w-4 h-4 rounded-full bg-crayon-red shadow-md';
+                UI.healthText.innerText = 'Connection Error';
+                UI.healthText.className = 'text-headline-md font-bold text-crayon-red';
+            }
         }
 
-        // Show text popup
-        function showTextPopup(index) {
-            const file = filesData[index];
-            if (!file) return;
-
-            // Create modal overlay
-            const overlay = document.createElement('div');
-            overlay.className = 'text-modal-overlay';
-            overlay.onclick = (e) => {
-                if (e.target === overlay) overlay.remove();
-            };
+        // --- Renderers ---
+        function renderQueue(tasks) {
+            if (tasks.length === 0) {
+                UI.queueBody.innerHTML = '<div class="text-center py-32 text-headline-md text-[#94a3b8] font-bold opacity-60">No speech tasks found yet...</div>';
+                return;
+            }
 
-            // Create modal content
-            overlay.innerHTML = `
-                <div class="text-modal">
-                    <div class="text-modal-header">
-                        <h3>📝 Full Text</h3>
-                        <button class="text-modal-close" onclick="this.closest('.text-modal-overlay').remove()">✕</button>
-                    </div>
-                    <div class="text-modal-content">
-                        <pre>${escapeHtml(file.text)}</pre>
-                    </div>
-                    <div class="text-modal-footer">
-                        <button class="btn btn-small btn-secondary" onclick="copyTextToClipboard(${index})">📋 Copy Text</button>
-                        <button class="btn btn-small" onclick="this.closest('.text-modal-overlay').remove()">Close</button>
+            UI.queueBody.innerHTML = tasks.map((t, i) => {
+                const rotate = i % 2 === 0 ? 'rotate-[0.3deg]' : '-rotate-[0.3deg]';
+                const status = t.status.toLowerCase();
+                const colors = {
+                    completed: { text: 'crayon-green', bg: 'bg-[#f0fdf4]' },
+                    failed: { text: 'crayon-red', bg: 'bg-[#fef2f2]' },
+                    processing: { text: 'crayon-blue', bg: 'bg-[#eff6ff]' },
+                    pending: { text: 'crayon-purple', bg: 'bg-[#f5f3ff]' },
+                    not_started: { text: 'crayon-purple', bg: 'bg-[#f5f3ff]' }
+                };
+                const theme = colors[status] || colors.pending;
+                const snippet = t.filename || t.text || "Unnamed Task";
+
+                return `
+                    <div class="task-card flex items-center p-6 bg-surface hover:border-crayon-purple transition-colors shadow-sm ${rotate}">
+                        <div class="flex items-center gap-5 w-1/2">
+                            <div class="w-14 h-16 border-[3px] border-crayon-blue rounded-xl p-2 bg-surface flex shadow-sm organic-shape rotate-[-3deg] shrink-0">
+                                <div class="w-full h-full flex flex-col gap-1.5 p-0.5">
+                                    <div class="w-full h-1 bg-[#adc6ff] rounded-sm"></div>
+                                    <div class="w-full h-1 bg-[#adc6ff] rounded-sm"></div>
+                                    <div class="w-2/3 h-1 bg-[#adc6ff] rounded-sm"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col min-w-0">
+                                <span class="text-headline-md text-[#1A1A1A] leading-tight font-bold mb-1 truncate">${snippet}</span>
+                                <div class="text-label-sm text-[#94a3b8] font-bold">${t.id.substring(0, 12)}</div>
+                            </div>
+                        </div>
+                        <div class="w-1/6 flex justify-center">
+                            <div class="px-4 py-2 ${theme.bg} border-[3px] border-${theme.text} text-${theme.text} font-bold rounded-2xl uppercase tracking-tight crayon-filter text-sm">
+                                ${status.replace('_', ' ')}
+                            </div>
+                        </div>
+                        <div class="w-1/4 flex items-center justify-center gap-4">
+                            <div class="flex-1 h-5 border-[3px] border-[#adc6ff] rounded-full overflow-hidden bg-surface p-[1px] crayon-filter">
+                                <div class="h-full rounded-full progress-fill shadow-sm" style="width:${t.progress}%"></div>
+                            </div>
+                            <span class="text-headline-md text-xl text-[#1A1A1A] font-bold w-12 text-right">${status === 'completed' ? '' : t.progress + '%'}</span>
+                        </div>
+                        <div class="w-[10%] flex justify-center">
+                            <button onclick="showResult('${t.id}')" class="flex items-center gap-2 px-4 py-2 bg-white border-[3px] border-crayon-blue text-crayon-blue font-bold rounded-2xl hover:bg-crayon-blue hover:text-white transition-all shadow-sm crayon-filter text-sm">
+                                <span class="material-symbols-outlined text-xl">${status === 'completed' ? 'play_arrow' : 'visibility'}</span>
+                                ${status === 'completed' ? 'PLAY' : 'VIEW'}
+                            </button>
+                        </div>
                     </div>
-                </div>
-            `;
-
-            document.body.appendChild(overlay);
-
-            // Close on Escape key
-            const handleEscape = (e) => {
-                if (e.key === 'Escape') {
-                    overlay.remove();
-                    document.removeEventListener('keydown', handleEscape);
-                }
+                `;
+            }).join('');
+        }
+
+        // --- Event Listeners ---
+        UI.generateBtn.onclick = handleGenerate;
+        UI.uploadZone.onclick = () => UI.fileInput.click();
+        UI.uploadZone.ondragover = (e) => { e.preventDefault(); UI.uploadZone.classList.add('dragging'); };
+        UI.uploadZone.ondragleave = () => UI.uploadZone.classList.remove('dragging');
+        UI.uploadZone.ondrop = (e) => {
+            e.preventDefault();
+            UI.uploadZone.classList.remove('dragging');
+            handleFile(e.dataTransfer.files[0]);
+        };
+        UI.fileInput.onchange = (e) => handleFile(e.target.files[0]);
+        UI.apiDocBtn.onclick = () => {
+            const doc = {
+                base_url: window.location.origin,
+                endpoints: [
+                    { method: "POST", path: "/api/tasks/upload", desc: "Create TTS task", params: { text: "string", voice: "1-14", speed: "0.5-2.0" } },
+                    { method: "POST", path: "/api/tasks/upload", desc: "Create TTS task via file", params: { file: "UploadFile", voice: "1-14", speed: "0.5-2.0" } },
+                    { method: "GET", path: "/api/tasks", desc: "List all tasks" },
+                    { method: "GET", path: "/api/tasks/{task_id}", desc: "Get task details" },
+                    { method: "GET", path: "/api/download/{task_id}", desc: "Download audio file" },
+                    { method: "GET", path: "/health", desc: "Service health" }
+                ],
+                example_usage: `curl -X POST -F 'text=Hello world' -F 'voice=4' ${window.location.origin}/api/tasks/upload`
             };
-            document.addEventListener('keydown', handleEscape);
-        }
-
-        // Copy text to clipboard
-        function copyTextToClipboard(index) {
-            const file = filesData[index];
-            if (!file) return;
-
-            navigator.clipboard.writeText(file.text).then(() => {
-                showNotification('Text copied to clipboard! 📋');
-            }).catch((err) => {
-                console.error('Failed to copy:', err);
-                showNotification('Failed to copy text', 'error');
-            });
-        }
+            UI.resultText.innerText = JSON.stringify(doc, null, 2);
+            UI.modalTitle.innerText = "API Documentation";
+            UI.audioContainer.classList.add('hidden');
+            UI.downloadBtn.classList.add('hidden');
+            UI.copyBtn.classList.remove('hidden');
+            UI.resultModal.classList.add('active');
+        };
+
+        // --- Lifecycle ---
+        loadTasks();
+        setInterval(loadTasks, 5000);
+        setInterval(checkHealth, 10000);
     </script>
 </body>
 

pyproject.toml

@@ -0,0 +1,24 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "tts-runner-backend"
+version = "2.0.0"
+description = "FastAPI backend for TTS Runner"
+dependencies = [
+    "fastapi",
+    "uvicorn",
+    "aiosqlite",
+    "aiofiles",
+    "python-multipart",
+    "custom_logger @ git+https://github.com/jebin2/custom_logger.git",
+    "tts-runner[chatterbox] @ git+https://github.com/jebin2/TTS.git"
+]
+
+[project.scripts]
+tts-backend = "app.main:app"
+
+[tool.setuptools.packages.find]
+include = ["app*"]
+exclude = ["uploads*", "temp_dir*"]

requirements.txt

@@ -1,5 +0,0 @@
-Flask==3.0.0
-flask-cors==4.0.0
-werkzeug==3.0.1
-
-git+https://github.com/jebin2/TTS.git#egg=tts-runner[chatterbox]

run.py

@@ -0,0 +1,5 @@
+import uvicorn
+from app.core.config import settings
+
+if __name__ == "__main__":
+    uvicorn.run("app.main:app", host="0.0.0.0", port=settings.PORT, reload=False)

setup.py

@@ -1,77 +0,0 @@
-# setup.py
-import os
-from setuptools import setup, find_packages
-
-# Read README.md
-this_directory = os.path.abspath(os.path.dirname(__file__))
-with open(os.path.join(this_directory, 'README.md'), encoding='utf-8') as f:
-    long_description = f.read()
-
-# Base dependencies
-BASE_DEPS = [
-    'numpy',
-    'torch',
-    'pydub',
-    'sounddevice',
-    'python-dotenv',
-    # 'textual',       # From requirement_tui.txt
-    # 'pyperclip',     # From requirement_tui.txt
-    'scipy'          # Implicit dependency for wavfile reading in base
-]
-
-# Optional extras (engines)
-extras_require = {
-    "chatterbox": [
-        "chatterbox-tts",
-        "spacy",
-        "peft"
-    ],
-    "kitten": [
-        "kittentts",
-        "spacy"
-    ],
-    "kokoro": [
-        "kokoro>=0.9.4",
-        "soundfile"
-    ],
-}
-
-# All extras
-all_deps = []
-for deps in extras_require.values():
-    all_deps.extend(deps)
-extras_require["all"] = list(set(all_deps))
-
-setup(
-    name="tts-runner",
-    version="1.0.0",
-    author="Jebin Einstein",
-    author_email="jebin@gmail.com",
-    description="A flexible, multi-engine Text-to-Speech runner with TUI",
-    long_description=long_description,
-    long_description_content_type="text/markdown",
-    url="https://github.com/jebin2/TTS",
-
-    packages=find_packages(),
-    include_package_data=True,
-
-    install_requires=BASE_DEPS,
-    extras_require=extras_require,
-
-    entry_points={
-        "console_scripts": [
-            "tts-runner=tts_runner.runner:main",
-            "tts-tui=tts_runner.tui:main",
-        ],
-    },
-
-    classifiers=[
-        "Programming Language :: Python :: 3",
-        "License :: OSI Approved :: MIT License",
-        "Operating System :: OS Independent",
-        "Topic :: Multimedia :: Sound/Audio :: Speech",
-        "Topic :: Scientific/Engineering :: Artificial Intelligence",
-    ],
-
-    python_requires=">=3.10",
-)

tts_runner/base.py

@@ -42,8 +42,8 @@ class BaseTTS:
 			self.temp_output_dir.mkdir(parents=True, exist_ok=True)
 		
 		# Voice and speed configuration
-		self.default_voice_index = 8
-		self.default_speed = 0.8
+		self.default_voice_index = 4
+		self.default_speed = 1.0
 
 		self.voices = [
 			None,

tts_runner_backend.egg-info/PKG-INFO

@@ -0,0 +1,11 @@
+Metadata-Version: 2.4
+Name: tts-runner-backend
+Version: 2.0.0
+Summary: FastAPI backend for TTS Runner
+Requires-Dist: fastapi
+Requires-Dist: uvicorn
+Requires-Dist: aiosqlite
+Requires-Dist: aiofiles
+Requires-Dist: python-multipart
+Requires-Dist: custom_logger @ git+https://github.com/jebin2/custom_logger.git
+Requires-Dist: tts-runner[chatterbox] @ git+https://github.com/jebin2/TTS.git

tts_runner_backend.egg-info/SOURCES.txt

@@ -0,0 +1,14 @@
+README.md
+pyproject.toml
+app/main.py
+app/api/routes.py
+app/core/config.py
+app/db/crud.py
+app/db/database.py
+app/services/worker.py
+tts_runner_backend.egg-info/PKG-INFO
+tts_runner_backend.egg-info/SOURCES.txt
+tts_runner_backend.egg-info/dependency_links.txt
+tts_runner_backend.egg-info/entry_points.txt
+tts_runner_backend.egg-info/requires.txt
+tts_runner_backend.egg-info/top_level.txt

tts_runner_backend.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

tts_runner_backend.egg-info/entry_points.txt

@@ -0,0 +1,2 @@
+[console_scripts]
+tts-backend = app.main:app

tts_runner_backend.egg-info/requires.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+aiosqlite
+aiofiles
+python-multipart
+custom_logger @ git+https://github.com/jebin2/custom_logger.git
+tts-runner[chatterbox] @ git+https://github.com/jebin2/TTS.git

tts_runner_backend.egg-info/top_level.txt

@@ -0,0 +1 @@
+app

worker.py

@@ -1,138 +0,0 @@
-import sqlite3
-import time
-import os
-import subprocess
-import json
-import shlex
-from datetime import datetime
-
-CWD = "./"
-PYTHON_PATH = "stt-transcribe"
-STT_MODEL_NAME = "fasterwhispher"
-POLL_INTERVAL = 3  # seconds
-
-def process_audio(file_id, filepath):
-    """Process audio file using STT and return the transcription"""
-    try:
-        print(f"🔄 Running STT on: {os.path.abspath(filepath)}")
-        
-        # Run STT command
-        command = f"""cd {CWD} && {PYTHON_PATH} --input {shlex.quote(os.path.abspath(filepath))} --model {STT_MODEL_NAME}"""
-        
-        subprocess.run(
-            command,
-            shell=True,
-            executable="/bin/bash",
-            check=True,
-            cwd=CWD,
-            env={
-                **os.environ,
-                'PYTHONUNBUFFERED': '1',
-                'CUDA_LAUNCH_BLOCKING': '1',
-                'USE_CPU_IF_POSSIBLE': 'true'
-            }
-        )
-        
-        # Read transcription result
-        output_path = f'{CWD}/temp_dir/output_transcription.json'
-        with open(output_path, 'r') as file:
-            result = json.loads(file.read().strip())
-        
-        # Extract caption text (adjust based on your actual output format)
-        caption = result.get('text', '') or result.get('transcription', '') or str(result)
-        
-        return caption, None
-        
-    except Exception as e:
-        print(f"❌ Error processing file {file_id}: {str(e)}")
-        return None, str(e)
-
-def update_status(file_id, status, caption=None, error=None):
-    """Update the status of a file in the database"""
-    conn = sqlite3.connect('audio_captions.db')
-    c = conn.cursor()
-    
-    if status == 'completed':
-        c.execute('''UPDATE audio_files 
-                     SET status = ?, caption = ?, processed_at = ?
-                     WHERE id = ?''',
-                  (status, caption, datetime.now().isoformat(), file_id))
-    elif status == 'failed':
-        c.execute('''UPDATE audio_files 
-                     SET status = ?, caption = ?, processed_at = ?
-                     WHERE id = ?''',
-                  (status, f"Error: {error}", datetime.now().isoformat(), file_id))
-    else:
-        c.execute('UPDATE audio_files SET status = ? WHERE id = ?', (status, file_id))
-    
-    conn.commit()
-    conn.close()
-
-def worker_loop():
-    """Main worker loop that processes audio files"""
-    print("🤖 STT Worker started. Monitoring for new audio files...")
-    print("🗑️  Audio files will be deleted after successful processing\n")
-    
-    while True:
-        try:
-            # Get next unprocessed file
-            conn = sqlite3.connect('audio_captions.db')
-            conn.row_factory = sqlite3.Row
-            c = conn.cursor()
-            c.execute('''SELECT * FROM audio_files 
-                         WHERE status = 'not_started' 
-                         ORDER BY created_at ASC 
-                         LIMIT 1''')
-            row = c.fetchone()
-            conn.close()
-            
-            if row:
-                file_id = row['id']
-                filepath = row['filepath']
-                filename = row['filename']
-                
-                print(f"\n{'='*60}")
-                print(f"🎵 Processing: {filename}")
-                print(f"📝 ID: {file_id}")
-                print(f"{'='*60}")
-                
-                # Update status to processing
-                update_status(file_id, 'processing')
-                
-                # Process the audio file
-                caption, error = process_audio(file_id, filepath)
-                
-                if caption:
-                    print(f"✅ Successfully processed: {filename}")
-                    print(f"📄 Caption preview: {caption[:100]}...")
-                    update_status(file_id, 'completed', caption=caption)
-                    
-                    # Delete the audio file after successful processing
-                    if os.path.exists(filepath):
-                        os.remove(filepath)
-                        print(f"🗑️  Deleted audio file: {filepath}")
-                else:
-                    print(f"❌ Failed to process: {filename}")
-                    print(f"Error: {error}")
-                    update_status(file_id, 'failed', error=error)
-                    # Don't delete file on failure (for debugging)
-            else:
-                # No files to process, sleep for a bit
-                time.sleep(POLL_INTERVAL)
-                
-        except Exception as e:
-            print(f"⚠️  Worker error: {str(e)}")
-            time.sleep(POLL_INTERVAL)
-
-if __name__ == '__main__':
-    # Initialize database if it doesn't exist
-    if not os.path.exists('audio_captions.db'):
-        print("❌ Database not found. Please run app.py first to initialize.")
-    else:
-        print("\n" + "="*60)
-        print("🚀 Starting STT Worker (Standalone Mode)")
-        print("="*60)
-        print("⚠️  Note: Worker is now embedded in app.py")
-        print("⚠️  This standalone mode is for testing/debugging only")
-        print("="*60 + "\n")
-        worker_loop()