Spaces:
Runtime error
Runtime error
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <title>Hermes-3 Ultra-Fast Interface</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> | |
| <style> | |
| body{margin:0;font-family:"Google Sans",Roboto,Arial,sans-serif;background:#f6f8fa;color:#111;min-height:100vh;display:flex;flex-direction:column} | |
| header{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:.75rem 1.5rem;display:flex;align-items:center} | |
| header img{height:32px;margin-right:.5rem} | |
| header span{font-weight:700;font-size:1.25rem} | |
| main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem} | |
| #prompt{width:min(600px,90vw);border:1px solid #d0d7de;border-radius:8px;padding:.75rem 1rem;font-size:1rem;resize:none} | |
| #prompt:focus{outline:none;border-color:#0969da} | |
| #generate{background:#0969da;color:#fff;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;margin-top:1rem;cursor:pointer} | |
| #generate:disabled{background:#b6c2d1;cursor:not-allowed} | |
| #output{white-space:pre-wrap;background:#fff;border:1px solid #d0d7de;border-radius:8px;padding:1rem;margin-top:1rem;max-width:min(600px,90vw);max-height:50vh;overflow:auto} | |
| #loading{display:none;margin-top:1rem} | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC"/> | |
| <span>Hermes-3 Ultra-Fast</span> | |
| </header> | |
| <main> | |
| <textarea id="prompt" placeholder="Enter your prompt here…" rows="4"></textarea> | |
| <button id="generate">Generate</button> | |
| <div id="loading">Loading model…</div> | |
| <pre id="output"></pre> | |
| </main> | |
| <!-- transformers.js from CDN --> | |
| <script type="module"> | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]'; | |
| let pipe; | |
| async function init() { | |
| document.getElementById('loading').style.display='block'; | |
| pipe = await pipeline('text-generation', 'Xenova/Llama-2-7b-chat-hf', { | |
| dtype: 'q4', | |
| device: 'auto', | |
| }); | |
| document.getElementById('loading').style.display='none'; | |
| } | |
| init(); | |
| document.getElementById('generate').addEventListener('click', async () => { | |
| const prompt = document.getElementById('prompt').value.trim(); | |
| const outEl = document.getElementById('output'); | |
| const btn = document.getElementById('generate'); | |
| if (!prompt || !pipe) return; | |
| btn.disabled = true; | |
| outEl.textContent = ''; | |
| const res = await pipe(prompt, { | |
| max_new_tokens: 256, | |
| temperature: .7, | |
| top_p: .9, | |
| repetition_penalty: 1.1, | |
| do_sample: true, | |
| }); | |
| outEl.textContent = res[0].generated_text.slice(prompt.length); | |
| btn.disabled = false; | |
| }); | |
| </script> | |
| </body> | |
| </html> |