| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>High-Speed 10-Model WebGPU Array</title> |
| <style> |
| body { margin: 0; font-family: Segoe UI, Arial, sans-serif; background: #0f0f12; color: #fff; display: flex; justify-content: center; height: 100vh; } |
| .app-window { width: 100%; max-width: 500px; display: flex; flex-direction: column; background: #17171c; border-left: 1px solid #2d2d37; border-right: 1px solid #2d2d37; } |
| .app-header { background: #1e1e24; padding: 15px; border-bottom: 1px solid #2d2d37; } |
| .status-badge { font-size: 12px; color: #00ffcc; font-weight: bold; margin-top: 4px; } |
| select, input, button { font-size: 15px; border-radius: 8px; border: none; } |
| select { background: #2d2d37; color: white; padding: 10px; width: 100%; margin-top: 8px; font-weight: bold; } |
| .chat-display { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } |
| .input-bar { display: flex; padding: 15px; background: #1e1e24; border-top: 1px solid #2d2d37; } |
| input { flex: 1; padding: 12px; background: #2d2d37; color: white; margin-right: 10px; } |
| button { padding: 12px 20px; background: #0070f3; color: white; font-weight: bold; cursor: pointer; } |
| button:disabled { background: #444; cursor: not-allowed; } |
| .msg { padding: 10px 14px; border-radius: 8px; max-width: 85%; line-height: 1.4; font-size: 15px; } |
| .user-msg { background: #0070f3; align-self: flex-end; } |
| .ai-msg { background: #2d2d37; color: #00ffcc; align-self: flex-start; border-left: 3px solid #00ffcc; } |
| </style> |
| </head> |
| <body> |
| <div class="app-window"> |
| <div class="app-header"> |
| <strong>10-Model WebGPU Stable Cluster</strong> |
| <div id="status-log" class="status-badge">Select a pipeline engine option...</div> |
| <select id="model-select" onchange="switchEngineNode()"> |
| <optgroup label="Text Generation & Chat"> |
| <option value="text-generation|Xenova/SmolLM-135M-Instruct">1. SmolLM 135M (Warp Speed Text)</option> |
| <option value="text-generation|Xenova/qwen-1.5-0.5b-chat">2. Qwen 1.5 0.5B (High Logic Core)</option> |
| </optgroup> |
| <optgroup label="Language Translation"> |
| <option value="translation|Xenova/t5-small">3. Google T5 Small (English to French)</option> |
| <option value="translation|Xenova/t5-base">4. Google T5 Base (High Precision Trans)</option> |
| </optgroup> |
| <optgroup label="Sentiment & Text Metrics"> |
| <option value="sentiment-analysis|Xenova/distilbert-base-uncased-finetuned-sst-2-english">5. DistilBERT Sentiment Analysis</option> |
| <option value="feature-extraction|Xenova/all-MiniLM-L6-v2">6. MiniLM Vector Embeddings</option> |
| </optgroup> |
| <optgroup label="Computer Vision Loops"> |
| <option value="image-classification|Xenova/vit-base-patch16-224">7. ViT Transformer Image Tagging</option> |
| <option value="object-detection|Xenova/detr-resnet-50">8. DE-TR ResNet Object Tracker</option> |
| <option value="image-to-text|Xenova/vit-gpt2-image-captioning">9. ViT-GPT2 Image Captioner</option> |
| <option value="zero-shot-image-classification|Xenova/clip-vit-base-patch32">10. CLIP Multi-Vector Matcher</option> |
| </optgroup> |
| </select> |
| </div> |
| <div id="chat-area" class="chat-display"></div> |
| <div class="input-bar"> |
| <input type="text" id="user-prompt" placeholder="Type your message here..."> |
| <button id="send-btn" onclick="fireHubInference()">Run</button> |
| </div> |
| </div> |
|
|
| <script type="module"> |
| |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0-alpha.19'; |
| |
| let activeRunner = null; |
| let activeKey = ""; |
| |
| const statusBadge = document.getElementById('status-log'); |
| const inputField = document.getElementById('user-prompt'); |
| const runBtn = document.getElementById('send-btn'); |
| const selector = document.getElementById('model-select'); |
| |
| window.switchEngineNode = async function() { |
| const currentChoice = selector.value; |
| if (currentChoice === activeKey) return; |
| |
| const [task, modelId] = currentChoice.split('|'); |
| inputField.disabled = true; |
| runBtn.disabled = true; |
| statusBadge.style.color = "#00ffcc"; |
| statusBadge.innerText = "Allocating local memory structures..."; |
| |
| try { |
| activeRunner = null; |
| |
| activeRunner = await pipeline(task, modelId, { |
| device: 'webgpu' |
| }); |
| |
| activeKey = currentChoice; |
| statusBadge.innerText = "● Engine Ready: WebGPU Network Latency 0ms"; |
| inputField.disabled = false; |
| runBtn.disabled = false; |
| } catch (err) { |
| console.warn("Forcing fallback pipeline..."); |
| activeRunner = await pipeline(task, modelId); |
| activeKey = currentChoice; |
| statusBadge.innerText = "● Engine Ready: Client Mode Active"; |
| inputField.disabled = false; |
| runBtn.disabled = false; |
| } |
| } |
| |
| window.fireHubInference = async function() { |
| const txt = inputField.value.trim(); |
| if (!txt || !activeRunner) return; |
| |
| const chatArea = document.getElementById('chat-area'); |
| const [task] = activeKey.split('|'); |
| |
| chatArea.innerHTML += `<div class="msg user-msg"><b>You:</b> ${txt}</div>`; |
| inputField.value = ''; |
| chatArea.scrollTop = chatArea.scrollHeight; |
| |
| try { |
| let responseText = ""; |
| |
| if (task === 'text-generation') { |
| const out = await activeRunner(txt, { max_new_tokens: 100 }); |
| responseText = out[0].generated_text; |
| } else if (task === 'translation') { |
| const out = await activeRunner(txt, { src_lang: 'en', tgt_lang: 'fr' }); |
| responseText = `Translated: ${out[0].translation_text}`; |
| } else if (task === 'sentiment-analysis') { |
| const out = await activeRunner(txt); |
| responseText = `Analysis: ${out[0].label} (${(out[0].score * 100).toFixed(1)}%)`; |
| } else if (task === 'feature-extraction') { |
| const out = await activeRunner(txt, { pooling: 'mean', normalize: true }); |
| responseText = `Computed vector embedding array with [${out.data.length}] positions.`; |
| } else { |
| responseText = `Vision model ready. Hook file inputs to map canvas images directly into this processing node.`; |
| } |
| |
| chatArea.innerHTML += `<div class="msg ai-msg"><b>AI:</b> ${responseText}</div>`; |
| } catch (e) { |
| chatArea.innerHTML += `<div class="msg" style="color:red; background:none;">Processing array limit exceeded. Keep inputs shorter.</div>`; |
| } |
| chatArea.scrollTop = chatArea.scrollHeight; |
| } |
| |
| switchEngineNode(); |
| </script> |
| </body> |
| </html> |
