| | <!doctype html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <title>Ettin 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> |
| | <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.6.1"; |
| | 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 statusEl = document.getElementById("status"); |
| | const embed = await pipeline( |
| | "feature-extraction", |
| | "jhu-clsp/ettin-encoder-17m", |
| | { device: "webgpu", dtype: "fp32" }, |
| | ); |
| | 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 output = await embed( |
| | sentences, |
| | { pooling: "cls", 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 data = [{ |
| | type: "scattergl", |
| | mode: "markers", |
| | x: coords.map(p => p[0]), |
| | y: coords.map(p => p[1]), |
| | text: sentences, |
| | hoverinfo: "text", |
| | marker: { |
| | color: "#1f77b4", |
| | 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> |
| |
|
