ettin-embedding-webgpu

Running

App Files Files Community

Xenova HF Staff commited on Jun 6

Commit

7192cd3

verified ·

1 Parent(s): e7d722d

Update index.html

Browse files

Files changed (1) hide show

index.html +347 -17

index.html CHANGED Viewed

@@ -1,19 +1,349 @@
 <!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" />
+    <title>Qwen3 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",
+        "onnx-community/Qwen3-Embedding-0.6B-ONNX",
+        { device: "webgpu", dtype: "q4f16" },
+      );
+      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) => `Category: ${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>