VoiceKit MCP Server

.gitignore

@@ -0,0 +1,6 @@
+.env
+__pycache__/
+*.pyc
+gradio_temp/
+.claude/
+modal_app.py

README.md

@@ -0,0 +1,102 @@
+---
+title: VoiceKit MCP Server
+emoji: 🎙️
+colorFrom: indigo
+colorTo: purple
+sdk: gradio
+sdk_version: 6.0.0
+app_file: app.py
+pinned: false
+license: mit
+tags:
+  - building-mcp-track-creative
+---
+
+# VoiceKit MCP Server
+
+**Voice analysis toolkit exposing 6 MCP tools for AI assistants.**
+
+VoiceKit provides comprehensive voice processing capabilities through the Model Context Protocol (MCP), enabling Claude and other AI assistants to analyze, compare, transcribe, and process audio.
+
+## Purpose
+
+VoiceKit bridges the gap between AI assistants and advanced voice analysis. It allows:
+- **Voice comparison** for mimicry games, pronunciation practice
+- **Audio transcription** in multiple languages
+- **Acoustic analysis** for voice coaching, music production
+- **Background removal** for clean audio extraction
+
+## MCP Endpoint
+
+```
+https://MCP-1st-Birthday-voicekit.hf.space/gradio_api/mcp/sse
+```
+
+## Quick Start
+
+Add to your `claude_desktop_config.json`:
+
+```json
+{
+    "mcpServers": {
+        "voicekit": {
+            "url": "https://MCP-1st-Birthday-voicekit.hf.space/gradio_api/mcp/sse"
+        }
+    }
+}
+```
+
+## Available Tools (6)
+
+### Primitive Tools
+
+| Tool | Purpose | Input | Output |
+|------|---------|-------|--------|
+| `extract_embedding` | Get voice fingerprint | Audio file | 768-dim Wav2Vec2 vector |
+| `compare_voices` | Measure voice similarity | 2 audio files | Similarity score (0-1) |
+| `analyze_acoustic_features` | Analyze voice characteristics | Audio file | Pitch, energy, rhythm, tempo |
+| `transcribe_audio` | Speech-to-text | Audio + language | Transcribed text |
+| `isolate_voice` | Remove background noise/music | Audio file | Clean voice audio |
+
+### Composite Tool
+
+| Tool | Purpose | Input | Output |
+|------|---------|-------|--------|
+| `analyze_voice_similarity` | Full voice analysis | 2 audios + text | 5 metrics + overall score |
+
+## Use Cases
+
+### Voice Mimicry Game
+```
+User: "Compare my voice to this movie clip"
+Claude: [uses analyze_voice_similarity] → Returns pronunciation, tone, pitch, rhythm, energy scores
+```
+
+### Audio Transcription
+```
+User: "What does this Korean audio say?"
+Claude: [uses transcribe_audio with language="ko"] → Returns Korean text
+```
+
+### Clean Audio Extraction
+```
+User: "Remove the background music from this meme"
+Claude: [uses isolate_voice] → Returns isolated voice track
+```
+
+## Architecture
+
+```
+┌─────────────────┐     MCP/SSE      ┌─────────────────┐     API      ┌─────────────────┐
+│  Claude Desktop │ ◄──────────────► │   HF Space      │ ◄──────────► │   Modal GPU     │
+│  (MCP Client)   │                  │   (Gradio)      │              │   (Inference)   │
+└─────────────────┘                  └─────────────────┘              └─────────────────┘
+```
+
+- **Frontend**: Gradio 6 MCP Server on Hugging Face Spaces
+- **Backend**: Modal serverless GPU for ML inference
+- **Models**: Wav2Vec2, ElevenLabs Scribe STT, Voice Isolator
+
+## Demo
+
+Try each tool directly in the tabs on the Space UI!

app.py

