Update app.py

app.py

@@ -228,31 +228,155 @@ def download_snag_report(chat_history):
     
     return temp_file_path
 
-# Custom CSS for improved styling
 custom_css = """
-.container { max-width: 1200px; margin: auto; padding-top: 1.5rem; }
-.header { text-align: center; margin-bottom: 1rem; }
-.header h1 { color: #2c3e50; font-size: 2.5rem; }
-.subheader { 
-    color: #34495e; 
-    font-size: 1rem; 
-    line-height: 1.2; 
-    margin-bottom: 1.5rem; 
-    text-align: center; 
-    padding: 0 15px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+:root {
+    --primary-color: #FF6B35;
+    --secondary-color: #004E89;
+    --background-color: #F0F4F8;
+    --text-color: #333333;
+    --border-color: #CCCCCC;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.container {
+    max-width: 1200px;
+    margin: auto;
+    padding: 2rem;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.header h1 {
+    color: var(--secondary-color);
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.subheader {
+    color: var(--text-color);
+    font-size: 1.1rem;
+    line-height: 1.4;
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+.file-upload-container {
+    border: 2px dashed var(--primary-color);
+    border-radius: 10px;
+    padding: 2rem;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    background-color: #FFF5E6;
+}
+
+.analyze-button {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+    font-size: 1.1rem !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: 5px !important;
+    width: 100%;
+    transition: background-color 0.3s ease;
+}
+
+.analyze-button:hover {
+    background-color: #E85A2A !important;
+}
+
+.clear-button, .download-button {
+    background-color: var(--secondary-color) !important;
+    color: white !important;
+    font-size: 1rem !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: 5px !important;
+    transition: background-color 0.3s ease;
+}
+
+.clear-button:hover, .download-button:hover {
+    background-color: #003D6E !important;
+}
+
+.chatbot {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 1rem;
+    height: 400px;
+    overflow-y: auto;
+    background-color: white;
+}
+
+.chat-input {
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    padding: 0.75rem;
+    width: 100%;
+    font-size: 1rem;
+}
+
+.groq-badge {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    background-color: var(--secondary-color);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-weight: bold;
+    font-size: 0.9rem;
+}
+
+.section-title {
+    color: var(--secondary-color);
+    font-size: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    border-bottom: 2px solid var(--primary-color);
+    padding-bottom: 0.5rem;
+}
+
+.info-box {
+    background-color: #E6F3FF;
+    border: 1px solid var(--secondary-color);
+    border-radius: 5px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+}
+
+.info-box h4 {
+    color: var(--secondary-color);
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+.info-box ul {
+    margin: 0;
+    padding-left: 1.5rem;
+}
+
+.tag {
+    display: inline-block;
+    background-color: var(--primary-color);
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
 }
-.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; 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%; }
-.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; 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; }
 """
 
 # Create the Gradio interface
@@ -261,31 +385,54 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         """
         <div class="container">
             <div class="header">
-                <h1>🔍 Construction Site Snag Detector</h1>
+                <h1>🏗️ Construction Site Snag Detector</h1>
+                <p class="subheader">Enhance quality control and project management with AI-powered snag detection. Upload images or videos of your construction site to identify defects, unfinished work, and quality issues.</p>
             </div>
-            <p class="subheader">Enhance quality control and project management with AI-powered snag detection using Llama 3.2 90B Vision and expert chat assistance.</p>
-        </div>
         """
     )
     
     with gr.Row():
-        file_input = gr.File(
-            label="Upload Construction Site Images or Videos",
-            file_count="multiple",
-            type="filepath",
-            elem_classes="file-container"
-        )
-    
-    with gr.Row():
-        analyze_button = gr.Button("🔍 Detect Snags", elem_classes="analyze-button")
+        with gr.Column(scale=2):
+            gr.HTML('<h3 class="section-title">Upload Files</h3>')
+            file_input = gr.File(
+                label="Upload Construction Site Images or Videos",
+                file_count="multiple",
+                type="filepath",
+                elem_classes="file-upload-container"
+            )
+            analyze_button = gr.Button("🔍 Detect Snags", elem_classes="analyze-button")
+        
+        with gr.Column(scale=1):
+            gr.HTML(
+                """
+                <div class="info-box">
+                    <h4>Supported File Types:</h4>
+                    <ul>
+                        <li>Images: JPG, JPEG, PNG, BMP</li>
+                        <li>Videos: MP4, AVI, MOV, WEBM</li>
+                    </ul>
+                </div>
+                <div class="info-box">
+                    <h4>Common Snags:</h4>
+                    <div>
+                        <span class="tag">Cracks</span>
+                        <span class="tag">Leaks</span>
+                        <span class="tag">Uneven Surfaces</span>
+                        <span class="tag">Incomplete Work</span>
+                        <span class="tag">Poor Finishes</span>
+                        <span class="tag">Misalignments</span>
+                    </div>
+                </div>
+                """
+            )
     
-    with gr.Row():
-        chatbot = gr.Chatbot(
-            label="Snag Detection Results and Expert Chat",
-            elem_classes="chatbot",
-            show_share_button=False,
-            show_copy_button=False
-        )
+    gr.HTML('<h3 class="section-title">Snag Detection Results</h3>')
+    chatbot = gr.Chatbot(
+        label="Snag Detection Results and Expert Chat",
+        elem_classes="chatbot",
+        show_share_button=False,
+        show_copy_button=False
+    )
     
     with gr.Row():
         msg = gr.Textbox(
@@ -301,6 +448,27 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
 
     report_file = gr.File(label="Download Snag Detection Report")
 
+    gr.HTML(
+        """
+        <div class="info-box">
+            <h4>How to use:</h4>
+            <ol>
+                <li>Upload images or videos of your construction site</li>
+                <li>Click "Detect Snags" to analyze the files</li>
+                <li>Review the detected snags in the chat area</li>
+                <li>Ask follow-up questions about the snags or request more information</li>
+                <li>Download a comprehensive report for your records</li>
+            </ol>
+        </div>
+        """
+    )
+
+    gr.HTML(
+        """
+        <div class="groq-badge">Powered by Groq</div>
+        """
+    )
+
     def process_files(files):
         results = []
         for file in files:
@@ -311,7 +479,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     def update_chat(history, new_messages):
         history = history or []
         for title, content in new_messages:
-            history.append((None, f"{title}\n\n{content}"))
+            history.append((None, f"File: {title}\n\n{content}"))
         return history
 
     analyze_button.click(
@@ -330,12 +498,6 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         outputs=[report_file]
     )
 
-    gr.HTML(
-        """
-        <div class="groq-badge">Powered by Groq</div>
-        """
-    )
-
 # Launch the app
 if __name__ == "__main__":
     try: