From 9abbd403bd5d13b06ad4c68030edaa5eccde567e Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Sat, 8 Jun 2024 00:57:54 +0200
Subject: [PATCH] Enhance graphics

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/static/talk.js  | 16 ++++++++++++++--
 core/http/views/talk.html | 10 +++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/core/http/static/talk.js b/core/http/static/talk.js
index 1ab98ca76574..b11ca07a4a6a 100644
--- a/core/http/static/talk.js
+++ b/core/http/static/talk.js
@@ -48,6 +48,7 @@ function toggleRecording() {
 }
 
 async function startRecording() {
+    document.getElementById("recording").style.display = "block";
     if (!navigator.mediaDevices) {
         alert('MediaDevices API not supported!');
         return;
@@ -60,25 +61,36 @@ async function startRecording() {
     };
     mediaRecorder.start();
     recordButton.textContent = 'Stop Recording';
+    // add class bg-red-500 to recordButton
+    recordButton.classList.add("bg-gray-500");
+    
     isRecording = true;
 }
 
 function stopRecording() {
     mediaRecorder.stop();
     mediaRecorder.onstop = async () => {
+        document.getElementById("recording").style.display = "none";
         document.getElementById("loader").style.display = "block";
         const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+        document.getElementById("statustext").textContent = "Processing audio...";
         const transcript = await sendAudioToWhisper(audioBlob);
-        console.log("Transcript:", transcript)
+        console.log("Transcript:", transcript);
+        document.getElementById("statustext").textContent = "Seems you said: " + transcript+ ". Generating response...";
         const responseText = await sendTextToChatGPT(transcript);
-        console.log("Response:", responseText)
+
+        console.log("Response:", responseText);
+        document.getElementById("statustext").textContent = "Response generated: '" + responseText + "'. Generating audio response...";
 
         const ttsAudio = await getTextToSpeechAudio(responseText);
         playAudioResponse(ttsAudio);
 
         recordButton.textContent = 'Record';
+        // remove class bg-red-500 from recordButton
+        recordButton.classList.remove("bg-gray-500");
         isRecording = false;
         document.getElementById("loader").style.display = "none";
+        document.getElementById("statustext").textContent = "Press the record button to start recording.";
     };
 }
 
diff --git a/core/http/views/talk.html b/core/http/views/talk.html
index dbf9d5e4b4fa..05cc2b39ae38 100644
--- a/core/http/views/talk.html
+++ b/core/http/views/talk.html
@@ -44,8 +44,12 @@
     <div class="flex items-center justify-center">
     <div class="w-full p-4  max-w-md border-t border-gray-700 ">
       <div class="bg-gray-700 shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      <div id="recording" class="" style="display: none;">
+        <i class="fa-solid fa-microphone animate-pulse text-red-700"></i>
+        <span class="text-white-700 text-sm font-bold mb-2">Recording... press "Stop recording" to stop</span>
+      </div>
       <div id="loader" class="my-2 loader" style="display: none;"></div>
- 
+      <div id="statustext" class="my-2 p-2 block text-white-700 text-sm font-bold mb-2" ></div>
       <div class="mb-4" >
         <label for="modelSelect" class="block text-white-700 text-sm font-bold mb-2">LLM Model:</label>
         <select id="modelSelect"
@@ -88,8 +92,8 @@
 
 
       <button id="recordButton"
-        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-      ><i class="fa-solid fa-circle-up text-gray-300 absolute right-2 top-3 text-lg p-2"></i>Record</button>
+        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      ><i class="fa-solid fa-microphone pr-2"></i>Record</button>
       <a id="resetButton"
       class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
       href="#"