new UI

app/static/Universe3D.js

@@ -7,28 +7,28 @@ import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"
 let scene, camera, renderer, composer, controls;
 let raycaster, pointer;
 let clusterParticles = [];
-let isAnimating = true;
 
 // Cấu hình màu sắc Sci-fi
 const PALETTE = {
   noise: 0x333333,
-  cluster: [0x8b5cf6, 0x3b82f6, 0x10b981, 0xf59e0b, 0xec4899, 0x06b6d4], // Violet, Blue, Green, Amber, Pink, Cyan
-  highlight: 0xffffff,
+  cluster: [0x8b5cf6, 0x3b82f6, 0x10b981, 0xf59e0b, 0xec4899, 0x06b6d4],
+  highlight: 0xffaa00, // Màu vàng cam khi search trúng
 };
 
 export function initUniverse(containerId, data, onNodeClick) {
   const container = document.getElementById(containerId);
-  container.innerHTML = ""; // Xóa nội dung cũ (Plotly div)
+  container.innerHTML = "";
+  clusterParticles = []; // Reset mảng chứa hạt
 
   // 1. Scene & Camera Setup
   scene = new THREE.Scene();
-  scene.fog = new THREE.FogExp2(0x05010a, 0.002); // Sương mù vũ trụ tối
+  scene.fog = new THREE.FogExp2(0x05010a, 0.002);
 
   camera = new THREE.PerspectiveCamera(
     60,
     container.clientWidth / container.clientHeight,
     0.1,
-    2000
+    3000
   );
   camera.position.set(0, 40, 60);
 
@@ -38,14 +38,14 @@ export function initUniverse(containerId, data, onNodeClick) {
   renderer.toneMapping = THREE.ReinhardToneMapping;
   container.appendChild(renderer.domElement);
 
-  // 2. Controls (Orbit)
+  // 2. Controls
   controls = new OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
   controls.dampingFactor = 0.05;
   controls.autoRotate = true;
   controls.autoRotateSpeed = 0.5;
 
-  // 3. Post-Processing (BLOOM EFFECT - Quan trọng nhất cho giao diện Sci-fi)
+  // 3. Bloom Effect
   const renderScene = new RenderPass(scene, camera);
   const bloomPass = new UnrealBloomPass(
     new THREE.Vector2(window.innerWidth, window.innerHeight),
@@ -54,76 +54,97 @@ export function initUniverse(containerId, data, onNodeClick) {
     0.85
   );
   bloomPass.threshold = 0.1;
-  bloomPass.strength = 1.2; // Độ mạnh của luồng sáng
+  bloomPass.strength = 1.2;
   bloomPass.radius = 0.5;
 
   composer = new EffectComposer(renderer);
   composer.addPass(renderScene);
   composer.addPass(bloomPass);
 
-  // 4. Lighting
-  const ambientLight = new THREE.AmbientLight(0x404040);
-  scene.add(ambientLight);
-
-  // Ánh sáng tâm điểm
+  // 4. Môi trường
+  scene.add(new THREE.AmbientLight(0x404040));
   const pointLight = new THREE.PointLight(0xffffff, 1, 100);
   scene.add(pointLight);
-
-  // 5. Starfield Background (Hạt bụi không gian)
   createStarfield();
 
-  // 6. Generate Clusters (Biến dữ liệu thành các thiên hà nhỏ)
+  // 5. Tạo các điểm dữ liệu
   generateGalaxy(data);
 
-  // 7. Raycaster (Để click/hover)
+  // 6. Raycaster
   raycaster = new THREE.Raycaster();
   pointer = new THREE.Vector2();
 
-  // Event Listeners
+  // Events
   window.addEventListener("resize", onWindowResize);
   container.addEventListener("mousemove", onPointerMove);
   container.addEventListener("click", (event) =>
     onMouseClick(event, onNodeClick)
   );
 
+  // --- SEARCH EVENT ---
+  window.addEventListener("universe-search", (e) => {
+    const { filenames } = e.detail;
+    controls.autoRotate = false; // Dừng quay để tập trung
+
+    clusterParticles.forEach((sprite) => {
+      const name = sprite.userData.filename;
+      const path = sprite.userData.id;
+
+      const isMatch = filenames.some((f) => path.includes(f) || name === f);
+
+      if (isMatch) {
+        // Highlight: Màu Vàng, Scale To, Rõ
+        sprite.material.color.setHex(PALETTE.highlight);
+        sprite.scale.setScalar(sprite.userData.originalScale * 2.5);
+        sprite.material.opacity = 1;
+      } else {
+        // Dim: Màu tối, Scale nhỏ, Mờ
+        sprite.material.color.setHex(0x111111);
+        sprite.scale.setScalar(sprite.userData.originalScale * 0.5);
+        sprite.material.opacity = 0.1;
+      }
+    });
+  });
+
+  // --- RESET EVENT ---
+  window.addEventListener("universe-search-reset", () => {
+    controls.autoRotate = true; // Quay lại
+    clusterParticles.forEach((sprite) => {
+      // Trả về màu và kích thước gốc đã lưu
+      sprite.material.color.setHex(sprite.userData.originalColor);
+      sprite.scale.setScalar(sprite.userData.originalScale);
+      sprite.material.opacity = 0.9;
+    });
+  });
+
   animate();
 }
 
 function createStarfield() {
   const geometry = new THREE.BufferGeometry();
-  const count = 2000;
+  const count = 1500;
   const positions = new Float32Array(count * 3);
-
-  for (let i = 0; i < count * 3; i++) {
-    positions[i] = (Math.random() - 0.5) * 400; // Rải rác rộng
-  }
+  for (let i = 0; i < count * 3; i++)
+    positions[i] = (Math.random() - 0.5) * 500;
 
   geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-
-  // Material tạo đốm sáng nhỏ
   const material = new THREE.PointsMaterial({
     size: 0.5,
-    color: 0x8b5cf6, // Tím nhạt
+    color: 0x8b5cf6,
     transparent: true,
     opacity: 0.4,
-    sizeAttenuation: true,
   });
-
-  const starField = new THREE.Points(geometry, material);
-  scene.add(starField);
+  scene.add(new THREE.Points(geometry, material));
 }
 
 function generateGalaxy(data) {
-  // Group dữ liệu theo cluster
   const clusters = {};
   data.forEach((p) => {
     if (!clusters[p.cluster]) clusters[p.cluster] = [];
     clusters[p.cluster].push(p);
   });
 
-  // Tạo vật liệu chung cho các node (Sprite phát sáng)
-  const textureLoader = new THREE.TextureLoader();
-  // Tạo texture tròn phát sáng bằng code (không cần file ảnh)
+  // Tạo Texture tròn bằng Canvas
   const canvas = document.createElement("canvas");
   canvas.width = 32;
   canvas.height = 32;
@@ -142,25 +163,23 @@ function generateGalaxy(data) {
     const group = clusters[key];
     const isNoise = key === "Noise/Unique";
 
-    // Chọn màu
+    // Chọn màu cho Cluster
     let colorHex = isNoise
       ? PALETTE.noise
       : PALETTE.cluster[index % PALETTE.cluster.length];
+
+    // Tạo Material gốc cho cluster này
     const material = new THREE.SpriteMaterial({
       map: spriteTexture,
       color: colorHex,
       transparent: true,
       opacity: 0.9,
-      blending: THREE.AdditiveBlending, // Chế độ hòa trộn ánh sáng
+      blending: THREE.AdditiveBlending,
     });
 
-    group.forEach((item, i) => {
-      const sprite = new THREE.Sprite(material);
+    group.forEach((item) => {
+      const sprite = new THREE.Sprite(material.clone()); // Clone để có thể đổi màu riêng từng hạt
 
-      // LOGIC SẮP XẾP MỚI:
-      // Thay vì dùng toạ độ x,y,z gốc (Plotly), ta có thể scale chúng rộng ra
-      // hoặc sắp xếp lại thành các "Hệ mặt trời" nếu muốn.
-      // Ở đây giữ nguyên toạ độ AI trả về nhưng nhân hệ số scale để thoáng hơn
       const scaleFactor = 1.5;
       sprite.position.set(
         item.x * scaleFactor,
@@ -168,101 +187,109 @@ function generateGalaxy(data) {
         item.z * scaleFactor
       );
 
-      // Scale kích thước: Ảnh Best to hơn, Noise nhỏ hơn
-      const size = item.quality && item.is_best ? 3.5 : isNoise ? 0.8 : 2.0;
+      // Tính kích thước
+      let size = 2.0;
+      if (item.quality && item.is_best) size = 3.5;
+      if (isNoise) size = 0.8;
+
       sprite.scale.set(size, size, 1);
 
-      // Gán dữ liệu vào object để truy xuất khi click
+      // [QUAN TRỌNG] Lưu thông tin gốc để Restore sau khi Search
       sprite.userData = {
         id: item.path,
         cluster: item.cluster,
         filename: item.filename,
         quality: item.quality,
+        originalColor: colorHex, // <--- Lưu màu gốc
+        originalScale: size, // <--- Lưu size gốc
       };
 
       scene.add(sprite);
       clusterParticles.push(sprite);
     });
 
-    // Vẽ đường nối (Constellation lines) cho các node trong cùng 1 cluster
+    // Vẽ đường nối
     if (!isNoise && group.length > 1) {
-      const lineGeo = new THREE.BufferGeometry();
-      const points = group.map(
-        (p) => new THREE.Vector3(p.x * 1.5, p.y * 1.5, p.z * 1.5)
+      const lineGeo = new THREE.BufferGeometry().setFromPoints(
+        group.map((p) => new THREE.Vector3(p.x * 1.5, p.y * 1.5, p.z * 1.5))
       );
-      lineGeo.setFromPoints(points);
       const lineMat = new THREE.LineBasicMaterial({
         color: colorHex,
         transparent: true,
         opacity: 0.15,
       });
-      const line = new THREE.Line(lineGeo, lineMat);
-      scene.add(line);
+      scene.add(new THREE.Line(lineGeo, lineMat));
     }
   });
 }
 
-// Xử lý Highlight khi Hover
 function onPointerMove(event) {
   const rect = renderer.domElement.getBoundingClientRect();
   pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
   pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
 
-  // Hover logic đơn giản:
   raycaster.setFromCamera(pointer, camera);
   const intersects = raycaster.intersectObjects(clusterParticles, false);
 
   if (intersects.length > 0) {
     document.body.style.cursor = "pointer";
-    // Có thể gọi hàm show tooltip ở script chính tại đây
-    const data = intersects[0].object.userData;
-    window.dispatchEvent(new CustomEvent("universe-hover", { detail: data }));
+    window.dispatchEvent(
+      new CustomEvent("universe-hover", {
+        detail: intersects[0].object.userData,
+      })
+    );
   } else {
     document.body.style.cursor = "default";
     window.dispatchEvent(new CustomEvent("universe-unhover"));
   }
 }
 
-// Xử lý Click
 function onMouseClick(event, callback) {
   raycaster.setFromCamera(pointer, camera);
   const intersects = raycaster.intersectObjects(clusterParticles, false);
 
   if (intersects.length > 0) {
     const target = intersects[0].object;
-    const data = target.userData;
 
-    // Hiệu ứng Flash khi click
+    // Hiệu ứng Flash
     target.material.color.setHex(0xffffff);
     setTimeout(() => {
-      // Trả về màu cũ (cần lưu màu gốc nếu muốn hoàn hảo, ở đây demo set lại màu)
-      // Trong thực tế nên lưu originalColor vào userData
-    }, 300);
+      // Trả về màu cũ dựa trên userData
+      target.material.color.setHex(target.userData.originalColor);
+    }, 200);
 
-    // Bay camera tới mục tiêu (Cinematic Fly-to)
     flyTo(target.position, () => {
-      if (callback) callback(data);
+      if (callback) callback(target.userData);
     });
   }
 }
 
 function flyTo(targetPos, onComplete) {
-  // Tạm dừng auto rotate
   controls.autoRotate = false;
-
-  const offset = new THREE.Vector3(10, 10, 10); // Khoảng cách zoom
-  const endPos = new THREE.Vector3().copy(targetPos).add(offset);
-
-  // Dùng GSAP hoặc tween đơn giản. Ở đây code tay logic lerp đơn giản trong animate loop
-  // Để đơn giản cho demo, ta set target của controls:
-  controls.target.copy(targetPos);
-  // (Muốn mượt hơn cần thư viện TWEEN.js, nhưng controls.update sẽ lo phần damping)
-
-  if (onComplete) onComplete();
+  const startTarget = controls.target.clone();
+  const duration = 1000;
+  const startTime = performance.now();
+
+  function animateFly(time) {
+    const elapsed = time - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    const ease = 1 - Math.pow(1 - progress, 3); // Cubic ease out
+
+    // Interpolate controls target
+    controls.target.lerpVectors(startTarget, targetPos, 0.1);
+
+    if (progress < 1) {
+      requestAnimationFrame(animateFly);
+    } else {
+      if (onComplete) onComplete();
+    }
+  }
+  requestAnimationFrame(animateFly);
 }
 
 function onWindowResize() {
   const container = renderer.domElement.parentElement;
+  if (!container) return;
   camera.aspect = container.clientWidth / container.clientHeight;
   camera.updateProjectionMatrix();
   renderer.setSize(container.clientWidth, container.clientHeight);
@@ -271,8 +298,6 @@ function onWindowResize() {
 
 function animate() {
   requestAnimationFrame(animate);
-  controls.update(); // Cần cho Damping và AutoRotate
-
-  // Render qua Composer (để có Bloom) thay vì renderer thường
+  controls.update();
   composer.render();
 }

app/static/script.js

@@ -1,6 +1,7 @@
-import { initUniverse } from './Universe3D.js';
+import { initUniverse } from "./Universe3D.js";
 const API_URL = "/api";
 
+// --- UI CONFIG TOGGLE ---
 const toggleConfigBtn = document.getElementById("toggle-config-btn");
 const controlPanel = document.getElementById("control-panel");
 const configArrow = document.getElementById("config-arrow");
@@ -23,39 +24,26 @@ toggleConfigBtn.addEventListener("click", () => {
   }
 });
 
+// --- GLOBAL STATE ---
 let uploadedFiles = null;
 let currentSessionId = null;
 let currentGroups = {};
 let qualityScores = {};
 let currentClusterName = null;
-
-//  Centralized chart management
-const chartInstances = {
-  summary: null,
-  distribution: null,
-  distNew: null,
-  ratioNew: null,
-};
-
-//  Enhanced universe state management
 let universeState = {
-  data: [],
-  isRotating: false,
-  rotationAnimationFrame: null,
-  originalColors: [],
-  lastSearchColors: null,
-  lastSearchSizes: null,
-  lastSearchLineColors: null,
-  lastSearchLineWidths: null,
-  isSearchActive: false,
-  isInitialized: false,
+  data: [], // Dữ liệu 3D sẽ được lưu ở đây
   currentTab: "summary",
+  isSearchActive: false,
 };
 
+const chartInstances = { distNew: null, ratioNew: null };
 const loadingOverlay = document.getElementById("loading-overlay");
 const loadingText = document.getElementById("loading-text");
 const loadingBar = document.getElementById("loading-bar");
 
+// --- EVENT LISTENERS ---
+
+// 1. File Input
 document
   .getElementById("image-folder-input")
   .addEventListener("change", (e) => {
@@ -67,19 +55,21 @@ document
     }
   });
 
+// 2. Start Processing
 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));
-    
+    document.body.classList.add("warp-active"); // Hiệu ứng Warp Speed
+
+    await new Promise((r) => setTimeout(r, 800));
+
     loadingOverlay.classList.remove("hidden");
-    document.body.classList.remove("warp-active"); 
-    
+    document.body.classList.remove("warp-active");
+
     const hero = document.getElementById("hero-landing");
     if (hero) hero.classList.add("hidden");
 
@@ -92,14 +82,13 @@ if (!uploadedFiles || uploadedFiles.length === 0) return alert("Please select a
     for (const f of uploadedFiles) {
       fd.append("files", f, f.webkitRelativePath || f.name);
       count++;
-      //  Smooth progress bar updates
       if (count % 5 === 0 || count === uploadedFiles.length) {
         loadingBar.style.width = `${10 + (count / uploadedFiles.length) * 40}%`;
-        await new Promise((resolve) => setTimeout(resolve, 0)); // Allow UI update
+        await new Promise((resolve) => setTimeout(resolve, 0));
       }
     }
 
-    loadingText.textContent = "This may take a few minutes";
+    loadingText.textContent = "Processing dimensions...";
     loadingBar.style.width = "60%";
 
     try {
@@ -114,7 +103,7 @@ if (!uploadedFiles || uploadedFiles.length === 0) return alert("Please select a
       qualityScores = data.quality_scores || {};
 
       loadingBar.style.width = "100%";
-      populateUI(data);
+      populateUI(data); // Gọi hàm hiển thị dữ liệu
 
       setTimeout(() => loadingOverlay.classList.add("hidden"), 500);
     } catch (e) {
@@ -123,6 +112,59 @@ if (!uploadedFiles || uploadedFiles.length === 0) return alert("Please select a
     }
   });
 
+// 3. Tab Switching
+document.querySelectorAll(".tab-button").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const newTabId = btn.dataset.tab;
+    const currentActiveContent = document.querySelector(".tab-content.fade-in");
+    const newContent = document.getElementById(`tab-${newTabId}`);
+
+    document
+      .querySelectorAll(".tab-button")
+      .forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+
+    const showNewTab = () => {
+      document.querySelectorAll(".tab-content").forEach((c) => {
+        c.classList.remove("active-tab", "fade-in");
+        c.style.display = "none";
+      });
+
+      if (newContent.classList.contains("flex")) {
+        newContent.style.display = "flex";
+      } else {
+        newContent.style.display = "block";
+      }
+
+      requestAnimationFrame(() => {
+        newContent.classList.add("active-tab", "fade-in");
+      });
+
+      if (newTabId === "universe") {
+        universeState.currentTab = "universe";
+        window.dispatchEvent(new Event("resize")); // Resize Three.js
+      } else {
+        universeState.currentTab = newTabId;
+      }
+    };
+
+    if (currentActiveContent && currentActiveContent !== newContent) {
+      currentActiveContent.classList.remove("fade-in");
+      setTimeout(showNewTab, 300);
+    } else {
+      showNewTab();
+    }
+  });
+});
+
+// 4. Search & Controls
+document.getElementById("btn-search").onclick = performSearch;
+document.getElementById("search-input").onkeypress = (e) => {
+  if (e.key === "Enter") performSearch();
+};
+
+// --- CORE FUNCTIONS ---
+
 function populateUI(data) {
   currentGroups = data.results.groups || {};
   const results = data.results;
@@ -130,347 +172,107 @@ function populateUI(data) {
   const unique = Object.keys(currentGroups).length;
   const dupes = total - unique;
 
+  // [QUAN TRỌNG] Lưu dữ liệu vào State để dùng sau này
+  if (data.universe_map) {
+    universeState.data = data.universe_map;
+  }
+
   renderStatsDashboard(data, unique, dupes);
 
+  // Ẩn/Hiện các phần UI
   const summaryContent = document.getElementById("summary-content");
   if (summaryContent) summaryContent.classList.add("hidden");
-  
+
   const summaryVisuals = document.getElementById("summary-visuals");
   if (summaryVisuals) summaryVisuals.classList.remove("hidden");
 
   if (typeof renderActionCenter === "function") {
-      renderActionCenter(unique, dupes, total);
+    renderActionCenter(unique, dupes, total);
   }
 
   renderClusterList();
-  
+
+  // Setup Download buttons
   const dlBtn = document.getElementById("download-btn");
   if (dlBtn) {
-      dlBtn.classList.remove("hidden");
-      dlBtn.onclick = () => (window.location.href = `${API_URL}/download-results/${currentSessionId}`);
+    dlBtn.classList.remove("hidden");
+    dlBtn.onclick = () =>
+      (window.location.href = `${API_URL}/download-results/${currentSessionId}`);
   }
-  
   const delGrpBtn = document.getElementById("delete-group-btn");
   if (delGrpBtn) delGrpBtn.classList.remove("hidden");
 
+  // Render 3D Map
   if (data.universe_map) renderUniverseMap(data.universe_map);
 
   const summaryTabBtn = document.querySelector('[data-tab="summary"]');
   if (summaryTabBtn) summaryTabBtn.click();
 }
 
-function renderStatsDashboard(data, unique, dupes) {
-  document.getElementById("stats-empty").classList.add("hidden");
-  document.getElementById("stats-content").classList.remove("hidden");
-
-  const total = data.results.total_images;
-  const saved = total ? ((dupes / total) * 100).toFixed(1) : 0;
-  const perf = data.performance || {};
-
-  document.getElementById("d-total").textContent = total;
-  document.getElementById("d-dupes").textContent = dupes;
-  document.getElementById("d-saved").textContent = `${saved}%`;
-  document.getElementById("d-clusters").textContent = unique;
-
-  if (chartInstances.distNew) {
-    chartInstances.distNew.destroy();
-    chartInstances.distNew = null;
-  }
-
-  const ctx1 = document.getElementById("chart-dist-new").getContext("2d");
-  const bins = [0, 0, 0];
-  Object.values(currentGroups).forEach((g) => {
-    if (g.length <= 2) bins[0]++;
-    else if (g.length <= 5) bins[1]++;
-    else bins[2]++;
-  });
-  chartInstances.distNew = new Chart(ctx1, {
-    type: "bar",
-    data: {
-      labels: ["Small (2)", "Medium (3-5)", "Large (6+)"],
-      datasets: [
-        {
-          label: "Count",
-          data: bins,
-          backgroundColor: "#8b5cf6",
-          borderRadius: 4,
-        },
-      ],
-    },
-    options: {
-      maintainAspectRatio: false,
-      plugins: { legend: { display: false } },
-      scales: {
-        y: { grid: { color: "#333" }, ticks: { color: "#aaa" } },
-        x: { grid: { display: false }, ticks: { color: "#aaa" } },
-      },
-    },
-  });
-
-  //  Destroy old charts properly
-  if (chartInstances.ratioNew) {
-    chartInstances.ratioNew.destroy();
-    chartInstances.ratioNew = null;
-  }
-
-  const ctx2 = document.getElementById("chart-ratio-new").getContext("2d");
-  chartInstances.ratioNew = new Chart(ctx2, {
-    type: "doughnut",
-    data: {
-      labels: ["Unique", "Duplicate"],
-      datasets: [
-        {
-          data: [unique, dupes],
-          backgroundColor: ["#10b981", "#ef4444"],
-          borderWidth: 0,
-        },
-      ],
-    },
-    options: {
-      maintainAspectRatio: false,
-      plugins: {
-        legend: { position: "right", labels: { color: "#ccc" } },
-      },
-    },
-  });
-
-  const steps = [
-    { name: "Feature Extraction", time: perf.extraction_time },
-    { name: "Semantic Clustering", time: perf.stage1_cluster_time },
-    { name: "Perceptual Hashing", time: perf.stage2_cluster_time },
-    { name: "Quality Scoring", time: perf.quality_scoring_time },
-  ];
-  const pipeHTML = steps
-    .map(
-      (s) =>
-        `<div class="pipeline-step done"><div class="flex justify-between mb-1"><span class="text-xs font-bold text-white">${
-          s.name
-        }</span><span class="text-xs text-emerald-400">${s.time?.toFixed(
-          2
-        )}s</span></div></div>`
-    )
-    .join("");
-  document.getElementById("pipeline-steps").innerHTML = pipeHTML;
-
-  document.getElementById("log-console").innerText = `[INFO] Session ID: ${
-    data.session_id
-  }\n[INFO] Total Execution Time: ${perf.total_processing_time?.toFixed(
-    2
-  )}s\n[INFO] Algorithm: ${
-    document.getElementById("algorithm").value
-  }\n[SUCCESS] Analysis complete. Found ${unique} clusters.`;
-}
-
-//  Stop rotation properly
-function stopRotation() {
-  universeState.isRotating = false;
-  if (universeState.rotationAnimationFrame) {
-    cancelAnimationFrame(universeState.rotationAnimationFrame);
-    universeState.rotationAnimationFrame = null;
-  }
-}
-
-//  Start rotation with safety checks
-function startRotation() {
-  if (universeState.currentTab !== "universe") return; // Don't rotate if not on universe tab
-  if (!universeState.isInitialized) return; // Don't rotate if not initialized
-  if (universeState.isRotating) return; // Already rotating
-
-  universeState.isRotating = true;
-  universeState.angle = universeState.angle || 0;
-  rotateLoop();
-}
-
-function rotateLoop() {
-  if (!universeState.isRotating || universeState.currentTab !== "universe") {
-    stopRotation();
-    return;
-  }
-
-  universeState.angle = (universeState.angle || 0) + 0.0015;
-  const r = 2.2;
-  const eyeX = r * Math.cos(universeState.angle);
-  const eyeY = r * Math.sin(universeState.angle);
-  const eyeZ = r * 0.9;
-
-  try {
-    Plotly.relayout("plotly-div", {
-      "scene.camera.eye": { x: eyeX, y: eyeY, z: eyeZ },
-    });
-    universeState.rotationAnimationFrame = requestAnimationFrame(rotateLoop);
-  } catch (e) {
-    console.error("Rotation error:", e);
-    stopRotation();
-  }
-}
-
 function renderUniverseMap(points) {
-    if (!points || !points.length) return;
-
-    // Hiển thị UI
-    document.getElementById("universe-empty").classList.add("hidden");
-    document.getElementById("search-ui").classList.remove("hidden");
-    document.getElementById("map-controls").classList.remove("hidden");
-
-    // Gọi Three.js Engine
-    // "plotly-div" là id thẻ div chứa bản đồ (vẫn dùng lại thẻ div cũ)
-    initUniverse("plotly-div", points, (nodeData) => {
-        // Callback khi user click vào một ngôi sao
-        if (nodeData.cluster && nodeData.cluster !== "Noise/Unique") {
-            console.log("Warping to cluster:", nodeData.cluster);
-            
-            // Chuyển tab sang Browser
-            const browserBtn = document.querySelector('[data-tab="browser"]');
-            if(browserBtn) browserBtn.click();
-            
-            // Load cluster đó lên
-            setTimeout(() => loadCluster(nodeData.cluster), 300);
-        }
-    });
-
-    // Lắng nghe sự kiện hover từ Three.js để hiện Tooltip
-    // (Vì module tách biệt nên dùng Event Dispatcher để giao tiếp)
-    window.addEventListener('universe-hover', (e) => {
-        const data = e.detail;
-        const tooltip = document.getElementById("universe-tooltip");
-        
-        // Điền dữ liệu vào tooltip
-        const imgPath = data.path.startsWith("/") ? data.path : `${API_URL}/results/${currentSessionId}/clusters/${data.path}`;
-        
-        document.getElementById("tooltip-img").src = imgPath;
-        document.getElementById("tooltip-name").textContent = data.filename;
-        document.getElementById("tooltip-cluster").textContent = data.cluster;
-        document.getElementById("tooltip-score").textContent = data.quality ? data.quality.toFixed(0) : "N/A";
-
-        tooltip.classList.remove("hidden");
-        
-        // Vị trí tooltip đơn giản theo chuột (có thể cần chỉnh offset trong CSS)
-        // Lưu ý: e.detail không có clientX/Y, nên ta dùng biến global mouse move của document nếu cần
-        // Hoặc trong code Three.js đã handle cursor pointer
-    });
-
-    // Ẩn tooltip khi chuột rời khỏi sao
-    window.addEventListener('universe-unhover', () => {
-        document.getElementById("universe-tooltip").classList.add("hidden");
-    });
-    
-    // Cập nhật vị trí tooltip theo chuột (cho mượt)
-    document.addEventListener('mousemove', (e) => {
-        const tooltip = document.getElementById("universe-tooltip");
-        if (!tooltip.classList.contains('hidden')) {
-            tooltip.style.left = (e.clientX + 20) + 'px';
-            tooltip.style.top = (e.clientY + 20) + 'px';
-        }
-    });
-}
-
-//  Improved event handling - simpler approach
-function setupInteractions() {
-  const plot = document.getElementById("plotly-div");
-  const tooltip = document.getElementById("universe-tooltip");
-
-  plot.on("plotly_hover", (d) => {
-    if (universeState.isRotating) stopRotation();
-
-    // Find the points trace (last trace, or first if no lines)
-    const pointsTraceIndex = d.points[0].curveNumber;
-    const hasLines = document.getElementById("toggle-lines").checked;
-
-    // If we have lines, points are in trace 1, otherwise trace 0
-    const expectedPointsIndex = hasLines ? 1 : 0;
-
-    if (pointsTraceIndex !== expectedPointsIndex) return;
+  if (!points || !points.length) return;
+
+  document.getElementById("universe-empty").classList.add("hidden");
+  document.getElementById("search-ui").classList.remove("hidden");
+  document.getElementById("map-controls").classList.remove("hidden");
+
+  // Khởi tạo Three.js
+  initUniverse("plotly-div", points, (nodeData) => {
+    // Callback khi Click vào sao
+    if (nodeData.cluster && nodeData.cluster !== "Noise/Unique") {
+      console.log("Warping to cluster:", nodeData.cluster);
+
+      // Chuyển tab và Load ảnh
+      const browserBtn = document.querySelector('[data-tab="browser"]');
+      if (browserBtn) browserBtn.click();
+      setTimeout(() => loadCluster(nodeData.cluster), 300);
+    }
+  });
 
-    const i = d.points[0].pointNumber;
-    if (i >= universeState.data.length) return;
+  // Tooltip Events
+  window.addEventListener("universe-hover", (e) => {
+    const data = e.detail;
+    const tooltip = document.getElementById("universe-tooltip");
 
-    const p = universeState.data[i];
-    if (!p) return;
+    const imgPath = data.path.startsWith("/")
+      ? data.path
+      : `${API_URL}/results/${currentSessionId}/clusters/${data.path}`;
 
-    document.getElementById(
-      "tooltip-img"
-    ).src = `${API_URL}/results/${currentSessionId}/clusters/${p.path}`;
-    document.getElementById("tooltip-name").textContent =
-      p.filename || "Unknown";
-    document.getElementById("tooltip-cluster").textContent = p.cluster || "N/A";
-    document.getElementById("tooltip-score").textContent = p.quality
-      ? p.quality.toFixed(0)
+    document.getElementById("tooltip-img").src = imgPath;
+    document.getElementById("tooltip-name").textContent = data.filename;
+    document.getElementById("tooltip-cluster").textContent = data.cluster;
+    document.getElementById("tooltip-score").textContent = data.quality
+      ? data.quality.toFixed(0)
       : "N/A";
 
     tooltip.classList.remove("hidden");
-
-    //  Better tooltip positioning with boundary checks
-    const moveTooltip = (e) => {
-      const rect = tooltip.getBoundingClientRect();
-      let left = e.clientX + 20;
-      let top = e.clientY + 20;
-
-      // Prevent overflow
-      if (left + rect.width > window.innerWidth) {
-        left = e.clientX - rect.width - 20;
-      }
-      if (top + rect.height > window.innerHeight) {
-        top = e.clientY - rect.height - 20;
-      }
-
-      tooltip.style.left = left + "px";
-      tooltip.style.top = top + "px";
-    };
-
-    document.onmousemove = moveTooltip;
   });
 
-  plot.on("plotly_unhover", () => {
-    tooltip.classList.add("hidden");
-    document.onmousemove = null;
-
-    if (
-      universeState.currentTab === "universe" &&
-      document.getElementById("toggle-rotate").checked
-    ) {
-      setTimeout(() => startRotation(), 100);
-    }
+  window.addEventListener("universe-unhover", () => {
+    document.getElementById("universe-tooltip").classList.add("hidden");
   });
 
-  plot.on("plotly_click", (d) => {
-    const hasLines = document.getElementById("toggle-lines").checked;
-    const expectedPointsIndex = hasLines ? 1 : 0;
-
-    if (d.points[0].curveNumber !== expectedPointsIndex) return;
-
-    const i = d.points[0].pointNumber;
-    if (i >= universeState.data.length) return;
-
-    const p = universeState.data[i];
-    if (p && p.cluster && p.cluster !== "Noise/Unique") {
-      document.querySelector('[data-tab="browser"]').click();
-      setTimeout(() => loadCluster(p.cluster), 100);
+  document.addEventListener("mousemove", (e) => {
+    const tooltip = document.getElementById("universe-tooltip");
+    if (!tooltip.classList.contains("hidden")) {
+      tooltip.style.left = e.clientX + 20 + "px";
+      tooltip.style.top = e.clientY + 20 + "px";
     }
   });
 }
 
-document.getElementById("btn-search").onclick = performSearch;
-document.getElementById("search-input").onkeypress = (e) => {
-  if (e.key === "Enter") performSearch();
-};
-
 async function performSearch() {
   const q = document.getElementById("search-input").value.trim();
+
   if (!q) {
-    //  Properly reset search state
     universeState.isSearchActive = false;
-    universeState.lastSearchColors = null;
-    universeState.lastSearchSizes = null;
-    universeState.lastSearchLineColors = null;
-    universeState.lastSearchLineWidths = null;
-    drawPlot(universeState.originalColors, null, false);
+    window.dispatchEvent(new CustomEvent("universe-search-reset"));
     return;
   }
 
   const btn = document.getElementById("btn-search");
   const originalText = btn.textContent;
-  btn.textContent = "🔍";
-  btn.style.opacity = "0.6";
+  btn.textContent = "...";
   btn.disabled = true;
 
   try {
@@ -483,162 +285,46 @@ async function performSearch() {
     if (!res.ok) throw new Error("Search failed");
 
     const data = await res.json();
+
     if (data.results?.length) {
-      const map = {};
-      data.results.forEach((r) => (map[r.filename] = r.score));
-
-      const colors = [];
-      const sizes = [];
-      const lineColors = [];
-      const lineWidths = [];
-
-      let best = null;
-      let max = -1;
-
-      universeState.data.forEach((p) => {
-        const fname = p.filename.split("/").pop();
-        if (map[fname] || map[p.filename]) {
-          colors.push("#fbbf24");
-          sizes.push(24);
-          lineColors.push("rgba(251, 191, 36, 0.8)");
-          lineWidths.push(8);
-          const score = map[fname] || map[p.filename];
-          if (score > max) {
-            max = score;
-            best = p;
-          }
-        } else {
-          colors.push("rgba(255, 255, 255, 0.1)");
-          sizes.push(8);
-          lineColors.push("transparent");
-          lineWidths.push(0);
-        }
-      });
+      const matchedFilenames = data.results.map((r) => r.filename);
+      const bestMatch = data.results[0];
 
       universeState.isSearchActive = true;
-      universeState.lastSearchColors = colors;
-      universeState.lastSearchSizes = sizes;
-      universeState.lastSearchLineColors = lineColors;
-      universeState.lastSearchLineWidths = lineWidths;
-
-      drawPlot(colors, sizes, true, lineColors, lineWidths);
-
-      if (best) {
-        stopRotation();
-        setTimeout(() => {
-          Plotly.animate(
-            "plotly-div",
-            {
-              layout: {
-                "scene.camera": {
-                  eye: { x: best.x * 0.5, y: best.y * 0.5, z: best.z * 0.5 },
-                  center: { x: best.x, y: best.y, z: best.z },
-                },
-              },
-            },
-            {
-              transition: { duration: 1200, easing: "cubic-in-out" },
-              frame: { duration: 1200 },
-            }
-          );
-        }, 100);
-      }
+
+      // Gửi event sang Three.js
+      window.dispatchEvent(
+        new CustomEvent("universe-search", {
+          detail: { filenames: matchedFilenames },
+        })
+      );
     } else {
-      alert("No matching images found.");
+      alert("No visual matches found.");
     }
   } catch (e) {
     console.error(e);
-    alert("Search Failed: " + e.message);
+    alert("Search Error: " + e.message);
   } finally {
     btn.textContent = originalText;
-    btn.style.opacity = "1";
     btn.disabled = false;
   }
 }
 
-//  Improved sync with proper color rebuild
 function syncUniverseMap(deletedPaths) {
   if (!universeState.data.length) return;
 
+  // Lọc bỏ ảnh đã xóa
   universeState.data = universeState.data.filter(
     (p) => !deletedPaths.includes(p.path)
   );
 
-  //  Rebuild colors array to match filtered data
+  // Vẽ lại vũ trụ
   if (universeState.data.length > 0) {
     renderUniverseMap(universeState.data);
   }
 }
 
-//  Toggle handlers with proper state management
-document.getElementById("toggle-rotate").onchange = (e) => {
-  if (e.target.checked && universeState.currentTab === "universe") {
-    startRotation();
-  } else {
-    stopRotation();
-  }
-};
-
-document.getElementById("toggle-lines").onchange = () => {
-  if (universeState.isSearchActive) {
-    drawPlot(
-      universeState.lastSearchColors,
-      universeState.lastSearchSizes,
-      true,
-      universeState.lastSearchLineColors,
-      universeState.lastSearchLineWidths
-    );
-  } else {
-    drawPlot(universeState.originalColors, null, false);
-  }
-};
-
-//  Improved tab switching with proper cleanup
-document.querySelectorAll(".tab-button").forEach((btn) => {
-  btn.addEventListener("click", () => {
-    const newTabId = btn.dataset.tab;
-    const currentActiveContent = document.querySelector(".tab-content.fade-in");
-    const newContent = document.getElementById(`tab-${newTabId}`);
-
-    document.querySelectorAll(".tab-button").forEach((b) => b.classList.remove("active"));
-    btn.classList.add("active");
-
-    const showNewTab = () => {
-       document.querySelectorAll(".tab-content").forEach(c => {
-           c.classList.remove("active-tab", "fade-in");
-           c.style.display = "none"; 
-       });
-       
-       if (newContent.classList.contains("flex")) {
-           newContent.style.display = "flex";
-       } else {
-           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();
-          }, 350); 
-       } else {
-          stopRotation();
-          universeState.currentTab = newTabId;
-       }
-    };
-
-    if (currentActiveContent && currentActiveContent !== newContent) {
-      currentActiveContent.classList.remove("fade-in");
-      setTimeout(showNewTab, 300);
-    } else {
-      showNewTab();
-    }
-  });
-});
+// --- CLUSTER BROWSER LOGIC (Giữ nguyên logic cũ) ---
 
 function renderClusterList() {
   const list = document.getElementById("cluster-list");
@@ -658,7 +344,6 @@ function renderClusterList() {
 
 function loadCluster(name) {
   currentClusterName = name;
-
   document
     .querySelectorAll(".cluster-button")
     .forEach((b) => b.classList.remove("active"));
@@ -668,15 +353,14 @@ function loadCluster(name) {
 
   const gallery = document.getElementById("thumbnail-gallery");
   gallery.innerHTML = "";
-  document.getElementById(
-    "thumbnail-header"
-  ).textContent = `Cluster Content: ${name}`;
+  document.getElementById("thumbnail-header").textContent = `Cluster: ${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;
+  // Enable buttons
+  ["delete-btn", "move-btn", "smart-cleanup-btn"].forEach(
+    (id) => (document.getElementById(id).disabled = false)
+  );
 
   currentGroups[name].forEach((path, index) => {
     const url = `${API_URL}/results/${currentSessionId}/clusters/${path}`;
@@ -684,10 +368,7 @@ function loadCluster(name) {
     const isBest = info?.is_best;
 
     const div = document.createElement("div");
-    
-    const delay = Math.min(index * 30, 1000);
-    div.style.animationDelay = `${delay}ms`;
-
+    div.style.animationDelay = `${Math.min(index * 30, 1000)}ms`;
     div.className = `thumbnail-card rounded p-2 flex flex-col relative group ${
       isBest ? "best-quality" : ""
     }`;
@@ -700,37 +381,26 @@ function loadCluster(name) {
           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>`
+              }">${info.scores.total.toFixed(0)}</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">
+            <img src="${url}" loading="lazy" class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110">
         </div>
         <div class="text-[10px] text-gray-400 truncate mt-2 font-mono text-center">${path
           .split("/")
           .pop()}</div>
     `;
 
-    const img = div.querySelector('img');
+    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);
+      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) => {
@@ -742,68 +412,59 @@ function loadCluster(name) {
   });
 }
 
+// --- ACTION LOGIC (Delete, Move, Keep Best) ---
+
 document.getElementById("delete-btn").onclick = async () => {
-  const selectedCards = Array.from(document.querySelectorAll(".thumbnail-card.selected"));
+  const selectedCards = Array.from(
+    document.querySelectorAll(".thumbnail-card.selected")
+  );
   const paths = selectedCards.map((c) => c.dataset.path);
+  if (!paths.length) return;
+  if (!confirm(`Delete ${paths.length} items?`)) return;
 
-  if (!paths.length) return alert("Please select images to delete.");
-  
-  if (!confirm(`Initialize deletion sequence for ${paths.length} targets?`)) return;
-
-  selectedCards.forEach(card => card.classList.add("being-deleted"));
+  selectedCards.forEach((card) => card.classList.add("being-deleted")); // Hiệu ứng lỗ đen
 
   try {
-    const [res, _] = await Promise.all([
-        fetch(`${API_URL}/delete-images`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                session_id: currentSessionId,
-                image_paths: paths,
-            }),
-        }),
-        new Promise(resolve => setTimeout(resolve, 800))
-    ]);
-
-    if (!res.ok) {
-        const errData = await res.json();
-        throw new Error(errData.detail || "Deletion failed on server.");
-    }
-    
+    const res = await fetch(`${API_URL}/delete-images`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        session_id: currentSessionId,
+        image_paths: paths,
+      }),
+    });
+    if (!res.ok) throw new Error("Server error");
     const data = await res.json();
 
-    selectedCards.forEach(card => card.remove());
-
+    selectedCards.forEach((card) => card.remove());
     if (currentClusterName && currentGroups[currentClusterName]) {
-        currentGroups[currentClusterName] = currentGroups[currentClusterName].filter(p => !paths.includes(p));
+      currentGroups[currentClusterName] = currentGroups[
+        currentClusterName
+      ].filter((p) => !paths.includes(p));
     }
-
-    syncUniverseMap(data.deleted);
-
+    syncUniverseMap(data.deleted); // Cập nhật bản đồ 3D
   } catch (e) {
-    console.error(e);
-    selectedCards.forEach(card => card.classList.remove("being-deleted"));
-    alert("Anomaly Detected: " + e.message);
+    selectedCards.forEach((card) => card.classList.remove("being-deleted"));
+    alert("Delete failed: " + e.message);
   }
 };
 
 document.getElementById("smart-cleanup-btn").onclick = async () => {
   const sel = document.querySelectorAll(".thumbnail-card.selected");
-  if (sel.length !== 1) return alert("Select exactly ONE image to keep as the best version.");
-  
+  if (sel.length !== 1) return alert("Select exactly ONE best image to keep.");
+
   const keepPath = sel[0].dataset.path;
-  const keepName = keepPath.split("/").pop();
-  
-  if (!confirm(`Keep '${keepName}' and DELETE ALL OTHERS in this cluster?`)) return;
+  if (!confirm(`Keep 1 and delete the rest of '${currentClusterName}'?`))
+    return;
 
   const allCards = Array.from(document.querySelectorAll(".thumbnail-card"));
-  const cardsToDelete = allCards.filter(card => card.dataset.path !== keepPath);
+  const cardsToDelete = allCards.filter(
+    (card) => card.dataset.path !== keepPath
+  );
+  cardsToDelete.forEach((card) => card.classList.add("being-deleted"));
 
-  cardsToDelete.forEach(card => card.classList.add("being-deleted"));
-  
   const btn = document.getElementById("smart-cleanup-btn");
   btn.disabled = true;
-  btn.textContent = "Cleaning...";
 
   try {
     const res = await fetch(`${API_URL}/smart-cleanup`, {
@@ -815,32 +476,29 @@ document.getElementById("smart-cleanup-btn").onclick = async () => {
         image_to_keep: keepPath,
       }),
     });
-    
+
     if (!res.ok) throw new Error((await res.json()).detail);
     const data = await res.json();
 
-    await new Promise(resolve => setTimeout(resolve, 800));
+    await new Promise((r) => setTimeout(r, 800)); // Đợi hiệu ứng
 
     const oldPaths = currentGroups[currentClusterName];
     currentGroups[currentClusterName] = [data.image_kept];
-    
-    const deletedPaths = oldPaths.filter(p => p !== data.image_kept);
+    const deletedPaths = oldPaths.filter((p) => p !== data.image_kept);
     syncUniverseMap(deletedPaths);
 
     loadCluster(currentClusterName);
     renderClusterList();
-
   } catch (e) {
-    cardsToDelete.forEach(card => card.classList.remove("being-deleted"));
-    alert("Smart cleanup failed: " + e.message);
+    cardsToDelete.forEach((card) => card.classList.remove("being-deleted"));
+    alert(e.message);
   } finally {
     btn.disabled = false;
-    btn.textContent = "Keep Selected & Delete Rest";
   }
 };
 
 document.getElementById("delete-group-btn").onclick = async () => {
-  if (!confirm(`Delete group ${currentClusterName}?`)) return;
+  if (!confirm(`Delete entire group ${currentClusterName}?`)) return;
   try {
     const res = await fetch(`${API_URL}/delete-group`, {
       method: "POST",
@@ -859,142 +517,68 @@ document.getElementById("delete-group-btn").onclick = async () => {
       syncUniverseMap(deletedPaths);
     }
   } catch (e) {
-    alert("Delete group failed: " + e.message);
+    alert(e.message);
   }
 };
 
-document.getElementById("move-btn").onclick = () => {
-  const paths = Array.from(
-    document.querySelectorAll(".thumbnail-card.selected")
-  ).map((c) => c.dataset.path);
-  if (!paths.length) return alert("Select images to move.");
-  const sel = document.getElementById("move-cluster-select");
-  sel.innerHTML = '<option value="__NEW__">-- New Cluster --</option>';
-  Object.keys(currentGroups).forEach((g) => {
-    if (g !== currentClusterName)
-      sel.innerHTML += `<option value="${g}">${g}</option>`;
-  });
-  document.getElementById("move-modal").classList.remove("hidden");
-};
-
-document.getElementById("move-cancel-btn").onclick = () =>
-  document.getElementById("move-modal").classList.add("hidden");
-
-document.getElementById("move-cluster-select").onchange = (e) =>
-  document
-    .getElementById("move-new-cluster-input-group")
-    .classList.toggle("hidden", e.target.value !== "__NEW__");
-
-document.getElementById("move-confirm-btn").onclick = async () => {
-  const paths = Array.from(
-    document.querySelectorAll(".thumbnail-card.selected")
-  ).map((c) => c.dataset.path);
-  let dest = document.getElementById("move-cluster-select").value;
-  if (dest === "__NEW__")
-    dest = document.getElementById("move-new-cluster-name").value.trim();
-  if (!dest) return alert("Invalid name");
-
-  document.getElementById("move-modal").classList.add("hidden");
-  try {
-    const res = await fetch(`${API_URL}/move-images`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        session_id: currentSessionId,
-        image_paths: paths,
-        destination_cluster: dest,
-      }),
-    });
-    const data = await res.json();
-    currentGroups[currentClusterName] = currentGroups[
-      currentClusterName
-    ].filter((p) => !paths.includes(p));
-    if (!currentGroups[dest]) currentGroups[dest] = [];
-    currentGroups[dest].push(
-      ...data.moved.map((p) =>
-        p.includes("/") ? p : `${dest}/${p.split("/").pop()}`
-      )
-    );
-    loadCluster(currentClusterName);
-    renderClusterList();
+// --- STATS & CHARTS ---
+function renderStatsDashboard(data, unique, dupes) {
+  document.getElementById("stats-empty").classList.add("hidden");
+  document.getElementById("stats-content").classList.remove("hidden");
 
-    //  Update universe map clusters properly
-    universeState.data.forEach((p) => {
-      const fileName = p.path.split("/").pop();
-      if (paths.some((movedPath) => movedPath.endsWith(fileName))) {
-        p.cluster = dest;
-      }
-    });
-    renderUniverseMap(universeState.data);
-  } catch (e) {
-    alert(e);
-  }
-};
+  const total = data.results.total_images;
+  const saved = total ? ((dupes / total) * 100).toFixed(1) : 0;
 
-//  Destroy old charts properly
-function renderCharts(unique, dupes, groups) {
-  if (chartInstances.summary) {
-    chartInstances.summary.destroy();
-    chartInstances.summary = null;
-  }
+  document.getElementById("d-total").textContent = total;
+  document.getElementById("d-dupes").textContent = dupes;
+  document.getElementById("d-saved").textContent = `${saved}%`;
+  document.getElementById("d-clusters").textContent = unique;
 
-  const ctx1 = document.getElementById("summary-chart").getContext("2d");
-  chartInstances.summary = new Chart(ctx1, {
+  // Chart Logic (Giản lược để code gọn)
+  if (chartInstances.ratioNew) chartInstances.ratioNew.destroy();
+  const ctx = document.getElementById("chart-ratio-new").getContext("2d");
+  chartInstances.ratioNew = new Chart(ctx, {
     type: "doughnut",
     data: {
       labels: ["Unique", "Duplicate"],
       datasets: [
         {
           data: [unique, dupes],
-          backgroundColor: ["#3b82f6", "#ef4444"],
+          backgroundColor: ["#10b981", "#ef4444"],
           borderWidth: 0,
         },
       ],
     },
     options: {
       maintainAspectRatio: false,
-      plugins: {
-        legend: { position: "bottom", labels: { color: "#ccc" } },
-      },
+      plugins: { legend: { position: "right", labels: { color: "#ccc" } } },
     },
   });
 
-  const bins = [0, 0, 0];
-  Object.values(groups).forEach((g) => {
-    if (g.length <= 2) bins[0]++;
-    else if (g.length <= 5) bins[1]++;
-    else bins[2]++;
-  });
-
-  if (chartInstances.distribution) {
-    chartInstances.distribution.destroy();
-    chartInstances.distribution = null;
-  }
-
-  const ctx2 = document.getElementById("distribution-chart").getContext("2d");
-  chartInstances.distribution = new Chart(ctx2, {
-    type: "bar",
-    data: {
-      labels: ["Small", "Medium", "Large"],
-      datasets: [{ label: "Clusters", data: bins, backgroundColor: "#8b5cf6" }],
-    },
-    options: {
-      maintainAspectRatio: false,
-      plugins: { legend: { display: false } },
-      scales: {
-        y: { grid: { color: "#333" }, ticks: { color: "#aaa" } },
-        x: { grid: { display: false }, ticks: { color: "#aaa" } },
-      },
-    },
-  });
+  // Pipeline Steps (Optional)
+  const steps = [
+    { name: "Extraction", t: data.performance?.extraction_time },
+    { name: "Clustering", t: data.performance?.stage1_cluster_time },
+    { name: "Scoring", t: data.performance?.quality_scoring_time },
+  ];
+  document.getElementById("pipeline-steps").innerHTML = steps
+    .map(
+      (s) =>
+        `<div class="pipeline-step done"><span class="text-xs text-white font-bold">${
+          s.name
+        }</span> <span class="text-xs text-emerald-400">${s.t?.toFixed(
+          2
+        )}s</span></div>`
+    )
+    .join("");
 }
 
+// --- HELPER: Action Center (High Priority Clusters) ---
 function renderActionCenter(unique, dupes, total) {
-  document.getElementById("summary-session-id").textContent = currentSessionId || "N/A";
-  
-  const savings = total > 0 ? ((dupes / total) * 100).toFixed(1) + "%" : "0%";
-  document.getElementById("summary-savings-text").textContent = savings;
-  document.getElementById("summary-impact-badge").classList.remove("hidden");
+  document.getElementById("summary-session-id").textContent =
+    currentSessionId || "N/A";
+  document.getElementById("summary-savings-text").textContent =
+    total > 0 ? ((dupes / total) * 100).toFixed(1) + "%" : "0%";
 
   document.getElementById("sum-total-img").textContent = total;
   document.getElementById("sum-dupes-img").textContent = dupes;
@@ -1007,97 +591,52 @@ function renderActionCenter(unique, dupes, total) {
     .sort((a, b) => b[1].length - a[1].length)
     .slice(0, 8);
 
-  if (sortedGroups.length === 0) {
-    grid.innerHTML = `<div class="col-span-full text-center text-gray-500 italic">No duplicate clusters found. Clean sweep!</div>`;
-    return;
-  }
-
   sortedGroups.forEach(([name, files], index) => {
-    const thumbPath = files[0]; 
-    const url = `${API_URL}/results/${currentSessionId}/clusters/${thumbPath}`;
-    
-    const isHighPriority = index < 2;
-    const count = files.length;
-    
+    const url = `${API_URL}/results/${currentSessionId}/clusters/${files[0]}`;
     const div = document.createElement("div");
-    div.className = `highlight-card rounded-xl p-4 cursor-pointer group flex flex-col gap-3 ${isHighPriority ? 'ring-1 ring-violet-500/30' : ''}`;
-    
-    const wasteLevel = Math.min(count * 10, 100);
-
+    div.className = `highlight-card rounded-xl p-4 cursor-pointer group flex flex-col gap-3`;
     div.innerHTML = `
-        <div class="flex justify-between items-start">
-            <div class="flex flex-col overflow-hidden">
-                <span class="text-white font-bold text-sm truncate w-full" title="${name}">${name}</span>
-                <span class="text-[10px] text-gray-500 font-mono">ID: ${index + 1}</span>
-            </div>
-            <span class="impact-badge text-[10px] font-bold px-2 py-1 rounded">
-                ${count} ITEMS
-            </span>
-        </div>
-        
-        <div class="highlight-img-container aspect-video w-full bg-black rounded-lg border border-[#333]">
-             <img src="${url}" class="w-full h-full object-contain opacity-80 group-hover:opacity-100 transition-opacity duration-300" loading="lazy">
-        </div>
-
-        <div class="w-full bg-[#333] h-1 rounded-full overflow-hidden mt-1">
-            <div class="bg-gradient-to-r from-violet-600 to-indigo-500 h-full" style="width: ${wasteLevel}%"></div>
-        </div>
-    `;
-
+          <div class="flex justify-between items-start">
+              <span class="text-white font-bold text-sm truncate w-full">${name}</span>
+              <span class="impact-badge text-[10px] font-bold px-2 py-1 rounded">${files.length}</span>
+          </div>
+          <div class="highlight-img-container aspect-video w-full bg-black rounded-lg border border-[#333]">
+               <img src="${url}" class="w-full h-full object-contain opacity-80 group-hover:opacity-100 transition-opacity duration-300" loading="lazy">
+          </div>
+      `;
     div.onclick = () => {
-        const browserBtn = document.querySelector('[data-tab="browser"]');
-        browserBtn.click();
-        
-        setTimeout(() => {
-            loadCluster(name);
-            document.getElementById("thumbnail-gallery").scrollTop = 0;
-        }, 150);
+      document.querySelector('[data-tab="browser"]').click();
+      setTimeout(() => loadCluster(name), 150);
     };
-
     grid.appendChild(div);
   });
 }
 
+// UI Buttons (Select All / Keep Best / Image Modal)
 document.getElementById("select-all-btn").onclick = () =>
   document.querySelectorAll(".thumbnail-card").forEach((c) => {
     c.classList.add("selected");
     c.querySelector("input").checked = true;
   });
-
 document.getElementById("deselect-all-btn").onclick = () =>
   document.querySelectorAll(".thumbnail-card").forEach((c) => {
     c.classList.remove("selected");
     c.querySelector("input").checked = false;
   });
-
 document.getElementById("keep-best-btn").onclick = () => {
   const best = qualityScores[currentClusterName]?.images.find((i) => i.is_best);
   if (best) {
-    document.querySelectorAll(".thumbnail-card").forEach((c) => {
-      c.classList.remove("selected");
-      c.querySelector("input").checked = false;
-    });
-    const bestCard = document.querySelector(`[data-path="${best.path}"]`);
-    if (bestCard) {
-      bestCard.classList.add("selected");
-      bestCard.querySelector("input").checked = true;
+    document.getElementById("deselect-all-btn").click();
+    const c = document.querySelector(`[data-path="${best.path}"]`);
+    if (c) {
+      c.classList.add("selected");
+      c.querySelector("input").checked = true;
     }
   }
 };
-
-document.getElementById("image-modal").onclick = (e) => {
-  if (e.target.id === "image-modal") {
-    e.target.classList.add("hidden");
-  }
+document.getElementById("image-modal").onclick = function (e) {
+  if (e.target === this) this.classList.add("hidden");
 };
-
-window.addEventListener("beforeunload", () => {
-  stopRotation();
-  Object.values(chartInstances).forEach((chart) => {
-    if (chart) chart.destroy();
-  });
-});
-
-//  Initialize with summary tab
-universeState.currentTab = "summary";
-document.querySelector('[data-tab="summary"]')?.classList.add("active");
+window.addEventListener("beforeunload", () =>
+  Object.values(chartInstances).forEach((c) => c && c.destroy())
+);