Update app.py

app.py

@@ -2,12 +2,21 @@ import asyncio
 import platform
 import sys
 
-# Fix for "ValueError: Invalid file descriptor: -1" on shutdown
-# This is specifically for Hugging Face Spaces environment
+# Fix for asyncio warnings on Hugging Face Spaces
 if sys.platform.startswith("linux") or sys.platform.startswith("darwin"):
     try:
-        # Use the default policy to prevent faulty cleanup on shutdown
+        # Clean up any existing loops
+        try:
+            loop = asyncio.get_event_loop()
+            if loop.is_running():
+                loop.close()
+        except:
+            pass
+        
+        # Set default policy
         asyncio.set_event_loop_policy(asyncio.DefaultEventLoopPolicy())
+        # Create a new event loop
+        asyncio.set_event_loop(asyncio.new_event_loop())
     except Exception:
         pass  # Ignore any errors if this fails
 
@@ -30,6 +39,7 @@ body, .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     margin: 0;
     padding: 20px;
+    min-height: 100vh;
 }
 
 /* Header */
@@ -44,7 +54,7 @@ body, .gradio-container {
 }
 
 .header h1 {
-    font-size: 2.8em;
+    font-size: 2.5em;
     margin: 0 0 0.5rem 0;
     font-weight: 700;
     letter-spacing: -0.5px;
@@ -61,9 +71,9 @@ body, .gradio-container {
     background: white;
     border: 1px solid #E5E7EB;
     border-radius: 16px;
-    padding: 1.75rem;
+    padding: 1.5rem;
     margin-bottom: 1.5rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 /* Text Input - BLACK TEXT ON WHITE */
@@ -71,12 +81,12 @@ textarea {
     background: white !important;
     border: 2px solid #D1D5DB !important;
     border-radius: 12px !important;
-    color: #111827 !important;
+    color: #000000 !important;  /* Pure black text */
     padding: 1rem !important;
     font-size: 16px !important;
     font-family: 'SF Mono', Monaco, 'Courier New', monospace !important;
     width: 100% !important;
-    min-height: 140px !important;
+    min-height: 120px !important;
     line-height: 1.5 !important;
 }
 
@@ -84,11 +94,11 @@ textarea:focus {
     border-color: #4F46E5 !important;
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
     outline: none !important;
-    color: #111827 !important;
+    color: #000000 !important;
 }
 
 textarea::placeholder {
-    color: #6B7280 !important;
+    color: #666666 !important;
     opacity: 0.8 !important;
 }
 
@@ -97,16 +107,17 @@ textarea::placeholder {
     background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
     border: none !important;
     color: white !important;
-    padding: 0.875rem 1.75rem !important;
-    border-radius: 12px !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: 10px !important;
     font-weight: 600 !important;
     font-size: 1rem !important;
     cursor: pointer !important;
+    margin: 0.5rem !important;
 }
 
 .btn-primary:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
 }
 
 .btn-secondary {
@@ -114,9 +125,10 @@ textarea::placeholder {
     border: 2px solid #D1D5DB !important;
     color: #374151 !important;
     padding: 0.75rem 1.5rem !important;
-    border-radius: 12px !important;
+    border-radius: 10px !important;
     font-weight: 500 !important;
     cursor: pointer !important;
+    margin: 0.5rem !important;
 }
 
 .btn-secondary:hover {
@@ -126,40 +138,29 @@ textarea::placeholder {
 }
 
 /* Slider */
-.slider-container {
-    padding: 1rem 0;
-}
-
-.slider-container label {
-    display: block;
-    color: #374151 !important;
-    font-weight: 600 !important;
-    margin-bottom: 0.5rem !important;
-    font-size: 0.95rem !important;
-}
-
 input[type="range"] {
     width: 100% !important;
     height: 6px !important;
     background: #E5E7EB !important;
     border-radius: 10px !important;
     outline: none !important;
+    margin: 1rem 0 !important;
 }
 
 input[type="range"]::-webkit-slider-thumb {
-    width: 22px !important;
-    height: 22px !important;
+    width: 20px !important;
+    height: 20px !important;
     background: #4F46E5 !important;
     border: 3px solid white !important;
     border-radius: 50% !important;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
     cursor: pointer !important;
 }
 
 /* Audio Player */
 .audio-player {
     background: #F9FAFB !important;
-    border-radius: 16px !important;
+    border-radius: 12px !important;
     padding: 1.5rem !important;
     margin-top: 1rem !important;
     border: 1px solid #E5E7EB !important;
@@ -182,22 +183,20 @@ input[type="range"]::-webkit-slider-thumb {
     background: white;
     border: 1px solid #E5E7EB;
     border-radius: 12px;
-    padding: 1.25rem;
+    padding: 1rem;
     text-align: center;
 }
 
 .stat-value {
-    font-size: 2em;
+    font-size: 1.8em;
     font-weight: 700;
-    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: #4F46E5 !important;
     margin-bottom: 0.25rem;
 }
 
 .stat-label {
     color: #6B7280;
-    font-size: 0.85em;
+    font-size: 0.8em;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 600;
@@ -210,7 +209,7 @@ input[type="range"]::-webkit-slider-thumb {
     border-left: 4px solid #10B981 !important;
     color: #065F46 !important;
     padding: 1rem !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     margin: 1rem 0 !important;
 }
 
@@ -220,7 +219,7 @@ input[type="range"]::-webkit-slider-thumb {
     border-left: 4px solid #EF4444 !important;
     color: #991B1B !important;
     padding: 1rem !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     margin: 1rem 0 !important;
 }
 
@@ -228,14 +227,14 @@ input[type="range"]::-webkit-slider-thumb {
 .footer {
     text-align: center;
     padding: 2rem;
-    margin-top: 3rem;
+    margin-top: 2rem;
     color: #6B7280;
     border-top: 1px solid #E5E7EB;
 }
 
 /* Grid layout */
 .container {
-    max-width: 1200px;
+    max-width: 1000px;
     margin: 0 auto;
 }
 
@@ -262,13 +261,10 @@ input[type="range"]::-webkit-slider-thumb {
 .markdown h1, .markdown h2, .markdown h3 {
     color: #111827 !important;
     font-weight: 600 !important;
-    margin-top: 1.5em !important;
-    margin-bottom: 0.5em !important;
 }
 
 .markdown p {
     color: #4B5563 !important;
-    margin-bottom: 1em !important;
 }
 </style>
 """
@@ -361,8 +357,7 @@ def generate_tts(text, speed=1.0, emotion="neutral"):
                 <div style="color: #065F46;">
                     <strong>{len(text)} characters</strong> • 
                     <strong>{duration:.1f}s duration</strong> • 
-                    Speed: <strong>{speed}x</strong> • 
-                    Emotion: <strong>{emotion}</strong>
+                    Speed: <strong>{speed}x</strong>
                 </div>
             </div>
             """
@@ -420,8 +415,8 @@ with gr.Blocks() as demo:
         # Header
         gr.HTML("""
         <div class="header">
-            <h1>🎵 VibeVoice Text-to-Speech</h1>
-            <p>Convert text into natural-sounding speech</p>
+            <h1>🎵 VibeVoice TTS</h1>
+            <p>Text-to-Speech with Clean White Interface</p>
         </div>
         """)
         
@@ -434,17 +429,16 @@ with gr.Blocks() as demo:
                     
                     text_input = gr.Textbox(
                         label="",
-                        placeholder="Type or paste your text here...",
-                        lines=6,
-                        elem_id="text-input"
+                        placeholder="Type or paste your text here... (Black text on white background)",
+                        lines=5
                     )
                     
-                    gr.Markdown("### ⚙️ Voice Settings")
+                    gr.Markdown("### ⚙️ Settings")
                     
                     with gr.Row():
                         emotion = gr.Dropdown(
                             label="Voice Style",
-                            choices=["Neutral", "Happy", "Calm", "Professional", "Storytelling"],
+                            choices=["Neutral", "Happy", "Calm"],
                             value="Neutral"
                         )
                         
@@ -453,8 +447,7 @@ with gr.Blocks() as demo:
                             maximum=2.0,
                             value=1.0,
                             step=0.1,
-                            label="Speaking Speed",
-                            elem_classes="slider-container"
+                            label="Speaking Speed"
                         )
                     
                     with gr.Row():
@@ -464,7 +457,7 @@ with gr.Blocks() as demo:
                             elem_classes="btn-primary"
                         )
                         clear_btn = gr.Button(
-                            "Clear All",
+                            "Clear",
                             variant="secondary",
                             elem_classes="btn-secondary"
                         )
@@ -477,13 +470,12 @@ with gr.Blocks() as demo:
                     with gr.Column(elem_classes="audio-player"):
                         audio_output = gr.Audio(
                             type="filepath",
-                            label="",
-                            elem_id="audio-output"
+                            label=""
                         )
                     
                     status_display = gr.HTML(
                         """<div style="text-align: center; color: #6B7280; padding: 1rem;">
-                           Ready to generate speech. Enter text and click the button above.
+                           Ready. Enter text and click Generate.
                            </div>"""
                     )
         
@@ -491,60 +483,36 @@ with gr.Blocks() as demo:
         with gr.Column(elem_classes="card"):
             gr.Markdown("### 📊 Statistics")
             stats_display = gr.HTML(get_stats_html())
-            
-            with gr.Row():
-                refresh_stats = gr.Button(
-                    "🔄 Refresh Stats",
-                    variant="secondary",
-                    elem_classes="btn-secondary"
-                )
         
         # Examples
         with gr.Column(elem_classes="card"):
-            gr.Markdown("### 💡 Example Texts")
+            gr.Markdown("### 💡 Examples")
             
             gr.Examples(
                 examples=[
-                    ["Hello! Welcome to VibeVoice text-to-speech system."],
+                    ["Hello! Welcome to the text-to-speech system."],
                     ["The quick brown fox jumps over the lazy dog."],
-                    ["Artificial intelligence is revolutionizing technology."],
-                    ["Would you like a cup of coffee or tea this morning?"],
-                    ["This text-to-speech system converts written text into spoken words."]
+                    ["This is a test of the audio generation."],
+                    ["The weather is beautiful today."]
                 ],
                 inputs=text_input,
-                label="Click any example to load it:",
-                examples_per_page=5
+                label="Click to try:"
             )
         
         # About section
         with gr.Column(elem_classes="card"):
-            gr.Markdown("### ℹ️ About VibeVoice TTS")
+            gr.Markdown("### ℹ️ About")
             gr.Markdown("""
-            **VibeVoice TTS** converts written text into natural-sounding speech.
+            **VibeVoice TTS** converts text to audio.
             
             **Features:**
-            - 🎵 High-quality audio output
-            - ⚡ Fast processing speed
-            - 🎭 Multiple voice styles
-            - ⚙️ Adjustable speaking rate
+            - 🎵 Audio generation
+            - ⚡ Fast processing
+            - 🎭 Voice styles
+            - ⚙️ Speed control
             
-            **Tips:**
-            1. Use clear, well-punctuated text
-            2. Keep text under 500 characters
-            3. Adjust speed to match your preference
+            **Note:** Text input shows **black text on white background**.
             """)
-        
-        # Footer
-        gr.HTML("""
-        <div class="footer">
-            <div style="margin-bottom: 1rem;">
-                <span style="color: #4F46E5; font-weight: 600;">VibeVoice TTS</span>
-            </div>
-            <div style="font-size: 0.9em; color: #9CA3AF;">
-                Made with Gradio
-            </div>
-        </div>
-        """)
     
     # Event handlers
     def process_text(text, speed_val, emotion_val):
@@ -553,7 +521,6 @@ with gr.Blocks() as demo:
             return None, """
             <div class="status-error">
                 <div style="font-weight: 600;">⚠️ Please enter text</div>
-                <div>Type or paste some text in the input box above.</div>
             </div>
             """, get_stats_html()
         
@@ -562,8 +529,8 @@ with gr.Blocks() as demo:
     def clear_all():
         """Clear all inputs"""
         return "", None, """
-        <div style="text-align: center; padding: 1rem; color: #6B7280; border: 1px dashed #D1D5DB; border-radius: 10px;">
-            Input cleared. Ready for new text.
+        <div style="text-align: center; color: #6B7280; padding: 1rem;">
+            Cleared. Ready for new text.
         </div>
         """, get_stats_html()
     
@@ -579,34 +546,23 @@ with gr.Blocks() as demo:
         inputs=[],
         outputs=[text_input, audio_output, status_display, stats_display]
     )
-    
-    refresh_stats.click(
-        fn=get_stats_html,
-        inputs=[],
-        outputs=[stats_display]
-    )
-    
-    # Initialize stats on load
-    demo.load(
-        fn=get_stats_html,
-        inputs=[],
-        outputs=[stats_display]
-    )
 
-# Launch the app with Hugging Face Space-specific fix
+# Launch the app - SIMPLIFIED for Gradio 3.x
 if __name__ == "__main__":
+    # Clean up any existing event loops before starting
     try:
-        demo.launch(
-            server_name="0.0.0.0",
-            server_port=7860,
-            show_error=True,
-            quiet=True,
-            debug=False,
-            # CRITICAL FIX for Hugging Face Spaces
-            # Prevents the "ValueError: Invalid file descriptor: -1" error
-            close_event_loop=False
-        )
-    except KeyboardInterrupt:
-        print("\n👋 Shutting down VibeVoice TTS...")
-    except Exception as e:
-        print(f"❌ Error: {e}")
+        import asyncio
+        loop = asyncio.get_event_loop()
+        if loop.is_running():
+            loop.close()
+    except:
+        pass
+    
+    # Launch with minimal parameters
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True,
+        quiet=True,
+        debug=False
+    )