update code to reconfigure formatting and layout.

app.py

@@ -41,57 +41,69 @@ from functions_mm import handle_query, transcribe_audio_original, submit_questio
 
 
 # Load environment variables.
-load_dotenv()
+# load_dotenv()
 
-# Set the model name for our LLMs.
-OPENAI_MODEL = "gpt-3.5-turbo"
-# Store the API key in a variable.
-OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+# # Set the model name for our LLMs.
+# OPENAI_MODEL = "gpt-3.5-turbo"
+# # Store the API key in a variable.
+# OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
 
 
 # In[5]:
 
+instructions="""
+# Diabetes Chatbot! 
+## Ask a question through audio recording/text. Receive a response. Translate to selected language."""
 
-instructions = """
-# Diabetes Chatbot
-#### Step 1: Record your audio OR input text (NOT both!) -- Step 2: Would you like response in new language? Choose your language  
-#### Step 3: Submit question -- Step 4: Translate response -- Step 5: Clear inputs and start fresh
-"""
 
-
-with gr.Blocks() as app2:
+with gr.Blocks(theme=theme) as app2:
     
     with gr.Row():
         gr.Markdown(instructions)
         
     with gr.Row():
-        input_audio = gr.Audio(
-            label="Ask a question about Diabetes, then click 'Transcribe audio",
-            type="filepath")
-        language_dropdown = gr.Dropdown(label="Click the middle of the dropdown bar to select translation language",
-                                        choices=list(language_map.keys()), value=default_language, type='value')
-        
-    with gr.Row():
-        transcribe_button = gr.Button("Transcribe audio")
-        submit_button = gr.Button("Submit your question")
-        translate_button = gr.Button("Translate the response")
-        clear_button = gr.Button("Clear All")
+        with gr.Column(variant="panel", scale=1):
+            # gr.Markdown("## Step 1: Enter question by recording audio")
+            input_audio = gr.Audio(
+                label="Click the microphone to record audio",
+                type="filepath",
+                waveform_options=gr.WaveformOptions(
+                    waveform_color="#01C6FF",
+                    waveform_progress_color="#0066B4",
+                    skip_length=2,
+                    show_controls=False,)
+            )
+            # gr.Markdown("## Step 2: Transcribe audio into text")
+            transcribe_button = gr.Button("Transcribe audio", variant="primary")
+            # gr.Markdown("## Step 3: Transcribed audio appears here. Or, type your question here.")
+            query_text = gr.Textbox(placeholder="transcribed audio appears here. Or, type a question here.")
+            # gr.Markdown("## Submit your question")
+            submit_button = gr.Button("Submit your question", variant="primary")
+            
+        with gr.Column(variant="panel", scale=2): 
+            response_text = gr.Textbox(label="Chatbot response")
+            response_speech = gr.Audio(label="Chatbot response speech",
+                                       waveform_options=gr.WaveformOptions(
+                                           waveform_color="#01C6FF",
+                                           waveform_progress_color="#0066B4",
+                                           skip_length=2,
+                                           show_controls=False,))
+            
+        with gr.Column(variant="panel", scale=2):
+            language_dropdown = gr.Dropdown(label="Click the middle of the dropdown bar to select translation language",
+                                            choices=list(language_map.keys()), value=default_language, type='value')
+            translate_button = gr.Button("Translate the response", variant="primary")
+            output_translated = gr.Textbox(label="Translated text")
+            output_translated_speech = gr.Audio(label="Translated speech",
+                                                waveform_options=gr.WaveformOptions(
+                                                    waveform_color="#01C6FF",
+                                                    waveform_progress_color="#0066B4",
+                                                    skip_length=2,
+                                                    show_controls=False,))
     
-    #Divide the screen horizontally into 2 columns
     with gr.Row():
-            #This column will be on the left side of screen
-            with gr.Column():
-                query_text = gr.Textbox(label="Type your question here. If there is audio recorded AND question text, app will submit question text. Click transcribe button to populate with audio text")
-                # output_original_speech = gr.Audio(label="Text to speech here")
-            
-            with gr.Column():
-                response_text = gr.Textbox(label="Chatbot response")
-                response_speech = gr.Audio(label="Chatbot response speech")    
-        
-            #This column will be on the right side of screen
-            with gr.Column():    
-                output_translated = gr.Textbox(label="Translated text")
-                output_translated_speech = gr.Audio(label="Translated speech")
+        clear_button = gr.Button("Clear All", variant="primary") 
+                
 
     # Audio transcription
     transcribe_button.click(