Upload folder using huggingface_hub

.gitignore

@@ -161,3 +161,4 @@ tmp/
 temp/
 outputs/
 *.pen
+uv_tree.txt

local_setup_guide.md

@@ -0,0 +1,48 @@
+# Hướng dẫn Chạy Local - UI-VieNeu Backend
+
+Tài liệu này ghi lại toàn bộ các bước để thiết lập và chạy dự án Video Subtitle & AI Voiceover ở môi trường máy tính cá nhân (Windows).
+
+## 1. Cài đặt Công cụ Quản lý (uv)
+Nếu máy bạn chưa có `uv`, hãy mở PowerShell và chạy lệnh sau:
+```powershell
+powershell -c "irm https://astral.sh/uv/install.ps1 | iex"
+```
+
+## 2. Thiết lập Môi trường và Thư viện
+Di chuyển vào thư mục dự án và cài bộ thư viện:
+```powershell
+# Cài đặt toàn bộ thư viện từ pyproject.toml vào thư mục .venv
+uv sync
+```
+
+## 3. Khởi động Máy chủ Redis (Memurai)
+Dự án cần Redis để làm "bưu điện" chuyển tin nhắn cho Celery.
+- **Bước 1:** Mở **VSCode bằng quyền Administrator**.
+- **Bước 2:** Chạy lệnh bật dịch vụ:
+```powershell
+Start-Service Memurai
+```
+*(Kiểm tra màu xanh trong RedisInsight để chắc chắn đã bật thành công)*
+
+## 4. Chạy Hệ thống (Cần mở 2 Terminal song song)
+
+### Terminal 1: Chạy Celery Worker (Xử lý AI & FFmpeg)
+Sử dụng `uv run` để đảm bảo dùng đúng thư viện trong môi trường ảo:
+```powershell
+uv run celery -A worker worker --loglevel=info -P solo
+```
+> **Lưu ý:** Tham số `-P solo` là bắt buộc để Celery có thể chạy được trên hệ điều hành Windows.
+
+### Terminal 2: Chạy FastAPI Server (Cổng kết nối API)
+```powershell
+uv run uvicorn main:app --reload
+```
+- API sẽ chạy tại: `http://127.0.0.1:8000`
+- Tài liệu API (Swagger UI): `http://127.0.0.1:8000/docs`
+
+---
+
+## Các lỗi thường gặp và cách xử lý
+1. **ModuleNotFoundError:** Hãy chắc chắn bạn luôn có chữ `uv run` ở đầu lệnh để nó nhận diện được thư viện trong `.venv`.
+2. **ConnectionError (Redis):** Kiểm tra xem Memurai đã được Start chưa.
+3. **Permission Denied:** Luôn chạy Terminal/VSCode với quyền Administrator khi can thiệp vào các Service như Memurai.

main.py

@@ -1,11 +1,20 @@
 import os
-from fastapi import FastAPI, UploadFile, File, Form
+from dotenv import load_dotenv
+load_dotenv(override=True)
+from fastapi import FastAPI, UploadFile, File, Form, Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 from pydantic import BaseModel
 from supabase import create_client, Client
-from worker import render_video_task
+from worker import render_video_task, generate_tts_task
 
 app = FastAPI(title="VieNeu Video AI processing API")
 
+# Mount thư mục tĩnh và giao diện HTML
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
 # Setup Supabase
 SUPABASE_URL = os.getenv("SUPABASE_URL", "https://your-project.supabase.co")
 SUPABASE_KEY = os.getenv("SUPABASE_SERVICE_ROLE_KEY", "your-service-key")
@@ -15,9 +24,13 @@ class RenderJobRequest(BaseModel):
     script_text: str
     voice_preset_id: str = "default"
 
