Spaces:
Running
Running
ping98k
Refactor search group label for clarity and update heatmap zmin value for improved visualization accuracy.
67d5397
| <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> |