forked from React-Group/interstellar_ai
multithread trial 2
This commit is contained in:
parent
1744148b1b
commit
7e69674978
4 changed files with 140 additions and 114 deletions
|
|
@ -2,77 +2,110 @@
|
|||
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<Worker | null>(null)
|
||||
type Message = {
|
||||
role: string
|
||||
content: string
|
||||
const [accessToken, setAccessToken] = useState("")
|
||||
const postWorkerRef = useRef<Worker| null>(null)
|
||||
const getWorkerRef = useRef<Worker | null>(null)
|
||||
const [messages, setMessages] = useState([{role:"system", content:"You are a helpful assistant"}])
|
||||
const [liveMessage, setLiveMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
axios.get("http://localhost:5000/interstellar/api/ai_create")
|
||||
.then(response => {
|
||||
setAccessToken(response.data.access_token)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("error:", error.message);
|
||||
|
||||
})
|
||||
|
||||
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSendClick = (message:string) => {
|
||||
var system:Message = {role:"system" ,content:"You are a helpful assistant."}
|
||||
|
||||
addMessage("user", message);
|
||||
console.log("added User Message")
|
||||
|
||||
HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
|
||||
};
|
||||
|
||||
const [messages, setMessages] = useState([
|
||||
{ role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' }
|
||||
]);
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
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 (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
import axios from 'axios'
|
||||
import { type } from 'os';
|
||||
|
||||
onmessage = function (e) {
|
||||
const { functionName = "getAccess", access_token = "", messages = [], ai_model = "phi3.5", system_prompt = {role:"system" ,content: "You are a helpful assistant that gives short answers"}} = e.data
|
||||
|
||||
let data = {
|
||||
ai_model: ai_model,
|
||||
messages: messages,
|
||||
access_token: access_token
|
||||
};
|
||||
|
||||
const getResponse = () => {
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
29
app/backend/threads/GetWorker.js
Normal file
29
app/backend/threads/GetWorker.js
Normal file
|
|
@ -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"})
|
||||
|
||||
})
|
||||
}
|
||||
15
app/backend/threads/PostWorker.js
Normal file
15
app/backend/threads/PostWorker.js
Normal file
|
|
@ -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})
|
||||
})
|
||||
}
|
||||
Loading…
Reference in a new issue