Update app.py

app.py

@@ -335,12 +335,18 @@ body {
     padding-bottom: 0.5rem;
 }
 
+.info-row {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
 .info-box {
+    flex: 1;
     background-color: #E6F3FF;
     border: 1px solid var(--secondary-color);
     border-radius: 5px;
     padding: 1rem;
-    margin-bottom: 1.5rem;
     font-size: 0.9rem;
 }
 
@@ -350,7 +356,7 @@ body {
     margin-bottom: 0.5rem;
 }
 
-.info-box ul {
+.info-box ul, .info-box ol {
     margin: 0;
     padding-left: 1.5rem;
 }
@@ -373,7 +379,6 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
 }
 
 .groq-badge {
@@ -389,7 +394,6 @@ body {
 .model-info {
     color: var(--text-color);
     font-size: 0.9rem;
-    margin-top: 0.5rem;
 }
 """
 
@@ -406,16 +410,20 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     )
     
     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"
-            )
-            analyze_button = gr.Button("🔍 Detect Snags", elem_classes="analyze-button")
-        
+        gr.HTML('<h3 class="section-title">Upload Files</h3>')
+    
+    with gr.Row():
+        file_input = gr.File(
+            label="Upload Construction Site Images or Videos",
+            file_count="multiple",
+            type="filepath",
+            elem_classes="file-upload-container"
+        )
+    
+    with gr.Row():
+        analyze_button = gr.Button("🔍 Detect Snags", elem_classes="analyze-button")
+    
+    with gr.Row(elem_classes="info-row"):
         with gr.Column(scale=1):
             gr.HTML(
                 """
@@ -426,6 +434,12 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
                         <li>Videos: MP4, AVI, MOV, WEBM</li>
                     </ul>
                 </div>
+                """
+            )
+        
+        with gr.Column(scale=1):
+            gr.HTML(
+                """
                 <div class="info-box">
                     <h4>Common Snags:</h4>
                     <div>
@@ -439,22 +453,22 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
                 </div>
                 """
             )
-
-    with gr.Row():
-        gr.HTML(
-            """
-            <div class="info-box" style="margin-bottom: 1rem;">
-                <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>
-            """
-        )
+        
+        with gr.Column(scale=1):
+            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('<h3 class="section-title">Snag Detection Results</h3>')
     chatbot = gr.Chatbot(
@@ -481,15 +495,40 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML(
         """
         <div class="footer">
-            <div>
-                <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>
         """
     )
 
-    # (The rest of the code, including function definitions and event handlers, remains the same)
+    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(
+        process_files,
+        inputs=[file_input],
+        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__":