From ca75871cd5fc04a17cb114f52524eedb9734e4d3 Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Wed, 19 Jul 2023 20:43:09 +0700
Subject: [PATCH] Added actual transcription text to GUI for debug purposes

---
 app/components/dashboard.js | 2 +-
 app/globals.css             | 6 ++++++
 app/page.js                 | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/components/dashboard.js b/app/components/dashboard.js
index 952c7f47..154dd076 100644
--- a/app/components/dashboard.js
+++ b/app/components/dashboard.js
@@ -148,7 +148,7 @@ export function Dashboard(props) {
               {generateDecibelGraph(generateDecibelData())}
             </div>
           </div>
-          <div className="mt-2 p-2 bg-white">{liveTranscript}</div>
+          <div className="mt-2 p-2 bg-white temp-transcription">{props.transcriptionText}</div>
         </div>
         <AudioVisualizer isRecording={props.isRecording} />
 
diff --git a/app/globals.css b/app/globals.css
index 168f6514..2d8b5900 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -27,3 +27,9 @@ body {
 
   font-family: "Roboto", sans-serif;
 }
+
+.temp-transcription
+{
+  background: beige;
+  border-radius: 5px;
+}
diff --git a/app/page.js b/app/page.js
index 563a9942..a0d9cd65 100644
--- a/app/page.js
+++ b/app/page.js
@@ -33,7 +33,7 @@ const App = () => {
 
   const [stream, setStream] = useState(null);
   const serverData = useWebRTC(stream);
-  console.log(serverData);
+  const text = serverData?.text ?? "";
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
@@ -47,6 +47,7 @@ const App = () => {
         <Dashboard
           isRecording={isRecording}
           onRecord={(recording) => handleRecord(recording)}
+          transcriptionText={`[${serverData?.timestamp?.substring(2) ?? "??"}] ${text}`}
         />
       )}
     </div>