luquiT4/webgpu-embedding-generator-and-viewer
0
1<html lang="en">2<head>3 <meta charset="UTF-8" />4 <meta name="viewport" content="width=device-width, initial-scale=1.0" />5 <title>Embeddings 3D (Plotly) | Transformers.js</title>6 <!-- Tailwind CSS -->7 <script src="https://cdn.tailwindcss.com"></script>8 <style>9 body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: #ffffff; }10 /*11 .observablehq {12 position: relative;13 width: 100%;14 max-width: 1000px;15 margin: 0 auto;16 }17 */18 .legend-swatch {19 width: 0.5rem;20 height: 0.5rem;21 display: inline-block;22 border-radius: 50%;23 margin-right: 0.3rem;24 }25 .legend-item {26 margin-right: 1.5rem;27 font-size: 0.875rem;28 color: #6e6e80;29 display: inline-flex;30 align-items: center;31 }32 .small-copy {33 display: flex;34 justify-content: center;35 flex-wrap: wrap;36 margin-top: 1rem;37 margin-bottom: 2rem;38 }39 /* Keep existing spinner */40 .spinner {41 border: 4px solid rgba(0, 0, 0, 0.1);42 width: 24px;43 height: 24px;44 border-radius: 50%;45 border-left-color: #09f;46 animation: spin 1s ease infinite;47 display: inline-block;48 vertical-align: middle;49 }50 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }51 </style>52 <script type="module" crossorigin src="/assets/index-kpXZmbP-.js"></script>53 <link rel="stylesheet" crossorigin href="/assets/index-tn0RQdqM.css">54</head>55<body class="flex flex-col items-center justify-center min-h-screen p-4">56 57 <div class="w-full max-w-5xl">58 <!-- Header -->59 <div class="mb-2 text-center">60 <h1 class="text-3xl font-bold text-gray-900">Embeddings: 3D (Plotly)</h1>61 <p class="text-sm text-gray-500 mt-2">Powered by Transformers.js & WebGPU</p>62 </div>63 64 <!-- Controls (Adapted) -->65 <div id="controls" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6 max-w-2xl mx-auto">66 <div class="mb-4">67 <label for="text-input" class="block text-sm font-medium text-gray-700 mb-1">Enter text to embed (one per line)</label>68 <textarea id="text-input" rows="4" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="King Queen Man Woman Apple Banana Computer Keyboard"></textarea>69 </div>70 <div class="flex items-center justify-between">71 <button id="generate-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">72 <span id="btn-text">Visualize Embeddings</span>73 <div id="loader" class="spinner ml-2" style="display: none;"></div>74 </button>75 <div id="status-msg" class="text-sm text-gray-500">Model loading...</div>76 </div>77 78 <div id="progress-container" class="mt-4 hidden">79 <div class="w-full bg-gray-200 rounded-full h-2.5">80 <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>81 </div>82 <div id="progress-label" class="text-xs text-gray-500 text-center mt-1">0%</div>83 </div>84 </div>85 86 <!-- Legend -->87 <div id="legend-container"></div>88 89 <!-- Chart -->90 <div id="chart-div" style="min-height: 500px;"></div>91 </div>92 93</body>94</html>