Update app.py

app.py

@@ -1,29 +1,113 @@
 import gradio as gr
 from synthscope import GoogleSearchImageGen
 
-with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink),
-               css="footer {display: none !important;}") as app:
-    gr.HTML("<div style='text-align:center;overflow:hidden;'><h2>&#127760; SynthScope &#127912;</h2></div>")
-    
-    with gr.Column():
+with gr.Blocks(theme=gr.themes.Default(primary_hue="teal", secondary_hue="amber"),
+               css="""
+               footer {display: none !important;}
+               .audio-container {
+                 padding: 10px;
+                 border-radius: 8px;
+                 background: rgba(0,0,0,0.02);
+               }
+               .audio-container audio {
+                 width: 100%;
+                 height: 60px;
+                 border-radius: 6px;
+               }
+               .output-section {
+                 margin-bottom: 20px;
+                 padding: 15px;
+                 border-radius: 20px;
+                 background: rgba(255,255,255,0.5);
+                 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+               }
+               .input-section {
+                 padding: 20px;
+                 background: rgba(0,150,136,0.05);
+                 border-radius: 20px;
+                 margin-top: 20px;
+               }
+               .section-title {
+                 color: #00695c;
+                 font-weight: bold;
+                 margin-bottom: 10px;
+                 font-size: 1.1em;
+               }
+               """) as app:
+
+    gr.HTML("<div style='text-align:center;overflow:hidden;padding:20px;'><h1 style='color:#00695c;'>🌐 SynthScope 🎨</h1><p style='color:#666;'>Search, Visualize, and Listen to Information</p></div>")
+
+    # Output Section
+    with gr.Column(elem_classes="output-section"):
+        gr.HTML("<div class='section-title'>📊 Search Results</div>")
+
+        # Text and Image in a row
         with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("<h4>Google Search Result</h4>")
-                text_output = gr.Markdown(height=300)
+                gr.HTML("<h4 style='color:#00695c; margin-bottom:10px;'>📝 Text Summary</h4>")
+                text_output = gr.Markdown(height=320, container=True)
             with gr.Column(scale=1):
-                gr.Markdown("<h4>Search Result Image</h4>")
-                image_output = gr.Image(label="", show_label=False,height=300)
+                gr.HTML("<h4 style='color:#00695c; margin-bottom:10px;'>🎨 Generated Image</h4>")
+                image_output = gr.Image(label="", show_label=False, height=320, container=True)
+
+        # Audio in its own row with proper spacing
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("<h4 style='color:#00695c; margin-bottom:10px;'>🔊 Audio Narration</h4>")
+                audio_output = gr.Audio(
+                    label="",
+                    type="filepath",
+                    show_label=False,
+                    elem_classes="audio-container",
+                    interactive=False
+                )
+
+    # Input Section
+    with gr.Column(elem_classes="input-section"):
+        gr.HTML("<div class='section-title'>🔧 Controls</div>")
 
-        with gr.Column():
-            with gr.Row():
-                text_input = gr.Textbox(label="Query Field", placeholder="Type in your search query")
-                radio_input = gr.Radio(label="Select Search Result Image Style", choices=["Comic", "Cartoon", "3D", "Anime", "Ghibli", "Victorian"]) 
+        with gr.Row():
+            with gr.Column(scale=2):
+                text_input = gr.Textbox(
+                    label="🔍 Search Query",
+                    placeholder="Enter your search query here...",
+                    lines=2
+                )
+            with gr.Column(scale=1):
+                dropdown_input = gr.Dropdown(
+                    label="👤Select Voice",
+                    choices=["Kore", "Zephyr", "Orus", "Fenrir", "Charon", "Umbriel", "Schedar", "Iapetus", "Puck", "Gacrux"],
+                    value="Kore"
+                )
+            with gr.Column(scale=1):
+                radio_input = gr.Radio(
+                    label="🎨 Image Style",
+                    choices=["Comic", "Cartoon", "3D", "Anime", "Ghibli", "Victorian", "Movie", "Star Wars", "Marvel"],
+                    value="Comic"
+                )
 
-            with gr.Row():          
-                btn = gr.Button("Run SynthScope")
-                clear_btn = gr.ClearButton([text_input, radio_input, text_output, image_output], value="Clear")
+        with gr.Row():
+            with gr.Column(scale=1):
+                btn = gr.Button(
+                    "🚀 Run SynthScope",
+                    variant="primary",
+                    size="lg"
+                )
+            with gr.Column(scale=1):
+                clear_btn = gr.ClearButton(
+                    [text_input, radio_input, text_output, image_output, audio_output],
+                    value="🗑️ Clear All",
+                    variant="secondary",
+                    size="lg"
+                )
 
-    btn.click(fn=GoogleSearchImageGen, inputs=[text_input, radio_input], outputs=[text_output, image_output])
+    # Event handlers
+    btn.click(
+        fn=GoogleSearchImageGen,
+        inputs=[text_input, radio_input, dropdown_input],
+        outputs=[text_output, image_output, audio_output],
+        show_progress=True
+    )
 
 if __name__ == "__main__":
     app.launch()