Update app.py

app.py

@@ -80,34 +80,68 @@ def analyze_combined(text, threshold, image):
 # Gradio UI
 custom_css = """
 body {
-  background: linear-gradient(to right, #f9f9f9, #d4ecff);
-  font-family: 'Segoe UI', sans-serif;
+  background-color: #f5f6f8;
+  font-family: 'Inter', sans-serif;
+  color: #2e2e2e;
+  padding: 20px;
 }
+
+h1, h2, h3, h4 {
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.gradio-container {
+  max-width: 900px;
+  margin: auto;
+  padding: 30px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+}
+
 .gr-button {
-  background-color: #007BFF !important;
+  background-color: #4f46e5 !important;
   color: white !important;
+  font-weight: 500;
   border-radius: 8px !important;
-  font-weight: bold;
+  padding: 10px 20px;
 }
+
 .gr-button:hover {
-  background-color: #0056b3 !important;
+  background-color: #4338ca !important;
 }
-.gr-textbox {
+
+.gr-textbox, .gr-slider {
   border-radius: 8px !important;
-  border: 1px solid #ccc !important;
-  padding: 10px !important;
+  border: 1px solid #e5e7eb !important;
+  padding: 12px;
+  font-size: 1rem;
 }
+
 .output-textbox {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #333;
-  background-color: #f1f9ff;
-  border-radius: 8px;
-  padding: 10px;
-  border: 1px solid #007BFF;
+  font-size: 1.2rem;
+  color: #111827;
+  background-color: #f9fafb;
+  border-radius: 10px;
+  padding: 16px;
+  border: 1px solid #d1d5db;
+  animation: fadeIn 0.8s ease-in-out both;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 """
 
+
 demo = gr.Interface(
     fn=analyze_combined,
     inputs=[