Update app.py

app.py

@@ -129,6 +129,7 @@ def chat_about_image(message, chat_history):
         return "", chat_history + [(message, f"Error: {str(e)}")]
 
 
+# Custom CSS for improved styling
 # Custom CSS for improved styling
 custom_css = """
 .container { max-width: 1000px; margin: auto; padding-top: 1.5rem; }
@@ -137,10 +138,12 @@ custom_css = """
 .subheader { color: #34495e; font-size: 1.2rem; margin-bottom: 2rem; }
 .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; }
+.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; }
+.input-row > div:first-child { flex-grow: 1; margin-right: 10px; }
 """
 
 # Create the Gradio interface
@@ -162,14 +165,16 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
             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():
-                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 Chat", elem_classes="clear-button")
+            with gr.Row(elem_classes="input-row"):
+                with gr.Column(scale=9):
+                    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):
         history = history or []