new UI

app/index.html

@@ -684,7 +684,7 @@
             </div>
 
             <h3 class="text-xl font-bold text-white mb-2 text-center tracking-wide uppercase">
-                Nebula Processing
+                Processing
             </h3>
             <p
                 id="loading-text"
@@ -706,15 +706,16 @@
         </div>
     </div>
 
-    <div
-      id="image-modal"
-      class="hidden fixed inset-0 bg-black/95 z-[10000] flex items-center justify-center p-8 backdrop-blur-sm"
-      onclick="this.classList.add('hidden')"
-    >
-      <img
-        id="modal-image"
-        class="max-w-full max-h-full object-contain rounded shadow-2xl border border-white/10"
-      />
+    <div id="image-modal" class="hidden fixed inset-0 bg-black/95 z-[10000] flex items-center justify-center p-8 backdrop-blur-sm group" onclick="this.classList.add('hidden')">
+        <div class="absolute inset-0 pointer-events-none z-10 bg-scanline opacity-20"></div>
+        <div class="absolute inset-0 pointer-events-none z-20 border-[1px] border-white/10 m-10 rounded-lg">
+            <div class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-violet-500"></div>
+            <div class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-violet-500"></div>
+            <div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-violet-500"></div>
+            <div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-violet-500"></div>
+        </div>
+        
+        <img id="modal-image" class="max-w-full max-h-full object-contain rounded shadow-2xl border border-white/10 transition-transform duration-500 scale-95 opacity-0 modal-img-anim" />
     </div>
 
     <div

app/static/script.js

@@ -69,19 +69,19 @@ document
 document
   .getElementById("start-clustering-btn")
   .addEventListener("click", async () => {
-    if (!uploadedFiles || uploadedFiles.length === 0)
-      return alert("Please select a folder first.");
+if (!uploadedFiles || uploadedFiles.length === 0) return alert("Please select a folder first.");
+    
     if (isConfigOpen) toggleConfigBtn.click();
-
+    document.body.classList.add("warp-active");
+    
+    await new Promise(r => setTimeout(r, 800));
+    
     loadingOverlay.classList.remove("hidden");
+    document.body.classList.remove("warp-active"); 
+    
     const hero = document.getElementById("hero-landing");
-    if (hero) {
-      hero.classList.add("fade-out-overlay");
-      
-      setTimeout(() => {
-        hero.classList.add("hidden");
-    }, 800);
-}
+    if (hero) hero.classList.add("hidden");
+
     loadingText.textContent = "Uploading images...";
     loadingBar.style.width = "10%";
 
@@ -98,7 +98,7 @@ document
       }
     }
 
