| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Embeddings 3D (Plotly) | Transformers.js</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: #ffffff; } |
| |
| |
| |
| |
| |
| |
| |
| |
| .legend-swatch { |
| width: 0.5rem; |
| height: 0.5rem; |
| display: inline-block; |
| border-radius: 50%; |
| margin-right: 0.3rem; |
| } |
| .legend-item { |
| margin-right: 1.5rem; |
| font-size: 0.875rem; |
| color: #6e6e80; |
| display: inline-flex; |
| align-items: center; |
| } |
| .small-copy { |
| display: flex; |
| justify-content: center; |
| flex-wrap: wrap; |
| margin-top: 1rem; |
| margin-bottom: 2rem; |
| } |
| |
| .spinner { |
| border: 4px solid rgba(0, 0, 0, 0.1); |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| border-left-color: #09f; |
| animation: spin 1s ease infinite; |
| display: inline-block; |
| vertical-align: middle; |
| } |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
| </style> |
| <script type="module" crossorigin src="/assets/index-kpXZmbP-.js"></script> |
| <link rel="stylesheet" crossorigin href="/assets/index-tn0RQdqM.css"> |
| </head> |
| <body class="flex flex-col items-center justify-center min-h-screen p-4"> |
|
|
| <div class="w-full max-w-5xl"> |
| |
| <div class="mb-2 text-center"> |
| <h1 class="text-3xl font-bold text-gray-900">Embeddings: 3D (Plotly)</h1> |
| <p class="text-sm text-gray-500 mt-2">Powered by Transformers.js & WebGPU</p> |
| </div> |
|
|
| |
| <div id="controls" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6 max-w-2xl mx-auto"> |
| <div class="mb-4"> |
| <label for="text-input" class="block text-sm font-medium text-gray-700 mb-1">Enter text to embed (one per line)</label> |
| <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> |
| </div> |
| <div class="flex items-center justify-between"> |
| <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"> |
| <span id="btn-text">Visualize Embeddings</span> |
| <div id="loader" class="spinner ml-2" style="display: none;"></div> |
| </button> |
| <div id="status-msg" class="text-sm text-gray-500">Model loading...</div> |
| </div> |
| |
| <div id="progress-container" class="mt-4 hidden"> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| <div id="progress-label" class="text-xs text-gray-500 text-center mt-1">0%</div> |
| </div> |
| </div> |
|
|
| |
| <div id="legend-container"></div> |
|
|
| |
| <div id="chart-div" style="min-height: 500px;"></div> |
| </div> |
|
|
| </body> |
| </html> |
