Spaces:
Running
Running
| # --------------------------------------------------------------- | |
| # app.py – "TTS Showcase" (Gradio Implementation) | |
| # --------------------------------------------------------------- | |
| import os | |
| import gradio as gr | |
| # ---------- 1. Demo metadata ---------- | |
| MODELS = { | |
| "nari-labs/Dia-1.6B": "Dia-1.6B", | |
| "hexgrad/Kokoro-82M": "Kokoro-82M", | |
| "sesame/csm-1b": "csm-1b", | |
| "SparkAudio/Spark-TTS-0.5B": "Spark-TTS-0.5B", | |
| "canopylabs/orpheus-3b-0.1-ft": "Orpheus-3b-0.1-ft", | |
| "SWivid/F5-TTS": "F5-TTS", | |
| "Zyphra/Zonos-v0.1-transformer": "Zonos-v0.1-transformer", | |
| "coqui/XTTS-v2": "XTTS-v2", | |
| "HKUSTAudio/Llasa-3B": "Llasa-3B", | |
| "amphion/MaskGCT": "MaskGCT", | |
| "OuteAI/Llama-OuteTTS-1.0-1B": "Llama-OuteTTS-1.0-1B", | |
| "ByteDance/MegaTTS3": "MegaTTS3" | |
| } | |
| # Performance ratings for each model | |
| MODEL_RATINGS = { | |
| "nari-labs/Dia-1.6B": {"naturalness": "Good", "intelligibility": "Moderate", "controllability": "Good"}, | |
| "hexgrad/Kokoro-82M": {"naturalness": "Good", "intelligibility": "Excellent", "controllability": "Moderate"}, | |
| "sesame/csm-1b": {"naturalness": "Excellent", "intelligibility": "Excellent", "controllability": "Good"}, | |
| "SparkAudio/Spark-TTS-0.5B": {"naturalness": "Excellent", "intelligibility": "Excellent", "controllability": "Moderate"}, | |
| "canopylabs/orpheus-3b-0.1-ft": {"naturalness": "Excellent", "intelligibility": "Excellent", "controllability": "Moderate"}, | |
| "SWivid/F5-TTS": {"naturalness": "Excellent", "intelligibility": "Excellent", "controllability": "Good"}, | |
| "Zyphra/Zonos-v0.1-transformer": {"naturalness": "Good", "intelligibility": "Moderate", "controllability": "Excellent"}, | |
| "coqui/XTTS-v2": {"naturalness": "Good", "intelligibility": "Excellent", "controllability": "Moderate"}, | |
| "HKUSTAudio/Llasa-3B": {"naturalness": "Excellent", "intelligibility": "Good", "controllability": "Moderate"}, | |
| "amphion/MaskGCT": {"naturalness": "Good", "intelligibility": "Excellent", "controllability": "Moderate"}, | |
| "OuteAI/Llama-OuteTTS-1.0-1B": {"naturalness": "Moderate", "intelligibility": "Moderate", "controllability": "Moderate"}, | |
| "ByteDance/MegaTTS3": {"naturalness": "Good", "intelligibility": "Good", "controllability": "Moderate"} | |
| } | |
| # Model descriptions for better understanding | |
| MODEL_DESCRIPTIONS = { | |
| "nari-labs/Dia-1.6B": "Expressive conversational voice with moderate quality", | |
| "hexgrad/Kokoro-82M": "Lightweight powerhouse with excellent clarity", | |
| "sesame/csm-1b": "High-quality synthesis with excellent naturalness", | |
| "SparkAudio/Spark-TTS-0.5B": "Efficient model with excellent performance", | |
| "canopylabs/orpheus-3b-0.1-ft": "Fine-tuned large model with superior quality", | |
| "SWivid/F5-TTS": "Advanced flow-based synthesis with top ratings", | |
| "Zyphra/Zonos-v0.1-transformer": "Highly controllable transformer-based model", | |
| "coqui/XTTS-v2": "Multi-lingual excellence with proven performance", | |
| "HKUSTAudio/Llasa-3B": "Large-scale audio synthesis model", | |
| "amphion/MaskGCT": "Masked generative modeling approach", | |
| "OuteAI/Llama-OuteTTS-1.0-1B": "LLM-based TTS with moderate performance", | |
| "ByteDance/MegaTTS3": "Industrial-grade TTS solution" | |
| } | |
| # Folder that contains subfolders with the audio clips | |
| SAMPLES_DIR = "samples" | |
| CLIP_NAME = "generated-audio.wav" | |
| # Test prompt used for evaluation | |
| TEST_PROMPT = "Hello, this is a universal test sentence. Can the advanced Zylophonic system clearly articulate this and express a hint of excitement? The quick brown fox certainly hopes so!" | |
| def repo_to_slug(repo: str) -> str: | |
| """Convert huggingface/xxx to huggingface_xxx for folder naming.""" | |
| return repo.replace("/", "_") | |
| def get_rating_emoji(rating: str) -> str: | |
| """Convert rating to emoji.""" | |
| if rating == "Excellent": | |
| return "🟢" | |
| elif rating == "Good": | |
| return "🟡" | |
| else: | |
| return "🟠" | |
| def get_audio_path(repo: str) -> str: | |
| """Get the audio file path for a given repository.""" | |
| audio_path = os.path.join(SAMPLES_DIR, repo_to_slug(repo), CLIP_NAME) | |
| return audio_path if os.path.isfile(audio_path) else None | |
| def filter_models(search_term: str): | |
| """Filter models based on search term.""" | |
| if not search_term.strip(): | |
| return list(MODELS.keys()) | |
| search_lower = search_term.lower().strip() | |
| return [ | |
| repo for repo, name in MODELS.items() | |
| if search_lower in repo.lower() or search_lower in name.lower() | |
| ] | |
| def create_model_card(repo: str) -> str: | |
| """Create a formatted model card with ratings and description.""" | |
| display_name = MODELS[repo] | |
| description = MODEL_DESCRIPTIONS.get(repo, "High-quality TTS model") | |
| ratings = MODEL_RATINGS.get(repo, {}) | |
| card_html = f""" | |
| <div class="model-card" style="border: 1px solid #ddd; border-radius: 12px; padding: 20px; margin: 10px 0; background: white;"> | |
| <h3 style="color: #2c3e50; margin-top: 0;">🎤 {display_name}</h3> | |
| <div style="display: flex; gap: 15px; margin: 15px 0;"> | |
| <span style="color: #888;"><strong style="color: #888;">Naturalness:</strong> {get_rating_emoji(ratings.get('naturalness', 'Moderate'))} {ratings.get('naturalness', 'Moderate')}</span> | |
| <span style="color: #888;"><strong style="color: #888;">Intelligibility:</strong> {get_rating_emoji(ratings.get('intelligibility', 'Moderate'))} {ratings.get('intelligibility', 'Moderate')}</span> | |
| <span style="color: #888;"><strong style="color: #888;">Controllability:</strong> {get_rating_emoji(ratings.get('controllability', 'Moderate'))} {ratings.get('controllability', 'Moderate')}</span> | |
| </div> | |
| <p style="font-size: 0.9em; color: #888; margin: 5px 0;">Repository: <code style="color: #888;">{repo}</code></p> | |
| </div> | |
| """ | |
| return card_html | |
| # ---------- 2. Custom CSS ---------- | |
| custom_css = """ | |
| #title { | |
| text-align: center; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| margin-bottom: 2rem; | |
| } | |
| #intro-section { | |
| background: #f8f9fa; | |
| color: #2c3e50; | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin: 1rem 0; | |
| border-left: 4px solid #667eea; | |
| } | |
| #intro-section h2, | |
| #intro-section h3 { | |
| color: #2c3e50; | |
| } | |
| #intro-section p { | |
| color: #34495e; | |
| } | |
| #intro-section ul li { | |
| color: #34495e; | |
| } | |
| #intro-section .mission-text { | |
| color: #667eea !important; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| #intro-section strong { | |
| color: #2c3e50 !important; | |
| } | |
| #intro-section em { | |
| color: #2c3e50 !important; | |
| } | |
| #intro-section .mission-text strong { | |
| color: #667eea !important; | |
| } | |
| #test-prompt { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| text-align: center; | |
| margin: 1rem 0; | |
| } | |
| .model-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 1rem; | |
| margin: 1rem 0; | |
| } | |
| #footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: #666; | |
| border-top: 1px solid #eee; | |
| margin-top: 2rem; | |
| } | |
| /* make all the text in our white‐background cards dark */ | |
| .model-grid .gr-html * { | |
| color: #2c3e50 !important; | |
| } | |
| .model-card { | |
| background: white; | |
| color: #2c3e50 !important; | |
| border: 1px solid #ddd; | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin: 10px 0; | |
| } | |
| """ | |
| # ---------- 3. Main Gradio Interface ---------- | |
| def create_interface(): | |
| with gr.Blocks(css=custom_css, title="🎙️ TTS Model Gallery", theme=gr.themes.Soft()) as demo: | |
| # Header Section | |
| gr.HTML(""" | |
| <div id="title"> | |
| <h1>🎙️ Open-Source Text-to-Speech Model Gallery</h1> | |
| </div> | |
| """) | |
| # Introduction Section | |
| gr.HTML(""" | |
| <div id="intro-section"> | |
| <h3>🔬 Our Exciting Quest</h3> | |
| <p>We're on a thrilling journey to help developers discover the perfect TTS models for their innovative audio projects! | |
| We've put these 12 cutting-edge models through their paces using a scientifically designed universal test prompt.</p> | |
| <p><strong>Featured TTS Engines:</strong></p> | |
| <ul> | |
| <li>🎭 <strong>Dia-1.6B</strong> - Expressive conversational voice</li> | |
| <li>🎪 <strong>Kokoro-82M</strong> - Lightweight powerhouse</li> | |
| <li>🎨 <strong>F5-TTS</strong> - Advanced flow-based synthesis</li> | |
| <li>🎵 <strong>XTTS-v2</strong> - Multi-lingual excellence</li> | |
| <li>🎼 <strong>MaskGCT</strong> - Masked generative modeling</li> | |
| <li>🎤 <strong>Llasa-3B</strong> - Large-scale audio synthesis</li> | |
| <li><em>...and 6 more incredible models!</em></li> | |
| </ul> | |
| </div> | |
| """) | |
| # Test Prompt Section | |
| # gr.HTML(f""" | |
| # <div id="test-prompt"> | |
| # <h3>🎯 Universal Test Prompt</h3> | |
| # <p style="font-style: italic; font-size: 1.1em;">"{TEST_PROMPT}"</p> | |
| # <p style="font-size: 0.9em; opacity: 0.9;"> | |
| # Carefully crafted to test naturalness, intelligibility, and technical pronunciation across all models | |
| # </p> | |
| # </div> | |
| # """) | |
| # Evaluation Criteria | |
| with gr.Row(): | |
| with gr.Column(): | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 8px;"> | |
| <div style="font-size: 2rem;">🎭</div> | |
| <strong>Naturalness</strong><br> | |
| <small>Human-like quality & emotional expression</small> | |
| </div> | |
| """) | |
| with gr.Column(): | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 8px;"> | |
| <div style="font-size: 2rem;">🗣️</div> | |
| <strong>Intelligibility</strong><br> | |
| <small>Clarity & pronunciation accuracy</small> | |
| </div> | |
| """) | |
| with gr.Column(): | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 8px;"> | |
| <div style="font-size: 2rem;">🎛️</div> | |
| <strong>Controllability</strong><br> | |
| <small>Tone, pace & parameter flexibility</small> | |
| </div> | |
| """) | |
| gr.Markdown("---") | |
| # Search and Filter Section | |
| with gr.Row(): | |
| search_box = gr.Textbox( | |
| label="🔍 Search Models", | |
| placeholder="Filter by name or family (e.g., 'F5', 'TTS', '3B')", | |
| value="", | |
| scale=3 | |
| ) | |
| clear_btn = gr.Button("Clear", scale=1) | |
| # Model Gallery Section | |
| gr.Markdown("## 🎧 Model Gallery") | |
| # Create model cards and audio players | |
| model_components = [] | |
| for repo, display_name in MODELS.items(): | |
| with gr.Group(): | |
| # Model information card | |
| model_info = gr.HTML(create_model_card(repo)) | |
| # Audio player | |
| audio_path = get_audio_path(repo) | |
| if audio_path: | |
| audio_player = gr.Audio( | |
| value=audio_path, | |
| label=f"🎵 {display_name} Audio Sample", | |
| interactive=False | |
| ) | |
| else: | |
| audio_player = gr.HTML(f"<p style='color: red;'>🤷♂️ Audio sample not found for {display_name}</p>") | |
| model_components.append((repo, model_info, audio_player)) | |
| # Search functionality | |
| def update_visibility(search_term): | |
| filtered_repos = filter_models(search_term) | |
| updates = [] | |
| for repo, model_info, audio_player in model_components: | |
| visible = repo in filtered_repos | |
| updates.extend([ | |
| gr.update(visible=visible), # model_info | |
| gr.update(visible=visible) # audio_player | |
| ]) | |
| return updates | |
| # Connect search functionality | |
| search_box.change( | |
| fn=update_visibility, | |
| inputs=[search_box], | |
| outputs=[comp for repo, model_info, audio_player in model_components for comp in [model_info, audio_player]] | |
| ) | |
| clear_btn.click( | |
| fn=lambda: "", | |
| outputs=[search_box] | |
| ) | |
| # Methodology Section | |
| with gr.Accordion("📋 Detailed Evaluation Methodology", open=False): | |
| gr.Markdown(""" | |
| ### Test Prompt | |
| `Hello, this is a universal test sentence. Can the advanced Zylophonic system clearly articulate this and express a hint of excitement? The quick brown fox certainly hopes so!` | |
| ### Model Evaluation Criteria: | |
| 🎭 **Naturalness (Human-like Quality)** | |
| - Prosody and rhythm patterns | |
| - Emotional expression capability | |
| - Voice texture and warmth | |
| - Natural breathing and pauses | |
| 🗣️ **Intelligibility (Clarity & Accuracy)** | |
| - Word pronunciation precision | |
| - Consonant and vowel clarity | |
| - Sentence comprehensibility | |
| - Technical term handling | |
| 🎛️ **Controllability (Flexibility)** | |
| - Parameter responsiveness | |
| - Tone modification capability | |
| - Speed and pitch control | |
| - Customization potential | |
| ### Key Insights: | |
| - Smaller models (82M-500M) can excel in specific scenarios | |
| - Larger models (1B-3B+) offer more versatility but require more resources | |
| - Architecture matters as much as parameter count | |
| - Training data quality significantly impacts output quality | |
| """) | |
| # Footer | |
| # gr.HTML(""" | |
| # <div id="footer"> | |
| # <p><strong>🚀 Ready to deploy your own TTS model?</strong></p> | |
| # <p>This demo showcases the power of open-source TTS technology. Each model offers unique strengths for different applications.</p> | |
| # <p><em>Built with ❤️ using Gradio • All models are open-source and available on Hugging Face</em></p> | |
| # <p>⚡ Powered by Inferless</p> | |
| # </div> | |
| # """) | |
| return demo | |
| # ---------- 4. Launch the application ---------- | |
| if __name__ == "__main__": | |
| demo = create_interface() | |
| demo.launch( | |
| share=True, | |
| inbrowser=True, | |
| show_error=True | |
| ) |