improve ui/ux

app.py

@@ -215,24 +215,102 @@ def synthesize_speech_gradio(
 def create_gradio_interface():
     """Create the Gradio web interface."""
 
-    # Custom CSS for better styling
+    # Enhanced CSS for modern UI/UX
     css = """
     .gradio-container {
-        max-width: 1200px;
+        max-width: 1400px;
         margin: auto;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
     .title {
         text-align: center;
-        color: #2563eb;
-        font-size: 2.5em;
-        font-weight: bold;
-        margin-bottom: 1em;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 3.5em;
+        font-weight: 800;
+        margin-bottom: 0.5em;
+        letter-spacing: -0.02em;
     }
     .subtitle {
         text-align: center;
         color: #64748b;
-        font-size: 1.2em;
-        margin-bottom: 2em;
+        font-size: 1.3em;
+        margin-bottom: 2.5em;
+        font-weight: 300;
+    }
+    .step-card {
+        background: linear-gradient(145deg, #f8fafc, #e2e8f0);
+        border: 1px solid #cbd5e1;
+        border-radius: 16px;
+        padding: 1.5em;
+        margin: 1em 0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+    }
+    .step-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
+    }
+    .step-number {
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        font-size: 0.9em;
+        margin-right: 12px;
+    }
+    .feature-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5em;
+        margin: 2em 0;
+    }
+    .feature-card {
+        background: white;
+        border: 1px solid #e2e8f0;
+        border-radius: 12px;
+        padding: 1.5em;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+    }
+    .feature-card:hover {
+        border-color: #667eea;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.1);
+    }
+    .btn-primary {
+        background: linear-gradient(135deg, #667eea, #764ba2) !important;
+        border: none !important;
+        color: white !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+    }
+    .btn-primary:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
+    }
+    .output-section {
+        background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
+        border-radius: 16px;
+        padding: 2em;
+        margin-top: 1em;
+    }
+    .example-card {
+        background: white;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 1em;
+        margin: 0.5em 0;
+        transition: all 0.2s ease;
+    }
+    .example-card:hover {
+        border-color: #667eea;
+        background: #fafbfc;
     }
     """