new UI

app/index.html

@@ -729,7 +729,76 @@
         </div>
       </div>
     </div>
+    <div id="tour-hud" class="hidden fixed inset-0 pointer-events-none z-50">
+        <!-- Top Bar -->
+        <div class="absolute top-8 left-1/2 transform -translate-x-1/2 tour-hud">
+            <div class="relative bg-black/80 backdrop-blur-xl border border-violet-500/30 rounded-lg px-8 py-4 scanline-effect">
+                <div class="text-center">
+                    <div class="text-xs text-violet-400 font-bold uppercase tracking-[0.3em] mb-1">
+                        [ AUTONOMOUS NAVIGATION SYSTEM ]
+                    </div>
+                    <h2 class="text-2xl font-bold text-white hologram-text mb-2">
+                        CLUSTER RECONNAISSANCE
+                    </h2>
+                    <div class="flex items-center justify-center gap-4 text-sm">
+                        <div class="flex items-center gap-2">
+                            <span class="text-gray-500">TARGET:</span>
+                            <span id="tour-target" class="data-stream font-bold">CLUSTER_001</span>
+                        </div>
+                        <div class="w-px h-4 bg-violet-500/30"></div>
+                        <div class="flex items-center gap-2">
+                            <span class="text-gray-500">ASSETS:</span>
+                            <span id="tour-count" class="text-yellow-400 font-bold">0</span>
+                        </div>
+                        <div class="w-px h-4 bg-violet-500/30"></div>
+                        <div class="flex items-center gap-2">
+                            <span class="text-gray-500">SECTOR:</span>
+                            <span id="tour-progress-text" class="text-cyan-400 font-bold">1/8</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Progress Bar -->
+        <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 w-96 tour-hud" style="animation-delay: 0.2s">
+            <div class="relative">
+                <div class="flex justify-between text-xs text-gray-400 mb-2 font-mono">
+                    <span>SCAN PROGRESS</span>
+                    <span id="tour-percent">0%</span>
+                </div>
+                
+                <div class="relative h-3 bg-black/60 backdrop-blur-sm border border-violet-500/30 rounded-full overflow-hidden">
+                    <div class="absolute inset-0 bg-gradient-to-r from-violet-900/20 via-violet-700/20 to-violet-900/20 animate-pulse"></div>
+                    
+                    <div id="tour-progress-bar" 
+                        class="relative h-full bg-gradient-to-r from-violet-600 via-fuchsia-500 to-violet-600 progress-bar-glow transition-all duration-300"
+                        style="width: 0%">
+                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse"></div>
+                    </div>
+                </div>
 
+                <div class="text-center text-xs text-violet-400 mt-2 font-mono">
+                    <span class="flicker">></span> AUTO-NAVIGATION ACTIVE <span class="flicker"><</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Stop Button -->
+        <div class="absolute bottom-12 right-12 tour-hud" style="animation-delay: 0.3s">
+            <button id="tour-stop-btn" 
+                    class="pointer-events-auto relative group bg-red-900/20 hover:bg-red-900/40 border-2 border-red-500/50 hover:border-red-400 text-red-400 font-bold px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105">
+                <div class="absolute inset-0 bg-red-500/20 blur-xl group-hover:blur-2xl transition-all"></div>
+                <div class="relative flex items-center gap-2">
+                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                        <rect x="6" y="4" width="4" height="16" rx="1"/>
+                        <rect x="14" y="4" width="4" height="16" rx="1"/>
+                    </svg>
+                    <span class="uppercase tracking-wider">ABORT TOUR</span>
+                </div>
+            </button>
+        </div>
+    </div>
     <script type="module" src="/static/script.js"></script>
   </body>
 </html>

app/static/Universe3D.js

@@ -12,14 +12,35 @@ let activeLines = []; // Mảng chứa các đường nối
 let starField;
 let centroids = {}; // Lưu tâm của từng cluster để tính toán vụ nổ
 
