From 024ceeda4e0b3dadd7b62115ee9174f0db16b6ab Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Thu, 19 Sep 2024 13:02:56 +0200
Subject: [PATCH 1/2] started multithreading
---
app/AI.tsx | 2 ++
app/InputOutputHandler.tsx | 49 ++++++++++++++++++++++++++++++++++++++
app/ProcessAPI.js | 39 ++++++++++++++++++++++++++++++
app/ProcessAPI.tsx | 2 --
app/ProcessMemory.tsx | 13 ++++++++++
5 files changed, 103 insertions(+), 2 deletions(-)
create mode 100644 app/InputOutputHandler.tsx
create mode 100644 app/ProcessAPI.js
delete mode 100644 app/ProcessAPI.tsx
create mode 100644 app/ProcessMemory.tsx
diff --git a/app/AI.tsx b/app/AI.tsx
index 597b629..5e48841 100644
--- a/app/AI.tsx
+++ b/app/AI.tsx
@@ -1,10 +1,12 @@
// AI.tsx
import React from 'react';
import InputBackend from './InputBackend';
+import InputOutputBackend from './InputOutputHandler';
const AI: React.FC = () => {
return (
<div className="ai-container">
+ <InputOutputBackend/>
<InputBackend />
</div>
);
diff --git a/app/InputOutputHandler.tsx b/app/InputOutputHandler.tsx
new file mode 100644
index 0000000..21c7678
--- /dev/null
+++ b/app/InputOutputHandler.tsx
@@ -0,0 +1,49 @@
+"use client"
+import React, { useEffect, useState } from "react";
+import axios from 'axios';
+
+type lol = {
+ message: string[]
+}
+const InputOutputBackend: React.FC = () => {
+ const [getMessage, setGetMessage] = useState("")
+ const [accessToken, setAccessToken] = useState("")
+ const [postMessage, setPostMessage] = useState("")
+ const [input, setInput] = useState("")
+
+ 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)
+ }
+
+ return () => {
+ worker.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 HandlePostRequest = () => {
+ axios.post('/interstellar/api/ai_send', {})
+ }
+
+ return <div>Hello {accessToken}</div>
+}
+
+export default InputOutputBackend
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app/ProcessAPI.js b/app/ProcessAPI.js
new file mode 100644
index 0000000..156a2ef
--- /dev/null
+++ b/app/ProcessAPI.js
@@ -0,0 +1,39 @@
+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
+ switch (functionName) {
+ case "getAccess":
+ axios.get('http://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)
+ .then(Response => {
+ postMessage(Response.data)
+ }).catch(error => {
+ console.error("Error:", error)
+ })
+ break
+ case "getResponse":
+ axios.get('http://localhost:5000/interstellar/api/ai_get')
+ .then(Response => {
+ postMessage(Response.data.response)
+ }).catch(error => {
+ console.error("Error with GET response request:", error)
+ })
+ break
+ }
+
+
+}
\ No newline at end of file
diff --git a/app/ProcessAPI.tsx b/app/ProcessAPI.tsx
deleted file mode 100644
index 214165f..0000000
--- a/app/ProcessAPI.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import React from "react";
-import axios from 'axios';
\ No newline at end of file
diff --git a/app/ProcessMemory.tsx b/app/ProcessMemory.tsx
new file mode 100644
index 0000000..c402e15
--- /dev/null
+++ b/app/ProcessMemory.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+type Chat = {
+ name:string
+ messages:string[]
+}
+
+type History = {
+ chats:Chat[]
+}
+
+
+
From 3f8841a6307699fcfd50f001e2ccd0e58abb1feb Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Thu, 19 Sep 2024 15:56:26 +0200
Subject: [PATCH 2/2] 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 (
<div>
<div className="ai-container">
- <InputBackend />
+ <InputOutputBackend />
</div>
</div>
);
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<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}
diff --git a/app/InputBackend.tsx b/app/InputBackend.tsx
index 44fb740..78be6bb 100644
--- a/app/InputBackend.tsx
+++ b/app/InputBackend.tsx
@@ -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);
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<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
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 => {