Spaces:
Running
Running
File size: 3,308 Bytes
07f99cb 2ce4d6d 07f99cb 2ce4d6d 07f99cb a47a283 07f99cb a47a283 d9f99cf 8ad7568 07f99cb 2ce4d6d 160fe8b 3ebfd79 fe3f9fe 65b6e6f fe3f9fe 67d5397 3ebfd79 8ad7568 f92828b 8ad7568 d9f99cf a47a283 c67d118 802de67 a47a283 07f99cb ee4ca8c 2ce4d6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebGPU Embedding Playground</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 20px
}
textarea {
width: 100%;
height: 200px
}
button {
padding: 10px 20px;
margin-top: 10px
}
#plot-heatmap,
#plot-scatter {
width: 100%;
height: 600px
}
.plot-container {
display: flex;
gap: 20px;
}
#progress-bar {
width: 100%;
height: 8px;
background: #eee;
margin: 10px 0;
display: none;
}
#progress-bar-inner {
height: 100%;
width: 0;
background: #4caf50;
transition: width 0.2s;
}
.control-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.control-group label {
margin: 0;
}
.control-group input,
.control-group select {
margin-left: 5px;
}
</style>
</head>
<body>
<h1>Text Embedding Playground</h1>
<label for="input">Input Text</label>
<textarea id="input"></textarea>
<script type="module">
import { sentences } from './sentences.js';
document.getElementById("input").value = sentences.join("\n");
</script>
<label for="search-group-input" style="margin-top:10px;display:block;">Search Group:</label>
<textarea id="search-group-input" placeholder="Paste or type search group lines here..."></textarea>
<div class="control-group">
<label for="kmeans-k">Clusters:</label>
<input id="kmeans-k" type="number" min="2" max="100" value="7" style="width:60px;">
<label for="kmeans-beta">Beta (Larger β forces clusters toward equal sizes.):</label>
<input id="kmeans-beta" type="number" min="0" max="10" step="0.000001" value="0.000005" style="width:80px;">
<label for="kmeans-type">Clustering Type:</label>
<select id="kmeans-type" style="width:180px;">
<option value="balancedKMeans">Balanced K-Means</option>
<option value="kmeans">K-Means (standard)</option>
</select>
<button id="kmeans-btn">Clustering</button>
<button id="naming-btn">Generate Name</button>
<button id="clusterplot-btn">Cluster Plot</button>
</div>
<label for="search-sort-mode">Search Cluster Sort Mode:</label>
<select id="search-sort-mode">
<option value="group">By Group Similarity</option>
<option value="line">By Max Search Line</option>
</select>
<button id="heatmap-btn">Similarity Search</button>
<div id="progress-bar">
<div id="progress-bar-inner"></div>
</div>
<div class="plot-container">
<div id="plot-scatter" style="width:1000px; height:500px;"></div>
<div id="plot-heatmap" style="width:500px; height:500px;"></div>
</div>
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html> |