forked from React-Group/interstellar_ai
		
	main #37
					 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 InputFrontend from "../components/InputFrontend"; | ||||
| import { sendToVoiceRecognition } 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 = () => { | ||||
|   // # variables
 | ||||
|  | @ -67,10 +63,6 @@ const InputOutputBackend: React.FC = () => { | |||
|   const mediaRecorderRef = useRef<MediaRecorder | null>(null) | ||||
|   const audioChunks = useRef<Blob[]>([]) | ||||
| 
 | ||||
| 
 | ||||
|   console.log(messages); | ||||
| 
 | ||||
| 
 | ||||
|   useEffect(() => { | ||||
|     getNewToken() | ||||
| 
 | ||||
|  | @ -103,11 +95,9 @@ const InputOutputBackend: React.FC = () => { | |||
|   }, []) | ||||
| 
 | ||||
|   const getNewToken = () => { | ||||
|     console.log("getting access"); | ||||
|     axios.get("http://localhost:5000/interstellar_ai/api/ai_create") | ||||
|       .then(response => { | ||||
|         setAccessToken(response.data.access_token) | ||||
|         console.log(response.data.access_token); | ||||
|       }) | ||||
|       .catch(error => { | ||||
|         console.log("error:", error.message); | ||||
|  | @ -144,7 +134,6 @@ const InputOutputBackend: React.FC = () => { | |||
|       getWorkerRef.current.postMessage({ action: "terminate" }) | ||||
|       getWorkerRef.current.terminate() | ||||
|       getWorkerRef.current = null | ||||
|       console.log(messages); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|  | @ -174,7 +163,6 @@ const InputOutputBackend: React.FC = () => { | |||
|         setInputDisabled(true) | ||||
|         if (postWorkerRef.current) { | ||||
|           addMessage("user", inputValue) | ||||
|           console.log("input:", inputValue); | ||||
|           const type = localStorage.getItem('type') | ||||
|           var api_key: string = "" | ||||
|           if (type != null && type != 'local') { | ||||
|  | @ -209,7 +197,6 @@ const InputOutputBackend: React.FC = () => { | |||
|         audioChunks.current = []; | ||||
| 
 | ||||
|         const text_voice = await sendToVoiceRecognition(audioBlob); | ||||
|         console.log(text_voice); | ||||
|         resolve(text_voice); // Resolve the promise with the recognized text
 | ||||
|       }; | ||||
|     }); | ||||
|  | @ -230,7 +217,6 @@ const InputOutputBackend: React.FC = () => { | |||
|     if (!isRecording) { | ||||
|       const recognizedText = await startRecording(); | ||||
|       setInputMessage(recognizedText); // Set the recognized text after recording
 | ||||
|       console.log("Set!") | ||||
|     } else { | ||||
|       stopRecording(); | ||||
|     } | ||||
|  | @ -247,8 +233,9 @@ const InputOutputBackend: React.FC = () => { | |||
|   } | ||||
| 
 | ||||
|   const handleEditClick = () => { | ||||
|     setInputMessage(messages[messages.length - 2]['content']) | ||||
|     const updatedMessages = messages.slice(0, -2) | ||||
|     let newestMessage = messages[messages.length - 2].content | ||||
|     setInputMessage(newestMessage) | ||||
|     const updatedMessages = messages.slice(0, messages.length-2) | ||||
|     setMessages(updatedMessages) | ||||
|     endGetWorker() | ||||
|     getNewToken() | ||||
|  |  | |||
|  | @ -24,11 +24,9 @@ export const sendToDatabase = async (data: any): Promise<boolean> => { | |||
|     const status = response.data.status; | ||||
|     const success = response.data.response; | ||||
|     postMessage({ status, success }); | ||||
|     console.log(status); | ||||
|     return success; | ||||
|   } catch (error) { | ||||
|     postMessage({ status: 500, success: false }); | ||||
|     console.log("NO"); | ||||
|     return false; | ||||
|   } | ||||
| }; | ||||
|  |  | |||
|  | @ -11,18 +11,14 @@ onmessage = (event) => { | |||
|     } | ||||
| } | ||||
| 
 | ||||
| console.log('starting get loop'); | ||||
| 
 | ||||
| const fetchData = () => { | ||||
|     console.log(accesstoken); | ||||
| 
 | ||||
| 
 | ||||
|     const apiURL = "http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken | ||||
| 
 | ||||
|     axios.get(apiURL) | ||||
|         .then(response => { | ||||
|             const data = response.data | ||||
|             console.log(data); | ||||
|             postMessage(data) | ||||
|             setTimeout(fetchData, 100) | ||||
|         }) | ||||
|  |  | |||
|  | @ -12,15 +12,10 @@ onmessage = (e) => { | |||
|         api_key: api_key | ||||
|     } | ||||
| 
 | ||||
|     console.log(Message); | ||||
| 
 | ||||
| 
 | ||||
|     axios.post("http://localhost:5000/interstellar_ai/api/ai_send", Message) | ||||
|         .then(response => { | ||||
|             const status = response.data.status | ||||
|             console.log(status); | ||||
|             postMessage({ status }) | ||||
|             console.log('message posted'); | ||||
| 
 | ||||
|         }) | ||||
|         .catch(error => { | ||||
|  |  | |||
|  | @ -1,14 +1,12 @@ | |||
| import axios from "axios"; | ||||
| 
 | ||||
| export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => { | ||||
|     console.log("sending recording..."); | ||||
| 
 | ||||
|     const formdata = new FormData() | ||||
|     formdata.append("audio", audio_data) | ||||
| 
 | ||||
|     return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata) | ||||
|         .then((response) => { | ||||
|             console.log(response.data) | ||||
|             return response.data.response | ||||
|         }) | ||||
|         .catch(error => { | ||||
|  |  | |||
|  | @ -10,17 +10,12 @@ interface ConversationProps { | |||
|   onResendClick: () => void; | ||||
|   onEditClick: () => void; | ||||
|   onCopyClick: () => void; | ||||
|   isClicked:boolean | ||||
|   isClicked: boolean | ||||
| } | ||||
| 
 | ||||
| const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>( | ||||
|   ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => { | ||||
|     const endOfMessagesRef = useRef<HTMLDivElement>(null); | ||||
| 
 | ||||
|     useEffect(() => { | ||||
|       console.log(isClicked); | ||||
|        | ||||
|     },[isClicked]) | ||||
|    | ||||
|     return ( | ||||
|       <div className="output"> | ||||
|  |  | |||
|  | @ -6,11 +6,11 @@ interface InputProps { | |||
|   onSendClick: (message: string, override: boolean) => void; | ||||
|   onMicClick: () => void; | ||||
|   inputDisabled: boolean; | ||||
|   isRecording: boolean | ||||
|   isRecording: boolean; | ||||
| } | ||||
| 
 | ||||
| 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(''); | ||||
| 
 | ||||
|     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 ( | ||||
|       <div className="input" id="inputForm" ref={ref}> | ||||
|         <input | ||||
|  | @ -41,7 +48,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>( | |||
|           onChange={handleInputChange} | ||||
|           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" /> | ||||
|         </button> | ||||
|         <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')) | ||||
|     const handleStorageChange = () => { | ||||
|       setSelectedModel(localStorage.getItem('selectedModel') || ''); | ||||
|       console.log("Changed the selectedModel") | ||||
|       console.log(selectedModel) | ||||
|     }; | ||||
|     handleStorageChange(); | ||||
| 
 | ||||
|  | @ -239,10 +237,6 @@ const Models: React.FC = () => { | |||
| 
 | ||||
|   const modelClicked = (model: string) => { | ||||
|     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("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]]) | ||||
|   } | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue