Spaces:
Running
Running
ping98k commited on
Commit ·
0adca4d
1
Parent(s): ee4ca8c
Update initial input values in textarea and enhance K-Means clustering visualization with improved plot width and legend positioning
Browse files- index.html +11 -1
- main.js +7 -5
index.html
CHANGED
|
@@ -51,7 +51,17 @@
|
|
| 51 |
|
| 52 |
<body>
|
| 53 |
<h1>Embedding Similarity Heatmap</h1>
|
| 54 |
-
<textarea id="input">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
<label for="kmeans-k" style="margin-left:10px;">Clusters:</label>
|
| 56 |
<input id="kmeans-k" type="number" min="2" max="20" value="3" style="width:60px;">
|
| 57 |
<button id="kmeans-btn">K-Means Clustering</button>
|
|
|
|
| 51 |
|
| 52 |
<body>
|
| 53 |
<h1>Embedding Similarity Heatmap</h1>
|
| 54 |
+
<textarea id="input">Apple
|
| 55 |
+
Banana
|
| 56 |
+
Orange
|
| 57 |
+
|
| 58 |
+
Dog
|
| 59 |
+
Cat
|
| 60 |
+
Hamster
|
| 61 |
+
|
| 62 |
+
Car
|
| 63 |
+
Bus
|
| 64 |
+
Bicycle</textarea>
|
| 65 |
<label for="kmeans-k" style="margin-left:10px;">Clusters:</label>
|
| 66 |
<input id="kmeans-k" type="number" min="2" max="20" value="3" style="width:60px;">
|
| 67 |
<button id="kmeans-btn">K-Means Clustering</button>
|
main.js
CHANGED
|
@@ -89,7 +89,7 @@ document.getElementById("kmeans-btn").onclick = async () => {
|
|
| 89 |
for (let c = 0; c < k; ++c) if (counts[c]) for (let d = 0; d < dim; ++d) centroids[c][d] /= counts[c];
|
| 90 |
}
|
| 91 |
// UMAP for 2D projection
|
| 92 |
-
const umap = new UMAP({ nComponents: 2 });
|
| 93 |
const proj = umap.fit(embeddings);
|
| 94 |
// Group lines by cluster
|
| 95 |
const clustered = Array.from({ length: k }, (_, c) => []);
|
|
@@ -109,10 +109,11 @@ document.getElementById("kmeans-btn").onclick = async () => {
|
|
| 109 |
Plotly.newPlot("plot-scatter", traces, {
|
| 110 |
xaxis: { title: "UMAP-1", scaleanchor: "y", scaleratio: 1 },
|
| 111 |
yaxis: { title: "UMAP-2", scaleanchor: "x", scaleratio: 1 },
|
| 112 |
-
width:
|
| 113 |
height: 500,
|
| 114 |
margin: { t: 40, l: 40, r: 10, b: 40 },
|
| 115 |
-
title: `K-Means Clustering (k=${k})`
|
|
|
|
| 116 |
});
|
| 117 |
// Generate cluster names using text generation pipeline (async with progress)
|
| 118 |
const clusterNames = [];
|
|
@@ -175,10 +176,11 @@ document.getElementById("kmeans-btn").onclick = async () => {
|
|
| 175 |
Plotly.react("plot-scatter", traces, {
|
| 176 |
xaxis: { title: "UMAP-1", scaleanchor: "y", scaleratio: 1 },
|
| 177 |
yaxis: { title: "UMAP-2", scaleanchor: "x", scaleratio: 1 },
|
| 178 |
-
width:
|
| 179 |
height: 500,
|
| 180 |
margin: { t: 40, l: 40, r: 10, b: 40 },
|
| 181 |
-
title: `K-Means Clustering (k=${k})`
|
|
|
|
| 182 |
});
|
| 183 |
// Update textarea: group by cluster, separated by triple newlines
|
| 184 |
document.getElementById("input").value = clustered.map(g => g.join("\n")).join("\n\n\n");
|
|
|
|
| 89 |
for (let c = 0; c < k; ++c) if (counts[c]) for (let d = 0; d < dim; ++d) centroids[c][d] /= counts[c];
|
| 90 |
}
|
| 91 |
// UMAP for 2D projection
|
| 92 |
+
const umap = new UMAP({ nComponents: 2, nNeighbors: Math.min(15, n - 1) });
|
| 93 |
const proj = umap.fit(embeddings);
|
| 94 |
// Group lines by cluster
|
| 95 |
const clustered = Array.from({ length: k }, (_, c) => []);
|
|
|
|
| 109 |
Plotly.newPlot("plot-scatter", traces, {
|
| 110 |
xaxis: { title: "UMAP-1", scaleanchor: "y", scaleratio: 1 },
|
| 111 |
yaxis: { title: "UMAP-2", scaleanchor: "x", scaleratio: 1 },
|
| 112 |
+
width: 1000,
|
| 113 |
height: 500,
|
| 114 |
margin: { t: 40, l: 40, r: 10, b: 40 },
|
| 115 |
+
title: `K-Means Clustering (k=${k})`,
|
| 116 |
+
legend: { x: 1.05, y: 0.5, orientation: "v", xanchor: "left", yanchor: "middle" }
|
| 117 |
});
|
| 118 |
// Generate cluster names using text generation pipeline (async with progress)
|
| 119 |
const clusterNames = [];
|
|
|
|
| 176 |
Plotly.react("plot-scatter", traces, {
|
| 177 |
xaxis: { title: "UMAP-1", scaleanchor: "y", scaleratio: 1 },
|
| 178 |
yaxis: { title: "UMAP-2", scaleanchor: "x", scaleratio: 1 },
|
| 179 |
+
width: 1000,
|
| 180 |
height: 500,
|
| 181 |
margin: { t: 40, l: 40, r: 10, b: 40 },
|
| 182 |
+
title: `K-Means Clustering (k=${k})`,
|
| 183 |
+
legend: { x: 1.05, y: 0.5, orientation: "v", xanchor: "left", yanchor: "middle" }
|
| 184 |
});
|
| 185 |
// Update textarea: group by cluster, separated by triple newlines
|
| 186 |
document.getElementById("input").value = clustered.map(g => g.join("\n")).join("\n\n\n");
|