Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Text generation huggingface.js Mistral-7B-Instruct-v0.1</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="container mx-auto p-3 max-w-xl"> | |
| <script type="module"> | |
| import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@2.6.4"; | |
| async function* textStreamRes(hf, controller, input) { | |
| let tokens = []; | |
| for await (const output of hf.textGenerationStream( | |
| { | |
| model: "mistralai/Mistral-7B-Instruct-v0.1", | |
| inputs: "<s>[INST]Write an essay about Sartre[/INST]", | |
| parameters: { max_new_tokens: 1000 }, | |
| }, | |
| { | |
| use_cache: false, | |
| signal: controller.signal, | |
| } | |
| )) { | |
| tokens.push(output); | |
| yield tokens; | |
| } | |
| } | |
| let controller; | |
| async function run() { | |
| controller = new AbortController(); | |
| const message = `<s>[INST]{:}[/INST]`; | |
| const textInput = document.querySelector("#input").value; | |
| const input = message.replace("{:}", textInput); | |
| const token = document.querySelector("#token").value; | |
| const hf = new HfInference(token); | |
| const gen = document.querySelector("#generation"); | |
| gen.innerHTML = ""; | |
| try { | |
| for await (const tokens of textStreamRes(hf, controller, input)) { | |
| const lastToken = tokens[tokens.length - 1]; | |
| const span = document.createElement("span"); | |
| span.innerText = lastToken.token.text; | |
| gen.appendChild(span); | |
| } | |
| } catch (e) { | |
| console.log("aborted"); | |
| } | |
| } | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const token = localStorage.getItem("token"); | |
| if (token) { | |
| document.querySelector("#token").value = token; | |
| } | |
| }); | |
| document.querySelector("#token").addEventListener("change", (e) => { | |
| localStorage.setItem("token", e.target.value); | |
| }); | |
| document.querySelector("#run").addEventListener("click", run); | |
| document.querySelector("#abort").addEventListener("click", () => { | |
| controller.abort(); | |
| }); | |
| </script> | |
| <div class="grid grid-cols-1 gap-2"> | |
| <header> | |
| <h1 class="text-3xl">Mistral-7B-Instruct-v0.1</h1> | |
| <h2 class="text-xl">huggingface.js</h2> | |
| </header> | |
| <input | |
| id="token" | |
| class="border-2 border-gray-500 rounded-md" | |
| placeholder="HF-TOKEN" | |
| type="password" | |
| /> | |
| <textarea | |
| id="input" | |
| class="border-2 border-gray-500 rounded-md" | |
| style="width: 100%; height: 100px" | |
| > | |
| Write an essay about Sartre</textarea | |
| > | |
| <div class="flex gap-2"> | |
| <button | |
| id="run" | |
| class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" | |
| > | |
| GENERATE | |
| </button> | |
| <button | |
| id="abort" | |
| class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" | |
| > | |
| ABORT | |
| </button> | |
| </div> | |
| </div> | |
| <div id="generation" class="py-3"></div> | |
| </body> | |
| </html> |