separate to css, js, html

app/index.html

@@ -19,410 +19,7 @@
       rel="stylesheet"
     />
 
-    <style>
-      /* --- CORE STYLES --- */
-      body {
-        background-color: #121212;
-        color: #e0e0e0;
-        font-family: "Outfit", sans-serif;
-        overflow: hidden;
-      }
-
-      ::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-      ::-webkit-scrollbar-track {
-        background: #1a1a1a;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #444;
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: #666;
-      }
-
-      .tab-button {
-        transition: all 0.2s ease;
-        border-bottom: 2px solid transparent;
-        position: relative;
-      }
-      .tab-button.active {
-        color: #8b5cf6;
-        border-bottom-color: #8b5cf6;
-        background: rgba(139, 92, 246, 0.05);
-      }
-      .tab-button:hover {
-        color: #fff;
-      }
-
-      .cluster-button {
-        transition: all 0.2s ease;
-      }
-      .cluster-button.active {
-        background-color: #8b5cf6;
-        color: white;
-        border-left: 3px solid #c4b5fd;
-      }
-
-      .thumbnail-card {
-        background-color: #1e1e1e;
-        border: 1px solid #333;
-        transition: all 0.2s ease;
-        position: relative;
-        overflow: hidden;
-      }
-      .thumbnail-card:hover {
-        border-color: #8b5cf6;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-      }
-      .thumbnail-card.selected {
-        border-color: #8b5cf6;
-        background-color: rgba(139, 92, 246, 0.1);
-        ring: 1px solid #8b5cf6;
-      }
-      .thumbnail-card.best-quality {
-        border: 2px solid #10b981;
-        box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
-      }
-
-      .quality-badge {
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-size: 10px;
-        font-weight: 700;
-        color: white;
-        z-index: 10;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-        font-family: "JetBrains Mono", monospace;
-        cursor: help;
-      }
-      .best-badge {
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        background: linear-gradient(135deg, #10b981, #059669);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-size: 9px;
-        font-weight: 800;
-        color: white;
-        z-index: 10;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-      }
-
-      .quality-details {
-        position: absolute;
-        top: 20px;
-        right: 0;
-        background: #1f2937;
-        border: 1px solid #374151;
-        border-radius: 6px;
-        padding: 8px;
-        font-size: 11px;
-        white-space: nowrap;
-        z-index: 100;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-        display: none;
-        min-width: 120px;
-        pointer-events: none;
-      }
-      .quality-badge:hover .quality-details {
-        display: block;
-      }
-      .quality-metric {
-        display: flex;
-        justify-content: space-between;
-        gap: 12px;
-        margin: 2px 0;
-      }
-      .quality-metric-label {
-        color: #9ca3af;
-      }
-      .quality-metric-value {
-        color: #e5e7eb;
-        font-weight: 600;
-      }
-
-      /* --- CINEMATIC UNIVERSE MAP --- */
-      #tab-universe {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(
-          ellipse at center,
-          #0f0920 0%,
-          #000000 100%
-        );
-        overflow: hidden;
-      }
-
-      #plotly-div {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        background: transparent;
-        transition: opacity 0.8s ease;
-      }
-
-      .star-layer {
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        z-index: 0;
-        opacity: 0.6;
-      }
-
-      .stars-small {
-        width: 1px;
-        height: 1px;
-        background: transparent;
-        box-shadow: 1744px 122px 2px rgba(255, 255, 255, 0.8),
-          134px 1321px 1px rgba(255, 255, 255, 0.6),
-          92px 859px 1px rgba(139, 92, 246, 0.4), 800px 600px 1px #fff,
-          1200px 400px 1px rgba(255, 255, 255, 0.7),
-          300px 1100px 1px rgba(167, 139, 250, 0.5);
-        animation: animStar 150s linear infinite,
-          twinkle 3s ease-in-out infinite;
-      }
-
-      .stars-medium {
-        width: 2px;
-        height: 2px;
-        background: transparent;
-        box-shadow: 122px 231px 3px rgba(139, 92, 246, 0.9),
-          421px 521px 2px rgba(255, 255, 255, 0.8),
-          900px 300px 2px rgba(167, 139, 250, 0.7),
-          600px 800px 2px rgba(255, 255, 255, 0.6);
-        animation: animStar 100s linear infinite,
-          glow 2s ease-in-out infinite alternate;
-      }
-
-      @keyframes animStar {
-        from {
-          transform: translateY(0px);
-        }
-        to {
-          transform: translateY(-2000px);
-        }
-      }
-
-      @keyframes twinkle {
-        0%,
-        100% {
-          opacity: 0.6;
-        }
-        50% {
-          opacity: 1;
-        }
-      }
-
-      @keyframes glow {
-        0% {
-          filter: brightness(1);
-        }
-        100% {
-          filter: brightness(1.5) drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
-        }
-      }
-
-      #tab-universe::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(
-            ellipse at 20% 30%,
-            rgba(139, 92, 246, 0.15) 0%,
-            transparent 50%
-          ),
-          radial-gradient(
-            ellipse at 80% 70%,
-            rgba(59, 130, 246, 0.12) 0%,
-            transparent 50%
-          ),
-          radial-gradient(
-            ellipse at 50% 50%,
-            rgba(167, 139, 250, 0.08) 0%,
-            transparent 60%
-          );
-        animation: nebulaPulse 8s ease-in-out infinite alternate;
-        z-index: 0;
-        pointer-events: none;
-      }
-
-      @keyframes nebulaPulse {
-        0% {
-          opacity: 0.3;
-          transform: scale(1);
-        }
-        100% {
-          opacity: 0.6;
-          transform: scale(1.05);
-        }
-      }
-
-      @keyframes floatIn {
-        from {
-          opacity: 0;
-          transform: translateX(-50%) translateY(-20px);
-        }
-        to {
-          opacity: 1;
-          transform: translateX(-50%) translateY(0);
-        }
-      }
-
-      .stat-box {
-        background: #1e1e1e;
-        border: 1px solid #333;
-        border-radius: 12px;
-        padding: 20px;
-        position: relative;
-        overflow: hidden;
-      }
-      .stat-box::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        background: #333;
-      }
-      .stat-box.purple::after {
-        background: #8b5cf6;
-      }
-      .stat-box.green::after {
-        background: #10b981;
-      }
-      .stat-box.red::after {
-        background: #ef4444;
-      }
-      .stat-box.blue::after {
-        background: #3b82f6;
-      }
-
-      .pipeline-step {
-        position: relative;
-        padding-left: 20px;
-        border-left: 2px solid #333;
-        padding-bottom: 20px;
-      }
-      .pipeline-step:last-child {
-        border-left: 2px solid transparent;
-      }
-      .pipeline-step::before {
-        content: "";
-        position: absolute;
-        left: -5px;
-        top: 0;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: #555;
-      }
-      .pipeline-step.done::before {
-        background: #10b981;
-        box-shadow: 0 0 8px #10b981;
-      }
-      .pipeline-step.done {
-        border-left-color: #10b981;
-      }
-
-      .glass-panel-ui {
-        background: rgba(20, 20, 25, 0.8);
-        backdrop-filter: blur(16px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-        pointer-events: auto;
-        z-index: 50;
-      }
-
-      .search-container {
-        position: absolute;
-        top: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 400px;
-        max-width: 90%;
-        border-radius: 99px;
-        padding: 4px;
-        display: flex;
-        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-        animation: floatIn 0.8s ease-out;
-      }
-
-      .search-container:focus-within {
-        background: rgba(20, 20, 25, 0.95);
-        border-color: #8b5cf6;
-        box-shadow: 0 0 30px rgba(139, 92, 246, 0.4),
-          0 0 60px rgba(139, 92, 246, 0.2),
-          inset 0 0 20px rgba(139, 92, 246, 0.1);
-        transform: translateX(-50%) scale(1.02);
-      }
-
-      .search-input {
-        background: transparent;
-        border: none;
-        color: white;
-        padding: 8px 16px;
-        width: 100%;
-        outline: none;
-        font-size: 14px;
-      }
-
-      .bottom-controls {
-        position: absolute;
-        bottom: 30px;
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 16px;
-        padding: 8px 16px;
-        display: flex;
-        gap: 16px;
-        align-items: center;
-        animation: floatIn 1s ease-out 0.3s backwards;
-        transition: all 0.3s ease;
-      }
-
-      .bottom-controls:hover {
-        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8),
-          0 0 20px rgba(139, 92, 246, 0.2);
-        transform: translateX(-50%) translateY(-2px);
-      }
-
-      .toggle-switch {
-        appearance: none;
-        width: 36px;
-        height: 20px;
-        background: #334155;
-        border-radius: 20px;
-        position: relative;
-        transition: 0.3s;
-        cursor: pointer;
-      }
-      .toggle-switch::after {
-        content: "";
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        width: 16px;
-        height: 16px;
-        background: #fff;
-        border-radius: 50%;
-        transition: 0.3s;
-      }
-      .toggle-switch:checked {
-        background: #8b5cf6;
-      }
-      .toggle-switch:checked::after {
-        transform: translateX(16px);
-      }
-    </style>
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body class="h-screen flex flex-col m-0 p-0 bg-[#121212]">
     <header
