Update app.py

app.py

@@ -135,14 +135,15 @@ custom_css = """
 .container { max-width: 1000px; margin: auto; padding-top: 1.5rem; }
 .header { text-align: center; margin-bottom: 2rem; }
 .header h1 { color: #2c3e50; font-size: 2.5rem; }
-.subheader { color: #34495e; font-size: 1.2rem; margin-bottom: 2rem; }
+.subheader { color: #34495e; font-size: 1.2rem; margin-bottom: 2rem; text-align: center; }
 .image-container { border: 2px dashed #3498db; border-radius: 10px; padding: 1rem; text-align: center; }
 .analyze-button { background-color: #2ecc71 !important; color: white !important; }
 .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; }
 .groq-badge { position: fixed; bottom: 10px; right: 10px; background-color: #f39c12; color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold; }
-.input-row { display: flex; align-items: center; }
+.chat-container { display: flex; flex-direction: column; }
+.input-row { display: flex; align-items: center; margin-top: 10px; }
 .input-row > div:first-child { flex-grow: 1; margin-right: 10px; }
 """
 
@@ -164,16 +165,15 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
             image_input = gr.Image(type="pil", label="Upload Construction Site Image", elem_classes="image-container")
             analyze_button = gr.Button("🔍 Analyze Safety Hazards", elem_classes="analyze-button")
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot(label="Safety Analysis Results and Expert Chat", elem_classes="chatbot")
-            with gr.Row(elem_classes="input-row"):
-                with gr.Column(scale=9):
+            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"
                     )
-                with gr.Column(scale=1):
                     clear = gr.Button("🗑️ Clear", elem_classes="clear-button")
 
     def update_chat(history, new_message):