| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <title>On-Device AI Chat</title> |
| <style> |
| body { |
| margin: 0; |
| font-family: sans-serif; |
| background: #111; |
| color: #eee; |
| display: flex; |
| flex-direction: column; |
| height: 100vh; |
| } |
| |
| header { |
| padding: 10px; |
| background: #222; |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| } |
| |
| #chat { |
| flex: 1; |
| overflow-y: auto; |
| padding: 10px; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
| |
| .msg { |
| display: flex; |
| gap: 8px; |
| align-items: flex-start; |
| } |
| |
| .avatar { |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| background: #444; |
| color: #ccc; |
| font-size: 12px; |
| font-weight: bold; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .bubble { |
| background: #333; |
| padding: 8px 10px; |
| border-radius: 8px; |
| max-width: 80%; |
| white-space: pre-wrap; |
| } |
| |
| .user .bubble { |
| background: #2a2a2a; |
| } |
| |
| .error .bubble { |
| background: #4a1a1a; |
| color: #f88; |
| } |
| |
| form { |
| padding: 10px; |
| background: #222; |
| display: flex; |
| gap: 10px; |
| } |
| |
| textarea { |
| flex: 1; |
| padding: 8px; |
| border-radius: 6px; |
| border: none; |
| background: #1a1a1a; |
| color: #eee; |
| } |
| |
| button { |
| padding: 6px 10px; |
| background: #444; |
| color: #eee; |
| border: none; |
| border-radius: 6px; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <header> |
| <strong>Model:</strong> |
| <select id="model"> |
| <option value="Xenova/distilgpt2">distilgpt2</option> |
| <option value="Xenova/phi-3-mini-4k-instruct">phi-3-mini</option> |
| <option value="Xenova/t5-small">t5-small</option> |
| </select> |
| <span id="status">Idle</span> |
| </header> |
|
|
| <div id="chat" aria-live="polite" aria-busy="false"></div> |
|
|
| <form id="composer"> |
| <textarea id="input" placeholder="Say something…" rows="2"></textarea> |
| <button id="send" type="submit">Send</button> |
| </form> |
|
|
| <script type="module"> |
| (async function () { |
| const elChat = document.getElementById('chat'); |
| const elInput = document.getElementById('input'); |
| const elSend = document.getElementById('send'); |
| const elForm = document.getElementById('composer'); |
| const elModel = document.getElementById('model'); |
| const elStatus = document.getElementById('status'); |
| |
| let pipeline, AutoTokenizer; |
| try { |
| const lib = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.1'); |
| pipeline = lib.pipeline; |
| AutoTokenizer = lib.AutoTokenizer; |
| } catch (err) { |
| const div = document.createElement('div'); |
| div.className = 'msg error'; |
| div.innerHTML = `<div class="avatar">!</div><div class="bubble">❌ Failed to load Transformers.js: ${err.message}</div>`; |
| elChat.appendChild(div); |
| console.error('Transformers.js load error:', err); |
| return; |
| } |
| |
| const state = { |
| busy: false, |
| modelId: elModel.value, |
| history: [], |
| resources: new Map(), |
| }; |
| |
| const setBusy = (busy, label = '') => { |
| state.busy = busy; |
| [elInput, elSend, elModel].forEach(el => el.disabled = busy); |
| elChat.setAttribute('aria-busy', String(busy)); |
| elStatus.textContent = busy ? label : 'Idle'; |
| }; |
| |
| const addMessage = (role, text, variant = '') => { |
| const msg = document.createElement('div'); |
| msg.className = `msg ${role} ${variant}`; |
| const avatar = document.createElement('div'); |
| avatar.className = 'avatar'; |
| avatar.textContent = role === 'user' ? 'U' : (variant === 'error' ? '!' : 'AI'); |
| const bubble = document.createElement('div'); |
| bubble.className = 'bubble'; |
| bubble.textContent = text; |
| msg.append(avatar, bubble); |
| elChat.appendChild(msg); |
| elChat.scrollTop = elChat.scrollHeight; |
| return bubble; |
| }; |
| |
| const pushError = (err, context = 'Error') => { |
| const msg = `${context}: ${err?.message || err}`; |
| console.error(context, err); |
| addMessage('assistant', msg, 'error'); |
| state.history.push({ role: 'assistant', content: msg }); |
| elStatus.textContent = 'Error'; |
| }; |
| |
| const ensureModelLoaded = async (modelId) => { |
| if (state.resources.has(modelId)) return state.resources.get(modelId); |
| setBusy(true, 'Loading…'); |
| const task = modelId.includes('t5') ? 'text2text-generation' : 'text-generation'; |
| const pipe = await pipeline(task, modelId); |
| const tokenizer = await AutoTokenizer.from_pretrained(modelId).catch(() => null); |
| const res = { task, pipe, tokenizer }; |
| state.resources.set(modelId, res); |
| setBusy(false); |
| return res; |
| }; |
| |
| const buildPrompt = (tokenizer, task, history) => { |
| const messages = [...history]; |
| if (tokenizer?.apply_chat_template) { |
| try { |
| return tokenizer.apply_chat_template(messages, { add_generation_prompt: true, tokenize: false }); |
| } catch {} |
| } |
| return messages.map(m => `${m.role}: ${m.content}`).join('\n') + '\nassistant:'; |
| }; |
| |
| const generateReply = async (text) => { |
| addMessage('user', text); |
| state.history.push({ role: 'user', content: text }); |
| const botBubble = addMessage('assistant', '…'); |
| |
| try { |
| const { task, pipe, tokenizer } = await ensureModelLoaded(state.modelId); |
| setBusy(true, 'Generating…'); |
| const prompt = buildPrompt(tokenizer, task, state.history); |
| const output = await pipe(prompt, { |
| max_new_tokens: 100, |
| temperature: 0.7, |
| top_p: 0.95, |
| do_sample: true, |
| repetition_penalty: 1.1, |
| return_full_text: false, |
| }); |
| |
| const result = output?.[0] || {}; |
| const textOut = result.generated_text || result.summary_text || result.translation_text || '(no output)'; |
| botBubble.textContent = textOut.trim(); |
| state.history.push({ role: 'assistant', content: textOut.trim() }); |
| } catch (err) { |
| pushError(err, 'Generation failed'); |
| botBubble.textContent = '(error)'; |
| } finally { |
| setBusy(false); |
| } |
| }; |
| |
| elForm.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const text = elInput.value.trim(); |
| if (!text || state.busy) return; |
| elInput.value = ''; |
| try { |
| await generateReply(text); |
| } catch (err) { |
| pushError(err, 'Submit error'); |
| } |
| }); |
| |
| elInput.addEventListener('keydown', (e) => { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| elForm.requestSubmit(); |
| } |
| }); |
| |
| elModel.addEventListener('change', async () => { |
| if (state.busy) return; |
| state.modelId = elModel.value; |
| addMessage('assistant', `Switched to model: ${state.modelId}`); |
| try { |
| await ensureModelLoaded(state.modelId); |
| } catch (err) { |
| pushError(err, 'Model load failed'); |
| } |
| }); |
| |
| window.addEventListener('error', e => pushError(e.error || e.message, 'Uncaught error')); |
| window.addEventListener('unhandledrejection', e => pushError(e.reason, 'Unhandled rejection')); |
| |
| addMessage('assistant', 'Hello! Choose a model and say something.'); |
| setTimeout(() => ensureModelLoaded(state.modelId).catch(err => pushError(err, 'Initial load')), 100); |
| })(); |
| </script> |
| </body> |
|
|
| </html> |
