| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Transformers.js Demo</title> |
| <style> |
| #chat-box { border: 1px solid #ccc; height: 200px; overflow-y: auto; padding: 5px; } |
| .msg { margin: 5px 0; } |
| .user-message { color: blue; } |
| .ai-message { color: green; } |
| </style> |
| </head> |
| <body> |
| <div id="status">Initializing...</div> |
| <div id="chat-box"></div> |
| <input id="chat-input" placeholder="Type here..." disabled /> |
| <button id="main-btn" disabled>Loading...</button> |
|
|
| <script type="module"> |
| import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers"; |
| |
| |
| env.allowRemoteModels = true; |
| env.allowLocalModels = false; |
| env.backends.onnx.wasm.proxy = true; |
| env.backends.onnx.wasm.numThreads = 2; |
| |
| const status = document.getElementById('status'); |
| const btn = document.getElementById('main-btn'); |
| const input = document.getElementById('chat-input'); |
| const chatBox = document.getElementById('chat-box'); |
| let generator = null; |
| |
| async function init() { |
| try { |
| btn.disabled = true; |
| status.textContent = "Downloading Model (Stay on page)..."; |
| |
| generator = await pipeline( |
| 'text-generation', |
| 'Xenova/distilbert-base-uncased', |
| { |
| device: 'wasm', |
| progress_callback: (d) => { |
| if (d.status === 'progress') { |
| status.textContent = `Loading: ${Math.round(d.progress)}%`; |
| } |
| } |
| } |
| ); |
| |
| status.textContent = "Ready!"; |
| btn.textContent = "Send"; |
| input.disabled = false; |
| btn.disabled = false; |
| |
| btn.onclick = async () => { |
| const userText = input.value.trim(); |
| if (!userText) return; |
| |
| addMessage('user', userText); |
| input.value = ''; |
| status.textContent = "AI is thinking..."; |
| |
| const output = await generator(userText, { |
| max_new_tokens: 30, |
| temperature: 0.7 |
| }); |
| |
| addMessage('ai', output[0].generated_text.replace(userText, '').trim()); |
| status.textContent = "Ready!"; |
| }; |
| } catch (e) { |
| status.textContent = "Error: " + e.message; |
| console.error("Pipeline init failed:", e); |
| } |
| } |
| |
| function addMessage(sender, text) { |
| const msgDiv = document.createElement('div'); |
| msgDiv.className = `msg ${sender}-message`; |
| msgDiv.textContent = text; |
| chatBox.appendChild(msgDiv); |
| chatBox.scrollTop = chatBox.scrollHeight; |
| } |
| |
| |
| init(); |
| </script> |
| </body> |
| </html> |
