Update app.py

app.py

@@ -563,49 +563,56 @@ hardcoded_prompt_3 = "Create a high-energy scene of a DJ performing on a large s
 
 
 
-with gr.Blocks(theme='rawrsor1/Everforest', css=".compact {margin: 0 10px;} .full-width {width: 100%;}") as demo:
-    with gr.Row().style(equal_height=True):
+with gr.Blocks(theme='rawrsor1/Everforest') as demo:
+    with gr.Row():
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False, label="Chatbot").style(container=False)
+            chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False)
+
+        with gr.Column(scale=1):
+            gr.Markdown("<h1>Weather</h1>", elem_id="weather-sponsored-section")
+            weather_output = gr.HTML(value=fetch_local_weather())
         with gr.Column(scale=1):
-            gr.Markdown("<h2>Weather</h2>", elem_id="weather-section", css_class="compact")
-            weather_output = gr.HTML(value=fetch_local_weather(), css_class="compact")
-            gr.Markdown("<h2>Sponsored</h2>", elem_id="sponsored-section", css_class="compact")
-            image_output_1 = gr.Image(value=generate_image(hardcoded_prompt_1), width=200, height=200, css_class="compact")
-            image_output_2 = gr.Image(value=generate_image(hardcoded_prompt_2), width=200, height=200, css_class="compact")
-            image_output_3 = gr.Image(value=generate_image(hardcoded_prompt_3), width=200, height=200, css_class="compact")
+            gr.Markdown("<h2>Sponsored</h2>", elem_id="image-markdown")
+            image_output_1 = gr.Image(value=generate_image(hardcoded_prompt_1), width=300, height=300)
+            image_output_2 = gr.Image(value=generate_image(hardcoded_prompt_2), width=300, height=300)
+            image_output_3 = gr.Image(value=generate_image(hardcoded_prompt_3), width=300, height=300)
 
     def setup_ui():
         state = gr.State()
-        with gr.Row().style(equal_height=True):
+        with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("<h2>Select Style</h2>", elem_id="prompt-section", css_class="compact")
-                choice = gr.Radio(label="Select Style", choices=["Details", "Conversational"], value="Conversational", css_class="compact")
-            with gr.Column(scale=2):
-                gr.Markdown("<h2>Ask Radar</h2>", elem_id="query-section", css_class="compact")
-                chat_input = gr.Textbox(show_copy_button=True, interactive=True, show_label=False, label="ASK Radar", css_class="compact")
+              gr.Markdown("<h1>Select Style</h1>", elem_id="prompt-markdown")
+              choice = gr.Radio(label="Select Style", choices=["Details", "Conversational"], value="Conversational")
+
+            with gr.Column(scale=2):  # Larger scale for the right column
+                gr.Markdown("<h1>Ask Radar !!!</h1>", elem_id="query-markdown")
+                chat_input = gr.Textbox(show_copy_button=True, interactive=True, show_label=False, label="ASK Radar !!!")
                 chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
                 bot_msg = chat_msg.then(bot, [chatbot, choice], [chatbot, gr.Audio(interactive=False, autoplay=True)])
-                bot_msg.then(lambda: gr.Textbox(value="", interactive=True, placeholder="Ask Radar...", show_label=False, css_class="compact"), None, [chat_input])
+                bot_msg.then(lambda: gr.Textbox(value="", interactive=True, placeholder="Ask Radar!!!...", show_label=False), None, [chat_input])
                 chatbot.like(print_like_dislike, None, None)
-                clear_button = gr.Button("Clear", css_class="compact")
+                clear_button = gr.Button("Clear")
                 clear_button.click(fn=clear_textbox, inputs=None, outputs=chat_input)
+
             with gr.Column(scale=1):
-                gr.Markdown("<h2>Talk to Radar</h2>", elem_id="voice-section", css_class="compact")
-                audio_input = gr.Audio(sources=["microphone"], streaming=True, type='numpy', css_class="compact")
+                gr.Markdown("<h1>Talk to RADAR</h1>", elem_id="voice-markdown")
+                audio_input = gr.Audio(sources=["microphone"], streaming=True, type='numpy')
                 audio_input.stream(transcribe_function, inputs=[state, audio_input], outputs=[state, chat_input], api_name="SAMLOne_real_time")
 
