Added actual transcription text to GUI for debug purposes

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} />
 

app/globals.css

@@ -27,3 +27,9 @@ body {
 
   font-family: "Roboto", sans-serif;
 }
+
+.temp-transcription
+{
+  background: beige;
+  border-radius: 5px;
+}

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>