Update app.py

app.py

@@ -559,34 +559,119 @@ def generate_image(prompt):
 hardcoded_prompt_1="Give a high quality photograph of a great looking red 2026 toyota coupe against a skyline setting in th night, michael mann style in omaha enticing the consumer to buy this product"
 hardcoded_prompt_2 = "Create a vibrant poster of Nebraska with beautiful weather, featuring picturesque landscapes, clear skies, and the word 'Nebraska' prominently displayed."
 hardcoded_prompt_3 = "Create a high-energy scene of a DJ performing on a large stage with vibrant lights, colorful lasers, a lively dancing crowd, and various electronic equipment in the background."
+
+
+
+
+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.Column(scale=2):
+            chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False, label="Chatbot").style(container=False)
+        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")
+
+    def setup_ui():
+        state = gr.State()
+        with gr.Row().style(equal_height=True):
+            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")
+                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])
+                chatbot.like(print_like_dislike, None, None)
+                clear_button = gr.Button("Clear", css_class="compact")
+                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")
+                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.Column(scale=1):
+                gr.Markdown("<h2>Map</h2>", elem_id="map-section", css_class="compact")
+                location_output = gr.HTML(css_class="compact")
+                bot_msg.then(show_map_if_details, [chatbot, choice], [location_output, location_output])
+            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")
+            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")
+
+    setup_ui()
+
+demo.queue()
+demo.launch(share=True)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
 
 # with gr.Blocks(theme='rawrsor1/Everforest') as demo:
 #     with gr.Row():
-#         chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False)
-#         with gr.Column():
-#             weather_output = gr.HTML(value=fetch_local_weather())
+#         with gr.Column(scale=2):
+#             chatbot = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False)
 
-#         with gr.Column():
-#             gr.Markdown("<h1>Sponsored</h1>", elem_id="image-markdown")
+#         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():
+#             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():  # Larger scale for the right column
-#                 gr.Markdown("<h1>Ask Radar !!!</h1>", elem_id="query-markdown")
 
+#             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)])
@@ -594,92 +679,32 @@ hardcoded_prompt_3 = "Create a high-energy scene of a DJ performing on a large s
 #                 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():  # Smaller scale for the left column
-#                 gr.Markdown("<h1>Talk to RADAR</h1>", elem_id="voice-markdown")
 
+#             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():
+#             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.Column():
-#             #     gr.Markdown("<h1>Listen to the audio</h1>", elem_id="audio-markdown")
-#             #     audio_output = gr.Audio()
-#             #     bot_msg_audio = bot_msg.then(lambda history: generate_audio_elevenlabs(history[-1][1]), chatbot, audio_output)
-#         with gr.Row():   
-            
-#             with gr.Column():
+
+#         with gr.Row():
+#             with gr.Column(scale=1):
 #                 gr.Markdown("<h1>Suggested Events</h1>", elem_id="events-markdown")
-#                 news_output = gr.HTML(value=fetch_local_events())
-                     
-#             with gr.Column():
+#                 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()    
+
+#     setup_ui()
 
 # demo.queue()
 # 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)
-