truncate long JSON results in web ui, and still allow for full download

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.2.3] - 2024-11-07
+### Added
+- Web UI adjustments for display of truncated JSON results on screen but still allowing download of full results.
+
 ## [2.2.2] - 2024-11-07
 ### Added
 - Web UI css adjustments for smaller screens

embeddingUtils.js

@@ -24,7 +24,9 @@ export async function initializeEmbeddingUtils(onnxEmbeddingModel, onnxEmbedding
 // -- Function to generate embeddings --
 // -------------------------------------
 export async function createEmbedding(text) {
-    if (embeddingCache.has(text)) return embeddingCache.get(text);
+    if (embeddingCache.has(text)) {
+        return embeddingCache.get(text);
+    }
 
     const embeddings = await generateEmbedding(text, { pooling: 'mean', normalize: true });
     embeddingCache.set(text, embeddings.data);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "semantic-chunking",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Semantically create chunks from large texts. Useful for workflows involving large language models (LLMs).",
   "repository": {
     "type": "git",

webui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semantic-chunking-webui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "description": "Web UI for semantic-chunking library",
   "main": "server.js",

webui/public/main.js

@@ -185,10 +185,37 @@ form.addEventListener('submit', async (e) => {
         // Create code element and set content safely
         const codeElement = document.createElement('code');
         codeElement.className = 'language-json';
-        codeElement.textContent = JSON.stringify(result, null, 2);
+
+        // Format the JSON string
+        const formattedJson = JSON.stringify(result, null, 2);
+        const lines = formattedJson.split('\n');
+
+        // Store full result for download
+        resultsJson.dataset.fullResult = formattedJson;
+
+        // Truncate if more than 1000 lines
+        if (lines.length > 1000) {
+            const truncatedLines = [
+                ...lines.slice(0, 1000),
+                '\n',
+                '// ...',
+                '// ...',
+                '// ⚠️🚨 Notice: Data Truncated for Display 🚨⚠️',
+                '// The full result is too large to display here.',
+                '// Please use the download button to get the entire result.',
+                '// ...',
+                '// ...',
+            ];
+            codeElement.textContent = truncatedLines.join('\n');
+        } else {
+            codeElement.textContent = formattedJson;
+        }
+
         resultsJson.textContent = ''; // Clear existing content
         resultsJson.appendChild(codeElement);
-        hljs.highlightElement(codeElement);
+        if (!data.returnEmbedding) {
+            hljs.highlightElement(codeElement);
+        }
 
         // Enable download button if we have results
         downloadButton.disabled = false;
@@ -216,7 +243,8 @@ form.addEventListener('submit', async (e) => {
 
         // Enable download
         downloadButton.onclick = () => {
-            const blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
+            const fullData = resultsJson.dataset.fullResult;
+            const blob = new Blob([fullData], { type: 'application/json' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;