+// 🆕 NEURAL PATHFINDING
+let neuralPaths = [];
+let hoveredNode = null;
+let pathParticles = [];
+
+// 🆕 AUTO TOUR
+let autoTourActive = false;
+let tourIndex = 0;
+let tourClusters = [];
+let tourTimer = 0;
+const TOUR_DURATION = 4;
+
+// 🆕 QUANTUM MERGE
+let quantumMerge = {
+  blackHole: null,
+  particlePool: [],
+  shockwave: null,
+  active: false
+};
+
 // State quản lý hiệu ứng
 let focusedCluster = null;
 
 // --- CONFIGURATION ---
 const PALETTE = {
-  highlight: 0xffd700, // Vàng rực (Gold)
-  ghost: 0x8899ac, // Trắng xanh nhạt (Ghost)
+  highlight: 0xffd700,
+  ghost: 0x8899ac,
   default: [0xa78bfa, 0x60a5fa, 0x34d399, 0xfbbf24, 0xf472b6, 0x22d3ee],
+  neural: 0x00ffff, // 🆕
 };
 
 export function initUniverse(containerId, data, onNodeClick) {
@@ -108,7 +129,44 @@ export function initUniverse(containerId, data, onNodeClick) {
 
   setupSearchEvents();
 
+  window.addEventListener('tour-start', () => {
+    document.getElementById('tour-hud')?.classList.remove('hidden');
+  });
+
+  window.addEventListener('tour-visit', (e) => {
+    const { cluster, count, index, total } = e.detail;
+    document.getElementById('tour-target').textContent = cluster;
+    document.getElementById('tour-count').textContent = count;
+    document.getElementById('tour-progress-text').textContent = `${index}/${total}`;
+  });
+
+  window.addEventListener('tour-progress', (e) => {
+    const bar = document.getElementById('tour-progress-bar');
+    if (bar) bar.style.width = e.detail + '%';
+  });
+
+  window.addEventListener('tour-complete', () => {
+    alert('🎉 Auto Tour Complete!');
+    document.getElementById('tour-hud')?.classList.add('hidden');
+  });
+
+  window.addEventListener('tour-stop', () => {
+    document.getElementById('tour-hud')?.classList.add('hidden');
+  });
+
   animate();
+
+  return {
+    setOrbit: (enabled) => { controls.autoRotate = enabled; },
+    setLines: (enabled) => { 
+      activeLines.forEach(l => l.visible = enabled);
+      neuralPaths.forEach(p => p.visible = enabled);
+    },
+    triggerAutoTour: startAutoTour,
+    stopAutoTour: stopAutoTour,
+    performQuantumMerge: performQuantumMerge,
+    isQuantumMergeActive: () => quantumMerge.active
+  };
 }
 
 // --- HELPER: Tính tâm của từng cụm (Dùng cho vụ nổ) ---
@@ -239,6 +297,409 @@ function generateGalaxy(data) {
   });
 }
 
