| <!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; |
| } |
| |
| |
| #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 = [ |
| |
| "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.", |
| |
| |
| "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.", |
| |
| |
| "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.", |
| |
| |
| "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.", |
| |
| |
| "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.", |
| |
| |
| "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.", |
| |
| |
| "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); |
| |
| 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"; |
| }); |
| |
| |
| 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> |
|
|
