forked from React-Group/interstellar_ai
got rid of console.logs
This commit is contained in:
parent
8ee87b88e9
commit
171e8fd458
8 changed files with 14 additions and 44 deletions
|
@ -3,11 +3,7 @@ import React, { use, useEffect, useRef, useState } from "react";
|
||||||
import ConversationFrontend from "../components/ConversationFrontend";
|
import ConversationFrontend from "../components/ConversationFrontend";
|
||||||
import InputFrontend from "../components/InputFrontend";
|
import InputFrontend from "../components/InputFrontend";
|
||||||
import { sendToVoiceRecognition } from "./voice_backend"
|
import { sendToVoiceRecognition } from "./voice_backend"
|
||||||
import { AudioRecorder } from "./AudioRecorder";
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { resolve } from "path";
|
|
||||||
import { FFmpeg } from "@ffmpeg/ffmpeg";
|
|
||||||
import { fetchFile, toBlobURL } from "@ffmpeg/util"
|
|
||||||
|
|
||||||
const InputOutputBackend: React.FC = () => {
|
const InputOutputBackend: React.FC = () => {
|
||||||
// # variables
|
// # variables
|
||||||
|
@ -65,10 +61,6 @@ const InputOutputBackend: React.FC = () => {
|
||||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null)
|
const mediaRecorderRef = useRef<MediaRecorder | null>(null)
|
||||||
const audioChunks = useRef<Blob[]>([])
|
const audioChunks = useRef<Blob[]>([])
|
||||||
|
|
||||||
|
|
||||||
console.log(messages);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getNewToken()
|
getNewToken()
|
||||||
|
|
||||||
|
@ -101,11 +93,9 @@ const InputOutputBackend: React.FC = () => {
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const getNewToken = () => {
|
const getNewToken = () => {
|
||||||
console.log("getting access");
|
|
||||||
axios.get("http://localhost:5000/interstellar_ai/api/ai_create")
|
axios.get("http://localhost:5000/interstellar_ai/api/ai_create")
|
||||||
.then(response => {
|
.then(response => {
|
||||||
setAccessToken(response.data.access_token)
|
setAccessToken(response.data.access_token)
|
||||||
console.log(response.data.access_token);
|
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log("error:", error.message);
|
console.log("error:", error.message);
|
||||||
|
@ -142,7 +132,6 @@ const InputOutputBackend: React.FC = () => {
|
||||||
getWorkerRef.current.postMessage({ action: "terminate" })
|
getWorkerRef.current.postMessage({ action: "terminate" })
|
||||||
getWorkerRef.current.terminate()
|
getWorkerRef.current.terminate()
|
||||||
getWorkerRef.current = null
|
getWorkerRef.current = null
|
||||||
console.log(messages);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -172,7 +161,6 @@ const InputOutputBackend: React.FC = () => {
|
||||||
setInputDisabled(true)
|
setInputDisabled(true)
|
||||||
if (postWorkerRef.current) {
|
if (postWorkerRef.current) {
|
||||||
addMessage("user", inputValue)
|
addMessage("user", inputValue)
|
||||||
console.log("input:", inputValue);
|
|
||||||
const type = localStorage.getItem('type')
|
const type = localStorage.getItem('type')
|
||||||
var api_key: string = ""
|
var api_key: string = ""
|
||||||
if (type != null && type != 'local') {
|
if (type != null && type != 'local') {
|
||||||
|
@ -206,7 +194,6 @@ const InputOutputBackend: React.FC = () => {
|
||||||
audioChunks.current = [];
|
audioChunks.current = [];
|
||||||
|
|
||||||
const text_voice = await sendToVoiceRecognition(audioBlob);
|
const text_voice = await sendToVoiceRecognition(audioBlob);
|
||||||
console.log(text_voice);
|
|
||||||
resolve(text_voice); // Resolve the promise with the recognized text
|
resolve(text_voice); // Resolve the promise with the recognized text
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -227,7 +214,6 @@ const InputOutputBackend: React.FC = () => {
|
||||||
if (!isRecording) {
|
if (!isRecording) {
|
||||||
const recognizedText = await startRecording();
|
const recognizedText = await startRecording();
|
||||||
setInputMessage(recognizedText); // Set the recognized text after recording
|
setInputMessage(recognizedText); // Set the recognized text after recording
|
||||||
console.log("Set!")
|
|
||||||
} else {
|
} else {
|
||||||
stopRecording();
|
stopRecording();
|
||||||
}
|
}
|
||||||
|
@ -244,8 +230,9 @@ const InputOutputBackend: React.FC = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleEditClick = () => {
|
const handleEditClick = () => {
|
||||||
setInputMessage(messages[messages.length - 2]['content'])
|
let newestMessage = messages[messages.length - 2].content
|
||||||
const updatedMessages = messages.slice(0, -2)
|
setInputMessage(newestMessage)
|
||||||
|
const updatedMessages = messages.slice(0, messages.length-2)
|
||||||
setMessages(updatedMessages)
|
setMessages(updatedMessages)
|
||||||
endGetWorker()
|
endGetWorker()
|
||||||
getNewToken()
|
getNewToken()
|
||||||
|
|
|
@ -24,11 +24,9 @@ export const sendToDatabase = async (data: any): Promise<boolean> => {
|
||||||
const status = response.data.status;
|
const status = response.data.status;
|
||||||
const success = response.data.response;
|
const success = response.data.response;
|
||||||
postMessage({ status, success });
|
postMessage({ status, success });
|
||||||
console.log(status);
|
|
||||||
return success;
|
return success;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
postMessage({ status: 500, success: false });
|
postMessage({ status: 500, success: false });
|
||||||
console.log("NO");
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,18 +11,14 @@ onmessage = (event) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('starting get loop');
|
|
||||||
|
|
||||||
const fetchData = () => {
|
const fetchData = () => {
|
||||||
console.log(accesstoken);
|
|
||||||
|
|
||||||
|
|
||||||
const apiURL = "http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken
|
const apiURL = "http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken
|
||||||
|
|
||||||
axios.get(apiURL)
|
axios.get(apiURL)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
const data = response.data
|
const data = response.data
|
||||||
console.log(data);
|
|
||||||
postMessage(data)
|
postMessage(data)
|
||||||
setTimeout(fetchData, 100)
|
setTimeout(fetchData, 100)
|
||||||
})
|
})
|
||||||
|
|
|
@ -12,15 +12,10 @@ onmessage = (e) => {
|
||||||
api_key: api_key
|
api_key: api_key
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(Message);
|
|
||||||
|
|
||||||
|
|
||||||
axios.post("http://localhost:5000/interstellar_ai/api/ai_send", Message)
|
axios.post("http://localhost:5000/interstellar_ai/api/ai_send", Message)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
const status = response.data.status
|
const status = response.data.status
|
||||||
console.log(status);
|
|
||||||
postMessage({ status })
|
postMessage({ status })
|
||||||
console.log('message posted');
|
|
||||||
|
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
|
export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
|
||||||
console.log("sending recording...");
|
|
||||||
|
|
||||||
const formdata = new FormData()
|
const formdata = new FormData()
|
||||||
formdata.append("audio", audio_data)
|
formdata.append("audio", audio_data)
|
||||||
|
|
||||||
return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
|
return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log(response.data)
|
|
||||||
return response.data.response
|
return response.data.response
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
|
|
@ -10,17 +10,12 @@ interface ConversationProps {
|
||||||
onResendClick: () => void;
|
onResendClick: () => void;
|
||||||
onEditClick: () => void;
|
onEditClick: () => void;
|
||||||
onCopyClick: () => void;
|
onCopyClick: () => void;
|
||||||
isClicked:boolean
|
isClicked: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
|
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
|
||||||
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
|
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
|
||||||
const endOfMessagesRef = useRef<HTMLDivElement>(null);
|
const endOfMessagesRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(isClicked);
|
|
||||||
|
|
||||||
},[isClicked])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="output">
|
<div className="output">
|
||||||
|
|
|
@ -6,11 +6,11 @@ interface InputProps {
|
||||||
onSendClick: (message: string, override: boolean) => void;
|
onSendClick: (message: string, override: boolean) => void;
|
||||||
onMicClick: () => void;
|
onMicClick: () => void;
|
||||||
inputDisabled: boolean;
|
inputDisabled: boolean;
|
||||||
isRecording: boolean
|
isRecording: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
|
const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
|
||||||
({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef<HTMLDivElement>) => {
|
({ message, onSendClick, onMicClick, inputDisabled, isRecording}, ref: ForwardedRef<HTMLDivElement>) => {
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -31,6 +31,13 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSendClick = () => {
|
||||||
|
if (inputValue.trim() !== "") {
|
||||||
|
onSendClick(inputValue, false); // Send message to parent component
|
||||||
|
setInputValue(''); // Clear input after sending
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="input" id="inputForm" ref={ref}>
|
<div className="input" id="inputForm" ref={ref}>
|
||||||
<input
|
<input
|
||||||
|
@ -41,7 +48,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
/>
|
/>
|
||||||
<button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
|
<button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
|
||||||
<img src="/img/send.svg" alt="send" />
|
<img src="/img/send.svg" alt="send" />
|
||||||
</button>
|
</button>
|
||||||
<button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
|
<button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
|
||||||
|
|
|
@ -162,8 +162,6 @@ const Models: React.FC = () => {
|
||||||
setRadioSelection(localStorage.getItem('radioSelection'))
|
setRadioSelection(localStorage.getItem('radioSelection'))
|
||||||
const handleStorageChange = () => {
|
const handleStorageChange = () => {
|
||||||
setSelectedModel(localStorage.getItem('selectedModel') || '');
|
setSelectedModel(localStorage.getItem('selectedModel') || '');
|
||||||
console.log("Changed the selectedModel")
|
|
||||||
console.log(selectedModel)
|
|
||||||
};
|
};
|
||||||
handleStorageChange();
|
handleStorageChange();
|
||||||
|
|
||||||
|
@ -239,10 +237,6 @@ const Models: React.FC = () => {
|
||||||
|
|
||||||
const modelClicked = (model: string) => {
|
const modelClicked = (model: string) => {
|
||||||
const category = selectedModel as keyof typeof modelList;
|
const category = selectedModel as keyof typeof modelList;
|
||||||
console.log(model)
|
|
||||||
console.log(category)
|
|
||||||
console.log(modelList[category][model as keyof typeof modelList[typeof category]]);
|
|
||||||
console.log(modelList[category]['model_type' as keyof typeof modelList[typeof category]])
|
|
||||||
localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
|
localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
|
||||||
localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
|
localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue