Update app.py

app.py

@@ -6,7 +6,7 @@ from pydub.silence import split_on_silence
 import re 
 import click
 
-# --- LOGIC SECTION (SAME AS BEFORE) ---
+# --- LOGIC SECTION (SAME) ---
 
 def clean_file_name(file_path):
     file_name = os.path.basename(file_path)
@@ -39,178 +39,172 @@ def process_audio(audio_file, seconds=0.05):
     output_audio_file = remove_silence(audio_file, minimum_silence=keep_silence)
     before = calculate_duration(audio_file)
     after = calculate_duration(output_audio_file)
-    text = f"⏱️ Old Duration: {before:.3f}s \n✅ New Duration: {after:.3f}s \n🚀 Saved: {before-after:.3f}s"
+    text = f"⏱️ Old: {before:.2f}s | ✅ New: {after:.2f}s | 🚀 Saved: {before-after:.2f}s"
     return output_audio_file, output_audio_file, text
 
 def reset_interface():
     return None, 0.05, None, None, ""
 
-# --- NEW RGB UI SECTION ---
+# --- NEW MOBILE-OPTIMIZED UI ---
 
 def ui():
-    # Dark Theme base
+    # Clean Modern Font Theme
     theme = gr.themes.Soft(
         primary_hue="cyan",
         secondary_hue="slate",
-        font=[gr.themes.GoogleFont("Orbitron"), "sans-serif"], # Gaming Font
+        font=[gr.themes.GoogleFont("Poppins"), "sans-serif"], # Changed to Poppins (Cleaner)
     ).set(
-        body_background_fill="#0a0a0a",
-        block_background_fill="#111111",
+        body_background_fill="#050505",
+        block_background_fill="#121212",
         block_border_width="0px",
         input_background_fill="#1a1a1a"
     )
 
-    # RGB & Mobile Responsive CSS
     css = """
-    /* Mobile Fix: Ensure container fits screen */
+    /* MOBILE FIX: Container width 100% karega */
     .gradio-container { 
-        max-width: 1000px !important; 
-        margin: auto; 
-        padding: 10px;
+        width: 100% !important;
+        max-width: 100% !important; 
+        padding: 10px !important;
+        margin: 0 !important;
+        overflow-x: hidden;
     }
     
-    /* RGB Animation Keyframes */
+    /* Font Change */
+    * { font-family: 'Poppins', sans-serif !important; }
+
+    /* RGB Animation */
     @keyframes rgb-flow {
         0% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
         100% { background-position: 0% 50%; }
     }
 
-    /* Animated Title */
+    /* Title Styling - Mobile Friendly */
     .rgb-text {
-        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+        background: linear-gradient(45deg, #ff0000, #00ffd5, #002bff, #ff00c8);
         background-size: 300%;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        font-weight: 900;
-        font-size: 2.5rem;
+        font-weight: 800;
+        font-size: 2rem; /* Thoda chota kiya mobile ke liye */
         text-align: center;
-        animation: rgb-flow 10s linear infinite;
-        text-shadow: 0 0 10px rgba(255,255,255,0.1);
+        animation: rgb-flow 8s linear infinite;
         margin-bottom: 5px;
+        line-height: 1.2;
     }
     
-    .subtitle { text-align: center; color: #888; font-size: 1rem; margin-bottom: 20px; letter-spacing: 1px; }
+    .subtitle { 
+        text-align: center; 
+        color: #888; 
+        font-size: 0.9rem; 
+        margin-bottom: 15px; 
+    }
 
-    /* The RGB Card Container */
+    /* Card Styling */
     .rgb-card {
-        position: relative;
         background: #111;
-        border-radius: 20px;
-        padding: 4px; /* Space for the border */
-        z-index: 0;
-        margin-bottom: 20px;
+        border-radius: 15px;
+        padding: 2px; /* Border patla kiya */
+        margin-bottom: 10px;
+        position: relative;
     }
     
-    /* The Glowing Border */
     .rgb-card::before {
         content: "";
         position: absolute;
-        inset: -2px;
+        inset: 0;
         z-index: -1;
-        background: linear-gradient(45deg, #ff0000, #00ffd5, #002bff, #ff00c8, #ff0000);
+        background: linear-gradient(45deg, #ff0000, #00ffd5, #002bff, #ff00c8);
         background-size: 400%;
-        border-radius: 22px;
-        animation: rgb-flow 20s linear infinite;
-        filter: blur(8px);
-        opacity: 0.8;
+        border-radius: 15px;
+        animation: rgb-flow 15s linear infinite;
+        opacity: 0.6;
     }
 
-    /* Inner Content of Card */
     .inner-card {
-        background: #0f1014;
-        border-radius: 18px;
-        padding: 20px;
-        height: 100%;
+        background: #0a0a0a;
+        border-radius: 13px;
+        padding: 15px;
     }
 
-    /* Buttons */
+    /* Button Styling */
     .process-btn {
         background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%) !important;
-        border: none !important;
         color: white !important;
-        font-weight: bold !important;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        transition: 0.3s;
-        box-shadow: 0 0 15px rgba(0, 114, 255, 0.4);
+        font-weight: 600 !important;
+        border: none !important;
+        box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
     }
-    .process-btn:hover { box-shadow: 0 0 25px rgba(0, 114, 255, 0.8); transform: scale(1.02); }
-
     .reset-btn {
         background: #ff0055 !important;
         color: white !important;
         border: none !important;
-        box-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
     }
-    
-    /* Output Box */
+
+    /* Stats Box Text Fix */
     .stat-box textarea {
         background-color: #000 !important;
         color: #00ff88 !important;
-        border: 1px solid #333 !important;
-        font-family: 'Courier New', monospace;
+        font-family: monospace;
+        font-size: 14px !important;
     }
 
-    /* Mobile Responsive Logic */
+    /* Mobile Specific Tweaks */
     @media (max-width: 768px) {
-        .title-text { font-size: 1.8rem; }
-        .inner-card { padding: 15px; }
+        .rgb-text { font-size: 1.5rem !important; } /* Mobile pe title chota */
+        .inner-card { padding: 10px !important; }
+        .process-btn, .reset-btn { width: 100%; margin-top: 5px; } /* Buttons full width */
     }
     """
 
