Update app.py

app.py

@@ -193,73 +193,73 @@ 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 updated styling
 with gr.Blocks(css="""
     .gradio-container {
-        background-color: #e9ecef;
-        font-family: Helvetica, sans-serif;
-        padding: 20px;
+        background-color: #f5f7fa;
+        font-family: Arial, sans-serif;
+        padding: 15px;
     }
     .title {
-        color: #1a3c5e;
-        font-size: 28px;
+        color: #2e86ab;
+        font-size: 26px;
         text-align: center;
         font-weight: bold;
-        margin-bottom: 20px;
+        margin-bottom: 15px;
     }
     .gradio-row {
         text-align: center;
-        margin-bottom: 15px;
+        margin-bottom: 10px;
     }
     .gradio-container .output {
-        background-color: white;
-        padding: 15px;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        background-color: #ffffff;
+        padding: 10px;
+        border-radius: 6px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
-        font-size: 16px;
+        font-size: 15px;
     }
     .gradio-container .input {
         text-align: center;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
     }
     .gradio-container .button {
         display: block;
         margin: 0 auto;
-        background: linear-gradient(to right, #2c6eb5, #1a3c5e);
+        background: linear-gradient(to right, #4a90e2, #2e86ab);
         color: white;
         border: none;
-        padding: 12px 25px;
-        border-radius: 8px;
+        padding: 10px 20px;
+        border-radius: 6px;
         cursor: pointer;
-        font-size: 16px;
+        font-size: 15px;
         transition: background 0.3s;
     }
     .gradio-container .button:hover {
-        background: linear-gradient(to right, #1a3c5e, #2c6eb5);
+        background: #2e86ab;
     }
     progress::-webkit-progress-value {
-        background-color: #27ae60;
-        border-radius: 5px;
+        background-color: #e74c3c;
+        border-radius: 4px;
     }
     progress::-webkit-progress-bar {
-        background-color: #dfe6e9;
-        border-radius: 5px;
+        background-color: #ecf0f1;
+        border-radius: 4px;
     }
     details summary {
         cursor: pointer;
-        padding: 10px;
-        background-color: #dfe6e9;
-        border-radius: 5px;
+        padding: 8px;
+        background-color: #ecf0f1;
+        border-radius: 4px;
         font-weight: bold;
         margin-bottom: 5px;
     }
     details ul {
-        margin-top: 10px;
-        padding-left: 20px;
+        margin-top: 8px;
+        padding-left: 18px;
     }
     .output strong {
-        color: #1a3c5e;
+        color: #2e86ab;
         font-weight: bold;
     }
 """) as demo: