Spaces:

webml-community
/

pplx-embed-web

Running

App Files Files Community

Xenova HF Staff commited on 14 days ago

Commit

daa5270

verified ·

1 Parent(s): 9122a9c

Update index.html

Browse files

Files changed (1) hide show

index.html +740 -17

index.html CHANGED Viewed

@@ -1,19 +1,742 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>pplx-embed web</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background-color: #121212;
+        font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        color: #ffffff;
+      }
+      #canvas-container {
+        width: 100vw;
+        height: 100vh;
+        touch-action: none;
+        cursor: grab;
+      }
+      #canvas-container:active {
+        cursor: grabbing;
+      }
+      #ui-layer {
+        position: absolute;
+        bottom: 40px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        pointer-events: none;
+      }
+      .header {
+        text-align: center;
+        pointer-events: auto;
+      }
+      .title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        letter-spacing: 1px;
+        opacity: 0.9;
+      }
+      .subtitle {
+        font-size: 0.85rem;
+        opacity: 0.5;
+        margin-top: 4px;
+      }
+      .search-container {
+        pointer-events: auto;
+        background: rgba(40, 42, 44, 0.8);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 8px 16px;
+        border-radius: 30px;
+        display: flex;
+        align-items: center;
+        backdrop-filter: blur(10px);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        transition: all 0.3s ease;
+      }
+      .search-container:focus-within {
+        border-color: rgba(255, 255, 255, 0.4);
+        box-shadow: 0 10px 40px rgba(255, 255, 255, 0.05);
+      }
+      .search-container svg {
+        width: 18px;
+        height: 18px;
+        fill: #888;
+        margin-right: 10px;
+      }
+      input[type="text"] {
+        background: transparent;
+        border: none;
+        color: white;
+        font-size: 1.1rem;
+        font-family: inherit;
+        outline: none;
+        width: 320px;
+      }
+      input[type="text"]::placeholder {
+        color: #888;
+      }
+      input[type="text"]:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      /* Loading overlay */
+      #loading-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background: #121212;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        transition: opacity 0.6s ease;
+      }
+      #loading-overlay.fade-out {
+        opacity: 0;
+        pointer-events: none;
+      }
+      #loading-overlay .spinner {
+        width: 48px;
+        height: 48px;
+        border: 4px solid rgba(255, 255, 255, 0.15);
+        border-top-color: #ffffff;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      #loading-overlay .loading-title {
+        font-size: 3rem;
+        font-weight: 700;
+        letter-spacing: 1.5px;
+        opacity: 0.95;
+      }
+      #loading-overlay .loading-status {
+        font-size: 0.95rem;
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Fullscreen loading overlay -->
+    <div id="loading-overlay">
+      <div class="loading-title">pplx-embed web</div>
+      <div class="spinner"></div>
+      <div class="loading-status" id="loadingStatus">Loading model...</div>
+    </div>
+    <div id="canvas-container"></div>
+    <div id="ui-layer">
+      <div class="search-container">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+          />
+        </svg>
+        <input type="text" id="searchInput" placeholder="Loading semantic search model..." disabled />
+      </div>
+      <div class="header">
+        <div class="title">pplx-embed web</div>
+        <div class="subtitle">Drag to spin, semantic search is initializing...</div>
+      </div>
+    </div>
+    <script type="module">
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js";
+      import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.0.0-next.4";
+      const DEFAULT_SENTENCES = [
+        // Weather
+        "The sun peeked through the clouds after a drizzly morning.",
+        "A gentle breeze rustled the leaves as we walked along the shoreline.",
+        "Heavy rains caused flooding in several low-lying neighborhoods.",
+        "It was so hot that even the birds sought shade under the palm trees.",
+        "By midnight, the temperature had dropped below freezing.",
+        "Thunderstorms lit up the sky with flashes of lightning.",
+        "A thick fog settled over the city streets at dawn.",
+        "The air smelled of ozone after the sudden hailstorm.",
+        "I watched the snowflakes drift silently onto the ground.",
+        "A double rainbow appeared after the rain shower.",
+        "The humidity soared to uncomfortable levels by midday.",
+        "Dust devils formed in the dry desert plains.",
+        "The barometer readings indicated an approaching front.",
+        "A sudden gust of wind knocked over the garden chairs.",
+        "Light drizzle turned into a torrential downpour within minutes.",
+        // Technology
+        "The new smartphone features a foldable display and 5G connectivity.",
+        "In the world of AI, transformers have revolutionized natural language processing.",
+        "Quantum computing promises to solve problems beyond classical computers' reach.",
+        "Blockchain technology is being explored for secure voting systems.",
+        "Virtual reality headsets are becoming more affordable and accessible.",
+        "The rise of electric vehicles is reshaping the automotive industry.",
+        "Cloud computing allows businesses to scale resources dynamically.",
+        "Machine learning algorithms can now predict stock market trends with surprising accuracy.",
+        "Augmented reality applications are transforming retail experiences.",
+        "The Internet of Things connects everyday devices to the web for smarter living.",
+        "Cybersecurity threats are evolving, requiring constant vigilance.",
+        "3D printing is enabling rapid prototyping and custom manufacturing.",
+        "Edge computing reduces latency by processing data closer to the source.",
+        "Biometric authentication methods are enhancing security in devices.",
+        "Wearable technology is tracking health metrics in real-time.",
+        "Artificial intelligence is being used to create realistic deepfakes.",
+        // Cooking
+        "Preheat the oven to 375°F before you start mixing the batter.",
+        "She finely chopped the garlic and sautéed it in two tablespoons of olive oil.",
+        "A pinch of saffron adds a beautiful color and aroma to traditional paella.",
+        "If the soup is too salty, add a peeled potato to absorb excess sodium.",
+        "Let the bread dough rise for at least an hour in a warm, draft-free spot.",
+        "Marinate the chicken overnight in a blend of citrus and spices.",
+        "Use a cast-iron skillet to sear the steak on high heat.",
+        "Whisk the egg whites until they form stiff peaks.",
+        "Fold in the chocolate chips gently to keep the batter airy.",
+        "Brush the pastry with an egg wash for a golden finish.",
+        "Slow-roast the pork shoulder until it falls off the bone.",
+        "Garnish the salad with toasted nuts and fresh herbs.",
+        "Deglaze the pan with white wine for a rich sauce.",
+        "Simmer the curry paste until the aroma intensifies.",
+        "Let the risotto rest before serving to thicken slightly.",
+        // Sports
+        "He dribbled past two defenders and sank a three-pointer at the buzzer.",
+        "The marathon runner kept a steady pace despite the sweltering heat.",
+        "Their home team clinched the championship with a last-minute goal.",
+        "NASCAR fans cheered as the cars roared around the oval track.",
+        "She landed a perfect triple axel at the figure skating championship.",
+        "The cyclist pedaled up the steep hill in record time.",
+        "He pitched a no-hitter during the high school baseball game.",
+        "The quarterback threw a touchdown pass under heavy pressure.",
+        "They scored a hat-trick in the hockey final.",
+        "The boxer delivered a swift uppercut in the final round.",
+        "Surfers caught massive waves at dawn on the Pacific coast.",
+        "Fans erupted when the underdog scored the winning goal.",
+        "The swimmer broke the national record in the 200m freestyle.",
+        "The gymnast executed a flawless routine on the balance beam.",
+        "The rugby team celebrated their victory with a traditional haka.",
+        // Finance
+        "The stock market rallied after positive earnings reports.",
+        "Investors are closely watching interest rate changes by the Federal Reserve.",
+        "Cryptocurrency prices have been extremely volatile this year.",
+        "Diversification is key to managing investment risk effectively.",
+        "Inflation rates have reached a 40-year high, impacting consumer spending.",
+        "Many companies are adopting ESG criteria to attract socially conscious investors.",
+        "The bond market is reacting to geopolitical tensions and supply chain disruptions.",
+        "Venture capital funding for startups has surged in the tech sector.",
+        "Exchange-traded funds (ETFs) offer a way to invest in diversified portfolios.",
+        "The global economy is recovering from the pandemic, but challenges remain.",
+        "Central banks are exploring digital currencies to modernize payment systems.",
+        "Retail investors are increasingly participating in the stock market through apps.",
+        "Hedge funds are using complex algorithms to gain an edge in trading.",
+        "Real estate prices have skyrocketed in urban areas due to low inventory.",
+        "The startup raised $10 million in its Series A funding round.",
+        // Music
+        "The symphony orchestra played a hauntingly beautiful melody.",
+        "She strummed her guitar softly, filling the room with a warm sound.",
+        "The DJ mixed tracks seamlessly, keeping the crowd dancing all night.",
+        "His voice soared during the high notes of the ballad.",
+        "The band played an acoustic set in the intimate coffee shop.",
+        "Jazz musicians often improvise solos based on the chord changes.",
+        "The opera singer hit the high C with perfect pitch.",
+        "The choir harmonized beautifully, filling the church with sound.",
+        "He composed a symphony that was performed at the concert hall.",
+        "The singer-songwriter wrote heartfelt lyrics about love and loss.",
+        "The rock band headlined the festival, drawing a massive crowd.",
+        "Hip-hop artists use rhythm and rhyme to tell powerful stories.",
+        "The violinist played a virtuosic solo that left the audience in awe.",
+        "Folk music often reflects the culture and traditions of a community.",
+        "The gospel choir lifted spirits with their uplifting performance.",
+        // History
+        "The fall of the Berlin Wall in 1989 marked the end of the Cold War.",
+        "Ancient Egypt's pyramids are a testament to their architectural prowess.",
+        "Europe's Renaissance period sparked a revival in art and science.",
+        "The signing of the Declaration of Independence in 1776 established the United States.",
+        "The Industrial Revolution transformed economies and societies worldwide.",
+        "Rome was the center of a vast empire that influenced law and governance.",
+        "The discovery of the New World by Christopher Columbus in 1492 changed global trade.",
+        "The French Revolution in 1789 led to significant political and social change.",
+        "World War II was a global conflict that reshaped international relations.",
+        "The fall of the Roman Empire in 476 AD marked the beginning of the Middle Ages.",
+        "The invention of the printing press revolutionized the spread of knowledge.",
+        "The Cold War was characterized by political tension between the U.S. and the Soviet Union.",
+        "The ancient Silk Road connected East and West through trade routes.",
+        "The signing of the Magna Carta in 1215 established principles of due process.",
+        "Exploration during the Age of Discovery expanded European empires across the globe.",
+      ];
+      const TOTAL_DOCS = DEFAULT_SENTENCES.length;
+      const TOTAL_SPREADS = Math.ceil(TOTAL_DOCS / 2);
+      const MODEL_ID = "perplexity-ai/pplx-embed-v1-0.6b";
+      const similarityScores = Array(TOTAL_DOCS + 1).fill(null);
+      // slotToDoc[slot] gives the 1-indexed doc ID to display at carousel slot (0-indexed).
+      // Default is identity: slot i shows doc i+1.
+      const slotToDoc = Array.from({ length: TOTAL_DOCS }, (_, i) => i + 1);
+      let extractor = null;
+      let docEmbeddings = null;
+      let latestSearchToken = 0;
+      let searchDebounceId = null;
+      const searchInput = document.getElementById("searchInput");
+      const subtitle = document.querySelector(".subtitle");
+      const loadingOverlay = document.getElementById("loading-overlay");
+      const loadingStatus = document.getElementById("loadingStatus");
+      function dot(a, b) {
+        let sum = 0;
+        for (let i = 0; i < a.length; i++) {
+          sum += a[i] * b[i];
+        }
+        return sum;
+      }
+      function wrapText(ctx, text, x, y, maxWidth, lineHeight, maxLines) {
+        const words = text.split(" ");
+        const lines = [];
+        let line = "";
+        for (let i = 0; i < words.length; i++) {
+          const testLine = line ? `${line} ${words[i]}` : words[i];
+          const metrics = ctx.measureText(testLine);
+          if (metrics.width > maxWidth && line) {
+            lines.push(line);
+            line = words[i];
+            if (lines.length === maxLines - 1) {
+              break;
+            }
+          } else {
+            line = testLine;
+          }
+        }
+        if (line) {
+          lines.push(line);
+        }
+        if (lines.length > maxLines) {
+          lines.length = maxLines;
+        }
+        if (lines.length === maxLines && words.join(" ") !== lines.join(" ")) {
+          const last = lines[maxLines - 1];
+          lines[maxLines - 1] = `${last.replace(/[.,;:!?]?$/, "")}…`;
+        }
+        const startY = y - ((lines.length - 1) * lineHeight) / 2;
+        lines.forEach((lineText, idx) => {
+          ctx.fillText(lineText, x, startY + idx * lineHeight);
+        });
+      }
+      function formatScore(score) {
+        return score == null ? "--" : score.toFixed(3);
+      }
+      function jumpToDocument(docId) {
+        const targetSpread = Math.floor((docId - 1) / 2);
+        const targetAngleDeg = -targetSpread * 60;
+        const currentDeg = (targetBaseY * 180) / Math.PI;
+        const fullCylinderDeg = TOTAL_SPREADS * 60;
+        let diff = (targetAngleDeg - currentDeg) % fullCylinderDeg;
+        if (diff > fullCylinderDeg / 2) diff -= fullCylinderDeg;
+        if (diff < -fullCylinderDeg / 2) diff += fullCylinderDeg;
+        targetBaseY = ((currentDeg + diff) * Math.PI) / 180;
+      }
+      function dismissLoadingOverlay() {
+        loadingOverlay.classList.add("fade-out");
+        loadingOverlay.addEventListener(
+          "transitionend",
+          () => {
+            loadingOverlay.remove();
+          },
+          { once: true },
+        );
+      }
+      async function initializeSemanticSearch() {
+        loadingStatus.textContent = "Loading model...";
+        subtitle.textContent = "Loading embedding model on WebGPU...";
+        try {
+          extractor = await pipeline("feature-extraction", MODEL_ID, {
+            dtype: "q4",
+            device: "webgpu",
+            revision: "refs/pr/10",
+          });
+          loadingStatus.textContent = "Embedding documents...";
+          subtitle.textContent = "Embedding all documents...";
+          const embeddingTensor = await extractor(DEFAULT_SENTENCES, {
+            pooling: "mean",
+            normalize: true,
+          });
+          docEmbeddings = embeddingTensor.tolist();
+          searchInput.disabled = false;
+          searchInput.placeholder = `Semantic search across ${TOTAL_DOCS} docs...`;
+          subtitle.textContent = "Drag to spin, or type to search semantically";
+          dismissLoadingOverlay();
+        } catch (err) {
+          console.error("Semantic search initialization failed:", err);
+          subtitle.textContent = "Semantic search failed to initialize on this device";
+          searchInput.placeholder = "Semantic search unavailable";
+          loadingStatus.textContent = "Failed to load model";
+          setTimeout(dismissLoadingOverlay, 2000);
+        }
+      }
+      async function runSemanticSearch(query) {
+        if (!extractor || !docEmbeddings) return;
+        const token = ++latestSearchToken;
+        idleAutoSpin = false;
+        subtitle.textContent = "Searching...";
+        const queryEmbeddingTensor = await extractor([query], {
+          pooling: "mean",
+          normalize: true,
+        });
+        if (token !== latestSearchToken) return;
+        const queryEmbedding = queryEmbeddingTensor.tolist()[0];
+        // Compute similarity for every document
+        const scored = [];
+        for (let i = 1; i <= TOTAL_DOCS; i++) {
+          const score = dot(queryEmbedding, docEmbeddings[i - 1]);
+          similarityScores[i] = score;
+          scored.push({ docId: i, score });
+        }
+        // Sort descending by score
+        scored.sort((a, b) => b.score - a.score);
+        const bestDocId = scored[0].docId;
+        const bestScore = scored[0].score;
+        const bestSlot = bestDocId - 1; // 0-indexed carousel slot
+        // Place best match at its original slot, then alternate left/right
+        // rank 0 → bestSlot, rank 1 → bestSlot-1, rank 2 → bestSlot+1,
+        // rank 3 → bestSlot-2, rank 4 → bestSlot+2, …
+        slotToDoc[bestSlot] = scored[0].docId;
+        for (let r = 1; r < TOTAL_DOCS; r++) {
+          const offset = Math.ceil(r / 2);
+          const dir = r % 2 === 1 ? -1 : 1;
+          const slot = (((bestSlot + dir * offset) % TOTAL_DOCS) + TOTAL_DOCS) % TOTAL_DOCS;
+          slotToDoc[slot] = scored[r].docId;
+        }
+        rebuildAllDocTextures();
+        jumpToDocument(bestDocId);
+        subtitle.textContent = `Top match: Document #${bestDocId} (${bestScore.toFixed(3)})`;
+      }
+      function clearSearchResults() {
+        latestSearchToken++;
+        for (let i = 0; i < TOTAL_DOCS; i++) {
+          slotToDoc[i] = i + 1; // Reset to identity mapping
+          similarityScores[i + 1] = null;
+        }
+        rebuildAllDocTextures();
+        idleAutoSpin = true;
+        subtitle.textContent = "Drag to spin, or type to search semantically";
+      }
+      // --- Setup Scene, Camera, and Renderer ---
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);
+      camera.position.z = 18; // Pulled back slightly for wider panels
+      const renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true,
+      });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+      document.getElementById("canvas-container").appendChild(renderer.domElement);
+      const logoGroup = new THREE.Group();
+      scene.add(logoGroup);
+      // --- Dimensions ---
+      const panelWidth = 3.6;
+      const panelHeight = 3.6;
+      const panelDepth = 0.08;
+      const axleHeight = 4.8;
+      const panelColor = "#1a1c1d";
+      const lineColor = 0xffffff;
+      // --- 1. Central Axle ---
+      const axleGeom = new THREE.BoxGeometry(panelDepth, axleHeight, panelDepth);
+      const axleMat = new THREE.MeshBasicMaterial({ color: panelColor });
+      const axle = new THREE.Mesh(axleGeom, axleMat);
+      const axleEdges = new THREE.LineSegments(new THREE.EdgesGeometry(axleGeom), new THREE.LineBasicMaterial({ color: lineColor }));
+      axle.add(axleEdges);
+      logoGroup.add(axle);
+      // --- 2. Generate document textures ---
+      const docTextures = [];
+      function createDocumentTexture(num, score) {
+        const canvas = document.createElement("canvas");
+        canvas.width = 512;
+        canvas.height = Math.round(512 * (panelHeight / panelWidth));
+        const ctx = canvas.getContext("2d");
+        const sentence = DEFAULT_SENTENCES[num - 1];
+        // Background
+        ctx.fillStyle = panelColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Subtle border to make it look like a document card
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
+        ctx.lineWidth = 12;
+        ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);
+        // Header metadata
+        ctx.fillStyle = "#9aa0a6";
+        ctx.font = '600 24px "Segoe UI", sans-serif';
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
+        ctx.fillText(`Document #${num}`, 30, 24);
+        ctx.textAlign = "right";
+        ctx.fillText(`Score ${formatScore(score)}`, canvas.width - 30, 24);
+        // Body sentence
+        ctx.fillStyle = "#ffffff";
+        ctx.font = '500 28px "Segoe UI", sans-serif';
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        wrapText(ctx, sentence, canvas.width / 2, canvas.height / 2 + 12, canvas.width - 80, 38, 5);
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        return texture;
+      }
+      function rebuildAllDocTextures() {
+        for (let i = 1; i <= TOTAL_DOCS; i++) {
+          if (docTextures[i]) {
+            docTextures[i].dispose();
+          }
+          docTextures[i] = createDocumentTexture(i, similarityScores[i]);
+        }
+      }
+      // Pre-generate all textures (1-indexed for convenience)
+      for (let i = 1; i <= TOTAL_DOCS; i++) {
+        docTextures[i] = createDocumentTexture(i, similarityScores[i]);
+      }
+      // --- 3. Create Panels & Dynamic Materials ---
+      const panelGeom = new THREE.BoxGeometry(panelWidth, panelHeight, panelDepth);
+      panelGeom.translate(panelWidth / 2, 0, 0); // Pivot at the left edge
+      const edgeMat = new THREE.MeshBasicMaterial({ color: panelColor });
+      // We have 6 fins, each with a front and back face. Total 12 faces.
+      // We give each face its own distinct material so we can dynamically swap them.
+      const faceMaterials = [];
+      for (let i = 0; i < 12; i++) {
+        faceMaterials.push(new THREE.MeshBasicMaterial({ map: docTextures[1] }));
+      }
+      for (let i = 0; i < 6; i++) {
+        const frontMat = faceMaterials[i * 2]; // Front face index
+        const backMat = faceMaterials[i * 2 + 1]; // Back face index
+        const materials = [
+          edgeMat, // Right edge
+          edgeMat, // Left edge (inside axle)
+          edgeMat, // Top edge
+          edgeMat, // Bottom edge
+          frontMat, // Front face (+Z local)
+          backMat, // Back face (-Z local)
+        ];
+        const panel = new THREE.Mesh(panelGeom, materials);
+        panel.rotation.y = i * (Math.PI / 3); // 60 degrees
+        const edges = new THREE.LineSegments(new THREE.EdgesGeometry(panelGeom), new THREE.LineBasicMaterial({ color: lineColor }));
+        panel.add(edges);
+        logoGroup.add(panel);
+      }
+      // --- 4. State & Interaction ---
+      let targetBaseY = 0; // The logical rotation of the carousel
+      let currentBaseY = 0;
+      let mouseTiltX = 0;
+      let mouseTiltY = 0;
+      let isDragging = false;
+      let previousMouseX = 0;
+      let idleAutoSpin = true;
+      // Search logic
+      searchInput.addEventListener("input", (e) => {
+        const query = e.target.value.trim();
+        if (searchDebounceId) {
+          clearTimeout(searchDebounceId);
+        }
+        if (!query) {
+          clearSearchResults();
+          return;
+        }
+        searchDebounceId = setTimeout(() => {
+          runSemanticSearch(query).catch((err) => {
+            console.error("Semantic search failed:", err);
+            subtitle.textContent = "Search failed. Please try again.";
+          });
+        }, 10);
+      });
+      // Mouse Dragging Logic
+      const container = document.getElementById("canvas-container");
+      container.addEventListener("mousedown", (e) => {
+        isDragging = true;
+        idleAutoSpin = false;
+        previousMouseX = e.clientX;
+      });
+      window.addEventListener("mouseup", () => (isDragging = false));
+      window.addEventListener("mousemove", (e) => {
+        // Mouse parallax tilt
+        mouseTiltX = (e.clientX / window.innerWidth) * 2 - 1;
+        mouseTiltY = -(e.clientY / window.innerHeight) * 2 + 1;
+        if (isDragging) {
+          const deltaX = e.clientX - previousMouseX;
+          targetBaseY += deltaX * 0.01; // Drag sensitivity
+          previousMouseX = e.clientX;
+        }
+      });
+      // Touch support
+      container.addEventListener("touchstart", (e) => {
+        isDragging = true;
+        idleAutoSpin = false;
+        previousMouseX = e.touches[0].clientX;
+      });
+      window.addEventListener("touchend", () => (isDragging = false));
+      window.addEventListener("touchmove", (e) => {
+        if (isDragging) {
+          const deltaX = e.touches[0].clientX - previousMouseX;
+          targetBaseY += deltaX * 0.01;
+          previousMouseX = e.touches[0].clientX;
+        }
+      });
+      window.addEventListener("resize", () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+      });
+      // --- 5. Smart Swap Animation Loop ---
+      function animate() {
+        requestAnimationFrame(animate);
+        if (idleAutoSpin && !isDragging) {
+          targetBaseY -= 0.002; // Slow continuous spin
+        }
+        // Smooth interpolation to target rotation
+        currentBaseY += (targetBaseY - currentBaseY) * 0.05;
+        // Apply main rotation + slight parallax tilt from mouse
+        logoGroup.rotation.y = currentBaseY;
+        logoGroup.rotation.x = mouseTiltY * 0.2 + 0.1;
+        // We evaluate the 6 "physical spreads". A spread is the V-shape pocket formed by two adjacent fins.
+        // Spread k is formed by the Back face of Fin k (Left) and the Front face of Fin k+1 (Right).
+        // When a spread rotates perfectly to the back (+90 deg from center), it is completely hidden.
+        // At that exact moment, we update its textures to the next required documents.
+        let currentDeg = (currentBaseY * 180) / Math.PI;
+        for (let k = 0; k < 6; k++) {
+          // Offset angle: Spread k is centered at k*60 + 30 degrees locally.
+          // It faces the back when its world angle crosses +90 degrees.
+          // We offset by 90 to make the swap boundary exactly at 0.
+          let A_offset = currentDeg + k * 60 - 60;
+          // Calculate how many full rotations this spread has made
+          let n_wrap = Math.floor(A_offset / 360);
+          // Determine which "Virtual Spread" this physical spread is currently representing.
+          // The -4 offset ensures that at 0 degrees, the front-facing spread (k=4) represents V=0 (Docs 1 & 2).
+          let k_virt = k - 6 * n_wrap - 4;
+          // Map virtual spread to carousel slots, then look up via slotToDoc
+          let slotLeft = (((2 * k_virt) % TOTAL_DOCS) + TOTAL_DOCS) % TOTAL_DOCS;
+          let slotRight = (((2 * k_virt + 1) % TOTAL_DOCS) + TOTAL_DOCS) % TOTAL_DOCS;
+          let docLeftId = slotToDoc[slotLeft];
+          let docRightId = slotToDoc[slotRight];
+          // Map to the specific left and right faces on the 3D model:
+          // Left page is the BACK face of Fin k
+          let leftFaceIdx = k * 2 + 1;
+          // Right page is the FRONT face of the next fin, Fin (k+1)%6
+          let rightFaceIdx = ((k + 1) % 6) * 2;
+          // Apply the textures if they aren't already set
+          if (faceMaterials[leftFaceIdx].map !== docTextures[docLeftId]) {
+            faceMaterials[leftFaceIdx].map = docTextures[docLeftId];
+          }
+          if (faceMaterials[rightFaceIdx].map !== docTextures[docRightId]) {
+            faceMaterials[rightFaceIdx].map = docTextures[docRightId];
+          }
+        }
+        renderer.render(scene, camera);
+      }
+      initializeSemanticSearch();
+      animate();
+    </script>
+  </body>
 </html>