@@ -1066,944 +663,6 @@
       </div>
     </div>
 
-    <script>
-      const API_URL = "/api";
-
-      const toggleConfigBtn = document.getElementById("toggle-config-btn");
-      const controlPanel = document.getElementById("control-panel");
-      const configArrow = document.getElementById("config-arrow");
-      let isConfigOpen = true;
-
-      toggleConfigBtn.addEventListener("click", () => {
-        isConfigOpen = !isConfigOpen;
-        if (isConfigOpen) {
-          controlPanel.style.maxHeight = "200px";
-          controlPanel.style.opacity = "1";
-          controlPanel.style.padding = "16px";
-          configArrow.style.transform = "rotate(0deg)";
-          document.getElementById("config-status-text").textContent =
-            "Hide Config";
-        } else {
-          controlPanel.style.maxHeight = "0px";
-          controlPanel.style.opacity = "0";
-          controlPanel.style.padding = "0px";
-          configArrow.style.transform = "rotate(-90deg)";
-          document.getElementById("config-status-text").textContent =
-            "Show Config";
-        }
-      });
-
-      let uploadedFiles = null;
-      let currentSessionId = null;
-      let currentGroups = {};
-      let qualityScores = {};
-      let currentClusterName = null;
-      let universeState = {
-        data: [],
-        isRotating: true,
-        originalColors: [],
-        lastSearchColors: null,
-        lastSearchSizes: null,
-        lastSearchLineColors: null,
-        lastSearchLineWidths: null,
-        isSearchActive: false,
-      };
-
-      const loadingOverlay = document.getElementById("loading-overlay");
-      const loadingText = document.getElementById("loading-text");
-      const loadingBar = document.getElementById("loading-bar");
-
-      document
-        .getElementById("image-folder-input")
-        .addEventListener("change", (e) => {
-          if (e.target.files.length > 0) {
-            uploadedFiles = e.target.files;
-            document.getElementById(
-              "image-folder-display"
-            ).value = `${e.target.files.length} files selected`;
-          }
-        });
-
-      document
-        .getElementById("start-clustering-btn")
-        .addEventListener("click", async () => {
-          if (!uploadedFiles || uploadedFiles.length === 0)
-            return alert("Please select a folder first.");
-          if (isConfigOpen) toggleConfigBtn.click();
-
-          loadingOverlay.classList.remove("hidden");
-          loadingText.textContent = "Uploading images...";
-          loadingBar.style.width = "10%";
-
-          const fd = new FormData();
-          fd.append("algorithm", document.getElementById("algorithm").value);
-          let count = 0;
-          for (const f of uploadedFiles) {
-            fd.append("files", f, f.webkitRelativePath || f.name);
-            count++;
-            if (count % 20 === 0)
-              loadingBar.style.width = `${
-                10 + (count / uploadedFiles.length) * 40
-              }%`;
-          }
-
-          loadingText.textContent = "Analyzing (Semantic + Perceptual)...";
-          loadingBar.style.width = "60%";
-
-          try {
-            const res = await fetch(`${API_URL}/run-clustering`, {
-              method: "POST",
-              body: fd,
-            });
-            if (!res.ok) throw new Error((await res.json()).detail);
-            const data = await res.json();
-
-            currentSessionId = data.session_id;
-            qualityScores = data.quality_scores || {};
-
-            loadingBar.style.width = "100%";
-            populateUI(data);
-
-            setTimeout(() => loadingOverlay.classList.add("hidden"), 500);
-          } catch (e) {
-            alert("Error: " + e.message);
-            loadingOverlay.classList.add("hidden");
-          }
-        });
-
-      function populateUI(data) {
-        currentGroups = data.results.groups || {};
-        const results = data.results;
-        const total = results.total_images || 0;
-        const unique = Object.keys(currentGroups).length;
-        const dupes = total - unique;
-
-        renderStatsDashboard(data, unique, dupes);
-
-        document.getElementById("summary-content").classList.add("hidden");
-        document.getElementById("summary-visuals").classList.remove("hidden");
-        document.getElementById("stat-total").textContent = total;
-        document.getElementById("stat-duplicates").textContent = dupes;
-        document.getElementById("stat-clusters").textContent = unique;
-        document.getElementById("stat-saving").textContent = total
-          ? ((dupes / total) * 100).toFixed(1) + "%"
-          : "0%";
-        renderCharts(unique, dupes, currentGroups);
-
-        renderClusterList();
-        document.getElementById("download-btn").classList.remove("hidden");
-        document.getElementById("download-btn").onclick = () =>
-          (window.location.href = `${API_URL}/download-results/${currentSessionId}`);
-        document.getElementById("delete-group-btn").classList.remove("hidden");
-
-        if (data.universe_map) renderUniverseMap(data.universe_map);
-
-        document.querySelector('[data-tab="browser"]').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;
-
-        const ctx1 = document.getElementById("chart-dist-new").getContext("2d");
-        if (window.c1) window.c1.destroy();
-        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]++;
-        });
-        window.c1 = 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" } },
-            },
-          },
-        });
-
-        const ctx2 = document
-          .getElementById("chart-ratio-new")
-          .getContext("2d");
-        if (window.c2) window.c2.destroy();
-        window.c2 = 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.`;
-      }
-
-      // === CINEMATIC UNIVERSE MAP ===
-      function renderUniverseMap(points) {
-        if (!points.length) return;
-        universeState.data = points;
-        document.getElementById("universe-empty").classList.add("hidden");
-        document.getElementById("search-ui").classList.remove("hidden");
-        document.getElementById("map-controls").classList.remove("hidden");
-
-        const palette = [
-          "#ef4444",
-          "#3b82f6",
-          "#10b981",
-          "#f59e0b",
-          "#8b5cf6",
-          "#ec4899",
-          "#06b6d4",
-          "#84cc16",
-          "#f97316",
-          "#6366f1",
-          "#14b8a6",
-          "#d946ef",
-          "#eab308",
-          "#f43f5e",
-          "#a855f7",
-        ];
-
-        const clusterColorMap = {};
-        let colorIndex = 0;
-
-        points.forEach((p) => {
-          if (p.cluster !== "Noise/Unique" && !clusterColorMap[p.cluster]) {
-            clusterColorMap[p.cluster] = palette[colorIndex % palette.length];
-            colorIndex++;
-          }
-        });
-
-        const colors = [];
-        points.forEach((p) => {
-          if (p.cluster === "Noise/Unique") {
-            colors.push("#444444");
-          } else {
-            colors.push(clusterColorMap[p.cluster]);
-          }
-        });
-        universeState.originalColors = colors;
-        drawPlot(colors, null, false);
-        if (document.getElementById("toggle-rotate").checked) startRotation();
-      }
-
-      function drawPlot(
-        colorArray,
-        sizes = null,
-        isSearchMode = false,
-        customLineColors = null,
-        customLineWidths = null
-      ) {
-        const points = universeState.data;
-        const x = points.map((p) => p.x),
-          y = points.map((p) => p.y),
-          z = points.map((p) => p.z);
-        const s =
-          sizes || points.map((p) => (p.cluster === "Noise/Unique" ? 8 : 16));
-
-        const traces = [];
-
-        if (document.getElementById("toggle-lines").checked && !isSearchMode) {
-          const clusters = {};
-          points.forEach((p) => {
-            if (!clusters[p.cluster]) clusters[p.cluster] = [];
-            clusters[p.cluster].push(p);
-          });
-
-          const lx = [],
-            ly = [],
-            lz = [];
-          Object.entries(clusters).forEach(([name, group]) => {
-            if (name === "Noise/Unique" || group.length < 2) return;
-            let cx = 0,
-              cy = 0,
-              cz = 0;
-            group.forEach((g) => {
-              cx += g.x;
-              cy += g.y;
-              cz += g.z;
-            });
-            cx /= group.length;
-            cy /= group.length;
-            cz /= group.length;
-
-            group.forEach((p) => {
-              lx.push(p.x, cx, null);
-              ly.push(p.y, cy, null);
-              lz.push(p.z, cz, null);
-            });
-          });
-
-          traces.push({
-            x: lx,
-            y: ly,
-            z: lz,
-            mode: "lines",
-            type: "scatter3d",
-            line: {
-              color: "rgba(255,255,255,0.6)",
-              width: 4,
-            },
-            hoverinfo: "none",
-          });
-        }
-
-        traces.push({
-          x: x,
-          y: y,
-          z: z,
-          mode: "markers",
-          type: "scatter3d",
-          marker: {
-            size: s,
-            color: colorArray,
-            symbol: "circle",
-            opacity: 1,
-            line: {
-              color:
-                isSearchMode && customLineColors
-                  ? customLineColors
-                  : "rgba(255,255,255,0.3)",
-              width: isSearchMode && customLineWidths ? customLineWidths : 1,
-            },
-          },
-          hoverinfo: "none",
-        });
-
-        const layout = {
-          margin: { l: 0, r: 0, b: 0, t: 0 },
-          paper_bgcolor: "rgba(0,0,0,0)",
-          plot_bgcolor: "rgba(0,0,0,0)",
-          showlegend: false,
-          scene: {
-            xaxis: {
-              visible: false,
-              autorange: true,
-            },
-            yaxis: {
-              visible: false,
-              autorange: true,
-            },
-            zaxis: {
-              visible: false,
-              autorange: true,
-            },
-            dragmode: "orbit",
-            camera: {
-              eye: { x: 0.5, y: 0.5, z: 0.5 },
-              center: { x: 0, y: 0, z: 0 },
-            },
-            aspectmode: "cube",
-          },
-        };
-
-        Plotly.newPlot("plotly-div", traces, layout, {
-          displayModeBar: false,
-          scrollZoom: true,
-        }).then(setupInteractions);
-      }
-
-      function setupInteractions() {
-        const plot = document.getElementById("plotly-div");
-        const tooltip = document.getElementById("universe-tooltip");
-
-        plot.on("plotly_hover", (d) => {
-          if (universeState.isRotating) stopRotation();
-          const curveNum = d.points[0].curveNumber;
-          const pointIndex = document.getElementById("toggle-lines").checked
-            ? 1
-            : 0;
-          if (curveNum !== pointIndex) return;
-
-          const i = d.points[0].pointNumber;
-          const p = universeState.data[i];
-
-          document.getElementById(
-            "tooltip-img"
-          ).src = `${API_URL}/results/${currentSessionId}/clusters/${p.path}`;
-          document.getElementById("tooltip-name").textContent = p.filename;
-          document.getElementById("tooltip-cluster").textContent = p.cluster;
-          document.getElementById("tooltip-score").textContent = p.quality
-            ? p.quality.toFixed(0)
-            : "N/A";
-
-          tooltip.classList.remove("hidden");
-          document.onmousemove = (e) => {
-            tooltip.style.left = e.clientX + 20 + "px";
-            tooltip.style.top = e.clientY + 20 + "px";
-          };
-        });
-
-        plot.on("plotly_unhover", () => {
-          tooltip.classList.add("hidden");
-          document.onmousemove = null;
-          if (document.getElementById("toggle-rotate").checked) startRotation();
-        });
-
-        plot.on("plotly_click", (d) => {
-          const pointIndex = document.getElementById("toggle-lines").checked
-            ? 1
-            : 0;
-          if (d.points[0].curveNumber !== pointIndex) return;
-          const p = universeState.data[d.points[0].pointNumber];
-          if (p.cluster && p.cluster !== "Noise/Unique") {
-            document.querySelector('[data-tab="browser"]').click();
-            loadCluster(p.cluster);
-          }
-        });
-      }
-
-      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) {
-          universeState.isSearchActive = false;
-          drawPlot(universeState.originalColors, null, false);
-          return;
-        }
-
-        const btn = document.getElementById("btn-search");
-        const originalText = btn.textContent;
-        btn.textContent = "🔍";
-        btn.style.opacity = "0.6";
-
-        try {
-          const res = await fetch(`${API_URL}/semantic-search`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ query: q, top_k: 20 }),
-          });
-
-          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(15);
-                lineColors.push("rgba(251, 191, 36, 0.6)");
-                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(10);
-                lineColors.push("transparent");
-                lineWidths.push(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);
-            }
-          } else {
-            alert("No matching images found.");
-          }
-        } catch (e) {
-          console.error(e);
-          alert("Search Failed: " + e.message);
-        }
-
-        btn.textContent = originalText;
-        btn.style.opacity = "1";
-      }
-
-      function syncUniverseMap(deletedPaths) {
-        if (!universeState.data.length) return;
-        universeState.data = universeState.data.filter(
-          (p) => !deletedPaths.includes(p.path)
-        );
-        renderUniverseMap(universeState.data);
-      }
-
-      function startRotation() {
-        if (!universeState.isRotating) {
-          universeState.isRotating = true;
-          rotateLoop();
-        }
-      }
-
-      function stopRotation() {
-        universeState.isRotating = false;
-        cancelAnimationFrame(universeState.raf);
-      }
-
-      function rotateLoop() {
-        if (!universeState.isRotating) 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;
-
-        Plotly.relayout("plotly-div", {
-          "scene.camera.eye": { x: eyeX, y: eyeY, z: eyeZ },
-        });
-        universeState.raf = requestAnimationFrame(rotateLoop);
-      }
-
-      document.getElementById("toggle-rotate").onchange = () => {
-        if (universeState.isSearchActive) {
-          drawPlot(
-            universeState.lastSearchColors,
-            universeState.lastSearchSizes,
-            true,
-            universeState.lastSearchLineColors,
-            universeState.lastSearchLineWidths
-          );
-        } else {
-          drawPlot(universeState.originalColors, null, false);
-        }
-      };
-      document.getElementById("toggle-lines").onchange = () => {
-        const currentColors = universeState.data.map((_, i) => {
-          const plotData = document.getElementById("plotly-div").data;
-          if (plotData && plotData[plotData.length - 1]) {
-            return plotData[plotData.length - 1].marker.color[i];
-          }
-          return universeState.originalColors[i];
-        });
-
-        const isSearchMode = currentColors.some((c) => c === "#fbbf24");
-
-        if (isSearchMode) {
-          const sizes = universeState.data.map((p, i) =>
-            currentColors[i] === "#fbbf24" ? 24 : 0
-          );
-          drawPlot(currentColors, sizes, true);
-        } else {
-          drawPlot(universeState.originalColors, null, false);
-        }
-      };
-
-      document.querySelectorAll(".tab-button").forEach((btn) => {
-        btn.addEventListener("click", () => {
-          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-${btn.dataset.tab}`)
-            .classList.remove("hidden");
-
-          if (btn.dataset.tab === "universe") {
-            setTimeout(() => {
-              Plotly.Plots.resize("plotly-div");
-              if (document.getElementById("toggle-rotate").checked)
-                startRotation();
-            }, 50);
-          } else {
-            stopRotation();
-            universeState.isRotating = false;
-          }
-        });
-      });
-
-      function renderClusterList() {
-        const list = document.getElementById("cluster-list");
-        list.innerHTML = "";
-        Object.entries(currentGroups)
-          .sort((a, b) => b[1].length - a[1].length)
-          .forEach(([name, files]) => {
-            const btn = document.createElement("button");
-            btn.className =
-              "cluster-button w-full text-left p-2.5 rounded text-gray-400 hover:bg-[#333] text-xs font-medium mb-1";
-            btn.innerHTML = `<span class="text-white font-bold">${name}</span> <span class="text-gray-500 ml-1">(${files.length})</span>`;
-            btn.dataset.clusterName = name;
-            btn.onclick = () => loadCluster(name);
-            list.appendChild(btn);
-          });
-      }
-
-      function loadCluster(name) {
-        currentClusterName = name;
-        document
-          .querySelectorAll(".cluster-button")
-          .forEach((b) => b.classList.remove("active"));
-        document
-          .querySelector(`[data-cluster-name="${name}"]`)
-          ?.classList.add("active");
-
-        const gallery = document.getElementById("thumbnail-gallery");
-        gallery.innerHTML = "";
-        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) => {
-          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");
-          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}" class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110 cursor-zoom-in" onclick="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>
-                `;
-          div.querySelector("input").onclick = (e) => {
-            e.stopPropagation();
-            div.classList.toggle("selected", e.target.checked);
-          };
-          gallery.appendChild(div);
-        });
-      }
-
-      document.getElementById("delete-btn").onclick = async () => {
-        const paths = Array.from(
-          document.querySelectorAll(".thumbnail-card.selected")
-        ).map((c) => c.dataset.path);
-        if (!paths.length || !confirm(`Delete ${paths.length} images?`)) return;
-        try {
-          const res = await fetch(`${API_URL}/delete-images`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              session_id: currentSessionId,
-              image_paths: paths,
-            }),
-          });
-          const data = await res.json();
-          data.deleted.forEach((p) =>
-            document.querySelector(`[data-path="${p}"]`)?.remove()
-          );
-          syncUniverseMap(data.deleted);
-        } catch (e) {
-          alert(e);
-        }
-      };
-
-      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.");
-        const keep = sel[0].dataset.path;
-        if (!confirm(`Keep ${keep.split("/").pop()} and delete others?`))
-          return;
-        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: keep,
-            }),
-          });
-          const data = await res.json();
-          const old = currentGroups[currentClusterName];
-          const deleted = old.filter((p) => p !== data.image_kept);
-          syncUniverseMap(deleted);
-          currentGroups[currentClusterName] = [data.image_kept];
-          loadCluster(currentClusterName);
-          renderClusterList();
-        } catch (e) {
-          alert(e);
-        }
-      };
-
-      document.getElementById("delete-group-btn").onclick = async () => {
-        if (!confirm(`Delete group ${currentClusterName}?`)) return;
-        const res = await fetch(`${API_URL}/delete-group`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            session_id: currentSessionId,
-            cluster_name: currentClusterName,
-          }),
-        });
-        if (res.ok) {
-          delete currentGroups[currentClusterName];
-          currentClusterName = null;
-          renderClusterList();
-          document.getElementById("thumbnail-gallery").innerHTML = "";
-        }
-      };
-
-      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();
-
-          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);
-        }
-      };
-
-      function renderCharts(unique, dupes, groups) {
-        const ctx1 = document.getElementById("summary-chart").getContext("2d");
-        if (window.c3) window.c3.destroy();
-        window.c3 = new Chart(ctx1, {
-          type: "doughnut",
-          data: {
-            labels: ["Unique", "Duplicate"],
-            datasets: [
-              {
-                data: [unique, dupes],
-                backgroundColor: ["#3b82f6", "#ef4444"],
-                borderWidth: 0,
-              },
-            ],
-          },
-          options: {
-            maintainAspectRatio: false,
-            plugins: {
-              legend: { position: "bottom", 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]++;
-        });
-        const ctx2 = document
-          .getElementById("distribution-chart")
-          .getContext("2d");
-        if (window.c4) window.c4.destroy();
-        window.c4 = 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" } },
-              x: { grid: { display: false } },
-            },
-          },
-        });
-      }
-
-      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"));
-          document
-            .querySelector(`[data-path="${best.path}"]`)
-            ?.classList.add("selected");
-          document.querySelector(
-            `[data-path="${best.path}"] input`
-          ).checked = true;
-        }
-      };
-    </script>
+    <script src="script.js"></script>
   </body>
-</html>
+</html>

app/script.js

@@ -0,0 +1,937 @@
+const API_URL = "/api";
+
+const toggleConfigBtn = document.getElementById("toggle-config-btn");
+const controlPanel = document.getElementById("control-panel");
+const configArrow = document.getElementById("config-arrow");
+let isConfigOpen = true;
+
+toggleConfigBtn.addEventListener("click", () => {
+  isConfigOpen = !isConfigOpen;
+  if (isConfigOpen) {
+    controlPanel.style.maxHeight = "200px";
+    controlPanel.style.opacity = "1";
+    controlPanel.style.padding = "16px";
+    configArrow.style.transform = "rotate(0deg)";
+    document.getElementById("config-status-text").textContent =
+      "Hide Config";
+  } else {
+    controlPanel.style.maxHeight = "0px";
+    controlPanel.style.opacity = "0";
+    controlPanel.style.padding = "0px";
+    configArrow.style.transform = "rotate(-90deg)";
+    document.getElementById("config-status-text").textContent =
+      "Show Config";
+  }
+});
+
+let uploadedFiles = null;
+let currentSessionId = null;
+let currentGroups = {};
+let qualityScores = {};
+let currentClusterName = null;
+let universeState = {
+  data: [],
+  isRotating: true,
+  originalColors: [],
+  lastSearchColors: null,
+  lastSearchSizes: null,
+  lastSearchLineColors: null,
+  lastSearchLineWidths: null,
+  isSearchActive: false,
+};
+
+const loadingOverlay = document.getElementById("loading-overlay");
+const loadingText = document.getElementById("loading-text");
+const loadingBar = document.getElementById("loading-bar");
+
+document
+  .getElementById("image-folder-input")
+  .addEventListener("change", (e) => {
+    if (e.target.files.length > 0) {
+      uploadedFiles = e.target.files;
+      document.getElementById(
+        "image-folder-display"
+      ).value = `${e.target.files.length} files selected`;
+    }
+  });
+
+document
+  .getElementById("start-clustering-btn")
+  .addEventListener("click", async () => {
+    if (!uploadedFiles || uploadedFiles.length === 0)
+      return alert("Please select a folder first.");
+    if (isConfigOpen) toggleConfigBtn.click();
+
+    loadingOverlay.classList.remove("hidden");
+    loadingText.textContent = "Uploading images...";
+    loadingBar.style.width = "10%";
+
+    const fd = new FormData();
+    fd.append("algorithm", document.getElementById("algorithm").value);
+    let count = 0;
+    for (const f of uploadedFiles) {
+      fd.append("files", f, f.webkitRelativePath || f.name);
+      count++;
+      if (count % 20 === 0)
+        loadingBar.style.width = `${
+          10 + (count / uploadedFiles.length) * 40
+        }%`;
+    }
+
+    loadingText.textContent = "Analyzing (Semantic + Perceptual)...";
+    loadingBar.style.width = "60%";
+
+    try {
+      const res = await fetch(`${API_URL}/run-clustering`, {
+        method: "POST",
+        body: fd,
+      });
+      if (!res.ok) throw new Error((await res.json()).detail);
+      const data = await res.json();
+
+      currentSessionId = data.session_id;
+      qualityScores = data.quality_scores || {};
+
+      loadingBar.style.width = "100%";
+      populateUI(data);
+
+      setTimeout(() => loadingOverlay.classList.add("hidden"), 500);
+    } catch (e) {
+      alert("Error: " + e.message);
+      loadingOverlay.classList.add("hidden");
+    }
+  });
+
+function populateUI(data) {
+  currentGroups = data.results.groups || {};
+  const results = data.results;
+  const total = results.total_images || 0;
+  const unique = Object.keys(currentGroups).length;
+  const dupes = total - unique;
+
+  renderStatsDashboard(data, unique, dupes);
+
+  document.getElementById("summary-content").classList.add("hidden");
+  document.getElementById("summary-visuals").classList.remove("hidden");
+  document.getElementById("stat-total").textContent = total;
+  document.getElementById("stat-duplicates").textContent = dupes;
+  document.getElementById("stat-clusters").textContent = unique;
+  document.getElementById("stat-saving").textContent = total
+    ? ((dupes / total) * 100).toFixed(1) + "%"
+    : "0%";
+  renderCharts(unique, dupes, currentGroups);
+
+  renderClusterList();
+  document.getElementById("download-btn").classList.remove("hidden");
+  document.getElementById("download-btn").onclick = () =>
+    (window.location.href = `${API_URL}/download-results/${currentSessionId}`);
+  document.getElementById("delete-group-btn").classList.remove("hidden");
+
+  if (data.universe_map) renderUniverseMap(data.universe_map);
+
+  document.querySelector('[data-tab="browser"]').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;
+
+  const ctx1 = document.getElementById("chart-dist-new").getContext("2d");
+  if (window.c1) window.c1.destroy();
+  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]++;
+  });
+  window.c1 = 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" } },
+      },
+    },
+  });
+
+  const ctx2 = document
+    .getElementById("chart-ratio-new")
+    .getContext("2d");
+  if (window.c2) window.c2.destroy();
+  window.c2 = 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.`;
+}
+
+// === CINEMATIC UNIVERSE MAP ===
+function renderUniverseMap(points) {
+  if (!points.length) return;
+  universeState.data = points;
+  document.getElementById("universe-empty").classList.add("hidden");
+  document.getElementById("search-ui").classList.remove("hidden");
+  document.getElementById("map-controls").classList.remove("hidden");
+
+  const palette = [
+    "#ef4444",
+    "#3b82f6",
+    "#10b981",
+    "#f59e0b",
+    "#8b5cf6",
+    "#ec4899",
+    "#06b6d4",
+    "#84cc16",
+    "#f97316",
+    "#6366f1",
+    "#14b8a6",
+    "#d946ef",
+    "#eab308",
+    "#f43f5e",
+    "#a855f7",
+  ];
+
+  const clusterColorMap = {};
+  let colorIndex = 0;
+
+  points.forEach((p) => {
+    if (p.cluster !== "Noise/Unique" && !clusterColorMap[p.cluster]) {
+      clusterColorMap[p.cluster] = palette[colorIndex % palette.length];
+      colorIndex++;
+    }
+  });
+
+  const colors = [];
+  points.forEach((p) => {
+    if (p.cluster === "Noise/Unique") {
+      colors.push("#444444");
+    } else {
+      colors.push(clusterColorMap[p.cluster]);
+    }
+  });
+  universeState.originalColors = colors;
+  drawPlot(colors, null, false);
+  if (document.getElementById("toggle-rotate").checked) startRotation();
+}
+
+function drawPlot(
+  colorArray,
+  sizes = null,
+  isSearchMode = false,
+  customLineColors = null,
+  customLineWidths = null
+) {
+  const points = universeState.data;
+  const x = points.map((p) => p.x),
+    y = points.map((p) => p.y),
+    z = points.map((p) => p.z);
+  const s =
+    sizes || points.map((p) => (p.cluster === "Noise/Unique" ? 8 : 16));
+
+  const traces = [];
+
+  if (document.getElementById("toggle-lines").checked && !isSearchMode) {
+    const clusters = {};
+    points.forEach((p) => {
+      if (!clusters[p.cluster]) clusters[p.cluster] = [];
+      clusters[p.cluster].push(p);
+    });
+
+    const lx = [],
+      ly = [],
+      lz = [];
+    Object.entries(clusters).forEach(([name, group]) => {
+      if (name === "Noise/Unique" || group.length < 2) return;
+      let cx = 0,
+        cy = 0,
+        cz = 0;
+      group.forEach((g) => {
+        cx += g.x;
+        cy += g.y;
+        cz += g.z;
+      });
+      cx /= group.length;
+      cy /= group.length;
+      cz /= group.length;
+
+      group.forEach((p) => {
+        lx.push(p.x, cx, null);
+        ly.push(p.y, cy, null);
+        lz.push(p.z, cz, null);
+      });
+    });
+
+    traces.push({
+      x: lx,
+      y: ly,
+      z: lz,
+      mode: "lines",
+      type: "scatter3d",
+      line: {
+        color: "rgba(255,255,255,0.6)",
+        width: 4,
+      },
+      hoverinfo: "none",
+    });
+  }
+
+  traces.push({
+    x: x,
+    y: y,
+    z: z,
+    mode: "markers",
+    type: "scatter3d",
+    marker: {
+      size: s,
+      color: colorArray,
+      symbol: "circle",
+      opacity: 1,
+      line: {
+        color:
+          isSearchMode && customLineColors
+            ? customLineColors
+            : "rgba(255,255,255,0.3)",
+        width: isSearchMode && customLineWidths ? customLineWidths : 1,
+      },
+    },
+    hoverinfo: "none",
+  });
+
+  const layout = {
+    margin: { l: 0, r: 0, b: 0, t: 0 },
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    showlegend: false,
+    scene: {
+      xaxis: {
+        visible: false,
+        autorange: true,
+      },
+      yaxis: {
+        visible: false,
+        autorange: true,
+      },
+      zaxis: {
+        visible: false,
+        autorange: true,
+      },
+      dragmode: "orbit",
+      camera: {
+        eye: { x: 0.5, y: 0.5, z: 0.5 },
+        center: { x: 0, y: 0, z: 0 },
+      },
+      aspectmode: "cube",
+    },
+  };
+
+  Plotly.newPlot("plotly-div", traces, layout, {
+    displayModeBar: false,
+    scrollZoom: true,
+  }).then(setupInteractions);
+}
+
+function setupInteractions() {
+  const plot = document.getElementById("plotly-div");
+  const tooltip = document.getElementById("universe-tooltip");
+
+  plot.on("plotly_hover", (d) => {
+    if (universeState.isRotating) stopRotation();
+    const curveNum = d.points[0].curveNumber;
+    const pointIndex = document.getElementById("toggle-lines").checked
+      ? 1
+      : 0;
+    if (curveNum !== pointIndex) return;
+
+    const i = d.points[0].pointNumber;
+    const p = universeState.data[i];
+
+    document.getElementById(
+      "tooltip-img"
+    ).src = `${API_URL}/results/${currentSessionId}/clusters/${p.path}`;
+    document.getElementById("tooltip-name").textContent = p.filename;
+    document.getElementById("tooltip-cluster").textContent = p.cluster;
+    document.getElementById("tooltip-score").textContent = p.quality
+      ? p.quality.toFixed(0)
+      : "N/A";
+
+    tooltip.classList.remove("hidden");
+    document.onmousemove = (e) => {
+      tooltip.style.left = e.clientX + 20 + "px";
+      tooltip.style.top = e.clientY + 20 + "px";
+    };
+  });
+
+  plot.on("plotly_unhover", () => {
+    tooltip.classList.add("hidden");
+    document.onmousemove = null;
+    if (document.getElementById("toggle-rotate").checked) startRotation();
+  });
+
+  plot.on("plotly_click", (d) => {
+    const pointIndex = document.getElementById("toggle-lines").checked
+      ? 1
+      : 0;
+    if (d.points[0].curveNumber !== pointIndex) return;
+    const p = universeState.data[d.points[0].pointNumber];
+    if (p.cluster && p.cluster !== "Noise/Unique") {
+      document.querySelector('[data-tab="browser"]').click();
+      loadCluster(p.cluster);
+    }
+  });
+}
+
+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) {
+    universeState.isSearchActive = false;
+    drawPlot(universeState.originalColors, null, false);
+    return;
+  }
+
+  const btn = document.getElementById("btn-search");
+  const originalText = btn.textContent;
+  btn.textContent = "🔍";
+  btn.style.opacity = "0.6";
+
+  try {
+    const res = await fetch(`${API_URL}/semantic-search`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query: q, top_k: 20 }),
+    });
+
+    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(15);
+          lineColors.push("rgba(251, 191, 36, 0.6)");
+          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(10);
+          lineColors.push("transparent");
+          lineWidths.push(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);
+      }
+    } else {
+      alert("No matching images found.");
+    }
+  } catch (e) {
+    console.error(e);
+    alert("Search Failed: " + e.message);
+  }
+
+  btn.textContent = originalText;
+  btn.style.opacity = "1";
+}
+
+function syncUniverseMap(deletedPaths) {
+  if (!universeState.data.length) return;
+  universeState.data = universeState.data.filter(
+    (p) => !deletedPaths.includes(p.path)
+  );
+  renderUniverseMap(universeState.data);
+}
+
+function startRotation() {
+  if (!universeState.isRotating) {
+    universeState.isRotating = true;
+    rotateLoop();
+  }
+}
+
+function stopRotation() {
+  universeState.isRotating = false;
+  cancelAnimationFrame(universeState.raf);
+}
+
+function rotateLoop() {
+  if (!universeState.isRotating) 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;
+
+  Plotly.relayout("plotly-div", {
+    "scene.camera.eye": { x: eyeX, y: eyeY, z: eyeZ },
+  });
+  universeState.raf = requestAnimationFrame(rotateLoop);
+}
+
+document.getElementById("toggle-rotate").onchange = () => {
+  if (universeState.isSearchActive) {
+    drawPlot(
+      universeState.lastSearchColors,
+      universeState.lastSearchSizes,
+      true,
+      universeState.lastSearchLineColors,
+      universeState.lastSearchLineWidths
+    );
+  } else {
+    drawPlot(universeState.originalColors, null, false);
+  }
+};
+document.getElementById("toggle-lines").onchange = () => {
+  const currentColors = universeState.data.map((_, i) => {
+    const plotData = document.getElementById("plotly-div").data;
+    if (plotData && plotData[plotData.length - 1]) {
+      return plotData[plotData.length - 1].marker.color[i];
+    }
+    return universeState.originalColors[i];
+  });
+
+  const isSearchMode = currentColors.some((c) => c === "#fbbf24");
+
+  if (isSearchMode) {
+    const sizes = universeState.data.map((p, i) =>
+      currentColors[i] === "#fbbf24" ? 24 : 0
+    );
+    drawPlot(currentColors, sizes, true);
+  } else {
+    drawPlot(universeState.originalColors, null, false);
+  }
+};
+
+document.querySelectorAll(".tab-button").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    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-${btn.dataset.tab}`)
+      .classList.remove("hidden");
+
+    if (btn.dataset.tab === "universe") {
+      setTimeout(() => {
+        Plotly.Plots.resize("plotly-div");
+        if (document.getElementById("toggle-rotate").checked)
+          startRotation();
+      }, 50);
+    } else {
+      stopRotation();
+      universeState.isRotating = false;
+    }
+  });
+});
+
+function renderClusterList() {
+  const list = document.getElementById("cluster-list");
+  list.innerHTML = "";
+  Object.entries(currentGroups)
+    .sort((a, b) => b[1].length - a[1].length)
+    .forEach(([name, files]) => {
+      const btn = document.createElement("button");
+      btn.className =
+        "cluster-button w-full text-left p-2.5 rounded text-gray-400 hover:bg-[#333] text-xs font-medium mb-1";
+      btn.innerHTML = `<span class="text-white font-bold">${name}</span> <span class="text-gray-500 ml-1">(${files.length})</span>`;
+      btn.dataset.clusterName = name;
+      btn.onclick = () => loadCluster(name);
+      list.appendChild(btn);
+    });
+}
+
+function loadCluster(name) {
+  currentClusterName = name;
+  document
+    .querySelectorAll(".cluster-button")
+    .forEach((b) => b.classList.remove("active"));
+  document
+    .querySelector(`[data-cluster-name="${name}"]`)
+    ?.classList.add("active");
+
+  const gallery = document.getElementById("thumbnail-gallery");
+  gallery.innerHTML = "";
+  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) => {
+    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");
+    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}" class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110 cursor-zoom-in" onclick="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>
+            `;
+    div.querySelector("input").onclick = (e) => {
+      e.stopPropagation();
+      div.classList.toggle("selected", e.target.checked);
+    };
+    gallery.appendChild(div);
+  });
+}
+
+document.getElementById("delete-btn").onclick = async () => {
+  const paths = Array.from(
+    document.querySelectorAll(".thumbnail-card.selected")
+  ).map((c) => c.dataset.path);
+  if (!paths.length || !confirm(`Delete ${paths.length} images?`)) return;
+  try {
+    const res = await fetch(`${API_URL}/delete-images`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        session_id: currentSessionId,
+        image_paths: paths,
+      }),
+    });
+    const data = await res.json();
+    data.deleted.forEach((p) =>
+      document.querySelector(`[data-path="${p}"]`)?.remove()
+    );
+    syncUniverseMap(data.deleted);
+  } catch (e) {
+    alert(e);
+  }
+};
+
+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.");
+  const keep = sel[0].dataset.path;
+  if (!confirm(`Keep ${keep.split("/").pop()} and delete others?`))
+    return;
+  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: keep,
+      }),
+    });
+    const data = await res.json();
+    const old = currentGroups[currentClusterName];
+    const deleted = old.filter((p) => p !== data.image_kept);
+    syncUniverseMap(deleted);
+    currentGroups[currentClusterName] = [data.image_kept];
+    loadCluster(currentClusterName);
+    renderClusterList();
+  } catch (e) {
+    alert(e);
+  }
+};
+
+document.getElementById("delete-group-btn").onclick = async () => {
+  if (!confirm(`Delete group ${currentClusterName}?`)) return;
+  const res = await fetch(`${API_URL}/delete-group`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      session_id: currentSessionId,
+      cluster_name: currentClusterName,
+    }),
+  });
+  if (res.ok) {
+    delete currentGroups[currentClusterName];
+    currentClusterName = null;
+    renderClusterList();
+    document.getElementById("thumbnail-gallery").innerHTML = "";
+  }
+};
+
+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();
+
+    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);
+  }
+};
+
+function renderCharts(unique, dupes, groups) {
+  const ctx1 = document.getElementById("summary-chart").getContext("2d");
+  if (window.c3) window.c3.destroy();
+  window.c3 = new Chart(ctx1, {
+    type: "doughnut",
+    data: {
+      labels: ["Unique", "Duplicate"],
+      datasets: [
+        {
+          data: [unique, dupes],
+          backgroundColor: ["#3b82f6", "#ef4444"],
+          borderWidth: 0,
+        },
+      ],
+    },
+    options: {
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { position: "bottom", 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]++;
+  });
+  const ctx2 = document
+    .getElementById("distribution-chart")
+    .getContext("2d");
+  if (window.c4) window.c4.destroy();
+  window.c4 = 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" } },
+        x: { grid: { display: false } },
+      },
+    },
+  });
+}
+
+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"));
+    document
+      .querySelector(`[data-path="${best.path}"]`)
+      ?.classList.add("selected");
+    document.querySelector(
+      `[data-path="${best.path}"] input`
+    ).checked = true;
+  }
+};

