Update app.py

app.py

@@ -34,7 +34,7 @@ except Exception as e:
 # Valid milestones
 VALID_MILESTONES = ["Foundation", "Walls Erected", "Planning", "Completed"]
 
-# Adjust the timezone to your local timezone (replace 'Asia/Kolkata' with your timezone if needed)
+# Adjust the timezone to your local timezone
 local_timezone = pytz.timezone("Asia/Kolkata")
 
 # Deterministic AI prediction with fixed confidence and percent
@@ -98,8 +98,6 @@ def process_image(image, project_name):
         try:
             content_version_result = sf.ContentVersion.create(content_version)
             content_version_id = content_version_result['id']
-
-            # Generate the public URL for the uploaded file in Salesforce
             file_url = f"https://sathkruthatechsolutionspri8-dev-ed.develop.lightning.force.com/{content_version_id}"
         except Exception as e:
             return f"Error: Failed to upload image to Salesforce - {str(e)}", "Failure", "", "", 0
@@ -161,55 +159,88 @@ def process_image(image, project_name):
             }
         }
 
-        # Get the detailed completion information based on the detected milestone
-        completed_work = "\n".join([f"{idx+1}. {task}" for idx, task in enumerate(completion_details[milestone]["completed"])])
-        not_completed_work = "\n".join([f"{idx+1}. {task}" for idx, task in enumerate(completion_details[milestone]["not_completed"])])
+        # Format the completed and not completed tasks as HTML for collapsible sections
+        completed_tasks = completion_details[milestone]["completed"]
+        not_completed_tasks = completion_details[milestone]["not_completed"]
+
+        completed_html = "".join([f'<li style="color: green;">✔ {task}</li>' for task in completed_tasks])
+        not_completed_html = "".join([f'<li style="color: red;">✘ {task}</li>' for task in not_completed_tasks])
+
+        # Create HTML for the output with collapsible sections and progress bar
+        result_html = f"""
+        <div style="font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9; border-radius: 10px;">
+            <h2 style="color: #2c3e50; text-align: center;">Project Summary</h2>
+            <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
+                <div style="text-align: center;">
+                    <h3 style="color: #34495e;">Detected Milestone</h3>
+                    <p style="font-size: 18px; font-weight: bold;">{milestone}</p>
+                </div>
+                <div style="text-align: center;">
+                    <h3 style="color: #34495e;">Completion</h3>
+                    <progress value="{percent_complete}" max="100" style="width: 200px; height: 20px;"></progress>
+                    <p>{percent_complete}%</p>
+                </div>
+                <div style="text-align: center;">
+                    <h3 style="color: #34495e;">Confidence Score</h3>
+                    <p style="font-size: 18px; font-weight: bold;">{confidence_score * 100}%</p>
+                    <small>The AI is {confidence_score * 100}% confident that this image represents the {milestone} stage.</small>
+                </div>
+            </div>
+
+            <h3 style="color: #2c3e50;">Milestone Timeline</h3>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <span style="color: {'#2ecc71' if milestone == 'Planning' else '#bdc3c7'};">Planning</span>
+                <span style="color: {'#2ecc71' if milestone == 'Foundation' else '#bdc3c7'};">Foundation</span>
+                <span style="color: {'#2ecc71' if milestone == 'Walls Erected' else '#bdc3c7'};">Walls Erected</span>
+                <span style="color: {'#2ecc71' if milestone == 'Completed' else '#bdc3c7'};">Completed</span>
+            </div>
+
+            <details style="margin-bottom: 20px;">
+                <summary style="color: #2c3e50; font-weight: bold;">Completed Tasks</summary>
+                <ul style="padding-left: 20px;">
+                    {completed_html}
+                </ul>
+            </details>
+
+            <details style="margin-bottom: 20px;">
+                <summary style="color: #2c3e50; font-weight: bold;">Not Completed Tasks</summary>
+                <ul style="padding-left: 20px;">
+                    {not_completed_html}
+                </ul>
+            </details>
+        </div>
+        """
 
         # Adjust the current time to local timezone with proper ISO 8601 format
         now = datetime.now(local_timezone)
