Update assets/app.js

assets/app.js

@@ -1,8 +1,10 @@
 import { env, AutoModelForCausalLM, Tensor } from '/assets/transformers.min.js';
 
+// Prevent browser cache exhaustion under quota restrictions
+env.useBrowserCache = false;
 
 // Declare global UI elements and model instance
-let dnaInput, maxTokensInput, temperatureInput, deviceInput, generateBtn, outputDisplay, statusDisplay;
+let dnaInput, maxTokensInput, temperatureInput, deviceInput, dtypeInput, generateBtn, outputDisplay, statusDisplay, progressBar;
 let carbonModel = null;
 
 const MODEL_REPO = 'huggingworld/Carbon-500M-ONNX';
@@ -56,6 +58,22 @@ function idToKmer(id) {
     return kmer;
 }
 
+/**
+ * Converts a raw string of DNA bases into HTML color-coded spans matching international standards.
+ */
+function colorCodeSequence(sequence) {
+    return sequence.split('').map(base => {
+        switch(base) {
+            case 'A': return '<span class="dna-a">A</span>';
+            case 'C': return '<span class="dna-c">C</span>';
+            case 'G': return '<span class="dna-g">G</span>';
+            case 'T': return '<span class="dna-t">T</span>';
+            case 'N': return '<span class="dna-n">N</span>';
+            default: return base; // Pass through unexpected layout structures or spacing safely
+        }
+    }).join('');
+}
+
 // ==========================================
 // 🧠 MODEL INITIALIZATION
 // ==========================================
@@ -64,33 +82,50 @@ async function initializeModel() {
     generateBtn.disabled = true;
 
     const selectedDevice = deviceInput.value;
-    const dtypeSetting = selectedDevice === 'webgpu' ? 'q4f16' : 'fp16';
+    const dtypeSetting = dtypeInput ? dtypeInput.value : 'fp16';
 
     try {
-        statusDisplay.textContent = `📥 Allocating Carbon layers onto engine target [${selectedDevice.toUpperCase()}]...`;
+        statusDisplay.textContent = `📥 Allocating Carbon layers onto engine target [${selectedDevice.toUpperCase()} (${dtypeSetting.toUpperCase()})]...`;
         statusDisplay.style.color = '#888888';
 
+        if (progressBar) progressBar.style.width = '0%';
+
         if (carbonModel) {
             carbonModel = null;
         }
 
         carbonModel = await AutoModelForCausalLM.from_pretrained(MODEL_REPO, {
             device: selectedDevice,
-            dtype: dtypeSetting
+            dtype: dtypeSetting,
+            progress_callback: (e) => {
+                if (e.status === 'initiate') {
+                    statusDisplay.textContent = `🎬 Initiating download: ${e.file}...`;
+                } else if (e.status === 'progress') {
+                    statusDisplay.textContent = `📥 Downloading ${e.file}: ${Math.round(e.progress)}%`;
+                    if (progressBar) progressBar.style.width = `${e.progress}%`;
+                } else if (e.status === 'progress_total') {
+                    if (progressBar) progressBar.style.width = `${e.progress}%`;
+                    statusDisplay.textContent = `📦 Aggregate Downloading Progress: ${Math.round(e.progress)}%`;
+                } else if (e.status === 'done') {
+                    statusDisplay.textContent = `✨ Loaded file asset: ${e.file}`;
+                }
+            }
         });
 
-        statusDisplay.textContent = `🟢 Carbon Model Ready (${selectedDevice.toUpperCase()} Activated)`;
+        statusDisplay.textContent = `🟢 Carbon Model Ready (${selectedDevice.toUpperCase()} + ${dtypeSetting.toUpperCase()} Activated)`;
         statusDisplay.style.color = '#317f3f';
+        if (progressBar) progressBar.style.width = '100%';
         generateBtn.disabled = false;
     } catch (error) {
         console.error('❌ Initialization Failure:', error);
         statusDisplay.textContent = `❌ Engine Error: ${error.message}`;
         statusDisplay.style.color = '#b00020';
+        if (progressBar) progressBar.style.width = '0%';
     }
 }
 
 // ==========================================
