From 3f8841a6307699fcfd50f001e2ccd0e58abb1feb Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Thu, 19 Sep 2024 15:56:26 +0200 Subject: [PATCH] multithread implementation --- app/AI.tsx | 4 +- app/ConversationFrontend.tsx | 2 +- app/InputBackend.tsx | 1 - app/InputOutputHandler.tsx | 112 +++++++++++++++++++++++++++-------- app/ProcessAPI.js | 20 +++---- 5 files changed, 99 insertions(+), 40 deletions(-) diff --git a/app/AI.tsx b/app/AI.tsx index 50539de..b391683 100644 --- a/app/AI.tsx +++ b/app/AI.tsx @@ -1,12 +1,12 @@ // AI.tsx import React from 'react'; -import InputBackend from './InputBackend'; +import InputOutputBackend from './InputOutputHandler'; const AI: React.FC = () => { return (
- +
); diff --git a/app/ConversationFrontend.tsx b/app/ConversationFrontend.tsx index b6bd312..80cf49b 100644 --- a/app/ConversationFrontend.tsx +++ b/app/ConversationFrontend.tsx @@ -23,7 +23,7 @@ const ConversationFrontend = React.forwardRef
{messages.map((message, index) => { const isUserMessage = message.startsWith('User:'); - console.log("output: "+messages) + console.log(messages) return (
{ if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) { if (chatResponse.choices[0].message.content) { addMessage('AI: ' + chatResponse.choices[0].message.content); - console.log(messages) } } else { console.error('Error: Unexpected API response:', chatResponse); diff --git a/app/InputOutputHandler.tsx b/app/InputOutputHandler.tsx index 21c7678..2bbe5b0 100644 --- a/app/InputOutputHandler.tsx +++ b/app/InputOutputHandler.tsx @@ -1,43 +1,103 @@ "use client" -import React, { useEffect, useState } from "react"; -import axios from 'axios'; +import React, { useEffect, useRef, useState } from "react"; +import ConversationFrontend from "./ConversationFrontend"; +import InputFrontend from "./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 +}; -type lol = { - message: string[] -} const InputOutputBackend: React.FC = () => { - const [getMessage, setGetMessage] = useState("") const [accessToken, setAccessToken] = useState("") - const [postMessage, setPostMessage] = useState("") - const [input, setInput] = useState("") + const workerRef = useRef(null) + + const handleSendClick = (message: string) => { + var system = "You give really short answers (maximum of 30 sentences). The following is the chat history." + for (let index = 0; index < messages.length; index++) { + system += messages[index] + " "; + }; + + HandlePostRequest(message, "phi3.5", system) + + addMessage('User: ' + message); + }; + + const [messages, setMessages] = useState([ + 'User: Hello!', + 'AI: Hi there!', + 'User: How are you?', + 'AI: I’m good, thank you!' + ]); + + const addMessage = (message: string) => { + setMessages((prevMessages) => [...prevMessages, message]); + }; + useEffect(() => { - const worker = new Worker(new URL("./ProcessAPI.js", import.meta.url)) - worker.postMessage({}) - worker.onmessage = (e) => { - setAccessToken(e.data.access_token) - console.log(accessToken) + workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url)) + workerRef.current.postMessage({}) + workerRef.current.onmessage = (e) => { + setAccessToken(e.data) } - + return () => { - worker.terminate() + if (workerRef.current) { + workerRef.current.terminate() + } } - }) + },[]) - const HandleGetRequest = () => { - axios.get('/interstellar/api/ai_get') - .then(Response => { - setAccessToken(Response.data.response) - }).catch(error => { - console.error("Error with GET response request:", error) - }) + const HandleGetRequest = (message: string, ai_model: string, system_prompt: string) => { + if (workerRef.current) { + workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt }) + workerRef.current.onmessage = (e) => { + addMessage("AI: " + e.data) + } + } } - const HandlePostRequest = () => { - axios.post('/interstellar/api/ai_send', {}) + const HandlePostRequest = (message: string, ai_model: string, system_prompt: string) => { + if (workerRef.current) { + workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt }) + workerRef.current.onmessage = (e) => { + HandleGetRequest(message,ai_model,system_prompt) + } + } } - return
Hello {accessToken}
+ return ( +
+ + +
+ ); } export default InputOutputBackend diff --git a/app/ProcessAPI.js b/app/ProcessAPI.js index 156a2ef..f32e175 100644 --- a/app/ProcessAPI.js +++ b/app/ProcessAPI.js @@ -2,23 +2,23 @@ import axios from 'axios' onmessage = function (e) { const { functionName = "getAccess", access_token = "", message = "", ai_model = "phi3.5", system_prompt = "You are a helpful assistant" } = e.data + const data = { + "ai_model": ai_model, + "message": message, + "system_prompt": system_prompt, + "access_token": access_token + }; switch (functionName) { case "getAccess": - axios.get('http://localhost:5000/interstellar/api/ai_create') - .then(Response => { + 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": - const data = { - ai_model: ai_model, - message: message, - system_prompt: system_prompt, - access_token: access_token - }; - axios.post('http://localhost:5000/interstellar/api/ai_send', data) + axios.post('https://localhost:5000/interstellar/api/ai_send', data) .then(Response => { postMessage(Response.data) }).catch(error => { @@ -26,7 +26,7 @@ onmessage = function (e) { }) break case "getResponse": - axios.get('http://localhost:5000/interstellar/api/ai_get') + axios.get('https://localhost:5000/interstellar/api/ai_get?access_token='+access_token) .then(Response => { postMessage(Response.data.response) }).catch(error => {