diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index ed09bb4..b7bea84 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -2,78 +2,111 @@ import React, { useEffect, useRef, useState } from "react"; import ConversationFrontend from "../components/ConversationFrontend"; import InputFrontend from "../components/InputFrontend"; - -const handleMicClick = () => { - console.log('Mic clicked!'); - // Do something when the mic button is clicked -}; - - -const handleResendClick = () => { - console.log('Resend button clicked'); - // Handle resend action -}; - -const handleEditClick = () => { - console.log('Edit button clicked'); - // Handle edit action -}; - -const handleCopyClick = () => { - console.log('Copy button clicked'); - // Handle copy action -}; +import { error, log } from "console"; +import axios from "axios"; const InputOutputBackend: React.FC = () => { - const [accessToken, setAccessToken] = useState("") - const workerRef = useRef(null) - type Message = { - role: string - content: string - } + const [accessToken, setAccessToken] = useState("") + const postWorkerRef = useRef(null) + const getWorkerRef = useRef(null) + const [messages, setMessages] = useState([{role:"system", content:"You are a helpful assistant"}]) + const [liveMessage, setLiveMessage] = useState("") - const handleSendClick = (message:string) => { - var system:Message = {role:"system" ,content:"You are a helpful assistant."} - - addMessage("user", message); - console.log("added User Message") + useEffect(() => { + axios.get("http://localhost:5000/interstellar/api/ai_create") + .then(response => { + setAccessToken(response.data.access_token) + }) + .catch(error => { + console.log("error:", error.message); - HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system); - }; + }) - const [messages, setMessages] = useState([ - { role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' } - ]); + postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url)) - const addMessage = (role:string ,content: string) => { - setMessages((prevMessages) => [...prevMessages, {role,content}]); - }; - - - - useEffect(() => { - workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url)) - workerRef.current.postMessage({}) - workerRef.current.onmessage = (e) => { - setAccessToken(e.data) - } - - return () => { - if (workerRef.current) { - workerRef.current.terminate() - } - } - },[]) - - const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => { - if (workerRef.current) { - workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt }) - workerRef.current.onmessage = (e) => { - addMessage("assistant",e.data) - } + postWorkerRef.current.onmessage = (event) => { + const status = event.data.status + if (status == 200) { + endGetWorker() + } else if (status == 500) { + if (getWorkerRef.current) { + addMessage("assistant", "There was an Error with the AI response") + getWorkerRef.current.postMessage("terminate") + getWorkerRef.current.terminate() } + } } + return () => { + if (postWorkerRef.current) { + postWorkerRef.current.terminate() + } + if (getWorkerRef.current) { + getWorkerRef.current.postMessage("terminate") + getWorkerRef.current.terminate() + } + } + },[]) + + const startGetWorker = () => { + if (!getWorkerRef.current) { + getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url)) + + getWorkerRef.current.postMessage("start") + + getWorkerRef.current.onmessage = (event) => { + const data = event.data + + if (data.error) { + setLiveMessage("error getting AI response: "+ data.error) + } else { + console.log("Received data:", data); + setLiveMessage(data) + } + } + + getWorkerRef.current.onerror = (error) => { + console.error("Worker error:", error) + } + } + } + + const endGetWorker = () => { + if (getWorkerRef.current) { + addMessage("assistant", liveMessage) + getWorkerRef.current.postMessage("terminate") + getWorkerRef.current.terminate() + } + } + + const addMessage = (role: string, content: string) => { + setMessages(previous => [...previous,{role,content}]) + } + const handleSendClick = (inputValue: string) => { + if (postWorkerRef.current) { + addMessage("user", inputValue) + console.log("input:",inputValue); + postWorkerRef.current.postMessage({messages:messages, ai_model:"phi3.5", access_token:accessToken}) + startGetWorker() + } + } + + const handleMicClick = () => { + // do stuff + } + + const handleResendClick = () => { + // do stuff + } + + const handleEditClick = () => { + // do stuff + } + + const handleCopyClick = () => { + // do stuff + } + return (
{ - messageComplete:boolean = false - while(!messageComplete) - axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token) - .then(Response => { - postMessage(Response.data.response) - if (Response.data.status == 200) { - messageComplete = true - } - }).catch(error => { - console.error("Error with GET response request:", error) - }) - } - - switch (functionName) { - case "getAccess": - console.log("getting access...") - axios.get('https://localhost:5000/interstellar/api/ai_create') - .then(Response => { - postMessage(Response.data.access_token) - }).catch(error => { - console.error("Error with GET Token request:", error) - }) - break - case "postRequest": - messages.unshift(system_prompt) - console.log("sending...") - console.log(messages) - axios.post('https://localhost:5000/interstellar/api/ai_send', data) - .then(Response => { - getResponse() - }).catch(error => { - console.error("Error:", error) - }) - break - } - - -} \ No newline at end of file diff --git a/app/backend/threads/GetWorker.js b/app/backend/threads/GetWorker.js new file mode 100644 index 0000000..f8a4668 --- /dev/null +++ b/app/backend/threads/GetWorker.js @@ -0,0 +1,29 @@ +import axios from "axios"; + +let shouldRun = false +onmessage = (event) => { + if (event.data === "start") { + shouldRun = true + fetchData() + } else if (event.date === "terminate") { + shouldRun = false + } +} + +const fetchData = () => { + if (!shouldRun) return + + const apiURL = "http://localhost:5000/interstellar/api/ai_get" + + axios.get(apiURL) + .then(response => { + const data = response.data.response + postMessage(data) + setTimeout(fetchData,500) + }) + .catch(error => { + console.log('Error fetching data:', error); + postMessage({error:"failed fetching data"}) + + }) +} \ No newline at end of file diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.js new file mode 100644 index 0000000..56c2201 --- /dev/null +++ b/app/backend/threads/PostWorker.js @@ -0,0 +1,15 @@ +import axios from "axios"; + +onmessage = (e) => { + const { messages = [{ role: "system", content: "You are a helpful assistant" }], ai_model = "phi3.5", access_token } = e.data + + axios.post("http://localhost:5000/interstellar/api/ai_send") + .then(response => { + const status = response.data.status + postMessage({status}) + }) + .catch(error => { + console.log("Error calling API:", error) + postMessage({status:500}) + }) +} \ No newline at end of file