-@app.get("/")
-def read_root():
-    return {"status": "online", "message": "Video Processing API is running."}
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse(request=request, name="index.html")
+
+@app.get("/tts", response_class=HTMLResponse)
+async def read_tts(request: Request):
+    return templates.TemplateResponse(request=request, name="tts.html")
 
 @app.post("/api/v1/jobs/submit")
 async def submit_job(
@@ -53,6 +66,35 @@ async def submit_job(
 
     return {"job_id": job_id, "status": "processing_queued"}
 
+@app.post("/api/v1/tts/generate")
+async def submit_tts_job(
+    script: str = Form(...),
+    temperature: float = Form(0.5),
+    voice_preset: str = Form("default"),
+    ref_audio: UploadFile = File(None)
+):
+    """
+    Submits a pure Text-To-Speech task to Celery.
+    """
+    ref_audio_path = None
+    if ref_audio:
+        ref_audio_bytes = await ref_audio.read()
+        ref_audio_path = f"references/{ref_audio.filename}"
+        supabase.storage.from_("content").upload(path=ref_audio_path, file=ref_audio_bytes)
+
+    # Note: Using generic "video_jobs" table to track TTS jobs as well to save setup time.
+    db_resp = supabase.table("video_jobs").insert({
+        "status": "pending",
+        "script": script,
+        "raw_video_path": "audio_only"
+    }).execute()
+    
+    job_id = db_resp.data[0]["id"] if db_resp.data else "unknown"
+    
+    generate_tts_task.delay(job_id, script, voice_preset, temperature, ref_audio_path)
+
+    return {"job_id": job_id, "status": "processing_queued"}
+
 @app.get("/api/v1/jobs/{job_id}")
 async def get_job_status(job_id: str):
     response = supabase.table("video_jobs").select("*").eq("id", job_id).execute()

pyproject.toml

@@ -9,7 +9,9 @@ dependencies = [
     "fastapi>=0.136.0",
     "faster-whisper>=1.2.1",
     "ffmpeg-python>=0.2.0",
+    "jinja2>=3.1.6",
     "pydantic>=2.13.2",
+    "python-dotenv>=1.2.2",
     "python-multipart>=0.0.26",
     "redis>=7.4.0",
     "supabase>=2.28.3",

services/ai_pipeline.py

@@ -67,6 +67,36 @@ def process_video_pipeline(tmpdir: str, video_file: str, script: str, ref_audio:
     
     return output_video
 
+def generate_tts_only(tmpdir: str, script: str, ref_audio: str = None, temperature: float = 0.5) -> str:
+    """
+    Standalone function to just generate TTS audio.
+    """
+    tts_audio_path = os.path.join(tmpdir, "tts_voiceover.wav")
+    
+    # Passing keyword arguments; if underlying model doesn't strictly accept temperature,
+    # python handles **kwargs flexibly if written cleanly in wrappers. 
+    # To avoid crashing, we'll try to pass it to `infer`. If Vieneu object restricts kwargs tightly,
+    # we can trap the type error and fallback to not using temperature.
+    
+    try:
+        if ref_audio:
+            my_voice = tts.encode_reference(ref_audio)
+            audio_array = tts.infer(text=script, voice=my_voice, temperature=temperature)
+        else:
+            # We assume default voices can be tuned with temperature
+            audio_array = tts.infer(text=script, temperature=temperature)
+    except TypeError:
+        # Fallback if Vieneu.infer doesn't support 'temperature'
+        print("Warning: Vieneu.infer doesn't support temperature. Ignoring it.")
+        if ref_audio:
+            my_voice = tts.encode_reference(ref_audio)
+            audio_array = tts.infer(text=script, voice=my_voice)
+        else:
+            audio_array = tts.infer(text=script)
+
+    tts.save(audio_array, tts_audio_path)
+    return tts_audio_path
+
 def generate_ass_file(words_data: list, dest_path: str):
     """
     Crafts an advanced SubStation Alpha file for Karaoke effects.

static/styles.css

@@ -0,0 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+body {
+    font-family: 'Inter', sans-serif;
+}
+
+.glass-panel {
+    background: rgba(31, 41, 55, 0.7);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.custom-bg {
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
+        radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.15) 0px, transparent 50%);
+    background-color: #0f172a;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1e293b;
+}
+::-webkit-scrollbar-thumb {
+    background: #475569;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
+}
+
+/* Spinner Animation */
+.spinner {
+    border: 3px solid rgba(255,255,255,0.1);
+    border-radius: 50%;
+    border-top: 3px solid #8b5cf6;
+    width: 24px;
+    height: 24px;
+    -webkit-animation: spin 1s linear infinite; /* Safari */
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

templates/index.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="vi" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI-VieNeu | AI Video Engine</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8b5cf6',
+                        secondary: '#ec4899'
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="/static/styles.css">
+    <!-- Feather Icons -->
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="text-slate-200 min-h-screen custom-bg selection:bg-primary selection:text-white">
+
+    <!-- Header -->
+    <header class="border-b border-slate-700/50 bg-slate-900/50 backdrop-blur-md sticky top-0 z-50">
+        <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-violet-600 to-fuchsia-600 flex items-center justify-center shadow-lg shadow-primary/20">
+                    <i data-feather="video" class="text-white w-5 h-5"></i>
+                </div>
+                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">
+                    UI-VieNeu <span class="font-normal text-sm text-primary ml-1">v1.0</span>
+                </h1>
+            </div>
+            <a href="/docs" target="_blank" class="text-sm text-slate-400 hover:text-white transition-colors flex items-center gap-2">
+                <i data-feather="code" class="w-4 h-4"></i> API Docs
+            </a>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="max-w-6xl mx-auto px-6 py-10 grid grid-cols-1 lg:grid-cols-12 gap-8">
+        
+        <!-- Left Column: Input Form -->
+        <div class="lg:col-span-5 space-y-6">
+            <div class="glass-panel rounded-2xl p-6 shadow-xl">
+                <h2 class="text-lg font-semibold mb-6 flex items-center gap-2 text-white">
+                    <i data-feather="edit-3" class="w-5 h-5 text-primary"></i> Create New Video
+                </h2>
+                
+                <form id="uploadForm" class="space-y-5">
+                    
+                    <!-- Video Upload -->
+                    <div>
+                        <label class="block text-sm font-medium text-slate-300 mb-2">Raw Video (Background)</label>
+                        <div class="relative group">
+                            <input type="file" id="videoFile" accept="video/mp4,video/x-m4v,video/*" required
+                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                            <div class="border-2 border-dashed border-slate-600 rounded-xl p-4 flex items-center justify-center gap-3 bg-slate-800/50 group-hover:bg-slate-800 transition-colors group-hover:border-primary/50">
+                                <i data-feather="upload-cloud" class="w-6 h-6 text-slate-400 group-hover:text-primary transition-colors"></i>
+                                <span id="videoFileName" class="text-sm text-slate-400">Select MP4 file...</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Voice Reference (Optional) -->
+                    <div>
+                        <label class="block text-sm font-medium text-slate-300 mb-2">Voice Reference Audio <span class="text-xs text-slate-500 font-normal">(Optional for cloning)</span></label>
+                        <div class="relative group">
+                            <input type="file" id="audioFile" accept="audio/*"
+                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                            <div class="border border-slate-700 rounded-xl p-3 flex items-center gap-3 bg-slate-800/30 group-hover:bg-slate-800/80 transition-colors">
+                                <i data-feather="mic" class="w-5 h-5 text-slate-500 group-hover:text-secondary transition-colors"></i>
+                                <span id="audioFileName" class="text-sm text-slate-500">Select audio file...</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Script Input -->
+                    <div>
+                        <label class="block text-sm font-medium text-slate-300 mb-2">Voiceover Script & Subtitles</label>
+                        <textarea id="scriptText" rows="6" required placeholder="Xin chào các bạn, hôm nay mình sẽ hướng dẫn..."
+                            class="w-full bg-slate-900/50 border border-slate-700 text-slate-200 rounded-xl p-4 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-slate-600 resize-none font-medium"></textarea>
+                    </div>
+
+                    <!-- Submit Button -->
+                    <button type="submit" id="submitBtn" class="w-full relative overflow-hidden group bg-white text-slate-900 font-semibold py-3.5 px-4 rounded-xl transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-white/10 flex items-center justify-center gap-2">
+                        <span class="z-10 flex items-center gap-2">
+                            <i data-feather="zap" class="w-5 h-5"></i> Generate Video
+                        </span>
+                        <div class="absolute inset-0 bg-gradient-to-r from-white to-slate-200 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    </button>
+                    
+                    <p id="formError" class="text-red-400 text-sm font-medium hidden mt-2 text-center"></p>
+
+                </form>
+            </div>
+        </div>
+
+        <!-- Right Column: Result & Tracker -->
+        <div class="lg:col-span-7">
+            <div class="glass-panel rounded-2xl h-full shadow-xl flex flex-col overflow-hidden relative">
+                
+                <!-- Status Bar -->
+                <div class="bg-slate-800/80 p-4 border-b border-slate-700 flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-3">
+                        <div id="statusDot" class="w-3 h-3 rounded-full bg-slate-600"></div>
+                        <span id="statusText" class="text-sm font-medium text-slate-300">Idle - Ready to render</span>
+                    </div>
+                    <div id="jobIdContainer" class="hidden">
+                        <span class="text-xs font-mono text-slate-500 bg-slate-900 px-2 py-1 rounded-md border border-slate-700" id="jobIdLabel"></span>
+                    </div>
+                </div>
+
+                <!-- Preview Area -->
+                <div class="flex-1 min-h-[400px] flex items-center justify-center p-6 bg-slate-900/30 relative">
+                    
+                    <!-- Empty State -->
+                    <div id="emptyState" class="text-center text-slate-500">
+                        <div class="w-20 h-20 mx-auto bg-slate-800 rounded-full flex items-center justify-center mb-4 border border-slate-700">
+                            <i data-feather="film" class="w-8 h-8 text-slate-600"></i>
+                        </div>
+                        <p class="font-medium">Your generated video will appear here</p>
+                    </div>
+
+                    <!-- Loading State -->
+                    <div id="loadingState" class="hidden flex-col items-center justify-center absolute inset-0 bg-slate-900/80 backdrop-blur-sm z-10 transition-all duration-300">
+                        <div class="spinner mb-4 border-t-primary"></div>
+                        <h3 class="font-semibold text-lg text-white mb-1">Rendering in progress...</h3>
+                        <p class="text-sm text-slate-400">This might take a while depending on server capacity.</p>
+                    </div>
+
+                    <!-- Result Output -->
+                    <div id="resultState" class="hidden w-full h-full flex flex-col items-center justify-center">
+                        <video id="resultVideo" controls class="max-w-full max-h-[500px] rounded-lg shadow-2xl border border-slate-700 bg-black"></video>
+                        <div class="mt-6 flex gap-4">
+                            <a id="downloadBtn" href="#" target="_blank" class="px-5 py-2 rounded-lg bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 transition-colors font-medium flex items-center gap-2">
+                                <i data-feather="download" class="w-4 h-4"></i> Download Result
+                            </a>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+    </main>
+
+    <script>
+        // Khởi tạo icons
+        feather.replace();
+
+        // Xử lý hiển thị tên file
+        document.getElementById('videoFile').addEventListener('change', function(e) {
+            const fileName = e.target.files[0] ? e.target.files[0].name : 'Select MP4 file...';
+            document.getElementById('videoFileName').textContent = fileName;
+            if(e.target.files[0]) document.getElementById('videoFileName').classList.remove('text-slate-400');
+            if(e.target.files[0]) document.getElementById('videoFileName').classList.add('text-white');
+        });
+
+        document.getElementById('audioFile').addEventListener('change', function(e) {
+            const fileName = e.target.files[0] ? e.target.files[0].name : 'Select audio file...';
+            document.getElementById('audioFileName').textContent = fileName;
+        });
+
+        // Xử lý Submit Form
+        const form = document.getElementById('uploadForm');
+        let pollInterval;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const submitBtn = document.getElementById('submitBtn');
+            const errorTxt = document.getElementById('formError');
+            errorTxt.classList.add('hidden');
+            
+            // Lấy dữ liệu
+            const videoFile = document.getElementById('videoFile').files[0];
+            const audioFile = document.getElementById('audioFile').files[0];
+            const scriptText = document.getElementById('scriptText').value;
+
+            // Đóng gói FormData
+            const formData = new FormData();
+            formData.append('script', scriptText);
+            formData.append('video', videoFile);
+            if (audioFile) formData.append('ref_audio', audioFile);
+
+            // Cập nhật UI loading Submit
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<div class="spinner w-5 h-5 border-2 border-slate-900 border-t-transparent"></div> Uploading...';
+            
+            // Ẩn states & Bật loading rendering
+            document.getElementById('emptyState').classList.add('hidden');
+            document.getElementById('resultState').classList.add('hidden');
+            document.getElementById('loadingState').classList.remove('hidden');
+            updateBadge('warning', 'Uploading files to server...');
+
+            try {
+                // Đẩy lên API
+                const response = await fetch('/api/v1/jobs/submit', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Upload failed! Check your Supabase configuration or try again (Error ${response.status})`);
+                }
+
+                const data = await response.json();
+                const jobId = data.job_id;
+                
+                // Hiển thị Job ID
+                document.getElementById('jobIdContainer').classList.remove('hidden');
+                document.getElementById('jobIdLabel').textContent = `ID: ${jobId}`;
+                
+                updateBadge('processing', 'In Queue - Polling status...');
+                
+                // Bắt đầu pollling check status định kỳ mỗi 3 giây
+                pollInterval = setInterval(() => checkJobStatus(jobId), 3000);
+
+            } catch (err) {
+                console.error(err);
+                errorTxt.textContent = err.message;
+                errorTxt.classList.remove('hidden');
+                document.getElementById('loadingState').classList.add('hidden');
+                document.getElementById('emptyState').classList.remove('hidden');
+                updateBadge('error', 'Error occurred');
+            } finally {
+                // Khôi phục nút
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = `
+                    <span class="z-10 flex items-center gap-2">
+                        <i data-feather="zap" class="w-5 h-5"></i> Generate Another
+                    </span>
+                    <div class="absolute inset-0 bg-gradient-to-r from-white to-slate-200 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                `;
+                feather.replace();
+            }
+        });
+
+        // Hàm kiểm tra trạng thái tiến trình
+        async function checkJobStatus(jobId) {
+            try {
+                const res = await fetch(`/api/v1/jobs/${jobId}`);
+                if (!res.ok) return;
+                
+                const jobData = await res.json();
+                
+                if (jobData.status === 'processing') {
+                    updateBadge('processing', 'Rendering Engine Running...');
+                } 
+                else if (jobData.status === 'completed') {
+                    clearInterval(pollInterval);
+                    updateBadge('success', 'Completed Successfully!');
+                    showResult(jobData.result_url);
+                }
+                else if (jobData.status === 'failed' || jobData.status === 'error') {
+                    clearInterval(pollInterval);
+                    updateBadge('error', `Failed: ${jobData.error || 'Unknown rendering error'}`);
+                    document.getElementById('loadingState').classList.add('hidden');
+                    document.getElementById('emptyState').classList.remove('hidden');
+                    alert("Render Task Failed! Check Celery Worker logs.");
+                }
+
+            } catch (e) {
+                console.error("Polling error", e);
+            }
+        }
+
+        // Cập nhật thẻ trạng thái (Trắng, Vàng, Xanh, Đỏ)
+        function updateBadge(state, text) {
+            const dot = document.getElementById('statusDot');
+            const txt = document.getElementById('statusText');
+            txt.textContent = text;
+            
+            // Reset class
+            dot.className = 'w-3 h-3 rounded-full';
+            
+            if (state === 'idle') dot.classList.add('bg-slate-600');
+            if (state === 'warning') dot.classList.add('bg-yellow-500', 'animate-pulse');
+            if (state === 'processing') dot.classList.add('bg-blue-500', 'animate-pulse', 'shadow-[0_0_10px_rgba(59,130,246,0.6)]');
+            if (state === 'success') dot.classList.add('bg-green-500', 'shadow-[0_0_10px_rgba(34,197,94,0.6)]');
+            if (state === 'error') dot.classList.add('bg-red-500');
+        }
+
+        // Hiện kết quả
+        function showResult(videoUrl) {
+            document.getElementById('loadingState').classList.add('hidden');
+            document.getElementById('resultState').classList.remove('hidden');
+            
+            const vid = document.getElementById('resultVideo');
+            vid.src = videoUrl;
+            vid.load();
+            
+            const btn = document.getElementById('downloadBtn');
+            btn.href = videoUrl;
+        }
+
+    </script>
+</body>
+</html>

templates/tts.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="vi" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voice Studio | VieNeu AI</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#8b5cf6',
+                        secondary: '#ec4899',
+                        dark: '#0f172a',
+                        card: 'rgba(30, 41, 59, 0.7)'
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="/static/styles.css">
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="text-slate-200 min-h-screen custom-bg selection:bg-primary selection:text-white font-inter">
+
+    <!-- Header -->
+    <header class="border-b border-slate-700/50 bg-slate-900/50 backdrop-blur-md sticky top-0 z-50">
+        <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-primary/20">
+                    <i data-feather="mic" class="text-white w-5 h-5"></i>
+                </div>
+                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">
+                    Voice Studio <span class="font-normal text-sm text-primary ml-1">v2-Turbo</span>
+                </h1>
+            </div>
+            <nav class="flex gap-4 text-sm font-medium">
+                <a href="/" class="text-slate-400 hover:text-white transition-colors">Video AI</a>
+                <a href="/tts" class="text-white border-b-2 border-primary pb-1">Text to Speech</a>
+            </nav>
+        </div>
+    </header>
+
+    <main class="max-w-6xl mx-auto px-6 py-10 grid grid-cols-1 lg:grid-cols-12 gap-8">
+        
+        <!-- Left Column: Controls (8 cols) -->
+        <div class="lg:col-span-8 space-y-6">
+            
+            <!-- Text Input -->
+            <div class="glass-panel rounded-2xl p-6 shadow-xl">
+                <h2 class="text-lg font-semibold mb-4 text-white flex items-center gap-2">
+                    <i data-feather="file-text" class="w-5 h-5 text-primary"></i> Nội dung kịch bản
+                </h2>
+                <textarea id="scriptText" rows="6" placeholder="Nhập văn bản Tiếng Việt hoặc Tiếng Anh vào đây..."
+                    class="w-full bg-slate-900/50 border border-slate-700 text-slate-200 rounded-xl p-4 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-slate-600 resize-none font-medium text-lg leading-relaxed"></textarea>
+            </div>
+
+            <!-- Voice Settings -->
+            <div class="glass-panel rounded-2xl p-6 shadow-xl">
+                
+                <!-- Custom Tabs -->
+                <div class="flex border-b border-slate-700 mb-6">
+                    <button id="tabPreset" class="px-6 py-3 text-sm font-semibold text-primary border-b-2 border-primary flex gap-2 items-center transition-colors">
+                        <i data-feather="users" class="w-4 h-4"></i> Giọng có sẵn
+                    </button>
+                    <button id="tabClone" class="px-6 py-3 text-sm font-semibold text-slate-400 hover:text-slate-200 flex gap-2 items-center transition-colors">
+                        <i data-feather="copy" class="w-4 h-4"></i> Clone Giọng
+                    </button>
+                </div>
+
+                <div id="presetContainer" class="space-y-6">
+                    <!-- Dropdown Select -->
+                    <div>
+                        <label class="block text-sm font-medium text-slate-300 mb-2">Chọn nhân vật</label>
+                        <div class="relative">
+                            <select id="voicePreset" class="w-full appearance-none bg-slate-900/50 border border-slate-700 text-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary outline-none cursor-pointer font-medium">
+                                <option value="bich_ngoc">Bích Ngọc (Nữ - Miền Bắc)</option>
+                                <option value="pham_tuyen">Phạm Tuyên (Nam - Miền Bắc)</option>
+                                <option value="thuc_doan">Thục Đoan (Nữ - Miền Nam)</option>
+                                <option value="xuan_vinh">Xuân Vĩnh (Nam - Miền Nam)</option>
+                            </select>
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-400">
+                                <i data-feather="chevron-down" class="w-4 h-4"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="cloneContainer" class="hidden space-y-6">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-300 mb-2">Upload file âm thanh giọng mẫu</label>
+                        <div class="relative group">
+                            <input type="file" id="cloneAudio" accept="audio/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                            <div class="border-2 border-dashed border-slate-600 rounded-xl p-6 flex flex-col items-center justify-center gap-3 bg-slate-800/50 group-hover:bg-slate-800 transition-colors group-hover:border-primary/50">
+                                <i data-feather="upload-cloud" class="w-8 h-8 text-slate-400 group-hover:text-primary transition-colors"></i>
+                                <span id="cloneFileName" class="text-sm font-medium text-slate-400">Trích xuất giọng từ file (.mp3, .wav)</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Advanced Settings: Temperature Slider -->
+                <div class="mt-8 pt-6 border-t border-slate-700/50">
+                    <div class="flex justify-between items-center mb-2">
+                        <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
+                            <i data-feather="thermometer" class="w-4 h-4 text-secondary"></i> Nhiệt độ (Temperature)
+                        </label>
+                        <span id="tempValue" class="text-xs font-mono bg-slate-800 px-2 py-1 rounded text-primary">0.5</span>
+                    </div>
+                    <input type="range" id="temperature" min="0.1" max="1.5" step="0.1" value="0.5" 
+                        class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary">
+                    <p class="text-xs text-slate-500 mt-2">Thấp = Khô khan chuẩn xác | Cao = Cảm xúc sáng tạo hơn.</p>
+                </div>
+            </div>
+
+            <!-- Submit Button -->
+            <button id="submitBtn" class="w-full relative overflow-hidden group bg-gradient-to-r from-primary to-blue-600 text-white font-bold py-4 px-4 rounded-xl shadow-[0_0_20px_rgba(139,92,246,0.3)] hover:shadow-[0_0_30px_rgba(139,92,246,0.5)] transition-all flex items-center justify-center gap-2">
+                <span class="z-10 flex items-center gap-2 text-lg">
+                    <i data-feather="zap" class="w-5 h-5"></i> Bắt đầu tổng hợp Audio
+                </span>
+            </button>            
+
+        </div>
+
+        <!-- Right Column: Result (4 cols) -->
+        <div class="lg:col-span-4">
+            <div class="glass-panel flex flex-col rounded-2xl h-full shadow-xl sticky top-24">
+                
+                <div class="p-6 border-b border-slate-700 flex items-center gap-2">
+                    <i data-feather="headphones" class="w-5 h-5 text-secondary"></i>
+                    <h3 class="font-semibold text-white">Audio Kết Quả</h3>
+                </div>
+
+                <div class="flex-1 p-6 flex flex-col items-center justify-center min-h-[300px] relative">
+                    
+                    <!-- Empty State -->
+                    <div id="emptyResult" class="text-center">
+                        <i data-feather="music" class="w-12 h-12 text-slate-700 mx-auto mb-4"></i>
+                        <p class="text-slate-500 text-sm font-medium">Bấm "Bắt đầu" để tạo âm thanh</p>
+                    </div>
+
+                    <!-- Loading State -->
+                    <div id="loadingResult" class="hidden flex-col items-center">
+                        <div class="spinner w-8 h-8 border-[3px] border-t-primary mb-4"></div>
+                        <p class="text-primary font-medium animate-pulse">Đang tổng hợp...</p>
+                        <p class="text-xs text-slate-500 mt-1">Sẽ mất vài giây để xử lý</p>
+                    </div>
+
+                    <!-- Audio Player Area -->
+                    <div id="audioResult" class="hidden w-full flex flex-col items-center space-y-6">
+                        <div class="w-20 h-20 bg-gradient-to-tr from-primary to-secondary rounded-full flex items-center justify-center shadow-[0_0_40px_rgba(236,72,153,0.3)] beep-anim">
+                            <i data-feather="play" class="w-8 h-8 text-white ml-1"></i>
+                        </div>
+                        <audio id="player" controls class="w-full"></audio>
+                        <a id="downloadBtn" href="#" download="vieneu_output.wav" class="text-sm font-medium text-slate-300 hover:text-white flex items-center gap-1 bg-slate-800 py-2 px-4 rounded-lg border border-slate-700 hover:border-slate-500 transition-colors">
+                            <i data-feather="download" class="w-4 h-4"></i> Tải file .wav
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <style>
+        .beep-anim {
+            animation: pulse-glow 2s infinite;
+        }
+        @keyframes pulse-glow {
+            0% { box-shadow: 0 0 0 0 rgba(236,72,153, 0.4); }
+            70% { box-shadow: 0 0 0 20px rgba(236,72,153, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(236,72,153, 0); }
+        }
+    </style>
+
+    <script>
+        feather.replace();
+
+        // Range Slider Value update
+        const tempSlider = document.getElementById('temperature');
+        const tempValue = document.getElementById('tempValue');
+        tempSlider.addEventListener('input', (e) => {
+            tempValue.textContent = parseFloat(e.target.value).toFixed(1);
+        });
+
+        // Tabs Logic
+        const tabPreset = document.getElementById('tabPreset');
+        const tabClone = document.getElementById('tabClone');
+        const presetContainer = document.getElementById('presetContainer');
+        const cloneContainer = document.getElementById('cloneContainer');
+        let isCloning = false;
+
+        tabPreset.addEventListener('click', () => {
+            isCloning = false;
+            tabPreset.className = "px-6 py-3 text-sm font-semibold text-primary border-b-2 border-primary flex gap-2 items-center transition-colors";
+            tabClone.className = "px-6 py-3 text-sm font-semibold text-slate-400 hover:text-slate-200 flex gap-2 items-center transition-colors border-b-2 border-transparent";
+            presetContainer.classList.remove('hidden');
+            cloneContainer.classList.add('hidden');
+        });
+
+        tabClone.addEventListener('click', () => {
+            isCloning = true;
+            tabClone.className = "px-6 py-3 text-sm font-semibold text-primary border-b-2 border-primary flex gap-2 items-center transition-colors";
+            tabPreset.className = "px-6 py-3 text-sm font-semibold text-slate-400 hover:text-slate-200 flex gap-2 items-center transition-colors border-b-2 border-transparent";
+            presetContainer.classList.add('hidden');
+            cloneContainer.classList.remove('hidden');
+        });
+
+        document.getElementById('cloneAudio').addEventListener('change', function(e) {
+            const fileName = e.target.files[0] ? e.target.files[0].name : 'Trích xuất giọng từ file (.mp3, .wav)';
+            document.getElementById('cloneFileName').textContent = fileName;
+        });
+
+        // Submit logic
+        const submitBtn = document.getElementById('submitBtn');
+        let pollInterval;
+
+        submitBtn.addEventListener('click', async () => {
+            const text = document.getElementById('scriptText').value;
+            if(!text.trim()) {
+                alert("Vui lòng nhập kịch bản cần đọc!");
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('script', text);
+            formData.append('temperature', parseFloat(tempSlider.value));
+            
+            if (isCloning) {
+                const cloneAudio = document.getElementById('cloneAudio').files[0];
+                if(cloneAudio) formData.append('ref_audio', cloneAudio);
+            } else {
+                formData.append('voice_preset', document.getElementById('voicePreset').value);
+            }
+
+            // Update UI
+            submitBtn.disabled = true;
+            submitBtn.classList.add('opacity-70');
+            document.getElementById('emptyResult').classList.add('hidden');
+            document.getElementById('audioResult').classList.add('hidden');
+            document.getElementById('loadingResult').classList.remove('hidden');
+            document.getElementById('loadingResult').classList.add('flex');
+
+            try {
+                const response = await fetch('/api/v1/tts/generate', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (!response.ok) throw new Error("Upload Failed");
+                
+                const data = await response.json();
+                const jobId = data.job_id;
+
+                pollInterval = setInterval(() => checkTtsJobStatus(jobId), 1500); // Check faster for TTS
+            } catch (err) {
+                alert("Error submitting request: " + err);
+                resetSubmitUI();
+            }
+        });
+
+        async function checkTtsJobStatus(jobId) {
+            try {
+                const res = await fetch(`/api/v1/jobs/${jobId}`);
+                if (!res.ok) return;
+                
+                const jobData = await res.json();
+                
+                if (jobData.status === 'completed') {
+                    clearInterval(pollInterval);
+                    showResult(jobData.result_url);
+                    resetSubmitUI();
+                } else if (jobData.status === 'failed' || jobData.status === 'error') {
+                    clearInterval(pollInterval);
+                    alert("Lỗi quá trình Render TTS!");
+                    resetSubmitUI();
+                }
+            } catch(e) {}
+        }
+
+        function showResult(audioUrl) {
+            document.getElementById('loadingResult').classList.add('hidden');
+            document.getElementById('loadingResult').classList.remove('flex');
+            document.getElementById('audioResult').classList.remove('hidden');
+            
+            const player = document.getElementById('player');
+            player.src = audioUrl;
+            player.play(); // Auto play when done!
+            
+            const btn = document.getElementById('downloadBtn');
+            btn.href = audioUrl;
+        }
+
+        function resetSubmitUI() {
+            submitBtn.disabled = false;
+            submitBtn.classList.remove('opacity-70');
+            if (document.getElementById('loadingResult').classList.contains('flex')) {
+                document.getElementById('loadingResult').classList.add('hidden');
+                document.getElementById('loadingResult').classList.remove('flex');
+                document.getElementById('emptyResult').classList.remove('hidden');
+            }
+        }
+
+    </script>
+</body>
+</html>

uv.lock

@@ -962,19 +962,14 @@ wheels = [
 [[package]]
 name = "llama-cpp-python"
 version = "0.3.16"
-source = { registry = "https://pnnbao97.github.io/llama-cpp-python-v0.3.16/cpu/" }
+source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "diskcache" },
     { name = "jinja2" },
     { name = "numpy" },
     { name = "typing-extensions" },
 ]
-wheels = [
-    { url = "https://github.com/pnnbao97/VieNeu-TTS/releases/download/wheels-v0.3.16/llama_cpp_python-0.3.16-cp311-cp311-win_amd64.whl" },
-    { url = "https://github.com/pnnbao97/VieNeu-TTS/releases/download/wheels-v0.3.16/llama_cpp_python-0.3.16-cp312-cp312-win_amd64.whl" },
-    { url = "https://github.com/pnnbao97/VieNeu-TTS/releases/download/wheels-v0.3.16/llama_cpp_python-0.3.16-cp313-cp313-win_amd64.whl" },
-    { url = "https://github.com/pnnbao97/VieNeu-TTS/releases/download/wheels-v0.3.16/llama_cpp_python-0.3.16-cp314-cp314-win_amd64.whl" },
-]
+sdist = { url = "https://files.pythonhosted.org/packages/e4/b4/c8cd17629ced0b9644a71d399a91145aedef109c0333443bef015e45b704/llama_cpp_python-0.3.16.tar.gz", hash = "sha256:34ed0f9bd9431af045bb63d9324ae620ad0536653740e9bb163a2e1fcb973be6", size = 50688636, upload-time = "2025-08-15T04:58:29.212Z" }
 
 [[package]]
 name = "llvmlite"
@@ -2209,6 +2204,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/ec/57/56b9bcc3c9c6a792fcbaf139543cee77261f3651ca9da0c93f5c1221264b/python_dateutil-2.9.0.post0-py2.py3-none-any.whl", hash = "sha256:a8b2bc7bffae282281c8140a97d3aa9c14da0b136dfe83f850eea9a5f7470427", size = 229892, upload-time = "2024-03-01T18:36:18.57Z" },
 ]
 
+[[package]]
+name = "python-dotenv"
+version = "1.2.2"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/82/ed/0301aeeac3e5353ef3d94b6ec08bbcabd04a72018415dcb29e588514bba8/python_dotenv-1.2.2.tar.gz", hash = "sha256:2c371a91fbd7ba082c2c1dc1f8bf89ca22564a087c2c287cd9b662adde799cf3", size = 50135, upload-time = "2026-03-01T16:00:26.196Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/0b/d7/1959b9648791274998a9c3526f6d0ec8fd2233e4d4acce81bbae76b44b2a/python_dotenv-1.2.2-py3-none-any.whl", hash = "sha256:1d8214789a24de455a8b8bd8ae6fe3c6b69a5e3d64aa8a8e5d68e694bbcb285a", size = 22101, upload-time = "2026-03-01T16:00:25.09Z" },
+]
+
 [[package]]
 name = "python-multipart"
 version = "0.0.26"
@@ -2836,7 +2840,9 @@ dependencies = [
     { name = "fastapi" },
     { name = "faster-whisper" },
     { name = "ffmpeg-python" },
+    { name = "jinja2" },
     { name = "pydantic" },
+    { name = "python-dotenv" },
     { name = "python-multipart" },
     { name = "redis" },
     { name = "supabase" },
@@ -2850,7 +2856,9 @@ requires-dist = [
     { name = "fastapi", specifier = ">=0.136.0" },
     { name = "faster-whisper", specifier = ">=1.2.1" },
     { name = "ffmpeg-python", specifier = ">=0.2.0" },
+    { name = "jinja2", specifier = ">=3.1.6" },
     { name = "pydantic", specifier = ">=2.13.2" },
+    { name = "python-dotenv", specifier = ">=1.2.2" },
     { name = "python-multipart", specifier = ">=0.0.26" },
     { name = "redis", specifier = ">=7.4.0" },
     { name = "supabase", specifier = ">=2.28.3" },

worker.py

@@ -1,7 +1,10 @@
 import os
+from dotenv import load_dotenv
+load_dotenv(override=True)
 from celery import Celery
 import tempfile
-from services.ai_pipeline import process_video_pipeline
+from services.ai_pipeline import process_video_pipeline, generate_tts_only
+from supabase import create_client, Client
 
 # Initialize Celery pointing to Redis
 celery_app = Celery(
@@ -47,3 +50,47 @@ def render_video_task(self, job_id: str, video_path: str, script: str, ref_audio
     except Exception as e:
         supabase.table("video_jobs").update({"status": "failed", "error": str(e)}).eq("id", job_id).execute()
         raise e
+
+@celery_app.task
+def generate_tts_task(job_id: str, script: str, voice: str, temperature: float, ref_audio_path: str = None):
+    # Setup Supabase client per worker
+    SUPABASE_URL = os.getenv("SUPABASE_URL")
+    SUPABASE_KEY = os.getenv("SUPABASE_SERVICE_ROLE_KEY")
+    supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
+    
+    supabase.table("video_jobs").update({"status": "processing"}).eq("id", job_id).execute()
+    
+    try:
+        with tempfile.TemporaryDirectory() as tmpdir:
+            # 1. Download ref audio if it exists
+            local_ref_path = None
+            if ref_audio_path:
+                local_ref_path = os.path.join(tmpdir, "input_ref.wav")
+                with open(local_ref_path, 'wb') as f:
+                    f.write(supabase.storage.from_("content").download(ref_audio_path))
+            
+            # 2. Run Pure TTS Engine
+            result_audio_local = generate_tts_only(tmpdir, script, local_ref_path, temperature)
+            
+            # 3. Upload Result Audio
+            final_audio_path = f"results/{job_id}.wav"
+            with open(result_audio_local, 'rb') as f:
+                supabase.storage.from_("content").upload(path=final_audio_path, file=f)
+            
+            public_url = supabase.storage.from_("content").get_public_url(final_audio_path)
+            
+            # 4. Mark job as complete
+            supabase.table("video_jobs").update({
+                "status": "completed",
+                "result_url": public_url
+            }).eq("id", job_id).execute()
+            
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        
+        supabase.table("video_jobs").update({
+            "status": "error",
+            "error": str(e)
+        }).eq("id", job_id).execute()
+        raise e