Fix Gradio demo
This commit is contained in:
mrfakename
+3
-213
@@ -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("""
|
||||
<div class="main-header">
|
||||
<h1>🎙️ Vibe Podcasting </h1>
|
||||
<p>Generating Long-form Multi-speaker AI Podcast with VibeVoice</p>
|
||||
</div>
|
||||
# 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(
|
||||
|
||||
Reference in New Issue
Block a user