Initial VibeVoice Studio commit

.gitignore

@@ -0,0 +1,29 @@
+# Node packages
+node_modules/
+frontend/node_modules/
+frontend/dist/
+
+# Python caching
+__pycache__/
+*.py[cod]
+*$py.class
+.venv/
+env/
+venv/
+ENV/
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Audio artifacts and temporary caches
+static/temp/*
+static/cloned_voices/*
+!static/temp/.gitkeep
+!static/cloned_voices/.gitkeep
+combined_test.wav
+
+# Local environment / API keys
+.env
+.gemini/
+.git/

Dockerfile

@@ -0,0 +1,61 @@
+# ==========================================
+# Stage 1: Build the React + Vite Frontend
+# ==========================================
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+
+# Copy frontend source files
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+RUN npm run build
+
+# ==========================================
+# Stage 2: Build the FastAPI + PyTorch Backend
+# ==========================================
+FROM python:3.10-slim
+
+# Install system dependencies (libsndfile1 is required by soundfile, espeak for pyttsx3 Linux speech)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libsndfile1 \
+    espeak \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Create a non-root user with UID 1000 (Hugging Face Spaces requirement)
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONUNBUFFERED=1
+
+# Pre-create writable directories for audio caches and temp audio files
+RUN mkdir -p /app/static/temp && \
+    mkdir -p /home/user/.cache/huggingface && \
+    chown -R user:user /app /home/user
+
+# Switch to the non-root user
+USER user
+
+# Install CPU-only PyTorch first to keep the container extremely lightweight (~1.5GB instead of 5GB)
+RUN pip3 install --no-cache-dir --user torch torchaudio --index-url https://download.pytorch.org/whl/cpu
+
+# Copy backend requirements and install dependencies
+COPY --chown=user:user requirements.txt .
+RUN pip3 install --no-cache-dir --user -r requirements.txt
+
+# Copy FastAPI backend code and assets
+COPY --chown=user:user app.py .
+COPY --chown=user:user static/ static/
+
+# Copy the built React static bundles from Stage 1
+COPY --chown=user:user --from=frontend-builder /app/frontend/dist ./frontend/dist
+
+# Expose Hugging Face Space port
+EXPOSE 7860
+ENV PORT=7860
+
+# Start the FastAPI server dynamically binding to port 7860
+CMD ["python3", "app.py"]

app.py

@@ -0,0 +1,908 @@
+import os
+import sys
+import math
+import time
+import asyncio
+import threading
+import traceback
+import numpy as np
+import soundfile as sf
+import re
+import pyttsx3
+try:
+    import pythoncom
+except ImportError:
+    pythoncom = None
+import urllib.request
+import hashlib
+from typing import List, Optional
+
+import torch
+
+def parse_script_dialogue(script_text: str):
+    """
+    Parses script dialogue like:
+    Speaker 0: Hello there!
+    Speaker 1: Hi Sarah.
+    """
+    lines = []
+    current_speaker = 0
+    
+    pattern = re.compile(r'^(Speaker\s*(\d+)|([A-Za-z0-9_\s]+))\s*:\s*(.*)$', re.IGNORECASE)
+    
+    for line in script_text.strip().split('\n'):
+        line = line.strip()
+        if not line:
+            continue
+        
+        match = pattern.match(line)
+        if match:
+            if match.group(2) is not None:
+                speaker_id = int(match.group(2))
+            else:
+                name = match.group(3).strip().lower()
+                if 'sarah' in name or 'dialogue' in name or 'female' in name or 'partner' in name:
+                    speaker_id = 1
+                else:
+                    speaker_id = 0
+            text = match.group(4).strip()
+            lines.append((speaker_id, text))
+            current_speaker = speaker_id
+        else:
+            lines.append((current_speaker, line))
+            
+    return lines
+
+def sapi5_generate_wav(text: str, speaker_id: int, output_path: str):
+    """
+    Generate high-fidelity speech WAV file cross-platform.
+    Uses Microsoft SAPI5 natively on Windows, and eSpeak fallback on Linux/macOS.
+    """
+    use_com = (os.name == 'nt' and pythoncom is not None)
+    if use_com:
+        try:
+            pythoncom.CoInitialize()
+        except Exception as e:
+            print(f"[Speech-Engine] Warning: CoInitialize failed: {e}")
+            use_com = False
+            
+    try:
+        engine = pyttsx3.init()
+        voices = engine.getProperty('voices')
+        if len(voices) > 0:
+            voice_index = speaker_id % len(voices)
+            engine.setProperty('voice', voices[voice_index].id)
+        
+        engine.setProperty('rate', 155)  # Natural speech speed
+        engine.save_to_file(text, output_path)
+        engine.runAndWait()
+        time.sleep(0.1)  # Let the file output settle
+    except Exception as e:
+        print(f"[Speech-Engine] Warning: pyttsx3 generation failed ({e}). Generating robust silent fallback.")
+        # If pyttsx3 fails in a headless cloud container, write a safe silent WAV so the app keeps running
+        sr = 24000
+        duration = max(1.0, len(text.split()) * 0.35)
+        dummy = np.zeros(int(sr * duration))
+        sf.write(output_path, dummy, sr)
+    finally:
+        if use_com:
+            try:
+                pythoncom.CoUninitialize()
+            except:
+                pass
+
+def estimate_pitch_autocorrelation(audio_data, sr):
+    """
+    Estimate fundamental frequency F0 of mono audio data using a robust autocorrelation method.
+    Applies a low-pass filter to eliminate high-frequency noise/sibilants and restricts
+    the pitch search strictly to human conversational speech ranges (75Hz to 260Hz).
+    """
+    max_samples = min(len(audio_data), sr * 5)
+    signal = audio_data[:max_samples]
+    
+    # 1. Apply a rolling average low-pass filter to smooth out high-frequency noise
+    # (Window of 5 samples acts as a fast, zero-dependency low-pass filter at 24kHz)
+    if len(signal) > 5:
+        signal = np.convolve(signal, np.ones(5)/5.0, mode='same')
+        
+    signal = signal - np.mean(signal)
+    
+    # 2. Restrict human speech F0 lag parameters:
+    # Deep male base (75Hz) to high female base (260Hz)
+    min_lag = int(sr / 260)
+    max_lag = int(sr / 75)
+    
+    corr = np.correlate(signal, signal, mode='full')
+    corr = corr[len(corr)//2:]
+    
+    if len(corr) > max_lag:
+        # Find peak lag within conversational bounds
+        peak_lag = np.argmax(corr[min_lag:max_lag]) + min_lag
+        f0 = sr / peak_lag
+        
+        # Guard against zero lag or out of bound values
+        if 70.0 <= f0 <= 280.0:
+            return f0
+            
+    return 150.0  # Safe conversational default pitch
+
+def phase_vocoder_pitch_shift(audio, sr, shift_factor):
+    """
+    Shifts the pitch of an audio array by shift_factor using a phase vocoder
+    to keep duration/speed completely unchanged and avoid chipmunk artifacts.
+    """
+    if abs(shift_factor - 1.0) < 0.05:
+        return audio
+        
+    n_fft = 1024
+    hop_length = 256
+    pad_len = n_fft
+    padded_audio = np.pad(audio, pad_len, mode='reflect')
+    window = np.hanning(n_fft)
+    
+    frames = []
+    for i in range(0, len(audio) + pad_len, hop_length):
+        frame = padded_audio[i : i + n_fft]
+        if len(frame) < n_fft:
+            frame = np.pad(frame, (0, n_fft - len(frame)), mode='constant')
+        frames.append(frame * window)
+    
+    frames = np.array(frames)
+    stft = np.fft.rfft(frames, axis=-1)
+    
+    num_frames = len(stft)
+    new_num_frames = int(num_frames / shift_factor)
+    
+    time_steps = np.linspace(0, num_frames - 1, new_num_frames)
+    new_stft = np.zeros((new_num_frames, stft.shape[1]), dtype=np.complex64)
+    
+    phase_acc = np.angle(stft[0])
+    new_stft[0] = stft[0]
+    omega = 2 * np.pi * hop_length * np.arange(stft.shape[1]) / n_fft
+    
+    for i in range(1, new_num_frames):
+        t = time_steps[i]
+        t_floor = int(np.floor(t))
+        t_ceil = min(t_floor + 1, num_frames - 1)
+        alpha = t - t_floor
+        
+        mag = (1 - alpha) * np.abs(stft[t_floor]) + alpha * np.abs(stft[t_ceil])
+        phase_diff = np.angle(stft[t_ceil]) - np.angle(stft[t_floor])
+        phase_diff_corrected = phase_diff - omega
+        phase_diff_corrected = np.mod(phase_diff_corrected + np.pi, 2 * np.pi) - np.pi
+        phase_acc += omega + phase_diff_corrected
+        new_stft[i] = mag * np.exp(1j * phase_acc)
+        
+    stretched_len = (new_num_frames - 1) * hop_length + n_fft
+    stretched_audio = np.zeros(stretched_len)
+    window_sum = np.zeros(stretched_len)
+    
+    for i in range(new_num_frames):
+        frame = np.fft.irfft(new_stft[i])
+        idx = i * hop_length
+        if idx + n_fft <= stretched_len:
+            stretched_audio[idx : idx + n_fft] += frame * window
+            window_sum[idx : idx + n_fft] += window ** 2
+        
+    window_sum[window_sum < 1e-4] = 1.0
+    stretched_audio /= window_sum
+    
+    trim_start = n_fft // 2
+    trim_end = len(stretched_audio) - (n_fft // 2)
+    if trim_start < trim_end:
+        stretched_audio = stretched_audio[trim_start : trim_end]
+    
+    target_len = len(audio)
+    resampled_audio = np.interp(
+        np.linspace(0, len(stretched_audio) - 1, target_len),
+        np.arange(len(stretched_audio)),
+        stretched_audio
+    )
+    
+    return resampled_audio
+
+def clone_voice_dsp(sapi5_wav_path: str, user_voice_path: str, output_path: str):
+    """
+    Analyzes the user's uploaded voice profile, extracts its characteristic pitch (F0),
+    and modulates/pitch-shifts the high-fidelity SAPI5 speech audio to clone the user's voice pitch.
+    """
+    try:
+        if not os.path.exists(user_voice_path) or os.path.getsize(user_voice_path) < 100:
+            return False
+            
+        user_audio, user_sr = sf.read(user_voice_path)
+        if len(user_audio.shape) > 1:
+            user_audio = user_audio.mean(axis=1)
+        user_f0 = estimate_pitch_autocorrelation(user_audio, user_sr)
+        
+        sapi5_audio, sapi5_sr = sf.read(sapi5_wav_path)
+        if len(sapi5_audio.shape) > 1:
+            sapi5_audio = sapi5_audio.mean(axis=1)
+        sapi5_f0 = estimate_pitch_autocorrelation(sapi5_audio, sapi5_sr)
+        
+        print(f"[VoiceCloning-DSP] User pitch F0: {user_f0:.1f}Hz | SAPI5 pitch F0: {sapi5_f0:.1f}Hz")
+        
+        # Calculate optimal pitch shift
+        shift_factor = user_f0 / sapi5_f0
+        
+        # Cap the shift factor tightly to human conversational bounds
+        # (This prevents squeaky robotic cat formant warping!)
+        shift_factor = max(0.80, min(shift_factor, 1.35))
+        
+        print(f"[VoiceCloning-DSP] Modulating synthesis pitch by shift factor: {shift_factor:.3f}")
+        cloned_audio = phase_vocoder_pitch_shift(sapi5_audio, sapi5_sr, shift_factor)
+        
+        max_val = np.max(np.abs(cloned_audio))
+        if max_val > 0:
+            cloned_audio = cloned_audio / max_val * 0.8
+            
+        sf.write(output_path, cloned_audio, sapi5_sr)
+        return True
+    except Exception as ex:
+        print(f"[VoiceCloning-DSP] Error during cloning: {ex}")
+        traceback.print_exc()
+        return False
+
+def download_remote_voice(url: str) -> str:
+    """Helper to download Supabase/HTTP voice urls to a temp local file."""
+    if not url or not url.startswith("http"):
+        return url
+    
+    url_hash = hashlib.md5(url.encode()).hexdigest()
+    local_path = os.path.join("static/temp", f"dl_{url_hash}.wav")
+    
+    if os.path.exists(local_path):
+        return local_path 
+        
+    try:
+        print(f"[VibeVoice] Downloading remote voice profile from {url}...")
+        urllib.request.urlretrieve(url, local_path)
+        return local_path
+    except Exception as e:
+        print(f"[VibeVoice] Error downloading remote voice: {e}")
+        return url 
+
+def get_speaker_voices_list(text_script: str, voice_sample_path: Optional[str], speaker_voices: dict):
+    """
+    Parses speaker IDs from the text script and maps each speaker index to its respective downloaded voice sample path.
+    Falls back to the primary voice sample if no speaker-specific profile is uploaded.
+    """
+    dialogue_lines = parse_script_dialogue(text_script)
+    present_speakers = list(set(spk_id for spk_id, _ in dialogue_lines))
+    if not present_speakers:
+        present_speakers = [0]
+    max_spk = max(present_speakers)
+    
+    voice_samples_list = []
+    for spk_idx in range(max_spk + 1):
+        path = speaker_voices.get(str(spk_idx)) or speaker_voices.get(spk_idx)
+        if not path or not os.path.exists(path):
+            path = voice_sample_path
+        if not path or not os.path.exists(path):
+            # Safe boundary fallback using existing audio
+            path = "combined_test.wav"
+        voice_samples_list.append(path)
+    return voice_samples_list
+
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, UploadFile, File, Form, HTTPException
+from fastapi.responses import FileResponse, JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+
+# Initialize FastAPI App
+app = FastAPI(
+    title="VibeVoice Agent Platform",
+    description="Full-stack real-time voice synthesis and agent cloning interface utilizing Microsoft VibeVoice.",
+    version="1.0.0"
+)
+
+# Enable CORS for direct local frontend connections
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# Global Configuration
+USE_REAL_MODEL = True  # Set to True to load actual VibeVoice weights from Hugging Face
+MODEL_ID = "microsoft/VibeVoice-Realtime-0.5B"
+SAMPLING_RATE = 24000  # VibeVoice standard sampling rate
+
+# Global references for the real VibeVoice model
+processor = None
+model = None
+model_loading = False
+model_error = None
+
+def get_model():
+    """
+    Load the real VibeVoice models in a thread-safe way.
+    Uses CPU optimization and float32 since CUDA is not available.
+    """
+    global processor, model, model_loading, model_error
+    if USE_REAL_MODEL and model is None and not model_loading:
+        model_loading = True
+        try:
+            # Set optimal thread count to prevent resource contention and logical core thrashing
+            torch.set_num_threads(4)
+            
+            print(f"[VibeVoice] Loading model '{MODEL_ID}' on CPU... This may take a while on first run.", flush=True)
+            from vibevoice.processor.vibevoice_processor import VibeVoiceProcessor
+            from vibevoice.modular.modeling_vibevoice_inference import VibeVoiceForConditionalGenerationInference
+            
+            processor = VibeVoiceProcessor.from_pretrained(MODEL_ID)
+            model = VibeVoiceForConditionalGenerationInference.from_pretrained(
+                MODEL_ID,
+                torch_dtype=torch.float32,
+                device_map="cpu",
+                attn_implementation="eager"
+            )
+            print("[VibeVoice] Model loaded successfully!", flush=True)
+            
+            # Initialize speech scaling and bias buffers if they are NaN
+            if torch.isnan(model.model.speech_scaling_factor) or torch.isnan(model.model.speech_bias_factor):
+                model.model.speech_scaling_factor.copy_(torch.tensor(1.0))
+                model.model.speech_bias_factor.copy_(torch.tensor(0.0))
+                print("[VibeVoice] Initialized scaling factor buffers to default 1.0 and 0.0.", flush=True)
+                
+            model_loading = False
+            model_error = None
+        except Exception as e:
+            model_error = str(e)
+            model_loading = False
+            print(f"[VibeVoice] ERROR loading model: {e}", file=sys.stderr, flush=True)
+            traceback.print_exc()
+    return processor, model
+
+# Create static directory and temp outputs folder if they don't exist
+os.makedirs("static", exist_ok=True)
+os.makedirs("static/temp", exist_ok=True)
+os.makedirs("static/cloned_voices", exist_ok=True)
+
+class GenerateRequest(BaseModel):
+    text: str
+    voice_sample_path: Optional[str] = None
+    speaker_id: Optional[int] = 0
+    speaker_voices: Optional[dict] = None
+
+
+@app.get("/api/status")
+async def get_status():
+    """Returns the current state of the VibeVoice model loading."""
+    global model, model_loading, model_error
+    
+    # Trigger load in background if setting is active
+    if USE_REAL_MODEL and model is None and not model_loading:
+        threading.Thread(target=get_model, daemon=True).start()
+
+    return {
+        "use_real_model": USE_REAL_MODEL,
+        "model_id": MODEL_ID,
+        "loaded": model is not None,
+        "loading": model_loading,
+        "error": model_error,
+        "device": "CPU"
+    }
+
+@app.post("/api/toggle-model")
+async def toggle_model(enable: bool = True):
+    """Force enable real AI model execution as requested by the user."""
+    global USE_REAL_MODEL
+    USE_REAL_MODEL = True
+    threading.Thread(target=get_model, daemon=True).start()
+    return {
+        "status": "success",
+        "use_real_model": True,
+        "message": "Real VibeVoice model mode is locked to ENABLED."
+    }
+
+@app.post("/api/upload-voice")
+async def upload_voice(file: UploadFile = File(...), speaker_name: str = Form("Cloned Voice")):
+    """Uploads a voice reference file (WAV/MP3) for zero-shot speaker cloning."""
+    try:
+        filename = f"cloned_{int(time.time())}_{file.filename}"
+        save_path = os.path.join("static/cloned_voices", filename)
+        
+        with open(save_path, "wb") as buffer:
+            content = await file.read()
+            buffer.write(content)
+            
+        return {
+            "status": "success",
+            "voice_path": save_path,
+            "filename": filename,
+            "speaker_name": speaker_name,
+            "message": "Voice profile uploaded and prepared successfully!"
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to upload voice: {str(e)}")
+
+@app.delete("/api/delete-voice/{filename}")
+async def delete_voice(filename: str):
+    """Deletes a voice reference file from local server storage."""
+    try:
+        # Prevent directory traversal attacks
+        safe_name = os.path.basename(filename)
+        save_path = os.path.join("static/cloned_voices", safe_name)
+        if os.path.exists(save_path):
+            os.remove(save_path)
+            return {
+                "status": "success",
+                "message": f"Successfully deleted voice profile file '{safe_name}'"
+            }
+        return {
+            "status": "error",
+            "message": f"File '{safe_name}' not found."
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to delete voice: {str(e)}")
+
+@app.post("/api/generate")
+async def generate_speech(req: GenerateRequest):
+    """
+    Generates a full audio script using VibeVoice.
+    Supports multi-speaker formatting (Speaker 0: Text, Speaker 1: Text).
+    """
+    try:
+        # Standardize script format
+        text_script = req.text
+        if ":" not in text_script and "Speaker" not in text_script:
+            text_script = f"Speaker {req.speaker_id}: {text_script}"
+            
+        # Resolve remote URLs to local paths if needed
+        voice_sample_path = download_remote_voice(req.voice_sample_path)
+        speaker_id = req.speaker_id
+        
+        speaker_voices = req.speaker_voices or {}
+        for k, v in speaker_voices.items():
+            speaker_voices[k] = download_remote_voice(v)
+            
+        output_filename = f"output_{int(time.time())}.wav"
+        output_path = os.path.join("static/temp", output_filename)
+        
+        # Real AI Model Inference Path
+        if USE_REAL_MODEL:
+            proc, loaded_model = get_model()
+            if loaded_model is None:
+                raise HTTPException(
+                    status_code=503, 
+                    detail="VibeVoice AI Model is currently loading or failed to load. Please try again or switch to Demo Mode."
+                )
+            
+            # Load reference voices for all active speakers in order
+            voice_samples = get_speaker_voices_list(text_script, voice_sample_path, speaker_voices)
+                
+            inputs = proc(text=text_script, voice_samples=voice_samples, return_tensors="pt")
+            
+            print(f"[VibeVoice] Generating speech script: {text_script}")
+            with torch.no_grad():
+                outputs = loaded_model.generate(
+                    **inputs,
+                    tokenizer=proc.tokenizer,
+                    max_new_tokens=1000,
+                    do_sample=True,
+                    cfg_scale=1.0
+                )
+                
+            # Save generated audio
+            if outputs.speech_outputs and outputs.speech_outputs[0] is not None:
+                audio_tensor = outputs.speech_outputs[0]
+                proc.save_audio(audio_tensor, output_path=output_path, sampling_rate=SAMPLING_RATE)
+            else:
+                raise Exception("Generation succeeded but no audio output was generated.")
+                
+        # High-Fidelity Demo/Simulated Mode Path (Runs instantly on CPU without GPU)
+        else:
+            print(f"[Demo] Compiling high-fidelity speech script: {text_script}")
+            try:
+                # 1. Parse dialogue into lines and speaker ids
+                dialogue_lines = parse_script_dialogue(text_script)
+                
+                temp_files = []
+                concatenated_audio = []
+                last_sr = SAMPLING_RATE
+                
+                # 2. Synthesize each line using local SAPI5 voices
+                for i, (spk_id, line_text) in enumerate(dialogue_lines):
+                    # Check if custom voice profile path exists for this speaker ID
+                    custom_voice = None
+                    if speaker_voices:
+                        custom_voice = speaker_voices.get(str(spk_id)) or speaker_voices.get(spk_id)
+                    if not custom_voice and spk_id == 0:
+                        custom_voice = voice_sample_path
+                        
+                    temp_file = os.path.join("static/temp", f"temp_dialog_part_{int(time.time())}_{i}.wav")
+                    sapi5_generate_wav(line_text, spk_id, temp_file)
+                    
+                    # Apply DSP Voice Cloning if a custom voice sample is present
+                    if custom_voice and os.path.exists(custom_voice) and os.path.getsize(custom_voice) > 100:
+                        print(f"[Demo] DSP-Cloning Speaker {spk_id} using custom voice profile: {custom_voice}")
+                        cloned_file = os.path.join("static/temp", f"cloned_part_{int(time.time())}_{i}.wav")
+                        success = clone_voice_dsp(temp_file, custom_voice, cloned_file)
+                        if success and os.path.exists(cloned_file):
+                            try: os.remove(temp_file)
+                            except: pass
+                            temp_file = cloned_file
+                            
+                    temp_files.append(temp_file)
+                    
+                    if os.path.exists(temp_file) and os.path.getsize(temp_file) > 44:
+                        audio_data, sr = sf.read(temp_file)
+                        last_sr = sr
+                        # Convert stereo to mono
+                        if len(audio_data.shape) > 1:
+                            audio_data = audio_data.mean(axis=1)
+                        
+                        concatenated_audio.append(audio_data)
+                        
+                        # Add natural breathing pause (0.3 seconds) between speakers
+                        pause_samples = int(sr * 0.3)
+                        concatenated_audio.append(np.zeros(pause_samples))
+                
+                if len(concatenated_audio) > 0:
+                    # Concatenate dialogue, excluding the trailing pause
+                    final_audio = np.concatenate(concatenated_audio[:-1])
+                    
+                    # Normalize audio amplitude safely
+                    max_val = np.max(np.abs(final_audio))
+                    if max_val > 0:
+                        final_audio = final_audio / max_val * 0.8
+                    
+                    # Save compiled high-fidelity speech script WAV file
+                    sf.write(output_path, final_audio, last_sr)
+                    
+                    # Clean up temporary parts
+                    for temp_f in temp_files:
+                        try:
+                            os.remove(temp_f)
+                        except:
+                            pass
+                else:
+                    raise Exception("SAPI5 compiled audio empty or missing parts")
+                    
+            except Exception as e:
+                print(f"[Demo] Fallback to simple synthesizer wave due to: {e}")
+                traceback.print_exc()
+                
+                # Clean up any temp files created
+                for temp_f in temp_files:
+                    try: os.remove(temp_f)
+                    except: pass
+                
+                # Generate simple visual waveform sweep as fallback
+                words = text_script.split()
+                duration = len(words) * 0.45
+                t = np.linspace(0, duration, int(SAMPLING_RATE * duration), endpoint=False)
+                carrier = np.sin(2 * np.pi * 120 * t)
+                if "Speaker 1" in text_script or req.speaker_id == 1:
+                    carrier = np.sin(2 * np.pi * 220 * t)
+                harmonic1 = 0.5 * np.sin(2 * np.pi * 240 * t)
+                harmonic2 = 0.25 * np.sin(2 * np.pi * 360 * t)
+                
+                envelope = np.zeros_like(t)
+                word_samples = len(t) // len(words)
+                for i in range(len(words)):
+                    start = i * word_samples
+                    end = min((i + 1) * word_samples, len(t))
+                    w_t = np.linspace(0, np.pi, end - start)
+                    envelope[start:end] = np.sin(w_t) ** 2
+                    
+                raw_audio = (carrier + harmonic1 + harmonic2) * envelope
+                raw_audio = raw_audio / np.max(np.abs(raw_audio)) * 0.8
+                sf.write(output_path, raw_audio, SAMPLING_RATE)
+            
+        return {
+            "status": "success",
+            "audio_url": f"/static/temp/{output_filename}",
+            "text": req.text,
+            "mode": "AI Model" if USE_REAL_MODEL else "Demo Synthesizer"
+        }
+        
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.websocket("/api/stream")
+async def websocket_endpoint(websocket: WebSocket):
+    """
+    WebSocket endpoint for real-time, low-latency streaming text-to-speech.
+    Receives text streams from client, generates audio chunks, and streams them back instantly.
+    """
+    await websocket.accept()
+    print("[WebSocket] Connected to streaming audio client.")
+    
+    try:
+        while True:
+            # Receive JSON instruction from client
+            data = await websocket.receive_json()
+            text = data.get("text", "")
+            
+            # Resolve remote URLs to local paths if needed
+            voice_sample_path = download_remote_voice(data.get("voice_sample_path", None))
+            speaker_id = data.get("speaker_id", 0)
+            
+            speaker_voices = data.get("speaker_voices", {})
+            for k, v in speaker_voices.items():
+                speaker_voices[k] = download_remote_voice(v)
+            data["speaker_voices"] = speaker_voices
+            
+            if not text:
+                continue
+                
+            print(f"[WebSocket] Streaming request: '{text}' (Speaker: {speaker_id})")
+            
+            # Real AI Model Streaming Path
+            if USE_REAL_MODEL:
+                proc, loaded_model = get_model()
+                if loaded_model is None:
+                    await websocket.send_json({
+                        "type": "error",
+                        "message": "AI Model is loading. Streaming unavailable."
+                    })
+                    continue
+                
+                # Setup streamer
+                from vibevoice.modular.streamer import AsyncAudioStreamer
+                streamer = AsyncAudioStreamer(batch_size=1)
+                
+                # Format prompt
+                text_prompt = text
+                if ":" not in text_prompt:
+                    text_prompt = f"Speaker {speaker_id}: {text_prompt}"
+                    
+                # Load reference voices for all active speakers in order
+                voice_samples = get_speaker_voices_list(text_prompt, voice_sample_path, speaker_voices)
+                    
+                inputs = proc(text=text_prompt, voice_samples=voice_samples, return_tensors="pt")
+                
+                # Run generation in a separate background thread
+                def run_inference():
+                    try:
+                        with torch.no_grad():
+                            loaded_model.generate(
+                                **inputs,
+                                tokenizer=proc.tokenizer,
+                                audio_streamer=streamer,
+                                max_new_tokens=400,
+                                do_sample=True,
+                                show_progress_bar=False
+                            )
+                    except Exception as ex:
+                        print(f"[VibeVoice] Streaming generation exception: {ex}")
+                    finally:
+                        streamer.end()
+
+                threading.Thread(target=run_inference, daemon=True).start()
+                
+                # Fetch audio chunks asynchronously from queue and stream to client
+                chunk_index = 0
+                async for audio_tensor in streamer.get_stream(0):
+                    audio_numpy = audio_tensor.numpy()
+                    
+                    # Convert Float32 audio values to 16-bit PCM integer bytes
+                    audio_pcm = (audio_numpy * 32767.0).astype(np.int16)
+                    
+                    # Send raw audio binary buffer
+                    await websocket.send_bytes(audio_pcm.tobytes())
+                    chunk_index += 1
+                    
+                # Send stream boundary signal
+                await websocket.send_json({"type": "done"})
+                
+            # High-Fidelity Demo/Simulated Streaming Path
+            else:
+                print(f"[WebSocket-Demo] Synthesizing real-time high-fidelity streaming speech for script: {text}")
+                try:
+                    # 1. Parse dialogue lines
+                    dialogue_lines = parse_script_dialogue(text)
+                    
+                    # 2. Loop through each line and stream it
+                    for spk_id, line_text in dialogue_lines:
+                        custom_voice = None
+                        if speaker_voices:
+                            custom_voice = speaker_voices.get(str(spk_id)) or speaker_voices.get(spk_id)
+                        if not custom_voice and spk_id == 0:
+                            custom_voice = voice_sample_path
+                            
+                        temp_wav = os.path.join("static/temp", f"stream_temp_{int(time.time())}_{spk_id}.wav")
+                        sapi5_generate_wav(line_text, spk_id, temp_wav)
+                        
+                        # Apply voice cloning DSP if custom voice profile is present!
+                        if custom_voice and os.path.exists(custom_voice) and os.path.getsize(custom_voice) > 100:
+                            print(f"[WebSocket-Demo] DSP-Cloning Speaker {spk_id} using custom voice profile: {custom_voice}")
+                            cloned_wav = os.path.join("static/temp", f"cloned_stream_{int(time.time())}_{spk_id}.wav")
+                            success = clone_voice_dsp(temp_wav, custom_voice, cloned_wav)
+                            if success and os.path.exists(cloned_wav):
+                                try: os.remove(temp_wav)
+                                except: pass
+                                temp_wav = cloned_wav
+                        
+                        if os.path.exists(temp_wav) and os.path.getsize(temp_wav) > 44:
+                            audio_data, sr = sf.read(temp_wav)
+                            
+                            # Convert stereo to mono
+                            if len(audio_data.shape) > 1:
+                                audio_data = audio_data.mean(axis=1)
+                                
+                            # Resample to the standard SAMPLING_RATE (24000Hz) if needed
+                            if sr != SAMPLING_RATE:
+                                num_target = int(len(audio_data) * SAMPLING_RATE / sr)
+                                audio_data = np.interp(
+                                    np.linspace(0, len(audio_data), num_target, endpoint=False),
+                                    np.arange(len(audio_data)),
+                                    audio_data
+                                )
+                            
+                            # Stream in chunks of ~250ms of audio
+                            chunk_size = int(SAMPLING_RATE * 0.25)
+                            words_in_line = line_text.split()
+                            total_words = len(words_in_line)
+                            
+                            # Map audio samples to words to synchronize 'word' HUD metadata events
+                            samples_per_word = len(audio_data) / max(1, total_words)
+                            
+                            current_word_idx = 0
+                            for offset in range(0, len(audio_data), chunk_size):
+                                chunk = audio_data[offset:offset+chunk_size]
+                                if len(chunk) == 0:
+                                    continue
+                                
+                                # Scale chunk dynamically to int16 PCM
+                                max_chunk = np.max(np.abs(chunk))
+                                scaled_chunk = chunk / max_chunk * 0.7 if max_chunk > 0 else chunk
+                                pcm_bytes = (scaled_chunk * 32767.0).astype(np.int16).tobytes()
+                                
+                                # Send binary audio buffer over WebSocket
+                                await websocket.send_bytes(pcm_bytes)
+                                
+                                # Broadcast 'word' events as the audio reaches those word offsets
+                                current_sample_pos = offset + len(chunk)
+                                word_progress = int(current_sample_pos / samples_per_word)
+                                while current_word_idx < min(word_progress, total_words):
+                                    await websocket.send_json({
+                                        "type": "word",
+                                        "word": words_in_line[current_word_idx],
+                                        "index": current_word_idx,
+                                        "total": total_words
+                                    })
+                                    current_word_idx += 1
+                                
+                                # Realtime throttle matching output playback
+                                await asyncio.sleep(0.24)
+                            
+                            # Ensure all final words are sent in the metadata stream
+                            while current_word_idx < total_words:
+                                await websocket.send_json({
+                                    "type": "word",
+                                    "word": words_in_line[current_word_idx],
+                                    "index": current_word_idx,
+                                    "total": total_words
+                                })
+                                current_word_idx += 1
+                                
+                            # Clean up
+                            try:
+                                os.remove(temp_wav)
+                            except:
+                                pass
+                            
+                            # Natural speech pause between sentences
+                            await asyncio.sleep(0.3)
+                        else:
+                            raise Exception("Generated SAPI5 stream WAV is missing or empty")
+                            
+                    await websocket.send_json({"type": "done"})
+                    
+                except Exception as ex:
+                    print(f"[WebSocket-Demo] SAPI5 streaming exception: {ex}. Falling back to visual wave generator.")
+                    traceback.print_exc()
+                    
+                    # Resilient visual fallback to sine wave beeps if SAPI5 fails
+                    words = text.split()
+                    for word_idx, word in enumerate(words):
+                        word_duration = 0.35
+                        num_samples = int(SAMPLING_RATE * word_duration)
+                        t = np.linspace(0, word_duration, num_samples, endpoint=False)
+                        
+                        base_freq = 130 if speaker_id == 0 else 230
+                        wave = np.sin(2 * np.pi * base_freq * t)
+                        wave += 0.4 * np.sin(2 * np.pi * (base_freq * 2) * t)
+                        wave += 0.2 * np.sin(2 * np.pi * (base_freq * 3) * t)
+                        
+                        window = np.sin(np.linspace(0, np.pi, num_samples)) ** 2
+                        chunk = wave * window
+                        
+                        chunk = chunk / np.max(np.abs(chunk)) * 0.7 if np.max(np.abs(chunk)) > 0 else chunk
+                        pcm_bytes = (chunk * 32767.0).astype(np.int16).tobytes()
+                        
+                        await websocket.send_bytes(pcm_bytes)
+                        await websocket.send_json({
+                            "type": "word",
+                            "word": word,
+                            "index": word_idx,
+                            "total": len(words)
+                        })
+                        await asyncio.sleep(0.28)
+                        
+                    await websocket.send_json({"type": "done"})
+                
+    except WebSocketDisconnect:
+        print("[WebSocket] Streaming client disconnected.")
+    except Exception as e:
+        print(f"[WebSocket] Error: {e}")
+        traceback.print_exc()
+
+# Mount static assets files (temp outputs & cloned speakers)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+async def root_fallback():
+    if os.path.exists("frontend/dist/index.html"):
+        return FileResponse("frontend/dist/index.html")
+    return HTMLResponse("""
+    <html>
+        <head>
+            <title>VibeVoice API Server</title>
+            <link rel="preconnect" href="https://fonts.googleapis.com">
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+            <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap" rel="stylesheet">
+            <style>
+                body {
+                    font-family: 'Outfit', sans-serif;
+                    background: #07090e;
+                    color: #f0f3fa;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100vh;
+                    margin: 0;
+                }
+                .container {
+                    text-align: center;
+                    padding: 40px;
+                    background: rgba(255, 255, 255, 0.03);
+                    border: 1px solid rgba(255, 255, 255, 0.08);
+                    border-radius: 20px;
+                    backdrop-filter: blur(10px);
+                    max-width: 500px;
+                }
+                code {
+                    background: rgba(0, 242, 254, 0.1);
+                    color: #00f2fe;
+                    padding: 8px 12px;
+                    border-radius: 6px;
+                    font-family: monospace;
+                    display: inline-block;
+                    margin: 15px 0;
+                }
+            </style>
+        </head>
+        <body>
+            <div class="container">
+                <h1 style="margin: 0 0 10px 0;">🎙️ VibeVoice API Server Online</h1>
+                <p style="color: #8e9bb5; line-height: 1.6; font-size: 14px;">The backend API server is fully running on port 8000! To access the high-end React + Vite + Tailwind frontend, start the dev server:</p>
+                <code>cd frontend; npm run dev</code>
+                <p style="margin: 15px 0 0 0; font-size: 12px; color: #8e9bb5;">Or build for production serving: <code>cd frontend; npm run build</code></p>
+            </div>
+        </body>
+    </html>
+    """)
+
+# Serve the static built files from dist if compiled
+if os.path.exists("frontend/dist"):
+    app.mount("/", StaticFiles(directory="frontend/dist", html=True), name="dist")
+
+if __name__ == "__main__":
+    import uvicorn
+    import os
+    # Start web app dynamically (binds to 0.0.0.0 and port 7860 for Hugging Face Space Docker support)
+    port = int(os.environ.get("PORT", 8000))
+    host = "0.0.0.0"
+    print(f"[VibeVoice] Starting server on http://{host}:{port}")
+    uvicorn.run("app:app", host=host, port=port, reload=False)
+

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎙️</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="VibeVoice React Studio - Real-time Voice Cloning and Speech Synthesis Playground by Microsoft Frontier Models." />
+    <title>VibeVoice React Studio | Frontier Voice AI</title>
+    <!-- Premium Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Plus Jakarta Sans', sans-serif !important;
+      }
+      h1, h2, h3, .font-orbitron {
+        font-family: 'Outfit', sans-serif !important;
+      }
+      #consoleBody {
+        font-family: 'JetBrains Mono', monospace !important;
+      }
+    </style>
+  </head>
+  <body class="bg-[#07090e] text-[#f0f3fa]">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.106.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.16.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}

frontend/src/App.css

@@ -0,0 +1 @@
+/* Custom styles are configured in index.css and Tailwind v4. App.css is intentionally left empty. */

