Created
May 2, 2025 12:13
-
-
Save ondrejsojka/529221b0fc39b7f7674890bb2b1ae019 to your computer and use it in GitHub Desktop.
Simple GUI for llama-server to interact with a base model
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- llama-server -m gemma-3-12b-pt-q4_0.gguf --chat-template "" --> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>llama.cpp simple tui</title> | |
| <style> | |
| body { | |
| font-family: monospace; | |
| margin: 1em; | |
| } | |
| #prompt { | |
| border: 1px solid #ccc; | |
| padding: 0.5em; | |
| min-height: 3em; | |
| outline: none; | |
| } | |
| #goon { | |
| margin-top: 0.5em; | |
| padding: 0.3em 0.6em; | |
| } | |
| .gen { | |
| background-color: #e6ffe6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div | |
| id="prompt" | |
| contenteditable="true" | |
| placeholder="type prompt…" | |
| ></div> | |
| <button id="goon">goon</button> | |
| <script> | |
| const host = "localhost:8080"; | |
| document.getElementById("goon").addEventListener("click", generate); | |
| async function generate() { | |
| const promptEl = document.getElementById("prompt"); | |
| // wrap new gen in a span so we can style it | |
| const genSpan = document.createElement("span"); | |
| genSpan.className = "gen"; | |
| promptEl.appendChild(genSpan); | |
| const payload = { | |
| prompt: promptEl.innerText, | |
| n_predict: 100, | |
| temperature: 0.7, | |
| dynatemp_range: 0.3, | |
| dynatemp_exponent: 1.0, | |
| chat_template: "", | |
| stream: true, | |
| }; | |
| try { | |
| const res = await fetch(`http://${host}/completion`, { | |
| method: "post", | |
| headers: { "content-type": "application/json" }, | |
| body: JSON.stringify(payload), | |
| }); | |
| if (!res.ok) throw await res.text(); | |
| const reader = res.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let buf = ""; | |
| while (true) { | |
| const { value, done } = await reader.read(); | |
| if (done) break; | |
| buf += decoder.decode(value, { stream: true }); | |
| const lines = buf.split("\n"); | |
| buf = lines.pop(); | |
| for (const line of lines) { | |
| if (line.startsWith("data: ")) { | |
| const data = JSON.parse(line.slice(6)); | |
| genSpan.textContent += data.content; | |
| } | |
| } | |
| } | |
| if (buf.startsWith("data: ")) { | |
| const data = JSON.parse(buf.slice(6)); | |
| genSpan.textContent += data.content; | |
| } | |
| } catch (e) { | |
| genSpan.textContent += "\nerror: " + e; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment