| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> |
| <title>Local Chat with Transformers.js</title> |
| <style> |
| body{margin:0;font-family:system-ui,sans-serif;background:#0f1115;color:#e8eaf0;display:grid;grid-template-rows:auto 1fr auto;height:100vh;} |
| header,footer{background:#171a21;padding:8px 12px;border-bottom:1px solid #2a2f39;} |
| header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} |
| select,button,textarea,input{background:#11141a;color:#e8eaf0;border:1px solid #2a2f39;border-radius:6px;padding:6px 8px;font:inherit;} |
| button{cursor:pointer;} |
| main{overflow:auto;padding:10px;} |
| .chat{display:flex;flex-direction:column;gap:10px;max-width:900px;margin:auto;} |
| .msg{display:flex;} |
| .msg.user{justify-content:flex-end;} |
| .bubble{padding:8px 10px;border-radius:8px;max-width:80%;white-space:pre-wrap;word-break:break-word;} |
| .msg.user .bubble{background:#1b2433;} |
| .msg.assistant .bubble{background:#141923;} |
| .toast{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:#11141a;padding:6px 10px;border:1px solid #2a2f39;border-radius:6px;opacity:0;transition:opacity .2s;} |
| .toast.show{opacity:1;} |
| .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;} |
| .modal{background:#171a21;padding:16px;border-radius:8px;width:min(400px,90%);} |
| </style> |
| </head> |
| <body> |
| <header> |
| <label for="model">Model:</label> |
| <select id="model"> |
| <option value="Xenova/distilGPT2">Xenova/distilGPT2</option> |
| <option value="Xenova/TinyLlama-1.1B-Chat-v1.0">Xenova/TinyLlama-1.1B-Chat-v1.0</option> |
| <option value="Xenova/Mistral-7B-Instruct-v0.2">Xenova/Mistral-7B-Instruct-v0.2</option> |
| </select> |
| <button id="set-token">Set token</button> |
| <span id="status">Idle</span> |
| </header> |
| <main><div id="chat" class="chat"></div></main> |
| <footer> |
| <textarea id="input" placeholder="Type here…" rows="2" style="flex:1;"></textarea> |
| <button id="send">Send</button> |
| </footer> |
|
|
| <div id="toast" class="toast"></div> |
|
|
| <div id="token-modal" class="modal-backdrop" hidden> |
| <div class="modal"> |
| <h3>Enter HF token</h3> |
| <input id="token-input" type="password" placeholder="hf_xxx" style="width:100%"/> |
| <div style="margin-top:8px;text-align:right;"> |
| <button id="token-cancel">Cancel</button> |
| <button id="token-save">Save</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers"></script> |
| <script> |
| const { pipeline, env } = window.transformers; |
| const chatEl = document.getElementById('chat'); |
| const inputEl = document.getElementById('input'); |
| const sendBtn = document.getElementById('send'); |
| const modelSel = document.getElementById('model'); |
| const statusEl = document.getElementById('status'); |
| const toastEl = document.getElementById('toast'); |
| const tokenModal = document.getElementById('token-modal'); |
| const tokenInput = document.getElementById('token-input'); |
| |
| let state = { pipe:null, modelId:null, task:'text-generation' }; |
| const savedToken = localStorage.getItem('hf_token'); if(savedToken){env.HF_TOKEN=savedToken;} |
| |
| function addMessage(role,text){ |
| const row=document.createElement('div'); |
| row.className='msg '+role; |
| const bub=document.createElement('div'); |
| bub.className='bubble'; |
| bub.textContent=text; |
| row.appendChild(bub); |
| chatEl.appendChild(row); |
| chatEl.scrollTop=chatEl.scrollHeight; |
| return bub; |
| } |
| function showToast(msg){ |
| toastEl.textContent=msg; |
| toastEl.classList.add('show'); |
| setTimeout(()=>toastEl.classList.remove('show'),2000); |
| } |
| function showTokenModal(){ |
| tokenModal.hidden=false; |
| tokenInput.value=localStorage.getItem('hf_token')||''; |
| } |
| function hideTokenModal(){ tokenModal.hidden=true; } |
| function setToken(tok){ |
| if(tok){ env.HF_TOKEN=tok; localStorage.setItem('hf_token',tok);} |
| else{ delete env.HF_TOKEN; localStorage.removeItem('hf_token');} |
| } |
| function isUnauthorizedError(err){ |
| return (err && (err.message||String(err))).includes('Unauthorized access to file'); |
| } |
| async function withAuthRetry(fn){ |
| try { |
| return await fn(); |
| } catch(e){ |
| if(isUnauthorizedError(e)){ |
| return new Promise((resolve,reject)=>{ |
| showTokenModal(); |
| tokenModal.querySelector('#token-save').onclick=()=>{ |
| const val=tokenInput.value.trim(); |
| hideTokenModal(); |
| if(val){ setToken(val); fn().then(resolve).catch(reject);} |
| else{ reject(e);} |
| }; |
| tokenModal.querySelector('#token-cancel').onclick=()=>{ |
| hideTokenModal(); |
| reject(e); |
| }; |
| }); |
| } |
| throw e; |
| } |
| } |
| async function ensurePipeline(modelId,task){ |
| if(state.pipe && state.modelId===modelId && state.task===task) return state.pipe; |
| statusEl.textContent='Loading model…'; |
| const pipe=await withAuthRetry(()=>pipeline(task,modelId,{device:'webgpu'})); |
| state.pipe=pipe; state.modelId=modelId; state.task=task; |
| statusEl.textContent='Ready'; |
| return pipe; |
| } |
| function isAsyncIterable(obj){ return obj && typeof obj[Symbol.asyncIterator]==='function'; } |
| async function generate(text,bubble){ |
| const modelId=modelSel.value; |
| await ensurePipeline(modelId,'text-generation'); |
| const opts={max_new_tokens:128,temperature:0.7,top_p:0.9,repetition_penalty:1.1}; |
| let streamObj; try{ streamObj=state.pipe(text,{...opts,stream:true}); }catch{} |
| if(isAsyncIterable(streamObj)){ |
| let full=''; try{ |
| for await (const out of streamObj){ |
| const t=(out.token && out.token.text)||out.text||''; full+=t; bubble.textContent=full; |
| } |
| return; |
| }catch(e){ |
| if(isUnauthorizedError(e)){ |
| await withAuthRetry(()=>generate(text,bubble)); return; |
| } |
| throw e; |
| } |
| } |
| const out=await withAuthRetry(()=>state.pipe(text,{...opts,stream:false})); |
| const textOut=Array.isArray(out)?(out[0]?.generated_text||out[0]?.text): (out.generated_text||out.text)||''; |
| bubble.textContent=textOut; |
| } |
| async function onSend(){ |
| const val=inputEl.value.trim(); if(!val) return; |
| inputEl.value=''; addMessage('user',val); const bub=addMessage('assistant','…'); |
| try { await generate(val,bub); } |
| catch(e){ bub.textContent='Error: '+(e.message||e); } |
| } |
| sendBtn.onclick=onSend; |
| inputEl.onkeydown=e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); onSend(); } }; |
| document.getElementById('set-token').onclick=()=>{ |
| showTokenModal(); |
| tokenModal.querySelector('#token-save').onclick=()=>{ |
| const val=tokenInput.value.trim(); |
| hideTokenModal(); setToken(val); showToast(val?'Token saved':'Token cleared'); |
| }; |
| tokenModal.querySelector('#token-cancel').onclick=()=>hideTokenModal(); |
| }; |
| |
| addMessage('assistant','Hello! Fully local via Transformers.js. Choose model and send a message.'); |
| </script> |
| </body> |
| </html> |
|
|