frontend/src/App.jsx

@@ -0,0 +1,2184 @@
+import React, { useState, useEffect, useRef } from 'react';
+import LandingPage from './LandingPage';
+import { supabase } from './supabaseClient';
+import {
+  Mic,
+  Upload,
+  Play,
+  Square,
+  Volume2,
+  VolumeX,
+  Terminal,
+  Settings,
+  Radio,
+  Info,
+  AlertCircle,
+  CheckCircle,
+  Sparkles,
+  Power,
+  Loader2,
+  Trash2,
+  Podcast,
+  Headset,
+  Newspaper,
+  Volume1,
+  PlayCircle,
+  Plus,
+  Music,
+  Edit2
+} from 'lucide-react';
+
+const SAMPLING_RATE = 24000;
+
+function App() {
+  const [currentView, setCurrentView] = useState('landing');
+  const [savedVoices, setSavedVoices] = useState([]);
+  const [podcastHistory, setPodcastHistory] = useState([]);
+
+  // Model & Server Status States
+  const [modelStatus, setModelStatus] = useState({
+    useRealModel: true,
+    modelId: 'microsoft/VibeVoice-Realtime-0.5B',
+    loaded: false,
+    loading: true,
+    error: null,
+    device: 'CPU'
+  });
+  const [wsConnected, setWsConnected] = useState(false);
+  const [togglingModel, setTogglingModel] = useState(false);
+
+  // Script & Synthesis States
+  const [script, setScript] = useState(
+    "Speaker 0: Welcome to Vibe Voice Studio. I am cloned from your custom voice sample.\nSpeaker 1: That is incredible! The transition between speakers sounds so smooth and natural.\nSpeaker 0: Yes, Microsoft's continuous acoustic tokenizers make multi-speaker podcasts sound beautiful."
+  );
+  const [streamMode, setStreamMode] = useState(true);
+  const [agentState, setAgentState] = useState({
+    status: 'idle', // idle, thinking, speaking, listening
+    title: 'AGENT READY',
+    sub: 'Configure scripts and trigger generation below'
+  });
+
+  // Audio Playback UI States
+  const [isAudioPlayingState, setIsAudioPlayingState] = useState(false);
+  const [volume, setVolume] = useState(80);
+  const [speed, setSpeed] = useState('1.0');
+  const [timeline, setTimeline] = useState({ elapsed: 0, total: 0 });
+  const [showToolbar, setShowToolbar] = useState(false);
+
+  // Speaker Slots States (Voice Cloning)
+  const [speakers, setSpeakers] = useState([
+    { id: 0, name: 'Alex', isRecording: false, voicePath: null, previewUrl: null, role: 'Primary Speaker', color: 'cyan' },
+    { id: 1, name: 'Sarah', isRecording: false, voicePath: null, previewUrl: null, role: 'Dialogue Partner', color: 'purple' }
+  ]);
+
+  // Master Export Hub State
+  const [compiledAudioUrl, setCompiledAudioUrl] = useState(null);
+  const [compiledAudioMode, setCompiledAudioMode] = useState(null); // 'stream' or 'file'
+  const accumulatedSessionChunksRef = useRef([]);
+
+  // Preview Voice Reference Playback State
+  const [playingPreviewId, setPlayingPreviewId] = useState(null);
+  const previewSourceRef = useRef(null);
+
+  // Custom Naming Modal State
+  const [namingModal, setNamingModal] = useState({
+    isOpen: false,
+    fileBlob: null,
+    speakerId: null,
+    defaultName: ''
+  });
+  const [voiceNameInput, setVoiceNameInput] = useState('');
+
+  // Custom Action (Rename/Delete) Modal State
+  const [actionModal, setActionModal] = useState({
+    isOpen: false,
+    type: '', // 'rename_voice', 'delete_voice', 'rename_podcast', 'delete_podcast'
+    id: null,
+    oldValue: '',
+    inputValue: '',
+    audioUrl: '',
+    profileName: ''
+  });
+
+  // Console Logs State
+  const [logs, setLogs] = useState([
+    { type: 'system', text: 'Welcome to VibeVoice React Studio Console. System ready.', time: new Date().toLocaleTimeString() },
+    { type: 'info', text: 'VibeVoice neural weights loading directly on local CPU. Real-time zero-shot synthesis active.', time: new Date().toLocaleTimeString() }
+  ]);
+
+  // Web Audio Context & Playback References
+  const audioCtxRef = useRef(null);
+  const analyserNodeRef = useRef(null);
+  const gainNodeRef = useRef(null);
+  const wsRef = useRef(null);
+  
+  // Streaming Queue Refs (Gapless Playback)
+  const playbackQueueRef = useRef([]);
+  const nextPlayTimeRef = useRef(0);
+  const isStreamingActiveRef = useRef(false);
+  const scheduledSourcesRef = useRef([]);
+  const doneReceivedRef = useRef(false);
+  
+  // Traditional REST Player Refs
+  const traditionalSourceRef = useRef(null);
+  const traditionalStartClockRef = useRef(0);
+  const traditionalDurationRef = useRef(0);
+
+  // Microphone Recording Refs
+  const mediaRecordersRef = useRef([null, null]);
+  const audioChunksRef = useRef([[], []]);
+
+  // UI Canvas Visualizer Refs
+  const canvasRef = useRef(null);
+
+  // ==========================================================================
+  // Console Log Helper
+  // ==========================================================================
+  const addLog = (type, text) => {
+    setLogs(prev => [
+      ...prev,
+      { type, text, time: new Date().toLocaleTimeString() }
+    ]);
+  };
+
+  // Scroll Console to Bottom
+  useEffect(() => {
+    const consoleBody = document.getElementById('consoleBody');
+    if (consoleBody) {
+      consoleBody.scrollTop = consoleBody.scrollHeight;
+    }
+  }, [logs]);
+
+  // ==========================================================================
+  // Server Status & WebSocket Handshakes
+  // ==========================================================================
+  const checkServerStatus = async () => {
+    try {
+      const res = await fetch('/api/status');
+      const data = await res.json();
+      
+      setModelStatus({
+        useRealModel: data.use_real_model,
+        modelId: data.model_id,
+        loaded: data.loaded,
+        loading: data.loading,
+        error: data.error,
+        device: data.device
+      });
+    } catch (e) {
+      addLog('error', 'Failed to connect to VibeVoice backend API server.');
+    }
+  };
+
+  const fetchSavedVoices = async () => {
+    try {
+      const { data, error } = await supabase.from('voice_profiles').select('*');
+      if (error) throw error;
+      setSavedVoices(data || []);
+      addLog('info', `Fetched ${data?.length || 0} saved voice profiles from Supabase.`);
+      
+      // Auto-assign matching saved voices to speakers by name to get "old audio input" instantly!
+      if (data && data.length > 0) {
+        setSpeakers(prev => prev.map(s => {
+          const matched = data.find(v => v.name.trim().toLowerCase() === s.name.trim().toLowerCase());
+          if (matched && !s.voicePath) {
+            addLog('info', `Auto-loaded saved voice profile "${matched.name}" into Speaker ${s.id} slot.`);
+            return {
+              ...s,
+              voicePath: matched.audio_url,
+              previewUrl: matched.audio_url
+            };
+          }
+          return s;
+        }));
+      }
+    } catch (err) {
+      addLog('error', 'Failed to fetch saved voice profiles from Supabase: ' + err.message);
+    }
+  };
+
+  const fetchPodcastHistory = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('podcast_history')
+        .select('*')
+        .order('created_at', { ascending: false });
+      if (error) throw error;
+      setPodcastHistory(data || []);
+      addLog('info', `Fetched ${data?.length || 0} archived podcasts from Supabase.`);
+    } catch (err) {
+      addLog('error', 'Failed to fetch podcast history: ' + err.message);
+    }
+  };
+
+  const savePodcastToHistory = async (wavBlob, textScript, mode) => {
+    try {
+      addLog('info', 'Archiving generated podcast to Supabase permanent storage...');
+      const fileName = `podcast_${Date.now()}.wav`;
+
+      // 1. Upload to storage
+      const { data: storageData, error: storageError } = await supabase
+        .storage
+        .from('voice_samples')
+        .upload(fileName, wavBlob);
+
+      if (storageError) throw storageError;
+
+      // 2. Get public url
+      const { data: publicUrlData } = supabase
+        .storage
+        .from('voice_samples')
+        .getPublicUrl(fileName);
+
+      const publicUrl = publicUrlData.publicUrl;
+
+      // 3. Insert metadata record into DB
+      const primaryVoice = speakers[0]?.voicePath || null;
+      const matchingProfile = primaryVoice ? savedVoices.find(v => v.audio_url === primaryVoice) : null;
+      const voiceProfileId = matchingProfile ? matchingProfile.id : null;
+
+      const { data: dbData, error: dbError } = await supabase
+        .from('podcast_history')
+        .insert([{
+          title: `Podcast - ${new Date().toLocaleString()} (${mode})`,
+          text_script: textScript,
+          audio_url: publicUrl,
+          speaker_id: 0,
+          voice_profile_id: voiceProfileId
+        }])
+        .select();
+
+      if (dbError) throw dbError;
+
+      addLog('success', 'Podcast archived successfully to Supabase Database!');
+      fetchPodcastHistory();
+    } catch (err) {
+      addLog('warning', `Failed to archive podcast to Supabase (${err.message}). Storing in local session memory...`);
+      
+      // Fallback: Create local preview URL for the compiled podcast WAV
+      const localPreviewUrl = URL.createObjectURL(wavBlob);
+      
+      setPodcastHistory(prev => [
+        {
+          id: `local_${Date.now()}`,
+          title: `Podcast - ${new Date().toLocaleString()} (${mode}) [Local Session]`,
+          text_script: textScript,
+          audio_url: localPreviewUrl,
+          speaker_id: 0,
+          voice_profile_id: null,
+          created_at: new Date().toISOString()
+        },
+        ...prev
+      ]);
+      addLog('success', 'Podcast successfully cached in local session memory!');
+    }
+  };
+
+  const saveTraditionalPodcastToHistory = async (audioUrl, textScript, mode) => {
+    try {
+      const response = await fetch(audioUrl);
+      const blob = await response.blob();
+      await savePodcastToHistory(blob, textScript, mode);
+    } catch (err) {
+      addLog('error', 'Failed to download compiled audio for archiving: ' + err.message);
+    }
+  };
+
+  // --- Custom Action Modal Trigger Hooks ---
+  const openRenameVoiceModal = (voiceId, oldName, audioUrl) => {
+    setActionModal({
+      isOpen: true,
+      type: 'rename_voice',
+      id: voiceId,
+      oldValue: oldName,
+      inputValue: oldName,
+      audioUrl,
+      profileName: oldName
+    });
+  };
+
+  const openDeleteVoiceModal = (voiceId, oldName, audioUrl) => {
+    setActionModal({
+      isOpen: true,
+      type: 'delete_voice',
+      id: voiceId,
+      oldValue: oldName,
+      inputValue: '',
+      audioUrl,
+      profileName: oldName
+    });
+  };
+
+  const openRenamePodcastModal = (podcastId, oldTitle) => {
+    setActionModal({
+      isOpen: true,
+      type: 'rename_podcast',
+      id: podcastId,
+      oldValue: oldTitle,
+      inputValue: oldTitle,
+      audioUrl: '',
+      profileName: oldTitle
+    });
+  };
+
+  const openDeletePodcastModal = (podcastId, title, audioUrl) => {
+    setActionModal({
+      isOpen: true,
+      type: 'delete_podcast',
+      id: podcastId,
+      oldValue: title,
+      inputValue: '',
+      audioUrl,
+      profileName: title
+    });
+  };
+
+  // --- Core execution functions invoked on Custom Modal Submit ---
+
+  const executeRenamePodcast = async (podcastId, newTitle) => {
+    if (!newTitle || newTitle.trim() === '') return;
+    try {
+      addLog('info', `Renaming podcast to "${newTitle.trim()}"...`);
+
+      // Local podcast session
+      if (typeof podcastId === 'string' && podcastId.startsWith('local_')) {
+        setPodcastHistory(prev => prev.map(p => p.id === podcastId ? { ...p, title: newTitle.trim() } : p));
+        addLog('success', `Podcast successfully renamed to "${newTitle.trim()}" locally.`);
+        return;
+      }
+
+      // Supabase DB podcast
+      const { error } = await supabase
+        .from('podcast_history')
+        .update({ title: newTitle.trim() })
+        .eq('id', podcastId);
+
+      if (error) throw error;
+
+      addLog('success', `Podcast title successfully updated in Supabase Database!`);
+      fetchPodcastHistory();
+    } catch (err) {
+      addLog('error', 'Failed to rename podcast: ' + err.message);
+    }
+  };
+
+  const executeRenameVoice = async (voiceId, newName, audioUrl) => {
+    if (!newName || newName.trim() === '') return;
+    try {
+      addLog('info', `Renaming voice profile to "${newName.trim()}"...`);
+      
+      // Local voice profiles
+      if (typeof voiceId === 'string' && voiceId.startsWith('local_')) {
+        setSavedVoices(prev => prev.map(v => v.id === voiceId ? { ...v, name: newName.trim() } : v));
+        
+        // Update speakers
+        setSpeakers(prev => prev.map(s => {
+          if (s.voicePath === audioUrl) {
+            return { ...s, name: newName.trim() };
+          }
+          return s;
+        }));
+        
+        addLog('success', `Voice profile successfully renamed to "${newName.trim()}" locally.`);
+        return;
+      }
+
+      // Supabase
+      const { error } = await supabase
+        .from('voice_profiles')
+        .update({ name: newName.trim() })
+        .eq('id', voiceId);
+
+      if (error) throw error;
+
+      addLog('success', `Voice profile successfully renamed in database!`);
+      
+      // Update state immediately
+      setSavedVoices(prev => prev.map(v => v.id === voiceId ? { ...v, name: newName.trim() } : v));
+      
+      // Also update any speaker slot using it
+      setSpeakers(prev => prev.map(s => {
+        if (s.voicePath === audioUrl) {
+          return { ...s, name: newName.trim() };
+        }
+        return s;
+      }));
+    } catch (err) {
+      addLog('error', `Failed to rename voice profile: ${err.message}`);
+    }
+  };
+
+  const executeDeleteVoice = async (voiceId, audioUrl, profileName) => {
+    try {
+      addLog('info', `Deleting voice profile "${profileName}"...`);
+      
+      // Clear voice path of speakers who use this profile
+      setSpeakers(prev => prev.map(s => s.voicePath === audioUrl ? { ...s, voicePath: null, previewUrl: null } : s));
+
+      // Local voice profile
+      if (typeof voiceId === 'string' && (voiceId.startsWith('local_') || voiceId.endsWith('.wav'))) {
+        setSavedVoices(prev => prev.filter(v => v.id !== voiceId));
+        
+        if (audioUrl && audioUrl.startsWith('/static/cloned_voices/')) {
+          const filename = audioUrl.split('/').pop();
+          try {
+            await fetch(`/api/delete-voice/${filename}`, { method: 'DELETE' });
+          } catch(e) {}
+        }
+        
+        addLog('success', `Voice profile "${profileName}" removed from local session.`);
+        return;
+      }
+
+      // Database profile
+      const { error: dbError } = await supabase
+        .from('voice_profiles')
+        .delete()
+        .eq('id', voiceId);
+
+      if (dbError) throw dbError;
+
+      // Extract filename from URL and delete from storage
+      if (audioUrl) {
+        try {
+          const filePart = audioUrl.split('/').pop();
+          if (filePart) {
+            await supabase.storage.from('voice_samples').remove([filePart]);
+          }
+        } catch (storageErr) {
+          console.warn('Failed to delete voice profile from Storage:', storageErr);
+        }
+      }
+
+      addLog('success', `Voice profile "${profileName}" successfully deleted from Supabase.`);
+      fetchSavedVoices();
+    } catch (err) {
+      addLog('error', `Failed to delete voice profile: ${err.message}`);
+    }
+  };
+
+  const executeDeletePodcast = async (id, audioUrl, title) => {
+    try {
+      addLog('info', `Deleting podcast "${title}" from archive...`);
+      
+      if (typeof id === 'string' && id.startsWith('local_')) {
+        setPodcastHistory(prev => prev.filter(p => p.id !== id));
+        addLog('success', 'Podcast deleted successfully from local session memory.');
+        return;
+      }
+      
+      // 1. Delete from database
+      const { error: dbError } = await supabase
+        .from('podcast_history')
+        .delete()
+        .eq('id', id);
+      if (dbError) throw dbError;
+
+      // 2. Try to extract filename from URL and delete from Storage
+      try {
+        const filePart = audioUrl.split('/').pop();
+        if (filePart) {
+          await supabase.storage.from('voice_samples').remove([filePart]);
+        }
+      } catch (err) {
+        console.warn('Failed to delete audio file from Storage:', err);
+      }
+
+      addLog('success', 'Podcast deleted successfully.');
+      fetchPodcastHistory();
+    } catch (err) {
+      addLog('error', 'Failed to delete podcast: ' + err.message);
+    }
+  };
+
+  const playHistoryPodcast = async (podcast) => {
+    initAudio();
+    handleStopPlayback(); // Stop any other playing sessions
+    
+    try {
+      addLog('info', `Streaming archived podcast: "${podcast.title}"...`);
+      setIsAudioPlayingState(true);
+      setCompiledAudioUrl(podcast.audio_url);
+      setCompiledAudioMode('file');
+      loadTraditionalWav(podcast.audio_url);
+    } catch (e) {
+      addLog('error', 'Failed to play archived podcast.');
+      handleStopPlayback();
+    }
+  };
+
+  useEffect(() => {
+    addLog('system', 'Initializing VibeVoice Studio environment...');
+    checkServerStatus();
+    fetchSavedVoices();
+    fetchPodcastHistory();
+    
+    
+    // Poll server status periodically if loading
+    const interval = setInterval(() => {
+      checkServerStatus();
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // WebSocket Connection Manager
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    const wsUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+      ? 'ws://127.0.0.1:8000/api/stream'
+      : `${protocol}//${host}/api/stream`;
+    
+    addLog('system', `Opening real-time WebSocket connection to ${wsUrl}`);
+    const websocket = new WebSocket(wsUrl);
+    wsRef.current = websocket;
+
+    websocket.onopen = () => {
+      setWsConnected(true);
+      addLog('success', 'WebSocket real-time streaming link ESTABLISHED.');
+    };
+
+    websocket.onclose = () => {
+      setWsConnected(false);
+      addLog('error', 'WebSocket streaming link disconnected. Retrying connection...');
+    };
+
+    websocket.onerror = () => {
+      addLog('error', 'WebSocket encountered connection error.');
+    };
+
+    websocket.onmessage = async (event) => {
+      if (typeof event.data === 'string') {
+        const data = JSON.parse(event.data);
+        if (data.type === 'word') {
+          addLog('word', `Agent spoke word: "${data.word}"`);
+        } else if (data.type === 'done') {
+          addLog('success', 'WebSocket voice generation chunk transfer complete.');
+          doneReceivedRef.current = true;
+          // Generate local Object URL of the accumulated chunks for mastering
+          if (accumulatedSessionChunksRef.current.length > 0) {
+            try {
+              const wavBlob = exportWav(accumulatedSessionChunksRef.current, SAMPLING_RATE);
+              const objectUrl = URL.createObjectURL(wavBlob);
+              setCompiledAudioUrl(objectUrl);
+              setCompiledAudioMode('stream');
+              addLog('success', 'Master podcast output audio created and mastered for local export.');
+              
+              // Automatically archive to Supabase history
+              savePodcastToHistory(wavBlob, script, 'WebSocket Stream');
+            } catch (err) {
+              addLog('error', `Failed to master session output: ${err.message}`);
+            }
+          }
+          // If no sources are playing and queue is completely empty, finalize playback
+          if (scheduledSourcesRef.current.length === 0 && playbackQueueRef.current.length === 0) {
+            handleStopPlayback();
+          }
+        } else if (data.type === 'error') {
+          addLog('error', `Server stream error: ${data.message}`);
+          handleStopPlayback();
+        }
+      } else {
+        // Raw Audio Binary Chunks
+        const arrayBuffer = await event.data.arrayBuffer();
+        const int16Array = new Int16Array(arrayBuffer);
+        const float32Array = new Float32Array(int16Array.length);
+        
+        for (let i = 0; i < int16Array.length; i++) {
+          float32Array[i] = int16Array[i] / 32767.0;
+        }
+
+        if (isStreamingActiveRef.current) {
+          playbackQueueRef.current.push(float32Array);
+          // Accumulate for session download
+          accumulatedSessionChunksRef.current.push(float32Array);
+          scheduleNextStreamingChunk();
+        }
+      }
+    };
+
+    return () => {
+      if (websocket) websocket.close();
+    };
+  }, []);
+
+  // ==========================================================================
+  // Web Audio Context & Node Setup (Pillar 2 & 3)
+  // ==========================================================================
+  const initAudio = () => {
+    if (audioCtxRef.current) return;
+
+    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+    const context = new AudioContextClass({ sampleRate: SAMPLING_RATE });
+    audioCtxRef.current = context;
+
+    const analyser = context.createAnalyser();
+    analyser.fftSize = 256;
+    analyserNodeRef.current = analyser;
+
+    const gain = context.createGain();
+    gain.gain.setValueAtTime(volume / 100, context.currentTime);
+    gainNodeRef.current = gain;
+
+    // Connect pipeline
+    gain.connect(analyser);
+    analyser.connect(context.destination);
+
+    addLog('system', `Browser AudioContext engine running at ${SAMPLING_RATE}Hz.`);
+  };
+
+  useEffect(() => {
+    if (gainNodeRef.current && audioCtxRef.current) {
+      gainNodeRef.current.gain.setValueAtTime(volume / 100, audioCtxRef.current.currentTime);
+    }
+  }, [volume]);
+
+  // Streaming Gapless Playback Logic
+  const startStreamingPlayback = () => {
+    initAudio();
+    if (audioCtxRef.current.state === 'suspended') {
+      audioCtxRef.current.resume();
+    }
+
+    playbackQueueRef.current = [];
+    accumulatedSessionChunksRef.current = []; // Clear previous export session chunks
+    scheduledSourcesRef.current = [];
+    doneReceivedRef.current = false;
+    nextPlayTimeRef.current = audioCtxRef.current.currentTime + 0.15;
+    isStreamingActiveRef.current = true;
+    setIsAudioPlayingState(true);
+
+    setAgentState({
+      status: 'speaking',
+      title: 'STREAMING SPEECH',
+      sub: 'Synthesizing voice chunks in real-time over WebSocket...'
+    });
+    addLog('info', 'WebSocket player active. Buffering and playing...');
+  };
+
+  const scheduleNextStreamingChunk = () => {
+    if (!isStreamingActiveRef.current || playbackQueueRef.current.length === 0) return;
+
+    const chunk = playbackQueueRef.current.shift();
+    if (!chunk || chunk.length === 0) return;
+
+    const context = audioCtxRef.current;
+    const buffer = context.createBuffer(1, chunk.length, SAMPLING_RATE);
+    buffer.copyToChannel(chunk, 0);
+
+    const source = context.createBufferSource();
+    source.buffer = buffer;
+    source.playbackRate.value = parseFloat(speed);
+    source.connect(gainNodeRef.current);
+
+    const startTime = Math.max(context.currentTime, nextPlayTimeRef.current);
+    source.start(startTime);
+
+    scheduledSourcesRef.current.push(source);
+    
+    const duration = buffer.duration / source.playbackRate.value;
+    nextPlayTimeRef.current = startTime + duration;
+
+    source.onended = () => {
+      // Remove completed source
+      scheduledSourcesRef.current = scheduledSourcesRef.current.filter(src => src !== source);
+      
+      // Check if queue is completely drained and done signal is received
+      if (scheduledSourcesRef.current.length === 0 && playbackQueueRef.current.length === 0 && isStreamingActiveRef.current && doneReceivedRef.current) {
+        handleStopPlayback();
+        addLog('info', 'Agent voice stream play completed.');
+      }
+    };
+  };
+
+  const handleStopPlayback = () => {
+    isStreamingActiveRef.current = false;
+    playbackQueueRef.current = [];
+
+    // Stop and clear all active buffers
+    scheduledSourcesRef.current.forEach(src => {
+      try { src.stop(); } catch(e) {}
+    });
+    scheduledSourcesRef.current = [];
+
+    if (traditionalSourceRef.current) {
+      try { traditionalSourceRef.current.stop(); } catch(e) {}
+      traditionalSourceRef.current = null;
+    }
+
+    // Stop reference preview playback if active
+    if (previewSourceRef.current) {
+      try { previewSourceRef.current.stop(); } catch(e) {}
+      previewSourceRef.current = null;
+    }
+    setPlayingPreviewId(null);
+
+    setIsAudioPlayingState(false);
+    setShowToolbar(false);
+    setAgentState({
+      status: 'idle',
+      title: 'AGENT READY',
+      sub: 'Configure scripts and trigger generation below'
+    });
+    addLog('system', 'Agent audio playback stopped.');
+  };
+
+  // ==========================================================================
+  // Canvas Waves Drawing Loop (AnalyserNode hook)
+  // ==========================================================================
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+    let animationFrameId;
+
+    const renderWave = () => {
+      animationFrameId = requestAnimationFrame(renderWave);
+
+      ctx.fillStyle = 'rgba(7, 9, 14, 0.25)'; // Back-sweep fade
+      ctx.fillRect(0, 0, width, height);
+
+      let dataArray = null;
+      let bufferLength = 0;
+
+      if (analyserNodeRef.current && isAudioPlayingState) {
+        bufferLength = analyserNodeRef.current.frequencyBinCount;
+        dataArray = new Uint8Array(bufferLength);
+        analyserNodeRef.current.getByteTimeDomainData(dataArray);
+      }
+
+      ctx.lineWidth = 2.5;
+      ctx.shadowBlur = isAudioPlayingState ? 10 : 0;
+      ctx.shadowColor = 'rgba(0, 242, 254, 0.4)';
+
+      // Linear Neon color gradient across visualizer canvas
+      const gradient = ctx.createLinearGradient(0, 0, width, 0);
+      gradient.addColorStop(0, '#a259ff'); // Purple
+      gradient.addColorStop(0.5, '#00f2fe'); // Cyan
+      gradient.addColorStop(1, '#ff5c8d'); // Pink
+      ctx.strokeStyle = gradient;
+
+      ctx.beginPath();
+
+      if (dataArray) {
+        // Draw real sound wave oscillations
+        const sliceWidth = width / bufferLength;
+        let x = 0;
+        for (let i = 0; i < bufferLength; i++) {
+          const v = dataArray[i] / 128.0;
+          const y = (v * height) / 2;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+          x += sliceWidth;
+        }
+      } else {
+        // Draw calm animated breathing flatline when quiet
+        const points = 40;
+        const sliceWidth = width / points;
+        let x = 0;
+        const time = Date.now() * 0.003;
+        for (let i = 0; i < points; i++) {
+          const breathing = Math.sin(time) * 0.2 + 0.8;
+          const y = height / 2 + Math.sin(i * 0.15 + time * 2) * (2.5 * breathing);
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+          x += sliceWidth;
+        }
+      }
+
+      ctx.lineTo(width, height / 2);
+      ctx.stroke();
+    };
+
+    renderWave();
+
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [isAudioPlayingState]);
+
+  // ==========================================================================
+  // Synthesis Triggers (REST vs WebSocket Stream)
+  // ==========================================================================
+  const handleSynthesize = async () => {
+    const text = script.trim();
+    if (!text) {
+      addLog('error', 'Cannot synthesize. Text script field is empty!');
+      return;
+    }
+
+    initAudio();
+    handleStopPlayback(); // Halt ongoing audio runs
+
+    // Map dynamic speaker voice paths
+    const speakerVoices = {};
+    speakers.forEach(s => {
+      if (s.voicePath) {
+        speakerVoices[s.id] = s.voicePath;
+      }
+    });
+
+    // Reset master download url
+    setCompiledAudioUrl(null);
+    setCompiledAudioMode(null);
+
+    if (streamMode) {
+      // WS Streaming Mode
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        addLog('error', 'WebSocket is offline. Streaming mode disabled.');
+        return;
+      }
+
+      startStreamingPlayback();
+      wsRef.current.send(JSON.stringify({
+        text,
+        voice_sample_path: speakers[0]?.voicePath || null,
+        speaker_id: 0,
+        speaker_voices: speakerVoices
+      }));
+
+    } else {
+      // Traditional File-based Playback Mode
+      try {
+        addLog('info', 'Compiling voice script... Sending POST to VibeVoice generator...');
+        setAgentState({
+          status: 'thinking',
+          title: 'COMPILING AUDIO',
+          sub: 'Running neural speech generation weights...'
+        });
+        setIsAudioPlayingState(true);
+
+        const res = await fetch('/api/generate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            text,
+            voice_sample_path: speakers[0]?.voicePath || null,
+            speaker_id: 0,
+            speaker_voices: speakerVoices
+          })
+        });
+        const data = await res.json();
+
+        if (data.status === 'success') {
+          addLog('success', `Voice file compiled. Method: [${data.mode}]. Playing track...`);
+          loadTraditionalWav(data.audio_url);
+          setCompiledAudioUrl(data.audio_url);
+          setCompiledAudioMode('file');
+          
+          // Automatically fetch compiled file and archive to Supabase history
+          saveTraditionalPodcastToHistory(data.audio_url, text, data.mode);
+        } else {
+          throw new Error('Server returned error response.');
+        }
+      } catch (e) {
+        handleStopPlayback();
+        addLog('error', `Synthesis failed: ${e.message}`);
+      }
+    }
+  };
+
+  const loadTraditionalWav = async (audioUrl) => {
+    try {
+      const res = await fetch(audioUrl);
+      const arrayBuffer = await res.arrayBuffer();
+
+      audioCtxRef.current.decodeAudioData(arrayBuffer, (decodedBuffer) => {
+        const source = audioCtxRef.current.createBufferSource();
+        source.buffer = decodedBuffer;
+        source.playbackRate.value = parseFloat(speed);
+        source.connect(gainNodeRef.current);
+        source.start(0);
+
+        traditionalSourceRef.current = source;
+        traditionalDurationRef.current = decodedBuffer.duration;
+        traditionalStartClockRef.current = audioCtxRef.current.currentTime;
+
+        setAgentState({
+          status: 'speaking',
+          title: 'PLAYING FILE',
+          sub: 'Streaming synthesized high-fidelity compiled audio track...'
+        });
+        setShowToolbar(true);
+        setTimeline({ elapsed: 0, total: decodedBuffer.duration });
+
+        const tickTimeline = () => {
+          if (traditionalSourceRef.current === source) {
+            const elapsed = (audioCtxRef.current.currentTime - traditionalStartClockRef.current) * parseFloat(speed);
+            setTimeline(prev => ({ ...prev, elapsed: Math.min(elapsed, decodedBuffer.duration) }));
+            if (elapsed < decodedBuffer.duration) {
+              requestAnimationFrame(tickTimeline);
+            }
+          }
+        };
+
+        tickTimeline();
+
+        source.onended = () => {
+          if (traditionalSourceRef.current === source) {
+            handleStopPlayback();
+          }
+        };
+
+      }, (err) => {
+        addLog('error', 'Failed to decode WAV file buffer.');
+        handleStopPlayback();
+      });
+    } catch(e) {
+      addLog('error', 'Error playing generated track.');
+      handleStopPlayback();
+    }
+  };
+
+  const formatTime = (seconds) => {
+    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+    const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
+  };
+
+  const encodeWAV = (samples, sampleRate) => {
+    const buffer = new ArrayBuffer(44 + samples.length * 2);
+    const view = new DataView(buffer);
+
+    const writeString = (view, offset, string) => {
+      for (let i = 0; i < string.length; i++) {
+        view.setUint8(offset + i, string.charCodeAt(i));
+      }
+    };
+
+    const floatTo16BitPCM = (output, offset, input) => {
+      for (let i = 0; i < input.length; i++, offset += 2) {
+        let s = Math.max(-1, Math.min(1, input[i]));
+        output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+      }
+    };
+
+    /* RIFF identifier */
+    writeString(view, 0, 'RIFF');
+    /* file length */
+    view.setUint32(4, 36 + samples.length * 2, true);
+    /* RIFF type */
+    writeString(view, 8, 'WAVE');
+    /* format chunk identifier */
+    writeString(view, 12, 'fmt ');
+    /* format chunk length */
+    view.setUint32(16, 16, true);
+    /* sample format (raw) */
+    view.setUint16(20, 1, true);
+    /* channel count */
+    view.setUint16(22, 1, true);
+    /* sample rate */
+    view.setUint32(24, sampleRate, true);
+    /* byte rate (sample rate * block align) */
+    view.setUint32(28, sampleRate * 2, true);
+    /* block align (channel count * bytes per sample) */
+    view.setUint16(32, 2, true);
+    /* bits per sample */
+    view.setUint16(34, 16, true);
+    /* data chunk identifier */
+    writeString(view, 36, 'data');
+    /* data chunk length */
+    view.setUint32(40, samples.length * 2, true);
+
+    floatTo16BitPCM(view, 44, samples);
+
+    return new Blob([view], { type: 'audio/wav' });
+  };
+
+  // ==========================================================================
+  // Voice Cloning Microphone Hooks (Pillar 4)
+  // ==========================================================================
+  const toggleRecording = async (speakerId) => {
+    const speaker = speakers.find(s => s.id === speakerId);
+    if (!speaker) return;
+
+    if (speaker.isRecording) {
+      // Stop recording
+      const recorder = mediaRecordersRef.current[speakerId];
+      if (recorder) {
+        recorder.stop();
+        setSpeakers(prev => prev.map(s => s.id === speakerId ? { ...s, isRecording: false } : s));
+        setAgentState({
+          status: 'idle',
+          title: 'AGENT READY',
+          sub: 'Voice profile recorded. Syncing to neural engine...'
+        });
+      }
+    } else {
+      // Start recording
+      try {
+        addLog('info', `Requesting mic permission for Speaker ${speakerId} (${speaker.name})...`);
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        
+        setAgentState({
+          status: 'listening',
+          title: 'LISTENING...',
+          sub: 'Speak normally for 10-15s to capture vocal signature...'
+        });
+
+        // Use independent default sample-rate AudioContext specifically for mic capture to avoid browser resampling bugs
+        const RecordingContextClass = window.AudioContext || window.webkitAudioContext;
+        const recContext = new RecordingContextClass();
+
+        const source = recContext.createMediaStreamSource(stream);
+        const processor = recContext.createScriptProcessor(4096, 1, 1);
+        const recordingSamples = [];
+
+        processor.onaudioprocess = (e) => {
+          const channelData = e.inputBuffer.getChannelData(0);
+          recordingSamples.push(new Float32Array(channelData));
+        };
+
+        source.connect(processor);
+        processor.connect(recContext.destination);
+
+        mediaRecordersRef.current[speakerId] = {
+          stop: () => {
+            source.disconnect(processor);
+            processor.disconnect(recContext.destination);
+            stream.getTracks().forEach(track => track.stop());
+            recContext.close();
+
+            addLog('info', 'Encoding microphone speech data to 16-bit PCM WAV...');
+            let totalLength = 0;
+            for (let i = 0; i < recordingSamples.length; i++) {
+              totalLength += recordingSamples[i].length;
+            }
+            const flattened = new Float32Array(totalLength);
+            let offset = 0;
+            for (let i = 0; i < recordingSamples.length; i++) {
+              flattened.set(recordingSamples[i], offset);
+              offset += recordingSamples[i].length;
+            }
+
+            const wavBlob = encodeWAV(flattened, recContext.sampleRate);
+            setNamingModal({
+              isOpen: true,
+              fileBlob: wavBlob,
+              speakerId: speakerId,
+              defaultName: speaker.name
+            });
+            setVoiceNameInput(speaker.name);
+          }
+        };
+
+        setSpeakers(prev => prev.map(s => s.id === speakerId ? { ...s, isRecording: true } : s));
+        addLog('success', 'Microphone recording started. Speak clearly now!');
+      } catch (e) {
+        addLog('error', `Microphone recording failed: ${e.message}`);
+        setAgentState({
+          status: 'idle',
+          title: 'AGENT READY',
+          sub: 'Record trigger failed or permission denied'
+        });
+      }
+    }
+  };
+
+  const handleFileUpload = (e, speakerId) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const speaker = speakers.find(s => s.id === speakerId);
+    addLog('info', `Selected file for upload: ${file.name}`);
+    const cleanFileName = file.name.replace(/\.[^/.]+$/, "");
+    setNamingModal({
+      isOpen: true,
+      fileBlob: file,
+      speakerId: speakerId,
+      defaultName: cleanFileName
+    });
+    setVoiceNameInput(cleanFileName);
+  };
+
+  // Play/Stop Reference Voice Preview using main AudioContext pipeline
+  const playPreview = async (speakerId, url) => {
+    initAudio();
+    handleStopPlayback(); // Stop any other playing session
+
+    if (playingPreviewId === speakerId) {
+      stopPreviewPlayback();
+      return;
+    }
+
+    try {
+      addLog('info', `Playing voice preview for Speaker ${speakerId}...`);
+      setIsAudioPlayingState(true);
+      setPlayingPreviewId(speakerId);
+
+      const res = await fetch(url);
+      const arrayBuffer = await res.arrayBuffer();
+
+      audioCtxRef.current.decodeAudioData(arrayBuffer, (decodedBuffer) => {
+        const source = audioCtxRef.current.createBufferSource();
+        source.buffer = decodedBuffer;
+        source.connect(gainNodeRef.current);
+        source.start(0);
+
+        previewSourceRef.current = source;
+        setAgentState({
+          status: 'speaking',
+          title: 'PLAYING REFERENCE',
+          sub: `Listening to cloned voice reference profile...`
+        });
+
+        source.onended = () => {
+          stopPreviewPlayback();
+        };
+      }, (err) => {
+        addLog('error', 'Failed to decode reference audio file buffer.');
+        stopPreviewPlayback();
+      });
+    } catch (e) {
+      addLog('error', 'Error playing reference voice.');
+      stopPreviewPlayback();
+    }
+  };
+
+  const stopPreviewPlayback = () => {
+    if (previewSourceRef.current) {
+      try { previewSourceRef.current.stop(); } catch(e) {}
+      previewSourceRef.current = null;
+    }
+    setPlayingPreviewId(null);
+    setIsAudioPlayingState(false);
+    setAgentState({
+      status: 'idle',
+      title: 'AGENT READY',
+      sub: 'Configure scripts and trigger generation below'
+    });
+  };
+
+  // Add Dynamic Speaker Slot
+  const addSpeaker = () => {
+    const nextId = speakers.length > 0 ? Math.max(...speakers.map(s => s.id)) + 1 : 0;
+    const speakerColors = ['cyan', 'purple', 'emerald', 'amber', 'rose', 'blue'];
+    const color = speakerColors[nextId % speakerColors.length];
+    const roles = ['Podcast Guest', 'Narrator', 'Secondary Host', 'Panelist', 'Expert Analyst'];
+    const role = roles[(nextId - 2) % roles.length] || 'Guest Slot';
+    
+    const newSpk = {
+      id: nextId,
+      name: `Speaker ${nextId}`,
+      isRecording: false,
+      voicePath: null,
+      previewUrl: null,
+      role: role,
+      color: color
+    };
+
+    setSpeakers(prev => [...prev, newSpk]);
+    addLog('system', `Added dynamic speaker slot: [Speaker ${nextId}]`);
+  };
+
+  // Remove Dynamic Speaker Slot
+  const removeSpeaker = (speakerId) => {
+    if (speakerId === 0) {
+      addLog('error', 'Cannot delete Speaker 0 (Primary Speaker is required).');
+      return;
+    }
+    
+    handleStopPlayback();
+    setSpeakers(prev => prev.filter(s => s.id !== speakerId));
+    addLog('system', `Removed speaker slot: [Speaker ${speakerId}]`);
+  };
+
+  const uploadVoiceProfile = async (fileBlob, speakerId, speakerName) => {
+    try {
+      addLog('info', `Uploading permanent voice profile "${speakerName}" to Supabase...`);
+      
+      const fileName = `voice_${Date.now()}_${speakerId}.wav`;
+      
+      // 1. Upload to Supabase Storage
+      const { data: storageData, error: storageError } = await supabase
+        .storage
+        .from('voice_samples')
+        .upload(fileName, fileBlob);
+
+      if (storageError) throw storageError;
+
+      // Get public URL
+      const { data: publicUrlData } = supabase
+        .storage
+        .from('voice_samples')
+        .getPublicUrl(fileName);
+
+      const publicUrl = publicUrlData.publicUrl;
+
+      // 2. Insert into Supabase Database
+      const { data: dbData, error: dbError } = await supabase
+        .from('voice_profiles')
+        .insert([{ name: speakerName, audio_url: publicUrl }])
+        .select();
+
+      if (dbError) throw dbError;
+
+      // 3. Update UI state
+      setSpeakers(prev => prev.map(s => s.id === speakerId ? {
+        ...s,
+        voicePath: publicUrl,
+        previewUrl: publicUrl
+      } : s));
+      
+      addLog('success', `Voice signature for "${speakerName}" saved to Supabase successfully!`);
+      
+      // Refresh the saved voices list
+      fetchSavedVoices();
+
+    } catch(e) {
+      addLog('warning', `Supabase upload failed (${e.message}). Falling back to local backend storage...`);
+      try {
+        const formData = new FormData();
+        const fileToUpload = fileBlob instanceof File 
+          ? fileBlob 
+          : new File([fileBlob], `voice_${Date.now()}_${speakerId}.wav`, { type: 'audio/wav' });
+          
+        formData.append('file', fileToUpload);
+        formData.append('speaker_name', speakerName);
+
+        const res = await fetch('/api/upload-voice', {
+          method: 'POST',
+          body: formData
+        });
+        
+        if (!res.ok) throw new Error(`Backend returned status ${res.status}`);
+        const data = await res.json();
+        
+        if (data.status === 'success') {
+          const localUrl = '/' + data.voice_path;
+          
+          setSpeakers(prev => prev.map(s => s.id === speakerId ? {
+            ...s,
+            voicePath: localUrl,
+            previewUrl: localUrl
+          } : s));
+          
+          addLog('success', `Voice signature for "${speakerName}" saved locally on server!`);
+          
+          // Instantly add this local voice to the savedVoices dropdown selection
+          setSavedVoices(prev => {
+            const exists = prev.some(v => v.audio_url === localUrl);
+            if (exists) return prev;
+            return [...prev, {
+              id: data.filename,
+              name: speakerName,
+              audio_url: localUrl
+            }];
+          });
+        } else {
+          throw new Error(data.message || 'Local upload failed');
+        }
+      } catch (localErr) {
+        addLog('error', `Voice signature local upload fallback failed: ${localErr.message}`);
+      }
+    }
+  };
+
+  // Toggle AI Model Mode on Backend
+  const handleToggleModelMode = async () => {
+    const enable = !modelStatus.useRealModel;
+    setTogglingModel(true);
+    addLog('info', `Requesting engine toggle: ${enable ? 'Enabling AI Model' : 'Enabling Demo Synthesizer'}`);
+
+    try {
+      const res = await fetch(`/api/toggle-model?enable=${enable}`, { method: 'POST' });
+      const data = await res.json();
+      
+      setModelStatus(prev => ({
+        ...prev,
+        useRealModel: data.use_real_model,
+        loading: enable, // starts load
+        loaded: false
+      }));
+
+      setTimeout(checkServerStatus, 1500);
+    } catch (e) {
+      addLog('error', 'Toggle engine request failed.');
+    } finally {
+      setTogglingModel(false);
+    }
+  };
+
+  // Presets loaders
+  const loadPreset = (type) => {
+    if (type === 'podcast') {
+      setScript(`Speaker 0: Welcome back to the Vibe Voice podcast segment. Today we are cloning human expressions.
+Speaker 1: That is right! The 0.5B model manages this dialogue transition on a local CPU extremely fast.
+Speaker 0: Incredible! It sounds like two real people sitting in this glassmorphic studio together.`);
+      addLog('info', 'Loaded template: [Podcast Dialogue Interview]');
+    } else if (type === 'assistant') {
+      setScript("Speaker 0: Hello, I am your personalized voice assistant. How can I help you customize your Dine Direct orders today?");
+      addLog('info', 'Loaded template: [DineDirect AI Support Agent]');
+    } else if (type === 'news') {
+      setScript("Speaker 1: Breaking news from Microsoft Research. The Vibe Voice speech synthesis models are now live on local devices.");
+      addLog('info', 'Loaded template: [News Bulletins Broadcast]');
+    }
+  };
+
+  if (currentView === 'landing') {
+    return <LandingPage onTryDemo={() => setCurrentView('studio')} />;
+  }
+
+  return (
+    <div className="relative min-h-screen bg-[#07090e] text-[#f0f3fa] font-sans selection:bg-[#00f2fe]/20 select-none pb-12 overflow-x-hidden">
+      {/* Background Floating Ambient Blobs */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
+        <div className="absolute w-[600px] h-[600px] rounded-full top-[-200px] left-[-150px] bg-gradient-to-br from-[#00f2fe]/15 to-transparent blur-[120px] animate-float-glow-1"></div>
+        <div className="absolute w-[700px] h-[700px] rounded-full bottom-[-250px] right-[-150px] bg-gradient-to-br from-[#a259ff]/15 to-transparent blur-[120px] animate-float-glow-2"></div>
+      </div>
+
+      <div className="relative z-10 max-w-[1300px] mx-auto px-4 pt-6 flex flex-col min-h-screen">
+        {/* Header Widget */}
+        <header className="flex flex-col md:flex-row justify-between items-center bg-glass p-4 rounded-2xl border border-white/8 backdrop-blur-xl mb-6 shadow-2xl gap-4">
+          <div className="flex items-center gap-3 cursor-pointer select-none" onClick={() => setCurrentView('landing')}>
+            <Sparkles className="w-8 h-8 text-neon-cyan drop-shadow-[0_0_10px_rgba(0,242,254,0.4)]" />
+            <div>
+              <h1 className="text-xl font-bold tracking-tight">
+                VibeVoice<span className="bg-gradient-to-r from-[#00f2fe] to-[#a259ff] bg-clip-text text-transparent">Studio</span>
+              </h1>
+              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wider">Microsoft Frontier Speech Synthesis</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            {/* Engine Status Panel */}
+            <div className="flex items-center gap-3 bg-[#00f2fe]/5 px-4 py-2 rounded-xl border border-[#00f2fe]/20 shadow-[0_0_12px_rgba(0,242,254,0.06)]">
+              <span className={`w-2 h-2 rounded-full ${
+                modelStatus.loading 
+                  ? 'bg-[#ffb703] shadow-[0_0_8px_#ffb703] animate-pulse'
+                  : modelStatus.loaded
+                    ? 'bg-[#00e673] shadow-[0_0_8px_#00e673]'
+                    : 'bg-[#ff5c8d] shadow-[0_0_8px_#ff5c8d]'
+              }`}></span>
+              
+              <span className="text-xs text-[#8e9bb5]">
+                VibeVoice Engine: <strong className="text-[#f0f3fa]">
+                  {modelStatus.loading 
+                    ? 'Loading AI...' 
+                    : 'VibeVoice-1.5 AI'}
+                </strong>
+              </span>
+            </div>
+
+            {/* Connection badge */}
+            <div className={`flex items-center gap-2 text-xs font-semibold px-4 py-2 rounded-xl border ${
+              wsConnected 
+                ? 'text-[#00f2fe] bg-[#00f2fe]/6 border-[#00f2fe]/20 shadow-[0_0_8px_rgba(0,242,254,0.1)]' 
+                : 'text-[#8e9bb5] bg-white/4 border-white/5'
+            }`}>
+              <Radio className={`w-4 h-4 ${wsConnected ? 'animate-pulse' : ''}`} />
+              <span>{wsConnected ? 'Connected' : 'Offline'}</span>
+            </div>
+
+            <button
+              onClick={() => setCurrentView('landing')}
+              className="flex items-center gap-1.5 px-4 py-2 text-xs font-bold bg-white/4 border border-white/5 hover:border-white/12 rounded-xl hover:bg-white/8 transition duration-200 cursor-pointer active:scale-95 text-white"
+            >
+              Back to Home
+            </button>
+          </div>
+        </header>
+
+        {/* Dashboard Grid Grid */}
+        <main className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-6 flex-1">
+          {/* Left Column: Voice Cloning Controls */}
+          <section className="bg-glass p-6 rounded-3xl flex flex-col gap-5">
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <Settings className="w-5 h-5 text-neon-cyan" />
+                <h2 className="text-lg font-semibold">Voice Cloning Center</h2>
+              </div>
+              <p className="text-xs text-[#8e9bb5] leading-relaxed">Clone any voice in seconds. Record or upload a 10-30s audio sample to create a speaker profile prompt.</p>
+            </div>
+
+            {/* Speaker Slots */}
+            {speakers.map((spk, idx) => {
+              const colorClasses = spk.id === 0 
+                ? 'bg-[#00f2fe]/6 border-[#00f2fe]/20 text-[#00f2fe]' 
+                : spk.id === 1 
+                  ? 'bg-[#a259ff]/6 border-[#a259ff]/20 text-[#a259ff]'
+                  : spk.color === 'emerald' ? 'bg-[#00e673]/6 border-[#00e673]/20 text-[#00e673]'
+                  : spk.color === 'amber' ? 'bg-[#ffb703]/6 border-[#ffb703]/20 text-[#ffb703]'
+                  : spk.color === 'rose' ? 'bg-[#ff5c8d]/6 border-[#ff5c8d]/20 text-[#ff5c8d]'
+                  : 'bg-[#00f2fe]/6 border-[#00f2fe]/20 text-[#00f2fe]';
+
+              return (
+                <div key={spk.id} className="bg-glass-card p-4 rounded-2xl flex flex-col gap-3 transition duration-300 relative group">
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-bold uppercase tracking-wider text-[#8e9bb5]">Speaker {spk.id}</span>
+                      {spk.id > 0 && (
+                        <button
+                          onClick={() => removeSpeaker(spk.id)}
+                          className="opacity-0 group-hover:opacity-100 text-[#ff5c8d]/60 hover:text-[#ff5c8d] p-0.5 transition duration-200 cursor-pointer"
+                          title="Delete speaker slot"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      )}
+                    </div>
+                    <span className={`text-[10px] px-2 py-0.5 rounded-full uppercase font-bold border ${colorClasses}`}>{spk.role}</span>
+                  </div>
+
+                  <div className="flex flex-col gap-1">
+                    <label className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">Speaker Name</label>
+                    <input
+                      type="text"
+                      value={spk.name}
+                      onChange={(e) => {
+                        const val = e.target.value;
+                        setSpeakers(prev => prev.map(s => s.id === spk.id ? { ...s, name: val } : s));
+                      }}
+                      className="bg-black/20 border border-white/6 rounded-lg px-3 py-1.5 text-xs text-[#f0f3fa] focus:border-[#00f2fe] focus:shadow-[0_0_8px_rgba(0,242,254,0.15)] outline-none"
+                    />
+                  </div>
+
+                  <div className="flex flex-col gap-1">
+                    <label className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">Or Select Saved Voice</label>
+                    <div className="flex gap-2">
+                      <select
+                        value={spk.voicePath ? savedVoices.find(v => v.audio_url === spk.voicePath)?.id || '' : ''}
+                        onChange={(e) => {
+                          const val = e.target.value;
+                          const selectedVoice = savedVoices.find(v => String(v.id) === String(val));
+                          if (selectedVoice) {
+                            setSpeakers(prev => prev.map(s => s.id === spk.id ? { 
+                              ...s, 
+                              name: selectedVoice.name, 
+                              voicePath: selectedVoice.audio_url,
+                              previewUrl: selectedVoice.audio_url
+                            } : s));
+                            addLog('info', `Selected saved voice "${selectedVoice.name}" from Supabase.`);
+                          } else {
+                            // Clear selection
+                            setSpeakers(prev => prev.map(s => s.id === spk.id ? { 
+                              ...s, 
+                              voicePath: null,
+                              previewUrl: null
+                            } : s));
+                          }
+                        }}
+                        className="flex-1 bg-black/20 border border-white/6 rounded-lg px-3 py-1.5 text-xs text-[#f0f3fa] focus:border-[#00f2fe] focus:shadow-[0_0_8px_rgba(0,242,254,0.15)] outline-none"
+                      >
+                        <option value="">-- Choose a Voice --</option>
+                        {savedVoices.map(v => (
+                          <option key={v.id} value={v.id}>{v.name}</option>
+                        ))}
+                      </select>
+                      
+                      {spk.voicePath && (() => {
+                        const matchedVoice = savedVoices.find(v => v.audio_url === spk.voicePath);
+                        if (matchedVoice) {
+                          return (
+                            <div className="flex items-center gap-1 shrink-0">
+                              <button
+                                onClick={() => openRenameVoiceModal(matchedVoice.id, matchedVoice.name, matchedVoice.audio_url)}
+                                className="p-1.5 rounded-lg border border-white/6 hover:border-[#00f2fe]/40 text-[#8e9bb5] hover:text-[#00f2fe] bg-white/2 hover:bg-white/5 active:scale-95 transition cursor-pointer"
+                                title="Rename selected voice signature"
+                              >
+                                <Edit2 className="w-3.5 h-3.5" />
+                              </button>
+                              <button
+                                onClick={() => openDeleteVoiceModal(matchedVoice.id, matchedVoice.name, matchedVoice.audio_url)}
+                                className="p-1.5 rounded-lg border border-white/6 hover:border-[#ff5c8d]/40 text-[#8e9bb5] hover:text-[#ff5c8d] bg-white/2 hover:bg-[#ff5c8d]/10 active:scale-95 transition cursor-pointer"
+                                title="Delete selected voice signature"
+                              >
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            </div>
+                          );
+                        }
+                        return null;
+                      })()}
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <button
+                      onClick={() => toggleRecording(spk.id)}
+                      className={`flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-lg border text-xs cursor-pointer active:scale-95 transition duration-200 ${
+                        spk.isRecording
+                          ? 'bg-[#ff5c8d]/20 border-[#ff5c8d] text-[#ff5c8d] animate-pulse'
+                          : 'bg-transparent border-white/10 hover:border-[#00f2fe] hover:text-[#00f2fe] text-white'
+                      }`}
+                    >
+                      {spk.isRecording ? <Square className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
+                      {spk.isRecording ? 'Stop Mic' : 'Record Mic'}
+                    </button>
+
+                    <label className="flex items-center justify-center gap-1.5 py-1.5 px-3 rounded-lg border border-white/10 hover:border-[#00f2fe] hover:text-[#00f2fe] text-white text-xs cursor-pointer active:scale-95 transition duration-200">
+                      <Upload className="w-3.5 h-3.5" />
+                      Upload WAV
+                      <input
+                        type="file"
+                        accept="audio/wav,audio/mp3"
+                        onChange={(e) => handleFileUpload(e, spk.id)}
+                        className="hidden"
+                      />
+                    </label>
+                  </div>
+
+                  {spk.previewUrl && (
+                    <div className="flex flex-col gap-1.5 pt-2 border-t border-dashed border-white/5">
+                      <span className="text-[10px] text-[#00e673] font-semibold flex items-center gap-1">
+                        <CheckCircle className="w-3 h-3" /> Voice Cloned Successfully
+                      </span>
+                      
+                      {/* Premium Custom Reference Audio Player */}
+                      <div className="flex items-center gap-3 bg-white/4 p-2 rounded-xl border border-white/5 mt-1">
+                        <button
+                          onClick={() => playPreview(spk.id, spk.previewUrl)}
+                          className="w-8 h-8 rounded-full bg-[#00f2fe]/20 border border-[#00f2fe]/30 flex items-center justify-center text-[#00f2fe] hover:bg-[#00f2fe] hover:text-black transition duration-200 active:scale-90 cursor-pointer"
+                        >
+                          {playingPreviewId === spk.id ? (
+                            <Square className="w-3.5 h-3.5 fill-current" />
+                          ) : (
+                            <Play className="w-3.5 h-3.5 fill-current ml-0.5" />
+                          )}
+                        </button>
+                        <div className="flex-1">
+                          <span className="text-[10px] text-white font-semibold flex items-center gap-1 select-text">
+                            <Music className="w-3 h-3 text-[#00f2fe]" /> reference_{spk.name}.wav
+                          </span>
+                          <span className="text-[9px] text-[#8e9bb5]">Ready for zero-shot synthesis</span>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+
+            {/* Add Speaker Slot Trigger */}
+            <button
+              onClick={addSpeaker}
+              className="flex items-center justify-center gap-2 w-full py-3 px-4 bg-white/4 hover:bg-[#00f2fe]/10 border border-white/5 hover:border-[#00f2fe]/30 text-[#8e9bb5] hover:text-[#00f2fe] text-xs font-bold rounded-xl transition duration-200 cursor-pointer active:scale-95"
+            >
+              <Plus className="w-4 h-4" />
+              Add Speaker Slot
+            </button>
+
+            {/* Presets */}
+            <div className="mt-2 pt-4 border-t border-white/5 flex flex-col gap-2.5">
+              <h3 className="text-xs font-semibold text-[#8e9bb5]">Dialogue Templates</h3>
+              <div className="flex flex-col gap-2">
+                <button
+                  onClick={() => loadPreset('podcast')}
+                  className="flex items-center gap-2.5 w-full py-2.5 px-3 bg-white/2 hover:bg-white/5 border border-white/5 hover:border-white/10 text-[#8e9bb5] hover:text-[#f0f3fa] text-xs font-medium rounded-xl transition duration-200 justify-start cursor-pointer"
+                >
+                  <Podcast className="w-4 h-4 text-[#a259ff]" />
+                  Podcast Interview Preset
+                </button>
+                <button
+                  onClick={() => loadPreset('assistant')}
+                  className="flex items-center gap-2.5 w-full py-2.5 px-3 bg-white/2 hover:bg-white/5 border border-white/5 hover:border-white/10 text-[#8e9bb5] hover:text-[#f0f3fa] text-xs font-medium rounded-xl transition duration-200 justify-start cursor-pointer"
+                >
+                  <Headset className="w-4 h-4 text-[#00f2fe]" />
+                  DineDirect Voice Agent
+                </button>
+                <button
+                  onClick={() => loadPreset('news')}
+                  className="flex items-center gap-2.5 w-full py-2.5 px-3 bg-white/2 hover:bg-white/5 border border-white/5 hover:border-white/10 text-[#8e9bb5] hover:text-[#f0f3fa] text-xs font-medium rounded-xl transition duration-200 justify-start cursor-pointer"
+                >
+                  <Newspaper className="w-4 h-4 text-[#ff5c8d]" />
+                  News Broadcast Preset
+                </button>
+              </div>
+            </div>
+
+            {/* 🎙️ Voice Vault (Saved Neural Profiles) */}
+            <div className="mt-4 pt-4 border-t border-white/5 flex flex-col gap-2.5">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xs font-bold text-[#8e9bb5] uppercase tracking-wider">Voice Vault ({savedVoices.length})</h3>
+                <span className="text-[10px] text-[#00f2fe] bg-[#00f2fe]/10 px-2 py-0.5 rounded-full font-semibold border border-[#00f2fe]/20">Storage</span>
+              </div>
+              
+              <div className="flex flex-col gap-2 max-h-[220px] overflow-y-auto pr-1">
+                {savedVoices.length === 0 ? (
+                  <p className="text-[11px] text-[#8e9bb5] italic py-2 text-center">No voice profiles saved yet.</p>
+                ) : (
+                  savedVoices.map(v => (
+                    <div key={v.id} className="flex items-center justify-between bg-white/2 hover:bg-white/4 border border-white/5 hover:border-white/10 p-2 rounded-xl transition duration-150 group/vault">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <button
+                          onClick={() => playPreview(v.id, v.audio_url)}
+                          className="w-6 h-6 rounded-full bg-white/5 hover:bg-[#00f2fe]/20 hover:text-[#00f2fe] flex items-center justify-center text-[#8e9bb5] transition active:scale-90 cursor-pointer shrink-0"
+                          title="Preview Voice"
+                        >
+                          {playingPreviewId === v.id ? (
+                            <Square className="w-2.5 h-2.5 fill-current animate-pulse text-[#00f2fe]" />
+                          ) : (
+                            <Play className="w-2.5 h-2.5 fill-current ml-0.5" />
+                          )}
+                        </button>
+                        <span className="text-xs font-semibold text-white truncate max-w-[120px]" title={v.name}>
+                          {v.name}
+                        </span>
+                      </div>
+                      
+                      <div className="flex items-center gap-1 shrink-0">
+                        <button
+                          onClick={() => openRenameVoiceModal(v.id, v.name, v.audio_url)}
+                          className="p-1 rounded hover:bg-white/5 text-[#8e9bb5] hover:text-[#00f2fe] transition active:scale-95 cursor-pointer"
+                          title="Rename voice profile"
+                        >
+                          <Edit2 className="w-3.5 h-3.5" />
+                        </button>
+                        <button
+                          onClick={() => openDeleteVoiceModal(v.id, v.name, v.audio_url)}
+                          className="p-1 rounded hover:bg-[#ff5c8d]/5 text-[#8e9bb5] hover:text-[#ff5c8d] transition active:scale-95 cursor-pointer"
+                          title="Delete voice profile"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </section>
+
+          {/* Right Column: Execution Panels */}
+          <section className="flex flex-col gap-6">
+            
+            {/* Visualizer Container */}
+            <div className="bg-glass p-6 rounded-3xl flex flex-col justify-center items-center gap-4 min-h-[250px] bg-gradient-to-b from-[#101830]/30 to-transparent">
+              <div className="flex flex-col md:flex-row items-center gap-8 w-full max-w-[500px] justify-center">
+                {/* Visual pulsating holographic Orb */}
+                <div className="relative w-[90px] h-[90px] flex items-center justify-center">
+                  <div className={`w-[60px] h-[60px] rounded-full z-10 transition-all duration-500 ${
+                    agentState.status === 'idle' && 'orb-state-idle'
+                  } ${
+                    agentState.status === 'thinking' && 'orb-state-thinking'
+                  } ${
+                    agentState.status === 'speaking' && 'orb-state-speaking'
+                  } ${
+                    agentState.status === 'listening' && 'orb-state-listening'
+                  }`}></div>
+                  
+                  {/* Glowing backing shadows */}
+                  <div className={`absolute -inset-[15px] rounded-full blur-[25px] opacity-50 z-0 transition-all duration-500 ${
+                    agentState.status === 'idle' && 'bg-[#00f2fe]'
+                  } ${
+                    agentState.status === 'thinking' && 'bg-[#a259ff] scale-110 animate-pulse'
+                  } ${
+                    agentState.status === 'speaking' && 'bg-[#ff5c8d]'
+                  } ${
+                    agentState.status === 'listening' && 'bg-[#00e673]'
+                  }`}></div>
+
+                  {/* Expansion speech rings */}
+                  {agentState.status === 'speaking' && (
+                    <>
+                      <div className="absolute inset-0 rounded-full border-2 border-[#ff5c8d] shadow-[0_0_10px_rgba(255,92,141,0.35)] animate-[waveExpand_1.2s_infinite_cubic-bezier(0.1,0.8,0.3,1)] opacity-100 z-10"></div>
+                      <div className="absolute inset-0 rounded-full border-2 border-[#ff5c8d] shadow-[0_0_10px_rgba(255,92,141,0.35)] animate-[waveExpand_1.2s_infinite_cubic-bezier(0.1,0.8,0.3,1)] opacity-100 z-10 [animation-delay:0.6s]"></div>
+                    </>
+                  )}
+                </div>
+
+                <div className="flex flex-col text-center md:text-left gap-1">
+                  <span className="font-orbitron font-extrabold text-lg tracking-wider text-shadow-md text-[#f0f3fa] uppercase">
+                    {agentState.title}
+                  </span>
+                  <p className="text-xs text-[#8e9bb5]">{agentState.sub}</p>
+                </div>
+              </div>
+
+              {/* Waveform Canvas */}
+              <div className="w-full flex justify-center border-t border-white/5 pt-4 mt-2">
+                <canvas ref={canvasRef} width="600" height="90" className="w-full max-w-[600px] h-[75px] rounded-xl"></canvas>
+              </div>
+            </div>
+
+            {/* Script Studio Box */}
+            <div className="bg-glass p-6 rounded-3xl flex flex-col gap-4">
+              <div className="flex justify-between items-center border-b border-white/5 pb-4">
+                <div className="flex items-center gap-2">
+                  <Sparkles className="w-5 h-5 text-[#a259ff]" />
+                  <h2 className="text-md font-semibold">Podcast Script Studio</h2>
+                </div>
+
+                {/* Real-time Streaming Check */}
+                <label className="flex items-center gap-2.5 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={streamMode}
+                    onChange={(e) => setStreamMode(e.target.checked)}
+                    className="hidden"
+                  />
+                  <div className={`w-[42px] h-[22px] rounded-full relative border transition duration-300 ${
+                    streamMode ? 'bg-[#00f2fe]/20 border-[#00f2fe]' : 'bg-white/8 border-white/10'
+                  }`}>
+                    <div className={`w-4 h-4 rounded-full absolute top-[2px] left-[2px] transition-transform duration-300 ${
+                      streamMode ? 'transform translate-x-[20px] bg-[#00f2fe] shadow-[0_0_6px_#00f2fe]' : 'bg-[#f0f3fa]'
+                    }`}></div>
+                  </div>
+                  <span className={`text-xs font-semibold ${streamMode ? 'text-[#00f2fe]' : 'text-[#8e9bb5]'}`}>
+                    Real-time Streaming
+                  </span>
+                </label>
+              </div>
+
+              {/* Textarea script fields */}
+              <div className="bg-black/25 border border-white/8 rounded-xl overflow-hidden">
+                <textarea
+                  value={script}
+                  onChange={(e) => setScript(e.target.value)}
+                  placeholder="Format: Speaker ID: Speech dialog content..."
+                  className="w-full h-[180px] bg-transparent resize-none p-4 text-[#f0f3fa] font-mono text-sm leading-relaxed outline-none border-none"
+                />
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex gap-4">
+                <button
+                  onClick={handleSynthesize}
+                  disabled={isAudioPlayingState}
+                  className="flex-1 flex items-center justify-center gap-2 py-3 px-6 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] hover:shadow-[0_0_20px_rgba(0,242,254,0.4)] text-black font-bold rounded-xl transition duration-200 active:scale-98 cursor-pointer disabled:opacity-40"
+                >
+                  <PlayCircle className="w-5 h-5" />
+                  Synthesize Dialogue
+                </button>
+                <button
+                  onClick={handleStopPlayback}
+                  disabled={!isAudioPlayingState}
+                  className="flex-1 flex items-center justify-center gap-2 py-3 px-6 bg-white/5 border border-white/8 hover:bg-white/10 text-white font-medium rounded-xl transition duration-200 active:scale-98 cursor-pointer disabled:opacity-40"
+                >
+                  <Square className="w-4 h-4" />
+                  Stop Playback
+                </button>
+              </div>
+            </div>
+
+            {/* Master Export Hub */}
+            {compiledAudioUrl && (
+              <div className="bg-glass p-6 rounded-3xl border border-[#00f2fe]/20 bg-gradient-to-r from-[#00f2fe]/4 to-[#a259ff]/4 shadow-[0_0_20px_rgba(0,242,254,0.08)] flex flex-col gap-4 transition duration-300">
+                <div className="flex justify-between items-center border-b border-white/5 pb-3">
+                  <div className="flex items-center gap-2">
+                    <Sparkles className="w-5 h-5 text-neon-cyan animate-pulse" />
+                    <div>
+                      <h3 className="text-sm font-bold text-white uppercase tracking-wider">Podcast Master Output</h3>
+                      <p className="text-[9px] text-[#8e9bb5] uppercase tracking-wide">Ready for download & broadcast</p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] px-2.5 py-0.5 rounded-full bg-[#00e673]/10 border border-[#00e673]/20 text-[#00e673] font-bold">
+                    {compiledAudioMode === 'stream' ? 'Stream Mastered' : 'Engine Compiled'}
+                  </span>
+                </div>
+
+                <div className="flex flex-col sm:flex-row items-center gap-4 justify-between bg-black/20 p-4 rounded-2xl border border-white/5 w-full">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-gradient-to-r from-[#00f2fe] to-[#a259ff] flex items-center justify-center text-black font-bold">
+                      <Volume2 className="w-5 h-5" />
+                    </div>
+                    <div className="text-left">
+                      <h4 className="text-xs font-semibold text-white">VibeVoice_Podcast_Session.wav</h4>
+                      <p className="text-[10px] text-[#8e9bb5]">
+                        {compiledAudioMode === 'stream' ? 'Real-time WebSocket Stream' : 'REST Compiled Dialogue Track'}
+                      </p>
+                    </div>
+                  </div>
+
+                  <a
+                    href={compiledAudioUrl}
+                    download="VibeVoice_Podcast_Session.wav"
+                    className="w-full sm:w-auto flex items-center justify-center gap-2 py-2.5 px-5 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] hover:shadow-[0_0_15px_rgba(0,242,254,0.3)] text-black font-bold rounded-xl text-xs transition duration-200 cursor-pointer active:scale-95"
+                  >
+                    <Upload className="w-4 h-4 rotate-180" />
+                    Export WAV File
+                  </a>
+                </div>
+              </div>
+            )}
+
+            {/* Custom timeline bar player */}
+            {showToolbar && (
+              <div className="bg-glass p-4 rounded-3xl border border-[#00f2fe]/20 shadow-[0_0_20px_rgba(0,242,254,0.05)]">
+                <div className="flex flex-col md:flex-row items-center gap-4 w-full">
+                  <button onClick={handleStopPlayback} className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#00f2fe] hover:text-black hover:shadow-[0_0_10px_rgba(0,242,254,0.35)] transition cursor-pointer">
+                    <Square className="w-4 h-4" />
+                  </button>
+
+                  <div className="flex items-center gap-3 flex-1 w-full">
+                    <span className="font-mono text-[10px] text-[#8e9bb5]">{formatTime(timeline.elapsed)}</span>
+                    <div className="relative flex-1 h-1.5 bg-white/8 rounded-full overflow-hidden">
+                      <div className="absolute left-0 top-0 bottom-0 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] rounded-full" style={{ width: `${(timeline.elapsed / timeline.total) * 100}%` }}></div>
+                    </div>
+                    <span className="font-mono text-[10px] text-[#8e9bb5]">{formatTime(timeline.total)}</span>
+                  </div>
+
+                  <div className="flex items-center gap-3 w-[150px]">
+                    {volume === 0 ? <VolumeX className="w-4 h-4 text-[#8e9bb5]" /> : volume < 50 ? <Volume1 className="w-4 h-4 text-[#8e9bb5]" /> : <Volume2 className="w-4 h-4 text-[#8e9bb5]" />}
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value={volume}
+                      onChange={(e) => setVolume(parseInt(e.target.value))}
+                      className="w-full accent-[#00f2fe] h-1 bg-white/10 rounded-lg outline-none cursor-pointer"
+                    />
+                  </div>
+
+                  <select
+                    value={speed}
+                    onChange={(e) => setSpeed(e.target.value)}
+                    className="bg-white/5 border border-white/8 rounded-lg px-2 py-1 text-xs text-white outline-none cursor-pointer"
+                  >
+                    <option value="0.75" className="bg-[#07090e]">0.75x</option>
+                    <option value="1.0" className="bg-[#07090e]">1.0x</option>
+                    <option value="1.25" className="bg-[#07090e]">1.25x</option>
+                    <option value="1.5" className="bg-[#07090e]">1.5x</option>
+                  </select>
+                </div>
+              </div>
+            )}
+
+            {/* Podcast History & Archive section */}
+            <div className="bg-glass p-6 rounded-3xl border border-white/4 bg-black/40 flex flex-col gap-4">
+              <div className="flex justify-between items-center border-b border-white/5 pb-2 text-xs font-semibold text-[#8e9bb5]">
+                <div className="flex items-center gap-2">
+                  <Podcast className="w-4 h-4 text-[#a259ff] animate-pulse" />
+                  <span className="text-white font-bold uppercase tracking-wider text-[10px]">Supabase Broadcast Archive</span>
+                </div>
+                <span className="text-[10px] bg-[#a259ff]/10 px-2 py-0.5 rounded-full text-neon-purple font-mono border border-[#a259ff]/20">
+                  {podcastHistory.length} Saved
+                </span>
+              </div>
+
+              <div className="max-h-[220px] overflow-y-auto pr-1 flex flex-col gap-2.5 custom-scrollbar">
+                {podcastHistory.length === 0 ? (
+                  <div className="py-8 text-center flex flex-col items-center justify-center gap-2 border border-dashed border-white/5 rounded-2xl bg-white/2">
+                    <Music className="w-8 h-8 text-[#8e9bb5]/40" />
+                    <div>
+                      <p className="text-xs text-white font-medium">No podcasts archived yet</p>
+                      <p className="text-[10px] text-[#8e9bb5] mt-0.5 max-w-[200px]">Generate speech scripts to automatically archive them permanently!</p>
+                    </div>
+                  </div>
+                ) : (
+                  podcastHistory.map((podcast) => (
+                    <div 
+                      key={podcast.id} 
+                      className="p-3 bg-white/3 border border-white/5 rounded-xl hover:border-white/10 hover:bg-white/5 transition duration-200 flex items-center justify-between gap-3 group/item relative overflow-hidden"
+                    >
+                      {isAudioPlayingState && compiledAudioUrl === podcast.audio_url && (
+                        <div className="absolute inset-0 bg-gradient-to-r from-[#a259ff]/10 to-transparent pointer-events-none" />
+                      )}
+
+                      <div className="flex items-center gap-3 min-w-0">
+                        <button 
+                          onClick={() => playHistoryPodcast(podcast)}
+                          className={`w-8 h-8 rounded-full flex items-center justify-center transition active:scale-95 cursor-pointer shrink-0 ${
+                            isAudioPlayingState && compiledAudioUrl === podcast.audio_url
+                              ? 'bg-[#ff5c8d] text-white animate-pulse'
+                              : 'bg-white/5 hover:bg-white/10 text-white'
+                          }`}
+                        >
+                          {isAudioPlayingState && compiledAudioUrl === podcast.audio_url ? (
+                            <Square className="w-3.5 h-3.5 fill-current" />
+                          ) : (
+                            <Play className="w-3.5 h-3.5 fill-current ml-0.5" />
+                          )}
+                        </button>
+
+                        <div className="min-w-0 flex flex-col gap-0.5">
+                          <span className="text-xs font-bold text-white truncate max-w-[240px] block group-hover/item:text-[#00f2fe] transition duration-150">
+                            {podcast.title}
+                          </span>
+                          <span className="text-[10px] text-[#8e9bb5] truncate block max-w-[240px] leading-relaxed cursor-help" title={podcast.text_script}>
+                            Script: "{podcast.text_script}"
+                          </span>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-2 shrink-0">
+                        <a 
+                          href={podcast.audio_url}
+                          download
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-1.5 rounded-lg border border-white/6 hover:border-[#00f2fe]/40 text-[#8e9bb5] hover:text-white hover:bg-white/4 active:scale-95 transition"
+                          title="Open audio in new tab / download"
+                        >
+                          <Upload className="w-3.5 h-3.5 rotate-180" />
+                        </a>
+                        <button
+                          onClick={() => openRenamePodcastModal(podcast.id, podcast.title)}
+                          className="p-1.5 rounded-lg border border-white/6 hover:border-[#00f2fe]/40 text-[#8e9bb5] hover:text-white hover:bg-white/4 active:scale-95 transition cursor-pointer"
+                          title="Rename podcast title"
+                        >
+                          <Edit2 className="w-3.5 h-3.5" />
+                        </button>
+                        <button
+                          onClick={() => openDeletePodcastModal(podcast.id, podcast.title, podcast.audio_url)}
+                          className="p-1.5 rounded-lg border border-white/6 hover:border-[#ff5c8d]/40 text-[#8e9bb5] hover:text-[#ff5c8d] hover:bg-[#ff5c8d]/5 active:scale-95 transition cursor-pointer"
+                          title="Delete podcast from Supabase archive"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+
+            {/* Diagnostic Terminal card */}
+            <div className="bg-glass p-6 rounded-3xl border border-white/4 bg-black/40">
+              <div className="flex justify-between items-center border-b border-white/5 pb-2 mb-3 text-xs font-semibold text-[#8e9bb5]">
+                <div className="flex items-center gap-2">
+                  <Terminal className="w-4 h-4 text-[#00f2fe]" />
+                  <span>Agent HUD Console Logs</span>
+                </div>
+                <button
+                  onClick={() => setLogs([{ type: 'system', text: 'Console buffer cleared.', time: new Date().toLocaleTimeString() }])}
+                  className="px-2 py-0.5 rounded border border-white/10 hover:border-white/20 active:scale-95 text-[10px] text-white hover:bg-white/2 cursor-pointer transition duration-150"
+                >
+                  Clear Buffer
+                </button>
+              </div>
+
+              <div id="consoleBody" className="h-[120px] overflow-y-auto font-mono text-[10.5px] leading-relaxed flex flex-col gap-1.5 pr-2 select-text">
+                {logs.map((logItem, idx) => (
+                  <div key={idx} className={`px-2 py-0.5 rounded ${
+                    logItem.type === 'system' && 'text-[#8e9bb5] bg-white/2'
+                  } ${
+                    logItem.type === 'info' && 'text-[#00f2fe] bg-[#00f2fe]/2'
+                  } ${
+                    logItem.type === 'success' && 'text-[#00e673] bg-[#00e673]/2'
+                  } ${
+                    logItem.type === 'error' && 'text-[#ff5c8d] bg-[#ff5c8d]/2'
+                  } ${
+                    logItem.type === 'word' && 'text-white font-medium drop-shadow-[0_0_4px_rgba(255,255,255,0.25)]'
+                  }`}>
+                    [{logItem.time}] {logItem.text}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+          </section>
+        </main>
+      </div>
+
+      {/* 🎙️ Premium Glassmorphic Custom Voice Profile Naming Modal */}
+      {namingModal.isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md animate-fade-in">
+          <div className="w-[90%] max-w-[420px] bg-gradient-to-b from-white/10 to-white/3 border border-white/12 backdrop-blur-2xl p-6 rounded-3xl shadow-2xl flex flex-col gap-4 animate-scale-up">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-[#00f2fe]/10 flex items-center justify-center border border-[#00f2fe]/20">
+                <Sparkles className="w-5 h-5 text-neon-cyan animate-pulse" />
+              </div>
+              <div>
+                <h3 className="text-base font-bold text-white tracking-tight">Save Custom Voice Signature</h3>
+                <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wider">Neural Studio Archivist</p>
+              </div>
+            </div>
+            
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Give your new voice profile signature a descriptive name (e.g. <em>John's Deep Voice</em>, <em>Excited Host</em>) to save it permanently in your custom voice selection.
+            </p>
+
+            <div className="flex flex-col gap-1.5 mt-2">
+              <label className="text-[10px] text-[#8e9bb5] uppercase tracking-wide font-semibold">Voice Signature Name</label>
+              <input
+                type="text"
+                autoFocus
+                placeholder="Enter voice signature name..."
+                value={voiceNameInput}
+                onChange={(e) => setVoiceNameInput(e.target.value)}
+                className="bg-black/40 border border-white/10 focus:border-[#00f2fe] rounded-xl px-4 py-2.5 text-xs text-white outline-none focus:shadow-[0_0_12px_rgba(0,242,254,0.2)] transition duration-200"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    const name = voiceNameInput.trim() || namingModal.defaultName;
+                    uploadVoiceProfile(namingModal.fileBlob, namingModal.speakerId, name);
+                    setNamingModal({ isOpen: false, fileBlob: null, speakerId: null, defaultName: '' });
+                  }
+                }}
+              />
+            </div>
+
+            <div className="flex justify-end gap-3 mt-3">
+              <button
+                onClick={() => setNamingModal({ isOpen: false, fileBlob: null, speakerId: null, defaultName: '' })}
+                className="px-4 py-2 rounded-xl border border-white/6 hover:bg-white/4 active:scale-95 text-xs font-semibold text-[#8e9bb5] hover:text-white cursor-pointer transition duration-150"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  const name = voiceNameInput.trim() || namingModal.defaultName;
+                  uploadVoiceProfile(namingModal.fileBlob, namingModal.speakerId, name);
+                  setNamingModal({ isOpen: false, fileBlob: null, speakerId: null, defaultName: '' });
+                }}
+                className="px-5 py-2 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-xs font-bold text-black hover:shadow-[0_0_15px_rgba(0,242,254,0.3)] active:scale-95 cursor-pointer transition duration-200"
+              >
+                Save to Studio
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 🔮 Premium custom action (Rename/Delete) modal */}
+      {actionModal.isOpen && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-md animate-fade-in">
+          <div className="w-[90%] max-w-[420px] bg-gradient-to-b from-white/10 to-white/3 border border-white/12 backdrop-blur-2xl p-6 rounded-3xl shadow-2xl flex flex-col gap-4 animate-scale-up">
+            <div className="flex justify-between items-center border-b border-white/6 pb-3">
+              <div className="flex items-center gap-2">
+                <Sparkles className="w-5 h-5 text-neon-cyan" />
+                <h3 className="text-sm font-bold text-white uppercase tracking-wider">
+                  {actionModal.type.startsWith('rename') ? 'Rename Profile' : 'Confirm Action'}
+                </h3>
+              </div>
+              <button 
+                onClick={() => setActionModal({ isOpen: false, type: '', id: null, oldValue: '', inputValue: '', audioUrl: '', profileName: '' })}
+                className="text-[#8e9bb5] hover:text-white transition cursor-pointer text-sm"
+              >
+                ✕
+              </button>
+            </div>
+
+            {actionModal.type.startsWith('rename') ? (
+              <div className="flex flex-col gap-3">
+                <p className="text-xs text-[#8e9bb5] leading-relaxed">
+                  Enter a new name for your {actionModal.type === 'rename_voice' ? 'voice profile signature' : 'podcast archive title'}:
+                </p>
+                <input
+                  type="text"
+                  autoFocus
+                  value={actionModal.inputValue}
+                  onChange={(e) => setActionModal(prev => ({ ...prev, inputValue: e.target.value }))}
+                  className="bg-black/40 border border-white/10 focus:border-[#00f2fe] rounded-xl px-4 py-2.5 text-xs text-white outline-none focus:shadow-[0_0_12px_rgba(0,242,254,0.2)] transition duration-200"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      if (actionModal.type === 'rename_voice') {
+                        executeRenameVoice(actionModal.id, actionModal.inputValue, actionModal.audioUrl);
+                      } else {
+                        executeRenamePodcast(actionModal.id, actionModal.inputValue);
+                      }
+                      setActionModal({ isOpen: false, type: '', id: null, oldValue: '', inputValue: '', audioUrl: '', profileName: '' });
+                    }
+                  }}
+                />
+                <div className="flex items-center gap-2.5 mt-2">
+                  <button
+                    onClick={() => setActionModal({ isOpen: false, type: '', id: null, oldValue: '', inputValue: '', audioUrl: '', profileName: '' })}
+                    className="flex-1 py-2.5 text-xs font-bold bg-white/4 border border-white/5 hover:border-white/12 rounded-xl text-white transition active:scale-95 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (actionModal.type === 'rename_voice') {
+                        executeRenameVoice(actionModal.id, actionModal.inputValue, actionModal.audioUrl);
+                      } else {
+                        executeRenamePodcast(actionModal.id, actionModal.inputValue);
+                      }
+                      setActionModal({ isOpen: false, type: '', id: null, oldValue: '', inputValue: '', audioUrl: '', profileName: '' });
+                    }}
+                    className="flex-1 py-2.5 text-xs font-bold bg-gradient-to-r from-[#00f2fe] to-[#a259ff] hover:shadow-[0_0_12px_rgba(0,242,254,0.3)] text-black rounded-xl transition active:scale-95 cursor-pointer"
+                  >
+                    Save Changes
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3">
+                <p className="text-xs text-[#8e9bb5] leading-relaxed">
+                  Are you sure you want to permanently delete the {actionModal.type === 'delete_voice' ? 'voice profile signature' : 'archived podcast'} <strong className="text-white">"{actionModal.profileName}"</strong>? This action cannot be undone.
+                </p>
+                <div className="flex items-center gap-2.5 mt-2">
+                  <button
+                    onClick={() => setActionModal({ isOpen: false, type: '', id: null, oldValue: '', inputValue: '', audioUrl: '', profileName: '' })}
+                    className="flex-1 py-2.5 text-xs font-bold bg-white/4 border border-white/5 hover:border-white/12 rounded-xl text-white transition active:scale-95 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (actionModal.type === 'delete_voice') {
+                        executeDeleteVoice(actionModal.id, actionModal.audioUrl, actionModal.profileName);
+                      } else {
+                        executeDeletePodcast(actionModal.id, actionModal.audioUrl, actionModal.profileName);
+                      }
+                      setActionModal({ isOpen: false, type: '', id: null, oldValue: '', inputValue: '', audioUrl: '', profileName: '' });
+                    }}
+                    className="flex-1 py-2.5 text-xs font-bold bg-[#ff5c8d] hover:bg-[#ff5c8d]/90 hover:shadow-[0_0_12px_rgba(255,92,141,0.3)] text-white rounded-xl transition active:scale-95 cursor-pointer"
+                  >
+                    Delete Permanently
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ==========================================================================
+// WAV Exporter Helpers
+// ==========================================================================
+function exportWav(chunks, sampleRate) {
+  let totalLength = 0;
+  for (const chunk of chunks) {
+    totalLength += chunk.length;
+  }
+  
+  const result = new Float32Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  }
+  
+  const buffer = new ArrayBuffer(44 + totalLength * 2);
+  const view = new DataView(buffer);
+  
+  // RIFF identifier
+  writeString(view, 0, 'RIFF');
+  // File length
+  view.setUint32(4, 36 + totalLength * 2, true);
+  // RIFF type
+  writeString(view, 8, 'WAVE');
+  // Format chunk identifier
+  writeString(view, 12, 'fmt ');
+  // Format chunk length
+  view.setUint32(16, 16, true);
+  // Sample format (raw PCM)
+  view.setUint16(20, 1, true);
+  // Channel count (mono)
+  view.setUint16(22, 1, true);
+  // Sample rate
+  view.setUint32(24, sampleRate, true);
+  // Byte rate (sample rate * block align)
+  view.setUint32(28, sampleRate * 2, true);
+  // Block align (channel count * bytes per sample)
+  view.setUint16(32, 2, true);
+  // Bits per sample
+  view.setUint16(34, 16, true);
+  // Data chunk identifier
+  writeString(view, 36, 'data');
+  // Data chunk length
+  view.setUint32(40, totalLength * 2, true);
+  
+  // Write PCM audio samples
+  let index = 44;
+  for (let i = 0; i < totalLength; i++) {
+    const s = Math.max(-1, Math.min(1, result[i]));
+    view.setInt16(index, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+    index += 2;
+  }
+  
+  return new Blob([view], { type: 'audio/wav' });
+}
+
+function writeString(view, offset, string) {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+export default App;

frontend/src/LandingPage.jsx

@@ -0,0 +1,1148 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Sparkles,
+  ArrowRight,
+  Play,
+  Square,
+  Heart,
+  Cpu,
+  FileText,
+  ChevronDown,
+  Check,
+  Volume2,
+  MessageSquare,
+  Mic,
+  Disc,
+  Layers,
+  Globe,
+  Radio,
+  Headphones,
+  PlayCircle,
+  Settings,
+  Flame,
+  Volume1,
+  HelpCircle,
+  User,
+  ExternalLink,
+  BookOpen
+} from 'lucide-react';
+
+const Github = (props) => (
+  <svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={props.className || "w-5 h-5"}>
+    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+  </svg>
+);
+
+export default function LandingPage({ onTryDemo }) {
+  // Collapsible FAQ Active Index
+  const [activeFaq, setActiveFaq] = useState(null);
+
+  // Mock Audio Player Demo State
+  const [mockIsPlaying, setMockIsPlaying] = useState(false);
+  const [mockActiveSpeaker, setMockActiveSpeaker] = useState(0);
+  const [mockTimeline, setMockTimeline] = useState(0);
+  const [selectedVoicePreset, setSelectedVoicePreset] = useState('podcast');
+  const canvasRef = useRef(null);
+  const animationFrameId = useRef(null);
+
+  // Scroll to section helper
+  const scrollToSection = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  // Mock Speech Dialogues matching preset
+  const voicePresets = {
+    podcast: {
+      title: "Co-Hosted Tech Podcast",
+      description: "Expressive debate with turn-taking and natural emphasis.",
+      duration: 12,
+      speakers: [
+        { id: 0, name: "David (AI Host)", color: "cyan" },
+        { id: 1, name: "Zira (AI Guest)", color: "purple" }
+      ],
+      script: [
+        { spk: 0, text: "Welcome back! Today we are discussing open-source conversational AI.", time: 0 },
+        { spk: 1, text: "Yes! And VibeVoice is achieving incredible zero-shot prosody matching.", time: 4 },
+        { spk: 0, text: "It runs in real-time, even on a basic CPU node.", time: 8 }
+      ]
+    },
+    audiobook: {
+      title: "Atmospheric Audiobook",
+      description: "Rich descriptive narration with dramatic pauses.",
+      duration: 15,
+      speakers: [
+        { id: 0, name: "Narrator", color: "amber" }
+      ],
+      script: [
+        { spk: 0, text: "The ancient model weights loaded slowly, breathing life into the synthesis.", time: 0 },
+        { spk: 0, text: "Every voice clone whispered of a future built on neural acoustic tokens...", time: 7 }
+      ]
+    },
+    assistant: {
+      title: "High-Speed Dynamic Support Agent",
+      description: "Polite, helpful customer transaction stream.",
+      duration: 10,
+      speakers: [
+        { id: 0, name: "VibeVoice Agent", color: "emerald" },
+        { id: 1, name: "User Alex", color: "rose" }
+      ],
+      script: [
+        { spk: 0, text: "Hello! I am VibeVoice AI. I can assist with your DineDirect order.", time: 0 },
+        { spk: 1, text: "Perfect. Add a dynamic voice reference for Speaker 2.", time: 4 },
+        { spk: 0, text: "Certainly! Setting up customized vocal signature parameters.", time: 7 }
+      ]
+    }
+  };
+
+  // Switch voice preset
+  useEffect(() => {
+    setMockIsPlaying(false);
+    setMockTimeline(0);
+    setMockActiveSpeaker(0);
+  }, [selectedVoicePreset]);
+
+  // Mock play timeline tick
+  useEffect(() => {
+    let interval;
+    if (mockIsPlaying) {
+      const activePreset = voicePresets[selectedVoicePreset];
+      interval = setInterval(() => {
+        setMockTimeline(prev => {
+          if (prev >= activePreset.duration) {
+            setMockIsPlaying(false);
+            return 0;
+          }
+          const nextVal = prev + 0.1;
+          // Determine active speaker based on time
+          const matchLine = [...activePreset.script].reverse().find(line => nextVal >= line.time);
+          if (matchLine && matchLine.spk !== mockActiveSpeaker) {
+            setMockActiveSpeaker(matchLine.spk);
+          }
+          return nextVal;
+        });
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [mockIsPlaying, selectedVoicePreset, mockActiveSpeaker]);
+
+  // Floating Particles or Voice Wave Animation for Visualizer Mock
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+    let time = 0;
+
+    const render = () => {
+      time += 0.04;
+      ctx.fillStyle = 'rgba(7, 9, 14, 0.15)'; // Back-sweep fade
+      ctx.fillRect(0, 0, width, height);
+
+      // Multiple colored floating sin waves
+      const waves = [
+        { amplitude: mockIsPlaying ? 35 : 8, speed: 1.5, color: 'rgba(0, 242, 254, 0.35)', freq: 0.015 },
+        { amplitude: mockIsPlaying ? 25 : 6, speed: 2.2, color: 'rgba(162, 89, 255, 0.3)', freq: 0.02 },
+        { amplitude: mockIsPlaying ? 15 : 4, speed: -1.2, color: 'rgba(255, 92, 141, 0.25)', freq: 0.01 }
+      ];
+
+      waves.forEach(w => {
+        ctx.beginPath();
+        ctx.lineWidth = mockIsPlaying ? 2.5 : 1.5;
+        ctx.strokeStyle = w.color;
+        ctx.shadowBlur = mockIsPlaying ? 8 : 0;
+        ctx.shadowColor = w.color;
+
+        for (let x = 0; x < width; x++) {
+          const y = height / 2 + Math.sin(x * w.freq + time * w.speed) * w.amplitude * Math.sin(x / width * Math.PI);
+          if (x === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+      });
+
+      // Animated voice bars on left and right borders
+      if (mockIsPlaying) {
+        ctx.fillStyle = 'rgba(0, 242, 254, 0.15)';
+        for (let i = 0; i < 15; i++) {
+          const barHeight = Math.abs(Math.sin(time * 3 + i)) * 40;
+          ctx.fillRect(15 + i * 8, height - barHeight - 10, 5, barHeight);
+          ctx.fillRect(width - 15 - i * 8 - 5, height - barHeight - 10, 5, barHeight);
+        }
+      }
+
+      animationFrameId.current = requestAnimationFrame(render);
+    };
+
+    render();
+    return () => cancelAnimationFrame(animationFrameId.current);
+  }, [mockIsPlaying]);
+
+  // Framer motion containers configs
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.15 } }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 60 } }
+  };
+
+  // FAQ List
+  const faqs = [
+    {
+      q: "What is VibeVoice AI?",
+      a: "VibeVoice AI is an advanced, research-grade open-source neural acoustic speech model developed by Microsoft Research. It leverages multi-turn continuous speaker tokenization to generate hyper-realistic, human-like voice synthesis and dialogue streams without requiring massive GPU cluster infrastructures."
+    },
+    {
+      q: "Is it completely open source?",
+      a: "Yes, VibeVoice is fully open source. All model architectures, inference engines, and base neural weights (including the lightweight 0.5B parameter variant) are accessible on our GitHub repository and Hugging Face space for developers, researchers, and synthetic media creators."
+    },
+    {
+      q: "Does it support multi-speaker dialogue synthesis?",
+      a: "Absolutely. Rather than just speaking single phrases, VibeVoice excels at context-aware turn-taking. You can write scripts detailing conversations for two or more speakers, and the model handles transitions, conversational pauses, dynamic pacing, and speech emphasis with extreme stability."
+    },
+    {
+      q: "Can it generate full podcast discussions?",
+      a: "Yes. By providing a scripted conversation template containing Speaker IDs (e.g. Speaker 0, Speaker 1), the engine aggregates dialogue cues to model natural flow, interruptions, and pacing, producing broadcast-ready podcast tracks."
+    },
+    {
+      q: "Does it support emotional speech synthesis and voice cloning?",
+      a: "Yes. VibeVoice utilizes zero-shot speaker adaptation. By capturing or uploading a brief 10-30 second reference WAV file, it extracts pitch, vocal envelope, and prosody parameters. The model then synthesizes conversational speech matching the original speaker's vocal signature and dynamic emotional tone."
+    },
+    {
+      q: "Can developers fine-tune the model weights?",
+      a: "Yes! The repository contains full PyTorch training recipes, quantization parameters, and Hugging Face pipeline wrappers. You can fine-tune VibeVoice on custom speech datasets or scale it in commercial server clouds utilizing GPU-optimized TensorRT containers."
+    },
+    {
+      q: "Is it suitable for research projects?",
+      a: "VibeVoice was built from the ground up to support academic and commercial speech research. The architecture decouples text tokenization and acoustic prosody representation, offering researchers a clean pipeline to inspect neural audio modeling."
+    }
+  ];
+
+  return (
+    <div className="min-h-screen text-[#f0f3fa] selection:bg-[#00f2fe]/20 relative overflow-x-hidden font-sans">
+      
+      {/* Dynamic Glowing Parallax Backdrop Background */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
+        <div className="absolute w-[800px] h-[800px] rounded-full top-[-300px] left-[-200px] bg-gradient-to-br from-[#00f2fe]/10 to-[#a259ff]/5 blur-[160px] animate-float-glow-1"></div>
+        <div className="absolute w-[900px] h-[900px] rounded-full bottom-[-300px] right-[-200px] bg-gradient-to-br from-[#ff5c8d]/10 to-[#a259ff]/5 blur-[180px] animate-float-glow-2"></div>
+        <div className="absolute w-[600px] h-[600px] rounded-full top-[40%] right-[10%] bg-gradient-to-br from-[#00f2fe]/5 to-[#ff5c8d]/5 blur-[150px] animate-[floatGlow_35s_infinite_alternate_ease-in-out]"></div>
+      </div>
+
+      {/* Modern Glassmorphic Sticky Navigation */}
+      <header className="sticky top-0 z-50 bg-glass/60 backdrop-blur-xl border-b border-white/5 py-4">
+        <div className="max-w-[1300px] mx-auto px-6 flex justify-between items-center">
+          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+            <Sparkles className="w-8 h-8 text-neon-cyan drop-shadow-[0_0_10px_rgba(0,242,254,0.4)]" />
+            <div>
+              <span className="text-xl font-bold tracking-tight">
+                VibeVoice<span className="bg-gradient-to-r from-[#00f2fe] to-[#a259ff] bg-clip-text text-transparent">AI</span>
+              </span>
+              <span className="block text-[8.5px] text-[#8e9bb5] uppercase tracking-widest font-semibold">Microsoft Research Ecosystem</span>
+            </div>
+          </div>
+
+          {/* Desktop Menu links */}
+          <nav className="hidden md:flex items-center gap-8 text-xs font-semibold text-[#8e9bb5]">
+            <button onClick={() => scrollToSection('about')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">About</button>
+            <button onClick={() => scrollToSection('features')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Features</button>
+            <button onClick={() => scrollToSection('capabilities')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Capabilities</button>
+            <button onClick={() => scrollToSection('demo')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Interactive Demo</button>
+            <button onClick={() => scrollToSection('open-source')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">Open Source</button>
+            <button onClick={() => scrollToSection('faq')} className="hover:text-white hover:text-shadow transition duration-200 cursor-pointer">FAQs</button>
+          </nav>
+
+          <div className="flex items-center gap-3">
+            <a
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 bg-white/4 border border-white/5 hover:border-[#00f2fe]/40 rounded-xl hover:bg-white/8 transition duration-200 cursor-pointer"
+            >
+              <Github className="w-4 h-4 text-white" />
+            </a>
+            <button
+              onClick={onTryDemo}
+              className="relative group overflow-hidden px-4.5 py-2 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-bold text-xs transition duration-200 cursor-pointer active:scale-95 shadow-[0_4px_15px_rgba(0,242,254,0.3)] hover:shadow-[0_4px_25px_rgba(0,242,254,0.5)]"
+            >
+              Launch Studio Workspace
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* 1. HERO SECTION */}
+      <section className="relative z-10 pt-16 md:pt-24 pb-20 max-w-[1300px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-12 items-center">
+        <motion.div
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+          className="flex flex-col gap-6 text-left"
+        >
+          {/* Neon Ribbon Badge */}
+          <div className="inline-flex items-center gap-2 self-start bg-[#00f2fe]/10 border border-[#00f2fe]/30 rounded-full px-4 py-1.5 text-xs text-neon-cyan select-none">
+            <Radio className="w-3.5 h-3.5 animate-pulse text-neon-cyan" />
+            <span className="font-bold uppercase tracking-wider text-[10px]">Active Open-Source Model: VibeVoice v1.5</span>
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-[1.08] text-white">
+            VibeVoice <span className="bg-gradient-to-r from-[#00f2fe] via-[#a259ff] to-[#ff5c8d] bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(0,242,254,0.15)]">AI</span>
+          </h1>
+          
+          <p className="text-lg md:text-xl font-medium text-[#8e9bb5] max-w-[550px] leading-relaxed">
+            Human-like conversational speech generation powered by AI. Experience the future of multi-speaker dialogue and expressive zero-shot voice synthesis.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 pt-3">
+            <button
+              onClick={onTryDemo}
+              className="flex items-center justify-center gap-2.5 px-7 py-4.5 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-extrabold text-sm transition duration-200 cursor-pointer hover:shadow-[0_0_25px_rgba(0,242,254,0.45)] active:scale-95 group"
+            >
+              Try Studio Playground
+              <ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform duration-200" />
+            </button>
+            <a
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center justify-center gap-2.5 px-7 py-4.5 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/15 text-white font-bold text-sm transition duration-200 cursor-pointer active:scale-95"
+            >
+              <Github className="w-5 h-5" />
+              View on GitHub
+            </a>
+          </div>
+
+          {/* Feature highlights inside Hero */}
+          <div className="grid grid-cols-3 gap-6 pt-10 border-t border-white/5 max-w-[520px]">
+            <div>
+              <h4 className="text-2xl font-extrabold text-white">24kHz</h4>
+              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">High-Fidelity Audio</p>
+            </div>
+            <div>
+              <h4 className="text-2xl font-extrabold text-white">&lt; 250ms</h4>
+              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">Dynamic Latency</p>
+            </div>
+            <div>
+              <h4 className="text-2xl font-extrabold text-white">1.5B</h4>
+              <p className="text-[10px] text-[#8e9bb5] uppercase tracking-wide">Quantized weights</p>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Hero Visualizer Graphic */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9, y: 30 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={{ duration: 1, ease: "easeOut" }}
+          className="relative flex justify-center items-center"
+        >
+          {/* Ambient Background Circles */}
+          <div className="absolute w-[350px] h-[350px] rounded-full border border-dashed border-[#00f2fe]/20 animate-[orbSpin_40s_infinite_linear]"></div>
+          <div className="absolute w-[450px] h-[450px] rounded-full border border-dashed border-[#a259ff]/10 animate-[orbSpin_60s_infinite_linear_reverse]"></div>
+
+          {/* Central AI Orb Graphic */}
+          <div className="relative w-[280px] h-[280px] rounded-full bg-glass flex items-center justify-center border border-white/10 shadow-3xl">
+            {/* Spinning Holographic Waves */}
+            <div className="absolute inset-4 rounded-full bg-gradient-to-tr from-[#00f2fe]/20 to-[#a259ff]/20 animate-[orbSpin_12s_infinite_linear]"></div>
+            <div className="absolute inset-8 rounded-full bg-gradient-to-br from-[#ff5c8d]/15 to-[#a259ff]/10 animate-[orbSpin_8s_infinite_linear_reverse]"></div>
+            
+            {/* Pulsating core */}
+            <div className="w-[120px] h-[120px] rounded-full bg-gradient-to-tr from-[#00f2fe] via-[#a259ff] to-[#ff5c8d] shadow-[0_0_40px_rgba(0,242,254,0.45)] animate-pulse flex items-center justify-center relative">
+              <Headphones className="w-12 h-12 text-black" />
+            </div>
+
+            {/* Glowing satellites */}
+            <div className="absolute top-[10%] left-[10%] w-6 h-6 rounded-full bg-[#00f2fe]/80 blur-[4px] animate-pulse"></div>
+            <div className="absolute bottom-[15%] right-[12%] w-8 h-8 rounded-full bg-[#ff5c8d]/60 blur-[6px] animate-pulse"></div>
+          </div>
+
+          {/* Floating UI Audio Indicators */}
+          <div className="absolute top-[15%] right-[5%] bg-glass p-3.5 rounded-2xl border border-white/10 flex items-center gap-2.5 shadow-2xl animate-[floatGlow_20s_infinite_alternate_ease-in-out]">
+            <Mic className="w-4 h-4 text-[#00f2fe]" />
+            <div className="text-left">
+              <span className="block text-[9px] text-[#8e9bb5] uppercase font-bold tracking-wide">Cloned Vocals</span>
+              <span className="text-[11px] font-bold text-white">David_Signature.wav</span>
+            </div>
+          </div>
+
+          <div className="absolute bottom-[20%] left-[0%] bg-glass p-3.5 rounded-2xl border border-white/10 flex items-center gap-2.5 shadow-2xl animate-[floatGlow_22s_infinite_alternate-reverse_ease-in-out]">
+            <Radio className="w-4 h-4 text-[#a259ff] animate-pulse" />
+            <div className="text-left">
+              <span className="block text-[9px] text-[#8e9bb5] uppercase font-bold tracking-wide">Stream Broadcast</span>
+              <span className="text-[11px] font-bold text-[#00e673]">Active turn-taking</span>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+
+      {/* 2. ABOUT SECTION */}
+      <section id="about" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={containerVariants}
+          className="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-12 items-center"
+        >
+          <motion.div variants={itemVariants} className="flex flex-col gap-5 text-left">
+            <span className="text-xs font-bold uppercase tracking-widest text-neon-cyan">The Research Foundation</span>
+            <h2 className="text-3xl md:text-4xl font-extrabold text-white leading-tight">
+              A Leap Forward in Expressive Speech Synthesis
+            </h2>
+            <p className="text-sm text-[#8e9bb5] leading-relaxed">
+              VibeVoice is an advanced open-source AI voice model developed to bridge the gap between flat, robotic speech-to-text outputs and natural, multi-speaker conversational dialogue. 
+            </p>
+            <div className="flex gap-4 pt-2">
+              <a
+                href="https://huggingface.co"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-xs font-bold text-white hover:text-neon-cyan transition duration-200"
+              >
+                Hugging Face Portal <ExternalLink className="w-3.5 h-3.5" />
+              </a>
+              <a
+                href="https://github.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-xs font-bold text-white hover:text-neon-purple transition duration-200"
+              >
+                Developer Docs <BookOpen className="w-3.5 h-3.5" />
+              </a>
+            </div>
+          </motion.div>
+
+          <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
+            {/* About capability cards */}
+            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
+              <div className="w-10 h-10 rounded-xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan mb-4">
+                <Layers className="w-5 h-5" />
+              </div>
+              <h3 className="text-md font-semibold text-white mb-2">Zero-Shot Cloning</h3>
+              <p className="text-xs text-[#8e9bb5] leading-relaxed">
+                By processing a brief, 10-second reference voice WAV, the network maps core vocal footprints to synthesize entirely new dialogue styles instantly.
+              </p>
+            </div>
+
+            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
+              <div className="w-10 h-10 rounded-xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple mb-4">
+                <MessageSquare className="w-5 h-5" />
+              </div>
+              <h3 className="text-md font-semibold text-white mb-2">Multi-Speaker Continuity</h3>
+              <p className="text-xs text-[#8e9bb5] leading-relaxed">
+                Models turn-taking triggers, pauses, and context queues so speakers flow smoothly between paragraphs, simulating authentic studio atmospheres.
+              </p>
+            </div>
+
+            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
+              <div className="w-10 h-10 rounded-xl bg-[#ff5c8d]/10 flex items-center justify-center text-[#ff5c8d] mb-4">
+                <Cpu className="w-5 h-5" />
+              </div>
+              <h3 className="text-md font-semibold text-white mb-2">Research-Grade Architecture</h3>
+              <p className="text-xs text-[#8e9bb5] leading-relaxed">
+                Decoupled neural acoustic tokenizers allow academic inspection and dynamic speed parameter tweaking for multi-agent experiments.
+              </p>
+            </div>
+
+            <div className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-white/10 transition duration-300">
+              <div className="w-10 h-10 rounded-xl bg-[#00e673]/10 flex items-center justify-center text-[#00e673] mb-4">
+                <Globe className="w-5 h-5" />
+              </div>
+              <h3 className="text-md font-semibold text-white mb-2">Open Ecosystem</h3>
+              <p className="text-xs text-[#8e9bb5] leading-relaxed">
+                Seamless pipeline wrappers for Hugging Face datasets and local PyTorch containers to build production speech layers.
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      {/* 3. FEATURES SECTION */}
+      <section id="features" className="relative z-10 py-24 bg-black/30 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#a259ff]">Enterprise SaaS Features</span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Synthesize Without Limits</h2>
+          <p className="text-sm text-[#8e9bb5] leading-relaxed">
+            From co-hosted podcasts to responsive gaming characters, VibeVoice AI bundles powerful acoustic capabilities out-of-the-box.
+          </p>
+        </div>
+
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={containerVariants}
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+        >
+          {/* Feature Card A */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#00f2fe]/40 hover:shadow-[0_0_20px_rgba(0,242,254,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan mb-4 group-hover:scale-110 transition duration-300">
+              <Mic className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Multi-Speaker Dialogue</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Generate natural conversations between multiple AI speakers. Handles realistic speaker transitions and context-aware continuity automatically.
+            </p>
+          </motion.div>
+
+          {/* Feature Card B */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#a259ff]/40 hover:shadow-[0_0_20px_rgba(162,89,255,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple mb-4 group-hover:scale-110 transition duration-300">
+              <Headphones className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">AI Podcast Generation</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Automatically create complete podcast-style discussions with human-like speaking flow, dynamic pacing, and interactive turn exchanges.
+            </p>
+          </motion.div>
+
+          {/* Feature Card C */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#ff5c8d]/40 hover:shadow-[0_0_20px_rgba(255,92,141,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#ff5c8d]/10 flex items-center justify-center text-[#ff5c8d] mb-4 group-hover:scale-110 transition duration-300">
+              <Volume2 className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Expressive Text-to-Speech</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Emotion-aware speech synthesis capturing raw tone, breathing rhythm, natural pauses, and precise vocal emphasis.
+            </p>
+          </motion.div>
+
+          {/* Feature Card D */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#00e673]/40 hover:shadow-[0_0_20px_rgba(0,230,115,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#00e673]/10 flex items-center justify-center text-[#00e673] mb-4 group-hover:scale-110 transition duration-300">
+              <Disc className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Long-Form Audio</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Stable long-duration speech generation that maintains voice quality consistency and active conversation memory across chapters.
+            </p>
+          </motion.div>
+
+          {/* Feature Card E */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#ffb703]/40 hover:shadow-[0_0_20px_rgba(255,183,3,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#ffb703]/10 flex items-center justify-center text-[#ffb703] mb-4 group-hover:scale-110 transition duration-300">
+              <Settings className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Voice Style Transfer</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Vocal adaptation matching target speaker style, footprint imitation, and fast personalized AI voice mapping.
+            </p>
+          </motion.div>
+
+          {/* Feature Card F */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#00f2fe]/40 hover:shadow-[0_0_20px_rgba(0,242,254,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan mb-4 group-hover:scale-110 transition duration-300">
+              <Radio className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Conversational AI Speech</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Human-like interaction flow, clean turn-taking logic, and advanced prosody modeling for responsive AI web support.
+            </p>
+          </motion.div>
+
+          {/* Feature Card G */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#a259ff]/40 hover:shadow-[0_0_20px_rgba(162,89,255,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple mb-4 group-hover:scale-110 transition duration-300">
+              <Github className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Open Source Ecosystem</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              First-class Hugging Face model hub integration, comprehensive GitHub community repositories, and developer API templates.
+            </p>
+          </motion.div>
+
+          {/* Feature Card H */}
+          <motion.div variants={itemVariants} className="bg-glass p-6 rounded-2xl border border-white/5 hover:border-[#ff5c8d]/40 hover:shadow-[0_0_20px_rgba(255,92,141,0.1)] transition duration-300 text-left group">
+            <div className="w-10 h-10 rounded-xl bg-[#ff5c8d]/10 flex items-center justify-center text-[#ff5c8d] mb-4 group-hover:scale-110 transition duration-300">
+              <Cpu className="w-5 h-5" />
+            </div>
+            <h3 className="text-md font-bold text-white mb-2">Research-Grade Tech</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Designed from first principles for conversational research, scalable local inference workloads, and custom quantization setups.
+            </p>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      {/* 4. REAL WORLD USE CASES SECTION */}
+      <section id="cases" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#00e673]">Infinite Possibilities</span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Built for Creators & Engineers</h2>
+          <p className="text-sm text-[#8e9bb5] leading-relaxed">
+            Discover how product squads, creative developers, and researchers deploy VibeVoice AI in the wild.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          {[
+            { title: "AI Podcast Automation", icon: Headphones, color: "cyan" },
+            { title: "Audiobook Narration", icon: BookOpen, color: "purple" },
+            { title: "Virtual AI Hosts", icon: Sparkles, color: "emerald" },
+            { title: "Game Character Voices", icon: Flame, color: "rose" },
+            { title: "AI YouTube Narration", icon: PlayCircle, color: "amber" },
+            { title: "Conversational Agents", icon: MessageSquare, color: "blue" },
+            { title: "Educational Voice", icon: User, color: "cyan" },
+            { title: "Synthetic Media", icon: Radio, color: "purple" },
+            { title: "Voice Cloning Research", icon: Mic, color: "rose" },
+            { title: "Multilingual Dialogue", icon: Globe, color: "emerald" }
+          ].map((item, idx) => {
+            const IconComponent = item.icon;
+            const borderColors = item.color === 'cyan' ? 'hover:border-[#00f2fe]/40'
+              : item.color === 'purple' ? 'hover:border-[#a259ff]/40'
+              : item.color === 'emerald' ? 'hover:border-[#00e673]/40'
+              : item.color === 'rose' ? 'hover:border-[#ff5c8d]/40'
+              : 'hover:border-white/20';
+
+            return (
+              <motion.div
+                key={idx}
+                whileHover={{ scale: 1.04, y: -4 }}
+                transition={{ type: "spring", stiffness: 200, damping: 10 }}
+                className={`bg-glass p-5 rounded-2xl border border-white/5 cursor-pointer flex flex-col items-center justify-center text-center gap-3 ${borderColors}`}
+              >
+                <div className={`w-9 h-9 rounded-xl bg-white/4 flex items-center justify-center text-white`}>
+                  <IconComponent className="w-4.5 h-4.5" />
+                </div>
+                <span className="text-xs font-semibold text-white tracking-tight">{item.title}</span>
+              </motion.div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* 5. HOW IT WORKS SECTION */}
+      <section className="relative z-10 py-24 bg-black/40 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#ff5c8d]">Simplifying Complexity</span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white">How It Works</h2>
+          <p className="text-sm text-[#8e9bb5] leading-relaxed">
+            Generate customized, context-aware speech dialogue files locally in three simple milestones.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
+          
+          {/* Animated linking lines inside background */}
+          <div className="hidden lg:block absolute top-[30%] left-[25%] right-[25%] h-0.5 bg-gradient-to-r from-[#00f2fe]/35 via-[#a259ff]/35 to-[#ff5c8d]/35 z-0"></div>
+
+          {/* Step 1 */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            className="bg-glass p-8 rounded-3xl border border-white/5 text-left relative z-10 flex flex-col gap-4"
+          >
+            <div className="absolute top-4 right-6 text-5xl font-black text-white/5">01</div>
+            <div className="w-12 h-12 rounded-2xl bg-[#00f2fe]/10 flex items-center justify-center text-neon-cyan font-bold">
+              <FileText className="w-6 h-6" />
+            </div>
+            <h3 className="text-lg font-bold text-white">Input Text &amp; Script</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Format your text using simple speaker tags (e.g., `Speaker 0`, `Speaker 1`). Paste dialogue script snippets directly into the studio box.
+            </p>
+          </motion.div>
+
+          {/* Step 2 */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="bg-glass p-8 rounded-3xl border border-white/5 text-left relative z-10 flex flex-col gap-4"
+          >
+            <div className="absolute top-4 right-6 text-5xl font-black text-white/5">02</div>
+            <div className="w-12 h-12 rounded-2xl bg-[#a259ff]/10 flex items-center justify-center text-neon-purple font-bold">
+              <Cpu className="w-6 h-6" />
+            </div>
+            <h3 className="text-lg font-bold text-white">Acoustic Processing</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              The model maps dialogue turn-taking patterns, computes real-time prosody adjustments, and blends speakers based on custom voice signatures.
+            </p>
+          </motion.div>
+
+          {/* Step 3 */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            className="bg-glass p-8 rounded-3xl border border-white/5 text-left relative z-10 flex flex-col gap-4"
+          >
+            <div className="absolute top-4 right-6 text-5xl font-black text-white/5">03</div>
+            <div className="w-12 h-12 rounded-2xl bg-[#00e673]/10 flex items-center justify-center text-[#00e673] font-bold">
+              <Volume2 className="w-6 h-6" />
+            </div>
+            <h3 className="text-lg font-bold text-white">Seamless Broadcast Output</h3>
+            <p className="text-xs text-[#8e9bb5] leading-relaxed">
+              Stream binary PCM audio chunks back to the client browser in under 250ms, then run the client packager to download the mastered WAV file.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* 6. TECHNICAL CAPABILITIES SECTION */}
+      <section id="capabilities" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-12 items-center">
+        <div className="flex flex-col gap-6 text-left">
+          <span className="text-xs font-bold uppercase tracking-widest text-neon-cyan">Deep Tech Specifications</span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight">Quantized for Low-Latency Performance</h2>
+          <p className="text-sm text-[#8e9bb5] leading-relaxed">
+            By shifting away from multi-gigabyte models that require expensive dedicated GPUs, VibeVoice provides extreme research scalability directly on home laptops.
+          </p>
+          <button onClick={onTryDemo} className="self-start flex items-center gap-2 text-xs font-bold text-[#00f2fe] hover:text-[#00f2fe]/80 group transition duration-200">
+            Open the Studio Workspace now <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
+          {[
+            { label: "Long-Context Synthesis", desc: "Stable generation beyond 30-minute scripts without memory bottlenecks." },
+            { label: "Multi-Turn Dialogue", desc: "Simulates interruptions, dynamic transitions, and collaborative dialogue." },
+            { label: "Context Retention", desc: "Tracks prosody style consistency across speaker exchanges." },
+            { label: "Emotional Speech Modeling", desc: "Adapts speaking pace and emphasis dynamically depending on context." },
+            { label: "Realistic Timing & Pauses", desc: "Injects breathing frames, silence, and natural hesitation timings." },
+            { label: "High-Quality Neural TTS", desc: "Synthesizes standard 24,000Hz speech directly client-side." },
+            { label: "Scalable Deployment", desc: "Supports Docker, Kubernetes deployment, and ONNX Runtime scaling." },
+            { label: "GPU-Optimized Inference", desc: "Compiles cleanly to TensorRT for enterprise SaaS frameworks." }
+          ].map((cap, index) => (
+            <div key={index} className="bg-glass-card p-4 rounded-xl border border-white/4 flex flex-col gap-1.5 hover:border-[#00f2fe]/30 transition duration-300">
+              <div className="flex items-center gap-2 text-white font-bold text-xs select-none">
+                <Check className="w-4 h-4 text-[#00e673]" />
+                <span>{cap.label}</span>
+              </div>
+              <p className="text-[11px] text-[#8e9bb5] leading-relaxed pl-6">{cap.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 7. DEMO SECTION */}
+      <section id="demo" className="relative z-10 py-24 bg-black/40 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#a259ff]">Live Visual Playground</span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Experience the VibeVoice flow</h2>
+          <p className="text-sm text-[#8e9bb5] leading-relaxed">
+            Click play below to explore interactive speaker switching, custom scripts, and visual voice-wave modulations.
+          </p>
+        </div>
+
+        {/* Custom Mock Interactive Demo Component */}
+        <div className="max-w-[850px] mx-auto bg-glass rounded-3xl p-6 md:p-8 border border-white/8 backdrop-blur-2xl shadow-3xl flex flex-col gap-6">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4 border-b border-white/5 pb-5">
+            <div className="text-left flex flex-col gap-1">
+              <span className="text-[9px] text-[#8e9bb5] uppercase font-bold tracking-wider">Demo Playback Studio</span>
+              <h3 className="text-md font-bold text-white flex items-center gap-2">
+                <Headphones className="w-4.5 h-4.5 text-[#00f2fe] animate-pulse" />
+                {voicePresets[selectedVoicePreset].title}
+              </h3>
+            </div>
+
+            {/* Select Presets bar */}
+            <div className="flex items-center gap-2 bg-white/4 p-1 rounded-xl border border-white/5">
+              {Object.keys(voicePresets).map(presetKey => (
+                <button
+                  key={presetKey}
+                  onClick={() => setSelectedVoicePreset(presetKey)}
+                  className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition cursor-pointer select-none ${
+                    selectedVoicePreset === presetKey 
+                      ? 'bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black shadow-md' 
+                      : 'text-[#8e9bb5] hover:text-white hover:bg-white/2'
+                  }`}
+                >
+                  {presetKey}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-[1fr_240px] gap-6 items-start">
+            
+            {/* Visualizer Area */}
+            <div className="flex flex-col gap-4 w-full">
+              <div className="bg-black/40 border border-white/4 rounded-2xl p-6 min-h-[160px] flex flex-col justify-center items-center relative overflow-hidden">
+                <canvas ref={canvasRef} width="500" height="100" className="w-full h-[100px]"></canvas>
+
+                {/* Animated Orb matching active speaker */}
+                {mockIsPlaying && (
+                  <div className="absolute top-4 right-4 flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-[#ff5c8d] animate-ping"></span>
+                    <span className="text-[9px] text-[#ff5c8d] font-bold uppercase tracking-wider">
+                      Active: {voicePresets[selectedVoicePreset].speakers[mockActiveSpeaker]?.name || "Speaker"}
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* Action play controls */}
+              <div className="flex items-center gap-4 bg-white/2 p-3 rounded-2xl border border-white/4">
+                <button
+                  onClick={() => setMockIsPlaying(!mockIsPlaying)}
+                  className="w-10 h-10 rounded-full bg-gradient-to-r from-[#00f2fe] to-[#a259ff] hover:shadow-[0_0_15px_rgba(0,242,254,0.35)] flex items-center justify-center text-black hover:scale-105 active:scale-95 transition cursor-pointer"
+                >
+                  {mockIsPlaying ? (
+                    <Square className="w-4 h-4 fill-current" />
+                  ) : (
+                    <Play className="w-4 h-4 fill-current ml-0.5" />
+                  )}
+                </button>
+
+                <div className="flex-1 text-left">
+                  <div className="flex justify-between text-[10px] text-[#8e9bb5] mb-1">
+                    <span>{mockIsPlaying ? "Playing Dynamic Dialogue Chunks..." : "Ready to playback preview"}</span>
+                    <span>{Math.floor(mockTimeline)}s / {voicePresets[selectedVoicePreset].duration}s</span>
+                  </div>
+                  <div className="h-1.5 w-full bg-white/6 rounded-full overflow-hidden relative">
+                    <div 
+                      className="absolute left-0 top-0 bottom-0 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] transition-all duration-100 rounded-full" 
+                      style={{ width: `${(mockTimeline / voicePresets[selectedVoicePreset].duration) * 100}%` }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Script Viewer */}
+            <div className="flex flex-col gap-3 text-left w-full">
+              <span className="text-[10px] text-[#8e9bb5] uppercase font-bold tracking-wider">Turn-by-Turn Transcript</span>
+              <div className="bg-black/25 rounded-2xl p-4 border border-white/4 flex flex-col gap-3 max-h-[220px] overflow-y-auto">
+                {voicePresets[selectedVoicePreset].script.map((line, idx) => {
+                  const speakerDetails = voicePresets[selectedVoicePreset].speakers[line.spk] || { name: "Guest", color: "cyan" };
+                  const colorBadge = speakerDetails.color === 'cyan' ? 'text-[#00f2fe]' 
+                    : speakerDetails.color === 'purple' ? 'text-[#a259ff]'
+                    : speakerDetails.color === 'amber' ? 'text-[#ffb703]'
+                    : 'text-white';
+
+                  const isActiveLine = mockIsPlaying && mockTimeline >= line.time && 
+                    (idx === voicePresets[selectedVoicePreset].script.length - 1 || mockTimeline < voicePresets[selectedVoicePreset].script[idx + 1].time);
+
+                  return (
+                    <div 
+                      key={idx} 
+                      className={`p-2.5 rounded-xl border transition-all duration-300 ${
+                        isActiveLine 
+                          ? 'bg-[#00f2fe]/6 border-[#00f2fe]/20 shadow-[0_0_8px_rgba(0,242,254,0.05)]' 
+                          : 'bg-transparent border-transparent opacity-50'
+                      }`}
+                    >
+                      <span className={`block text-[9px] font-bold uppercase tracking-wider mb-0.5 ${colorBadge}`}>
+                        {speakerDetails.name}
+                      </span>
+                      <p className="text-[11px] text-[#f0f3fa] font-mono leading-relaxed">{line.text}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+          </div>
+
+          <div className="bg-[#00f2fe]/4 border border-[#00f2fe]/10 p-4 rounded-2xl flex flex-col sm:flex-row justify-between items-center gap-4 text-left">
+            <div className="flex items-center gap-3">
+              <Flame className="w-5 h-5 text-neon-cyan animate-bounce" />
+              <div>
+                <h4 className="text-xs font-bold text-white">Unlock full control over model layers</h4>
+                <p className="text-[10px] text-[#8e9bb5]">Upload voice profiles, customize speeds, and download master tracks in the playground.</p>
+              </div>
+            </div>
+            <button 
+              onClick={onTryDemo}
+              className="w-full sm:w-auto flex items-center justify-center gap-1.5 px-4 py-2 bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-bold text-xs rounded-xl transition cursor-pointer hover:shadow-lg active:scale-95 whitespace-nowrap"
+            >
+              Open Studio Workspace
+            </button>
+          </div>
+
+        </div>
+      </section>
+
+      {/* 8. OPEN SOURCE SECTION */}
+      <section id="open-source" className="relative z-10 py-24 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={containerVariants}
+          className="bg-glass rounded-3xl p-8 md:p-12 border border-white/8 backdrop-blur-2xl shadow-3xl text-left grid grid-cols-1 lg:grid-cols-[1fr_0.8fr] gap-12 items-center"
+        >
+          <motion.div variants={itemVariants} className="flex flex-col gap-5">
+            <span className="text-xs font-bold uppercase tracking-widest text-[#00e673]">100% Free &amp; Open Source</span>
+            <h2 className="text-3xl md:text-5xl font-extrabold text-white">Join the VibeVoice developer ecosystem</h2>
+            <p className="text-sm text-[#8e9bb5] leading-relaxed">
+              We believe conversational voice models should be accessible to all developers. Get instant access to pre-quantized model base checkpoints, training layers, and custom fine-tuning scripts.
+            </p>
+            
+            <div className="flex flex-wrap gap-4 pt-2">
+              <a
+                href="https://github.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2.5 px-5 py-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/15 text-white font-bold text-xs transition duration-200 cursor-pointer active:scale-95"
+              >
+                <Github className="w-4 h-4" />
+                GitHub Repository
+              </a>
+              <a
+                href="https://huggingface.co"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2.5 px-5 py-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/15 text-white font-bold text-xs transition duration-200 cursor-pointer active:scale-95"
+              >
+                <Layers className="w-4 h-4 text-neon-cyan" />
+                Hugging Face Base Models
+              </a>
+            </div>
+          </motion.div>
+
+          <motion.div variants={itemVariants} className="bg-black/35 rounded-2xl border border-white/4 p-6 flex flex-col gap-5">
+            <h3 className="text-sm font-bold text-white uppercase tracking-wider border-b border-white/5 pb-2 flex items-center gap-2">
+              <Cpu className="w-4 h-4 text-[#a259ff]" /> Model Checklist
+            </h3>
+
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-3">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#00e673] shadow-[0_0_6px_#00e673]"></span>
+                <span className="text-xs font-semibold text-white">Quantized 1.5B ONNX Checkpoint</span>
+              </div>
+              <p className="text-[10.5px] text-[#8e9bb5] leading-relaxed pl-5.5">Ideal for deployment on edge systems and low-resource CPU servers.</p>
+              
+              <div className="flex items-center gap-3 border-t border-dashed border-white/5 pt-3">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#00e673] shadow-[0_0_6px_#00e673]"></span>
+                <span className="text-xs font-semibold text-white">Full PyTorch Training Recipes</span>
+              </div>
+              <p className="text-[10.5px] text-[#8e9bb5] leading-relaxed pl-5.5">Prepackaged datasets, gradient-accumulation code, and training layers.</p>
+
+              <div className="flex items-center gap-3 border-t border-dashed border-white/5 pt-3">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#00e673] shadow-[0_0_6px_#00e673]"></span>
+                <span className="text-xs font-semibold text-white">Zero-Shot Cloning Checkpoints</span>
+              </div>
+              <p className="text-[10.5px] text-[#8e9bb5] leading-relaxed pl-5.5">Allows robust speaker feature mapping with zero gradient training runs.</p>
+            </div>
+          </motion.div>
+        </motion.div>
+      </section>
+
+      {/* 9. TESTIMONIALS SECTION */}
+      <section className="relative z-10 py-24 bg-black/30 border-t border-white/5 max-w-[1300px] mx-auto px-6">
+        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#00f2fe]">User Reviews</span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Loved by Researchers & Creators</h2>
+          <p className="text-sm text-[#8e9bb5] leading-relaxed">
+            Read how developers are applying VibeVoice AI to rewrite the vocal product stack.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-left">
+          
+          {/* Review 1 */}
+          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
+            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
+              "We migrated all virtual co-hosts for our audiobooks to VibeVoice. The zero-shot reference cloning accuracy is astonishing; it matches emotional cadence with negligible distortion."
+            </p>
+            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
+              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#00f2fe] to-[#a259ff] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
+                AR
+              </div>
+              <div>
+                <h4 className="text-xs font-bold text-white">Dr. Aris Vance</h4>
+                <p className="text-[9px] text-[#8e9bb5] uppercase">AI Audio Researcher</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Review 2 */}
+          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
+            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
+              "Building responsive conversational pipelines is exceptionally straightforward. Standard WebSockets streaming audio chunks under 250ms is exactly what SaaS developers need."
+            </p>
+            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
+              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#a259ff] to-[#ff5c8d] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
+                KL
+              </div>
+              <div>
+                <h4 className="text-xs font-bold text-white">Karen Lim</h4>
+                <p className="text-[9px] text-[#8e9bb5] uppercase">Vocal Startup Founder</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Review 3 */}
+          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
+            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
+              "The local CPU inference speeds are a massive paradigm shift. Generating multi-speaker podcasts without scaling complex Kubernetes GPU clusters completely changed our billing models."
+            </p>
+            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
+              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#ff5c8d] to-[#ffb703] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
+                MB
+              </div>
+              <div>
+                <h4 className="text-xs font-bold text-white">Marcus Brody</h4>
+                <p className="text-[9px] text-[#8e9bb5] uppercase">Podcast Platform Creator</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Review 4 */}
+          <div className="bg-glass p-6 rounded-2xl border border-white/5 flex flex-col gap-4 justify-between">
+            <p className="text-xs text-[#8e9bb5] leading-relaxed italic">
+              "Being able to review training scripts and inspect decoupled prosody token architectures is brilliant. This model is exceptionally clean and well-structured for university research projects."
+            </p>
+            <div className="flex items-center gap-3 border-t border-white/5 pt-4">
+              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-[#00f2fe] to-[#00e673] flex items-center justify-center text-[10px] font-bold text-black font-mono select-none">
+                SC
+              </div>
+              <div>
+                <h4 className="text-xs font-bold text-white">Sonia Chen</h4>
+                <p className="text-[9px] text-[#8e9bb5] uppercase">ML PhD Scholar</p>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* 10. FAQ SECTION */}
+      <section id="faq" className="relative z-10 py-24 border-t border-white/5 max-w-[850px] mx-auto px-6 text-left">
+        <div className="text-center max-w-[700px] mx-auto mb-16 flex flex-col gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#a259ff] flex items-center justify-center gap-1.5">
+            <HelpCircle className="w-3.5 h-3.5 text-[#a259ff]" /> Common Questions
+          </span>
+          <h2 className="text-3xl md:text-5xl font-extrabold text-white">Frequently Asked Questions</h2>
+          <p className="text-sm text-[#8e9bb5]">Everything you need to know about setting up and running VibeVoice AI.</p>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          {faqs.map((faq, idx) => (
+            <div
+              key={idx}
+              className="bg-glass rounded-2xl border border-white/5 hover:border-white/10 overflow-hidden transition-colors duration-200"
+            >
+              <button
+                onClick={() => setActiveFaq(activeFaq === idx ? null : idx)}
+                className="w-full flex justify-between items-center p-6 text-left font-bold text-white text-sm md:text-base cursor-pointer focus:outline-none"
+              >
+                <span>{faq.q}</span>
+                <ChevronDown className={`w-5 h-5 text-[#8e9bb5] transition-transform duration-300 ${activeFaq === idx ? 'transform rotate-180 text-neon-cyan' : ''}`} />
+              </button>
+
+              <AnimatePresence initial={false}>
+                {activeFaq === idx && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.25, ease: "easeInOut" }}
+                  >
+                    <div className="p-6 pt-0 border-t border-white/4 text-xs md:text-sm text-[#8e9bb5] leading-relaxed">
+                      {faq.a}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 11. FINAL CTA SECTION */}
+      <section className="relative z-10 py-28 border-t border-white/5 max-w-[1300px] mx-auto px-6 text-center">
+        <div className="bg-glass rounded-3xl p-12 md:p-20 border border-white/8 relative overflow-hidden bg-gradient-to-b from-[#101830]/40 to-transparent flex flex-col items-center gap-6 shadow-3xl">
+          
+          <div className="absolute inset-0 pointer-events-none z-0">
+            <div className="absolute w-[450px] h-[450px] rounded-full top-[-20%] left-[-10%] bg-gradient-to-br from-[#00f2fe]/10 to-transparent blur-[120px] animate-pulse"></div>
+            <div className="absolute w-[450px] h-[450px] rounded-full bottom-[-20%] right-[-10%] bg-gradient-to-br from-[#a259ff]/10 to-transparent blur-[120px] animate-pulse"></div>
+          </div>
+
+          <span className="relative z-10 text-xs font-bold uppercase tracking-widest text-[#00f2fe]">Experience It Live</span>
+          <h2 className="relative z-10 text-4xl md:text-6xl font-extrabold text-white tracking-tight max-w-[700px] leading-tight">
+            Build the Future of Conversational Voice AI
+          </h2>
+          <p className="relative z-10 text-sm md:text-base text-[#8e9bb5] max-w-[520px] leading-relaxed">
+            Instantly record dynamic speakers, compile realistic podcast dialogues, and master local WAV tracks completely in your browser.
+          </p>
+
+          <div className="relative z-10 flex flex-col sm:flex-row gap-4 pt-4 w-full justify-center max-w-[450px]">
+            <button
+              onClick={onTryDemo}
+              className="flex-1 flex items-center justify-center gap-2.5 px-6 py-4 rounded-xl bg-gradient-to-r from-[#00f2fe] to-[#a259ff] text-black font-extrabold text-sm transition duration-200 cursor-pointer hover:shadow-lg active:scale-95 shadow-[0_4px_15px_rgba(0,242,254,0.25)]"
+            >
+              Get Started
+            </button>
+            <a
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex-1 flex items-center justify-center gap-2.5 px-6 py-4 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 text-white font-bold text-sm transition duration-200 cursor-pointer active:scale-95"
+            >
+              Explore GitHub
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* 12. FOOTER */}
+      <footer className="relative z-10 border-t border-white/5 py-12 max-w-[1300px] mx-auto px-6 text-left">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+          
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center gap-3">
+              <Sparkles className="w-6 h-6 text-neon-cyan" />
+              <span className="font-bold text-white text-base">VibeVoice AI</span>
+            </div>
+            <p className="text-[11px] text-[#8e9bb5] leading-relaxed max-w-[240px]">
+              Open-source neural acoustics model for hyper-realistic conversational turn-taking, dialogue flows, and zero-shot voice cloning.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Models &amp; Weights</h4>
+            <div className="flex flex-col gap-2 text-xs text-[#8e9bb5]">
+              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-neon-cyan transition">VibeVoice-0.5B Checkpoint</a>
+              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-neon-cyan transition">Acoustic Tokenizer 24kHz</a>
+              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-neon-cyan transition">Prosody Footprint Encoder</a>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Resources</h4>
+            <div className="flex flex-col gap-2 text-xs text-[#8e9bb5]">
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-neon-purple transition">Research Publications</a>
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-neon-purple transition">Inference CLI Recipes</a>
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-neon-purple transition">Fine-Tuning Documentation</a>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Developer Community</h4>
+            <div className="flex flex-col gap-2 text-xs text-[#8e9bb5]">
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#ff5c8d] transition">GitHub Ecosystem</a>
+              <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" className="hover:text-[#ff5c8d] transition">Hugging Face Discussions</a>
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-[#ff5c8d] transition">Contribute Code</a>
+            </div>
+          </div>
+
+        </div>
+
+        <div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-[#8e9bb5]">
+          <span>© {new Date().getFullYear()} Microsoft VibeVoice AI. Research-grade open-source software license.</span>
+          <div className="flex items-center gap-4">
+            <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-white transition flex items-center gap-1">
+              <Github className="w-3.5 h-3.5" /> GitHub
+            </a>
+            <span>•</span>
+            <span className="flex items-center gap-1 text-[#ff5c8d]">
+              Made for AI Researchers <Heart className="w-3.5 h-3.5 fill-current text-[#ff5c8d]" />
+            </span>
+          </div>
+        </div>
+      </footer>
+
+    </div>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,140 @@
+@import "tailwindcss";
+
+/* ==========================================================================
+   VibeVoice React Studio CSS Styling
+   Combines Tailwind v4 utility engine with custom high-end visuals and glows
+   ========================================================================== */
+
+@layer utilities {
+  .text-neon-cyan {
+    color: hsl(185, 95%, 48%);
+    text-shadow: 0 0 10px hsla(185, 95%, 48%, 0.4);
+  }
+  
+  .text-neon-purple {
+    color: hsl(265, 88%, 64%);
+    text-shadow: 0 0 10px hsla(265, 88%, 64%, 0.4);
+  }
+  
+  .text-neon-pink {
+    color: hsl(330, 92%, 60%);
+    text-shadow: 0 0 10px hsla(330, 92%, 60%, 0.4);
+  }
+  
+  .bg-glass {
+    background: rgba(13, 17, 28, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(24px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  }
+  
+  .bg-glass-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+  }
+  
+  .bg-glass-card:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+}
+
+/* Animations */
+@keyframes orbPulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.08); }
+  100% { transform: scale(1); }
+}
+
+@keyframes orbSpin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes orbGlowScale {
+  0% { transform: scale(0.95); opacity: 0.4; }
+  100% { transform: scale(1.2); opacity: 0.75; }
+}
+
+@keyframes waveExpand {
+  0% { transform: scale(0.9); opacity: 0.9; }
+  100% { transform: scale(1.8); opacity: 0; }
+}
+
+@keyframes floatGlow {
+  0% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(100px, 80px) scale(1.15); }
+  100% { transform: translate(-50px, 150px) scale(0.9); }
+}
+
+/* Classes for visual states */
+.animate-float-glow-1 {
+  animation: floatGlow 25s infinite alternate ease-in-out;
+}
+
+.animate-float-glow-2 {
+  animation: floatGlow 30s infinite alternate-reverse ease-in-out;
+}
+
+/* Custom Orb styling states */
+.orb-state-idle {
+  background: radial-gradient(circle, #00f2fe 0%, rgba(0, 150, 255, 0.3) 100%);
+  box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
+  animation: orbPulse 4s infinite ease-in-out;
+}
+
+.orb-state-thinking {
+  background: radial-gradient(circle, #fff 0%, #a259ff 70%, #00f2fe 100%);
+  box-shadow: 0 0 35px rgba(162, 89, 255, 0.35);
+  animation: orbSpin 2s infinite linear, orbPulse 1s infinite ease-in-out;
+}
+
+.orb-state-speaking {
+  background: radial-gradient(circle, #fff 0%, #ff5c8d 60%, #a259ff 100%);
+  box-shadow: 0 0 30px rgba(255, 92, 141, 0.35);
+  animation: orbPulse 0.4s infinite ease-in-out;
+}
+
+.orb-state-listening {
+  background: radial-gradient(circle, #fff 0%, #00e673 70%);
+  box-shadow: 0 0 25px rgba(0, 230, 115, 0.4);
+  animation: orbPulse 1.2s infinite ease-in-out;
+}
+
+/* Scrollbar customizations */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Custom Modal animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleUp {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-scale-up {
+  animation: scaleUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/supabaseClient.js

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)

frontend/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+        ws: true,
+      },
+      '/static': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+})
+
+

requirements.txt

@@ -0,0 +1,10 @@
+fastapi>=0.100.0
+uvicorn>=0.20.0
+python-multipart>=0.0.6
+soundfile>=0.12.1
+torch>=2.0.0
+transformers>=4.36.0
+numpy>=1.20.0
+websockets>=12.0
+pyttsx3>=2.90
+comtypes>=1.4.0

run.bat

@@ -0,0 +1,21 @@
+@echo off
+title VibeVoice Studio Fullstack Launcher
+echo ===================================================
+echo    VibeVoice React + FastAPI Studio Launcher
+echo ===================================================
+echo.
+echo [1/3] Starting VibeVoice FastAPI Backend...
+start "VibeVoice API Server" cmd /k "python app.py"
+
+echo.
+echo [2/3] Starting Vite React + Tailwind Dev Server...
+start "VibeVoice React Frontend" cmd /k "cd frontend && npm run dev"
+
+echo.
+echo ===================================================
+echo   FastAPI API server running on: http://127.0.0.1:8000
+echo   React Dev frontend running on: http://localhost:5173
+echo ===================================================
+echo.
+echo This launcher window can now be safely closed.
+pause

static/app.js

@@ -0,0 +1,729 @@
+/**
+ * VibeVoice Studio - Front-End Audio Engine & UI Controller
+ * Handles WebSocket PCM streaming, gapless scheduling, Web Audio API,
+ * microphone recording, canvas visualization, and dashboard state management.
+ */
+
+// Global App State
+let audioCtx = null;
+let analyserNode = null;
+let gainNode = null;
+let ws = null;
+let currentAudioSource = null;
+
+// Streaming Audio Queue Variables (Gapless Playback)
+let playbackQueue = [];
+let nextPlayTime = 0;
+let isStreamingActive = false;
+let scheduledBufferSources = [];
+const SAMPLING_RATE = 24000; // VibeVoice standard samplerate
+
+// Voice Recording State (Voice Cloning)
+let mediaRecorders = [null, null];
+let audioChunks = [[], []];
+let voicePaths = [null, null];
+
+// HTML Elements Selection
+const modelStatusVal = document.getElementById("modelStatusVal");
+const modelDot = document.getElementById("modelDot");
+const btnToggleModel = document.getElementById("btnToggleModel");
+const connBadge = document.getElementById("connBadge");
+const connIcon = document.getElementById("connIcon");
+const connText = document.getElementById("connText");
+
+const txtScript = document.getElementById("txtScript");
+const chkStreamMode = document.getElementById("chkStreamMode");
+const btnSynthesize = document.getElementById("btnSynthesize");
+const btnStop = document.getElementById("btnStop");
+
+const agentOrb = document.getElementById("agentOrb");
+const agentStateText = document.getElementById("agentStateText");
+const agentStateSub = document.getElementById("agentStateSub");
+
+const canvasWaveform = document.getElementById("canvasWaveform");
+const canvasCtx = canvasWaveform.getContext("2d");
+
+// Playback Toolbar Elements
+const audioToolbar = document.getElementById("audioToolbar");
+const btnToolbarPlay = document.getElementById("btnToolbarPlay");
+const sliderTimeline = document.getElementById("sliderTimeline");
+const progressTimelineFill = document.getElementById("progressTimelineFill");
+const lblTimeStart = document.getElementById("lblTimeStart");
+const lblTimeEnd = document.getElementById("lblTimeEnd");
+const sliderVolume = document.getElementById("sliderVolume");
+const iconVolume = document.getElementById("iconVolume");
+const selectSpeed = document.getElementById("selectSpeed");
+
+// Voice Cloning Slots Elements
+const spkName0 = document.getElementById("spkName0");
+const btnRecord0 = document.getElementById("btnRecord0");
+const fileVoice0 = document.getElementById("fileVoice0");
+const clonedStatus0 = document.getElementById("clonedStatus0");
+const audioPreview0 = document.getElementById("audioPreview0");
+
+const spkName1 = document.getElementById("spkName1");
+const btnRecord1 = document.getElementById("btnRecord1");
+const fileVoice1 = document.getElementById("fileVoice1");
+const clonedStatus1 = document.getElementById("clonedStatus1");
+const audioPreview1 = document.getElementById("audioPreview1");
+
+const consoleBody = document.getElementById("consoleBody");
+const btnClearLogs = document.getElementById("btnClearLogs");
+
+// Presets Elements
+const presetPodcast = document.getElementById("presetPodcast");
+const presetAssistant = document.getElementById("presetAssistant");
+const presetNews = document.getElementById("presetNews");
+
+// ==========================================================================
+// Initialization & Server Sync
+// ==========================================================================
+
+window.addEventListener("DOMContentLoaded", () => {
+    log("system", "Initializing Audio Engines...");
+    checkServerStatus();
+    setupCanvasVisualizer();
+    bindEvents();
+});
+
+// Logs messages into the built-in Console Log card on UI
+function log(type, message) {
+    const timeStr = new Date().toLocaleTimeString();
+    const line = document.createElement("div");
+    line.className = `log-line ${type}`;
+    line.innerHTML = `[${timeStr}] ${message}`;
+    consoleBody.appendChild(line);
+    consoleBody.scrollTop = consoleBody.scrollHeight;
+}
+
+let statusInterval = null;
+
+// Queries server backend to find if model weights are loaded
+async function checkServerStatus() {
+    try {
+        const res = await fetch("/api/status");
+        const data = await res.json();
+        
+        updateModelUI(data.use_real_model, data.loaded, data.loading, data.error);
+        
+        // Auto poll if loading
+        if (data.loading) {
+            if (!statusInterval) {
+                statusInterval = setInterval(checkServerStatus, 3000);
+            }
+        } else {
+            if (statusInterval) {
+                clearInterval(statusInterval);
+                statusInterval = null;
+            }
+        }
+        
+        // Try opening websocket streaming channel if not already connected/connecting
+        if (!ws || ws.readyState === WebSocket.CLOSED) {
+            initWebSocket();
+        }
+    } catch (e) {
+        log("error", "Failed to connect to VibeVoice backend API server.");
+        updateModelUI(false, false, false, "Offline");
+        if (statusInterval) {
+            clearInterval(statusInterval);
+            statusInterval = null;
+        }
+    }
+}
+
+function updateModelUI(useReal, loaded, loading, error) {
+    if (useReal) {
+        if (loading) {
+            modelStatusVal.innerText = "Downloading AI weights (1.2GB)...";
+            modelDot.className = "status-dot yellow animate-pulse";
+            btnToggleModel.classList.add("active");
+            log("info", "VibeVoice Model weights downloading from Hugging Face. Please stand by...");
+        } else if (loaded) {
+            modelStatusVal.innerText = "VibeVoice-0.5B AI";
+            modelDot.className = "status-dot green";
+            btnToggleModel.classList.add("active");
+            log("success", "VibeVoice Model weights loaded successfully. Zero-shot cloning activated!");
+        } else if (error) {
+            modelStatusVal.innerText = "Error Loading AI";
+            modelDot.className = "status-dot red";
+            btnToggleModel.classList.remove("active");
+            log("error", `Model Load Error: ${error}`);
+        }
+    } else {
+        modelStatusVal.innerText = "Demo Synthesizer";
+        modelDot.className = "status-dot green";
+        btnToggleModel.classList.remove("active");
+    }
+}
+
+// Handles switching model modes on clicking the Toggle button
+btnToggleModel.addEventListener("click", async () => {
+    const isActive = btnToggleModel.classList.contains("active");
+    const enable = !isActive;
+    log("info", `Requesting server mode toggle: ${enable ? "Enable AI Model" : "Enable Demo Synthesizer"}`);
+    
+    try {
+        btnToggleModel.disabled = true;
+        const res = await fetch(`/api/toggle-model?enable=${enable}`, { method: "POST" });
+        const data = await res.json();
+        
+        btnToggleModel.disabled = false;
+        checkServerStatus();
+    } catch (e) {
+        btnToggleModel.disabled = false;
+        log("error", "Error toggling AI Model mode.");
+    }
+});
+
+// Initialize real-time WebSockets
+function initWebSocket() {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const host = window.location.host;
+    const wsUrl = `${protocol}//${host}/api/stream`;
+    
+    log("system", `Opening WebSocket stream canal: ${wsUrl}`);
+    ws = new WebSocket(wsUrl);
+    
+    ws.onopen = () => {
+        connBadge.className = "connection-badge online";
+        connIcon.className = "fa-solid fa-link";
+        connText.innerText = "Connected";
+        log("success", "Real-time streaming audio WebSocket channel ESTABLISHED.");
+    };
+    
+    ws.onclose = () => {
+        connBadge.className = "connection-badge";
+        connIcon.className = "fa-solid fa-link-slash";
+        connText.innerText = "Offline";
+        log("error", "Real-time streaming WebSocket channel disconnected.");
+        // Try reconnecting in 5 seconds
+        setTimeout(initWebSocket, 5000);
+    };
+    
+    ws.onerror = (e) => {
+        log("error", "WebSocket channel encountered error. Resetting...");
+    };
+    
+    ws.onmessage = async (event) => {
+        // Handle incoming WebSocket messages (could be text status or binary audio)
+        if (typeof event.data === "string") {
+            const data = JSON.parse(event.data);
+            if (data.type === "word") {
+                log("word", `Agent spoke word: <strong style="font-size:12px;">${data.word}</strong>`);
+            } else if (data.type === "done") {
+                log("success", "WebSocket audio stream finished downloading.");
+            } else if (data.type === "error") {
+                log("error", `Server Stream Error: ${data.message}`);
+                stopPlayback();
+            }
+        } else {
+            // Audio chunk arrived as binary raw data
+            const arrayBuffer = await event.data.arrayBuffer();
+            // Convert 16-bit signed PCM buffer to Float32 array
+            const float32Array = convertPCM16ToFloat32(new Int16Array(arrayBuffer));
+            
+            if (isStreamingActive) {
+                playbackQueue.push(float32Array);
+                scheduleNextChunk();
+            }
+        }
+    };
+}
+
+// Helper to convert 16-bit integer bytes to floating values between -1.0 and 1.0
+function convertPCM16ToFloat32(int16Array) {
+    const float32 = new Float32Array(int16Array.length);
+    for (let i = 0; i < int16Array.length; i++) {
+        // Divide by max positive value of 16-bit integer (32767)
+        float32[i] = int16Array[i] / 32767.0;
+    }
+    return float32;
+}
+
+// ==========================================================================
+// Web Audio Context & Playback Engine (Pillar 2 & 3)
+// ==========================================================================
+
+function initAudioContext() {
+    if (audioCtx) return;
+    
+    // Create modern AudioContext inside browser
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLING_RATE });
+    
+    // Create Analyser Node for the Oscilloscope Waveform Canvas
+    analyserNode = audioCtx.createAnalyser();
+    analyserNode.fftSize = 256;
+    
+    // Create Gain Node for volume adjustments
+    gainNode = audioCtx.createGain();
+    setVolume(sliderVolume.value / 100);
+    
+    // Connect nodes together: Source -> Gain -> Analyser -> Output Speakers
+    gainNode.connect(analyserNode);
+    analyserNode.connect(audioCtx.destination);
+    
+    log("system", `Browser AudioContext initiated at ${SAMPLING_RATE}Hz.`);
+}
+
+function setVolume(val) {
+    if (gainNode && audioCtx) {
+        gainNode.gain.setValueAtTime(val, audioCtx.currentTime);
+        // Toggle volume icon based on level
+        if (val === 0) iconVolume.className = "fa-solid fa-volume-mute";
+        else if (val < 0.5) iconVolume.className = "fa-solid fa-volume-low";
+        else iconVolume.className = "fa-solid fa-volume-high";
+    }
+}
+
+// Streaming Scheduling: Gapless stitched playing of successive floats
+function startStreamingPlayback() {
+    initAudioContext();
+    if (audioCtx.state === "suspended") {
+        audioCtx.resume();
+    }
+    
+    playbackQueue = [];
+    scheduledBufferSources = [];
+    nextPlayTime = audioCtx.currentTime + 0.15; // Brief offset padding buffer to start
+    isStreamingActive = true;
+    
+    btnSynthesize.disabled = true;
+    btnStop.disabled = false;
+    
+    setAgentOrbState("speaking", "STREAMING VOICE", "Synthesizing and playing real-time speech...");
+    log("info", "Playback stream started. Waiting for speech chunks...");
+}
+
+function scheduleNextChunk() {
+    if (!isStreamingActive || playbackQueue.length === 0) return;
+    
+    const chunkFloats = playbackQueue.shift();
+    if (chunkFloats.length === 0) return;
+    
+    // Create custom Audio Buffer for the float data
+    const buffer = audioCtx.createBuffer(1, chunkFloats.length, SAMPLING_RATE);
+    buffer.copyToChannel(chunkFloats, 0);
+    
+    // Create Source Node
+    const sourceNode = audioCtx.createBufferSource();
+    sourceNode.buffer = buffer;
+    
+    // Apply playback speed modifier selected by user
+    sourceNode.playbackRate.value = parseFloat(selectSpeed.value);
+    
+    // Stitch chunk directly onto Gain node
+    sourceNode.connect(gainNode);
+    
+    // Precise scheduling time calculation
+    const startTime = Math.max(audioCtx.currentTime, nextPlayTime);
+    sourceNode.start(startTime);
+    
+    // Keep track of active playing nodes so we can cut off audio if requested
+    scheduledBufferSources.push(sourceNode);
+    
+    // Update scheduler deadline
+    const chunkDuration = buffer.duration / sourceNode.playbackRate.value;
+    nextPlayTime = startTime + chunkDuration;
+    
+    // Release reference on completion
+    sourceNode.onended = () => {
+        const idx = scheduledBufferSources.indexOf(sourceNode);
+        if (idx > -1) scheduledBufferSources.splice(idx, 1);
+        
+        // If queue is exhausted and no active audio is left, reset agent to idle
+        if (scheduledBufferSources.length === 0 && playbackQueue.length === 0 && isStreamingActive) {
+            stopPlayback();
+            log("info", "Agent finished speaking.");
+        }
+    };
+}
+
+// Stops all active sounds and resets the dashboard execution state
+function stopPlayback() {
+    isStreamingActive = false;
+    playbackQueue = [];
+    
+    // Halt all audio buffers immediately
+    scheduledBufferSources.forEach(source => {
+        try { source.stop(); } catch(e) {}
+    });
+    scheduledBufferSources = [];
+    
+    // Stop standard player if active
+    if (currentAudioSource) {
+        try { currentAudioSource.stop(); } catch(e) {}
+        currentAudioSource = null;
+    }
+    
+    btnSynthesize.disabled = false;
+    btnStop.disabled = true;
+    setAgentOrbState("idle", "AGENT READY", "Configure scripts and trigger generation below");
+    audioToolbar.classList.add("hidden");
+    
+    log("system", "Agent audio playback halted.");
+}
+
+btnStop.addEventListener("click", stopPlayback);
+
+// Sets the visual status and glowing styles of the central agent orb
+function setAgentOrbState(stateClass, title, subtitle) {
+    agentOrb.className = `agent-orb ${stateClass}`;
+    agentStateText.innerText = title;
+    agentStateSub.innerText = subtitle;
+}
+
+// ==========================================================================
+// Canvas Oscilloscope Visualizer Rendering (Pillar 3)
+// ==========================================================================
+
+function setupCanvasVisualizer() {
+    const width = canvasWaveform.width;
+    const height = canvasWaveform.height;
+    
+    function draw() {
+        requestAnimationFrame(draw);
+        
+        canvasCtx.fillStyle = "rgba(7, 9, 14, 0.25)"; // Semitransparent sweep back
+        canvasCtx.fillRect(0, 0, width, height);
+        
+        let dataArray = null;
+        let bufferLength = 0;
+        
+        if (analyserNode && isAudioPlaying()) {
+            bufferLength = analyserNode.frequencyBinCount;
+            dataArray = new Uint8Array(bufferLength);
+            analyserNode.getByteTimeDomainData(dataArray);
+        }
+        
+        canvasCtx.lineWidth = 2.5;
+        // Apply beautiful purple-to-cyan gradient stroke to waveform curves
+        const gradient = canvasCtx.createLinearGradient(0, 0, width, 0);
+        gradient.addColorStop(0, "hsl(265, 88%, 64%)"); // Purple
+        gradient.addColorStop(0.5, "hsl(185, 95%, 48%)"); // Cyan
+        gradient.addColorStop(1, "hsl(330, 92%, 60%)"); // Pink
+        canvasCtx.strokeStyle = gradient;
+        
+        canvasCtx.shadowBlur = isAudioPlaying() ? 8 : 0;
+        canvasCtx.shadowColor = "rgba(0, 242, 254, 0.4)";
+        
+        canvasCtx.beginPath();
+        
+        if (dataArray) {
+            // Draw actual audio ripples
+            const sliceWidth = width / bufferLength;
+            let x = 0;
+            
+            for (let i = 0; i < bufferLength; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = (v * height) / 2;
+                
+                if (i === 0) {
+                    canvasCtx.moveTo(x, y);
+                } else {
+                    canvasCtx.lineTo(x, y);
+                }
+                
+                x += sliceWidth;
+            }
+        } else {
+            // Draw a calm breathing idle baseline
+            const points = 40;
+            const sliceWidth = width / points;
+            let x = 0;
+            const time = Date.now() * 0.003;
+            
+            for (let i = 0; i < points; i++) {
+                // Subtle sine rhythm for visual engagement when silent
+                const breathingFactor = Math.sin(time) * 0.2 + 0.8;
+                const y = height / 2 + Math.sin(i * 0.15 + time * 2) * (2.5 * breathingFactor);
+                
+                if (i === 0) {
+                    canvasCtx.moveTo(x, y);
+                } else {
+                    canvasCtx.lineTo(x, y);
+                }
+                x += sliceWidth;
+            }
+        }
+        
+        canvasCtx.lineTo(width, height / 2);
+        canvasCtx.stroke();
+    }
+    
+    draw();
+}
+
+function isAudioPlaying() {
+    return isStreamingActive || currentAudioSource !== null;
+}
+
+// ==========================================================================
+// Microphone Recorder & Speaker Voice Cloning (Pillar 4)
+// ==========================================================================
+
+async function setupRecording(speakerId) {
+    const btnRecord = speakerId === 0 ? btnRecord0 : btnRecord1;
+    const isRecording = btnRecord.classList.contains("recording");
+    
+    if (isRecording) {
+        // Stop active recording
+        if (mediaRecorders[speakerId]) {
+            mediaRecorders[speakerId].stop();
+            btnRecord.classList.remove("recording");
+            btnRecord.innerHTML = `<i class="fa-solid fa-microphone"></i> Record Mic`;
+            setAgentOrbState("idle", "AGENT READY", "Voice profile recorded. Transmitting to backend...");
+        }
+    } else {
+        // Start recording
+        try {
+            log("info", `Requesting microphone access for Speaker ${speakerId}...`);
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            
+            initAudioContext();
+            setAgentOrbState("listening", "LISTENING...", `Say a short 10-15s dialogue sentence to clone voice profile.`);
+            
+            audioChunks[speakerId] = [];
+            const mediaRecorder = new MediaRecorder(stream);
+            mediaRecorders[speakerId] = mediaRecorder;
+            
+            mediaRecorder.ondataavailable = (event) => {
+                audioChunks[speakerId].push(event.data);
+            };
+            
+            mediaRecorder.onstop = async () => {
+                log("info", "Processing audio chunks...");
+                const audioBlob = new Blob(audioChunks[speakerId], { type: "audio/wav" });
+                
+                // Release microphore stream tracks
+                stream.getTracks().forEach(track => track.stop());
+                
+                // Upload recorded WAV profile to server
+                const spkName = speakerId === 0 ? spkName0.value : spkName1.value;
+                await uploadVoiceProfile(audioBlob, speakerId, spkName);
+            };
+            
+            mediaRecorder.start();
+            btnRecord.classList.add("recording");
+            btnRecord.innerHTML = `<i class="fa-solid fa-square"></i> Stop Mic`;
+            log("success", "Microphone recording started. Speak clearly now!");
+        } catch (e) {
+            log("error", `Could not record voice: ${e.message}`);
+            setAgentOrbState("idle", "AGENT READY", "Microphone permission denied or source invalid.");
+        }
+    }
+}
+
+// Transmit Voice profile file to FastAPI backend
+async function uploadVoiceProfile(blob, speakerId, name) {
+    const formData = new FormData();
+    formData.append("file", blob, `mic_speaker_${speakerId}.wav`);
+    formData.append("speaker_name", name);
+    
+    try {
+        log("info", "Uploading voice clone prompt to server database...");
+        const res = await fetch("/api/upload-voice", {
+            method: "POST",
+            body: formData
+        });
+        const data = await res.json();
+        
+        if (data.status === "success") {
+            voicePaths[speakerId] = data.voice_path;
+            
+            // Show preview player
+            const previewPlayer = speakerId === 0 ? audioPreview0 : audioPreview1;
+            const statusBox = speakerId === 0 ? clonedStatus0 : clonedStatus1;
+            
+            previewPlayer.src = `/static/cloned_voices/${data.filename}`;
+            statusBox.classList.remove("hidden");
+            
+            log("success", `Voice cloned successfully under speaker code "${name}"!`);
+        }
+    } catch(e) {
+        log("error", "Error uploading voice cloning profile.");
+    }
+}
+
+// Wire File Selector uploads for pre-existing WAV voice samples
+async function handleFileSelect(e, speakerId) {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    log("info", `Uploading selected file: ${file.name}`);
+    const name = speakerId === 0 ? spkName0.value : spkName1.value;
+    await uploadVoiceProfile(file, speakerId, name);
+}
+
+// ==========================================================================
+// Speech Synthesis Triggers (REST vs WebSocket Stream)
+// ==========================================================================
+
+async function triggerSynthesis() {
+    const text = txtScript.value.trim();
+    if (!text) {
+        log("error", "Cannot synthesize speech. Script text field is empty!");
+        return;
+    }
+    
+    initAudioContext();
+    stopPlayback(); // Clean up existing audio cycles
+    
+    const isStream = chkStreamMode.checked;
+    
+    const speaker_voices = {};
+    if (voicePaths[0]) speaker_voices["0"] = voicePaths[0];
+    if (voicePaths[1]) speaker_voices["1"] = voicePaths[1];
+    
+    if (isStream) {
+        // Mode A: Real-Time WebSockets Streaming
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            log("error", "WebSocket channel is not active. Streaming offline.");
+            return;
+        }
+        
+        startStreamingPlayback();
+        
+        // Push script parameters to WebSocket
+        ws.send(JSON.stringify({
+            text: text,
+            voice_sample_path: voicePaths[0], // primary voice clone prompt path
+            speaker_id: 0,
+            speaker_voices: speaker_voices
+        }));
+        
+    } else {
+        // Mode B: Standard Full WAV synthesis
+        try {
+            log("info", "Initiating complete script compilation... Please wait...");
+            setAgentOrbState("thinking", "COMPILING SCRIPT", "Executing neural modeling and saving audio...");
+            btnSynthesize.disabled = true;
+            
+            const res = await fetch("/api/generate", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    text: text,
+                    voice_sample_path: voicePaths[0],
+                    speaker_id: 0,
+                    speaker_voices: speaker_voices
+                })
+            });
+            const data = await res.json();
+            
+            btnSynthesize.disabled = false;
+            
+            if (data.status === "success") {
+                log("success", `Script generated successfully using engine mode: [${data.mode}]`);
+                loadTraditionalPlayer(data.audio_url);
+            } else {
+                throw new Error("API return code was not successful.");
+            }
+        } catch (e) {
+            btnSynthesize.disabled = false;
+            setAgentOrbState("idle", "AGENT READY", "Dialogue generation failed.");
+            log("error", `Synthesis generation failed: ${e.message}`);
+        }
+    }
+}
+
+// Controls standard player execution for downloaded WAV files
+async function loadTraditionalPlayer(audioUrl) {
+    try {
+        log("info", "Loading generated voice track into audio player...");
+        const res = await fetch(audioUrl);
+        const arrayBuffer = await res.arrayBuffer();
+        
+        audioCtx.decodeAudioData(arrayBuffer, (decodedBuffer) => {
+            currentAudioSource = audioCtx.createBufferSource();
+            currentAudioSource.buffer = decodedBuffer;
+            
+            currentAudioSource.connect(gainNode);
+            currentAudioSource.start(0);
+            
+            setAgentOrbState("speaking", "PLAYING AUDIO", "Playing compiled high-fidelity voice track...");
+            audioToolbar.classList.remove("hidden");
+            btnStop.disabled = false;
+            btnSynthesize.disabled = true;
+            
+            // Set up player timeline meters
+            lblTimeStart.innerText = "00:00";
+            lblTimeEnd.innerText = formatTime(decodedBuffer.duration);
+            sliderTimeline.max = Math.floor(decodedBuffer.duration);
+            sliderTimeline.value = 0;
+            
+            const startTime = audioCtx.currentTime;
+            const updateTimeline = () => {
+                if (currentAudioSource) {
+                    const elapsed = audioCtx.currentTime - startTime;
+                    sliderTimeline.value = Math.floor(elapsed);
+                    progressTimelineFill.style.width = `${(elapsed / decodedBuffer.duration) * 100}%`;
+                    lblTimeStart.innerText = formatTime(elapsed);
+                    
+                    if (elapsed < decodedBuffer.duration) {
+                        requestAnimationFrame(updateTimeline);
+                    }
+                }
+            };
+            
+            updateTimeline();
+            
+            currentAudioSource.onended = () => {
+                stopPlayback();
+            };
+        }, (err) => {
+            log("error", "Error decoding audio buffer track.");
+        });
+    } catch(e) {
+        log("error", "Failed to compile compiled WAV player.");
+    }
+}
+
+function formatTime(seconds) {
+    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+    const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
+}
+
+// ==========================================================================
+// Event Binding & Presets Loading (Dashboard HUD controls)
+// ==========================================================================
+
+function bindEvents() {
+    // Primary execution actions
+    btnSynthesize.addEventListener("click", triggerSynthesis);
+    
+    // Voice profiling recording hooks
+    btnRecord0.addEventListener("click", () => setupRecording(0));
+    btnRecord1.addEventListener("click", () => setupRecording(1));
+    
+    fileVoice0.addEventListener("change", (e) => handleFileSelect(e, 0));
+    fileVoice1.addEventListener("change", (e) => handleFileSelect(e, 1));
+    
+    // Standard audio adjustment nodes
+    sliderVolume.addEventListener("input", (e) => {
+        setVolume(e.target.value / 100);
+    });
+    
+    btnClearLogs.addEventListener("click", () => {
+        consoleBody.innerHTML = `<div class="log-line system">[System] Console buffer cleared.</div>`;
+    });
+    
+    // Presets loaders
+    presetPodcast.addEventListener("click", () => {
+        txtScript.value = `Speaker 0: Welcome back to the Vibe Voice podcast segment. Today we are cloning human expressions.
+Speaker 1: That is right! The 0.5B model manages this dialogue transition on a local CPU extremely fast.
+Speaker 0: Incredible! It sounds like two real people sitting in this glassmorphic studio together.`;
+        log("info", "Loaded preset script: [Podcast Dialogue]");
+    });
+    
+    presetAssistant.addEventListener("click", () => {
+        txtScript.value = `Speaker 0: Hello, I am your personalized voice assistant. How can I help you customize your Dine Direct orders today?`;
+        log("info", "Loaded preset script: [AI Voice Assistant]");
+    });
+    
+    presetNews.addEventListener("click", () => {
+        txtScript.value = `Speaker 1: Breaking news from Microsoft Research. The Vibe Voice speech synthesis models are now live on local devices.`;
+        log("info", "Loaded preset script: [News Broadcast]");
+    });
+}

static/index.css

@@ -0,0 +1,1067 @@
+/* ==========================================================================
+   VibeVoice Studio CSS Stylesheet
+   Design Paradigm: Deep Space Dark Mode Glassmorphism with Neon Accents
+   ========================================================================== */
+
+:root {
+    --bg-dark: #07090e;
+    --card-bg: rgba(13, 17, 28, 0.45);
+    --card-border: rgba(255, 255, 255, 0.08);
+    --text-primary: #f0f3fa;
+    --text-secondary: #8e9bb5;
+    
+    /* Neon Accents HSL */
+    --accent-cyan: hsl(185, 95%, 48%);
+    --accent-cyan-glow: hsla(185, 95%, 48%, 0.35);
+    --accent-purple: hsl(265, 88%, 64%);
+    --accent-purple-glow: hsla(265, 88%, 64%, 0.35);
+    --accent-pink: hsl(330, 92%, 60%);
+    --accent-pink-glow: hsla(330, 92%, 60%, 0.35);
+    --accent-green: hsl(145, 85%, 50%);
+    
+    /* Transition Timings */
+    --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
+    --transition-quick: 0.2s var(--ease-smooth);
+    --transition-mid: 0.4s var(--ease-smooth);
+}
+
+/* Reset & Core Styling */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+}
+
+/* Stunning Floating Background Gradients */
+.glow-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.glow-bg::before, .glow-bg::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(140px);
+    opacity: 0.15;
+    pointer-events: none;
+}
+
+.glow-bg::before {
+    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
+    width: 600px;
+    height: 600px;
+    top: -200px;
+    left: -150px;
+    animation: floatGlow 25s infinite alternate ease-in-out;
+}
+
+.glow-bg::after {
+    background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
+    width: 700px;
+    height: 700px;
+    bottom: -250px;
+    right: -150px;
+    animation: floatGlow 30s infinite alternate-reverse ease-in-out;
+}
+
+@keyframes floatGlow {
+    0% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(100px, 80px) scale(1.15); }
+    100% { transform: translate(-50px, 150px) scale(0.9); }
+}
+
+/* Layout Containers */
+.container {
+    width: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    padding: 24px 16px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* ==========================================================================
+   Header Styling
+   ========================================================================== */
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px;
+    background: rgba(10, 14, 26, 0.4);
+    border-radius: 16px;
+    border: 1px solid var(--card-border);
+    backdrop-filter: blur(16px);
+    margin-bottom: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.logo-icon {
+    font-size: 28px;
+    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 10px var(--accent-cyan-glow));
+}
+
+.logo-text h1 {
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    color: var(--text-primary);
+    line-height: 1.1;
+}
+
+.logo-text h1 span {
+    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.logo-text p {
+    font-size: 11px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.status-controls {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+/* Model Loading Card widget */
+.model-status-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(255, 255, 255, 0.04);
+    padding: 8px 14px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.status-dot.green {
+    background-color: var(--accent-green);
+    box-shadow: 0 0 8px var(--accent-green);
+}
+
+.status-dot.yellow {
+    background-color: #ffb703;
+    box-shadow: 0 0 8px #ffb703;
+}
+
+.status-dot.red {
+    background-color: var(--accent-pink);
+    box-shadow: 0 0 8px var(--accent-pink);
+}
+
+.status-lbl {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.status-lbl strong {
+    color: var(--text-primary);
+}
+
+/* Online/Offline connection badge */
+.connection-badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 8px 14px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--text-secondary);
+}
+
+.connection-badge.online {
+    color: var(--accent-cyan);
+    background: rgba(0, 242, 254, 0.06);
+    border-color: rgba(0, 242, 254, 0.2);
+    filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.1));
+}
+
+/* ==========================================================================
+   Dashboard Grid Layout
+   ========================================================================== */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 360px 1fr;
+    gap: 24px;
+    flex: 1;
+}
+
+/* Premium Glassmorphic Cards */
+.glass-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 20px;
+    padding: 24px;
+    backdrop-filter: blur(24px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.panel-header i {
+    font-size: 20px;
+    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.panel-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.panel-desc {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin-bottom: 20px;
+}
+
+/* ==========================================================================
+   Speaker Profiles / Voice Cloning Center
+   ========================================================================== */
+.speaker-profile-box {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 16px;
+    padding: 16px;
+    margin-bottom: 16px;
+    transition: var(--transition-mid);
+}
+
+.speaker-profile-box:hover {
+    border-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.speaker-badge-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 14px;
+}
+
+.speaker-num {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.badge {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 3px 8px;
+    border-radius: 20px;
+    text-transform: uppercase;
+}
+
+.cyan-glow {
+    background: rgba(0, 242, 254, 0.08);
+    border: 1px solid rgba(0, 242, 254, 0.2);
+    color: var(--accent-cyan);
+}
+
+.purple-glow {
+    background: rgba(162, 89, 255, 0.08);
+    border: 1px solid rgba(162, 89, 255, 0.2);
+    color: var(--accent-purple);
+}
+
+.speaker-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 14px;
+}
+
+.speaker-info label {
+    font-size: 11px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.form-input {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 13px;
+    color: var(--text-primary);
+    transition: var(--transition-quick);
+}
+
+.form-input:focus {
+    border-color: var(--accent-cyan);
+    box-shadow: 0 0 8px var(--accent-cyan-glow);
+    outline: none;
+}
+
+.cloning-options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.cloned-status {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px dashed rgba(255, 255, 255, 0.06);
+}
+
+.lbl-status {
+    font-size: 11px;
+    color: var(--accent-green);
+    font-weight: 500;
+}
+
+.mini-player {
+    width: 100%;
+    height: 28px;
+    border-radius: 4px;
+    outline: none;
+}
+
+/* Preset Buttons */
+.preset-box {
+    margin-top: 24px;
+}
+
+.preset-box h3 {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 10px;
+}
+
+.preset-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Buttons System */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition-quick);
+    border: 1px solid transparent;
+    user-select: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
+    color: #000;
+    font-weight: 700;
+    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25);
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.4);
+}
+
+.btn-primary:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--text-primary);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-outline:hover:not(:disabled) {
+    border-color: var(--accent-cyan);
+    color: var(--accent-cyan);
+    background: rgba(0, 242, 254, 0.02);
+}
+
+.btn-toggle {
+    background: linear-gradient(135deg, rgba(162, 89, 255, 0.1) 0%, rgba(255, 92, 141, 0.1) 100%);
+    border: 1px solid rgba(162, 89, 255, 0.25);
+    color: var(--text-primary);
+    padding: 6px 12px;
+    font-size: 11px;
+}
+
+.btn-toggle:hover {
+    border-color: var(--accent-pink);
+    box-shadow: 0 0 8px var(--accent-pink-glow);
+}
+
+.btn-toggle.active {
+    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%);
+    color: #fff;
+    border-color: transparent;
+}
+
+.btn-preset {
+    width: 100%;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    justify-content: flex-start;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.btn-preset:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+}
+
+.btn-sm {
+    padding: 8px 12px;
+    font-size: 12px;
+    border-radius: 8px;
+}
+
+.btn-xs {
+    padding: 6px 10px;
+    font-size: 11px;
+    border-radius: 6px;
+}
+
+.btn-lg {
+    padding: 14px 28px;
+    font-size: 15px;
+    border-radius: 14px;
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none !important;
+}
+
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Execution Panel Right Column
+   ========================================================================== */
+.execution-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* ==========================================================================
+   Visualizer Core & Holographic Orb
+   ========================================================================== */
+.visualizer-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 30px;
+    min-height: 250px;
+    background: radial-gradient(circle at center, rgba(16, 24, 48, 0.3) 0%, var(--card-bg) 100%);
+}
+
+.agent-orb-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 36px;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 500px;
+    justify-content: center;
+}
+
+.agent-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.agent-state-text {
+    font-family: 'Orbitron', monospace;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--text-primary);
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+    transition: var(--transition-mid);
+}
+
+.agent-state-sub {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* The Animated Holographic Orb */
+.agent-orb {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition-mid);
+}
+
+.orb-inner {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    position: relative;
+    z-index: 5;
+    transition: var(--transition-mid);
+}
+
+.orb-wave {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.orb-glow {
+    position: absolute;
+    top: -15px;
+    left: -15px;
+    right: -15px;
+    bottom: -15px;
+    border-radius: 50%;
+    filter: blur(25px);
+    z-index: 1;
+    opacity: 0.5;
+    transition: var(--transition-mid);
+}
+
+/* ORB STATE: Idle (Slow Breathing) */
+.agent-orb.idle .orb-inner {
+    background: radial-gradient(circle, var(--accent-cyan) 0%, rgba(0, 150, 255, 0.3) 100%);
+    box-shadow: 0 0 20px var(--accent-cyan-glow);
+    animation: orbPulse 4s infinite ease-in-out;
+}
+
+.agent-orb.idle .orb-glow {
+    background: var(--accent-cyan);
+    opacity: 0.3;
+}
+
+/* ORB STATE: Thinking (Vibrant Spinning Glow) */
+.agent-orb.thinking .orb-inner {
+    background: radial-gradient(circle, #fff 0%, var(--accent-purple) 70%, var(--accent-cyan) 100%);
+    box-shadow: 0 0 35px var(--accent-purple-glow);
+    animation: orbSpin 2s infinite linear, orbPulse 1s infinite ease-in-out;
+}
+
+.agent-orb.thinking .orb-glow {
+    background: var(--accent-purple);
+    opacity: 0.6;
+    animation: orbGlowScale 1.5s infinite alternate ease-in-out;
+}
+
+/* ORB STATE: Speaking (Dynamic Ring Waves) */
+.agent-orb.speaking .orb-inner {
+    background: radial-gradient(circle, #fff 0%, var(--accent-pink) 60%, var(--accent-purple) 100%);
+    box-shadow: 0 0 30px var(--accent-pink-glow);
+    animation: orbPulse 0.4s infinite ease-in-out;
+}
+
+.agent-orb.speaking .orb-glow {
+    background: var(--accent-pink);
+    opacity: 0.7;
+}
+
+.agent-orb.speaking .orb-wave {
+    border: 2.5px solid var(--accent-pink);
+    box-shadow: 0 0 10px var(--accent-pink-glow);
+    animation: waveExpand 1.2s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
+    opacity: 1;
+}
+
+.agent-orb.speaking .orb-wave.wave-2 {
+    animation-delay: 0.6s;
+}
+
+/* ORB STATE: Listening (Green organic pulses) */
+.agent-orb.listening .orb-inner {
+    background: radial-gradient(circle, #fff 0%, var(--accent-green) 70%);
+    box-shadow: 0 0 25px rgba(0, 230, 115, 0.4);
+    animation: orbPulse 1.2s infinite ease-in-out;
+}
+
+.agent-orb.listening .orb-glow {
+    background: var(--accent-green);
+    opacity: 0.4;
+}
+
+/* Keyframes animations */
+@keyframes orbPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.08); }
+    100% { transform: scale(1); }
+}
+
+@keyframes orbSpin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes orbGlowScale {
+    0% { transform: scale(0.95); opacity: 0.4; }
+    100% { transform: scale(1.2); opacity: 0.75; }
+}
+
+@keyframes waveExpand {
+    0% { transform: scale(0.9); opacity: 0.9; }
+    100% { transform: scale(1.8); opacity: 0; }
+}
+
+/* Real-Time Waveform visualizer container */
+.visualizer-canvas-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    padding-top: 16px;
+    margin-top: 10px;
+}
+
+#canvasWaveform {
+    width: 100%;
+    max-width: 600px;
+    height: 75px;
+}
+
+/* ==========================================================================
+   Script Editor Studio
+   ========================================================================== */
+.script-editor-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding-bottom: 14px;
+}
+
+.title-with-desc {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.title-with-desc i {
+    font-size: 18px;
+    color: var(--accent-purple);
+}
+
+.title-with-desc h2 {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+/* Real-time Streaming Switch */
+.toggle-mode-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.toggle-mode-container input {
+    display: none;
+}
+
+.toggle-slider {
+    width: 42px;
+    height: 22px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 20px;
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: var(--transition-quick);
+}
+
+.toggle-slider::before {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background-color: var(--text-primary);
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: var(--transition-quick);
+}
+
+.toggle-mode-container input:checked + .toggle-slider {
+    background-color: var(--accent-cyan-glow);
+    border-color: var(--accent-cyan);
+}
+
+.toggle-mode-container input:checked + .toggle-slider::before {
+    transform: translateX(20px);
+    background-color: var(--accent-cyan);
+    box-shadow: 0 0 6px var(--accent-cyan);
+}
+
+.toggle-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.toggle-mode-container input:checked ~ .toggle-label {
+    color: var(--accent-cyan);
+}
+
+/* Script Box Elements */
+.script-area-wrapper {
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--card-border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.script-textarea {
+    width: 100%;
+    height: 180px;
+    background: transparent;
+    border: none;
+    resize: none;
+    padding: 16px;
+    color: var(--text-primary);
+    font-family: 'Inter', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    outline: none;
+}
+
+.script-textarea::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+}
+
+.execution-actions {
+    display: flex;
+    gap: 16px;
+}
+
+.execution-actions .btn {
+    flex: 1;
+}
+
+/* ==========================================================================
+   Premium Audio Timeline Player Toolbar
+   ========================================================================== */
+.audio-control-bar {
+    padding: 16px 24px;
+    background: rgba(13, 17, 28, 0.7);
+    border-color: rgba(0, 242, 254, 0.15);
+    box-shadow: 0 8px 32px rgba(0, 242, 254, 0.05);
+}
+
+.playback-controls {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+}
+
+.playback-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition-quick);
+}
+
+.playback-btn:hover {
+    background: var(--accent-cyan);
+    border-color: transparent;
+    color: #000;
+    box-shadow: 0 0 10px var(--accent-cyan-glow);
+}
+
+.timeline-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+}
+
+.time-stamp {
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    color: var(--text-secondary);
+    min-width: 40px;
+}
+
+.progress-bar-wrapper {
+    position: relative;
+    flex: 1;
+    height: 6px;
+    display: flex;
+    align-items: center;
+}
+
+/* Sliders Styling (Cross-Browser) */
+.slider-theme {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    outline: none;
+    cursor: pointer;
+    position: relative;
+    z-index: 3;
+}
+
+.slider-theme::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--accent-cyan);
+    box-shadow: 0 0 6px var(--accent-cyan);
+    transition: 0.15s;
+}
+
+.slider-theme::-webkit-slider-thumb:hover {
+    transform: scale(1.3);
+}
+
+.progress-fill {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
+    border-radius: 10px;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.volume-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 130px;
+}
+
+.volume-container i {
+    color: var(--text-secondary);
+    font-size: 13px;
+    width: 16px;
+}
+
+.slider-volume {
+    width: 90px;
+}
+
+.speed-selector {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text-primary);
+    outline: none;
+    cursor: pointer;
+}
+
+.speed-selector option {
+    background-color: var(--bg-dark);
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* ==========================================================================
+   Console Log Viewer
+   ========================================================================== */
+.console-card {
+    background: rgba(4, 5, 8, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.console-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding-bottom: 8px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.console-header i {
+    color: var(--accent-cyan);
+    margin-right: 6px;
+}
+
+.console-body {
+    height: 110px;
+    overflow-y: auto;
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    line-height: 1.8;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-right: 6px;
+}
+
+/* Custom Scrollbar for console and script text areas */
+.console-body::-webkit-scrollbar, .script-textarea::-webkit-scrollbar {
+    width: 5px;
+}
+
+.console-body::-webkit-scrollbar-track, .script-textarea::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.console-body::-webkit-scrollbar-thumb, .script-textarea::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+}
+
+.log-line {
+    padding: 2px 6px;
+    border-radius: 4px;
+    word-break: break-all;
+}
+
+.log-line.system {
+    color: var(--text-secondary);
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.log-line.info {
+    color: var(--accent-cyan);
+    background: rgba(0, 242, 254, 0.02);
+}
+
+.log-line.success {
+    color: var(--accent-green);
+    background: rgba(0, 230, 115, 0.02);
+}
+
+.log-line.error {
+    color: var(--accent-pink);
+    background: rgba(255, 92, 141, 0.02);
+}
+
+.log-line.word {
+    color: #fff;
+    font-weight: 500;
+    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
+}
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+.app-footer {
+    text-align: center;
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* Responsive Scaling */
+@media (max-width: 1024px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+}

static/index.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VibeVoice Agent - Microsoft Research Voice Synthesis Studio</title>
+    <meta name="description" content="A state-of-the-art voice agent cloning and synthesis platform powered by Microsoft VibeVoice models with real-time streaming and custom speaker cloning.">
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;700;900&display=swap" rel="stylesheet">
+    <!-- FontAwesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Main Style Sheet -->
+    <link rel="stylesheet" href="/index.css">
+</head>
+<body>
+    <div class="glow-bg"></div>
+    <div class="container">
+        
+        <!-- Header Section -->
+        <header class="app-header">
+            <div class="logo-area">
+                <i class="fa-solid fa-wand-magic-sparkles logo-icon"></i>
+                <div class="logo-text">
+                    <h1>VibeVoice<span>Studio</span></h1>
+                    <p>Microsoft Frontier Speech Synthesis</p>
+                </div>
+            </div>
+            
+            <div class="status-controls">
+                <!-- AI Model Loader Status -->
+                <div class="model-status-card" id="modelStatusCard">
+                    <span class="status-dot green animate-pulse" id="modelDot"></span>
+                    <span class="status-lbl">Model: <strong id="modelStatusVal">Demo Synthesizer</strong></span>
+                    <button class="btn btn-toggle" id="btnToggleModel" title="Switch between fast local synthesizer & full VibeVoice weights">
+                        <i class="fa-solid fa-power-off"></i> Toggle AI Model
+                    </button>
+                </div>
+                
+                <!-- Websocket Connection Status -->
+                <div class="connection-badge" id="connBadge">
+                    <i class="fa-solid fa-link-slash icon" id="connIcon"></i>
+                    <span id="connText">Offline</span>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Dashboard Layout -->
+        <main class="dashboard-grid">
+            
+            <!-- Left Column: Voice Profiles & Configurations -->
+            <section class="control-panel glass-card">
+                <div class="panel-header">
+                    <i class="fa-solid fa-user-gear"></i>
+                    <h2>Voice Cloning Center</h2>
+                </div>
+                
+                <p class="panel-desc">Clone any voice in seconds. Record or upload a 10-30s audio sample to create a speaker profile prompt.</p>
+
+                <!-- Speaker Settings Slot 1 -->
+                <div class="speaker-profile-box" id="speakerSlot0">
+                    <div class="speaker-badge-header">
+                        <span class="speaker-num">Speaker 0</span>
+                        <div class="badge cyan-glow">Primary Speaker</div>
+                    </div>
+                    
+                    <div class="speaker-info">
+                        <label for="spkName0">Speaker Name</label>
+                        <input type="text" id="spkName0" value="Alex" class="form-input">
+                    </div>
+
+                    <div class="cloning-options">
+                        <button class="btn btn-sm btn-outline" id="btnRecord0">
+                            <i class="fa-solid fa-microphone"></i> Record Mic
+                        </button>
+                        <label class="btn btn-sm btn-outline btn-file">
+                            <i class="fa-solid fa-upload"></i> Upload WAV
+                            <input type="file" id="fileVoice0" accept="audio/wav,audio/mp3" style="display: none;">
+                        </label>
+                    </div>
+
+                    <div class="cloned-status hidden" id="clonedStatus0">
+                        <span class="lbl-status"><i class="fa-solid fa-check-double"></i> Voice Cloned:</span>
+                        <audio id="audioPreview0" controls class="mini-player"></audio>
+                    </div>
+                </div>
+
+                <!-- Speaker Settings Slot 2 -->
+                <div class="speaker-profile-box" id="speakerSlot1">
+                    <div class="speaker-badge-header">
+                        <span class="speaker-num">Speaker 1</span>
+                        <div class="badge purple-glow">Dialogue Partner</div>
+                    </div>
+                    
+                    <div class="speaker-info">
+                        <label for="spkName1">Speaker Name</label>
+                        <input type="text" id="spkName1" value="Sarah" class="form-input">
+                    </div>
+
+                    <div class="cloning-options">
+                        <button class="btn btn-sm btn-outline" id="btnRecord1">
+                            <i class="fa-solid fa-microphone"></i> Record Mic
+                        </button>
+                        <label class="btn btn-sm btn-outline btn-file">
+                            <i class="fa-solid fa-upload"></i> Upload WAV
+                            <input type="file" id="fileVoice1" accept="audio/wav,audio/mp3" style="display: none;">
+                        </label>
+                    </div>
+
+                    <div class="cloned-status hidden" id="clonedStatus1">
+                        <span class="lbl-status"><i class="fa-solid fa-check-double"></i> Voice Cloned:</span>
+                        <audio id="audioPreview1" controls class="mini-player"></audio>
+                    </div>
+                </div>
+
+                <!-- Presets & Sample Scripts -->
+                <div class="preset-box">
+                    <h3>Dialogue Presets</h3>
+                    <div class="preset-buttons">
+                        <button class="btn btn-xs btn-preset" id="presetPodcast">
+                            <i class="fa-solid fa-podcast"></i> Podcast Host
+                        </button>
+                        <button class="btn btn-xs btn-preset" id="presetAssistant">
+                            <i class="fa-solid fa-headset"></i> AI Voice Agent
+                        </button>
+                        <button class="btn btn-xs btn-preset" id="presetNews">
+                            <i class="fa-solid fa-newspaper"></i> News Broadcast
+                        </button>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Right Column: Interactive Script Synthesizer & Visualizer -->
+            <section class="execution-panel">
+                
+                <!-- Main Visualizer Core Box -->
+                <div class="visualizer-container glass-card">
+                    <!-- Holographic Pulsing Agent Orb -->
+                    <div class="agent-orb-wrapper">
+                        <div class="agent-orb idle" id="agentOrb">
+                            <div class="orb-inner"></div>
+                            <div class="orb-wave"></div>
+                            <div class="orb-wave wave-2"></div>
+                            <div class="orb-glow"></div>
+                        </div>
+                        <div class="agent-details">
+                            <span class="agent-state-text" id="agentStateText">AGENT READY</span>
+                            <p class="agent-state-sub" id="agentStateSub">Configure scripts and trigger generation below</p>
+                        </div>
+                    </div>
+
+                    <!-- Canvas Audio Visualizer -->
+                    <div class="visualizer-canvas-box">
+                        <canvas id="canvasWaveform" width="600" height="90"></canvas>
+                    </div>
+                </div>
+
+                <!-- Script Editor Studio -->
+                <div class="script-editor-card glass-card">
+                    <div class="editor-header">
+                        <div class="title-with-desc">
+                            <i class="fa-solid fa-pen-nib"></i>
+                            <h2>Podcast Script Studio</h2>
+                        </div>
+                        
+                        <!-- Synthesis Type Controls -->
+                        <div class="synthesis-mode-selector">
+                            <label class="toggle-mode-container" title="Streams audio in real-time as words are spoken">
+                                <input type="checkbox" id="chkStreamMode" checked>
+                                <span class="toggle-slider"></span>
+                                <span class="toggle-label"><i class="fa-solid fa-bolt"></i> Real-time Streaming</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div class="script-area-wrapper">
+                        <textarea id="txtScript" placeholder="Write speaker turn-taking script...
+Format: Speaker ID: Text content
+Example:
+Speaker 0: Hello, how are you?
+Speaker 1: I am doing fantastic! Let's clone some voices." class="script-textarea">Speaker 0: Welcome to Vibe Voice Studio. I am cloned from your custom voice sample.
+Speaker 1: That is incredible! The transition between speakers sounds so smooth and natural.
+Speaker 0: Yes, Microsoft's continuous acoustic tokenizers make multi-speaker podcasts sound beautiful.</textarea>
+                    </div>
+
+                    <!-- Execution Buttons -->
+                    <div class="execution-actions">
+                        <button class="btn btn-primary btn-lg" id="btnSynthesize">
+                            <i class="fa-solid fa-circle-play icon-play"></i> Synthesize Speech
+                        </button>
+                        <button class="btn btn-secondary btn-lg" id="btnStop" disabled>
+                            <i class="fa-solid fa-circle-stop"></i> Stop Agent
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Custom Audio Control Toolbar -->
+                <div class="audio-control-bar glass-card hidden" id="audioToolbar">
+                    <div class="playback-controls">
+                        <button class="playback-btn" id="btnToolbarPlay" title="Play / Pause"><i class="fa-solid fa-play"></i></button>
+                        
+                        <div class="timeline-container">
+                            <span class="time-stamp" id="lblTimeStart">00:00</span>
+                            <div class="progress-bar-wrapper">
+                                <input type="range" id="sliderTimeline" min="0" max="100" value="0" class="slider-theme">
+                                <div class="progress-fill" id="progressTimelineFill"></div>
+                            </div>
+                            <span class="time-stamp" id="lblTimeEnd">00:00</span>
+                        </div>
+                        
+                        <!-- Volume Controls -->
+                        <div class="volume-container">
+                            <i class="fa-solid fa-volume-high" id="iconVolume"></i>
+                            <input type="range" id="sliderVolume" min="0" max="100" value="80" class="slider-theme slider-volume">
+                        </div>
+
+                        <!-- Speed Controls -->
+                        <select id="selectSpeed" class="speed-selector">
+                            <option value="0.75">0.75x</option>
+                            <option value="1.0" selected>1.0x</option>
+                            <option value="1.25">1.25x</option>
+                            <option value="1.5">1.5x</option>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Debug Console Log Viewer -->
+                <div class="console-card glass-card">
+                    <div class="console-header">
+                        <span><i class="fa-solid fa-terminal"></i> Agent Console Logs</span>
+                        <button class="btn btn-xs btn-outline" id="btnClearLogs">Clear</button>
+                    </div>
+                    <div class="console-body" id="consoleBody">
+                        <div class="log-line system">[System] Welcome to VibeVoice Agent Console. System ready.</div>
+                        <div class="log-line info">[Info] Default mode: Simulated Synthesizer (runs instantly on CPU). Click 'Toggle AI Model' to load the full 0.5B neural net!</div>
+                    </div>
+                </div>
+
+            </section>
+        </main>
+        
+        <!-- Footer -->
+        <footer class="app-footer">
+            <p>VibeVoice Voice Synthesis Platform © 2026. Built with Microsoft Research VibeVoice Models & FastAPI.</p>
+        </footer>
+    </div>
+
+    <!-- Script assets -->
+    <script src="/app.js"></script>
+</body>
+</html>