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