Update app.py

app.py

@@ -491,142 +491,7 @@ def generate_audio_elevenlabs(text):
         return None
 
 # Gradio Blocks interface
-with gr.Blocks() as demo:
-    gr.HTML('''
-        <style>
-            body {
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-                height: 100%;
-                width: 100%;
-                background: #141E30;  /* fallback for old browsers */
-                background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
-                background: linear-gradient(to right, #243B55, #141E30); 
-            }
-
-            #background-wrap {
-                position: fixed;
-                z-index: -1;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                overflow: hidden;
-            }
-
-            .x1 {
-                -webkit-animation: floatUp 10s infinite;
-                animation: floatUp 10s infinite;
-                -webkit-transform: translate3d(0, 0, 0);
-                transform: translate3d(0, 0, 0);
-            }
-
-            .x2 {
-                -webkit-animation: floatUp 15s infinite;
-                animation: floatUp 15s infinite;
-                -webkit-transform: translate3d(0, 0, 0);
-                transform: translate3d(0, 0, 0);
-            }
-
-            .x3 {
-                -webkit-animation: floatUp 20s infinite;
-                animation: floatUp 20s infinite;
-                -webkit-transform: translate3d(0, 0, 0);
-                transform: translate3d(0, 0, 0);
-            }
-
-            .x4 {
-                -webkit-animation: floatUp 25s infinite;
-                animation: floatUp 25s infinite;
-                -webkit-transform: translate3d(0, 0, 0);
-                transform: translate3d(0, 0, 0);
-            }
-
-            .x5 {
-                -webkit-animation: floatUp 30s infinite;
-                animation: floatUp 30s infinite;
-                -webkit-transform: translate3d(0, 0, 0);
-                transform: translate3d(0, 0, 0);
-            }
-
-            @-webkit-keyframes floatUp {
-                0% {
-                    -webkit-transform: translateY(100%);
-                    transform: translateY(100%);
-                }
-
-                100% {
-                    -webkit-transform: translateY(-100%);
-                    transform: translateY(-100%);
-                }
-            }
-
-            @keyframes floatUp {
-                0% {
-                    -webkit-transform: translateY(100%);
-                    transform: translateY(100%);
-                }
-
-                100% {
-                    -webkit-transform: translateY(-100%);
-                    transform: translateY(-100%);
-                }
-            }
-
-            .bubble {
-                position: absolute;
-                bottom: -100px;
-                -webkit-border-radius: 50%;
-                border-radius: 50%;
-                background: rgba(255, 255, 255, 0.15);
-                -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
-                box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
-            }
-
-            .bubble.x1 {
-                left: 10%;
-                width: 40px;
-                height: 40px;
-                background: rgba(255, 255, 255, 0.1);
-            }
-
-            .bubble.x2 {
-                left: 20%;
-                width: 80px;
-                height: 80px;
-                background: rgba(255, 255, 255, 0.2);
-            }
-
-            .bubble.x3 {
-                left: 25%;
-                width: 60px;
-                height: 60px;
-                background: rgba(255, 255, 255, 0.15);
-            }
-
-            .bubble.x4 {
-                left: 40%;
-                width: 50px;
-                height: 50px;
-                background: rgba(255, 255, 255, 0.3);
-            }
-
-            .bubble.x5 {
-                left: 50%;
-                width: 90px;
-                height: 90px;
-                background: rgba(255, 255, 255, 0.1);
-            }
-        </style>
-        <div id="background-wrap">
-            <div class="bubble x1"></div>
-            <div class="bubble x2"></div>
-            <div class="bubble x3"></div>
-            <div class="bubble x4"></div>
-            <div class="bubble x5"></div>
-        </div>
-    ''')
+with gr.Blocks(theme='rawrsor1/Everforest') as demo:
     with gr.Row():
         with gr.Column():
             gr.HTML('''
@@ -654,11 +519,13 @@ with gr.Blocks() as demo:
         state = gr.State()
         with gr.Row():
             with gr.Column():
-                gr.Markdown("Choose the prompt")
+                gr.Markdown("<h1>Choose the prompt</h1>", elem_id="prompt-markdown")
+
                 choice = gr.Radio(label="Choose a prompt", choices=["Details", "Conversational"], value="Details")
 
             with gr.Column():  # Larger scale for the right column
-                gr.Markdown("Enter the query / Voice Output")
+                gr.Markdown("<h1>Enter the query / Voice Output</h1>", elem_id="query-markdown")
+
                 chat_input = gr.Textbox(show_copy_button=True, interactive=True, show_label=False, label="Transcription")
                 chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
                 bot_msg = chat_msg.then(bot, [chatbot, choice], chatbot, api_name="bot_response")
@@ -668,24 +535,67 @@ with gr.Blocks() as demo:
                 clear_button.click(fn=clear_textbox, inputs=None, outputs=chat_input)
         
             with gr.Column():  # Smaller scale for the left column
-                gr.Markdown("Stream your Voice")
+                gr.Markdown("<h1>Stream your Voice</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():
-                gr.Markdown("Locate the Events")
+                gr.Markdown("<h1>Locate the Events</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("Listen the audio")
+                gr.Markdown("<h1>Listen the audio</h1>", elem_id="audio-markdown")
+
                 audio_output = gr.Audio()
                 #bot_msg.then(generate_audio_elevenlabs, chatbot, audio_output)
                 bot_msg_audio = bot_msg.then(lambda history: generate_audio_elevenlabs(history[-1][1]), chatbot, audio_output)
             with gr.Column():
+                gr.Markdown("<h1>Local Events</h1>", elem_id="events-markdown")
+
                 news_output = gr.HTML(value=fetch_local_events())
 
-    setup_ui()
+    setup_ui()    
+    
+    
+    # def setup_ui():
+    #     state = gr.State()
+    #     with gr.Row():
+    #         with gr.Column():
+    #             gr.Markdown("Choose the prompt")
+    #             choice = gr.Radio(label="Choose a prompt", choices=["Details", "Conversational"], value="Details")
+
+    #         with gr.Column():  # Larger scale for the right column
+    #             gr.Markdown("Enter the query / Voice Output")
+    #             chat_input = gr.Textbox(show_copy_button=True, interactive=True, show_label=False, label="Transcription")
+    #             chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
+    #             bot_msg = chat_msg.then(bot, [chatbot, choice], chatbot, api_name="bot_response")
+    #             bot_msg.then(lambda: gr.Textbox(value="", interactive=True, placeholder="Enter message or upload file...", 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():  # Smaller scale for the left column
+    #             gr.Markdown("Stream your Voice")
+    #             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():
+    #             gr.Markdown("Locate the Events")
+    #             location_output = gr.HTML()
+    #             bot_msg.then(show_map_if_details, [chatbot, choice], [location_output, location_output])
+    #         with gr.Column():
+    #             gr.Markdown("Listen the audio")
+    #             audio_output = gr.Audio()
+    #             #bot_msg.then(generate_audio_elevenlabs, chatbot, audio_output)
+    #             bot_msg_audio = bot_msg.then(lambda history: generate_audio_elevenlabs(history[-1][1]), chatbot, audio_output)
+    #         with gr.Column():
+    #             news_output = gr.HTML(value=fetch_local_events())
+
+    # setup_ui()
 
 demo.queue()
 demo.launch(share=True)