|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
<title>My static Space</title> |
|
|
<link rel="stylesheet" href="./style.css" /> |
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> |
|
|
<script type="module"> |
|
|
const { createApp, ref, onMounted } = Vue; |
|
|
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@2.6.4"; |
|
|
|
|
|
const app = createApp({ |
|
|
setup() { |
|
|
const title = ref("Mistral-7B-Instruct-v0.1"); |
|
|
const subtitle = ref("huggingface.js"); |
|
|
const token = ref(localStorage.getItem("token") || ""); |
|
|
const inputText = ref("Write an essay about Star Wars"); |
|
|
const generatedText = ref(""); |
|
|
let controller; |
|
|
|
|
|
const textStreamRes = async function* (hf, controller, input) { |
|
|
let tokens = []; |
|
|
for await (const output of hf.textGenerationStream( |
|
|
{ |
|
|
model: "mistralai/Mistral-7B-Instruct-v0.1", |
|
|
inputs: `[INST]${input}[/INST]`, |
|
|
parameters: { max_new_tokens: 450 }, |
|
|
}, |
|
|
{ |
|
|
use_cache: false, |
|
|
signal: controller.signal, |
|
|
} |
|
|
)) { |
|
|
tokens.push(output.token.text); |
|
|
generatedText.value += output.token.text; |
|
|
yield; |
|
|
} |
|
|
}; |
|
|
|
|
|
const run = async () => { |
|
|
controller = new AbortController(); |
|
|
localStorage.setItem("token", token.value); |
|
|
const hf = new HfInference(token.value); |
|
|
|
|
|
try { |
|
|
for await (const text of textStreamRes( |
|
|
hf, |
|
|
controller, |
|
|
inputText.value |
|
|
)) { |
|
|
console.log(text); |
|
|
} |
|
|
} catch (e) { |
|
|
console.log(e); |
|
|
} |
|
|
}; |
|
|
|
|
|
const abort = () => { |
|
|
if (controller) { |
|
|
controller.abort(); |
|
|
} |
|
|
}; |
|
|
|
|
|
onMounted(() => { |
|
|
if (localStorage.getItem("token")) { |
|
|
token.value = localStorage.getItem("token"); |
|
|
} |
|
|
}); |
|
|
|
|
|
return { |
|
|
title, |
|
|
subtitle, |
|
|
token, |
|
|
inputText, |
|
|
generatedText, |
|
|
run, |
|
|
abort, |
|
|
}; |
|
|
}, |
|
|
}).mount("#app"); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<div id="app"> |
|
|
<header> |
|
|
<h1>{{title}}</h1> |
|
|
<h2>{{subtitle}}</h2> |
|
|
</header> |
|
|
<input v-model="token" placeholder="HF-TOKEN" type="password" /> |
|
|
<textarea |
|
|
v-model="inputText" |
|
|
style="width: 100%; height: 100px" |
|
|
></textarea> |
|
|
<div> |
|
|
<button @click="run">GENERATE</button> |
|
|
<button @click="abort">ABORT</button> |
|
|
</div> |
|
|
<div>{{generatedText}}</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