-    with gr.Blocks(theme=theme, css=css, title="RGB Silence Remover") as demo:
+    with gr.Blocks(theme=theme, css=css, title="Silence Remover Pro") as demo:
         
-        # Header
         gr.HTML("""
-            <div class="rgb-text">NEON SILENCE REMOVER</div>
-            <div class="subtitle">AI-POWERED AUDIO CLEANER</div>
+            <div class="rgb-text">SILENCE REMOVER</div>
+            <div class="subtitle">Clean Audio • Fast • AI Powered</div>
         """)
 
-        # Main RGB Wrapper
         with gr.Group(elem_classes="rgb-card"):
             with gr.Column(elem_classes="inner-card"):
                 
-                # Layout changes automatically on mobile due to Gradio's default flex behavior
+                # Mobile par ye stack ho jayega (upar-niche)
                 with gr.Row():
                     
-                    # --- LEFT COLUMN (Inputs) ---
+                    # --- INPUT SECTION ---
                     with gr.Column(scale=1):
-                        gr.Markdown("### 🎧 SOURCE AUDIO")
+                        gr.Markdown("### 📤 UPLOAD")
                         audio_input = gr.Audio(
-                            label="Upload", type="filepath", 
+                            label="Source", type="filepath", 
                             sources=["upload", "microphone"], show_label=False
                         )
                         
-                        gr.Markdown("### 🎚️ THRESHOLD")
+                        gr.Markdown("### 🎚️ SETTING")
                         silence_threshold = gr.Slider(
                             minimum=0, maximum=1, step=0.01, value=0.05,
-                            label="Keep Silence (Seconds)"
+                            label="Keep Silence (Sec)"
                         )
                         
-                        with gr.Row():
-                            submit_btn = gr.Button("🚀 PROCESS", elem_classes="process-btn")
-                            clear_btn = gr.Button("❌ RESET", elem_classes="reset-btn")
+                        submit_btn = gr.Button("🚀 PROCESS AUDIO", elem_classes="process-btn")
 
-                    # --- RIGHT COLUMN (Outputs) ---
+                    # --- OUTPUT SECTION ---
                     with gr.Column(scale=1):
-                        gr.Markdown("### 🔊 RESULT")
+                        gr.Markdown("### 🎧 RESULT")
                         audio_output = gr.Audio(
                             label="Clean Audio", show_label=False, interactive=False
                         )
                         
-                        gr.Markdown("### 💾 DOWNLOAD")
-                        file_output = gr.File(label="Download", file_count="single")
+                        with gr.Row():
+                            file_output = gr.File(label="Download", file_count="single", scale=2)
+                            clear_btn = gr.Button("❌ RESET", elem_classes="reset-btn", scale=1)
                         
                         duration_output = gr.Textbox(
-                            label="STATS", lines=3, 
+                            label="STATS", lines=2, 
                             elem_classes="stat-box", show_label=True
                         )
 
-        # Footer
-        gr.Markdown("""<div style="text-align: center; color: #444; margin-top: 10px;">CYBERPUNK AUDIO TOOLS © 2026</div>""")
+        gr.Markdown("""<div style="text-align: center; color: #555; font-size: 0.8rem; margin-top: 5px;">Made with ❤️</div>""")
 
-        # Functionality
         submit_btn.click(
             fn=process_audio, 
             inputs=[audio_input, silence_threshold],