-    loadingText.textContent = "Analyzing (Semantic + Perceptual)...";
+    loadingText.textContent = "This may takes a few minutes...";
     loadingBar.style.width = "60%";
 
     try {
@@ -744,41 +744,42 @@ document.getElementById("toggle-lines").onchange = () => {
 
 //  Improved tab switching with proper cleanup
 document.querySelectorAll(".tab-button").forEach((btn) => {
-  btn.addEventListener("click", () => {
-    const newTab = btn.dataset.tab;
-    const oldTab = universeState.currentTab;
-
-    // Update tab UI
-    document
-      .querySelectorAll(".tab-button")
-      .forEach((b) => b.classList.remove("active"));
-    document
-      .querySelectorAll(".tab-content")
-      .forEach((c) => c.classList.add("hidden"));
-    btn.classList.add("active");
-    document.getElementById(`tab-${newTab}`).classList.remove("hidden");
-
-    // Handle universe tab specifically
-    if (oldTab === "universe" && newTab !== "universe") {
-      // Leaving universe tab - stop rotation
-      stopRotation();
-    }
+btn.addEventListener("click", () => {
+    const newTabId = btn.dataset.tab;
+    const currentActiveContent = document.querySelector(".tab-content.fade-in");
+    const newContent = document.getElementById(`tab-${newTabId}`);
 
-    universeState.currentTab = newTab;
+    document.querySelectorAll(".tab-button").forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
 
-    if (newTab === "universe") {
-      setTimeout(() => {
-        if (universeState.isInitialized) {
-          try {
+    const showNewTab = () => {
+       document.querySelectorAll(".tab-content").forEach(c => {
+           c.classList.remove("active-tab", "fade-in");
+           c.style.display = "none";
+       });
+       
+       newContent.style.display = "block";
+       requestAnimationFrame(() => {
+           newContent.classList.add("active-tab", "fade-in");
+       });
+
+       if (newTabId === "universe") {
+          universeState.currentTab = "universe";
+          setTimeout(() => {
             Plotly.Plots.resize("plotly-div");
-            if (document.getElementById("toggle-rotate").checked) {
-              startRotation();
-            }
-          } catch (e) {
-            console.error("Universe resize error:", e);
-          }
-        }
-      }, 100);
+            if (document.getElementById("toggle-rotate").checked) startRotation();
+          }, 350);
+       } else {
+          stopRotation();
+          universeState.currentTab = newTabId;
+       }
+    };
+
+    if (currentActiveContent && currentActiveContent !== newContent) {
+      currentActiveContent.classList.remove("fade-in");
+      setTimeout(showNewTab, 300);
+    } else {
+      showNewTab();
     }
   });
 });
@@ -801,6 +802,7 @@ function renderClusterList() {
 
 function loadCluster(name) {
   currentClusterName = name;
+
   document
     .querySelectorAll(".cluster-button")
     .forEach((b) => b.classList.remove("active"));
@@ -813,49 +815,73 @@ function loadCluster(name) {
   document.getElementById(
     "thumbnail-header"
   ).textContent = `Cluster Content: ${name}`;
+
   const q = qualityScores[name]?.images || [];
 
   document.getElementById("delete-btn").disabled = false;
   document.getElementById("move-btn").disabled = false;
   document.getElementById("smart-cleanup-btn").disabled = false;
 
-  currentGroups[name].forEach((path) => {
+  currentGroups[name].forEach((path, index) => {
     const url = `${API_URL}/results/${currentSessionId}/clusters/${path}`;
     const info = q.find((i) => i.path === path);
     const isBest = info?.is_best;
 
     const div = document.createElement("div");
+    
+    const delay = Math.min(index * 30, 1000);
+    div.style.animationDelay = `${delay}ms`;
+
     div.className = `thumbnail-card rounded p-2 flex flex-col relative group ${
       isBest ? "best-quality" : ""
     }`;
     div.dataset.path = path;
+
     div.innerHTML = `
-                <input type="checkbox" class="mb-1 z-20 accent-violet-500 cursor-pointer">
-                ${isBest ? '<div class="best-badge">BEST</div>' : ""}
-                ${
-                  info
-                    ? `<div class="quality-badge" style="background:${
-                        info.quality_color
-                      }">${info.scores.total.toFixed(0)}
-                    <div class="quality-details"><div class="quality-metric"><span class="quality-metric-label">Res</span><span class="quality-metric-value">${
-                      info.scores.resolution
-                    }</span></div><div class="quality-metric"><span class="quality-metric-label">Sharp</span><span class="quality-metric-value">${
-                        info.scores.sharpness
-                      }</span></div></div>
-                </div>`
-                    : ""
-                }
-                <div class="relative overflow-hidden rounded aspect-square bg-black">
-                    <img src="${url}" loading="lazy" class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110 cursor-zoom-in" onclick="event.stopPropagation();document.getElementById('modal-image').src='${url}';document.getElementById('image-modal').classList.remove('hidden')">
-                </div>
-                <div class="text-[10px] text-gray-400 truncate mt-2 font-mono text-center">${path
-                  .split("/")
-                  .pop()}</div>
-            `;
+        <input type="checkbox" class="mb-1 z-20 accent-violet-500 cursor-pointer">
+        ${isBest ? '<div class="best-badge">BEST</div>' : ""}
+        ${
+          info
+            ? `<div class="quality-badge" style="background:${
+                info.quality_color
+              }">${info.scores.total.toFixed(0)}
+            <div class="quality-details"><div class="quality-metric"><span class="quality-metric-label">Res</span><span class="quality-metric-value">${
+              info.scores.resolution
+            }</span></div><div class="quality-metric"><span class="quality-metric-label">Sharp</span><span class="quality-metric-value">${
+                info.scores.sharpness
+              }</span></div></div>
+        </div>`
+            : ""
+        }
+        <div class="relative overflow-hidden rounded aspect-square bg-black">
+            <img src="${url}" loading="lazy" class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110 cursor-zoom-in">
+        </div>
+        <div class="text-[10px] text-gray-400 truncate mt-2 font-mono text-center">${path
+          .split("/")
+          .pop()}</div>
+    `;
+
+    const img = div.querySelector('img');
+    img.onclick = (e) => {
+        e.stopPropagation();
+        const modal = document.getElementById('image-modal');
+        const modalImg = document.getElementById('modal-image');
+        
+        modalImg.src = url;
+        
+        modalImg.classList.remove('show'); 
+        modal.classList.remove('hidden');
+        
+        setTimeout(() => {
+            modalImg.classList.add('show');
+        }, 50);
+    };
+
     div.querySelector("input").onclick = (e) => {
       e.stopPropagation();
       div.classList.toggle("selected", e.target.checked);
     };
+
     gallery.appendChild(div);
   });
 }
@@ -1088,14 +1114,12 @@ document.getElementById("keep-best-btn").onclick = () => {
   }
 };
 
-//  Modal click outside properly
 document.getElementById("image-modal").onclick = (e) => {
   if (e.target.id === "image-modal") {
     e.target.classList.add("hidden");
   }
 };
 
-//  Cleanup on page unload
 window.addEventListener("beforeunload", () => {
   stopRotation();
   Object.values(chartInstances).forEach((chart) => {

app/static/styles.css

@@ -659,4 +659,79 @@ body {
 
 .text-glow-anim {
   animation: text-shimmer 4s infinite alternate;
+}
+
+.warp-overlay {
+  position: fixed;
+  inset: 0;
+  background: black;
+  z-index: 9000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.5s;
+}
+
+.warp-active .star-layer {
+  /* Kéo dài các ngôi sao thành vạch sáng */
+  transform-origin: center center;
+  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s;
+  transform: scale(5) rotate(10deg);
+  opacity: 0;
+  filter: blur(2px);
+}
+
+.warp-active .hero-content-wrapper {
+  /* Nội dung chính phóng to và biến mất */
+  animation: hyperspace-jump 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
+}
+
+@keyframes hyperspace-jump {
+  0% { transform: scale(1); opacity: 1; filter: blur(0); }
+  40% { opacity: 0.8; filter: blur(2px); }
+  100% { transform: scale(4); opacity: 0; filter: blur(20px); }
+}
+
+@keyframes sci-fi-reveal {
+  0% {
+    opacity: 0;
+    transform: translateY(20px) scale(0.9);
+    filter: brightness(2) blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: brightness(1) blur(0);
+  }
+}
+
+.thumbnail-card {
+  opacity: 0;
+  animation: sci-fi-reveal 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+.tab-content {
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-out;
+  opacity: 0;
+  transform: scale(0.98);
+  display: none; 
+}
+
+.tab-content.active-tab {
+  display: block;
+}
+
+.tab-content.fade-in {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.bg-scanline {
+  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
+  background-size: 100% 4px;
+}
+
+.modal-img-anim.show {
+  transform: scale(1);
+  opacity: 1;
+  box-shadow: 0 0 50px rgba(139, 92, 246, 0.2);
 }