andrei-stoica
/
ai_sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

cleanup

This commit is contained in:
Andrei Stoica 2024-02-25 17:47:25 -05:00
parent b7787be635
commit 42c605d992
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
speech-speech/frontend/src/App.tsx
View File

@ -12,23 +12,22 @@ type ChatMsg = {
content: string; content: string;
}; };
let audioBlobs = []; let audioBlobs: Array<Blob> = [];
let streamBeingCaptured: MediaStream | null = null; let streamBeingCaptured: MediaStream | null = null;
let mediaRecorder: MediaRecorder | null = null; let mediaRecorder: MediaRecorder | null = null;
function get_mic() { function get_mic() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.log("getUserMedia supported."); console.log("getUserMedia supported.");
return navigator.mediaDevices.getUserMedia({ audio: true }); return navigator.mediaDevices.getUserMedia({ audio: true });
} else {
console.log("getUserMedia not supported on your browser!");
} }
throw "getUserMedia not supported on your browser!";
} }
function startRecord() { function startRecord() {
audioBlobs = []; audioBlobs = [];
get_mic().then((stream) => { get_mic().then((stream) => {
console.log("got mic");
streamBeingCaptured = stream; streamBeingCaptured = stream;
mediaRecorder = new MediaRecorder(stream); mediaRecorder = new MediaRecorder(stream);
console.log("Starting Recording"); console.log("Starting Recording");
@ -40,6 +39,12 @@ function startRecord() {
} }
function stopRecord() { function stopRecord() {
if (!mediaRecorder) {
throw "MediaRecorder not set";
}
if (!streamBeingCaptured) {
throw "Stream not set";
}
mediaRecorder.stop(); mediaRecorder.stop();
streamBeingCaptured.getTracks() streamBeingCaptured.getTracks()
.forEach((track) => track.stop()); .forEach((track) => track.stop());
@ -57,11 +62,13 @@ function playRecord() {
} }
function playMsg(msg: ChatMsg) { function playMsg(msg: ChatMsg) {
const audio = new Audio("http://100.82.51.22:8001/speak?" + new URLSearchParams({text: msg.content})); const audio = new Audio(
console.log("loading audio and playing?") "http://100.82.51.22:8001/speak?" +
new URLSearchParams({ text: msg.content }),
);
console.log("loading audio and playing?");
audio.play(); audio.play();
} }
function Header() { function Header() {
return ( return (
<header className="header p-3"> <header className="header p-3">
@ -72,11 +79,13 @@ function Header() {
); );
} }
function Feed(props: { chat: Array[ChatMsg]; setChatStateFn: any }) { function Feed(props: { chat: Array<ChatMsg>; setChatStateFn: any }) {
const bottomRef = useRef(null); const bottomRef = useRef<any>(null);
const scrollToBottom = () => { const scrollToBottom = () => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" }); if (bottomRef.current) {
bottomRef.current.scrollIntoView({ behavior: "smooth" });
}
}; };
useEffect(() => { useEffect(() => {
@ -111,7 +120,7 @@ function Msg(props: { msg: ChatMsg }) {
); );
} }
function Controls(props: { setChatStateFn: any; chat: Array[ChatMsg] }) { function Controls(props: { setChatStateFn: any, chat: Array<ChatMsg> }) {
const [recordState, setRecordState] = useState(false); const [recordState, setRecordState] = useState(false);
function toggleRecord() { function toggleRecord() {
@ -132,8 +141,7 @@ function Controls(props: { setChatStateFn: any; chat: Array[ChatMsg] }) {
"body": formData, "body": formData,
}).then((res) => res.json()) }).then((res) => res.json())
.then((res) => { .then((res) => {
console.log(res); props.setChatStateFn((curState: Array<ChatMsg>) => [
props.setChatStateFn((curState) => [
...curState, ...curState,
{ "role": "user", "content": res["user-transcript"] }, { "role": "user", "content": res["user-transcript"] },
]); ]);
@ -145,9 +153,11 @@ function Controls(props: { setChatStateFn: any; chat: Array[ChatMsg] }) {
}]), }]),
}).then((res) => res.json()) }).then((res) => res.json())
.then((res) => { .then((res) => {
props.setChatStateFn((curState) => [...curState, res]); props.setChatStateFn((
console.log("attempting to play result") curState: Array<ChatMsg>,
playMsg(res) ) => [...curState, res]);
console.log("attempting to play result");
playMsg(res);
}); });
}); });
} }