diff --git a/frontend/src/pages/Character.tsx b/frontend/src/pages/Character.tsx index ee6afab..216c6cd 100644 --- a/frontend/src/pages/Character.tsx +++ b/frontend/src/pages/Character.tsx @@ -1,7 +1,7 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { Icon } from '@iconify/react'; import CharacterBadge from '../components/CharacterBadge'; -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, useCallback } from 'react'; import { speechToText, characterChatMessage, getAudio } from '../logic/sdk'; export default function Character() { @@ -23,44 +23,38 @@ export default function Character() { chunks.push(e.data); } - mediaRecorder.current.onstop = (e) => { + mediaRecorder.current.onstop = async (e) => { setIsRecording(false); const blob = new Blob(chunks, { type: 'audio/wav' }); chunks = []; const audioFile = new File([blob], "audio.wav", { type: 'audio/wav' }); - speechToText(audioFile).then((text) => { - setMessages(prevMessages => [...prevMessages, { text: text, sender: 'me' }]); - characterChatMessage(sessionId, text).then((response) => { - const { msg, audio_id } = response - getAudio(audio_id).then((audioBlob) => { - const audioFile = new File([audioBlob], "audio.wav", { type: 'audio/wav' }); - const audioUrl = URL.createObjectURL(audioFile); - const audio = new Audio(audioUrl); - audio.play(); - }); - setMessages(prevMessages => [...prevMessages, { text: msg, sender: 'other' }]); - }) - }); + const text = await speechToText(audioFile); + const response = await characterChatMessage(sessionId, text); + const { msg, audio_id } = response; + const audioBlob = await getAudio(audio_id); + const audioFileResponse = new File([audioBlob], "audio.wav", { type: 'audio/wav' }); + const audioUrl = URL.createObjectURL(audioFileResponse); + const audio = new Audio(audioUrl); + audio.play(); + setMessages(prevMessages => [...prevMessages, { text: text, sender: 'me' }, { text: msg, sender: 'other' }]); } }); }, []); - function handleRecord() { + const handleRecord = useCallback(() => { if (!isRecording) { if (mediaRecorder.current) { mediaRecorder.current.start(); } setIsRecording(true); - console.log("Recording..."); } else { if (mediaRecorder.current) { mediaRecorder.current.stop(); } - console.log("Stopped recording."); } - } + }, [isRecording]); return (