Update app.py

app.py

@@ -246,7 +246,7 @@ body {
 .container {
     max-width: 1200px;
     margin: auto;
-    padding: 1rem;
+    padding: 2rem;
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -254,117 +254,146 @@ body {
 
 .header {
     text-align: center;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
+    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.25rem;
+    margin-bottom: 0.5rem;
 }
 
 .subheader {
     color: var(--text-color);
-    font-size: 1rem;
-    line-height: 1.2;
-    margin-bottom: 0.5rem;
+    font-size: 1.1rem;
+    line-height: 1.4;
+    margin-bottom: 1.5rem;
+    text-align: center;
 }
 
-.main-content {
-    display: flex;
-    gap: 1rem;
+.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;
 }
 
-.left-column {
-    flex: 3;
+.analyze-button:hover {
+    background-color: #E85A2A !important;
 }
 
-.right-column {
-    flex: 2;
+.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;
 }
 
-.file-upload-container {
-    border: 2px dashed var(--primary-color);
+.clear-button:hover, .download-button:hover {
+    background-color: #003D6E !important;
+}
+
+.chatbot {
+    border: 1px solid var(--border-color);
     border-radius: 10px;
     padding: 1rem;
-    text-align: center;
+    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;
+}
+
+.section-title {
+    color: var(--secondary-color);
+    font-size: 1.5rem;
+    margin-top: 2rem;
     margin-bottom: 1rem;
-    background-color: #FFF5E6;
+    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: 0.75rem;
-    margin-bottom: 1rem;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
     font-size: 0.9rem;
 }
 
 .info-box h4 {
     color: var(--secondary-color);
     margin-top: 0;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
 }
 
-.info-box ul, .info-box ol {
+.info-box ul {
     margin: 0;
-    padding-left: 1.25rem;
+    padding-left: 1.5rem;
 }
 
 .tag {
     display: inline-block;
     background-color: var(--primary-color);
     color: white;
-    padding: 0.15rem 0.3rem;
+    padding: 0.25rem 0.5rem;
     border-radius: 3px;
     font-size: 0.8rem;
-    margin-right: 0.25rem;
-    margin-bottom: 0.25rem;
-}
-
-.analyze-button {
-    background-color: var(--primary-color) !important;
-    color: white !important;
-    font-size: 1.1rem !important;
-    padding: 0.5rem 1rem !important;
-    border-radius: 5px !important;
-    width: 100%;
-    transition: background-color 0.3s ease;
-}
-
-.analyze-button:hover {
-    background-color: #E85A2A !important;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
 .footer {
-    margin-top: 1rem;
-    padding-top: 0.5rem;
+    margin-top: 2rem;
+    padding-top: 1rem;
     border-top: 2px solid var(--primary-color);
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
 }
 
 .groq-badge {
     background-color: var(--secondary-color);
     color: white;
-    padding: 4px 8px;
+    padding: 8px 15px;
     border-radius: 5px;
     font-weight: bold;
-    font-size: 0.9rem;
+    font-size: 1rem;
     display: inline-block;
-    margin-right: 0.5rem;
 }
 
 .model-info {
     color: var(--text-color);
-    font-size: 0.8rem;
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
 }
 """
 
+# Create the Gradio interface
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML(
         """
@@ -376,35 +405,18 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         """
     )
     
-    with gr.Row(elem_classes="main-content"):
-        with gr.Column(elem_classes="left-column"):
-            gr.Markdown("### Upload Files")
+    with gr.Row():
+        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"
             )
-            
-            with gr.Row():
-                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>
-                    """
-                )
-            
             analyze_button = gr.Button("🔍 Detect Snags", elem_classes="analyze-button")
         
-        with gr.Column(elem_classes="right-column"):
+        with gr.Column(scale=1):
             gr.HTML(
                 """
                 <div class="info-box">
@@ -427,26 +439,80 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
                 </div>
                 """
             )
+    
+    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(
+            label="Ask about detected snags or quality issues",
+            placeholder="E.g., 'What are the most critical snags detected?'",
+            show_label=False,
+            elem_classes="chat-input"
+        )
+
+    with gr.Row():
+        clear = gr.Button("🗑️ Clear Chat", elem_classes="clear-button")
+        download_button = gr.Button("📥 Download Report", elem_classes="download-button")
+
+    report_file = gr.File(label="Download Snag Detection Report")
 
     gr.HTML(
         """
         <div class="footer">
-            <div class="groq-badge">Powered by Groq</div>
-            <div class="model-info">Model: llama-3.2-90b-vision-preview</div>
+            <div>
+                <div class="groq-badge">Powered by Groq</div>
+                <div class="model-info">Model: llama-3.2-90b-vision-preview</div>
+            </div>
+            <div class="info-box" style="margin-bottom: 0;">
+                <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>
         </div>
         """
     )
 
-    def detect_snags(file):
-        # Placeholder for snag detection logic
-        return "Snag detection results would appear here."
+    def process_files(files):
+        results = []
+        for file in files:
+            result = detect_snags(file)
+            results.append((file.name, result))
+        return results
+
+    def update_chat(history, new_messages):
+        history = history or []
+        for title, content in new_messages:
+            history.append((None, f"File: {title}\n\n{content}"))
+        return history
 
     analyze_button.click(
-        detect_snags,
+        process_files,
         inputs=[file_input],
-        outputs=[gr.Textbox(label="Detection Results")]
+        outputs=[chatbot],
+        postprocess=lambda x: update_chat(chatbot.value, x)
+    )
+
+    msg.submit(chat_about_snags, [msg, chatbot], [msg, chatbot])
+    clear.click(lambda: None, None, chatbot, queue=False)
+
+    download_button.click(
+        download_snag_report,
+        inputs=[chatbot],
+        outputs=[report_file]
     )
 
+# Launch the app
 if __name__ == "__main__":
     try:
         iface.launch(debug=True)