Spaces:
Running
Running
ping98k commited on
Commit ·
160fe8b
1
Parent(s): 1d17bb8
Update page title and enhance cluster naming functionality; change title to "Text Embedding Playground" and implement cluster naming button with progress indication.
Browse files- index.html +2 -1
- main.js +29 -5
index.html
CHANGED
|
@@ -50,7 +50,7 @@
|
|
| 50 |
</head>
|
| 51 |
|
| 52 |
<body>
|
| 53 |
-
<h1>Embedding
|
| 54 |
<textarea id="input"></textarea>
|
| 55 |
<script type="module">
|
| 56 |
import { sentences } from './sentences.js';
|
|
@@ -66,6 +66,7 @@
|
|
| 66 |
<option value="kmeans">K-Means (standard)</option>
|
| 67 |
</select>
|
| 68 |
<button id="kmeans-btn">Clustering</button>
|
|
|
|
| 69 |
<button id="heatmap-btn">Similarity Heatmap</button>
|
| 70 |
<div id="progress-bar">
|
| 71 |
<div id="progress-bar-inner"></div>
|
|
|
|
| 50 |
</head>
|
| 51 |
|
| 52 |
<body>
|
| 53 |
+
<h1>Text Embedding Playground</h1>
|
| 54 |
<textarea id="input"></textarea>
|
| 55 |
<script type="module">
|
| 56 |
import { sentences } from './sentences.js';
|
|
|
|
| 66 |
<option value="kmeans">K-Means (standard)</option>
|
| 67 |
</select>
|
| 68 |
<button id="kmeans-btn">Clustering</button>
|
| 69 |
+
<button id="naming-btn">Naming Cluster</button>
|
| 70 |
<button id="heatmap-btn">Similarity Heatmap</button>
|
| 71 |
<div id="progress-bar">
|
| 72 |
<div id="progress-bar-inner"></div>
|
main.js
CHANGED
|
@@ -90,20 +90,44 @@ document.getElementById("kmeans-btn").onclick = async () => {
|
|
| 90 |
traces[labels[i]].text.push(lines[i]);
|
| 91 |
}
|
| 92 |
plotScatter(traces, k);
|
| 93 |
-
|
| 94 |
const clusterNames = [];
|
| 95 |
for (let c = 0; c < k; ++c) {
|
| 96 |
progressBarInner.style.width = `${Math.round(((c + 1) / k) * 100)}%`;
|
| 97 |
-
|
| 98 |
-
clusterNames.push(name || `Cluster ${c + 1}`);
|
| 99 |
traces[c].name = clusterNames[c];
|
| 100 |
updateScatter(traces, k);
|
| 101 |
// Update textarea with cluster names as markdown headers
|
| 102 |
document.getElementById("input").value = clustered.map((g, i) =>
|
| 103 |
`## ${clusterNames[i]}\n${g.join("\n")}`
|
| 104 |
).join("\n\n\n");
|
| 105 |
-
// Update heatmap with new cluster names
|
| 106 |
-
document.getElementById("heatmap-btn").onclick();
|
| 107 |
}
|
| 108 |
progressBarInner.style.width = "100%";
|
| 109 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 90 |
traces[labels[i]].text.push(lines[i]);
|
| 91 |
}
|
| 92 |
plotScatter(traces, k);
|
| 93 |
+
|
| 94 |
const clusterNames = [];
|
| 95 |
for (let c = 0; c < k; ++c) {
|
| 96 |
progressBarInner.style.width = `${Math.round(((c + 1) / k) * 100)}%`;
|
| 97 |
+
clusterNames.push(`Cluster ${c + 1}`);
|
|
|
|
| 98 |
traces[c].name = clusterNames[c];
|
| 99 |
updateScatter(traces, k);
|
| 100 |
// Update textarea with cluster names as markdown headers
|
| 101 |
document.getElementById("input").value = clustered.map((g, i) =>
|
| 102 |
`## ${clusterNames[i]}\n${g.join("\n")}`
|
| 103 |
).join("\n\n\n");
|
|
|
|
|
|
|
| 104 |
}
|
| 105 |
progressBarInner.style.width = "100%";
|
| 106 |
};
|
| 107 |
+
|
| 108 |
+
document.getElementById("naming-btn").onclick = async () => {
|
| 109 |
+
const progressBar = document.getElementById("progress-bar");
|
| 110 |
+
const progressBarInner = document.getElementById("progress-bar-inner");
|
| 111 |
+
progressBar.style.display = "block";
|
| 112 |
+
progressBarInner.style.width = "0%";
|
| 113 |
+
|
| 114 |
+
const text = document.getElementById("input").value;
|
| 115 |
+
// Reconstruct clusters from textarea (split by triple newlines)
|
| 116 |
+
const clustered = text.split(/\n{3,}/).map(group =>
|
| 117 |
+
group.split('\n').filter(line => line && !line.startsWith('##'))
|
| 118 |
+
);
|
| 119 |
+
const k = clustered.length;
|
| 120 |
+
|
| 121 |
+
const clusterNames = [];
|
| 122 |
+
for (let c = 0; c < k; ++c) {
|
| 123 |
+
progressBarInner.style.width = `${Math.round(((c + 1) / k) * 100)}%`;
|
| 124 |
+
const name = await nameCluster(clustered[c]);
|
| 125 |
+
clusterNames.push(name || `Cluster ${c + 1}`);
|
| 126 |
+
// Optionally update traces[c].name = clusterNames[c]; and updateScatter(traces, k);
|
| 127 |
+
}
|
| 128 |
+
// Update textarea with cluster names as markdown headers
|
| 129 |
+
document.getElementById("input").value = clustered.map((g, i) =>
|
| 130 |
+
`## ${clusterNames[i]}\n${g.join("\n")}`
|
| 131 |
+
).join("\n\n\n");
|
| 132 |
+
progressBarInner.style.width = "100%";
|
| 133 |
+
};
|