forked from React-Group/interstellar_ai
multithread implementation
This commit is contained in:
parent
fe2bfa60ce
commit
3f8841a630
5 changed files with 99 additions and 40 deletions
|
|
@ -1,12 +1,12 @@
|
|||
// AI.tsx
|
||||
import React from 'react';
|
||||
import InputBackend from './InputBackend';
|
||||
import InputOutputBackend from './InputOutputHandler';
|
||||
|
||||
const AI: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="ai-container">
|
||||
<InputBackend />
|
||||
<InputOutputBackend />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
|
|||
<div className="conversation resize" id="conversation" ref={ref}>
|
||||
{messages.map((message, index) => {
|
||||
const isUserMessage = message.startsWith('User:');
|
||||
console.log("output: "+messages)
|
||||
console.log(messages)
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ const InputBackend: React.FC = () => {
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -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<Worker | null>(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 <div>Hello {accessToken}</div>
|
||||
return (
|
||||
<div>
|
||||
<ConversationFrontend
|
||||
messages={messages}
|
||||
onResendClick={handleResendClick}
|
||||
onEditClick={handleEditClick}
|
||||
onCopyClick={handleCopyClick}
|
||||
/>
|
||||
<InputFrontend
|
||||
message=""
|
||||
onSendClick={handleSendClick}
|
||||
onMicClick={handleMicClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InputOutputBackend
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue