Update app.py

app.py

@@ -205,7 +205,7 @@ custom_css = """
     text-overflow: ellipsis;
 }
 .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%; }
+.analyze-button { background-color: #2ecc71 !important; color: white !important; 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: 500px; overflow-y: auto; }
 .chat-input { border: 1px solid #bdc3c7; border-radius: 5px; padding: 0.5rem; width: 100%; }
@@ -228,25 +228,34 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         """
     )
     
+    # First row: Upload Image
     with gr.Row():
-        # 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")
-        
-        # 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"):
-                    msg = gr.Textbox(
-                        label="Ask about safety measures or regulations",
-                        placeholder="E.g., 'What OSHA guidelines apply to this hazard?'",
-                        show_label=False,
-                        elem_classes="chat-input"
-                    )
-                    clear = gr.Button("🗑️ Clear", elem_classes="clear-button")
+        image_input = gr.File(label="Upload Construction Site Images", file_count="multiple", type="filepath", elem_classes="image-container")
+
+    # Second row: Upload Video
+    with gr.Row():
+        video_input = gr.Video(label="Upload Construction Site Video", elem_classes="image-container")
+    
+    # Third row: Analyze Safety Hazards Button
+    with gr.Row():
+        analyze_button = gr.Button("🔍 Analyze Safety Hazards", elem_classes="analyze-button")
+    
+    # Fourth row: Chat Interface (Safety Analysis Results)
+    with gr.Row():
+        chatbot = gr.Chatbot(label="Safety Analysis Results and Expert Chat", elem_classes="chatbot")
+    
+    # Fifth row: Question Bar
+    with gr.Row():
+        msg = gr.Textbox(
+            label="Ask about safety measures or regulations",
+            placeholder="E.g., 'What OSHA guidelines apply to this hazard?'",
+            show_label=False,
+            elem_classes="chat-input"
+        )
+
+    # Sixth row: Clear Chat Button
+    with gr.Row():
+        clear = gr.Button("🗑️ Clear", elem_classes="clear-button")
 
     def update_chat(history, new_messages):
         history = history or []