Update app.py

app.py

@@ -196,18 +196,19 @@ def process_image(images, project_name, project_type):
     except Exception as e:
         return f"<p style='color: red;'>Error: {str(e)}</p>", "Failure", "", "", "0%"
 
-# Gradio UI with enhanced styling
+# Gradio UI with new updated styling
 with gr.Blocks(css="""
     .gradio-container {
-        background-color: #f0f4f8;
-        font-family: Arial, sans-serif;
+        background-color: #e7f4f9;
+        font-family: 'Roboto', sans-serif;
     }
     .title {
-        color: #2c3e50;
-        font-size: 24px;
+        color: #34495e;
+        font-size: 30px;
         text-align: center;
         font-weight: bold;
-        margin-bottom: 20px;
+        margin-bottom: 25px;
+        text-transform: uppercase;
     }
     .gradio-row {
         text-align: center;
@@ -215,30 +216,30 @@ with gr.Blocks(css="""
     .gradio-container .output {
         text-align: left;
         margin-top: 20px;
-        padding: 20px;
+        padding: 25px;
         background-color: #ffffff;
-        border-radius: 8px;
-        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         max-width: 800px;
         margin-left: auto;
         margin-right: auto;
     }
     .gradio-container .output h3 {
         color: #2c3e50;
-        font-size: 20px;
+        font-size: 22px;
         font-weight: bold;
-        margin-bottom: 15px;
+        margin-bottom: 20px;
     }
     .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;
+        padding: 12px;
+        margin-bottom: 15px;
+        border-radius: 8px;
+        font-size: 16px;
+        transition: background-color 0.3s ease;
     }
     .gradio-container .output li.success {
         background-color: #2ecc71;
@@ -254,9 +255,11 @@ with gr.Blocks(css="""
         background-color: #3498db;
         color: white;
         border: none;
-        padding: 12px 24px;
-        border-radius: 5px;
+        padding: 15px 30px;
+        border-radius: 10px;
         cursor: pointer;
+        font-size: 18px;
+        transition: background-color 0.3s ease;
     }
     .gradio-container .button:hover {
         background-color: #2980b9;
@@ -264,23 +267,6 @@ with gr.Blocks(css="""
     .gradio-container .input {
         text-align: center;
     }
-    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: 12px;
-        background-color: #ecf0f1;
-        border-radius: 5px;
-    }
-    details ul {
-        margin-top: 10px;
-    }
 """) as demo:
     gr.Markdown("<h1 class='title'>Construction Progress Analyzer</h1>")