feat: add animations

app.py

@@ -207,7 +207,7 @@ def format_loading_html():
 
 def format_result_html(caption):
     return f"""
-    <div style="
+    <div class="result-animation" style="
         text-align: center; 
         padding: 30px; 
         border: 2px solid #4F46E5; 
@@ -282,12 +282,10 @@ def predict(image):
 js_head = """
 <script>
 function showToast(message, type) {
-    // Create Toast Element
     const toast = document.createElement("div");
     toast.className = "toast";
     toast.innerText = message;
     
-    // Color Logic
     if (type === 'error') {
         toast.style.backgroundColor = "#EF4444"; // Red
         toast.style.color = "#FFFFFF";
@@ -298,10 +296,8 @@ function showToast(message, type) {
     
     document.body.appendChild(toast);
     
-    // Remove after animation/timeout
     setTimeout(() => {
         toast.classList.add('hiding');
-        // Wait for fadeOut animation to finish before removing
         toast.addEventListener('animationend', () => toast.remove());
     }, 2500);
 }
@@ -323,7 +319,6 @@ function copyToClipboard(text) {
 function openModal() {
     const modal = document.getElementById("custom-api-modal");
     modal.classList.remove("hidden");
-    // Force a reflow if needed, but usually removing hidden is enough
 }
 
 function closeModal() {
@@ -341,7 +336,17 @@ document.addEventListener("click", function(e) {
 
 custom_css = """
 body { background-color: #111827; }
-.container { max-width: 800px; margin: auto; padding-top: 20px; }
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.container { 
+    max-width: 800px; 
+    margin: auto; 
+    padding-top: 20px; 
+}
+
 .header { text-align: center; margin-bottom: 30px; }
 .header h1 { color: #818CF8; font-size: 2.5rem; }
 .header p { color: #9CA3AF; }
@@ -352,6 +357,27 @@ body { background-color: #111827; }
 }
 .loading-box { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 
+button {
+    transition: all 0.2s ease-in-out !important;
+}
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+}
+button:active {
+    transform: translateY(0);
+}
+
+@keyframes popIn {
+    0% { opacity: 0; transform: scale(0.9); }
+    70% { transform: scale(1.02); }
+    100% { opacity: 1; transform: scale(1); }
+}
+
+.result-animation {
+    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
 @keyframes slideUpFadeIn {
     from { opacity: 0; transform: translate(-50%, 100%); }
     to { opacity: 1; transform: translate(-50%, 0); }
@@ -366,7 +392,7 @@ body { background-color: #111827; }
     position: fixed;
     bottom: 30px;
     left: 50%;
-    transform: translate(-50%, 0); /* Center horizontally */
+    transform: translate(-50%, 0);
     padding: 12px 24px;
     border-radius: 8px;
     z-index: 10000;
@@ -388,10 +414,9 @@ body { background-color: #111827; }
     background-color: rgba(0,0,0,0.8);
     z-index: 9999;
     backdrop-filter: blur(5px);
-    display: flex; /* Centering */
+    display: flex; 
     justify-content: center;
     align-items: center;
-    
     transition: opacity 0.2s ease-in-out;
 }
 
@@ -411,6 +436,7 @@ body { background-color: #111827; }
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     color: #F3F4F6;
     position: relative;
+    animation: popIn 0.3s ease-out forwards;
 }
 
 /* Styled HTML Buttons to look like Gradio */
@@ -420,8 +446,9 @@ body { background-color: #111827; }
     font-weight: 600;
     cursor: pointer;
     border: none;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s, transform 0.1s;
 }
+.cutom-btn:active { transform: scale(0.95); }
 
 .btn-close {
     background: transparent;
@@ -434,7 +461,7 @@ body { background-color: #111827; }
 .btn-close:hover { color: #F3F4F6; }
 
 .btn-primary {
-    background-color: #F97316; /* Gradio Orange-ish */
+    background-color: #F97316; 
     color: white;
     width: 100%;
     margin-top: 20px;