update app

app.py

@@ -217,7 +217,6 @@ async def download_file(filename: str):
 @app.get("/api/download-zip")
 async def download_zip(std: str, small: str):
     """Packages both generated images into a single ZIP file and streams it."""
-    # Prevent path traversal by taking only the filename
     std_name = Path(std).name
     small_name = Path(small).name
     
@@ -574,14 +573,53 @@ async def homepage(request: Request):
       border-radius: 20px; font-size: 13px; backdrop-filter: blur(4px);
     }}
 
+    /* UPDATED LOADER ANIMATION */
     .loader {{
-      position: absolute; inset: 0; background: rgba(0,0,0,0.7);
-      display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 20;
+      position: absolute; inset: 0; 
+      background: rgba(20, 0, 10, 0.7); /* dark aubergine tint */
+      backdrop-filter: blur(6px);
+      display: none; flex-direction: column; 
+      align-items: center; justify-content: center; z-index: 20;
+    }}
+    .spinner-container {{
+      position: relative;
+      width: 65px; height: 65px;
+      margin-bottom: 25px;
+    }}
+    .spinner-ring {{
+      position: absolute;
+      width: 100%; height: 100%;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: var(--ub-orange);
+      animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    }}
+    .spinner-ring:nth-child(2) {{
+      width: 75%; height: 75%;
+      top: 12.5%; left: 12.5%;
+      border-top-color: #f77c4d; /* lighter orange */
+      animation-duration: 1.5s;
+      animation-direction: reverse;
+    }}
+    .spinner-ring:nth-child(3) {{
+      width: 50%; height: 50%;
+      top: 25%; left: 25%;
+      border-top-color: #ffffff;
+      animation-duration: 0.9s;
+    }}
+    .loader-text {{
+      font-weight: 500;
+      font-size: 15px;
+      color: #ffffff;
+      letter-spacing: 1px;
+      animation: pulse 1.5s ease-in-out infinite;
+    }}
+    @keyframes pulse {{
+      0%, 100% {{ opacity: 1; }}
+      50% {{ opacity: 0.4; }}
     }}
-    .spinner {{
-      width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.2);
-      border-top-color: var(--ub-orange); border-radius: 50%;
-      animation: spin 1s linear infinite; margin-bottom: 15px;
+    @keyframes spin {{ 
+      to {{ transform: rotate(360deg); }} 
     }}
 
     /* Examples */
@@ -599,8 +637,6 @@ async def homepage(request: Request):
     .ex-card-img-wrap img {{ height: 100%; object-fit: cover; }}
     .ex-card p {{ padding: 12px; margin: 0; font-size: 13px; color: var(--ub-muted); line-height: 1.4; }}
 
-    @keyframes spin {{ to {{ transform: rotate(360deg); }} }}
-
     @media (max-width: 900px) {{
       .layout {{ grid-template-columns: 1fr; height: auto; }}
       .panel-body-slider {{ height: 450px; flex: none; }}
@@ -712,8 +748,12 @@ async def homepage(request: Request):
             <div class="slider-handle" id="sliderHandle"></div>
 
             <div class="loader" id="loader">
-              <div class="spinner"></div>
-              <div style="font-weight: 500;">Running both models...</div>
+              <div class="spinner-container">
+                <div class="spinner-ring"></div>
+                <div class="spinner-ring"></div>
+                <div class="spinner-ring"></div>
+              </div>
+              <div class="loader-text">Running both decoders...</div>
             </div>
           </div>
         </div>