+function prepareTourData() {
+  const clusterSizes = {};
+  clusterParticles.forEach(p => {
+    if (!p.userData.isNoise) {
+      clusterSizes[p.userData.cluster] = (clusterSizes[p.userData.cluster] || 0) + 1;
+    }
+  });
+
+  tourClusters = Object.entries(clusterSizes)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 8)
+    .map(([name]) => name);
+}
+
+function startAutoTour() {
+  if (tourClusters.length === 0) return;
+  
+  autoTourActive = true;
+  tourIndex = 0;
+  tourTimer = 0;
+  controls.autoRotate = false;
+  
+  visitTourStop(tourClusters[tourIndex]);
+  window.dispatchEvent(new CustomEvent('tour-start'));
+}
+
+function stopAutoTour() {
+  autoTourActive = false;
+  resetExplosion();
+  window.dispatchEvent(new CustomEvent('tour-stop'));
+}
+
+function visitTourStop(clusterName) {
+  triggerClusterExplosion(clusterName);
+  
+  const clusterNodes = clusterParticles.filter(p => p.userData.cluster === clusterName);
+  window.dispatchEvent(new CustomEvent('tour-visit', {
+    detail: {
+      cluster: clusterName,
+      count: clusterNodes.length,
+      index: tourIndex + 1,
+      total: tourClusters.length
+    }
+  }));
+}
+
+function updateAutoTour(delta) {
+  if (!autoTourActive) return;
+  
+  tourTimer += delta;
+  
+  if (tourTimer >= TOUR_DURATION) {
+    tourTimer = 0;
+    tourIndex++;
+    
+    if (tourIndex >= tourClusters.length) {
+      stopAutoTour();
+      window.dispatchEvent(new CustomEvent('tour-complete'));
+    } else {
+      visitTourStop(tourClusters[tourIndex]);
+    }
+  }
+  
+  const progress = (tourTimer / TOUR_DURATION) * 100;
+  window.dispatchEvent(new CustomEvent('tour-progress', { detail: progress }));
+}
+
+function createNeuralPaths(sourceNode) {
+  clearNeuralPaths();
+  
+  const sourceCluster = sourceNode.userData.cluster;
+  if (sourceNode.userData.isNoise) return;
+
+  const relatedNodes = clusterParticles.filter(
+    p => p.userData.cluster === sourceCluster && p !== sourceNode
+  );
+
+  if (relatedNodes.length === 0) return;
+
+  relatedNodes.forEach((targetNode, index) => {
+    const curve = new THREE.CatmullRomCurve3([
+      sourceNode.position.clone(),
+      sourceNode.position.clone().lerp(targetNode.position, 0.5).add(
+        new THREE.Vector3(
+          (Math.random() - 0.5) * 10,
+          (Math.random() - 0.5) * 10,
+          (Math.random() - 0.5) * 10
+        )
+      ),
+      targetNode.position.clone()
+    ]);
+
+    const points = curve.getPoints(50);
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    
+    const material = new THREE.LineBasicMaterial({
+      color: PALETTE.neural,
+      transparent: true,
+      opacity: 0.6,
+      linewidth: 2,
+      blending: THREE.AdditiveBlending
+    });
+
+    const line = new THREE.Line(geometry, material);
+    scene.add(line);
+    neuralPaths.push(line);
+
+    createPathParticle(curve, index * 0.2);
+  });
+}
+
+function createPathParticle(curve, delay) {
+  const geometry = new THREE.SphereGeometry(0.8, 8, 8);
+  const material = new THREE.MeshBasicMaterial({
+    color: PALETTE.neural,
+    transparent: true,
+    opacity: 0.8,
+    blending: THREE.AdditiveBlending
+  });
+  
+  const particle = new THREE.Mesh(geometry, material);
+  particle.userData.curve = curve;
+  particle.userData.progress = -delay;
+  particle.userData.speed = 0.3;
+  
+  scene.add(particle);
+  pathParticles.push(particle);
+}
+
+function updatePathParticles(delta) {
+  pathParticles.forEach(particle => {
+    particle.userData.progress += delta * particle.userData.speed;
+    
+    if (particle.userData.progress > 1) {
+      particle.userData.progress = 0;
+    }
+    
+    if (particle.userData.progress >= 0 && particle.userData.progress <= 1) {
+      const point = particle.userData.curve.getPoint(particle.userData.progress);
+      particle.position.copy(point);
+      particle.visible = true;
+      
+      const scale = 1 + Math.sin(particle.userData.progress * Math.PI) * 0.5;
+      particle.scale.setScalar(scale);
+    } else {
+      particle.visible = false;
+    }
+  });
+}
+
+function clearNeuralPaths() {
+  neuralPaths.forEach(line => {
+    line.geometry.dispose();
+    line.material.dispose();
+    scene.remove(line);
+  });
+  neuralPaths = [];
+
+  pathParticles.forEach(p => {
+    p.geometry.dispose();
+    p.material.dispose();
+    scene.remove(p);
+  });
+  pathParticles = [];
+}
+
+// 🌌 QUANTUM MERGE SYSTEM
+function createBlackHole(position, color) {
+  const coreGeometry = new THREE.SphereGeometry(1.5, 32, 32);
+  const coreMaterial = new THREE.MeshBasicMaterial({
+    color: 0x000000,
+    transparent: true,
+    opacity: 0.9,
+  });
+  const core = new THREE.Mesh(coreGeometry, coreMaterial);
+  core.position.copy(position);
+
+  const ringGeometry = new THREE.TorusGeometry(3, 0.3, 16, 100);
+  const ringMaterial = new THREE.MeshBasicMaterial({
+    color: color,
+    transparent: true,
+    opacity: 0.8,
+    blending: THREE.AdditiveBlending,
+  });
+  const ring = new THREE.Mesh(ringGeometry, ringMaterial);
+  ring.position.copy(position);
+
+  const diskGeometry = new THREE.RingGeometry(3, 8, 32);
+  const diskMaterial = new THREE.MeshBasicMaterial({
+    color: color,
+    transparent: true,
+    opacity: 0.3,
+    side: THREE.DoubleSide,
+    blending: THREE.AdditiveBlending,
+  });
+  const disk = new THREE.Mesh(diskGeometry, diskMaterial);
+  disk.position.copy(position);
+  disk.rotation.x = Math.PI / 2;
+
+  const blackHoleGroup = new THREE.Group();
+  blackHoleGroup.add(core);
+  blackHoleGroup.add(ring);
+  blackHoleGroup.add(disk);
+
+  scene.add(blackHoleGroup);
+  
+  quantumMerge.blackHole = {
+    group: blackHoleGroup,
+    core,
+    ring,
+    disk,
+    position: position.clone(),
+    strength: 0,
+    maxStrength: 50,
+    spawnTime: 0
+  };
+
+  return quantumMerge.blackHole;
+}
+
+function convertToParticles(sprite, count = 30) {
+  const particles = [];
+  const spritePos = sprite.position.clone();
+  const color = new THREE.Color(sprite.userData.originalColor);
+
+  for (let i = 0; i < count; i++) {
+    const geometry = new THREE.SphereGeometry(0.2, 8, 8);
+    const material = new THREE.MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 1,
+      blending: THREE.AdditiveBlending,
+    });
+
+    const particle = new THREE.Mesh(geometry, material);
+
+    particle.position.set(
+      spritePos.x + (Math.random() - 0.5) * 5,
+      spritePos.y + (Math.random() - 0.5) * 5,
+      spritePos.z + (Math.random() - 0.5) * 5
+    );
+
+    particle.userData.velocity = new THREE.Vector3(
+      (Math.random() - 0.5) * 2,
+      (Math.random() - 0.5) * 2,
+      (Math.random() - 0.5) * 2
+    );
+    particle.userData.life = 1.0;
+    particle.userData.decayRate = 0.015 + Math.random() * 0.01;
+
+    scene.add(particle);
+    particles.push(particle);
+  }
+
+  quantumMerge.particlePool.push(...particles);
+  return particles;
+}
+
+function updateQuantumMerge(delta) {
+  if (!quantumMerge.active) return;
+
+  const bh = quantumMerge.blackHole;
+  if (!bh) return;
+
+  // Animate black hole spawn
+  if (bh.spawnTime < 1) {
+    bh.spawnTime += delta * 2;
+    const t = Math.min(bh.spawnTime, 1);
+    bh.strength = bh.maxStrength * (1 - Math.pow(1 - t, 3));
+    
+    const scale = 0.1 + 0.9 * t;
+    bh.group.scale.setScalar(scale);
+  }
+
+  // Rotate black hole
+  if (bh.ring) bh.ring.rotation.x += delta * 2;
+  if (bh.disk) bh.disk.rotation.z += delta * 0.5;
+
+  // Update particles physics
+  const bhPos = bh.position;
+  const strength = bh.strength;
+
+  quantumMerge.particlePool.forEach((particle, index) => {
+    if (particle.userData.life <= 0) {
+      scene.remove(particle);
+      particle.geometry.dispose();
+      particle.material.dispose();
+      quantumMerge.particlePool.splice(index, 1);
+      return;
+    }
+
+    const direction = new THREE.Vector3().subVectors(bhPos, particle.position);
+    const distance = direction.length();
+
+    const forceMagnitude = strength / (distance * distance + 1);
+    direction.normalize().multiplyScalar(forceMagnitude);
+
+    particle.userData.velocity.add(direction.multiplyScalar(delta));
+    particle.position.add(particle.userData.velocity.clone().multiplyScalar(delta * 60));
+
+    if (distance < 5) {
+      particle.userData.life -= particle.userData.decayRate;
+      particle.material.opacity = particle.userData.life;
+      particle.scale.setScalar(particle.userData.life);
+    }
+
+    particle.rotation.x += 0.1;
+    particle.rotation.y += 0.15;
+  });
+}
+
+function triggerSupernova(callback) {
+  if (!quantumMerge.blackHole) return;
+
+  const bh = quantumMerge.blackHole;
+  
+  // Create shockwave
+  const shockGeometry = new THREE.SphereGeometry(1, 32, 32);
+  const shockMaterial = new THREE.MeshBasicMaterial({
+    color: 0xffffff,
+    transparent: true,
+    opacity: 0.8,
+    wireframe: true,
+    blending: THREE.AdditiveBlending,
+  });
+  const shockwave = new THREE.Mesh(shockGeometry, shockMaterial);
+  shockwave.position.copy(bh.position);
+  scene.add(shockwave);
+  quantumMerge.shockwave = shockwave;
+
+  let t = 0;
+  const animate = () => {
+    if (t >= 1) {
+      cleanupQuantumMerge();
+      if (callback) callback();
+      return;
+    }
+
+    t += 0.03;
+
+    const scale = 1 - t * t * t;
+    bh.core.scale.setScalar(scale);
+
+    bh.ring.scale.setScalar(1 + t * 3);
+    bh.ring.material.opacity = 1 - t;
+
+    shockwave.scale.setScalar(1 + t * 30);
+    shockwave.material.opacity = 0.8 * (1 - t);
+
+    requestAnimationFrame(animate);
+  };
+  animate();
+}
+
+function cleanupQuantumMerge() {
+  if (quantumMerge.blackHole) {
+    scene.remove(quantumMerge.blackHole.group);
+    quantumMerge.blackHole.group.traverse((obj) => {
+      if (obj.geometry) obj.geometry.dispose();
+      if (obj.material) obj.material.dispose();
+    });
+    quantumMerge.blackHole = null;
+  }
+
+  if (quantumMerge.shockwave) {
+    scene.remove(quantumMerge.shockwave);
+    quantumMerge.shockwave.geometry.dispose();
+    quantumMerge.shockwave.material.dispose();
+    quantumMerge.shockwave = null;
+  }
+
+  quantumMerge.particlePool.forEach((p) => {
+    scene.remove(p);
+    p.geometry.dispose();
+    p.material.dispose();
+  });
+  quantumMerge.particlePool = [];
+  quantumMerge.active = false;
+}
+
+function performQuantumMerge(keepSprite, deleteSprites) {
+  quantumMerge.active = true;
+  
+  // 1. Create black hole at keep position
+  createBlackHole(keepSprite.position, keepSprite.userData.originalColor);
+
+  // 2. Convert sprites to particles
+  deleteSprites.forEach((sprite) => {
+    convertToParticles(sprite, 30);
+    sprite.visible = false;
+  });
+
+  // 3. After 3 seconds, trigger supernova
+  setTimeout(() => {
+    triggerSupernova(() => {
+      console.log("Quantum merge complete!");
+      window.dispatchEvent(new CustomEvent('quantum-merge-complete', {
+        detail: { deleteSprites }
+      }));
+    });
+  }, 3000);
+}
+
 // --- SEARCH VISUALIZATION ---
 function setupSearchEvents() {
   window.addEventListener("universe-search", (e) => {
@@ -435,6 +896,15 @@ function animate() {
     }
   });
 
+  // 🆕 Update neural path particles
+  updatePathParticles(delta);
+
+  // 🆕 Update auto tour
+  updateAutoTour(delta);
+
+  // 🆕 Update quantum merge
+  updateQuantumMerge(delta);
+
   controls.update();
   composer.render();
 }
