forked from React-Group/interstellar_ai
voice recognition progress 1
This commit is contained in:
parent
9663f49dee
commit
e1f77c5b17
2 changed files with 49 additions and 9 deletions
|
@ -1,11 +1,13 @@
|
|||
"use client"
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React, { use, 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 { resolve } from "path";
|
||||
import { FFmpeg } from "@ffmpeg/ffmpeg";
|
||||
import { fetchFile, toBlobURL } from "@ffmpeg/util"
|
||||
|
||||
|
||||
const InputOutputBackend: React.FC = () => {
|
||||
|
@ -125,6 +127,17 @@ const InputOutputBackend: React.FC = () => {
|
|||
});
|
||||
};
|
||||
|
||||
/* Variables for System-prompt */
|
||||
const [preferredCurrency, setPreferredCurrency] = useState(localStorage.getItem("preferredCurrency") || "")
|
||||
const [preferredLanguage, setPreferredLanguage] = useState(localStorage.getItem("preferredLanguage") || "")
|
||||
const [timeFormat, setTimeFormat] = useState(localStorage.getItem("timeFormat") || "")
|
||||
const [preferredMeasurement, setPreferredMeasurement] = useState(localStorage.getItem("preferredMeasurement") || "")
|
||||
const [timeZone, setTimeZone] = useState(localStorage.getItem("timeZone") || "")
|
||||
const [dateFormat, setDateFormat] = useState(localStorage.getItem("dateFormat") || "")
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
},[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
|
||||
|
||||
const addMessage = (role: string, content: string) => {
|
||||
setMessages(previous => [...previous, { role, content }])
|
||||
|
@ -152,19 +165,46 @@ const InputOutputBackend: React.FC = () => {
|
|||
audioChunks.current.push(event.data)
|
||||
}
|
||||
|
||||
mediaRecorder.onstop = () => {
|
||||
mediaRecorder.onstop = async () => {
|
||||
const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" })
|
||||
console.log(audioBlob);
|
||||
const url = URL.createObjectURL(audioBlob)
|
||||
const audio = new Audio(url);
|
||||
audio.play().catch(error => console.error("Error playing audio:", error));
|
||||
console.log(url);
|
||||
setAudioURL(url)
|
||||
audioChunks.current = []
|
||||
const wavBlob = await convertOggToWav(audioBlob)
|
||||
const remote = new VoiceSend()
|
||||
remote.sendToVoiceRecognition(audioBlob,)
|
||||
remote.sendToVoiceRecognition(wavBlob)
|
||||
}
|
||||
|
||||
mediaRecorder.start()
|
||||
setIsRecording(true)
|
||||
}
|
||||
|
||||
const ffmpegRef = useRef<FFmpeg | null>(null)
|
||||
const audioRef = useRef("")
|
||||
|
||||
const loadFFmpeg = async () => {
|
||||
if (!ffmpegRef.current) {
|
||||
ffmpegRef.current = new FFmpeg()
|
||||
await ffmpegRef.current.load()
|
||||
}
|
||||
}
|
||||
|
||||
const convertOggToWav = async (oggFile: File | Blob) => {
|
||||
await loadFFmpeg()
|
||||
|
||||
const ffmpeg = ffmpegRef.current!
|
||||
|
||||
await ffmpeg.writeFile("input.ogg", await fetchFile(oggFile))
|
||||
await ffmpeg.exec(["-i", "input.ogg", "output.wav"])
|
||||
const wavData = await ffmpeg.readFile("output.wav")
|
||||
console.log(wavData);
|
||||
const wavBlob = new Blob([wavData], { type: "audio/wav" })
|
||||
audioRef.current = URL.createObjectURL(wavBlob)
|
||||
return wavBlob
|
||||
}
|
||||
|
||||
const stopRecording = () => {
|
||||
|
|
|
@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
|
|||
<title>{metadata.title}</title>
|
||||
<meta name="description" content={metadata.description} />
|
||||
{/* Tried adding the favicon here */}
|
||||
<link rel="icon" href="./public/favicon.ico" type="image/x-icon" />
|
||||
<link rel="icon" href="../public/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
<main>{children}</main>
|
||||
|
|
Loading…
Reference in a new issue