| <!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> |
|
|
