webml-community/mdbr-embedding-webgpu
4
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <title>MongoDB/mdbr-leaf-mt Embedding Scatterplot</title>6 <style>7 * {8 margin: 0;9 padding: 0;10 box-sizing: border-box;11 }12 body {13 font-family: Arial, sans-serif;14 display: flex;15 height: 100vh;16 margin: 0;17 overflow: hidden;18 }19 20 #left-pane,21 #right-pane {22 flex: 1;23 display: flex;24 flex-direction: column;25 padding: 20px;26 box-sizing: border-box;27 overflow: hidden;28 gap: 4px;29 }30 31 /* keep only left pane border */32 #left-pane {33 border-right: 1px solid #e0e0e0;34 }35 36 textarea {37 width: 100%;38 flex: 1;39 min-height: 0;40 resize: none;41 font-size: 14px;42 line-height: 1.4;43 padding: 10px;44 box-sizing: border-box;45 border: 1px solid #ccc;46 border-radius: 4px;47 margin-bottom: 8px;48 }49 50 button {51 margin-top: 10px;52 padding: 8px 16px;53 font-size: 18px;54 border: none;55 background-color: #007bff;56 color: white;57 border-radius: 4px;58 cursor: pointer;59 }60 61 button:disabled {62 background-color: #aaa;63 cursor: not-allowed;64 }65 66 #plot {67 width: 100%;68 flex: 1;69 min-height: 0;70 }71 </style>72 </head>73 74 <body>75 <div id="left-pane">76 <h3>Sentences:</h3>77 <textarea78 id="text-input"79 placeholder="Each line is treated as one sentence"80 ></textarea>81 <h3>Labels:</h3>82 <textarea83 id="labels-input"84 placeholder="Each line is treated as one label"85 style="max-height: 200px"86 ></textarea>87 <button id="embed-btn">Embed & Plot</button>88 <p89 id="status"90 style="91 margin-top: 8px;92 font-size: 16px;93 font-weight: 600;94 text-align: center;95 "96 >97 Loading model...98 </p>99 </div>100 101 <div id="right-pane">102 <h3>Scatterplot:</h3>103 <div id="plot"></div>104 </div>105 106 <script type="module">107 import "https://cdn.jsdelivr.net/npm/plotly.js@3.0.1/dist/plotly-basic.min.js";108 import { UMAP } from "https://cdn.jsdelivr.net/npm/umap-js@1.4.0/+esm";109 import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.5.2";110 const sentences = [111 // Weather112 "The sun peeked through the clouds after a drizzly morning.",113 "A gentle breeze rustled the leaves as we walked along the shoreline.",114 "Heavy rains caused flooding in several low-lying neighborhoods.",115 "It was so hot that even the birds sought shade under the palm trees.",116 "By midnight, the temperature had dropped below freezing.",117 "Thunderstorms lit up the sky with flashes of lightning.",118 "A thick fog settled over the city streets at dawn.",119 "The air smelled of ozone after the sudden hailstorm.",120 "I watched the snowflakes drift silently onto the ground.",121 "A double rainbow appeared after the rain shower.",122 "The humidity soared to uncomfortable levels by midday.",123 "Dust devils formed in the dry desert plains.",124 "The barometer readings indicated an approaching front.",125 "A sudden gust of wind knocked over the garden chairs.",126 "Light drizzle turned into a torrential downpour within minutes.",127 128 // Technology129 "The new smartphone features a foldable display and 5G connectivity.",130 "In the world of AI, transformers have revolutionized natural language processing.",131 "Quantum computing promises to solve problems beyond classical computers' reach.",132 "Blockchain technology is being explored for secure voting systems.",133 "Virtual reality headsets are becoming more affordable and accessible.",134 "The rise of electric vehicles is reshaping the automotive industry.",135 "Cloud computing allows businesses to scale resources dynamically.",136 "Machine learning algorithms can now predict stock market trends with surprising accuracy.",137 "Augmented reality applications are transforming retail experiences.",138 "The Internet of Things connects everyday devices to the web for smarter living.",139 "Cybersecurity threats are evolving, requiring constant vigilance.",140 "3D printing is enabling rapid prototyping and custom manufacturing.",141 "Edge computing reduces latency by processing data closer to the source.",142 "Biometric authentication methods are enhancing security in devices.",143 "Wearable technology is tracking health metrics in real-time.",144 "Artificial intelligence is being used to create realistic deepfakes.",145 146 // Cooking147 "Preheat the oven to 375°F before you start mixing the batter.",148 "She finely chopped the garlic and sautéed it in two tablespoons of olive oil.",149 "A pinch of saffron adds a beautiful color and aroma to traditional paella.",150 "If the soup is too salty, add a peeled potato to absorb excess sodium.",151 "Let the bread dough rise for at least an hour in a warm, draft-free spot.",152 "Marinate the chicken overnight in a blend of citrus and spices.",153 "Use a cast-iron skillet to sear the steak on high heat.",154 "Whisk the egg whites until they form stiff peaks.",155 "Fold in the chocolate chips gently to keep the batter airy.",156 "Brush the pastry with an egg wash for a golden finish.",157 "Slow-roast the pork shoulder until it falls off the bone.",158 "Garnish the salad with toasted nuts and fresh herbs.",159 "Deglaze the pan with white wine for a rich sauce.",160 "Simmer the curry paste until the aroma intensifies.",161 "Let the risotto rest before serving to thicken slightly.",162 163 // Sports164 "He dribbled past two defenders and sank a three-pointer at the buzzer.",165 "The marathon runner kept a steady pace despite the sweltering heat.",166 "Their home team clinched the championship with a last-minute goal.",167 "NASCAR fans cheered as the cars roared around the oval track.",168 "She landed a perfect triple axel at the figure skating championship.",169 "The cyclist pedaled up the steep hill in record time.",170 "He pitched a no-hitter during the high school baseball game.",171 "The quarterback threw a touchdown pass under heavy pressure.",172 "They scored a hat-trick in the hockey final.",173 "The boxer delivered a swift uppercut in the final round.",174 "Surfers caught massive waves at dawn on the Pacific coast.",175 "Fans erupted when the underdog scored the winning goal.",176 "The swimmer broke the national record in the 200m freestyle.",177 "The gymnast executed a flawless routine on the balance beam.",178 "The rugby team celebrated their victory with a traditional haka.",179 180 // Finance181 "The stock market rallied after positive earnings reports.",182 "Investors are closely watching interest rate changes by the Federal Reserve.",183 "Cryptocurrency prices have been extremely volatile this year.",184 "Diversification is key to managing investment risk effectively.",185 "Inflation rates have reached a 40-year high, impacting consumer spending.",186 "Many companies are adopting ESG criteria to attract socially conscious investors.",187 "The bond market is reacting to geopolitical tensions and supply chain disruptions.",188 "Venture capital funding for startups has surged in the tech sector.",189 "Exchange-traded funds (ETFs) offer a way to invest in diversified portfolios.",190 "The global economy is recovering from the pandemic, but challenges remain.",191 "Central banks are exploring digital currencies to modernize payment systems.",192 "Retail investors are increasingly participating in the stock market through apps.",193 "Hedge funds are using complex algorithms to gain an edge in trading.",194 "Real estate prices have skyrocketed in urban areas due to low inventory.",195 "The startup raised $10 million in its Series A funding round.",196 197 // Music198 "The symphony orchestra played a hauntingly beautiful melody.",199 "She strummed her guitar softly, filling the room with a warm sound.",200 "The DJ mixed tracks seamlessly, keeping the crowd dancing all night.",201 "His voice soared during the high notes of the ballad.",202 "The band played an acoustic set in the intimate coffee shop.",203 "Jazz musicians often improvise solos based on the chord changes.",204 "The opera singer hit the high C with perfect pitch.",205 "The choir harmonized beautifully, filling the church with sound.",206 "He composed a symphony that was performed at the concert hall.",207 "The singer-songwriter wrote heartfelt lyrics about love and loss.",208 "The rock band headlined the festival, drawing a massive crowd.",209 "Hip-hop artists use rhythm and rhyme to tell powerful stories.",210 "The violinist played a virtuosic solo that left the audience in awe.",211 "Folk music often reflects the culture and traditions of a community.",212 "The gospel choir lifted spirits with their uplifting performance.",213 214 // History215 "The fall of the Berlin Wall in 1989 marked the end of the Cold War.",216 "Ancient Egypt's pyramids are a testament to their architectural prowess.",217 "Europe's Renaissance period sparked a revival in art and science.",218 "The signing of the Declaration of Independence in 1776 established the United States.",219 "The Industrial Revolution transformed economies and societies worldwide.",220 "Rome was the center of a vast empire that influenced law and governance.",221 "The discovery of the New World by Christopher Columbus in 1492 changed global trade.",222 "The French Revolution in 1789 led to significant political and social change.",223 "World War II was a global conflict that reshaped international relations.",224 "The fall of the Roman Empire in 476 AD marked the beginning of the Middle Ages.",225 "The invention of the printing press revolutionized the spread of knowledge.",226 "The Cold War was characterized by political tension between the U.S. and the Soviet Union.",227 "The ancient Silk Road connected East and West through trade routes.",228 "The signing of the Magna Carta in 1215 established principles of due process.",229 "Exploration during the Age of Discovery expanded European empires across the globe.",230 ].sort(() => Math.random() - 0.5); // Shuffle sentences231 232 document.getElementById("text-input").value = sentences.join("\n");233 234 const labels = [235 "Weather",236 "Technology",237 "Cooking",238 "Sports",239 "Finance",240 "Music",241 "History",242 ];243 document.getElementById("labels-input").value = labels.join("\n");244 245 const statusEl = document.getElementById("status");246 const embed = await pipeline(247 "feature-extraction",248 "MongoDB/mdbr-leaf-mt",249 { device: "webgpu", dtype: "q4" },250 );251 statusEl.textContent = "Ready!";252 253 document.getElementById("embed-btn").disabled = false;254 255 document256 .getElementById("embed-btn")257 .addEventListener("click", async () => {258 const textInput = document.getElementById("text-input").value.trim();259 if (!textInput) {260 alert("No text detected.");261 return;262 }263 264 const sentences = textInput265 .split("\n")266 .map((s) => s.trim())267 .filter((s) => s.length > 0);268 if (sentences.length === 0) {269 alert("No non-empty lines detected.");270 return;271 }272 273 statusEl.textContent = `Embedding ${sentences.length} sentence(s)...`;274 const task =275 "Given a textual input sentence, retrieve relevant categories that best describe it.";276 const output = await embed(277 sentences.map((s) => `Instruct: ${task}\nQuery:${s}`),278 { pooling: "mean", normalize: true },279 );280 const embeddings = output.tolist();281 282 statusEl.textContent = "Running UMAP (2D projection)...";283 const nNeighbors = Math.max(1, Math.min(sentences.length - 1, 15));284 const umap = new UMAP({ nComponents: 2, nNeighbors, minDist: 0.1 });285 const coords = umap.fit(embeddings);286 287 statusEl.textContent = "Plotting projection...";288 289 const labelInput = document290 .getElementById("labels-input")291 .value.trim();292 const labelTexts = labelInput293 .split("\n")294 .map((s) => s.trim())295 .filter((s) => s);296 297 let labelEmbeddings = [];298 if (labelTexts.length) {299 statusEl.textContent = "Embedding labels...";300 const lblOut = await embed(301 labelTexts.map((x) => `Represent this sentence for searching relevant passages: ${x}`),302 { pooling: "mean", normalize: true },303 );304 labelEmbeddings = lblOut.tolist();305 }306 const threshold = 0.1;307 const assigned = embeddings.map((sentEmb) => {308 if (!labelEmbeddings.length) return "Other";309 const sims = labelEmbeddings.map((lblEmb) =>310 sentEmb.reduce((sum, v, i) => sum + v * lblEmb[i], 0),311 );312 let maxSim = -Infinity,313 idx = -1;314 for (let i = 0; i < sims.length; i++) {315 if (sims[i] > maxSim) {316 maxSim = sims[i];317 idx = i;318 }319 }320 return maxSim >= threshold ? labelTexts[idx] : "Other";321 });322 323 // Build one trace per label category324 const uniq = Array.from(new Set(assigned));325 const data = uniq.map((lbl) => {326 const inds = assigned327 .map((a, i) => (a === lbl ? i : -1))328 .filter((i) => i >= 0);329 return {330 x: inds.map((i) => coords[i][0]),331 y: inds.map((i) => coords[i][1]),332 mode: "markers",333 type: "scatter",334 name: lbl,335 text: inds.map((i) => sentences[i]),336 marker: { size: 12 },337 };338 });339 const layout = {340 title: { text: "Labels" },341 margin: { l: 0, r: 0, t: 0, b: 0 },342 };343 const config = { responsive: true };344 Plotly.newPlot("plot", data, layout, config);345 statusEl.textContent = "Done! Hover over points to see sentences.";346 });347 </script>348 </body>349</html>350