Update app.py

app.py

@@ -273,6 +273,19 @@ body {
     text-align: center;
 }
 
+.main-content {
+    display: flex;
+    gap: 2rem;
+}
+
+.left-column {
+    flex: 2;
+}
+
+.right-column {
+    flex: 1;
+}
+
 .file-upload-container {
     border: 2px dashed var(--primary-color);
     border-radius: 10px;
@@ -350,7 +363,7 @@ body {
     margin-bottom: 0.5rem;
 }
 
-.info-box ul {
+.info-box ul, .info-box ol {
     margin: 0;
     padding-left: 1.5rem;
 }
@@ -366,14 +379,17 @@ body {
     margin-bottom: 0.5rem;
 }
 
+.how-to-use {
+    margin-top: 1rem;
+}
+
 .footer {
     margin-top: 2rem;
     padding-top: 1rem;
     border-top: 2px solid var(--primary-color);
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
-    flex-wrap: wrap;
 }
 
 .groq-badge {
@@ -384,12 +400,12 @@ body {
     font-weight: bold;
     font-size: 1rem;
     display: inline-block;
+    margin-right: 1rem;
 }
 
 .model-info {
     color: var(--text-color);
     font-size: 0.9rem;
-    margin-top: 0.5rem;
 }
 """
 
@@ -405,8 +421,8 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
         """
     )
     
-    with gr.Row():
-        with gr.Column(scale=2):
+    with gr.Row(elem_classes="main-content"):
+        with gr.Column(elem_classes="left-column"):
             gr.HTML('<h3 class="section-title">Upload Files</h3>')
             file_input = gr.File(
                 label="Upload Construction Site Images or Videos",
@@ -414,9 +430,26 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
                 type="filepath",
                 elem_classes="file-upload-container"
             )
+            
+            with gr.Row(elem_classes="how-to-use"):
+                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(scale=1):
+        with gr.Column(elem_classes="right-column"):
             gr.HTML(
                 """
                 <div class="info-box">
@@ -465,24 +498,24 @@ 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="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 class="groq-badge">Powered by Groq</div>
+            <div class="model-info">Model: llama-3.2-90b-vision-preview</div>
         </div>
         """
     )
 
+    def detect_snags(file):
+        # Implement snag detection logic here
+        pass
+
+    def chat_about_snags(message, chat_history):
+        # Implement chat functionality here
+        pass
+
+    def generate_snag_report(chat_history):
+        # Implement report generation logic here
+        pass
+
     def process_files(files):
         results = []
         for file in files:
@@ -507,7 +540,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     clear.click(lambda: None, None, chatbot, queue=False)
 
     download_button.click(
-        download_snag_report,
+        generate_snag_report,
         inputs=[chatbot],
         outputs=[report_file]
     )