-        # Format the datetime with a colon in the timezone offset (e.g., +05:30)
         local_time = now.strftime("%Y-%m-%dT%H:%M:%S") + now.strftime("%z")[:-2] + ":" + now.strftime("%z")[-2:]
 
-        # Create the Salesforce record with the image URL and AI prediction
+        # Create the Salesforce record
         record = {
             "Name__c": project_name,
             "Current_Milestone__c": milestone,
             "Completion_Percentage__c": percent_complete,
-            "Last_Updated_On__c": local_time,  # Corrected format for Salesforce
+            "Last_Updated_On__c": local_time,
             "Upload_Status__c": "Success",
-            "Comments__c": f"{milestone} with {confidence_score*100}% confidence",  # Removed "AI Prediction:"
+            "Comments__c": f"{milestone} with {confidence_score*100}% confidence",
             "Last_Updated_Image__c": file_url
         }
 
-        # Upload the record to Salesforce
         try:
             sf.Construction__c.create(record)
         except Exception as e:
             return f"Error: Failed to update Salesforce - {str(e)}", "Failure", "", "", 0
 
-        # Return the detailed result in the desired format
-        result = f"""
-Completed:
-
-{completed_work}
-
-Not Completed:
-
-{not_completed_work}
-
-Confidence Score: {confidence_score * 100}%
-        """
-
-        return result, "Success", milestone, f"Confidence Score: {confidence_score}", f"{percent_complete}%"
+        return result_html, "Success", milestone, f"Confidence Score: {confidence_score}", f"{percent_complete}%"
 
     except Exception as e:
         return f"Error: {str(e)}", "Failure", "", "", "0%"
 
-# Gradio UI with added styling
+# Gradio UI with enhanced styling
 with gr.Blocks(css="""
     .gradio-container {
         background-color: #f0f4f8;
-        font-family: Arial;
+        font-family: Arial, sans-serif;
     }
     .title {
         color: #2c3e50;
@@ -229,19 +260,41 @@ with gr.Blocks(css="""
     .gradio-container .button {
         display: block;
         margin: 0 auto;
+        background-color: #3498db;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+    .gradio-container .button:hover {
+        background-color: #2980b9;
+    }
+    progress::-webkit-progress-value {
+        background-color: #2ecc71;
+        border-radius: 5px;
+    }
+    progress::-webkit-progress-bar {
+        background-color: #ecf0f1;
+        border-radius: 5px;
+    }
+    details summary {
+        cursor: pointer;
+        padding: 10px;
+        background-color: #ecf0f1;
+        border-radius: 5px;
     }
-    .result-textbox {
-        white-space: pre-wrap !important;
-        text-align: left !important;
+    details ul {
+        margin-top: 10px;
     }
 """) as demo:
-    gr.Markdown("<h1 class='title'></h1>")
+    gr.Markdown("<h1 class='title'>Construction Progress Analyzer</h1>")
     with gr.Row():
         image_input = gr.Image(type="filepath", label="Upload Construction Site Photo (JPG/PNG, ≤ 20MB)")
         project_name_input = gr.Textbox(label="Project Name (Required)", placeholder="e.g. Project_12345")
 
     submit_button = gr.Button("Process Image")
-    output_text = gr.Textbox(label="Result", elem_classes="result-textbox")
+    output_html = gr.HTML(label="Result")  # Changed to HTML for richer output
     upload_status = gr.Textbox(label="Upload Status")
     milestone = gr.Textbox(label="Detected Milestone")
     confidence = gr.Textbox(label="Confidence Score")
@@ -250,7 +303,7 @@ with gr.Blocks(css="""
     submit_button.click(
         fn=process_image,
         inputs=[image_input, project_name_input],
-        outputs=[output_text, upload_status, milestone, confidence, progress]
+        outputs=[output_html, upload_status, milestone, confidence, progress]
     )
 
 demo.launch(share=True)