Update app.py

app.py

@@ -8,8 +8,14 @@ from gradio_multimodalchatbot import MultimodalChatbot
 from gradio.data_classes import FileData
 
 # For better security practices, retrieve sensitive information like API keys from environment variables.
+import google.generativeai as genai
+import os
+import PIL.Image
+import gradio as gr
+from gradio_multimodalchatbot import MultimodalChatbot
+from gradio.data_classes import FileData
 
-# Fetch an environment variable.
+# Retrieve API key from environment variable for security
 GOOGLE_API_KEY = os.environ.get('GOOGLE_API_KEY')
 genai.configure(api_key=GOOGLE_API_KEY)
 
@@ -80,20 +86,23 @@ def gemini(input, file, chatbot=[]):
 
     return chatbot, "", None
 
-# Define the Gradio Blocks interface
-with gr.Blocks() as demo:
-    # # Add a centered header using HTML
-    # gr.HTML("<center><h1>Gemini-PRO & Gemini-PRO-Vision API</h1></center>")
+# Custom theme with flexible height for the embedded Gradio component
+custom_theme = gr.themes.Default().add_class(
+    "gradio-app",
+    "height: 100vh; /* or vh for viewport height */"
+)
+
+# Define the Gradio Blocks interface with flexible component heights
+with gr.Blocks(theme=custom_theme) as demo:
 
     # Initialize the MultimodalChatbot component
-    multi = MultimodalChatbot(value=[], height=800)
+    multi = MultimodalChatbot(value=[], height=250)  # Adjust height as needed
 
     with gr.Row():
         # Textbox for user input with increased scale for better visibility
-        tb = gr.Textbox(scale=4, placeholder='Message CortexChatV...')
-
+        tb = gr.Textbox(scale=4, placeholder='Message CortexChatV...', height=60)  # Adjust height
         # Upload button for image files
-        up = gr.UploadButton("Attach File", file_types=["image"], scale=1)
+        up = gr.UploadButton("Attach File", file_types=["image"], scale=1, height=40)  # Adjust height
 
     # Define the behavior on text submission
     tb.submit(gemini, [tb, up, multi], [multi, tb, up])