-// ⚡ INFERENCE EXECUTION LOOP
+// ⚡ INFERENCE EXECUTION LOOP (STREAMING + COLOR ACTIVATED)
 // ==========================================
 
 async function runInference() {
@@ -102,19 +137,16 @@ async function runInference() {
     outputDisplay.textContent = 'Processing structure...';
 
     try {
-        // 1. Clean data inputs
         let rawInput = dnaInput.value.toUpperCase().replace(/[^ACGTN]/g, '');
         if (rawInput.length === 0) {
             throw new Error("No valid genomic bases found.");
         }
 
-        // 2. Pad to fit 6-mer boundary block splits
         const remainder = rawInput.length % 6;
         if (remainder !== 0) {
             rawInput = "A".repeat(6 - remainder) + rawInput;
         }
 
-        // 3. Build numerical token array manually using Carbon offsets
         let inputIds = [DNA_TAG_ID];
         for (let i = 0; i < rawInput.length; i += 6) {
             const chunk = rawInput.slice(i, i + 6);
@@ -125,7 +157,6 @@ async function runInference() {
         let temp = temperatureInput ? parseFloat(temperatureInput.value) : 0.7;
         if (temp <= 0) temp = 0.7;
 
-        // 4. Instantiate Int64 Tensors matching model layout expectations
         const inputSequenceTensor = new Tensor(
             'int64',
             BigInt64Array.from(inputIds.map(id => BigInt(id))),
@@ -138,59 +169,63 @@ async function runInference() {
             [1, inputIds.length]
         );
 
-        // 5. Submit context tensors directly to CausalLM generator
-        const generatedOutputTensors = await carbonModel.generate({
+        // Streaming state monitors
+        let generatedSequence = "";
+        let tokenCount = 0;
+
+        // Custom Streamer configuration to hook directly into the token stream
+        const customStreamer = {
+            put: (value) => {
+                let tokens = [];
+                if (value && typeof value.tolist === 'function') {
+                    tokens = value.tolist().flat();
+                } else if (value && value.data) {
+                    tokens = Array.from(value.data);
+                } else if (Array.isArray(value)) {
+                    tokens = value;
+                }
+
+                for (const token of tokens) {
+                    const numericId = Number(token);
+                    tokenCount++;
+
+                    // Skip prompt sequence tokens
+                    if (tokenCount <= inputIds.length) {
+                        continue;
+                    }
+
+                    // Decode token step-by-step, wrap in color spans, and stream
+                    if (numericId >= DNA_OFFSET && numericId <= OOV_TOKEN_ID) {
+                        generatedSequence += idToKmer(numericId);
+
+                        const HTMLRenderMatrix = colorCodeSequence(generatedSequence);
+                        outputDisplay.innerHTML = `${HTMLRenderMatrix}\n\n<span class="meta-text">[Streaming on ${deviceInput.value.toUpperCase()}...]</span>`;
+                    }
+                }
+            },
+            end: () => {}
+        };
+
+        await carbonModel.generate({
             input_ids: inputSequenceTensor,
             attention_mask: attentionMaskTensor,
             max_new_tokens: maxTokens,
             min_new_tokens: 15,
             do_sample: temp > 0,
             temperature: temp,
-            repetition_penalty: 1.15
+            repetition_penalty: 1.15,
+            streamer: customStreamer
         });
 
         const duration = ((performance.now() - startTime) / 1000).toFixed(2);
 
-        // 6. Comprehensive extraction pattern to parse out BigInt matrix output arrays
-        let fullSequenceArray = [];
-        if (generatedOutputTensors) {
-            if (typeof generatedOutputTensors.tolist === 'function') {
-                const nestedList = generatedOutputTensors.tolist();
-                // Check if nested inside a batch index array wrapper: [[tokens]] vs [tokens]
-                fullSequenceArray = Array.isArray(nestedList[0]) ? nestedList[0] : nestedList;
-            } else if (generatedOutputTensors.data) {
-                fullSequenceArray = Array.from(generatedOutputTensors.data);
-            } else if (Array.isArray(generatedOutputTensors)) {
-                fullSequenceArray = generatedOutputTensors;
-            }
-        }
-
-        // 7. Isolate newly generated tokens from the prompt sequence inputs
-        let generatedTokens = [];
-        const plainOutputArray = fullSequenceArray.map(t => Number(t));
-
-        // FIX: Safely check index position zero of array primitive elements instead of matching arrays to integers
-        if (plainOutputArray.length > inputIds.length && plainOutputArray[0] === DNA_TAG_ID) {
-            generatedTokens = plainOutputArray.slice(inputIds.length);
-        } else {
-            generatedTokens = plainOutputArray;
-        }
-
-        // 8. Translate vocabulary ranges back into pure DNA characters
-        let generatedSequence = "";
-        for (let token of generatedTokens) {
-            const numericId = Number(token);
-            if (numericId >= DNA_OFFSET && numericId <= OOV_TOKEN_ID) {
-                generatedSequence += idToKmer(numericId);
-            }
-        }
-
         if (!generatedSequence) {
-            generatedSequence = `[Generation tracking completed but output vector map evaluation was empty]\nRaw tokens: [${plainOutputArray.join(', ')}]`;
+            outputDisplay.textContent = `[Generation tracking completed but output vector map evaluation was empty]`;
+        } else {
+            const FinalHTMLRenderMatrix = colorCodeSequence(generatedSequence);
+            outputDisplay.innerHTML = `${FinalHTMLRenderMatrix}\n\n<span class="meta-text">[Inference completed in ${duration}s on ${deviceInput.value.toUpperCase()}]</span>`;
         }
 
-        outputDisplay.textContent = `${generatedSequence}\n\n[Inference completed in ${duration}s on ${deviceInput.value.toUpperCase()}]`;
-
     } catch (error) {
         console.error("❌ Generation Pipeline Error:", error);
         outputDisplay.textContent = `❌ Generation Error: ${error.message}`;
@@ -209,9 +244,11 @@ document.addEventListener('DOMContentLoaded', () => {
     maxTokensInput = document.getElementById('max-tokens');
     temperatureInput = document.getElementById('temperature');
     deviceInput = document.getElementById('execution-device');
+    dtypeInput = document.getElementById('execution-dtype');
     generateBtn = document.getElementById('generateBtn');
     outputDisplay = document.getElementById('output-display');
     statusDisplay = document.getElementById('status-message');
+    progressBar = document.getElementById('progress-bar');
 
     if (generateBtn) {
         generateBtn.addEventListener('click', runInference);
@@ -219,6 +256,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (deviceInput) {
         deviceInput.addEventListener('change', initializeModel);
     }
+    if (dtypeInput) {
+        dtypeInput.addEventListener('change', initializeModel);
+    }
 
     initializeModel();
 });