Update app.py

app.py

@@ -145,11 +145,11 @@ def process_image(images, project_name, project_type):
     try:
         if not images:
             logging.warning("No images uploaded")
-            return "<p style='color: red;'>Error: Please upload at least one image.</p>", "Pending", "", "", ""
+            return "<p style='color: red;'>Error: Please upload at least one image.</p>", "Pending", "", "", 0
 
         if not project_name:
             logging.warning("Project name missing")
-            return "<p style='color: red;'>Error: Project Name is required.</p>", "Pending", "", "", ""
+            return "<p style='color: red;'>Error: Project Name is required.</p>", "Pending", "", "", 0
 
         results = []
         image_urls = []
@@ -219,7 +219,7 @@ def process_image(images, project_name, project_type):
 
         if not results:
             logging.warning("No images processed successfully")
-            return "<p style='color: red;'>Error: No images were successfully processed.</p>", "Failure", "", "", ""
+            return "<p style='color: red;'>Error: No images were successfully processed.</p>", "Failure", "", "", 0
 
         total_percent_complete = round(sum(all_percentages) / len(all_percentages), 2)
         all_milestones_str = ", ".join(all_milestones)
@@ -250,7 +250,7 @@ def process_image(images, project_name, project_type):
             logging.info(f"Salesforce record created for project {project_name}")
         except Exception as e:
             logging.error(f"Failed to create Salesforce record: {str(e)}")
-            return f"<p style='color: red;'>Error: Failed to update Salesforce - {str(e)}</p>", "Failure", "", "", ""
+            return f"<p style='color: red;'>Error: Failed to update Salesforce - {str(e)}</p>", "Failure", "", "", 0
 
         # Format output
         output_html = "<div class='output'>"
@@ -271,8 +271,107 @@ def process_image(images, project_name, project_type):
         output_html += f"<p><strong>Note:</strong> Only the image with the highest completion percentage is stored in Salesforce.</p>"
         output_html += "</div>"
 
-        return output_html, "Success", "", "", ""
+        return output_html, "Success", "", f"Max Confidence: {max_confidence}", f"{total_percent_complete}%"
 
     except Exception as e:
         logging.error(f"Processing failed: {str(e)}")
-        return f"<p style='color: red;'>Error: {str(e)}</p>", "Failure", "", "", ""
+        return f"<p style='color: red;'>Error: {str(e)}</p>", "Failure", "", "", "0%"
+
+# Gradio UI
+with gr.Blocks(css="""
+    .gradio-container {
+        background-color: #f9f9f9;
+        font-family: 'Roboto', sans-serif;
+        padding: 20px;
+    }
+    .title {
+        color: #34495e;
+        font-size: 30px;
+        text-align: center;
+        font-weight: bold;
+        margin-bottom: 25px;
+        text-transform: uppercase;
+    }
+    .gradio-row {
+        text-align: center;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    .output {
+        text-align: left;
+        margin-top: 20px;
+        padding: 30px;
+        background-color: #ffffff;
+        border-radius: 15px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .output h3 {
+        color: #2c3e50;
+        font-size: 22px;
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+    .output ul {
+        list-style-type: none;
+        padding: 0;
+    }
+    .output li {
+        padding: 14px;
+        margin-bottom: 18px;
+        border-radius: 10px;
+        font-size: 16px;
+        transition: background-color 0.3s ease;
+    }
+    .output li.success {
+        background-color: #27ae60;
+        color: white;
+    }
+    .output li.error {
+        background-color: #e74c3c;
+        color: white;
+    }
+    .button {
+        display: block;
+        margin: 25px auto;
+        background-color: #3498db;
+        color: white;
+        border: none;
+        padding: 15px 30px;
+        border-radius: 10px;
+        cursor: pointer;
+        font-size: 18px;
+        transition: background-color 0.3s ease;
+    }
+    .button:hover {
+        background-color: #2980b9;
+    }
+    .input {
+        text-align: center;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+""") as demo:
+    gr.Markdown("<h1 class='title'>Construction Progress Analyzer</h1>")
+    with gr.Row():
+        project_type_input = gr.Dropdown(label="Project Type", choices=["House", "Apartment"], value="House")
+        project_name_input = gr.Textbox(label="Project Name (Required)", placeholder="e.g. Project_12345")
+    
+    image_input = gr.File(
+        file_count="multiple",
+        file_types=["image"],
+        label="Upload Construction Site Photos (JPG/PNG, ≤20MB each)"
+    )
+    submit_button = gr.Button("Process Images")
+    output_html = gr.HTML(label="Result")
+    
+    submit_button.click(
+        fn=process_image,
+        inputs=[image_input, project_name_input, project_type_input],
+        outputs=[output_html]
+    )
+
+logging.info("Launching Gradio interface")
+demo.launch()