selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 04:39:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added actual transcription text to GUI for debug purposes

Browse Source
This commit is contained in:
Koper
2023-07-19 20:43:09 +07:00
parent e6e08b8b6f
commit ca75871cd5
3 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/dashboard.js
View File

@@ -148,7 +148,7 @@ export function Dashboard(props) {
{generateDecibelGraph(generateDecibelData())} {generateDecibelGraph(generateDecibelData())}
</div> </div>
</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> </div>
<AudioVisualizer isRecording={props.isRecording} /> <AudioVisualizer isRecording={props.isRecording} />

6
app/globals.css
View File

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

3
app/page.js
View File

@@ -33,7 +33,7 @@ const App = () => {
const [stream, setStream] = useState(null); const [stream, setStream] = useState(null);
const serverData = useWebRTC(stream); const serverData = useWebRTC(stream);
console.log(serverData); const text = serverData?.text ?? "";
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100"> <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
@@ -47,6 +47,7 @@ const App = () => {
<Dashboard <Dashboard
isRecording={isRecording} isRecording={isRecording}
onRecord={(recording) => handleRecord(recording)} onRecord={(recording) => handleRecord(recording)}
transcriptionText={`[${serverData?.timestamp?.substring(2) ?? "??"}] ${text}`}
/> />
)} )}
</div> </div>