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