|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<title>Home</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
</head> |
|
<body class="container mx-auto p-3"> |
|
<script type="module"> |
|
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@2.6.3"; |
|
async function* textStreamRes(hf, controller, input) { |
|
let tokens = []; |
|
for await (const output of hf.textGenerationStream( |
|
{ |
|
model: "mistralai/Mistral-7B-Instruct-v0.1", |
|
inputs: input, |
|
parameters: { max_new_tokens: 1000 }, |
|
}, |
|
{ |
|
use_cache: false, |
|
fetch: (url, options) => |
|
fetch(url, { ...options, 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 = ""; |
|
const textStream = textStreamRes(hf, controller, input); |
|
for await (const tokens of textStream) { |
|
const lastToken = tokens[tokens.length - 1]; |
|
const span = document.createElement("span"); |
|
span.innerText = lastToken.token.text; |
|
gen.appendChild(span); |
|
} |
|
} |
|
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> |
|
<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"> |
|
<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> |
|
|
