Update app.py

app.py

@@ -204,14 +204,14 @@ custom_css = """
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.image-container { border: 2px dashed #3498db; border-radius: 10px; padding: 1rem; text-align: center; }
-.analyze-button { background-color: #2ecc71 !important; color: white !important; }
+.image-container { border: 2px dashed #3498db; border-radius: 10px; padding: 1rem; text-align: center; margin-bottom: 1rem; }
+.analyze-button { background-color: #2ecc71 !important; color: white !important; margin-top: 10px; width: 100%; }
 .clear-button { background-color: #e74c3c !important; color: white !important; width: 100px !important; }
-.chatbot { border: 1px solid #bdc3c7; border-radius: 10px; padding: 1rem; height: 400px; overflow-y: auto; }
-.chat-input { border: 1px solid #bdc3c7; border-radius: 5px; padding: 0.5rem; }
+.chatbot { border: 1px solid #bdc3c7; border-radius: 10px; padding: 1rem; height: 500px; overflow-y: auto; }
+.chat-input { border: 1px solid #bdc3c7; border-radius: 5px; padding: 0.5rem; width: 100%; }
 .groq-badge { position: fixed; bottom: 10px; right: 10px; background-color: #f39c12; color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold; }
-.chat-container { display: flex; flex-direction: column; }
-.input-row { display: flex; align-items: center; margin-top: 10px; }
+.chat-container { display: flex; flex-direction: column; height: 100%; }
+.input-row { display: flex; align-items: center; margin-top: 10px; justify-content: space-between; }
 .input-row > div:first-child { flex-grow: 1; margin-right: 10px; }
 """
 
@@ -229,11 +229,14 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     )
     
     with gr.Row():
-        with gr.Column(scale=1):
+        # Input section
+        with gr.Column(scale=1, min_width=300):  # Adjust width of input column
             image_input = gr.File(label="Upload Construction Site Images", file_count="multiple", type="filepath", elem_classes="image-container")
             video_input = gr.Video(label="Upload Construction Site Video", elem_classes="image-container")
             analyze_button = gr.Button("🔍 Analyze Safety Hazards", elem_classes="analyze-button")
-        with gr.Column(scale=2):
+        
+        # Chat output section
+        with gr.Column(scale=2):  # Larger scale for the chat output section
             with gr.Group(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(label="Safety Analysis Results and Expert Chat", elem_classes="chatbot")
                 with gr.Row(elem_classes="input-row"):