@@ -0,0 +1,2454 @@
+"""
+VoiceKit - MCP Server for Voice Analysis
+
+6 MCP tools for voice processing (all accept base64 audio):
+- Embedding extraction, voice comparison, acoustic analysis
+- Speech-to-text, voice isolation, similarity analysis
+
+MCP Endpoint: https://MCP-1st-Birthday-voicekit-test.hf.space/gradio_api/mcp/sse
+"""
+
+import gradio as gr
+import base64
+import os
+import json
+import tempfile
+import math
+
+# Set Gradio temp directory to current directory
+GRADIO_TEMP_DIR = os.path.join(os.getcwd(), "gradio_temp")
+os.makedirs(GRADIO_TEMP_DIR, exist_ok=True)
+os.environ['GRADIO_TEMP_DIR'] = GRADIO_TEMP_DIR
+tempfile.tempdir = GRADIO_TEMP_DIR
+
+# Modal connection (requires MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets)
+try:
+    import modal
+    AudioAnalyzer = modal.Cls.from_name("voice-semantle", "AudioAnalyzer")
+    analyzer = AudioAnalyzer()
+    modal_available = True
+    print("Modal connected!")
+except Exception as e:
+    modal_available = False
+    analyzer = None
+    print(f"Modal not available: {e}")
+
+
+def file_to_base64(file_path: str) -> str:
+    """Convert file path to base64 string"""
+    if not file_path:
+        return ""
+    with open(file_path, "rb") as f:
+        return base64.b64encode(f.read()).decode()
+
+
+# ============================================================================
+# MCP Tools (all accept base64 directly)
+# ============================================================================
+
+def extract_embedding(audio_base64: str) -> str:
+    """
+    Extract voice embedding using Wav2Vec2.
+
+    Returns a 768-dimensional vector representing voice characteristics.
+    Useful for voice comparison, speaker identification, etc.
+
+    Args:
+        audio_base64: Audio file as base64 encoded string
+
+    Returns:
+        embedding (768-dim list), model, dim
+    """
+    if not modal_available:
+        return json.dumps({"error": "Modal not available. Please set MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets."})
+    if not audio_base64:
+        return json.dumps({"error": "No audio provided"})
+
+    try:
+        result = analyzer.extract_embedding.remote(audio_base64)
+        if "embedding" in result:
+            result["embedding_preview"] = result["embedding"][:5] + ["..."]
+            result["embedding_length"] = len(result["embedding"])
+            del result["embedding"]
+        return json.dumps(result, ensure_ascii=False, indent=2)
+    except Exception as e:
+        return json.dumps({"error": str(e)})
+
+
+def match_voice(audio1_base64: str, audio2_base64: str) -> str:
+    """
+    Compare similarity between two voices.
+
+    Extracts Wav2Vec2 embeddings and calculates cosine similarity.
+    Useful for checking if the same person spoke with similar tone.
+
+    Args:
+        audio1_base64: First audio as base64 encoded string
+        audio2_base64: Second audio as base64 encoded string
+
+    Returns:
+        similarity (0-1), tone_score (0-100)
+    """
+    if not modal_available:
+        return json.dumps({"error": "Modal not available. Please set MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets."})
+    if not audio1_base64 or not audio2_base64:
+        return json.dumps({"error": "Both audio files required"})
+
+    try:
+        result = analyzer.compare_voices.remote(audio1_base64, audio2_base64)
+        return json.dumps(result, ensure_ascii=False, indent=2)
+    except Exception as e:
+        return json.dumps({"error": str(e)})
+
+
+def analyze_acoustics(audio_base64: str) -> str:
+    """
+    Analyze acoustic features of audio.
+
+    Extracts pitch, energy, rhythm, tempo, and spectral characteristics.
+    Useful for understanding voice expressiveness and characteristics.
+
+    Args:
+        audio_base64: Audio file as base64 encoded string
+
+    Returns:
+        pitch, energy, rhythm, tempo, spectral information
+    """
+    if not modal_available:
+        return json.dumps({"error": "Modal not available. Please set MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets."})
+    if not audio_base64:
+        return json.dumps({"error": "No audio provided"})
+
+    try:
+        result = analyzer.analyze_acoustic_features.remote(audio_base64)
+        return json.dumps(result, ensure_ascii=False, indent=2)
+    except Exception as e:
+        return json.dumps({"error": str(e)})
+
+
+def transcribe_audio(audio_base64: str, language: str = "en") -> str:
+    """
+    Convert audio to text (Speech-to-Text).
+
+    Uses ElevenLabs Scribe v1 model for high-quality speech recognition.
+    Supports various languages.
+
+    Args:
+        audio_base64: Audio file as base64 encoded string
+        language: Language code (e.g., "en", "ko", "ja"). Default is "en"
+
+    Returns:
+        text, language, model
+    """
+    if not modal_available:
+        return json.dumps({"error": "Modal not available. Please set MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets."})
+    if not audio_base64:
+        return json.dumps({"error": "No audio provided"})
+
+    try:
+        result = analyzer.transcribe_audio.remote(audio_base64, language)
+        return json.dumps(result, ensure_ascii=False, indent=2)
+    except Exception as e:
+        return json.dumps({"error": str(e)})
+
+
+def isolate_voice(audio_base64: str) -> str:
+    """
+    Remove background music (BGM) and extract voice only.
+
+    Uses ElevenLabs Voice Isolator to remove music, noise, etc.
+    Useful for memes, songs, and other audio with background sounds.
+
+    Args:
+        audio_base64: Audio file as base64 encoded string
+
+    Returns:
+        isolated_audio_base64, metadata (bgm_detected, sizes, duration)
+    """
+    if not modal_available:
+        return json.dumps({"error": "Modal not available. Please set MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets."})
+    if not audio_base64:
+        return json.dumps({"error": "No audio provided"})
+
+    try:
+        result = analyzer.isolate_voice.remote(audio_base64)
+        return json.dumps(result, ensure_ascii=False, indent=2)
+    except Exception as e:
+        return json.dumps({"error": str(e)})
+
+
+def grade_voice(
+    user_audio_base64: str,
+    reference_audio_base64: str,
+    reference_text: str = "",
+    category: str = "meme"
+) -> str:
+    """
+    Comprehensively compare and analyze user voice with reference voice.
+
+    Evaluates with 5 metrics:
+    - pronunciation: Pronunciation accuracy (STT-based)
+    - tone: Voice timbre similarity (Wav2Vec2 embedding)
+    - pitch: Pitch matching
+    - rhythm: Rhythm sense
+    - energy: Energy expressiveness
+
+    Args:
+        user_audio_base64: User audio as base64 encoded string
+        reference_audio_base64: Reference audio as base64 encoded string
+        reference_text: Reference text (optional, enables pronunciation scoring)
+        category: Category (meme, song, movie) - determines weights
+
+    Returns:
+        overall_score, metrics, weak_points, strong_points, feedback
+    """
+    if not modal_available:
+        return json.dumps({"error": "Modal not available. Please set MODAL_TOKEN_ID and MODAL_TOKEN_SECRET in HF Secrets."})
+    if not user_audio_base64 or not reference_audio_base64:
+        return json.dumps({"error": "Both user and reference audio required"})
+
+    try:
+        result = analyzer.analyze_audio.remote(
+            user_audio_base64=user_audio_base64,
+            reference_audio_base64=reference_audio_base64,
+            reference_text=reference_text if reference_text else None,
+            challenge_id="mcp_analysis",
+            category=category,
+        )
+        # Simplify output for backend/API use
+        metrics = result.get("metrics", {})
+        simple_result = {
+            "pitch": metrics.get("pitch", 0),
+            "rhythm": metrics.get("rhythm", 0),
+            "energy": metrics.get("energy", 0),
+            "pronunciation": metrics.get("pronunciation", 0),
+            "transcript": metrics.get("transcript", 0),
+            "overall": result.get("overall_score", 0),
+            "user_text": result.get("user_text", "")
+        }
+        return json.dumps(simple_result, ensure_ascii=False, indent=2)
+    except Exception as e:
+        return json.dumps({"error": str(e)})
+
+
+# ============================================================================
+# Demo Functions for UI
+# ============================================================================
+
+def demo_acoustic_analysis(audio_file):
+    """Acoustic Analysis - Analyze pitch, energy, rhythm, tempo"""
+    if not audio_file:
+        return create_acoustic_empty()
+
+    audio_b64 = file_to_base64(audio_file)
+    result_json = analyze_acoustics(audio_b64)
+
+    try:
+        result = json.loads(result_json)
+        if "error" in result:
+            return f'''<div style="color: #ef4444; padding: 20px; background: #fee; border-radius: 12px; border: 1px solid #fca5a5;">
+                <strong>Error in result:</strong><br>{result.get("error", "Unknown error")}
+            </div>'''
+        return create_acoustic_visualization(result)
+    except Exception as e:
+        return f'''<div style="color: #ef4444; padding: 20px; background: #fee; border-radius: 12px; border: 1px solid #fca5a5;">
+            <strong>Parsing Error:</strong> {str(e)}<br><br>
+            <strong>Raw Result (first 500 chars):</strong><br>
+            <code style="display: block; padding: 10px; background: white; border-radius: 4px; overflow-x: auto; font-size: 12px;">{result_json[:500]}</code>
+        </div>'''
+
+
+def demo_transcribe_audio(audio_file, language):
+    """Audio Transcription"""
+    if not audio_file:
+        return create_transcription_empty()
+
+    audio_b64 = file_to_base64(audio_file)
+    result_json = transcribe_audio(audio_b64, language)
+
+    try:
+        result = json.loads(result_json)
+        if "error" in result:
+            return create_transcription_empty()
+        text = result.get("text", "")
+        return create_transcription_visualization(text)
+    except:
+        return create_transcription_empty()
+
+
+def demo_clean_extraction(audio_file):
+    """Clean Audio Extraction - returns audio file only"""
+    if not audio_file:
+        return None
+
+    audio_b64 = file_to_base64(audio_file)
+    result_json = isolate_voice(audio_b64)
+
+    try:
+        result = json.loads(result_json)
+        if "error" in result:
+            return None
+
+        # Convert isolated audio base64 back to file
+        import tempfile
+        isolated_audio_bytes = base64.b64decode(result["isolated_audio_base64"])
+        with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as tmp:
+            tmp.write(isolated_audio_bytes)
+            isolated_audio_path = tmp.name
+
+        return isolated_audio_path
+    except:
+        return None
+
+
+def demo_extract_embedding(audio_file):
+    """Extract Embedding - extract voice fingerprint"""
+    if not audio_file:
+        return create_embedding_empty()
+
+    audio_b64 = file_to_base64(audio_file)
+    result_json = extract_embedding(audio_b64)
+
+    try:
+        result = json.loads(result_json)
+        if "error" in result:
+            return f'''<div style="color: #ef4444; padding: 20px; background: #fee; border-radius: 12px; border: 1px solid #fca5a5;">
+                <strong>Error in result:</strong><br>{result.get("error", "Unknown error")}
+            </div>'''
+        return create_embedding_visualization(result)
+    except Exception as e:
+        return f'''<div style="color: #ef4444; padding: 20px; background: #fee; border-radius: 12px; border: 1px solid #fca5a5;">
+            <strong>Parsing Error:</strong> {str(e)}<br><br>
+            <strong>Raw Result (first 500 chars):</strong><br>
+            <code style="display: block; padding: 10px; background: white; border-radius: 4px; overflow-x: auto; font-size: 12px;">{result_json[:500]}</code>
+        </div>'''
+
+
+def demo_match_voice(audio1, audio2):
+    """Compare Voices - compare two voice similarities"""
+    if not audio1 or not audio2:
+        return create_compare_empty()
+
+    audio1_b64 = file_to_base64(audio1)
+    audio2_b64 = file_to_base64(audio2)
+    result_json = match_voice(audio1_b64, audio2_b64)
+
+    try:
+        result = json.loads(result_json)
+        if "error" in result:
+            return create_compare_empty()
+        return create_compare_visualization(result)
+    except:
+        return create_compare_empty()
+
+
+def demo_voice_similarity(user_audio, ref_audio):
+    """Voice Similarity - comprehensive 5-metric analysis"""
+    if not user_audio or not ref_audio:
+        return create_similarity_empty()
+
+    user_b64 = file_to_base64(user_audio)
+    ref_b64 = file_to_base64(ref_audio)
+    result_json = grade_voice(user_b64, ref_b64, "", "meme")
+
+    try:
+        result = json.loads(result_json)
+        if "error" in result:
+            return create_similarity_empty()
+        return create_similarity_visualization(result)
+    except:
+        return create_similarity_empty()
+
+
+# ============================================================================
+# Visualization Functions
+# ============================================================================
+
+def create_acoustic_empty():
+    """Empty state for acoustic analysis"""
+    return """
+    <div style="
+        background: rgba(10, 10, 26, 0.4);
+        border: 1px solid rgba(124, 58, 237, 0.2);
+        border-radius: 16px;
+        padding: 30px 20px;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    ">
+        <div style="margin-bottom: 12px; opacity: 0.5;">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" style="margin: 0 auto; display: block;">
+                <path d="M22 10C22 10 20 4 17 4C14 4 12 16 9 16C6 16 4 10 2 10" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <g transform="translate(13, 11)">
+                    <circle cx="5" cy="5" r="4" stroke="#7c3aed" stroke-width="1.5"/>
+                    <path d="M8 8L11 11" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
+                </g>
+            </svg>
+        </div>
+        <div style="color: #a5b4fc; font-size: 12px; line-height: 1.5;">
+            Upload audio to analyze acoustic features
+        </div>
+    </div>
+    """
+
+
+def create_acoustic_visualization(result):
+    """Acoustic analysis visualization with radar chart"""
+    pitch = result.get("pitch", {})
+    energy = result.get("energy", {})
+    rhythm = result.get("rhythm", {})
+    tempo = result.get("tempo", 0)
+    spectral = result.get("spectral", {})
+
+    # Use pre-calculated scores from Modal backend (already 0-100)
+    pitch_norm = pitch.get("score", 0)
+    energy_norm = energy.get("score", 0)
+    rhythm_norm = rhythm.get("score", 0)
+    spectral_norm = spectral.get("score", 0)
+
+    # Tempo: normalize BPM to 0-100 (60-180 BPM range)
+    tempo_bpm = tempo
+    tempo_norm = min(100, max(0, (tempo_bpm - 60) / 120 * 100)) if tempo_bpm > 0 else 0
+
+    # Radar chart calculation
+    center_x, center_y = 150, 150
+    radius = 110
+
+    # 5 metrics in order: Pitch(top), Energy(top-right), Rhythm(bottom-right), Tempo(bottom-left), Spectral(top-left)
+    metrics = [
+        ("Pitch", pitch_norm, -90),      # 0° - 90° = -90° (top)
+        ("Energy", energy_norm, -18),    # 72° - 90° = -18° (top-right)
+        ("Rhythm", rhythm_norm, 54),     # 144° - 90° = 54° (bottom-right)
+        ("Tempo", tempo_norm, 126),      # 216° - 90° = 126° (bottom-left)
+        ("Spectral", spectral_norm, 198) # 288° - 90° = 198° (top-left)
+    ]
+
+    # Calculate polygon points for data
+    data_points = []
+    for _, value, angle_deg in metrics:
+        angle_rad = math.radians(angle_deg)
+        point_radius = (value / 100) * radius
+        x = center_x + point_radius * math.cos(angle_rad)
+        y = center_y + point_radius * math.sin(angle_rad)
+        data_points.append(f"{x:.2f},{y:.2f}")
+
+    # Background concentric pentagons (20, 40, 60, 80, 100)
+    def create_pentagon_points(scale):
+        points = []
+        for _, _, angle_deg in metrics:
+            angle_rad = math.radians(angle_deg)
+            r = radius * scale
+            x = center_x + r * math.cos(angle_rad)
+            y = center_y + r * math.sin(angle_rad)
+            points.append(f"{x:.2f},{y:.2f}")
+        return " ".join(points)
+
+    background_pentagons = ""
+    for scale in [0.2, 0.4, 0.6, 0.8, 1.0]:
+        background_pentagons += f'<polygon points="{create_pentagon_points(scale)}" fill="none" stroke="rgba(124, 58, 237, 0.15)" stroke-width="1"/>'
+
+    # Axis lines from center to vertices
+    axis_lines = ""
+    for _, _, angle_deg in metrics:
+        angle_rad = math.radians(angle_deg)
+        x = center_x + radius * math.cos(angle_rad)
+        y = center_y + radius * math.sin(angle_rad)
+        axis_lines += f'<line x1="{center_x}" y1="{center_y}" x2="{x:.2f}" y2="{y:.2f}" stroke="rgba(124, 58, 237, 0.3)" stroke-width="1"/>'
+
+    # Labels at vertices
+    labels = ""
+    for label, value, angle_deg in metrics:
+        angle_rad = math.radians(angle_deg)
+        # Position label outside the pentagon
+        label_radius = radius + 25
+        x = center_x + label_radius * math.cos(angle_rad)
+        y = center_y + label_radius * math.sin(angle_rad)
+        labels += f'''<text x="{x:.2f}" y="{y:.2f}" text-anchor="middle" dominant-baseline="middle" fill="#a5b4fc" font-size="11" font-weight="600">
+            {label}
+            <tspan x="{x:.2f}" dy="12" fill="#a855f7" font-size="13" font-weight="700">{int(value)}</tspan>
+        </text>'''
+
+    return f"""
+    <div style="
+        background: rgba(10, 10, 26, 0.6);
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 16px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    ">
+        <svg width="300" height="300" viewBox="0 0 300 300">
+            <!-- Background pentagons -->
+            {background_pentagons}
+
+            <!-- Axis lines -->
+            {axis_lines}
+
+            <!-- Data polygon -->
+            <polygon points="{' '.join(data_points)}"
+                fill="rgba(124, 58, 237, 0.3)"
+                stroke="#a855f7"
+                stroke-width="2"/>
+
+            <!-- Data points -->
+            {''.join([f'<circle cx="{pt.split(",")[0]}" cy="{pt.split(",")[1]}" r="4" fill="#a855f7"/>' for pt in data_points])}
+
+            <!-- Labels -->
+            {labels}
+        </svg>
+    </div>
+    """
+
+
+def create_mimicry_empty():
+    """Empty state for voice mimicry game"""
+    return """
+    <div style="
+        background: rgba(10, 10, 26, 0.4);
+        border: 1px solid rgba(124, 58, 237, 0.2);
+        border-radius: 16px;
+        padding: 30px 20px;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    ">
+        <div style="margin-bottom: 12px; opacity: 0.5;">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" style="margin: 0 auto; display: block;">
+                <defs>
+                    <linearGradient id="micGradEmpty" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" style="stop-color:#8b5cf6"/>
+                        <stop offset="100%" style="stop-color:#6366f1"/>
+                    </linearGradient>
+                </defs>
+                <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" fill="url(#micGradEmpty)"/>
+                <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" fill="url(#micGradEmpty)"/>
+            </svg>
+        </div>
+        <div style="color: #a5b4fc; font-size: 12px; line-height: 1.5;">
+            Upload reference and your voice to see similarity scores
+        </div>
+    </div>
+    """
+
+
+def create_mimicry_visualization(result):
+    """Voice mimicry score visualization with progress bars"""
+    pronunciation = result.get("pronunciation", 0)
+    tone = result.get("transcript", 0)  # Tone score
+    pitch = result.get("pitch", 0)
+    rhythm = result.get("rhythm", 0)
+    energy = result.get("energy", 0)
+
+    def create_progress_bar(label, value):
+        return f"""
+        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
+            <div style="flex: 1;">
+                <div style="font-size: 11px; color: #cbd5e1; margin-bottom: 4px;">{label}</div>
+                <div style="
+                    height: 6px;
+                    background: rgba(124, 58, 237, 0.2);
+                    border-radius: 3px;
+                    overflow: hidden;
+                ">
+                    <div style="
+                        height: 100%;
+                        width: {value}%;
+                        background: linear-gradient(90deg, #6366f1, #22d3ee);
+                        border-radius: 3px;
+                    "></div>
+                </div>
+            </div>
+            <div style="
+                font-size: 14px;
+                font-weight: 700;
+                color: #22d3ee;
+                min-width: 32px;
+                text-align: right;
+            ">{value}</div>
+        </div>
+        """
+
+    return f"""
+    <div style="
+        background: rgba(10, 10, 26, 0.6);
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 16px;
+        padding: 20px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    ">
+        <div style="
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 16px;
+            padding-bottom: 14px;
+            border-bottom: 1px solid rgba(124, 58, 237, 0.2);
+        ">
+            <div style="
+                width: 40px;
+                height: 40px;
+                border-radius: 10px;
+                background: linear-gradient(135deg, #7c3aed, #6366f1);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+            ">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" fill="rgba(255, 255, 255, 0.2)" stroke="white" stroke-width="1.5"/>
+                    <text x="12" y="16" text-anchor="middle" font-size="10" fill="white" font-weight="bold">AI</text>
+                </svg>
+            </div>
+            <div style="flex: 1; min-width: 0;">
+                <div style="font-size: 10px; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">CLAUDE</div>
+                <div style="font-size: 11px; color: #cbd5e1; line-height: 1.4;">
+                    Wow, that voice input, takes analytical skills of course but I'll handle it
+                </div>
+            </div>
+        </div>
+
+        <div style="flex: 1;">
+            {create_progress_bar("Pronunciation", pronunciation)}
+            {create_progress_bar("Tone", tone)}
+            {create_progress_bar("Pitch", pitch)}
+            {create_progress_bar("Rhythm", rhythm)}
+            {create_progress_bar("Energy", energy)}
+        </div>
+    </div>
+    """
+
+
+def create_transcription_empty():
+    """Empty state for transcription"""
+    return """
+    <div style="
+        background: rgba(10, 10, 26, 0.4);
+        border: 1px solid rgba(124, 58, 237, 0.2);
+        border-radius: 12px;
+        padding: 20px;
+        text-align: center;
+        color: #a5b4fc;
+        font-size: 13px;
+    ">
+        Upload audio to transcribe
+    </div>
+    """
+
+
+def create_transcription_visualization(text):
+    """Simple text display for transcription result"""
+    return f"""
+    <div style="
+        background: rgba(10, 10, 26, 0.6);
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 12px;
+        padding: 20px;
+        color: #e2e8f0;
+        font-size: 20px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    ">
+        {text if text else "Transcription completed"}
+    </div>
+    """
+
+
+def create_embedding_empty():
+    """Empty state for embedding extraction"""
+    return """
+    <div style="
+        background: rgba(10, 10, 26, 0.4);
+        border: 1px solid rgba(124, 58, 237, 0.2);
+        border-radius: 16px;
+        padding: 30px 20px;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    ">
+        <div style="margin-bottom: 12px; opacity: 0.5;">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" style="margin: 0 auto; display: block;">
+                <path d="M21 16V8L12 4L3 8V16L12 20L21 16Z" stroke="#A855F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M12 4V12M12 12V20M12 12L21 8M12 12L3 8" stroke="#A855F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="12" cy="12" r="2" fill="#A855F7"/>
+            </svg>
+        </div>
+        <div style="color: #a5b4fc; font-size: 12px; line-height: 1.5;">
+            Upload audio to extract voice embedding
+        </div>
+    </div>
+    """
+
+
+def create_embedding_visualization(result):
+    """Embedding extraction visualization"""
+    model = result.get("model", "Wav2Vec2")
+    dim = result.get("embedding_length", result.get("dim", 768))
+    preview = result.get("embedding_preview", [])
+
+    # Filter only numeric values to avoid format errors with strings like "..."
+    if preview:
+        numeric_preview = [v for v in preview if isinstance(v, (int, float))]
+        preview_str = ", ".join([f"{v:.4f}" for v in numeric_preview]) if numeric_preview else "..."
+    else:
+        preview_str = "..."
+
+    return f"""
+    <div style="
+        background: rgba(10, 10, 26, 0.6);
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 16px;
+        padding: 20px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    ">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; background: rgba(124, 58, 237, 0.1); border-radius: 8px;">
+            <div style="font-size: 16px; color: #cbd5e1; font-weight: 600;">Model</div>
+            <div style="font-size: 18px; font-weight: 700; color: #22d3ee;">{model}</div>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; background: rgba(124, 58, 237, 0.1); border-radius: 8px;">
+            <div style="font-size: 16px; color: #cbd5e1; font-weight: 600;">Dimensions</div>
+            <div style="font-size: 18px; font-weight: 700; color: #22d3ee;">{dim}</div>
+        </div>
+        <div style="padding: 10px; background: rgba(124, 58, 237, 0.1); border-radius: 8px;">
+            <div style="font-size: 16px; color: #cbd5e1; font-weight: 600; margin-bottom: 8px;">Preview</div>
+            <div style="font-size: 14px; font-family: monospace; color: #22d3ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                [{preview_str}]
+            </div>
+        </div>
+    </div>
+    """
+
+
+def create_compare_empty():
+    """Empty state for voice comparison"""
+    return """
+    <div style="
+        background: rgba(10, 10, 26, 0.4);
+        border: 1px solid rgba(124, 58, 237, 0.2);
+        border-radius: 16px;
+        padding: 30px 20px;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    ">
+        <div style="margin-bottom: 12px; opacity: 0.5;">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" style="margin: 0 auto; display: block;">
+                <path d="M2 10V14" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                <path d="M5 8V16" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                <path d="M8 11V13" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                <path d="M22 10V14" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                <path d="M19 7V17" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                <path d="M16 11V13" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                <path d="M10 12H14" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+        </div>
+        <div style="color: #a5b4fc; font-size: 12px; line-height: 1.5;">
+            Upload two audio files to compare voices
+        </div>
+    </div>
+    """
+
+
+def create_compare_visualization(result):
+    """Voice comparison visualization with similarity score"""
+    similarity = result.get("similarity", 0)
+    tone_score = result.get("tone_score", 0)
+
+    # Convert similarity to percentage
+    similarity_pct = int(similarity * 100)
+
+    # Color based on similarity - Purple theme matching VOICE SIMILARITY
+    if similarity_pct >= 80:
+        color = "#c084fc"  # Light purple (high score)
+    elif similarity_pct >= 60:
+        color = "#a855f7"  # Medium purple (medium score)
+    else:
+        color = "#7c3aed"  # Dark purple (low score)
+
+    return f"""
+    <div style="
+        background: rgba(10, 10, 26, 0.6);
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 16px;
+        padding: 20px;
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding-bottom: 40px;
+    ">
+        <div style="
+            width: 160px;
+            height: 160px;
+            border-radius: 50%;
+            background: conic-gradient({color} 0deg {similarity_pct * 3.6}deg, rgba(124, 58, 237, 0.2) {similarity_pct * 3.6}deg 360deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        ">
+            <div style="
+                width: 130px;
+                height: 130px;
+                border-radius: 50%;
+                background: rgba(10, 10, 26, 0.9);
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            ">
+                <span style="font-size: 40px; font-weight: 700; color: {color};">{similarity_pct}</span>
+                <span style="font-size: 11px; color: #a5b4fc; letter-spacing: 0.5px;">SIMILARITY</span>
+            </div>
+        </div>
+    </div>
+    """
+
+
+def create_similarity_empty():
+    """Empty state for voice similarity analysis"""
+    return """
+    <div style="
+        background: rgba(10, 10, 26, 0.4);
+        border: 1px solid rgba(124, 58, 237, 0.2);
+        border-radius: 16px;
+        padding: 30px 20px;
+        text-align: center;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    ">
+        <div style="margin-bottom: 12px; opacity: 0.5;">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" style="margin: 0 auto; display: block;">
+                <circle cx="12" cy="12" r="9" stroke="#A855F7" stroke-width="1" opacity="0.3"/>
+                <path d="M12 5L18 9L16.5 18H7.5L6 9L12 5Z" fill="#A855F7" fill-opacity="0.4" stroke="#A855F7" stroke-width="2" stroke-linejoin="round"/>
+                <circle cx="12" cy="5" r="1.5" fill="#A855F7"/>
+            </svg>
+        </div>
+        <div style="color: #a5b4fc; font-size: 12px; line-height: 1.5;">
+            Upload audio files for comprehensive similarity analysis
+        </div>
+    </div>
+    """
+
+
+def create_similarity_visualization(result):
+    """Voice similarity visualization with radar chart"""
+    overall = result.get("overall", 0)
+
+    pronunciation = result.get("pronunciation", 0)
+    transcript = result.get("transcript", 0)
+    pitch = result.get("pitch", 0)
+    rhythm = result.get("rhythm", 0)
+    energy = result.get("energy", 0)
+
+    # Color based on overall score - Purple theme
+    if overall >= 80:
+        color = "#c084fc"  # Light purple (high score)
+    elif overall >= 60:
+        color = "#a855f7"  # Medium purple (medium score)
+    else:
+        color = "#7c3aed"  # Dark purple (low score)
+
+    # Radar chart calculation
+    center_x, center_y = 150, 150
+    radius = 110
+
+    # 5 metrics in order: Pronunciation(top), Transcript(top-right), Pitch(bottom-right), Energy(bottom-left), Rhythm(top-left)
+    metrics = [
+        ("Pronunciation", pronunciation, -90),   # 0° - 90° = -90° (top)
+        ("Transcript", transcript, -18),         # 72° - 90° = -18° (top-right)
+        ("Pitch", pitch, 54),                    # 144° - 90° = 54° (bottom-right)
+        ("Energy", energy, 126),                 # 216° - 90° = 126° (bottom-left)
+        ("Rhythm", rhythm, 198)                  # 288° - 90° = 198° (top-left)
+    ]
+
+    # Calculate polygon points for data
+    data_points = []
+    for _, value, angle_deg in metrics:
+        angle_rad = math.radians(angle_deg)
+        point_radius = (value / 100) * radius
+        x = center_x + point_radius * math.cos(angle_rad)
+        y = center_y + point_radius * math.sin(angle_rad)
+        data_points.append(f"{x:.2f},{y:.2f}")
+
+    # Background concentric pentagons (20, 40, 60, 80, 100)
+    def create_pentagon_points(scale):
+        points = []
+        for _, _, angle_deg in metrics:
+            angle_rad = math.radians(angle_deg)
+            r = radius * scale
+            x = center_x + r * math.cos(angle_rad)
+            y = center_y + r * math.sin(angle_rad)
+            points.append(f"{x:.2f},{y:.2f}")
+        return " ".join(points)
+
+    background_pentagons = ""
+    for scale in [0.2, 0.4, 0.6, 0.8, 1.0]:
+        background_pentagons += f'<polygon points="{create_pentagon_points(scale)}" fill="none" stroke="rgba(124, 58, 237, 0.15)" stroke-width="1"/>'
+
+    # Axis lines from center to vertices
+    axis_lines = ""
+    for _, _, angle_deg in metrics:
+        angle_rad = math.radians(angle_deg)
+        x = center_x + radius * math.cos(angle_rad)
+        y = center_y + radius * math.sin(angle_rad)
+        axis_lines += f'<line x1="{center_x}" y1="{center_y}" x2="{x:.2f}" y2="{y:.2f}" stroke="rgba(124, 58, 237, 0.3)" stroke-width="1"/>'
+
+    # Labels at vertices
+    labels = ""
+    for label, value, angle_deg in metrics:
+        angle_rad = math.radians(angle_deg)
+        # Position label outside the pentagon
+        label_radius = radius + 25
+        x = center_x + label_radius * math.cos(angle_rad)
+        y = center_y + label_radius * math.sin(angle_rad)
+        labels += f'''<text x="{x:.2f}" y="{y:.2f}" text-anchor="middle" dominant-baseline="middle" fill="#a5b4fc" font-size="11" font-weight="600">
+            {label}
+            <tspan x="{x:.2f}" dy="12" fill="#a855f7" font-size="13" font-weight="700">{value}</tspan>
+        </text>'''
+
+    return f"""
+    <div style="
+        background: rgba(10, 10, 26, 0.6);
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 16px;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        gap: 30px;
+    ">
+        <!-- Left: Overall Score Donut -->
+        <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
+            <div style="
+                width: 160px;
+                height: 160px;
+                border-radius: 50%;
+                background: conic-gradient({color} 0deg {overall * 3.6}deg, rgba(124, 58, 237, 0.2) {overall * 3.6}deg 360deg);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            ">
+                <div style="
+                    width: 130px;
+                    height: 130px;
+                    border-radius: 50%;
+                    background: rgba(10, 10, 26, 0.9);
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                ">
+                    <span style="font-size: 40px; font-weight: 700; color: {color};">{overall}</span>
+                    <span style="font-size: 11px; color: #a5b4fc; letter-spacing: 0.5px;">OVERALL</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right: Radar Chart -->
+        <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
+            <svg width="300" height="300" viewBox="0 0 300 300">
+                <!-- Background pentagons -->
+                {background_pentagons}
+
+                <!-- Axis lines -->
+                {axis_lines}
+
+                <!-- Data polygon -->
+                <polygon points="{' '.join(data_points)}"
+                    fill="rgba(124, 58, 237, 0.3)"
+                    stroke="#a855f7"
+                    stroke-width="2"/>
+
+                <!-- Data points -->
+                {''.join([f'<circle cx="{pt.split(",")[0]}" cy="{pt.split(",")[1]}" r="4" fill="#a855f7"/>' for pt in data_points])}
+
+                <!-- Labels -->
+                {labels}
+            </svg>
+        </div>
+    </div>
+    """
+
+
+# Clean audio functions removed - using gr.Audio component directly
+
+
+
+
+# ============================================================================
+# Gradio Interface with Dark Theme
+# ============================================================================
+
+custom_css = """
+/* ===== FORCE DARK MODE FOR BOTH LIGHT AND DARK THEMES ===== */
+:root, html, body, .gradio-container, .main, .app, [data-testid="block-container"] {
+    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f23 100%) !important;
+    background-color: #0a0a1a !important;
+    color: #ffffff !important;
+}
+
+/* Force dark background on all containers */
+.gradio-container, .gradio-container *, .main, .main *, .app, .app * {
+    background-color: transparent !important;
+}
+
+/* Force dark text colors */
+.gradio-container label, .gradio-container p, .gradio-container span,
+.gradio-container div:not(.card):not(.terminal-window):not([class*="button"]) {
+    color: #ffffff !important;
+}
+
+/* ===== GLOBAL STYLES ===== */
+body {
+    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f23 100%) !important;
+    color: #ffffff !important;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+.gradio-container {
+    max-width: 100% !important;
+    width: 100% !important;
+    padding: 0px 16px 20px 16px !important;
+    background: transparent !important;
+    margin: 0 !important;
+}
+
+.gradio-container > .main,
+.gradio-container .main,
+.main {
+    max-width: 100% !important;
+    width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin: 0 auto !important;
+}
+
+.contain {
+    max-width: 100% !important;
+    padding: 0 !important;
+}
+
+/* Force full width on all Gradio internal containers */
+.gradio-container > div,
+.gradio-container > div > div,
+#component-0,
+.wrap,
+.app,
+.contain,
+footer,
+.gradio-row,
+.gradio-column,
+.svelte-1gfkn6j,
+[class*="svelte-"] {
+    max-width: 100% !important;
+}
+
+.gradio-row {
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* ===== HEADER (FLOATING, NO CARD) ===== */
+.header-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-icon {
+    font-size: 48px;
+    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.6));
+}
+
+.header-title {
+    font-size: 42px;
+    font-weight: 900;
+    color: #e0e7ff;
+    margin: 0;
+    letter-spacing: -0.5px;
+}
+
+.header-subtitle {
+    color: #c7d2fe;
+    font-size: 20px;
+    font-weight: 700;
+    margin-left: 6px;
+}
+
+/* ===== CARD STYLES ===== */
+.card {
+    background: rgba(15, 15, 35, 0.8);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    transition: all 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.card:hover {
+    border-color: rgba(124, 58, 237, 0.5);
+    box-shadow: 0 12px 48px rgba(124, 58, 237, 0.3);
+}
+
+/* Ensure columns in top row have equal height */
+.gradio-row:first-of-type .gradio-column {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.gradio-row:first-of-type .gradio-column > div {
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* Set minimum height for top row cards */
+.gradio-row:first-of-type .card {
+    min-height: 550px;
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #a5b4fc;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+}
+
+/* ===== ROW SPACING ===== */
+.gradio-row {
+    gap: 24px !important;
+}
+
+/* ===== QUICK START - CODE BLOCK (TERMINAL/IDE STYLE) ===== */
+.terminal-window {
+    background: #1a1b26;
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+}
+
+.terminal-header {
+    background: #16161e;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
+}
+
+.terminal-dots {
+    display: flex;
+    gap: 8px;
+}
+
+.terminal-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.terminal-dot.red {
+    background: #ff5f56 !important;
+    box-shadow: 0 0 8px rgba(255, 95, 86, 0.8) !important;
+}
+
+.terminal-dot.yellow {
+    background: #ffbd2e !important;
+    box-shadow: 0 0 8px rgba(255, 189, 46, 0.8) !important;
+}
+
+.terminal-dot.green {
+    background: #27c93f !important;
+    box-shadow: 0 0 8px rgba(39, 201, 63, 0.8) !important;
+}
+
+.terminal-title {
+    font-size: 12px;
+    color: #6b7280;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-weight: 500;
+}
+
+.terminal-body {
+    background: #1a1b26;
+    padding: 0;
+    display: flex;
+}
+
+.line-numbers {
+    background: #16161e;
+    padding: 16px 12px;
+    border-right: 1px solid rgba(124, 58, 237, 0.15);
+    user-select: none;
+    text-align: right;
+    min-width: 48px;
+}
+
+.line-num {
+    display: block;
+    color: #4a5568;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-size: 14px;
+    line-height: 1.8;
+}
+
+.code-content {
+    flex: 1;
+    padding: 16px 20px;
+    overflow-x: auto;
+}
+
+.code-line {
+    display: block;
+    white-space: pre;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-size: 14px;
+    line-height: 1.8;
+    color: #a9b1d6;
+}
+
+.json-key {
+    color: #7dcfff;
+    font-weight: 500;
+}
+
+.json-string {
+    color: #9ece6a;
+}
+
+.json-bracket {
+    color: #bb9af7;
+    font-weight: 600;
+}
+
+.json-colon {
+    color: #c0caf5;
+}
+
+.json-comma {
+    color: #c0caf5;
+}
+
+.copy-button {
+    width: 100%;
+    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 14px 24px !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+    color: white !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
+    transition: all 0.3s ease !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.copy-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.6) !important;
+}
+
+/* ===== TOOLS TABLE ===== */
+.tools-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: rgba(10, 10, 26, 0.6);
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    margin-bottom: 0;
+    flex: 1;
+}
+
+.tools-table th {
+    background: rgba(124, 58, 237, 0.2);
+    color: #a5b4fc;
+    font-weight: 700;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    padding: 20px 14px;
+    text-align: left;
+    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
+}
+
+.tools-table td {
+    padding: 20px 14px;
+    color: #cbd5e1;
+    font-size: 16px;
+    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
+}
+
+.tools-table tr:last-child td {
+    border-bottom: none;
+}
+
+.tools-table tr:hover {
+    background: rgba(124, 58, 237, 0.08);
+}
+
+.tool-name {
+    color: #22d3ee;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-weight: 600;
+    font-size: 13px;
+    vertical-align: middle;
+}
+
+/* ===== COMPOSITE SECTION ===== */
+.composite-section {
+    background: rgba(10, 10, 26, 0.8);
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    border-radius: 12px;
+    padding: 20px;
+}
+
+.composite-header {
+    font-size: 11px;
+    font-weight: 700;
+    color: #a5b4fc;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    margin-bottom: 12px;
+}
+
+.composite-content {
+    color: #cbd5e1;
+    font-size: 12px;
+    line-height: 1.6;
+    margin-bottom: 16px;
+}
+
+.try-demo-button {
+    width: 100%;
+    background: transparent !important;
+    border: 2px solid #7c3aed !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
+    font-weight: 700 !important;
+    font-size: 12px !important;
+    color: #7c3aed !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.3s ease !important;
+}
+
+.try-demo-button:hover {
+    background: rgba(124, 58, 237, 0.1) !important;
+    border-color: #7c3aed !important;
+    color: #8b5cf6 !important;
+}
+
+/* ===== BUTTONS ===== */
+button[variant="primary"] {
+    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 14px 32px !important;
+    font-weight: 700 !important;
+    font-size: 14px !important;
+    color: white !important;
+    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
+    transition: all 0.3s ease !important;
+}
+
+button[variant="primary"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.6) !important;
+}
+
+/* ===== AUDIO COMPONENT ===== */
+.gradio-audio {
+    background: rgba(30, 27, 75, 0.6) !important;
+    border: 1px solid rgba(124, 58, 237, 0.3) !important;
+    border-radius: 12px !important;
+}
+
+/* ===== TEXTBOX ===== */
+textarea {
+    background: rgba(30, 27, 75, 0.6) !important;
+    border: 1px solid rgba(124, 58, 237, 0.3) !important;
+    border-radius: 12px !important;
+    color: #e0e7ff !important;
+    font-size: 13px !important;
+}
+
+/* ===== DROPDOWN ===== */
+select {
+    background: rgba(30, 27, 75, 0.6) !important;
+    border: 1px solid rgba(124, 58, 237, 0.3) !important;
+    border-radius: 12px !important;
+    color: #e0e7ff !important;
+}
+
+/* ===== LABELS ===== */
+label {
+    color: #a5b4fc !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* ===== HTML OUTPUT ===== */
+.gradio-html {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* ===== DEMO ROW LAYOUT ===== */
+.demo-row {
+    display: flex !important;
+    gap: 24px !important;
+    align-items: stretch !important;
+}
+
+/* Only apply card style to the outer column (demo-card-column) */
+.demo-card-column {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 700px !important;
+    min-height: 700px !important;
+    max-height: 700px !important;
+    background: rgba(15, 15, 35, 0.8) !important;
+    backdrop-filter: blur(20px) !important;
+    border: 1px solid rgba(124, 58, 237, 0.3) !important;
+    border-radius: 20px !important;
+    padding: 4px 4px 2px 4px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+    transition: all 0.3s ease !important;
+    gap: 2px !important;
+    overflow-y: auto !important;
+}
+
+.demo-card-column:hover {
+    border-color: rgba(124, 58, 237, 0.5) !important;
+    box-shadow: 0 12px 48px rgba(124, 58, 237, 0.3) !important;
+}
+
+/* Remove any border/background from inner elements */
+.demo-card-column > div,
+.demo-card-column > div > div,
+.demo-row > div > div {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    border-radius: 0 !important;
+}
+
+/* Remove card background from inner HTML - we use column background instead */
+.demo-row .card {
+    background: transparent !important;
+    backdrop-filter: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+    margin-bottom: 12px !important;
+}
+
+.demo-row .card:hover {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Ensure all inner components have transparent background */
+.demo-row .gradio-audio,
+.demo-row .gradio-dropdown,
+.demo-row .gradio-textbox,
+.demo-row .gradio-button {
+    background: transparent !important;
+}
+
+/* Create a wrapper for input elements (flex container) */
+.demo-card-column > div:not(:last-child) {
+    flex: 0 0 auto !important;
+}
+
+/* Adjust spacing for input elements in demo cards */
+.demo-row .gradio-audio {
+    margin-top: 6px !important;
+    margin-bottom: 0px !important;
+    max-height: 50px !important;
+    min-height: 40px !important;
+    height: 45px !important;
+}
+
+/* Target all child elements of audio component */
+.demo-row .gradio-audio > div,
+.demo-row .gradio-audio .wrap,
+.demo-row .gradio-audio .upload-container,
+.demo-row .gradio-audio .record-container,
+.demo-row .gradio-audio * {
+    max-height: 50px !important;
+}
+
+/* Audio player specific height reduction */
+.demo-row .gradio-audio audio {
+    height: 26px !important;
+    max-height: 26px !important;
+    min-height: 26px !important;
+}
+
+/* Upload/record button container height */
+.demo-row .gradio-audio .upload-container,
+.demo-row .gradio-audio .record-container {
+    min-height: 38px !important;
+    max-height: 38px !important;
+    padding: 4px !important;
+}
+
+/* Audio component buttons */
+.demo-row .gradio-audio button {
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    padding: 4px 10px !important;
+    font-size: 10px !important;
+}
+
+/* Hide text nodes in audio upload area - keep icons */
+.demo-row .gradio-audio .upload-text {
+    display: none !important;
+}
+
+.demo-row .gradio-audio .placeholder {
+    display: none !important;
+}
+
+.demo-row .gradio-audio span:not(:has(svg)) {
+    font-size: 0 !important;
+}
+
+.demo-row .gradio-audio p {
+    display: none !important;
+}
+
+/* Hide "Drop Audio Here", "- or -", "Click to Upload" text */
+.demo-row .gradio-audio .upload-container span,
+.demo-row .gradio-audio .upload-container p {
+    font-size: 0 !important;
+    line-height: 0 !important;
+}
+
+/* Keep SVG icons visible */
+.demo-row .gradio-audio svg {
+    font-size: initial !important;
+}
+
+/* ADDITIONAL METHODS: Hide all text in audio upload area */
+.demo-row .gradio-audio label {
+    font-size: 0 !important;
+}
+
+.demo-row .gradio-audio label span:not(:has(svg)) {
+    display: none !important;
+}
+
+.demo-row .gradio-audio .file-preview {
+    font-size: 0 !important;
+}
+
+.demo-row .gradio-audio .file-preview span {
+    font-size: 0 !important;
+    display: none !important;
+}
+
+.demo-row .gradio-audio [data-testid="upload-text"],
+.demo-row .gradio-audio [data-testid="file-preview-text"],
+.demo-row .gradio-audio .upload-text,
+.demo-row .gradio-audio .file-preview-text {
+    display: none !important;
+    visibility: hidden !important;
+    font-size: 0 !important;
+}
+
+/* Target all text nodes (more aggressive) */
+.demo-row .gradio-audio *:not(svg):not(path):not(circle):not(rect):not(line) {
+    color: transparent !important;
+}
+
+.demo-row .gradio-audio button {
+    color: white !important;
+}
+
+/* Ensure icons remain visible */
+.demo-row .gradio-audio svg,
+.demo-row .gradio-audio svg * {
+    color: initial !important;
+    fill: currentColor !important;
+    stroke: currentColor !important;
+}
+
+/* NUCLEAR OPTION: Hide everything in label, then show only necessary elements */
+.demo-row .gradio-audio label > div > div {
+    display: none !important;
+}
+
+.demo-row .gradio-audio label::before {
+    content: '' !important;
+}
+
+.demo-row .gradio-audio label * {
+    visibility: hidden !important;
+}
+
+.demo-row .gradio-audio label svg {
+    visibility: visible !important;
+}
+
+.demo-row .gradio-audio label button {
+    visibility: visible !important;
+}
+
+.demo-row .gradio-audio label audio {
+    visibility: visible !important;
+}
+
+/* Force hide any text content */
+.demo-row .gradio-audio label > div::after,
+.demo-row .gradio-audio label > div::before {
+    content: '' !important;
+    display: none !important;
+}
+
+/* Additional override for upload text elements */
+.demo-row .gradio-audio [class*="upload"],
+.demo-row .gradio-audio [class*="placeholder"],
+.demo-row .gradio-audio [class*="text"] {
+    font-size: 0 !important;
+    line-height: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    position: absolute !important;
+    left: -9999px !important;
+}
+
+/* NUCLEAR OPTION 2: Complete removal of label content */
+.demo-row .gradio-audio label.block {
+    display: none !important;
+}
+
+.demo-row .gradio-audio .file-upload {
+    display: none !important;
+}
+
+/* Hide all direct text children */
+.demo-row .gradio-audio label > span:not(:has(button)):not(:has(audio)):not(:has(svg)) {
+    display: none !important;
+}
+
+/* Gradio 6.0 specific selectors - upload area */
+.demo-row .gradio-audio [data-testid="upload-button"],
+.demo-row .gradio-audio [data-testid="file-upload"],
+.demo-row .gradio-audio .upload-area {
+    display: none !important;
+}
+
+/* Hide all paragraph elements in audio component */
+.demo-row .gradio-audio label p,
+.demo-row .gradio-audio label span.text,
+.demo-row .gradio-audio label div.text {
+    display: none !important;
+}
+
+/* More aggressive text hiding - target by content */
+.demo-row .gradio-audio *::before,
+.demo-row .gradio-audio *::after {
+    content: '' !important;
+    display: none !important;
+}
+
+/* Make sure only buttons and audio players are visible */
+.demo-row .gradio-audio > label > div > div:not(:has(button)):not(:has(audio)) {
+    display: none !important;
+}
+
+/* Gradio Blocks specific - Hide wrapper divs that contain text */
+.demo-row .gradio-audio .wrap > div:not(:has(button)):not(:has(audio)):not(:has(svg)) {
+    display: none !important;
+}
+
+/* Override for Gradio 6.x structure */
+.demo-row .gradio-audio [class*="svelte-"] span:not(:has(svg)):not(:has(button)) {
+    display: none !important;
+}
+
+.demo-row .gradio-dropdown,
+.demo-row .gradio-textbox {
+    margin-bottom: 2px !important;
+}
+
+.demo-row .gradio-row {
+    margin-bottom: 2px !important;
+}
+
+/* IMPORTANT: Button alignment - push buttons to bottom with margin-top: auto */
+.demo-row .gradio-button {
+    margin-top: auto !important;
+    margin-bottom: 0px !important;
+    flex-shrink: 0 !important;
+}
+
+/* Output area should not push button down - set flex: 1 */
+.demo-row .gradio-html {
+    flex: 1 !important;
+    margin-bottom: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    max-height: 200px !important;
+    overflow-y: auto !important;
+}
+
+/* Output audio component (clean_audio_output) height limit */
+.demo-row .gradio-audio[data-testid="audio-output"],
+.demo-row > div:last-child .gradio-audio {
+    max-height: 120px !important;
+    min-height: 60px !important;
+    height: auto !important;
+    margin-bottom: 0px !important;
+}
+
+
+/* ===== CUSTOM ACTION BUTTONS (DEMO CARDS) ===== */
+.custom-action-btn,
+.custom-action-btn button,
+.custom-action-btn button[data-testid="button"],
+button.custom-action-btn,
+.demo-row .custom-action-btn,
+.demo-row .custom-action-btn button {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 8px 16px !important;
+    height: 38px !important;
+    min-height: 38px !important;
+    max-height: 38px !important;
+    font-weight: 700 !important;
+    font-size: 16px !important;
+    letter-spacing: 1.5px !important;
+    text-transform: uppercase !important;
+    color: white !important;
+    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
+    transition: all 0.3s ease !important;
+}
+
+.custom-action-btn:hover,
+.custom-action-btn button:hover,
+.custom-action-btn button[data-testid="button"]:hover,
+button.custom-action-btn:hover,
+.demo-row .custom-action-btn:hover,
+.demo-row .custom-action-btn button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.6) !important;
+    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
+}
+
+/* ===== DECORATIVE ELEMENTS ===== */
+.diamond-decoration {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    width: 80px;
+    height: 80px;
+    border: 2px solid rgba(124, 58, 237, 0.2);
+    transform: rotate(45deg);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.star-decoration {
+    display: none;
+}
+"""
+
+with gr.Blocks() as demo:
+    # Inject custom CSS and decorative elements (positioned fixed, no DOM space)
+    gr.HTML(f"""
+    <style>{custom_css}</style>
+    <div class="diamond-decoration"></div>
+    <div class="star-decoration">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#a5b4fc" opacity="0.4"/>
+        </svg>
+    </div>
+    <script>
+    // JavaScript to completely remove upload text from Audio components in demo-row
+    function removeAudioUploadText() {{
+        // Find all audio components in demo-row
+        const demoRows = document.querySelectorAll('.demo-row');
+        demoRows.forEach(row => {{
+            const audioComponents = row.querySelectorAll('.gradio-audio');
+            audioComponents.forEach(audio => {{
+                // METHOD 1: Remove ALL text nodes (most aggressive)
+                const walker = document.createTreeWalker(
+                    audio,
+                    NodeFilter.SHOW_TEXT,
+                    null,
+                    false
+                );
+
+                const textNodesToRemove = [];
+                while(walker.nextNode()) {{
+                    const node = walker.currentNode;
+                    // Only keep text that's inside button or audio elements
+                    const parentTag = node.parentElement?.tagName?.toLowerCase();
+                    if (parentTag !== 'button' && parentTag !== 'audio') {{
+                        textNodesToRemove.push(node);
+                    }}
+                }}
+
+                textNodesToRemove.forEach(node => {{
+                    if (node.parentNode) {{
+                        node.parentNode.removeChild(node);
+                    }}
+                }});
+
+                // METHOD 2: Hide elements by class/data attributes
+                const elementsToHide = audio.querySelectorAll(
+                    '[class*="upload"], [class*="placeholder"], [class*="text"], ' +
+                    '[data-testid*="upload"], [data-testid*="file"], ' +
+                    'label.block, .file-upload, p, span:not(:has(button)):not(:has(svg))'
+                );
+                elementsToHide.forEach(el => {{
+                    el.style.display = 'none';
+                    el.style.visibility = 'hidden';
+                    el.style.fontSize = '0';
+                    el.style.lineHeight = '0';
+                    el.style.width = '0';
+                    el.style.height = '0';
+                    el.style.opacity = '0';
+                    el.style.position = 'absolute';
+                    el.style.left = '-9999px';
+                }});
+
+                // METHOD 3: Remove label.block entirely if it exists
+                const labelBlocks = audio.querySelectorAll('label.block');
+                labelBlocks.forEach(label => {{
+                    // Only remove if it doesn't contain button or audio
+                    if (!label.querySelector('button') && !label.querySelector('audio')) {{
+                        label.remove();
+                    }}
+                }});
+
+                // METHOD 4: Clear innerHTML of divs that don't contain buttons/audio
+                const allDivs = audio.querySelectorAll('div');
+                allDivs.forEach(div => {{
+                    if (!div.querySelector('button') && !div.querySelector('audio') && !div.querySelector('svg')) {{
+                        // Check if div only contains text
+                        const hasOnlyText = Array.from(div.childNodes).every(node =>
+                            node.nodeType === Node.TEXT_NODE ||
+                            (node.nodeType === Node.ELEMENT_NODE && !node.querySelector('button, audio, svg'))
+                        );
+                        if (hasOnlyText) {{
+                            div.innerHTML = '';
+                        }}
+                    }}
+                }});
+            }});
+        }});
+    }}
+
+    // Run immediately
+    removeAudioUploadText();
+
+    // Run after DOM changes (MutationObserver)
+    const observer = new MutationObserver(() => {{
+        removeAudioUploadText();
+    }});
+
+    // Start observing after a short delay to ensure Gradio has loaded
+    setTimeout(() => {{
+        observer.observe(document.body, {{
+            childList: true,
+            subtree: true
+        }});
+    }}, 500);
+
+    // Also run on window load
+    window.addEventListener('load', removeAudioUploadText);
+
+    // Run periodically for the first 5 seconds (catch late renders)
+    let attempts = 0;
+    const interval = setInterval(() => {{
+        removeAudioUploadText();
+        attempts++;
+        if (attempts > 10) {{
+            clearInterval(interval);
+        }}
+    }}, 500);
+    </script>
+    """)
+
+    # ==================== HEADER (FLOATING) ====================
+    gr.HTML("""
+    <div class="header-main">
+        <div class="header-left">
+            <span class="header-icon">
+                <svg width="72" height="72" viewBox="0 0 52 52" fill="none">
+                    <defs>
+                        <linearGradient id="logoGradHeader" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" style="stop-color:#7c3aed"/>
+                            <stop offset="100%" style="stop-color:#6366f1"/>
+                        </linearGradient>
+                    </defs>
+                    <!-- Left: Microphone (rounded capsule + stand) -->
+                    <!-- Microphone capsule (rounded rect) -->
+                    <rect x="8" y="12" width="9" height="14" rx="4.5" fill="url(#logoGradHeader)"/>
+                    <!-- Microphone grill lines (horizontal detail) -->
+                    <line x1="9" y1="16" x2="14" y2="16" stroke="#000000" stroke-width="0.8" stroke-linecap="round"/>
+                    <line x1="9" y1="19.5" x2="14" y2="19.5" stroke="#000000" stroke-width="0.8" stroke-linecap="round"/>
+                    <line x1="9" y1="23" x2="14" y2="23" stroke="#000000" stroke-width="0.8" stroke-linecap="round"/>
+                    <!-- Arc stand -->
+                    <path d="M6.5 26c0 2.5 2.2 5 6 5s6-2.5 6-5" stroke="url(#logoGradHeader)" stroke-width="2" fill="none" stroke-linecap="round"/>
+                    <!-- Pole -->
+                    <rect x="11.5" y="31" width="2" height="5" fill="url(#logoGradHeader)"/>
+                    <!-- Base -->
+                    <rect x="7.5" y="36" width="9" height="2" rx="1" fill="url(#logoGradHeader)"/>
+
+                    <!-- Right: Audio Wave Bars (4 vertical bars with different heights) -->
+                    <rect x="28" y="18" width="3" height="16" rx="1.5" fill="url(#logoGradHeader)" opacity="0.9"/>
+                    <rect x="34" y="14" width="3" height="24" rx="1.5" fill="url(#logoGradHeader)" opacity="0.95"/>
+                    <rect x="40" y="20" width="3" height="12" rx="1.5" fill="url(#logoGradHeader)" opacity="0.85"/>
+                    <rect x="46" y="22" width="3" height="8" rx="1.5" fill="url(#logoGradHeader)" opacity="0.8"/>
+                </svg>
+            </span>
+            <div>
+                <span class="header-title">VoiceKit</span>
+                <span class="header-subtitle">MCP Server</span>
+            </div>
+        </div>
+    </div>
+    """)
+
+    # ==================== TOP ROW: QUICK START + AVAILABLE TOOLS ====================
+    with gr.Row(equal_height=True):
+        # QUICK START CARD
+        with gr.Column(scale=1):
+            gr.HTML("""
+            <div class="card" style="min-height: 550px;">
+                <div class="card-title">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#7c3aed" style="margin-right: 8px;">
+                        <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
+                    </svg>
+                    QUICK START
+                </div>
+
+                <div class="terminal-window">
+                    <!-- Terminal Header with Dots and Filename -->
+                    <div class="terminal-header">
+                        <div class="terminal-dots">
+                            <div class="terminal-dot red"></div>
+                            <div class="terminal-dot yellow"></div>
+                            <div class="terminal-dot green"></div>
+                        </div>
+                        <div class="terminal-title">claude_desktop_config.json</div>
+                        <div style="width: 60px;"></div> <!-- Spacer for center alignment -->
+                    </div>
+
+                    <!-- Terminal Body with Line Numbers and Code -->
+                    <div class="terminal-body">
+                        <div class="line-numbers">
+                            <div class="line-num">1</div>
+                            <div class="line-num">2</div>
+                            <div class="line-num">3</div>
+                            <div class="line-num">4</div>
+                            <div class="line-num">5</div>
+                            <div class="line-num">6</div>
+                            <div class="line-num">7</div>
+                            <div class="line-num">8</div>
+                            <div class="line-num">9</div>
+                            <div class="line-num">10</div>
+                            <div class="line-num">11</div>
+                            <div class="line-num">12</div>
+                        </div>
+                        <div class="code-content">
+                            <div class="code-line"><span class="json-bracket">{</span></div>
+                            <div class="code-line">  <span class="json-key">"mcpServers"</span><span class="json-colon">:</span> <span class="json-bracket">{</span></div>
+                            <div class="code-line">    <span class="json-key">"voicekit"</span><span class="json-colon">:</span> <span class="json-bracket">{</span></div>
+                            <div class="code-line">      <span class="json-key">"command"</span><span class="json-colon">:</span> <span class="json-string">"npx"</span><span class="json-comma">,</span></div>
+                            <div class="code-line">      <span class="json-key">"args"</span><span class="json-colon">:</span> <span class="json-bracket">[</span></div>
+                            <div class="code-line">        <span class="json-string">"-y"</span><span class="json-comma">,</span></div>
+                            <div class="code-line">        <span class="json-string">"mcp-remote"</span><span class="json-comma">,</span></div>
+                            <div class="code-line">        <span class="json-string">"https://mcp-1st-birthday-voicekit-test.hf.space/gradio_api/mcp/sse"</span></div>
+                            <div class="code-line">      <span class="json-bracket">]</span></div>
+                            <div class="code-line">    <span class="json-bracket">}</span></div>
+                            <div class="code-line">  <span class="json-bracket">}</span></div>
+                            <div class="code-line"><span class="json-bracket">}</span></div>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="copy-button" onclick="navigator.clipboard.writeText(JSON.stringify({mcpServers:{voicekit:{command:'npx',args:['-y','mcp-remote','https://mcp-1st-birthday-voicekit-test.hf.space/gradio_api/mcp/sse']}}},null,2))">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="white" style="display: inline-block; vertical-align: middle;">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" fill="white"/>
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" fill="none" stroke="white" stroke-width="2"/>
+                    </svg>
+                    COPY CONFIG
+                </button>
+            </div>
+            """)
+
+        # AVAILABLE TOOLS CARD
+        with gr.Column(scale=1):
+            gr.HTML("""
+            <div class="card" style="min-height: 550px;">
+                <div class="card-title">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#7c3aed" style="margin-right: 8px;">
+                        <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
+                    </svg>
+                    AVAILABLE TOOLS
+                </div>
+                <table class="tools-table">
+                    <thead>
+                        <tr>
+                            <th>TOOL</th>
+                            <th>PURPOSE</th>
+                            <th>INPUT</th>
+                            <th>OUTPUT</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 12px;">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                                        <path d="M21 16V8L12 4L3 8V16L12 20L21 16Z" stroke="#A855F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <path d="M12 4V12M12 12V20M12 12L21 8M12 12L3 8" stroke="#A855F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <circle cx="12" cy="12" r="2" fill="#A855F7"/>
+                                        <circle cx="16.5" cy="10" r="1.5" fill="#A855F7"/>
+                                        <circle cx="7.5" cy="14" r="1.5" fill="#A855F7"/>
+                                        <path d="M12 12L16.5 10M12 12L7.5 14" stroke="#A855F7" stroke-width="1.5" stroke-linecap="round"/>
+                                    </svg>
+                                    <span class="tool-name">extract_embedding</span>
+                                </div>
+                            </td>
+                            <td>Extract 768-dim voice fingerprint</td>
+                            <td>audio_base64</td>
+                            <td>embedding, model, dim</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 12px;">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                                        <path d="M2 10V14" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M5 8V16" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M8 11V13" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M22 10V14" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M19 7V17" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M16 11V13" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M10 12H14" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M10 12L11.5 10.5" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M10 12L11.5 13.5" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M14 12L12.5 10.5" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M14 12L12.5 13.5" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                    </svg>
+                                    <span class="tool-name">match_voice</span>
+                                </div>
+                            </td>
+                            <td>Compare two voice similarities</td>
+                            <td>audio1_base64, audio2_base64</td>
+                            <td>similarity, tone_score</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 12px;">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                                        <path d="M22 10C22 10 20 4 17 4C14 4 12 16 9 16C6 16 4 10 2 10" stroke="#A855F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <g transform="translate(13, 11)">
+                                            <circle cx="5" cy="5" r="4" stroke="#A855F7" stroke-width="1.5"/>
+                                            <path d="M8 8L11 11" stroke="#A855F7" stroke-width="1.5" stroke-linecap="round"/>
+                                        </g>
+                                    </svg>
+                                    <span class="tool-name">analyze_acoustics</span>
+                                </div>
+                            </td>
+                            <td>Analyze pitch, energy, rhythm, tempo</td>
+                            <td>audio_base64</td>
+                            <td>pitch, energy, rhythm, tempo</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 12px;">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                                        <path d="M2 12C2 12 4 5 7 5C10 5 11 19 14 19C15.5 19 16.5 15 16.5 15" stroke="#A855F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <path d="M19 7H22" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M19 12H22" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                        <path d="M19 17H22" stroke="#A855F7" stroke-width="2" stroke-linecap="round"/>
+                                    </svg>
+                                    <span class="tool-name">transcribe_audio</span>
+                                </div>
+                            </td>
+                            <td>Convert speech to text</td>
+                            <td>audio_base64, language</td>
+                            <td>text, language, model</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 12px;">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                                        <path d="M12 5V19" stroke="#A855F7" stroke-width="2.5" stroke-linecap="round"/>
+                                        <path d="M9 8V16" stroke="#A855F7" stroke-width="2.5" stroke-linecap="round"/>
+                                        <path d="M15 8V16" stroke="#A855F7" stroke-width="2.5" stroke-linecap="round"/>
+                                        <path d="M5 4H3V20H5" stroke="#A855F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <path d="M19 4H21V20H19" stroke="#A855F7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg>
+                                    <span class="tool-name">isolate_voice</span>
+                                </div>
+                            </td>
+                            <td>Remove background music/noise</td>
+                            <td>audio_base64</td>
+                            <td>isolated_audio_base64, metadata</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items: center; gap: 12px;">
+                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                                        <circle cx="12" cy="12" r="9" stroke="#A855F7" stroke-width="1" opacity="0.3"/>
+                                        <path d="M12 3V21" stroke="#A855F7" stroke-width="1" opacity="0.3"/>
+                                        <path d="M4.2 7.5L19.8 16.5" stroke="#A855F7" stroke-width="1" opacity="0.3"/>
+                                        <path d="M19.8 7.5L4.2 16.5" stroke="#A855F7" stroke-width="1" opacity="0.3"/>
+                                        <path d="M12 5L18 9L16.5 18H7.5L6 9L12 5Z" fill="#A855F7" fill-opacity="0.4" stroke="#A855F7" stroke-width="2" stroke-linejoin="round"/>
+                                        <circle cx="12" cy="5" r="1.5" fill="#A855F7"/>
+                                        <circle cx="18" cy="9" r="1.5" fill="#A855F7"/>
+                                        <circle cx="16.5" cy="18" r="1.5" fill="#A855F7"/>
+                                        <circle cx="7.5" cy="18" r="1.5" fill="#A855F7"/>
+                                        <circle cx="6" cy="9" r="1.5" fill="#A855F7"/>
+                                    </svg>
+                                    <span class="tool-name">grade_voice</span>
+                                </div>
+                            </td>
+                            <td>5-metric comprehensive analysis</td>
+                            <td>user_audio, reference_audio, text, category</td>
+                            <td>overall, metrics, feedback</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            """)
+
+    # ==================== FIRST ROW: 3 DEMO CARDS ====================
+    with gr.Row(equal_height=True, elem_classes="demo-row"):
+        # EXTRACT EMBEDDING
+        with gr.Column(scale=1, elem_classes="demo-card-column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 18px; padding-top: 10px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                    <path d="M21 16V8L12 4L3 8V16L12 20L21 16Z" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M12 4V12M12 12V20M12 12L21 8M12 12L3 8" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <circle cx="12" cy="12" r="2" fill="#7c3aed"/>
+                    <circle cx="16.5" cy="10" r="1.5" fill="#7c3aed"/>
+                    <circle cx="7.5" cy="14" r="1.5" fill="#7c3aed"/>
+                    <path d="M12 12L16.5 10M12 12L7.5 14" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+                <div style="font-size: 16px; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">
+                    EXTRACT EMBEDDING
+                </div>
+            </div>
+            """)
+            embedding_audio = gr.Audio(
+                type="filepath",
+                label="Audio Input",
+                show_label=False,
+                format="wav"
+            )
+            embedding_btn = gr.Button("EXTRACT", variant="primary", size="lg", elem_classes="custom-action-btn")
+            embedding_output = gr.HTML(value=create_embedding_empty())
+
+            embedding_btn.click(
+                demo_extract_embedding,
+                inputs=[embedding_audio],
+                outputs=[embedding_output],
+                api_visibility="private"
+            )
+
+        # COMPARE VOICES
+        with gr.Column(scale=1, elem_classes="demo-card-column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 18px; padding-top: 10px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                    <path d="M2 10V14" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M5 8V16" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M8 11V13" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M22 10V14" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M19 7V17" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M16 11V13" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M10 12H14" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M10 12L11.5 10.5" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M10 12L11.5 13.5" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M14 12L12.5 10.5" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M14 12L12.5 13.5" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <div style="font-size: 16px; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">
+                    COMPARE VOICES
+                </div>
+            </div>
+            """)
+            with gr.Row():
+                compare_audio1 = gr.Audio(
+                    type="filepath",
+                    label="Audio 1",
+                    show_label=False,
+                    format="wav"
+                )
+                compare_audio2 = gr.Audio(
+                    type="filepath",
+                    label="Audio 2",
+                    show_label=False,
+                    format="wav"
+                )
+            compare_btn = gr.Button("COMPARE", variant="primary", size="lg", elem_classes="custom-action-btn")
+            compare_output = gr.HTML(value=create_compare_empty())
+
+            compare_btn.click(
+                demo_match_voice,
+                inputs=[compare_audio1, compare_audio2],
+                outputs=[compare_output],
+                api_visibility="private"
+            )
+
+        # ACOUSTIC ANALYSIS
+        with gr.Column(scale=1, elem_classes="demo-card-column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 18px; padding-top: 10px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                    <path d="M22 10C22 10 20 4 17 4C14 4 12 16 9 16C6 16 4 10 2 10" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <g transform="translate(13, 11)">
+                        <circle cx="5" cy="5" r="4" stroke="#7c3aed" stroke-width="1.5"/>
+                        <path d="M8 8L11 11" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
+                    </g>
+                </svg>
+                <div style="font-size: 16px; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">
+                    ACOUSTIC ANALYSIS
+                </div>
+            </div>
+            """)
+            acoustic_audio = gr.Audio(
+                type="filepath",
+                label="Audio Input",
+                show_label=False,
+                format="wav"
+            )
+            acoustic_btn = gr.Button("ANALYZE", variant="primary", size="lg", elem_classes="custom-action-btn")
+            acoustic_output = gr.HTML(value=create_acoustic_empty())
+
+            acoustic_btn.click(
+                demo_acoustic_analysis,
+                inputs=[acoustic_audio],
+                outputs=[acoustic_output],
+                api_visibility="private"
+            )
+
+    # ==================== SECOND ROW: 3 MORE DEMO CARDS ====================
+    with gr.Row(equal_height=True, elem_classes="demo-row"):
+        # AUDIO TRANSCRIPTION
+        with gr.Column(scale=1, elem_classes="demo-card-column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 18px; padding-top: 10px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                    <path d="M2 12C2 12 4 5 7 5C10 5 11 19 14 19C15.5 19 16.5 15 16.5 15" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M19 7H22" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M19 12H22" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                    <path d="M19 17H22" stroke="#7c3aed" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <div style="font-size: 16px; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">
+                    AUDIO TRANSCRIPTION
+                </div>
+            </div>
+            """)
+            transcribe_audio_input = gr.Audio(
+                type="filepath",
+                label="Audio Input",
+                show_label=False,
+                format="wav"
+            )
+            transcribe_btn = gr.Button("TRANSCRIBE", variant="primary", size="lg", elem_classes="custom-action-btn")
+            transcribe_output = gr.HTML(value=create_transcription_empty())
+
+            transcribe_btn.click(
+                lambda audio: demo_transcribe_audio(audio, "en"),
+                inputs=[transcribe_audio_input],
+                outputs=[transcribe_output],
+                api_visibility="private"
+            )
+
+        # CLEAN AUDIO EXTRACTION
+        with gr.Column(scale=1, elem_classes="demo-card-column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 18px; padding-top: 10px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                    <path d="M12 5V19" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round"/>
+                    <path d="M9 8V16" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round"/>
+                    <path d="M15 8V16" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round"/>
+                    <path d="M5 4H3V20H5" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M19 4H21V20H19" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <div style="font-size: 16px; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">
+                    CLEAN AUDIO EXTRACTION
+                </div>
+            </div>
+            """)
+            clean_audio_input = gr.Audio(
+                type="filepath",
+                label="Audio with Background",
+                show_label=False,
+                format="wav"
+            )
+            clean_btn = gr.Button("EXTRACT VOICE", variant="primary", size="lg", elem_classes="custom-action-btn")
+            clean_audio_output = gr.Audio(label="Clean Audio", type="filepath", visible=True)
+
+            clean_btn.click(
+                demo_clean_extraction,
+                inputs=[clean_audio_input],
+                outputs=[clean_audio_output],
+                api_visibility="private"
+            )
+
+        # VOICE SIMILARITY
+        with gr.Column(scale=1, elem_classes="demo-card-column"):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 18px; padding-top: 10px;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="flex-shrink: 0;">
+                    <circle cx="12" cy="12" r="9" stroke="#7c3aed" stroke-width="1" opacity="0.3"/>
+                    <path d="M12 3V21" stroke="#7c3aed" stroke-width="1" opacity="0.3"/>
+                    <path d="M4.2 7.5L19.8 16.5" stroke="#7c3aed" stroke-width="1" opacity="0.3"/>
+                    <path d="M19.8 7.5L4.2 16.5" stroke="#7c3aed" stroke-width="1" opacity="0.3"/>
+                    <path d="M12 5L18 9L16.5 18H7.5L6 9L12 5Z" fill="#7c3aed" fill-opacity="0.4" stroke="#7c3aed" stroke-width="2" stroke-linejoin="round"/>
+                    <circle cx="12" cy="5" r="1.5" fill="#7c3aed"/>
+                    <circle cx="18" cy="9" r="1.5" fill="#7c3aed"/>
+                    <circle cx="16.5" cy="18" r="1.5" fill="#7c3aed"/>
+                    <circle cx="7.5" cy="18" r="1.5" fill="#7c3aed"/>
+                    <circle cx="6" cy="9" r="1.5" fill="#7c3aed"/>
+                </svg>
+                <div style="font-size: 16px; font-weight: 700; color: #a5b4fc; text-transform: uppercase; letter-spacing: 1px;">
+                    VOICE SIMILARITY
+                </div>
+            </div>
+            """)
+            with gr.Row():
+                similarity_user_audio = gr.Audio(
+                    type="filepath",
+                    label="User Audio",
+                    show_label=False,
+                    format="wav"
+                )
+                similarity_ref_audio = gr.Audio(
+                    type="filepath",
+                    label="Reference Audio",
+                    show_label=False,
+                    format="wav"
+                )
+            similarity_btn = gr.Button("ANALYZE", variant="primary", size="lg", elem_classes="custom-action-btn")
+            similarity_output = gr.HTML(value=create_similarity_empty())
+
+            similarity_btn.click(
+                demo_voice_similarity,
+                inputs=[similarity_user_audio, similarity_ref_audio],
+                outputs=[similarity_output],
+                api_visibility="private"
+            )
+
+
+    # ==================== MCP TOOL INTERFACES (HIDDEN, API ONLY) ====================
+    with gr.Row(visible=False):
+        # extract_embedding
+        mcp_emb_input = gr.Textbox()
+        mcp_emb_output = gr.Textbox()
+        mcp_emb_btn = gr.Button()
+        mcp_emb_btn.click(extract_embedding, inputs=[mcp_emb_input], outputs=[mcp_emb_output])
+
+        # match_voice
+        mcp_cmp_input1 = gr.Textbox()
+        mcp_cmp_input2 = gr.Textbox()
+        mcp_cmp_output = gr.Textbox()
+        mcp_cmp_btn = gr.Button()
+        mcp_cmp_btn.click(match_voice, inputs=[mcp_cmp_input1, mcp_cmp_input2], outputs=[mcp_cmp_output])
+
+        # analyze_acoustics
+        mcp_ac_input = gr.Textbox()
+        mcp_ac_output = gr.Textbox()
+        mcp_ac_btn = gr.Button()
+        mcp_ac_btn.click(analyze_acoustics, inputs=[mcp_ac_input], outputs=[mcp_ac_output])
+
+        # transcribe_audio
+        mcp_tr_input = gr.Textbox()
+        mcp_tr_lang = gr.Textbox(value="en")
+        mcp_tr_output = gr.Textbox()
+        mcp_tr_btn = gr.Button()
+        mcp_tr_btn.click(transcribe_audio, inputs=[mcp_tr_input, mcp_tr_lang], outputs=[mcp_tr_output])
+
+        # isolate_voice
+        mcp_iso_input = gr.Textbox()
+        mcp_iso_output = gr.Textbox()
+        mcp_iso_btn = gr.Button()
+        mcp_iso_btn.click(isolate_voice, inputs=[mcp_iso_input], outputs=[mcp_iso_output])
+
+        # grade_voice
+        mcp_sim_user = gr.Textbox()
+        mcp_sim_ref = gr.Textbox()
+        mcp_sim_text = gr.Textbox()
+        mcp_sim_cat = gr.Textbox(value="meme")
+        mcp_sim_output = gr.Textbox()
+        mcp_sim_btn = gr.Button()
+        mcp_sim_btn.click(grade_voice, inputs=[mcp_sim_user, mcp_sim_ref, mcp_sim_text, mcp_sim_cat], outputs=[mcp_sim_output])
+
+
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        mcp_server=True
+    )

requirements.txt

@@ -0,0 +1,3 @@
+gradio[mcp]>=6.0.0
+modal>=0.63.0
+requests>=2.31.0