index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MongoDB/mdbr-leaf-mt Embedding Scatterplot</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: Arial, sans-serif;
        display: flex;
        height: 100vh;
        margin: 0;
        overflow: hidden;
      }

      #left-pane,
      #right-pane {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
        gap: 4px;
      }

      /* keep only left pane border */
      #left-pane {
        border-right: 1px solid #e0e0e0;
      }

      textarea {
        width: 100%;
        flex: 1;
        min-height: 0;
        resize: none;
        font-size: 14px;
        line-height: 1.4;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 8px;
      }

      button {
        margin-top: 10px;
        padding: 8px 16px;
        font-size: 18px;
        border: none;
        background-color: #007bff;
        color: white;
        border-radius: 4px;
        cursor: pointer;
      }

      button:disabled {
        background-color: #aaa;
        cursor: not-allowed;
      }

      #plot {
        width: 100%;
        flex: 1;
        min-height: 0;
      }
    </style>
  </head>

  <body>
    <div id="left-pane">
      <h3>Sentences:</h3>
      <textarea
        id="text-input"
        placeholder="Each line is treated as one sentence"
      ></textarea>
      <h3>Labels:</h3>
      <textarea
        id="labels-input"
        placeholder="Each line is treated as one label"
        style="max-height: 200px"
      ></textarea>
      <button id="embed-btn">Embed & Plot</button>
      <p
        id="status"
        style="
          margin-top: 8px;
          font-size: 16px;
          font-weight: 600;
          text-align: center;
        "
      >
        Loading model...
      </p>
    </div>

    <div id="right-pane">
      <h3>Scatterplot:</h3>
      <div id="plot"></div>
    </div>

    <script type="module">
      import "https://cdn.jsdelivr.net/npm/plotly.js@3.0.1/dist/plotly-basic.min.js";
      import { UMAP } from "https://cdn.jsdelivr.net/npm/umap-js@1.4.0/+esm";
      import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.5.2";
      const 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.",
      ].sort(() => Math.random() - 0.5); // Shuffle sentences

      document.getElementById("text-input").value = sentences.join("\n");

      const labels = [
        "Weather",
        "Technology",
        "Cooking",
        "Sports",
        "Finance",
        "Music",
        "History",
      ];
      document.getElementById("labels-input").value = labels.join("\n");

      const statusEl = document.getElementById("status");
      const embed = await pipeline(
        "feature-extraction",
        "MongoDB/mdbr-leaf-mt",
        { device: "webgpu", dtype: "q4" },
      );
      statusEl.textContent = "Ready!";

      document.getElementById("embed-btn").disabled = false;

      document
        .getElementById("embed-btn")
        .addEventListener("click", async () => {
          const textInput = document.getElementById("text-input").value.trim();
          if (!textInput) {
            alert("No text detected.");
            return;
          }

          const sentences = textInput
            .split("\n")
            .map((s) => s.trim())
            .filter((s) => s.length > 0);
          if (sentences.length === 0) {
            alert("No non-empty lines detected.");
            return;
          }

          statusEl.textContent = `Embedding ${sentences.length} sentence(s)...`;
          const task =
            "Given a textual input sentence, retrieve relevant categories that best describe it.";
          const output = await embed(
            sentences.map((s) => `Instruct: ${task}\nQuery:${s}`),
            { pooling: "mean", normalize: true },
          );
          const embeddings = output.tolist();

          statusEl.textContent = "Running UMAP (2D projection)...";
          const nNeighbors = Math.max(1, Math.min(sentences.length - 1, 15));
          const umap = new UMAP({ nComponents: 2, nNeighbors, minDist: 0.1 });
          const coords = umap.fit(embeddings);

          statusEl.textContent = "Plotting projection...";

          const labelInput = document
            .getElementById("labels-input")
            .value.trim();
          const labelTexts = labelInput
            .split("\n")
            .map((s) => s.trim())
            .filter((s) => s);

          let labelEmbeddings = [];
          if (labelTexts.length) {
            statusEl.textContent = "Embedding labels...";
            const lblOut = await embed(
              labelTexts.map((x) => `Represent this sentence for searching relevant passages: ${x}`),
              { pooling: "mean", normalize: true },
            );
            labelEmbeddings = lblOut.tolist();
          }
          const threshold = 0.1;
          const assigned = embeddings.map((sentEmb) => {
            if (!labelEmbeddings.length) return "Other";
            const sims = labelEmbeddings.map((lblEmb) =>
              sentEmb.reduce((sum, v, i) => sum + v * lblEmb[i], 0),
            );
            let maxSim = -Infinity,
              idx = -1;
            for (let i = 0; i < sims.length; i++) {
              if (sims[i] > maxSim) {
                maxSim = sims[i];
                idx = i;
              }
            }
            return maxSim >= threshold ? labelTexts[idx] : "Other";
          });

          // Build one trace per label category
          const uniq = Array.from(new Set(assigned));
          const data = uniq.map((lbl) => {
            const inds = assigned
              .map((a, i) => (a === lbl ? i : -1))
              .filter((i) => i >= 0);
            return {
              x: inds.map((i) => coords[i][0]),
              y: inds.map((i) => coords[i][1]),
              mode: "markers",
              type: "scatter",
              name: lbl,
              text: inds.map((i) => sentences[i]),
              marker: { size: 12 },
            };
          });
          const layout = {
            title: { text: "Labels" },
            margin: { l: 0, r: 0, t: 0, b: 0 },
          };
          const config = { responsive: true };
          Plotly.newPlot("plot", data, layout, config);
          statusEl.textContent = "Done! Hover over points to see sentences.";
        });
    </script>
  </body>
</html>