|
<!DOCTYPE html> |
|
<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/[email protected]"; |
|
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> |
