Update app.py

app.py

@@ -145,18 +145,76 @@ def chat_about_image(message, chat_history):
         logger.error(f"Error during chat: {str(e)}")
         return "", chat_history + [(message, f"Error: {str(e)}")]
 
+
+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;
+}
+.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;
+}
+.chatbot {
+    border: 1px solid #bdc3c7;
+    border-radius: 10px;
+    padding: 1rem;
+    height: 400px;
+    overflow-y: auto;
+}
+"""
+
 # Create the Gradio interface
-with gr.Blocks() as iface:
-    gr.Markdown("# Construction Image Analyzer with Chat")
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
+    gr.HTML(
+        """
+        <div class="container">
+            <div class="header">
+                <h1>🏗️ Construction Image Analyzer with AI Chat</h1>
+            </div>
+            <p class="subheader">Upload a construction site image, analyze it for issues, and chat with AI about the findings.</p>
+        </div>
+        """
+    )
+    
     with gr.Row():
         with gr.Column(scale=1):
-            image_input = gr.Image(type="pil", label="Upload Construction Image")
-            analyze_button = gr.Button("Analyze Image")
+            image_input = gr.Image(type="pil", label="Upload Construction Image", elem_classes="image-container")
+            analyze_button = gr.Button("🔍 Analyze Image", elem_classes="analyze-button")
         with gr.Column(scale=2):
-            chatbot = gr.Chatbot(label="Analysis Results and Chat")
-    
-    msg = gr.Textbox(label="Ask a question about the image and press Enter")
-    clear = gr.Button("Clear Chat")
+            chatbot = gr.Chatbot(label="Analysis Results and Chat", elem_classes="chatbot")
+            
+    with gr.Row():
+        msg = gr.Textbox(
+            label="Ask a question about the image",
+            placeholder="Type your question here and press Enter...",
+            show_label=False,
+        )
+        clear = gr.Button("🗑️ Clear Chat", elem_classes="clear-button")
 
     analyze_button.click(
         analyze_construction_image,