Update app.py

app.py

@@ -179,10 +179,13 @@ def process_image(images, project_name, project_type):
         except Exception as e:
             return f"<p style='color: red;'>Error: Failed to update Salesforce - {str(e)}</p>", "Failure", "", "", 0
 
-        output_html = "<div style='text-align: left;'>"
+        output_html = "<div class='output'>"
         output_html += "<h3>Processing Results:</h3><ul>"
         for result in results:
-            output_html += f"<li>{result}</li>"
+            if 'Error' in result:
+                output_html += f"<li class='error'>{result}</li>"
+            else:
+                output_html += f"<li class='success'>{result}</li>"
         output_html += "</ul>"
         output_html += f"<p><strong>Project Record Created:</strong> {project_name} (Total: {total_percent_complete}%)</p>"
         output_html += f"<p><strong>Note:</strong> Only the image with the highest completion percentage is stored in Salesforce due to field length constraints.</p>"
@@ -204,29 +207,63 @@ with gr.Blocks(css="""
         font-size: 24px;
         text-align: center;
         font-weight: bold;
+        margin-bottom: 20px;
     }
     .gradio-row {
         text-align: center;
     }
     .gradio-container .output {
-        text-align: center;
+        text-align: left;
+        margin-top: 20px;
+        padding: 20px;
+        background-color: #ffffff;
+        border-radius: 8px;
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
     }
-    .gradio-container .input {
-        text-align: center;
+    .gradio-container .output h3 {
+        color: #2c3e50;
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 15px;
+    }
+    .gradio-container .output ul {
+        list-style-type: none;
+        padding: 0;
+    }
+    .gradio-container .output li {
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: #ecf0f1;
+        border-radius: 5px;
+        font-size: 14px;
+    }
+    .gradio-container .output li.success {
+        background-color: #2ecc71;
+        color: white;
+    }
+    .gradio-container .output li.error {
+        background-color: #e74c3c;
+        color: white;
     }
     .gradio-container .button {
         display: block;
-        margin: 0 auto;
+        margin: 20px auto;
         background-color: #3498db;
         color: white;
         border: none;
-        padding: 10px 20px;
+        padding: 12px 24px;
         border-radius: 5px;
         cursor: pointer;
     }
     .gradio-container .button:hover {
         background-color: #2980b9;
     }
+    .gradio-container .input {
+        text-align: center;
+    }
     progress::-webkit-progress-value {
         background-color: #2ecc71;
         border-radius: 5px;
@@ -237,7 +274,7 @@ with gr.Blocks(css="""
     }
     details summary {
         cursor: pointer;
-        padding: 10px;
+        padding: 12px;
         background-color: #ecf0f1;
         border-radius: 5px;
     }
@@ -273,4 +310,4 @@ try:
         time.sleep(10)
 except Exception as e:
     print(f"Failed to launch Gradio interface: {str(e)}")
-    raise
+    raise