huggingfacejs/text-generation-Mistral-7B-Instruct
2
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <title>Text generation huggingface.js Mistral-7B-Instruct-v0.1</title>6 <script src="https://cdn.tailwindcss.com"></script>7 </head>8 <body class="container mx-auto p-3 max-w-xl">9 <script type="module">10 import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@2.6.4";11 async function* textStreamRes(hf, controller, input) {12 let tokens = [];13 for await (const output of hf.textGenerationStream(14 {15 model: "mistralai/Mistral-7B-Instruct-v0.1",16 inputs: "<s>[INST]Write an essay about Sartre[/INST]",17 parameters: { max_new_tokens: 1000 },18 },19 {20 use_cache: false,21 signal: controller.signal,22 }23 )) {24 tokens.push(output);25 yield tokens;26 }27 }28 29 let controller;30 async function run() {31 controller = new AbortController();32 const message = `<s>[INST]{:}[/INST]`;33 const textInput = document.querySelector("#input").value;34 const input = message.replace("{:}", textInput);35 const token = document.querySelector("#token").value;36 const hf = new HfInference(token);37 38 const gen = document.querySelector("#generation");39 gen.innerHTML = "";40 try {41 for await (const tokens of textStreamRes(hf, controller, input)) {42 const lastToken = tokens[tokens.length - 1];43 const span = document.createElement("span");44 span.innerText = lastToken.token.text;45 gen.appendChild(span);46 }47 } catch (e) {48 console.log("aborted");49 }50 }51 document.addEventListener("DOMContentLoaded", () => {52 const token = localStorage.getItem("token");53 if (token) {54 document.querySelector("#token").value = token;55 }56 });57 document.querySelector("#token").addEventListener("change", (e) => {58 localStorage.setItem("token", e.target.value);59 });60 document.querySelector("#run").addEventListener("click", run);61 document.querySelector("#abort").addEventListener("click", () => {62 controller.abort();63 });64 </script>65 <div class="grid grid-cols-1 gap-2">66 <header>67 <h1 class="text-3xl">Mistral-7B-Instruct-v0.1</h1>68 <h2 class="text-xl">huggingface.js</h2>69 </header>70 <input71 id="token"72 class="border-2 border-gray-500 rounded-md"73 placeholder="HF-TOKEN"74 type="password"75 />76 <textarea77 id="input"78 class="border-2 border-gray-500 rounded-md"79 style="width: 100%; height: 100px"80 >81 Write an essay about Sartre</textarea82 >83 <div class="flex gap-2">84 <button85 id="run"86 class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"87 >88 GENERATE89 </button>90 <button91 id="abort"92 class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"93 >94 ABORT95 </button>96 </div>97 </div>98 <div id="generation" class="py-3"></div>99 </body>100</html>