-        with gr.Row().style(equal_height=True):
+        with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("<h2>Map</h2>", elem_id="map-section", css_class="compact")
-                location_output = gr.HTML(css_class="compact")
+                gr.Markdown("<h1>Map</h1>", elem_id="location-markdown")
+                location_output = gr.HTML()
                 bot_msg.then(show_map_if_details, [chatbot, choice], [location_output, location_output])
+
+        with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("<h2>Suggested Events</h2>", elem_id="events-section", css_class="compact")
-                events_output = gr.HTML(value=fetch_local_events(), css_class="compact")
+                gr.Markdown("<h1>Suggested Events</h1>", elem_id="events-markdown")
+                events_output = gr.HTML(value=fetch_local_events())
+
             with gr.Column(scale=1):
-                gr.Markdown("<h2>Omaha Today Headlines</h2>", elem_id="news-section", css_class="compact")
-                news_output = gr.HTML(value=fetch_local_news(), css_class="compact")
+                gr.Markdown("<h1>Omaha Today Headlines</h1>", elem_id="news-markdown")
+                news_output = gr.HTML(value=fetch_local_news())
 
     setup_ui()
 
@@ -620,96 +627,3 @@ demo.launch(share=True)
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-# with gr.Blocks(theme='rawrsor1/Everforest') as demo:
-#     with gr.Row():
-#         with gr.Column(scale=2):
-#             chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False)
-
-#         with gr.Column(scale=1):
-#             gr.Markdown("<h1>Weather & Sponsored</h1>", elem_id="weather-sponsored-section")
-#             weather_output = gr.HTML(value=fetch_local_weather())
-#             gr.Markdown("<h2>Sponsored</h2>", elem_id="image-markdown")
-#             image_output_1 = gr.Image(value=generate_image(hardcoded_prompt_1), width=300, height=300)
-#             image_output_2 = gr.Image(value=generate_image(hardcoded_prompt_2), width=300, height=300)
-#             image_output_3 = gr.Image(value=generate_image(hardcoded_prompt_3), width=300, height=300)
-
-#     def setup_ui():
-#         state = gr.State()
-#         with gr.Row():
-#             with gr.Column(scale=1):
-#               gr.Markdown("<h1>Select Style</h1>", elem_id="prompt-markdown")
-#               choice = gr.Radio(label="Select Style", choices=["Details", "Conversational"], value="Conversational")
-
-#             with gr.Column(scale=2):  # Larger scale for the right column
-#                 gr.Markdown("<h1>Ask Radar !!!</h1>", elem_id="query-markdown")
-#                 chat_input = gr.Textbox(show_copy_button=True, interactive=True, show_label=False, label="ASK Radar !!!")
-#                 chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
-#                 bot_msg = chat_msg.then(bot, [chatbot, choice], [chatbot, gr.Audio(interactive=False, autoplay=True)])
-#                 bot_msg.then(lambda: gr.Textbox(value="", interactive=True, placeholder="Ask Radar!!!...", show_label=False), None, [chat_input])
-#                 chatbot.like(print_like_dislike, None, None)
-#                 clear_button = gr.Button("Clear")
-#                 clear_button.click(fn=clear_textbox, inputs=None, outputs=chat_input)
-
-#             with gr.Column(scale=1):
-#                 gr.Markdown("<h1>Talk to RADAR</h1>", elem_id="voice-markdown")
-#                 audio_input = gr.Audio(sources=["microphone"], streaming=True, type='numpy')
-#                 audio_input.stream(transcribe_function, inputs=[state, audio_input], outputs=[state, chat_input], api_name="SAMLOne_real_time")
-
-#         with gr.Row():
-#             with gr.Column(scale=1):
-#                 gr.Markdown("<h1>Map</h1>", elem_id="location-markdown")
-#                 location_output = gr.HTML()
-#                 bot_msg.then(show_map_if_details, [chatbot, choice], [location_output, location_output])
-
-#         with gr.Row():
-#             with gr.Column(scale=1):
-#                 gr.Markdown("<h1>Suggested Events</h1>", elem_id="events-markdown")
-#                 events_output = gr.HTML(value=fetch_local_events())
-
-#             with gr.Column(scale=1):
-#                 gr.Markdown("<h1>Omaha Today Headlines</h1>", elem_id="news-markdown")
-#                 news_output = gr.HTML(value=fetch_local_news())
-
-#     setup_ui()
-
-# demo.queue()
-# demo.launch(share=True)
-
-
-
-
-
-
-
-
-