app/styles.css

@@ -0,0 +1,395 @@
+/* --- STYLES --- */
+body {
+  background-color: #121212;
+  color: #e0e0e0;
+  font-family: "Outfit", sans-serif;
+  overflow: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
+
+.tab-button {
+  transition: all 0.2s ease;
+  border-bottom: 2px solid transparent;
+  position: relative;
+}
+.tab-button.active {
+  color: #8b5cf6;
+  border-bottom-color: #8b5cf6;
+  background: rgba(139, 92, 246, 0.05);
+}
+.tab-button:hover {
+  color: #fff;
+}
+
+.cluster-button {
+  transition: all 0.2s ease;
+}
+.cluster-button.active {
+  background-color: #8b5cf6;
+  color: white;
+  border-left: 3px solid #c4b5fd;
+}
+
+.thumbnail-card {
+  background-color: #1e1e1e;
+  border: 1px solid #333;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+.thumbnail-card:hover {
+  border-color: #8b5cf6;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+.thumbnail-card.selected {
+  border-color: #8b5cf6;
+  background-color: rgba(139, 92, 246, 0.1);
+  ring: 1px solid #8b5cf6;
+}
+.thumbnail-card.best-quality {
+  border: 2px solid #10b981;
+  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
+}
+
+.quality-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  color: white;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+  font-family: "JetBrains Mono", monospace;
+  cursor: help;
+}
+.best-badge {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  background: linear-gradient(135deg, #10b981, #059669);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 800;
+  color: white;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+}
+
+.quality-details {
+  position: absolute;
+  top: 20px;
+  right: 0;
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  padding: 8px;
+  font-size: 11px;
+  white-space: nowrap;
+  z-index: 100;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+  display: none;
+  min-width: 120px;
+  pointer-events: none;
+}
+.quality-badge:hover .quality-details {
+  display: block;
+}
+.quality-metric {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 2px 0;
+}
+.quality-metric-label {
+  color: #9ca3af;
+}
+.quality-metric-value {
+  color: #e5e7eb;
+  font-weight: 600;
+}
+
+/* --- CINEMATIC UNIVERSE MAP --- */
+#tab-universe {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at center, #0f0920 0%, #000000 100%);
+  overflow: hidden;
+}
+
+#plotly-div {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: transparent;
+  transition: opacity 0.8s ease;
+}
+
+.star-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.6;
+}
+
+.stars-small {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  box-shadow: 1744px 122px 2px rgba(255, 255, 255, 0.8),
+    134px 1321px 1px rgba(255, 255, 255, 0.6),
+    92px 859px 1px rgba(139, 92, 246, 0.4), 800px 600px 1px #fff,
+    1200px 400px 1px rgba(255, 255, 255, 0.7),
+    300px 1100px 1px rgba(167, 139, 250, 0.5);
+  animation: animStar 150s linear infinite, twinkle 3s ease-in-out infinite;
+}
+
+.stars-medium {
+  width: 2px;
+  height: 2px;
+  background: transparent;
+  box-shadow: 122px 231px 3px rgba(139, 92, 246, 0.9),
+    421px 521px 2px rgba(255, 255, 255, 0.8),
+    900px 300px 2px rgba(167, 139, 250, 0.7),
+    600px 800px 2px rgba(255, 255, 255, 0.6);
+  animation: animStar 100s linear infinite,
+    glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes animStar {
+  from {
+    transform: translateY(0px);
+  }
+  to {
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes glow {
+  0% {
+    filter: brightness(1);
+  }
+  100% {
+    filter: brightness(1.5) drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
+  }
+}
+
+#tab-universe::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+      ellipse at 20% 30%,
+      rgba(139, 92, 246, 0.15) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse at 80% 70%,
+      rgba(59, 130, 246, 0.12) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse at 50% 50%,
+      rgba(167, 139, 250, 0.08) 0%,
+      transparent 60%
+    );
+  animation: nebulaPulse 8s ease-in-out infinite alternate;
+  z-index: 0;
+  pointer-events: none;
+}
+
+@keyframes nebulaPulse {
+  0% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0.6;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes floatIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.stat-box {
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 12px;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.stat-box::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: #333;
+}
+.stat-box.purple::after {
+  background: #8b5cf6;
+}
+.stat-box.green::after {
+  background: #10b981;
+}
+.stat-box.red::after {
+  background: #ef4444;
+}
+.stat-box.blue::after {
+  background: #3b82f6;
+}
+
+.pipeline-step {
+  position: relative;
+  padding-left: 20px;
+  border-left: 2px solid #333;
+  padding-bottom: 20px;
+}
+.pipeline-step:last-child {
+  border-left: 2px solid transparent;
+}
+.pipeline-step::before {
+  content: "";
+  position: absolute;
+  left: -5px;
+  top: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #555;
+}
+.pipeline-step.done::before {
+  background: #10b981;
+  box-shadow: 0 0 8px #10b981;
+}
+.pipeline-step.done {
+  border-left-color: #10b981;
+}
+
+.glass-panel-ui {
+  background: rgba(20, 20, 25, 0.8);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+  pointer-events: auto;
+  z-index: 50;
+}
+
+.search-container {
+  position: absolute;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400px;
+  max-width: 90%;
+  border-radius: 99px;
+  padding: 4px;
+  display: flex;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: floatIn 0.8s ease-out;
+}
+
+.search-container:focus-within {
+  background: rgba(20, 20, 25, 0.95);
+  border-color: #8b5cf6;
+  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4), 0 0 60px rgba(139, 92, 246, 0.2),
+    inset 0 0 20px rgba(139, 92, 246, 0.1);
+  transform: translateX(-50%) scale(1.02);
+}
+
+.search-input {
+  background: transparent;
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  width: 100%;
+  outline: none;
+  font-size: 14px;
+}
+
+.bottom-controls {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 16px;
+  padding: 8px 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  animation: floatIn 1s ease-out 0.3s backwards;
+  transition: all 0.3s ease;
+}
+
+.bottom-controls:hover {
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.2);
+  transform: translateX(-50%) translateY(-2px);
+}
+
+.toggle-switch {
+  appearance: none;
+  width: 36px;
+  height: 20px;
+  background: #334155;
+  border-radius: 20px;
+  position: relative;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.toggle-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+.toggle-switch:checked {
+  background: #8b5cf6;
+}
+.toggle-switch:checked::after {
+  transform: translateX(16px);
+}