${content}`;\n },\n\n /**\n * Show loading state\n */\n showLoading(id, message = 'Loading...') {\n this.setOutput(id, `${message}`);\n },\n\n /**\n * Show success message\n */\n showSuccess(id, message) {\n this.setOutput(id, `✓ ${message}`, 'success');\n },\n\n /**\n * Show error message\n */\n showError(id, error) {\n const message = error instanceof Error ? error.message : String(error);\n this.setOutput(id, `Error: ${message}`, 'error');\n },\n\n /**\n * Render status list\n */\n renderStatusList(id, items) {\n const el = this.$(id);\n if (!el) return;\n \n el.innerHTML = items.map(({ label, value, status }) => `\n ${info}`;\n ui.updateMemoryStatus();\n } catch (e) {\n ui.showError('model-output', e);\n }\n },\n\n /**\n * Test model inference\n */\n async testModel() {\n if (!state.model) {\n ui.setOutput('model-output', 'Load model first', 'warn');\n return;\n }\n\n ui.showLoading('model-output', 'Running inference...');\n\n try {\n const inputs = utils.createModelInputs(state.model);\n const start = performance.now();\n const outputs = await edgeFlow.runInference(state.model, inputs);\n const time = (performance.now() - start).toFixed(2);\n const data = outputs[0].toArray();\n\n const info = [\n `✓ Inference: ${time}ms`,\n `Output: [${data.slice(0, 5).map(x => x.toFixed(4)).join(', ')}...]`,\n ].join('\\n');\n\n ui.$('model-output').innerHTML = `${info}`;\n\n inputs.forEach(t => t.dispose());\n outputs.forEach(t => t.dispose());\n } catch (e) {\n ui.showError('model-output', e);\n }\n },\n\n /**\n * Run tensor operation tests\n */\n testTensors() {\n try {\n const a = edgeFlow.tensor([[1, 2], [3, 4]]);\n const b = edgeFlow.tensor([[5, 6], [7, 8]]);\n const sum = edgeFlow.add(a, b);\n const rand = edgeFlow.random([10]);\n const probs = edgeFlow.softmax(edgeFlow.tensor([1, 2, 3, 4]));\n\n const info = [\n `✓ All tensor tests passed`,\n `• Created 2x2 tensor`,\n `• Addition: [${sum.toArray()}]`,\n `• Random: [${rand.toArray().slice(0, 5).map(x => x.toFixed(2))}...]`,\n `• Softmax: [${probs.toArray().map(x => x.toFixed(3))}]`,\n ].join('\\n');\n\n ui.$('tensor-output').innerHTML = `${info}`;\n\n [a, b, sum, rand, probs].forEach(t => t.dispose());\n ui.updateMemoryStatus();\n } catch (e) {\n ui.showError('tensor-output', e);\n }\n },\n\n /**\n * Classify single text\n */\n async classifyText() {\n if (!state.model) {\n ui.setOutput('text-output', 'Load model first', 'warn');\n return;\n }\n\n const text = ui.$('text-input')?.value;\n if (!text) return;\n\n ui.showLoading('text-output', 'Classifying...');\n\n try {\n const result = await utils.inferText(text);\n const emoji = result.label === 'positive' ? '😊' : '😞';\n const pct = (result.score * 100).toFixed(1);\n ui.$('text-output').innerHTML = `${emoji} ${result.label.toUpperCase()} (${pct}%)`;\n } catch (e) {\n ui.showError('text-output', e);\n }\n },\n\n /**\n * Batch classification\n */\n async classifyBatch() {\n if (!state.model) {\n ui.setOutput('text-output', 'Load model first', 'warn');\n return;\n }\n\n const texts = ['I love this!', 'This is terrible.', 'Amazing!', 'Worst ever.', 'Pretty good.'];\n ui.showLoading('text-output', 'Processing batch...');\n\n try {\n const start = performance.now();\n const results = await Promise.all(texts.map(t => utils.inferText(t)));\n const time = (performance.now() - start).toFixed(0);\n\n const lines = results.map((r, i) => {\n const emoji = r.label === 'positive' ? '😊' : '😞';\n return `${emoji} \"${texts[i]}\" → ${r.label}`;\n });\n\n lines.push('', `Total: ${time}ms`);\n ui.$('text-output').innerHTML = `${lines.join('\\n')}`;\n } catch (e) {\n ui.showError('text-output', e);\n }\n },\n\n /**\n * Extract features\n */\n async extractFeatures() {\n if (!state.model) {\n ui.setOutput('feature-output', 'Load model first', 'warn');\n return;\n }\n\n const text = ui.$('feature-input')?.value;\n if (!text) return;\n\n ui.showLoading('feature-output', 'Extracting...');\n\n try {\n const inputs = utils.createModelInputs(state.model);\n const start = performance.now();\n const outputs = await edgeFlow.runInference(state.model, inputs);\n const time = (performance.now() - start).toFixed(2);\n const embeddings = outputs[0].toArray();\n const norm = Math.sqrt(embeddings.reduce((a, b) => a + b * b, 0));\n\n const info = [\n `✓ Features extracted in ${time}ms`,\n `Dimension: ${embeddings.length}`,\n `L2 Norm: ${norm.toFixed(4)}`,\n `Sample: [${embeddings.slice(0, 5).map(x => x.toFixed(4)).join(', ')}...]`,\n ].join('\\n');\n\n ui.$('feature-output').innerHTML = `${info}`;\n\n inputs.forEach(t => t.dispose());\n outputs.forEach(t => t.dispose());\n } catch (e) {\n ui.showError('feature-output', e);\n }\n },\n\n /**\n * Quantization demo\n */\n quantize() {\n try {\n const weights = edgeFlow.tensor([0.5, -0.3, 0.8, -0.1, 0.9, -0.7, 0.2, -0.4], [2, 4], 'float32');\n const { tensor: quantized, scale, zeroPoint } = edgeFlow.quantizeTensor(weights, 'int8');\n const dequantized = edgeFlow.dequantizeTensor(quantized, scale, zeroPoint, 'int8');\n \n const original = weights.toArray();\n const recovered = dequantized.toArray();\n const maxError = Math.max(...original.map((v, i) => Math.abs(v - recovered[i])));\n\n const info = [\n `✓ Int8 Quantization`,\n `Original: [${original.map(v => v.toFixed(3)).join(', ')}]`,\n `Quantized: [${quantized.toArray().join(', ')}]`,\n `Dequantized: [${recovered.map(v => v.toFixed(3)).join(', ')}]`,\n `Scale: ${scale.toFixed(6)}, Max Error: ${maxError.toFixed(6)}`,\n ].join('\\n');\n\n ui.$('quant-output').innerHTML = `${info}`;\n\n [weights, quantized, dequantized].forEach(t => t.dispose());\n } catch (e) {\n ui.showError('quant-output', e);\n }\n },\n\n /**\n * Pruning demo\n */\n prune() {\n try {\n const weights = edgeFlow.tensor([0.5, -0.1, 0.8, -0.05, 0.9, -0.02, 0.2, -0.4], [2, 4], 'float32');\n const { tensor: pruned, sparsity } = edgeFlow.pruneTensor(weights, { ratio: 0.5 });\n\n const info = [\n `✓ Magnitude Pruning (50%)`,\n `Original: [${weights.toArray().map(v => v.toFixed(2)).join(', ')}]`,\n `Pruned: [${pruned.toArray().map(v => v.toFixed(2)).join(', ')}]`,\n `Sparsity: ${(sparsity * 100).toFixed(1)}%`,\n ].join('\\n');\n\n ui.$('quant-output').innerHTML = `${info}`;\n\n [weights, pruned].forEach(t => t.dispose());\n } catch (e) {\n ui.showError('quant-output', e);\n }\n },\n\n /**\n * Debugger demo\n */\n debug() {\n try {\n const data = Array.from({ length: 100 }, () => Math.random() * 2 - 1);\n const tensor = edgeFlow.tensor(data, [10, 10], 'float32');\n const inspection = edgeFlow.inspectTensor(tensor, 'random_weights');\n const histogram = edgeFlow.createAsciiHistogram(inspection.histogram, 25, 4);\n\n const info = [\n `Tensor: ${inspection.name}`,\n `Shape: [${inspection.shape}], Size: ${inspection.size}`,\n `Statistics:`,\n ` Min: ${inspection.stats.min.toFixed(4)}`,\n ` Max: ${inspection.stats.max.toFixed(4)}`,\n ` Mean: ${inspection.stats.mean.toFixed(4)}`,\n ` Std: ${inspection.stats.std.toFixed(4)}`,\n '',\n histogram,\n ].join('\\n');\n\n ui.$('debugger-output').innerHTML = `${info}`;\n\n tensor.dispose();\n } catch (e) {\n ui.showError('debugger-output', e);\n }\n },\n\n /**\n * Benchmark demo\n */\n async benchmark() {\n ui.showLoading('benchmark-output', 'Running benchmark...');\n\n try {\n const result = await edgeFlow.runBenchmark(async () => {\n const t = edgeFlow.tensor(Array.from({ length: 1000 }, () => Math.random()), [1000], 'float32');\n const sum = t.toArray().reduce((a, b) => a + b, 0);\n t.dispose();\n return sum;\n }, { warmupRuns: 2, runs: 5, name: 'Tensor Sum (1000)' });\n\n const info = [\n `Benchmark: ${result.name}`,\n `Avg: ${result.avgTime.toFixed(2)}ms`,\n `Min: ${result.minTime.toFixed(2)}ms`,\n `Max: ${result.maxTime.toFixed(2)}ms`,\n `Throughput: ${result.throughput.toFixed(0)} ops/sec`,\n ].join('\\n');\n\n ui.$('benchmark-output').innerHTML = `${info}`;\n } catch (e) {\n ui.showError('benchmark-output', e);\n }\n },\n\n /**\n * Scheduler test\n */\n async testScheduler() {\n ui.showLoading('scheduler-output', 'Testing scheduler...');\n\n try {\n const scheduler = edgeFlow.getScheduler();\n const task1 = scheduler.schedule('model-a', async () => { await utils.sleep(100); return 'Task 1'; }, 'high');\n const task2 = scheduler.schedule('model-b', async () => { await utils.sleep(50); return 'Task 2'; }, 'normal');\n const task3 = scheduler.schedule('model-a', async () => { await utils.sleep(75); return 'Task 3'; }, 'low');\n\n const [r1, r2, r3] = await Promise.all([task1.wait(), task2.wait(), task3.wait()]);\n\n const info = [\n `✓ Scheduler Test Passed`,\n `• ${r1} (high priority)`,\n `• ${r2} (normal priority)`,\n `• ${r3} (low priority)`,\n ].join('\\n');\n\n ui.$('scheduler-output').innerHTML = `${info}`;\n } catch (e) {\n ui.showError('scheduler-output', e);\n }\n },\n\n /**\n * Memory allocation test\n */\n allocateMemory() {\n try {\n const before = edgeFlow.getMemoryStats();\n \n for (let i = 0; i < 10; i++) {\n state.testTensors.push(edgeFlow.random([100, 100]));\n }\n \n const after = edgeFlow.getMemoryStats();\n\n const info = [\n `✓ Allocated 10 tensors (100x100)`,\n `Before: ${utils.formatBytes(before.allocated || 0)}, ${before.tensorCount || 0} tensors`,\n `After: ${utils.formatBytes(after.allocated || 0)}, ${after.tensorCount || 0} tensors`,\n ].join('\\n');\n\n ui.$('memory-output').innerHTML = `${info}`;\n ui.updateMemoryStatus();\n } catch (e) {\n ui.showError('memory-output', e);\n }\n },\n\n /**\n * Memory cleanup\n */\n cleanupMemory() {\n state.testTensors.forEach(t => {\n if (!t.isDisposed) t.dispose();\n });\n state.testTensors = [];\n edgeFlow.gc();\n\n ui.showSuccess('memory-output', 'Memory cleaned up');\n ui.updateMemoryStatus();\n },\n\n /**\n * Concurrency test\n */\n async testConcurrency() {\n if (!state.model) {\n ui.setOutput('concurrency-output', 'Load model first', 'warn');\n ui.$('concurrency-metrics')?.classList.add('hidden');\n return;\n }\n\n ui.showLoading('concurrency-output', 'Running concurrent tasks...');\n\n try {\n const texts = ['Great!', 'Terrible!', 'Amazing!', 'Awful!', 'Good!', 'Bad!', 'Nice!', 'Horrible!'];\n const start = performance.now();\n const results = await Promise.all(texts.map(t => utils.inferText(t)));\n const total = performance.now() - start;\n\n const lines = [\n `✓ Concurrent execution complete`,\n ...results.map((r, i) => `${r.label === 'positive' ? '😊' : '😞'} \"${texts[i]}\"`),\n ];\n\n ui.$('concurrency-output').innerHTML = `${lines.join('\\n')}`;\n\n ui.renderMetrics('concurrency-metrics', [\n { value: total.toFixed(0) + 'ms', label: 'Total' },\n { value: String(texts.length), label: 'Tasks' },\n { value: (total / texts.length).toFixed(0) + 'ms', label: 'Avg' },\n ]);\n } catch (e) {\n ui.showError('concurrency-output', e);\n }\n },\n\n /**\n * Start performance monitor\n */\n startMonitor() {\n if (!state.monitor) {\n state.monitor = new edgeFlow.PerformanceMonitor({\n sampleInterval: config.monitorSampleInterval,\n historySize: config.monitorHistorySize,\n });\n state.monitor.onSample(sample => ui.updateMonitorMetrics(sample));\n }\n state.monitor.start();\n },\n\n /**\n * Stop monitor\n */\n stopMonitor() {\n if (state.monitor) {\n state.monitor.stop();\n }\n },\n\n /**\n * Simulate inferences for monitor\n */\n simulateInferences() {\n if (!state.monitor) {\n this.startMonitor();\n }\n \n for (let i = 0; i < 5; i++) {\n setTimeout(() => {\n state.monitor?.recordInference(30 + Math.random() * 70);\n }, i * 100);\n }\n },\n\n /**\n * Open dashboard modal\n */\n openDashboard() {\n if (!state.monitor) {\n this.startMonitor();\n this.simulateInferences();\n }\n\n const modal = ui.$('dashboard-modal');\n const frame = ui.$('dashboard-frame');\n \n if (modal && frame) {\n frame.srcdoc = edgeFlow.generateDashboardHTML(state.monitor);\n modal.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n },\n\n /**\n * Close dashboard modal\n */\n closeDashboard() {\n const modal = ui.$('dashboard-modal');\n if (modal) {\n modal.classList.remove('active');\n document.body.style.overflow = '';\n }\n },\n};\n\n/* ==========================================================================\n 5. SAM Interactive Segmentation (Real Model)\n ========================================================================== */\n\nconst sam = {\n /**\n * Initialize SAM UI and start model loading\n */\n async init() {\n const fileInput = ui.$('sam-file-input');\n const container = ui.$('sam-container');\n \n if (fileInput) {\n fileInput.addEventListener('change', (e) => this.handleFileSelect(e));\n }\n \n // Drag and drop\n if (container) {\n container.addEventListener('dragover', (e) => {\n e.preventDefault();\n container.classList.add('dragover');\n });\n container.addEventListener('dragleave', () => {\n container.classList.remove('dragover');\n });\n container.addEventListener('drop', (e) => {\n e.preventDefault();\n container.classList.remove('dragover');\n const file = e.dataTransfer?.files[0];\n if (file && file.type.startsWith('image/')) {\n this.loadImage(file);\n }\n });\n }\n\n // Start loading SAM models automatically\n await this.loadModels();\n },\n\n /**\n * Load SAM models with progress display\n */\n async loadModels() {\n const loader = ui.$('sam-loader');\n const loaderText = ui.$('sam-loader-text');\n const loaderDetail = ui.$('sam-loader-detail');\n const progress = ui.$('sam-progress');\n const samContainer = ui.$('sam-container');\n \n try {\n // Create pipeline\n state.samPipeline = edgeFlow.createImageSegmentationPipeline();\n \n // Load models with progress\n await state.samPipeline.loadModels((progressInfo) => {\n const { model, progress: pct, loaded, total } = progressInfo;\n \n if (loaderText) {\n loaderText.textContent = `Loading ${model}... (${utils.formatBytes(loaded)} / ${utils.formatBytes(total)})`;\n }\n if (loaderDetail) {\n loaderDetail.textContent = `${pct}%`;\n }\n if (progress) {\n progress.style.width = `${pct}%`;\n }\n });\n \n state.samModelLoaded = true;\n \n // Hide loader, show main UI\n if (loader) loader.classList.add('hidden');\n if (samContainer) samContainer.classList.remove('hidden');\n \n // Enable buttons\n ui.$('sam-sample-btn')?.removeAttribute('disabled');\n ui.$('sam-clear-btn')?.removeAttribute('disabled');\n ui.$('sam-download-btn')?.removeAttribute('disabled');\n \n ui.setOutput('sam-output', '✓ SAM model loaded! Click to upload an image or use \"Sample Image\".', 'success');\n \n } catch (error) {\n console.error('SAM model loading failed:', error);\n \n if (loaderText) {\n loaderText.textContent = `Failed to load model: ${error.message}`;\n loaderText.style.color = 'var(--error)';\n }\n if (loaderDetail) {\n loaderDetail.textContent = 'Check console for details';\n }\n \n ui.showError('sam-output', error);\n }\n },\n\n /**\n * Handle file selection\n */\n handleFileSelect(e) {\n const file = e.target?.files?.[0];\n if (file) {\n this.loadImage(file);\n }\n },\n\n /**\n * Load image from file or URL\n */\n async loadImage(source) {\n if (!state.samModelLoaded) {\n ui.setOutput('sam-output', 'Model not loaded yet. Please wait...', 'warn');\n return;\n }\n \n ui.setOutput('sam-output', 'Loading image...', 'info');\n \n try {\n const img = new Image();\n img.crossOrigin = 'anonymous';\n \n await new Promise((resolve, reject) => {\n img.onload = resolve;\n img.onerror = reject;\n \n if (typeof source === 'string') {\n img.src = source;\n } else {\n img.src = URL.createObjectURL(source);\n }\n });\n \n // Show workspace\n ui.$('sam-upload')?.classList.add('hidden');\n ui.$('sam-workspace')?.classList.remove('hidden');\n \n // Setup canvases\n const canvas = ui.$('sam-canvas');\n const maskCanvas = ui.$('sam-mask-canvas');\n \n if (canvas && maskCanvas) {\n state.samCanvas = canvas;\n state.samMaskCanvas = maskCanvas;\n state.samCtx = canvas.getContext('2d');\n state.samMaskCtx = maskCanvas.getContext('2d');\n \n // Set canvas size\n const container = ui.$('sam-workspace');\n const containerWidth = container?.clientWidth || 400;\n const containerHeight = container?.clientHeight || 250;\n \n const scale = Math.min(\n containerWidth / img.width,\n containerHeight / img.height\n );\n \n canvas.width = img.width * scale;\n canvas.height = img.height * scale;\n maskCanvas.width = canvas.width;\n maskCanvas.height = canvas.height;\n \n // Draw image\n state.samCtx.drawImage(img, 0, 0, canvas.width, canvas.height);\n state.samImage = img;\n state.samPoints = [];\n \n // Setup click handler\n canvas.onclick = (e) => this.handleClick(e, 1); // Left click = positive\n canvas.oncontextmenu = (e) => {\n e.preventDefault();\n this.handleClick(e, 0); // Right click = negative\n };\n \n // Encode image with SAM encoder\n ui.setOutput('sam-output', 'Encoding image with SAM...', 'info');\n const encodeStart = performance.now();\n await state.samPipeline.setImage(img);\n const encodeTime = (performance.now() - encodeStart).toFixed(0);\n \n ui.setOutput('sam-output', `✓ Image encoded in ${encodeTime}ms. Click to segment objects. Left-click = include, Right-click = exclude.`, 'success');\n }\n } catch (error) {\n ui.showError('sam-output', error);\n }\n },\n\n /**\n * Load sample image\n */\n async loadSampleImage() {\n if (!state.samModelLoaded) {\n ui.setOutput('sam-output', 'Model not loaded yet. Please wait...', 'warn');\n return;\n }\n \n // Using a reliable public image URL\n const sampleUrl = 'https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=640';\n await this.loadImage(sampleUrl);\n },\n\n /**\n * Handle canvas click\n */\n async handleClick(e, label) {\n if (!state.samCanvas || !state.samPipeline || !state.samModelLoaded) return;\n \n const rect = state.samCanvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) / rect.width;\n const y = (e.clientY - rect.top) / rect.height;\n \n // Add point\n state.samPoints.push({ x, y, label });\n \n // Draw point indicator\n this.drawPoints();\n \n // Run segmentation\n ui.setOutput('sam-output', 'Segmenting...', 'info');\n \n try {\n const startTime = performance.now();\n const result = await state.samPipeline.segment({\n points: state.samPoints,\n });\n const time = (performance.now() - startTime).toFixed(0);\n \n // Draw mask\n this.drawMask(result);\n \n ui.setOutput('sam-output', `✓ Segmented in ${time}ms (score: ${result.score.toFixed(2)})`, 'success');\n } catch (error) {\n ui.showError('sam-output', error);\n }\n },\n\n /**\n * Draw points on canvas\n */\n drawPoints() {\n // Remove existing point indicators\n document.querySelectorAll('.sam-point').forEach(el => el.remove());\n \n const workspace = ui.$('sam-workspace');\n if (!workspace || !state.samCanvas) return;\n \n for (const point of state.samPoints) {\n const indicator = document.createElement('div');\n indicator.className = `sam-point ${point.label === 1 ? 'positive' : 'negative'}`;\n indicator.style.left = `${point.x * 100}%`;\n indicator.style.top = `${point.y * 100}%`;\n workspace.appendChild(indicator);\n }\n },\n\n /**\n * Draw segmentation mask\n */\n drawMask(result) {\n if (!state.samMaskCtx || !state.samMaskCanvas) return;\n \n const { mask, width, height } = result;\n const canvas = state.samMaskCanvas;\n \n // Create ImageData\n const imageData = state.samMaskCtx.createImageData(canvas.width, canvas.height);\n \n // Scale mask to canvas size\n const scaleX = width / canvas.width;\n const scaleY = height / canvas.height;\n \n for (let y = 0; y < canvas.height; y++) {\n for (let x = 0; x < canvas.width; x++) {\n const srcX = Math.floor(x * scaleX);\n const srcY = Math.floor(y * scaleY);\n const srcIdx = srcY * width + srcX;\n const dstIdx = (y * canvas.width + x) * 4;\n \n if (mask[srcIdx] > 0) {\n // Green overlay for segmented area\n imageData.data[dstIdx] = 127; // R\n imageData.data[dstIdx + 1] = 169; // G\n imageData.data[dstIdx + 2] = 33; // B\n imageData.data[dstIdx + 3] = 180; // A\n }\n }\n }\n \n state.samMaskCtx.putImageData(imageData, 0, 0);\n },\n\n /**\n * Clear segmentation\n */\n clear() {\n state.samPoints = [];\n \n // Clear mask canvas\n if (state.samMaskCtx && state.samMaskCanvas) {\n state.samMaskCtx.clearRect(0, 0, state.samMaskCanvas.width, state.samMaskCanvas.height);\n }\n \n // Remove point indicators\n document.querySelectorAll('.sam-point').forEach(el => el.remove());\n \n ui.setOutput('sam-output', 'Cleared. Click to segment objects.', 'info');\n },\n\n /**\n * Download mask as PNG\n */\n downloadMask() {\n if (!state.samMaskCanvas) {\n ui.setOutput('sam-output', 'No mask to download', 'warn');\n return;\n }\n \n // Create download link\n const link = document.createElement('a');\n link.download = 'segmentation-mask.png';\n link.href = state.samMaskCanvas.toDataURL('image/png');\n link.click();\n },\n\n /**\n * Reset to upload state\n */\n reset() {\n state.samImage = null;\n state.samPoints = [];\n \n ui.$('sam-upload')?.classList.remove('hidden');\n ui.$('sam-workspace')?.classList.add('hidden');\n \n document.querySelectorAll('.sam-point').forEach(el => el.remove());\n \n if (state.samMaskCtx && state.samMaskCanvas) {\n state.samMaskCtx.clearRect(0, 0, state.samMaskCanvas.width, state.samMaskCanvas.height);\n }\n \n // Clear the pipeline's image embedding\n if (state.samPipeline) {\n state.samPipeline.clearImage();\n }\n \n ui.setOutput('sam-output', 'Click on image to segment objects. Left-click = include, Right-click = exclude.', 'info');\n },\n};\n\n/* ==========================================================================\n 6. AI Chat (Real Model)\n ========================================================================== */\n\nconst chat = {\n /**\n * Initialize chat UI\n */\n init() {\n const input = ui.$('chat-input');\n if (input) {\n input.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' && !e.shiftKey && !state.chatGenerating) {\n e.preventDefault();\n this.send();\n }\n });\n }\n },\n\n /**\n * Load LLM model with progress display\n */\n async loadModel() {\n if (state.chatModelLoaded) {\n ui.$('chat-container')?.classList.remove('hidden');\n ui.$('llm-loader')?.classList.add('hidden');\n return;\n }\n \n const loadBtn = ui.$('llm-load-btn');\n const progressContainer = ui.$('llm-progress-container');\n const progress = ui.$('llm-progress');\n const loaderDetail = ui.$('llm-loader-detail');\n \n try {\n // Disable button and show progress\n if (loadBtn) {\n loadBtn.disabled = true;\n loadBtn.textContent = 'Loading...';\n }\n if (progressContainer) progressContainer.classList.remove('hidden');\n if (loaderDetail) loaderDetail.classList.remove('hidden');\n \n this.updateStatus('loading', 'Downloading model...');\n \n // Create pipeline\n state.chatPipeline = edgeFlow.createTextGenerationPipeline();\n state.chatPipeline.setChatTemplate('chatml');\n \n // Load model with progress\n await state.chatPipeline.loadModel((progressInfo) => {\n const { stage, progress: pct } = progressInfo;\n \n if (loadBtn) {\n if (stage === 'tokenizer') {\n loadBtn.textContent = 'Loading tokenizer...';\n } else {\n loadBtn.textContent = `Downloading... ${pct}%`;\n }\n }\n if (loaderDetail) {\n loaderDetail.classList.add('hidden');\n }\n if (progress) {\n // Tokenizer is quick, model is the main download\n const totalProgress = stage === 'tokenizer' ? pct * 0.05 : 5 + pct * 0.95;\n progress.style.width = `${totalProgress}%`;\n }\n });\n \n state.chatModelLoaded = true;\n \n // Hide loader, show chat UI\n ui.$('llm-loader')?.classList.add('hidden');\n ui.$('chat-container')?.classList.remove('hidden');\n \n this.updateStatus('ready', 'Model loaded! Ready to chat');\n \n } catch (error) {\n console.error('LLM model loading failed:', error);\n \n if (loadBtn) {\n loadBtn.disabled = false;\n loadBtn.textContent = 'Retry Load';\n }\n if (loaderDetail) {\n loaderDetail.textContent = `Error: ${error.message}`;\n loaderDetail.style.color = 'var(--error)';\n }\n \n this.updateStatus('error', `Failed: ${error.message}`);\n }\n },\n\n /**\n * Send message\n */\n async send() {\n if (!state.chatModelLoaded) {\n this.updateStatus('error', 'Load model first by clicking \"Load Model\"');\n return;\n }\n \n const input = ui.$('chat-input');\n const message = input?.value?.trim();\n \n if (!message || state.chatGenerating) return;\n \n // Clear input\n input.value = '';\n \n // Hide welcome message\n const welcome = ui.$('chat-messages')?.querySelector('.chat-welcome');\n if (welcome) welcome.remove();\n \n // Add user message\n this.addMessage('user', message);\n \n // Set generating state\n state.chatGenerating = true;\n this.updateStatus('loading', 'Generating...');\n \n try {\n // Add assistant message placeholder\n const assistantMsg = this.addMessage('assistant', 'Thinking...', true);\n \n // Generate response using real model\n // Note: TinyLlama in WASM is slow, limit tokens for demo\n let response = '';\n let tokenCount = 0;\n \n console.log('[Chat] Starting generation...');\n const startTime = performance.now();\n \n // Use streaming for real-time feedback\n if (state.chatPipeline.chatStream) {\n for await (const event of state.chatPipeline.chatStream(message, {\n maxNewTokens: 32, // Limited for browser performance\n temperature: 0.7,\n topP: 0.9,\n })) {\n response = event.generatedText;\n tokenCount++;\n assistantMsg.textContent = response;\n this.updateStatus('loading', `Generating... (${tokenCount} tokens)`);\n \n // Scroll to bottom\n const container = ui.$('chat-messages');\n if (container) {\n container.scrollTop = container.scrollHeight;\n }\n }\n } else {\n // Fallback to non-streaming\n this.updateStatus('loading', 'Generating (this may take a while)...');\n const result = await state.chatPipeline.chat(message, {\n maxNewTokens: 32, // Limited for browser performance\n temperature: 0.7,\n topP: 0.9,\n });\n response = result.generatedText;\n tokenCount = result.numTokens;\n assistantMsg.textContent = response;\n }\n \n const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);\n console.log(`[Chat] Generated ${tokenCount} tokens in ${elapsed}s`);\n \n // Remove typing indicator\n assistantMsg.classList.remove('typing');\n \n // Update history\n state.chatHistory.push(\n { role: 'user', content: message },\n { role: 'assistant', content: response }\n );\n \n this.updateStatus('ready', 'Ready to chat');\n } catch (error) {\n this.updateStatus('error', `Error: ${error.message}`);\n // Remove typing indicator\n const typingMsg = ui.$('chat-messages')?.querySelector('.typing');\n if (typingMsg) typingMsg.remove();\n } finally {\n state.chatGenerating = false;\n }\n \n // Scroll to bottom\n const container = ui.$('chat-messages');\n if (container) {\n container.scrollTop = container.scrollHeight;\n }\n },\n\n /**\n * Add message to chat\n */\n addMessage(role, content, isTyping = false) {\n const container = ui.$('chat-messages');\n if (!container) return null;\n \n const msg = document.createElement('div');\n msg.className = `chat-message ${role}${isTyping ? ' typing' : ''}`;\n msg.textContent = content;\n \n container.appendChild(msg);\n container.scrollTop = container.scrollHeight;\n \n return msg;\n },\n\n /**\n * Update status indicator\n */\n updateStatus(status, text) {\n const dot = ui.$('chat-status')?.querySelector('.chat-status-dot');\n const textEl = ui.$('chat-status-text');\n \n if (dot) {\n dot.className = `chat-status-dot ${status === 'loading' ? 'loading' : status === 'error' ? 'error' : ''}`;\n }\n \n if (textEl) {\n textEl.textContent = text;\n }\n },\n\n /**\n * Clear chat history\n */\n clear() {\n state.chatHistory = [];\n \n // Clear conversation in pipeline\n if (state.chatPipeline) {\n state.chatPipeline.clearConversation();\n }\n \n const container = ui.$('chat-messages');\n if (container) {\n container.innerHTML = `\n Hi! I'm TinyLlama running entirely in your browser.
\nAsk me anything!
\nLightweight Browser ML Inference Framework
\nTinyLlama is a 1.1B parameter language model.
\nDownload size: ~714MB (may take several minutes)
\n| Time | \nInferences | \nAvg Time | \nThroughput | \nMemory | \nFPS | \n
|---|---|---|---|---|---|
| ${new Date(s.timestamp).toLocaleTimeString()} | \n${s.inference.count} | \n${s.inference.avgTime.toFixed(2)}ms | \n${s.inference.throughput.toFixed(1)}/s | \n${formatBytes2(s.memory.usedHeap)} | \n${s.system.fps} | \n
| Time | \nInferences | \nAvg Time | \nThroughput | \nMemory | \nFPS | \n
|---|---|---|---|---|---|
| ${new Date(s.timestamp).toLocaleTimeString()} | \n${s.inference.count} | \n${s.inference.avgTime.toFixed(2)}ms | \n${s.inference.throughput.toFixed(1)}/s | \n${formatBytes(s.memory.usedHeap)} | \n${s.system.fps} | \n