Arsala Grey
updated chat rendering + users can now choose response length
11f5144
raw
history blame
2.97 kB
const { createApp, ref, onMounted } = Vue;
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";
const textGenerationModels = [
"mistralai/Mistral-7B-v0.1"
]
const responseLengthToTokenCount = {
"short": 100,
"medium": 250,
"long": 500,
}
const app = createApp({
setup() {
const token = ref(localStorage.getItem("token") || "");
const userPrompt = ref("Write about the difference between Star Wars and Star Trek");
const currentGeneratedText = ref("");
const models = ref([]);
const selectedModel = ref("");
const isRunning = ref(false);
const responseLength = ref("medium");
let controller;
const createTextGenerationStream = (hfInstance, prompt, abortControllerSignal) => {
return hfInstance.textGenerationStream(
{
model: selectedModel.value,
inputs: prompt,
parameters: { max_new_tokens: responseLengthToTokenCount[responseLength.value] },
},
{
use_cache: false,
signal: abortControllerSignal,
}
);
};
const generateTextStream = async function* (hfInstance, abortSignal, prompt) {
let generatedText = ""
for await (const output of createTextGenerationStream(hfInstance, prompt, abortSignal)) {
generatedText += output.token.text;
yield generatedText;
}
};
const run = async () => {
isRunning.value = true;
currentGeneratedText.value = "";
controller = new AbortController();
localStorage.setItem("token", token.value);
const hfInstance = new HfInference(token.value);
try {
for await (const textStream of generateTextStream(
hfInstance,
controller.signal,
userPrompt.value
)) {
currentGeneratedText.value = textStream;
}
} catch (e) {
console.log(e);
}
};
const stop = () => {
if (controller) {
controller.abort();
}
isRunning.value = false;
};
onMounted(async () => {
const localStorageToken = localStorage.getItem("token")
if (localStorageToken) {
token.value = localStorageToken;
}
models.value = textGenerationModels
selectedModel.value = textGenerationModels[0]
});
return {
token,
userPrompt,
currentGeneratedText,
run,
stop,
models,
selectedModel,
isRunning,
responseLength,
};
},
});
app.mount("#app");