Use style.css

app.py

@@ -60,134 +60,6 @@ custom_theme = gr.themes.Soft(
     block_label_text_weight="500",
 )
 
-# Custom CSS for mobile-first responsive design
-custom_css = """
-/* Mobile-first responsive design */
-.gradio-container {
-    max-width: 900px !important;
-    margin: 0 auto !important;
-    padding: 1rem !important;
-}
-
-/* Header styling */
-.header-container {
-    text-align: center;
-    margin-bottom: 2rem;
-    padding: 1.5rem 1rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 1rem;
-    color: white;
-}
-
-.header-title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    line-height: 1.2;
-}
-
-.header-subtitle {
-    font-size: 1rem;
-    opacity: 0.95;
-    font-weight: 400;
-}
-
-/* Main content card */
-.main-card {
-    background: white;
-    border-radius: 1rem;
-    padding: 1.5rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    margin-bottom: 1.5rem;
-}
-
-/* Audio component styling */
-.audio-container {
-    margin-bottom: 1.5rem;
-}
-
-/* Transcription output styling */
-.transcription-output {
-    min-height: 120px;
-    background: #f8fafc;
-    border-radius: 0.75rem;
-    padding: 1rem;
-    font-size: 1rem;
-    line-height: 1.6;
-}
-
-/* Examples styling */
-.examples-container {
-    margin-top: 2rem;
-}
-
-/* Footer */
-.footer-container {
-    text-align: center;
-    padding: 1.5rem 1rem;
-    margin-top: 2rem;
-    border-top: 1px solid #e2e8f0;
-    font-size: 0.875rem;
-    color: #64748b;
-}
-
-.footer-link {
-    color: #667eea;
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.2s;
-}
-
-.footer-link:hover {
-    color: #764ba2;
-}
-
-/* Mobile optimizations */
-@media (max-width: 640px) {
-    .header-title {
-        font-size: 1.5rem;
-    }
-
-    .header-subtitle {
-        font-size: 0.875rem;
-    }
-
-    .main-card {
-        padding: 1rem;
-    }
-
-    .gradio-container {
-        padding: 0.5rem !important;
-    }
-}
-
-/* Button styling */
-.primary-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    font-weight: 600 !important;
-    padding: 0.75rem 2rem !important;
-    font-size: 1rem !important;
-    transition: transform 0.2s, box-shadow 0.2s !important;
-}
-
-.primary-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3) !important;
-}
-
-/* Info banner */
-.info-banner {
-    background: #eff6ff;
-    border-left: 4px solid #3b82f6;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    margin-bottom: 1.5rem;
-    font-size: 0.875rem;
-    color: #1e40af;
-}
-"""
-
 with gr.Blocks(fill_height=False) as demo:
     # Header
     gr.HTML("""
@@ -265,7 +137,7 @@ with gr.Blocks(fill_height=False) as demo:
 if __name__ == "__main__":
     demo.launch(
         theme=custom_theme,
-        css=custom_css,
+        css_paths="style.css",
         footer_links=[
             {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"},
             {"label": "Model", "url": "https://huggingface.co/kyutai/stt-2.6b-en-trfs"},

style.css

@@ -1,4 +1,124 @@
-h1 {
-  text-align: center;
-  display: block;
+/* Mobile-first responsive design */
+.gradio-container {
+    max-width: 900px !important;
+    margin: 0 auto !important;
+    padding: 1rem !important;
+}
+
+/* Header styling */
+.header-container {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding: 1.5rem 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 1rem;
+    color: white;
+}
+
+.header-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    line-height: 1.2;
+}
+
+.header-subtitle {
+    font-size: 1rem;
+    opacity: 0.95;
+    font-weight: 400;
+}
+
+/* Main content card */
+.main-card {
+    background: white;
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    margin-bottom: 1.5rem;
+}
+
+/* Audio component styling */
+.audio-container {
+    margin-bottom: 1.5rem;
+}
+
+/* Transcription output styling */
+.transcription-output {
+    min-height: 120px;
+    background: #f8fafc;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+/* Examples styling */
+.examples-container {
+    margin-top: 2rem;
+}
+
+/* Footer */
+.footer-container {
+    text-align: center;
+    padding: 1.5rem 1rem;
+    margin-top: 2rem;
+    border-top: 1px solid #e2e8f0;
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.footer-link {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s;
+}
+
+.footer-link:hover {
+    color: #764ba2;
+}
+
+/* Mobile optimizations */
+@media (max-width: 640px) {
+    .header-title {
+        font-size: 1.5rem;
+    }
+
+    .header-subtitle {
+        font-size: 0.875rem;
+    }
+
+    .main-card {
+        padding: 1rem;
+    }
+
+    .gradio-container {
+        padding: 0.5rem !important;
+    }
+}
+
+/* Button styling */
+.primary-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    font-weight: 600 !important;
+    padding: 0.75rem 2rem !important;
+    font-size: 1rem !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
+}
+
+.primary-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3) !important;
+}
+
+/* Info banner */
+.info-banner {
+    background: #eff6ff;
+    border-left: 4px solid #3b82f6;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    color: #1e40af;
 }