webui: show current status in the frontend

This commit is contained in:
mappu 2023-04-08 16:50:49 +12:00
parent 5bbd203d31
commit 575f7ac4bc

View File

@ -43,6 +43,8 @@ button {
<textarea id="main" autofocus></textarea>
<button id="generate"> Generate</button>
<button id="interrupt" disabled> Interrupt</button>
<span id="state"></span>
<script type="text/javascript">
function main() {
const conversationID = "` + uuid.New().String() + `";
@ -52,6 +54,7 @@ function main() {
const $generate = document.getElementById("generate");
const $interrupt = document.getElementById("interrupt");
const $main = document.getElementById("main");
const $state = document.getElementById("state");
$generate.addEventListener('click', async function() {
const content = $main.value;
@ -67,6 +70,15 @@ function main() {
try {
const controller = new AbortController();
$interrupt.disabled = false;
const doInterrupt = () => {
controller.abort();
$interrupt.removeEventListener('click', doInterrupt);
};
$interrupt.addEventListener('click', doInterrupt);
state.textContent = "Waiting in queue..."
const response = await fetch("/api/v1/generate", {
method: "POST",
signal: controller.signal,
@ -80,12 +92,7 @@ function main() {
})
});
$interrupt.disabled = false;
const doInterrupt = () => {
controller.abort();
$interrupt.removeEventListener('click', doInterrupt);
};
$interrupt.addEventListener('click', doInterrupt);
state.textContent = "The AI is reading your text so far..."
const reader = response.body.getReader();
const decoder = new TextDecoder();
@ -96,6 +103,8 @@ function main() {
break;
}
state.textContent = "The AI is writing..."
$main.value += decoder.decode(singleReadResult.value);
$main.scrollTop = $main.scrollHeight;
@ -104,7 +113,11 @@ function main() {
}
state.textContent = ""
} catch (ex) {
state.textContent = "Error";
alert(
"Error processing the request: " +
(ex instanceof Error ? ex.message : JSON.stringify(ex))