Update app.py

app.py

@@ -96,18 +96,39 @@ examples = [
 
 # Custom CSS for better styling and centering
 custom_css = """
-/* Main container centering */
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 1400px !important;  /* wider overall */
     margin: 0 auto !important;
     padding: 20px !important;
 }
 
 /* Center all content */
 .main-content {
-    max-width: 1000px;
+    max-width: 1400px;  /* give more breathing space */
     margin: 0 auto;
-    padding: 0 20px;
+    padding: 0 30px;
+}
+
+/* Make input, radio, and audio take full width */
+.input-section textarea,
+.input-section .wrap,
+.audio-section audio {
+    width: 100% !important;
+}
+
+/* Radio buttons: horizontal pills */
+.radio-group {
+    display: flex;
+    flex-direction: row;  /* horizontal */
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+.radio-group label {
+    min-width: 120px;
+    padding: 10px 18px !important;
+    border-radius: 20px !important;
+    text-align: center;
 }
 
 /* Status message styling */
@@ -119,24 +140,18 @@ custom_css = """
     font-weight: 500;
 }
 
-/* Center radio buttons */
-.radio-group {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
 /* Better button styling */
 .generate-btn {
     margin: 20px auto;
     display: block;
-    min-width: 200px;
+    min-width: 220px;
+    font-size: 1.1em;
 }
 
 /* Examples section */
 .examples-section {
-    margin: 30px 0;
-    padding: 20px;
+    margin: 40px 0;
+    padding: 25px;
     background-color: #fafbfc;
     border-radius: 12px;
     border: 1px solid #e1e5e9;
@@ -145,32 +160,19 @@ custom_css = """
 /* Center examples title */
 .examples-title {
     text-align: center;
-    font-size: 1.1em;
+    font-size: 1.2em;
     font-weight: 600;
-    margin-bottom: 15px;
+    margin-bottom: 18px;
     color: #374151;
 }
 
 /* Footer styling */
 .footer {
-    margin-top: 40px;
-    padding: 20px;
+    margin-top: 50px;
+    padding: 25px;
     text-align: center;
     border-top: 1px solid #e1e5e9;
 }
-
-/* Input components centering */
-.input-section {
-    padding: 20px 0;
-}
-
-/* Audio output centering */
-.audio-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-}
 """
 
 with gr.Blocks(