webui: show current status in the frontend
This commit is contained in:
parent
5bbd203d31
commit
575f7ac4bc
25
webui.go
25
webui.go
@ -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))
|
||||
|
Loading…
Reference in New Issue
Block a user