Update app.py

app.py

@@ -246,7 +246,7 @@ body {
 .container {
     max-width: 1200px;
     margin: auto;
-    padding: 2rem;
+    padding: 1rem;
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -254,138 +254,94 @@ body {
 
 .header {
     text-align: center;
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
     border-bottom: 2px solid var(--primary-color);
 }
 
 .header h1 {
     color: var(--secondary-color);
     font-size: 2.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
 }
 
 .subheader {
     color: var(--text-color);
-    font-size: 1.1rem;
-    line-height: 1.4;
-    margin-bottom: 1.5rem;
-    text-align: center;
+    font-size: 1rem;
+    line-height: 1.2;
+    margin-bottom: 0.5rem;
 }
 
 .main-content {
     display: flex;
-    gap: 2rem;
+    gap: 1rem;
 }
 
 .left-column {
-    flex: 2;
+    flex: 3;
 }
 
 .right-column {
-    flex: 1;
+    flex: 2;
 }
 
 .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;
-}
-
-.section-title {
-    color: var(--secondary-color);
-    font-size: 1.5rem;
-    margin-top: 2rem;
+    text-align: center;
     margin-bottom: 1rem;
-    border-bottom: 2px solid var(--primary-color);
-    padding-bottom: 0.5rem;
+    background-color: #FFF5E6;
 }
 
 .info-box {
     background-color: #E6F3FF;
     border: 1px solid var(--secondary-color);
     border-radius: 5px;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
     font-size: 0.9rem;
 }
 
 .info-box h4 {
     color: var(--secondary-color);
     margin-top: 0;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
 }
 
 .info-box ul, .info-box ol {
     margin: 0;
-    padding-left: 1.5rem;
+    padding-left: 1.25rem;
 }
 
 .tag {
     display: inline-block;
     background-color: var(--primary-color);
     color: white;
-    padding: 0.25rem 0.5rem;
+    padding: 0.15rem 0.3rem;
     border-radius: 3px;
     font-size: 0.8rem;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
 }
 
-.how-to-use {
-    margin-top: 1rem;
+.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;
 }
 
 .footer {
-    margin-top: 2rem;
-    padding-top: 1rem;
+    margin-top: 1rem;
+    padding-top: 0.5rem;
     border-top: 2px solid var(--primary-color);
     display: flex;
     justify-content: flex-start;
@@ -395,21 +351,20 @@ body {
 .groq-badge {
     background-color: var(--secondary-color);
     color: white;
-    padding: 8px 15px;
+    padding: 4px 8px;
     border-radius: 5px;
     font-weight: bold;
-    font-size: 1rem;
+    font-size: 0.9rem;
     display: inline-block;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
 }
 
 .model-info {
     color: var(--text-color);
-    font-size: 0.9rem;
+    font-size: 0.8rem;
 }
 """
 
-# Create the Gradio interface
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     gr.HTML(
         """
@@ -423,7 +378,7 @@ 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.HTML('<h3 class="section-title">Upload Files</h3>')
+            gr.Markdown("### Upload Files")
             file_input = gr.File(
                 label="Upload Construction Site Images or Videos",
                 file_count="multiple",
@@ -431,7 +386,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
                 elem_classes="file-upload-container"
             )
             
-            with gr.Row(elem_classes="how-to-use"):
+            with gr.Row():
                 gr.HTML(
                     """
                     <div class="info-box">
@@ -472,28 +427,6 @@ 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(
         """
@@ -505,47 +438,15 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
     )
 
     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:
-            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
+        # Placeholder for snag detection logic
+        return "Snag detection results would appear here."
 
     analyze_button.click(
-        process_files,
+        detect_snags,
         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(
-        generate_snag_report,
-        inputs=[chatbot],
-        outputs=[report_file]
+        outputs=[gr.Textbox(label="Detection Results")]
     )
 
-# Launch the app
 if __name__ == "__main__":
     try:
         iface.launch(debug=True)