@@ -482,9 +952,28 @@ function onPointerMove(event) {
   pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
   raycaster.setFromCamera(pointer, camera);
 
-  if (raycaster.intersectObjects(clusterParticles).length > 0) {
+  const intersects = raycaster.intersectObjects(clusterParticles);
+  
+  if (intersects.length > 0) {
+    const newHovered = intersects[0].object;
+    
+    if (newHovered !== hoveredNode && !newHovered.userData.isNoise) {
+      hoveredNode = newHovered;
+      createNeuralPaths(hoveredNode);
+    }
+    
     document.body.style.cursor = "pointer";
+    
+    window.dispatchEvent(new CustomEvent('universe-hover', {
+      detail: newHovered.userData
+    }));
   } else {
+    if (hoveredNode) {
+      clearNeuralPaths();
+      hoveredNode = null;
+    }
+    
     document.body.style.cursor = "default";
+    window.dispatchEvent(new CustomEvent('universe-unhover'));
   }
 }

app/static/script.js

@@ -220,14 +220,15 @@ function renderUniverseMap(points) {
 
   // Thêm nút "Auto Tour" vào UI nếu chưa có
   if (!document.getElementById("btn-autotour")) {
-      const tourBtn = document.createElement("button");
-      tourBtn.id = "btn-autotour";
-      tourBtn.className = "px-3 py-1 bg-violet-500/20 hover:bg-violet-500/40 text-violet-300 text-[10px] font-bold uppercase rounded border border-violet-500/30 transition ml-2";
-      tourBtn.innerHTML = "▶ Auto Tour";
-      tourBtn.onclick = () => {
-          if(universeController) universeController.triggerAutoTour();
-      };
-      controlsDiv.appendChild(tourBtn);
+    const tourBtn = document.createElement("button");
+    tourBtn.id = "btn-autotour";
+    tourBtn.className =
+      "px-3 py-1 bg-violet-500/20 hover:bg-violet-500/40 text-violet-300 text-[10px] font-bold uppercase rounded border border-violet-500/30 transition ml-2";
+    tourBtn.innerHTML = "▶ Auto Tour";
+    tourBtn.onclick = () => {
+      if (universeController) universeController.triggerAutoTour();
+    };
+    controlsDiv.appendChild(tourBtn);
   }
 
   // Khởi tạo Three.js và lưu controller
@@ -241,21 +242,25 @@ function renderUniverseMap(points) {
 
   // Kết nối lại các nút Toggle
   document.getElementById("toggle-rotate").onchange = (e) => {
-      if(universeController) universeController.setOrbit(e.target.checked);
+    if (universeController) universeController.setOrbit(e.target.checked);
   };
-  
+
   document.getElementById("toggle-lines").onchange = (e) => {
-      if(universeController) universeController.setLines(e.target.checked);
+    if (universeController) universeController.setLines(e.target.checked);
   };
 
   window.addEventListener("universe-hover", (e) => {
     const data = e.detail;
     const tooltip = document.getElementById("universe-tooltip");
-    const imgPath = data.path.startsWith("/") ? data.path : `${API_URL}/results/${currentSessionId}/clusters/${data.path}`;
+    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";
+    document.getElementById("tooltip-score").textContent = data.quality
+      ? data.quality.toFixed(0)
+      : "N/A";
     tooltip.classList.remove("hidden");
   });
 
@@ -465,13 +470,56 @@ document.getElementById("smart-cleanup-btn").onclick = async () => {
   if (sel.length !== 1) return alert("Select exactly ONE best image to keep.");
 
   const keepPath = sel[0].dataset.path;
-  if (!confirm(`Keep 1 and delete the rest of '${currentClusterName}'?`))
-    return;
+  if (!confirm(`Keep 1 and delete the rest of '${currentClusterName}'?`)) return;
+
+  if (universeController && universeState.data.length > 0) {
+    const keepSprite = clusterParticles.find(p => p.userData.path === keepPath);
+    const deleteSprites = clusterParticles.filter(
+      p => p.userData.cluster === currentClusterName && p.userData.path !== keepPath
+    );
+
+    if (keepSprite && deleteSprites.length > 0) {
+      universeController.performQuantumMerge(keepSprite, deleteSprites);
+
+      const handleComplete = async (e) => {
+        window.removeEventListener('quantum-merge-complete', handleComplete);
+        
+        try {
+          const res = await fetch(`${API_URL}/smart-cleanup`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              session_id: currentSessionId,
+              cluster_name: currentClusterName,
+              image_to_keep: keepPath,
+            }),
+          });
+
+          if (!res.ok) throw new Error("Cleanup failed on server");
+
+          const data = await res.json();  
+          // Update UI
+          const oldPaths = currentGroups[currentClusterName];
+          currentGroups[currentClusterName] = [keepPath];
+            
+          const deletedPaths = data.deleted || oldPaths.filter(p => p !== keepPath);
+          syncUniverseMap(deletedPaths);
+          loadCluster(currentClusterName);
+          renderClusterList();   
+
+        } catch (e) {
+          alert("Cleanup failed: " + e.message);
+          loadCluster(currentClusterName);
+        }
+      };
+
+      window.addEventListener('quantum-merge-complete', handleComplete);
+      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"));
 
   const btn = document.getElementById("smart-cleanup-btn");
@@ -491,7 +539,7 @@ document.getElementById("smart-cleanup-btn").onclick = async () => {
     if (!res.ok) throw new Error((await res.json()).detail);
     const data = await res.json();
 
-    await new Promise((r) => setTimeout(r, 800)); // Đợi hiệu ứng
+    await new Promise((r) => setTimeout(r, 800));
 
     const oldPaths = currentGroups[currentClusterName];
     currentGroups[currentClusterName] = [data.image_kept];
@@ -569,34 +617,44 @@ function renderStatsDashboard(data, unique, dupes) {
   if (chartInstances.distNew) chartInstances.distNew.destroy();
 
   const groups = data.results.groups || {};
-  const sizes = Object.values(groups).map(g => g.length).sort((a,b) => b-a).slice(0, 10);
-  const labels = Object.keys(groups).sort((a,b) => groups[b].length - groups[a].length).slice(0, 10);
+  const sizes = Object.values(groups)
+    .map((g) => g.length)
+    .sort((a, b) => b - a)
+    .slice(0, 10);
+  const labels = Object.keys(groups)
+    .sort((a, b) => groups[b].length - groups[a].length)
+    .slice(0, 10);
 
   const ctxDist = document.getElementById("chart-dist-new").getContext("2d");
   chartInstances.distNew = new Chart(ctxDist, {
-      type: 'bar',
-      data: {
-          labels: labels,
-          datasets: [{
-              label: 'Images per Cluster',
-              data: sizes,
-              backgroundColor: '#8b5cf6',
-              borderRadius: 4,
-              borderWidth: 0
-          }]
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: [
+        {
+          label: "Images per Cluster",
+          data: sizes,
+          backgroundColor: "#8b5cf6",
+          borderRadius: 4,
+          borderWidth: 0,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      indexAxis: "y",
+      scales: {
+        x: { grid: { color: "#333" }, ticks: { color: "#888" } },
+        y: {
+          grid: { display: false },
+          ticks: { color: "#ccc", font: { size: 10 } },
+        },
       },
-      options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          indexAxis: 'y',
-          scales: {
-              x: { grid: { color: '#333' }, ticks: { color: '#888' } },
-              y: { grid: { display: false }, ticks: { color: '#ccc', font: {size: 10} } }
-          },
-          plugins: {
-              legend: { display: false }
-          }
-      }
+      plugins: {
+        legend: { display: false },
+      },
+    },
   });
 
   // Pipeline Steps
@@ -678,9 +736,106 @@ document.getElementById("keep-best-btn").onclick = () => {
     }
   }
 };
+
 document.getElementById("image-modal").onclick = function (e) {
   if (e.target === this) this.classList.add("hidden");
 };
 window.addEventListener("beforeunload", () =>
   Object.values(chartInstances).forEach((c) => c && c.destroy())
 );
+
+const moveModal = document.getElementById("move-modal");
+const moveSelect = document.getElementById("move-cluster-select");
+const moveNewInputGroup = document.getElementById("move-new-cluster-input-group");
+const moveNewInput = document.getElementById("move-new-cluster-name");
+
+document.getElementById("move-btn").onclick = () => {
+  const selected = document.querySelectorAll(".thumbnail-card.selected");
+  if (selected.length === 0) return alert("Please select images to move.");
+  
+  // Populate Select Option
+  moveSelect.innerHTML = '<option value="__NEW__">+ Create New Cluster</option>';
+  Object.keys(currentGroups).forEach(name => {
+    if (name !== currentClusterName) {
+      const opt = document.createElement("option");
+      opt.value = name;
+      opt.textContent = name;
+      moveSelect.appendChild(opt);
+    }
+  });
+
+  moveModal.classList.remove("hidden");
+  moveNewInputGroup.classList.add("hidden"); // Reset
+  moveSelect.value = Object.keys(currentGroups).find(n => n !== currentClusterName) || "__NEW__";
+  if(moveSelect.value === "__NEW__") moveNewInputGroup.classList.remove("hidden");
+};
+
+moveSelect.onchange = () => {
+  if (moveSelect.value === "__NEW__") {
+    moveNewInputGroup.classList.remove("hidden");
+    moveNewInput.focus();
+  } else {
+    moveNewInputGroup.classList.add("hidden");
+  }
+};
+
+document.getElementById("move-cancel-btn").onclick = () => {
+  moveModal.classList.add("hidden");
+};
+
+document.getElementById("move-confirm-btn").onclick = async () => {
+  const selectedCards = Array.from(document.querySelectorAll(".thumbnail-card.selected"));
+  const imagePaths = selectedCards.map(c => c.dataset.path);
+  
+  let targetCluster = moveSelect.value;
+  if (targetCluster === "__NEW__") {
+    targetCluster = moveNewInput.value.trim();
+    if (!targetCluster) return alert("Please enter a new cluster name.");
+  }
+
+  const btn = document.getElementById("move-confirm-btn");
+  btn.disabled = true;
+  btn.textContent = "Moving...";
+
+  try {
+    const res = await fetch(`${API_URL}/move-images`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        session_id: currentSessionId,
+        image_paths: imagePaths,
+        target_cluster: targetCluster
+      }),
+    });
+
+    if (!res.ok) throw new Error((await res.json()).detail);
+
+    // Update UI Client-side
+    // 1. Remove from current group
+    currentGroups[currentClusterName] = currentGroups[currentClusterName].filter(p => !imagePaths.includes(p));
+    
+    // 2. Add to new group (if exists locally) or create new
+    if (!currentGroups[targetCluster]) currentGroups[targetCluster] = [];
+    currentGroups[targetCluster].push(...imagePaths);
+
+    // 3. UI Refresh
+    selectedCards.forEach(c => c.remove());
+    renderClusterList();
+    moveModal.classList.add("hidden");
+    
+    if (universeController) {
+        syncUniverseMap(imagePaths); 
+    }
+
+    alert(`Moved ${imagePaths.length} images to '${targetCluster}'`);
+  } catch (e) {
+    alert("Move failed: " + e.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "CONFIRM MOVE";
+  }
+};
+
+document.getElementById('tour-stop-btn')?.addEventListener('click', () => {
+  if (universeController) universeController.stopAutoTour();
+});

app/static/styles.css

@@ -900,4 +900,73 @@ body {
   0% { width: 0%; height: 0%; opacity: 0; }
   50% { opacity: 1; width: 40%; height: 40%; }
   100% { width: 0%; height: 0%; opacity: 0; }
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateY(100px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.tour-hud {
+    animation: slide-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.hologram-text {
+    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8),
+                 0 0 20px rgba(139, 92, 246, 0.4);
+    animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+    0%, 100% { 
+        box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
+        transform: scale(1);
+    }
+    50% { 
+        box-shadow: 0 0 40px rgba(139, 92, 246, 0.8);
+        transform: scale(1.02);
+    }
+}
+
+.progress-bar-glow {
+    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6),
+                inset 0 0 20px rgba(139, 92, 246, 0.3);
+}
+
+.data-stream {
+    font-family: 'Courier New', monospace;
+    color: #00ff00;
+    text-shadow: 0 0 5px #00ff00;
+}
+
+.flicker {
+    animation: flicker 0.15s infinite;
+}
+
+@keyframes flicker {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.8; }
+}
+
+.scanline-effect {
+    position: relative;
+    overflow: hidden;
+}
+
+.scanline-effect::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, rgba(139, 92, 246, 0.8), transparent);
+    animation: scanline 2s linear infinite;
+    z-index: 10;
 }