From e0bef6f8b213bde04fe62e02f193b3410857411c Mon Sep 17 00:00:00 2001 From: mrfakename Date: Sat, 6 Dec 2025 14:48:43 -0800 Subject: [PATCH] Fix Gradio demo --- demo/gradio_demo.py | 216 +------------------------------------------- 1 file changed, 3 insertions(+), 213 deletions(-) diff --git a/demo/gradio_demo.py b/demo/gradio_demo.py index 9ac413e..9c088ba 100644 --- a/demo/gradio_demo.py +++ b/demo/gradio_demo.py @@ -639,227 +639,17 @@ class VibeVoiceDemo: def create_demo_interface(demo_instance: VibeVoiceDemo): """Create the Gradio interface with streaming support.""" - # Custom CSS for high-end aesthetics with lighter theme - custom_css = """ - /* Modern light theme with gradients */ - .gradio-container { - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); - font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; - } - - /* Header styling */ - .main-header { - background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); - padding: 2rem; - border-radius: 20px; - margin-bottom: 2rem; - text-align: center; - box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3); - } - - .main-header h1 { - color: white; - font-size: 2.5rem; - font-weight: 700; - margin: 0; - text-shadow: 0 2px 4px rgba(0,0,0,0.3); - } - - .main-header p { - color: rgba(255,255,255,0.9); - font-size: 1.1rem; - margin: 0.5rem 0 0 0; - } - - /* Card styling */ - .settings-card, .generation-card { - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); - border: 1px solid rgba(226, 232, 240, 0.8); - border-radius: 16px; - padding: 1.5rem; - margin-bottom: 1rem; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - } - - /* Speaker selection styling */ - .speaker-grid { - display: grid; - gap: 1rem; - margin-bottom: 1rem; - } - - .speaker-item { - background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); - border: 1px solid rgba(148, 163, 184, 0.4); - border-radius: 12px; - padding: 1rem; - color: #374151; - font-weight: 500; - } - - /* Streaming indicator */ - .streaming-indicator { - display: inline-block; - width: 10px; - height: 10px; - background: #22c55e; - border-radius: 50%; - margin-right: 8px; - animation: pulse 1.5s infinite; - } - - @keyframes pulse { - 0% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(1.1); } - 100% { opacity: 1; transform: scale(1); } - } - - /* Queue status styling */ - .queue-status { - background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); - border: 1px solid rgba(14, 165, 233, 0.3); - border-radius: 8px; - padding: 0.75rem; - margin: 0.5rem 0; - text-align: center; - font-size: 0.9rem; - color: #0369a1; - } - - .generate-btn { - background: linear-gradient(135deg, #059669 0%, #0d9488 100%); - border: none; - border-radius: 12px; - padding: 1rem 2rem; - color: white; - font-weight: 600; - font-size: 1.1rem; - box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4); - transition: all 0.3s ease; - } - - .generate-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(5, 150, 105, 0.6); - } - - .stop-btn { - background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); - border: none; - border-radius: 12px; - padding: 1rem 2rem; - color: white; - font-weight: 600; - font-size: 1.1rem; - box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4); - transition: all 0.3s ease; - } - - .stop-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(239, 68, 68, 0.6); - } - - /* Audio player styling */ - .audio-output { - background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); - border-radius: 16px; - padding: 1.5rem; - border: 1px solid rgba(148, 163, 184, 0.3); - } - - .complete-audio-section { - margin-top: 1rem; - padding: 1rem; - background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); - border: 1px solid rgba(34, 197, 94, 0.3); - border-radius: 12px; - } - - /* Text areas */ - .script-input, .log-output { - background: rgba(255, 255, 255, 0.9) !important; - border: 1px solid rgba(148, 163, 184, 0.4) !important; - border-radius: 12px !important; - color: #1e293b !important; - font-family: 'JetBrains Mono', monospace !important; - } - - .script-input::placeholder { - color: #64748b !important; - } - - /* Sliders */ - .slider-container { - background: rgba(248, 250, 252, 0.8); - border: 1px solid rgba(226, 232, 240, 0.6); - border-radius: 8px; - padding: 1rem; - margin: 0.5rem 0; - } - - /* Labels and text */ - .gradio-container label { - color: #374151 !important; - font-weight: 600 !important; - } - - .gradio-container .markdown { - color: #1f2937 !important; - } - - /* Responsive design */ - @media (max-width: 768px) { - .main-header h1 { font-size: 2rem; } - .settings-card, .generation-card { padding: 1rem; } - } - - /* Random example button styling - more subtle professional color */ - .random-btn { - background: linear-gradient(135deg, #64748b 0%, #475569 100%); - border: none; - border-radius: 12px; - padding: 1rem 1.5rem; - color: white; - font-weight: 600; - font-size: 1rem; - box-shadow: 0 4px 20px rgba(100, 116, 139, 0.3); - transition: all 0.3s ease; - display: inline-flex; - align-items: center; - gap: 0.5rem; - } - - .random-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(100, 116, 139, 0.4); - background: linear-gradient(135deg, #475569 0%, #334155 100%); - } - """ - - with gr.Blocks( - title="VibeVoice - AI Podcast Generator", - css=custom_css, - theme=gr.themes.Soft( - primary_hue="blue", - secondary_hue="purple", - neutral_hue="slate", - ) - ) as interface: + with gr.Blocks() as interface: # Header gr.HTML(""" -
-

🎙️ Vibe Podcasting

-

Generating Long-form Multi-speaker AI Podcast with VibeVoice

-
+ # VibeVoice """) with gr.Row(): # Left column - Settings with gr.Column(scale=1, elem_classes="settings-card"): - gr.Markdown("### 🎛️ **Podcast Settings**") + gr.Markdown("### **Podcast Settings**") # Number of speakers num_speakers = gr.Slider(