diff --git a/app/backend/AudioRecorder(not yet).tsx b/app/backend/AudioRecorder(not yet).tsx new file mode 100644 index 0000000..af6a941 --- /dev/null +++ b/app/backend/AudioRecorder(not yet).tsx @@ -0,0 +1,39 @@ +// import React, { useState, useRef } from 'react' + +// const AudioRecorder: React.FC = () => { +// const [isRecording, setIsRecording] = useState(false) +// const [audioURL, setAudioURL] = useState(null) +// const medaRecorderRef = useRef(null) +// const audioChunks = useRef([]) + +// const startRecording = async () => { +// const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) +// const mediaRecorder = new MediaRecorder(stream) +// medaRecorderRef.current = mediaRecorder + +// mediaRecorder.ondataavailable = (event) => { +// audioChunks.current.push(event.data) +// } + +// mediaRecorder.onstop = () => { +// const audioBlob = new Blob(audioChunks.current, { type: "audio/wav" }) +// const url = URL.createObjectURL(audioBlob) +// setAudioURL(url) +// audioChunks.current = [] +// } + +// mediaRecorder.start() +// setIsRecording(true) + +// const stopRecording = () => { +// medaRecorderRef.current?.stop() +// setIsRecording(false) +// } + +// return ( +//
+// ) +// } +// } + +// export default AudioRecorder \ No newline at end of file diff --git a/app/backend/AudioRecorder.ts b/app/backend/AudioRecorder.ts deleted file mode 100644 index 459674e..0000000 --- a/app/backend/AudioRecorder.ts +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState, useRef } from 'react' - - export const AudioRecorder= () => { - const [isRecording, setIsRecording] = useState(false) - const [audioURL, setAudioURL] = useState(null) - const mediaRecorderRef = useRef(null) - const audioChunks = useRef([]) - - const startRecording = async () => { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - const mediaRecorder = new MediaRecorder(stream) - mediaRecorderRef.current = mediaRecorder - - mediaRecorder.ondataavailable = (event) => { - audioChunks.current.push(event.data) - } - - mediaRecorder.onstop = () => { - const audioBlob = new Blob(audioChunks.current, { type: "audio/wav" }) - const url = URL.createObjectURL(audioBlob) - setAudioURL(url) - audioChunks.current = [] - } - - mediaRecorder.start() - setIsRecording(true) - - } - - const stopRecording = () => { - mediaRecorderRef.current?.stop() - setIsRecording(false) - } - } \ No newline at end of file diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 36b3fac..3b00707 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -3,8 +3,8 @@ import React, { useEffect, useRef, useState } from "react"; import ConversationFrontend from "../components/ConversationFrontend"; import InputFrontend from "../components/InputFrontend"; import VoiceSend from "./voice_backend" -import { AudioRecorder } from "./AudioRecorder"; import axios from "axios"; +import { skip } from "node:test"; const InputOutputBackend: React.FC = () => { @@ -20,10 +20,10 @@ const InputOutputBackend: React.FC = () => { const [liveMessage, setLiveMessage] = useState("") const [inputMessage, setInputMessage] = useState("") const [inputDisabled, setInputDisabled] = useState(false) - const [isRecording, setIsRecording] = useState(false) - const [audioURL, setAudioURL] = useState(null) - const mediaRecorderRef = useRef(null) - const audioChunks = useRef([]) + const [lastMessage, setLastMessage] = useState({ role: "user", content: "Not supposed to happen." }) + const [isRecording, setIsRecording] = useState(false); + const mediaRecorderRef = useRef(null); + const audioChunksRef = useRef([]); console.log(messages); @@ -129,6 +129,7 @@ const InputOutputBackend: React.FC = () => { } const handleSendClick = (inputValue: string, override: boolean) => { if (inputValue != "") { + console.log(inputDisabled) if (!inputDisabled || override) { setInputDisabled(true) if (postWorkerRef.current) { @@ -142,33 +143,37 @@ const InputOutputBackend: React.FC = () => { } const startRecording = async () => { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - const mediaRecorder = new MediaRecorder(stream) - mediaRecorderRef.current = mediaRecorder - - mediaRecorder.ondataavailable = (event) => { - audioChunks.current.push(event.data) - } - - mediaRecorder.onstop = () => { - const audioBlob = new Blob(audioChunks.current, { type: "audio/wav" }) - const url = URL.createObjectURL(audioBlob) - console.log(url); - setAudioURL(url) - audioChunks.current = [] - const remote = new VoiceSend() - remote.sendToVoiceRecognition(audioBlob,) - } + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + mediaRecorderRef.current = new MediaRecorder(stream); - mediaRecorder.start() - setIsRecording(true) - - } - - const stopRecording = () => { - mediaRecorderRef.current?.stop() - setIsRecording(false) + mediaRecorderRef.current.ondataavailable = (event) => { + audioChunksRef.current.push(event.data); + }; + + mediaRecorderRef.current.onstop = () => { + const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' }); + audioChunksRef.current = []; // Clear the chunks for the next recording + // Call your existing function to send the audioBlob + // Example: sendAudioToApi(audioBlob); + }; + + mediaRecorderRef.current.start(); + setIsRecording(true); + + // Automatically stop recording after 10 seconds + setTimeout(() => { + stopRecording(); + }, 10000); + }; + + const stopRecording = () => { + if (mediaRecorderRef.current) { + mediaRecorderRef.current.stop(); + setIsRecording(false); + var remote = new VoiceSend() + remote.sendToVoiceRecognition(new Blob(audioChunksRef.current, { type: 'audio/wav' }), remote.voiceDataTemplate); } + }; const handleMicClick = () => { @@ -219,7 +224,6 @@ const InputOutputBackend: React.FC = () => { onSendClick={handleSendClick} onMicClick={handleMicClick} inputDisabled={inputDisabled} - isRecording={isRecording} /> ) diff --git a/app/backend/voice_backend.ts b/app/backend/voice_backend.ts index a93fd89..650afeb 100644 --- a/app/backend/voice_backend.ts +++ b/app/backend/voice_backend.ts @@ -1,22 +1,20 @@ import axios from "axios"; - class VoiceSend { - sendToVoiceRecognition(audio_data: Blob) { - console.log("sending recording..."); - console.log(typeof (audio_data)); - console.log(audio_data instanceof Blob); - const formdata = new FormData() - formdata.append("audio", audio_data) - formdata.append("option", "offline") - formdata.append("type", "basic") + voiceDataTemplate = { + type: "basic", + audio_data: null, + option: "offline" + } - const dataSend = { option:"offline", type:"basic",audio:audio_data } - axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata) - .then((response) => { - console.log(response.data) - return response.data.response + sendToVoiceRecognition(audio_data: Blob, data: any) { + var dataSend = data + dataSend['audio_data'] = audio_data + axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", dataSend) + .then((response: any) => { + console.log(response['response']) + return response['response'] }) .catch(error => { console.log("Error calling API:", error) diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index c84124b..e50e916 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -1,16 +1,14 @@ import React, { useState, ForwardedRef, useEffect } from 'react'; -import "../styles/variables.css" interface InputProps { message: string; onSendClick: (message: string, override: boolean) => void; onMicClick: () => void; - inputDisabled: boolean; - isRecording:boolean + inputDisabled: boolean } const InputFrontend = React.forwardRef( - ({ message, onSendClick, onMicClick, inputDisabled, isRecording}, ref: ForwardedRef) => { + ({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef) => { const [inputValue, setInputValue] = useState(''); useEffect(() => { @@ -31,10 +29,6 @@ const InputFrontend = React.forwardRef( } }; - const styles = { - - } - return (
( -
diff --git a/app/styles/input.css b/app/styles/input.css index ffbffeb..ceeb0b3 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -59,19 +59,3 @@ background-color: var(--input-button-hover-color); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } - -.microphone-button.red{ - background-color: var(--close-button-color); -} - -.microphone-button.green{ - background-color: var(--button-background-color); -} - -.microphone-button.red:hover{ - background-color: var(--close-button-hover-color); -} - -.microphone-button.green:hover{ - background-color: var(--input-button-hover-color); -} \ No newline at end of file diff --git a/app/styles/variables.css b/app/styles/variables.css index 795b4fc..72c464a 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -19,7 +19,6 @@ --conversation-background-color: #79832e; /* Background color for conversation container */ --doc-background-color: #ffffff; /* Background color for documents */ --close-button-color: red; - --close-button-hover-color: #9e0101; /*NEW*/ --burger-menu-background-color: #79832e; /*NEW*/ --overlay-text-color:white; /*NEW*/ diff --git a/py/api.py b/py/api.py index 0951717..e152cdc 100644 --- a/py/api.py +++ b/py/api.py @@ -99,12 +99,10 @@ class API: @self.app.route('/interstellar_ai/api/voice_recognition', methods=['POST']) def voice_recognition(): - print(request.args) - recog_type = request.form.get('type') - print(recog_type) - audio = request.files.get('audio') - option = request.form.get('option') - if recog_type == "basic": + type = request.args.get('type') + audio = request.args.get('audio') + option = request.args.get('option') + if type == "basic": text = self.voice.basic_recognition(audio, option) return jsonify({'status': 200, 'response': text}) else: