From 575f7ac4bc88b288091af6002baa8a2c3146d050 Mon Sep 17 00:00:00 2001
From: mappu <mappu04@gmail.com>
Date: Sat, 8 Apr 2023 16:50:49 +1200
Subject: [PATCH] webui: show current status in the frontend

---
 webui.go | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/webui.go b/webui.go
index 6c70c70..4b0611f 100644
--- a/webui.go
+++ b/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))