Refactor heatmap event handling by modularizing utility functions and improving code organization; update index.html to enhance user input sections.

heatmap_event.js

@@ -4,6 +4,53 @@ import { plotHeatmap } from './plotting.js';
 
 const task = "Given a textual input sentence, retrieve relevant categories that best describe it.";
 
+// Cosine similarity between two vectors
+function cosine(a, b) {
+    let dot = 0, na = 0, nb = 0;
+    for (let i = 0; i < a.length; i++) {
+        dot += a[i] * b[i];
+        na += a[i] * a[i];
+        nb += b[i] * b[i];
+    }
+    return na && nb ? dot / Math.sqrt(na * nb) : 0;
+}
+
+// Remove headers and split groups into arrays of lines
+function getCleanGroups(groups) {
+    return groups.map(g =>
+        g.split("\n").filter(l => l && !l.startsWith("##"))
+    );
+}
+
+// Flatten all lines and get their embeddings
+async function getAllLinesAndEmbeds(cleanGroups, task) {
+    const allLines = cleanGroups.flat();
+    const allEmbeds = await getLineEmbeddings(allLines, task);
+    return { allLines, allEmbeds };
+}
+
+// Build index mapping for each group
+function getIdxByGroup(cleanGroups) {
+    const idxByGroup = [];
+    let p = 0;
+    for (const g of cleanGroups) {
+        idxByGroup.push(Array.from({ length: g.length }, (_, i) => p + i));
+        p += g.length;
+    }
+    return idxByGroup;
+}
+
+// Helper to build the final output text for reordered groups
+function buildFinalText(order, sortedLines, clusterNames, n) {
+    return order
+        .map((gIdx, i) => {
+            const header =
+                clusterNames?.length === n ? clusterNames[gIdx] : `Group ${i + 1}`;
+            return `## ${header}\n${sortedLines[i].join("\n")}`;
+        })
+        .join("\n\n\n");
+}
+
 export async function handleHeatmapEvent() {
     const progressBar = document.getElementById("progress-bar");
     const progressBarInner = document.getElementById("progress-bar-inner");
@@ -65,99 +112,34 @@ export async function handleHeatmapEvent() {
     // First group is search then follow by hight sim group
     // in each group order by high sim line
     if (searchIdx !== -1 && search_by_max_search_line) {
-        const searchLines = groups[searchIdx]
-            .split("\n")
-            .filter(l => l && !l.startsWith("##"));
+        const searchLines = getCleanGroups(groups)[searchIdx];
         const searchEmbeds = await getLineEmbeddings(searchLines, task);
-
-        const cleanGroups = groups.map(g =>
-            g.split("\n").filter(l => l && !l.startsWith("##"))
-        );
-        const allLines = cleanGroups.flat();
-        const allEmbeds = await getLineEmbeddings(allLines, task);
-
-        const cosine = (a, b) => {
-            let dot = 0, na = 0, nb = 0;
-            for (let i = 0; i < a.length; i++) {
-                dot += a[i] * b[i];
-                na += a[i] * a[i];
-                nb += b[i] * b[i];
-            }
-            return na && nb ? dot / Math.sqrt(na * nb) : 0;
-        };
-
-        const score = e =>
-            Math.max(...searchEmbeds.map(se => cosine(se, e)));
-
-        const idxByGroup = [];
-        let p = 0;
-        for (const g of cleanGroups) {
-            idxByGroup.push(Array.from({ length: g.length }, (_, i) => p + i));
-            p += g.length;
-        }
-
+        const cleanGroups = getCleanGroups(groups);
+        const { allLines, allEmbeds } = await getAllLinesAndEmbeds(cleanGroups, task);
+        const idxByGroup = getIdxByGroup(cleanGroups);
+        const score = e => Math.max(...searchEmbeds.map(se => cosine(se, e)));
         const sorted = order.map(g =>
             idxByGroup[g]
                 .map(i => ({ t: allLines[i], s: score(allEmbeds[i]) }))
                 .sort((a, b) => b.s - a.s)
                 .map(o => o.t)
         );
-
-        const finalText = order
-            .map((gIdx, i) => {
-                const header =
-                    clusterNames?.length === n ? clusterNames[gIdx] : `Group ${i + 1}`;
-                return `## ${header}\n${sorted[i].join("\n")}`;
-            })
-            .join("\n\n\n");
-
+        const finalText = buildFinalText(order, sorted, clusterNames, n);
         document.getElementById("input").value = finalText;
     }
 
     if (searchIdx !== -1 && search_by_max_search_group) {
         const refEmbed = groupEmbeddings[searchIdx];
-
-        const cleanGroups = groups.map(g =>
-            g.split("\n").filter(l => l && !l.startsWith("##"))
-        );
-
-        const allLines = cleanGroups.flat();
-        const allEmbeds = await getLineEmbeddings(allLines, task);
-
-        const idxByGroup = [];
-        let p = 0;
-        for (const g of cleanGroups) {
-            idxByGroup.push(Array.from({ length: g.length }, (_, i) => p + i));
-            p += g.length;
-        }
-
-        const cosine = (a, b) => {
-            let dot = 0,
-                na = 0,
-                nb = 0;
-            for (let i = 0; i < a.length; i++) {
-                dot += a[i] * b[i];
-                na += a[i] * a[i];
-                nb += b[i] * b[i];
-            }
-            return na && nb ? dot / Math.sqrt(na * nb) : 0;
-        };
-
+        const cleanGroups = getCleanGroups(groups);
+        const { allLines, allEmbeds } = await getAllLinesAndEmbeds(cleanGroups, task);
+        const idxByGroup = getIdxByGroup(cleanGroups);
         const sortedLines = order.map(gIdx =>
             idxByGroup[gIdx]
                 .map(i => ({ t: allLines[i], s: cosine(refEmbed, allEmbeds[i]) }))
                 .sort((a, b) => b.s - a.s)
                 .map(o => o.t)
         );
-
-        const finalText = order
-            .map((gIdx, i) => {
-                const header =
-                    clusterNames?.length === n ? clusterNames[gIdx] : `Group ${i + 1}`;
-                return `## ${header}\n${sortedLines[i].join("\n")}`;
-            })
-            .join("\n\n\n");
-
+        const finalText = buildFinalText(order, sortedLines, clusterNames, n);
         document.getElementById("input").value = finalText;
     }
     progressBarInner.style.width = "100%";

index.html

@@ -68,11 +68,14 @@
 
 <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 (optional, overrides group with ##search):</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;">