Update app.py

app.py

@@ -261,19 +261,68 @@ body {
     to { opacity: 1; transform: scale(1) translateY(0); }
 }
 
+/* Upload Image Box Styling */
+.gr-file-upload, .gr-image {
+    background: rgba(255,255,255,0.08) !important;
+    backdrop-filter: blur(20px) !important;
+    border: 2px dashed rgba(255,255,255,0.3) !important;
+    border-radius: 25px !important;
+    padding: 30px !important;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+.gr-file-upload::before, .gr-image::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+    animation: rotateGlow 15s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes rotateGlow {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.gr-file-upload:hover, .gr-image:hover {
+    background: rgba(255,255,255,0.12) !important;
+    border-color: rgba(102, 126, 234, 0.6) !important;
+    transform: scale(1.02) !important;
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2) !important;
+}
+
+.gr-file-upload .upload-text, .gr-image .upload-text {
+    color: rgba(255,255,255,0.9) !important;
+    font-size: 1.1em !important;
+    font-weight: 500 !important;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
+}
+
+/* Enhanced Button Styling */
 .gr-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 25%, #ff8a80 50%, #ff5722 75%, #d84315 100%) !important;
     border: none !important;
-    border-radius: 15px !important;
-    padding: 15px 40px !important;
+    border-radius: 25px !important;
+    padding: 18px 50px !important;
     color: white !important;
-    font-weight: 600 !important;
-    font-size: 1.1em !important;
+    font-weight: 700 !important;
+    font-size: 1.2em !important;
     cursor: pointer !important;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3) !important;
+    box-shadow: 0 15px 35px rgba(255, 87, 34, 0.4) !important;
     position: relative !important;
     overflow: hidden !important;
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+    margin: 25px auto !important;
+    display: block !important;
+    width: fit-content !important;
 }
 
 .gr-button::before {
@@ -283,8 +332,8 @@ body {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-    transition: left 0.6s;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    transition: left 0.6s ease;
 }
 
 .gr-button:hover::before {
@@ -292,13 +341,38 @@ body {
 }
 
 .gr-button:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4) !important;
-    background: linear-gradient(135deg, #5a6fd8 0%, #6a4c93 100%) !important;
+    transform: translateY(-5px) scale(1.05) !important;
+    box-shadow: 0 25px 50px rgba(255, 87, 34, 0.6) !important;
+    background: linear-gradient(135deg, #ff5252 0%, #d32f2f 25%, #ff7043 50%, #e64a19 75%, #bf360c 100%) !important;
 }
 
 .gr-button:active {
-    transform: translateY(0px) !important;
+    transform: translateY(-2px) scale(1.02) !important;
+    box-shadow: 0 15px 30px rgba(255, 87, 34, 0.5) !important;
+}
+
+/* Image Preview Styling */
+.gr-image img {
+    border-radius: 20px !important;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-image img:hover {
+    transform: scale(1.02) !important;
+    box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
+}
+
+/* Upload Area Text */
+.gr-file-upload div {
+    color: rgba(255,255,255,0.8) !important;
+}
+
+/* Drag and Drop Styling */
+.gr-file-upload.drag-over {
+    background: rgba(102, 126, 234, 0.2) !important;
+    border-color: rgba(102, 126, 234, 0.8) !important;
+    transform: scale(1.05) !important;
 }
 
 .gr-form {