File size: 3,236 Bytes
3fe0889 6212809 3fe0889 6212809 3fe0889 6212809 3fe0889 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- polyfill for firefox + import maps -->
<script src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm"
}
}
</script>
</head>
<body>
<form class="w-[90%] mx-auto pt-8" onsubmit="launch(); return false;">
<h1 class="text-3xl font-bold">
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
>
Streaming text generation demo with
<a href="https://github.com/huggingface/huggingface.js">
<kbd>@huggingface/inference</kbd>
</a>
</span>
</h1>
<p class="mt-8">
First, input your token if you have one! Otherwise, you may encounter
rate limits. You can create a token for free at
<a
target="_blank"
href="https://huggingface.co/settings/tokens"
class="underline text-blue-500"
>hf.co/settings/tokens</a
>
</p>
<input
type="text"
id="token"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
placeholder="token (optional)"
/>
<p class="mt-8">
Pick the model you want to run. Check out over 10k models for text to
text generation
<a
href="https://huggingface.co/models?pipeline_tag=text2text-generation"
class="underline text-blue-500"
target="_blank"
>
here</a
>
</p>
<input
type="text"
id="model"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
value="google/flan-t5-xxl"
required
/>
<p class="mt-8">Finally the prompt</p>
<textarea
class="rounded border-blue-500 shadow-md px-3 py-2 w-96 mt-6 block"
rows="5"
id="prompt"
>
Q: How is butter made?
Describe the process from the beginning
</textarea
>
<button
id="submit"
class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
>
Run
</button>
<p class="text-gray-400 text-sm">Output logs</p>
<pre id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
Output will be here</pre
>
</form>
<script type="module">
import { HfInference } from "@huggingface/inference";
let running = false;
async function launch() {
if (running) {
return;
}
running = true;
try {
const hf = new HfInference(
document.getElementById("token").value.trim() || undefined
);
const model = document.getElementById("model").value.trim();
const prompt = document.getElementById("prompt").value.trim();
document.getElementById("logs").textContent = "";
for await (const output of hf.textGenerationStream({
model,
inputs: prompt,
use_cache: false,
})) {
document.getElementById("logs").textContent += output.token.text;
}
} catch (err) {
alert("Error: " + err.message);
} finally {
running = false;
}
}
window.launch = launch;
</script>
</body>
</html>
|