From e279f01d429459c7a7bfe775528539f32f94f236 Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Fri, 20 Sep 2024 09:17:28 +0200 Subject: [PATCH 1/4] convo with new prompts --- app/ConversationFrontend.tsx | 15 ++++++++---- app/InputOutputHandler.tsx | 43 +++++++++++++++++----------------- app/ProcessAPI.js | 45 +++++++++++++++++++++--------------- 3 files changed, 59 insertions(+), 44 deletions(-) diff --git a/app/ConversationFrontend.tsx b/app/ConversationFrontend.tsx index 80cf49b..00948db 100644 --- a/app/ConversationFrontend.tsx +++ b/app/ConversationFrontend.tsx @@ -1,7 +1,12 @@ import React, { ForwardedRef, useEffect, useRef } from 'react'; +type Message = { + role: string + content: string +} + interface ConversationProps { - messages: string[]; + messages: Message[]; onResendClick: () => void; onEditClick: () => void; onCopyClick: () => void; @@ -22,14 +27,16 @@ const ConversationFrontend = React.forwardRef
{messages.map((message, index) => { - const isUserMessage = message.startsWith('User:'); - console.log(messages) + let isUserMessage + if (message.role == "user") { + isUserMessage = message + } return (
-

{message}

+

{message.content}

); })} diff --git a/app/InputOutputHandler.tsx b/app/InputOutputHandler.tsx index 2bbe5b0..6f428dc 100644 --- a/app/InputOutputHandler.tsx +++ b/app/InputOutputHandler.tsx @@ -27,30 +27,31 @@ const handleCopyClick = () => { const InputOutputBackend: React.FC = () => { const [accessToken, setAccessToken] = useState("") const workerRef = useRef(null) + type Message = { + role: string + content: string + } + type SystemPrompt = { + + } - 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] + " "; - }; + const handleSendClick = (message:string) => { + var system:Message = {role:"system" ,content:"You are a helpful assistant that gives short answers."} - HandlePostRequest(message, "phi3.5", system) - - addMessage('User: ' + message); + addMessage("user",message); + HandlePostRequest(messages, "phi3.5", system) }; const [messages, setMessages] = useState([ - 'User: Hello!', - 'AI: Hi there!', - 'User: How are you?', - 'AI: I’m good, thank you!' + { role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' } ]); - const addMessage = (message: string) => { - setMessages((prevMessages) => [...prevMessages, message]); + 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({}) @@ -65,20 +66,20 @@ const InputOutputBackend: React.FC = () => { } },[]) - const HandleGetRequest = (message: string, ai_model: string, system_prompt: string) => { + const HandleGetRequest = (messages: Message[], ai_model: string, system_prompt: Message) => { if (workerRef.current) { - workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt }) + workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt }) workerRef.current.onmessage = (e) => { - addMessage("AI: " + e.data) + addMessage("assistant",e.data) } } } - const HandlePostRequest = (message: string, ai_model: string, system_prompt: string) => { + const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => { if (workerRef.current) { - workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt }) + workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt }) workerRef.current.onmessage = (e) => { - HandleGetRequest(message,ai_model,system_prompt) + HandleGetRequest(messages,ai_model,system_prompt) } } } @@ -97,7 +98,7 @@ const InputOutputBackend: React.FC = () => { onMicClick={handleMicClick} />
- ); + ) } export default InputOutputBackend diff --git a/app/ProcessAPI.js b/app/ProcessAPI.js index c161c62..0aaced7 100644 --- a/app/ProcessAPI.js +++ b/app/ProcessAPI.js @@ -1,32 +1,39 @@ import axios from 'axios' +import { type } from 'os'; 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 + 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 }; + console.log(messages) switch (functionName) { case "getAccess": - axios.get('https://127.0.0.1:5000/interstellar/api/ai_create') - .then(Response => { - postMessage(Response.data.access_token) - }).catch(error => { - console.error("Error with GET Token request:", error) - }) + 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": - axios.post('https://127.0.0.1:5000/interstellar/api/ai_send', data) - .then(Response => { - postMessage(Response.data) - }).catch(error => { - console.error("Error:", error) - }) + messages.unshift(system_prompt) + console.log("sending...") + console.log(messages) + axios.post('https://localhost:5000/interstellar/api/ai_send', data) + .then(Response => { + postMessage(Response.data) + }).catch(error => { + console.error("Error:", error) + }) break case "getResponse": - axios.get('https://127.0.0.1:5000/interstellar/api/ai_get?access_token=' + access_token) + axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token) .then(Response => { postMessage(Response.data.response) }).catch(error => { From d6e6cca0db247a84f82fef0972ea0186528bc87c Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Fri, 20 Sep 2024 09:22:14 +0200 Subject: [PATCH 2/4] console.log weg --- app/ProcessAPI.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/ProcessAPI.js b/app/ProcessAPI.js index 0aaced7..bfd94dd 100644 --- a/app/ProcessAPI.js +++ b/app/ProcessAPI.js @@ -10,7 +10,6 @@ onmessage = function (e) { messages: messages, access_token: access_token }; - console.log(messages) switch (functionName) { case "getAccess": console.log("getting access...") From f9d3a1f235ed1071d979fce396350d8d9b24244f Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Fri, 20 Sep 2024 09:58:13 +0200 Subject: [PATCH 3/4] ai works again? --- app/InputOutputHandler.tsx | 28 +++++++++------------------- app/ProcessAPI.js | 21 +++++++++++---------- 2 files changed, 20 insertions(+), 29 deletions(-) diff --git a/app/InputOutputHandler.tsx b/app/InputOutputHandler.tsx index 6f428dc..288aaa4 100644 --- a/app/InputOutputHandler.tsx +++ b/app/InputOutputHandler.tsx @@ -31,15 +31,14 @@ const InputOutputBackend: React.FC = () => { role: string content: string } - type SystemPrompt = { - - } const handleSendClick = (message:string) => { - var system:Message = {role:"system" ,content:"You are a helpful assistant that gives short answers."} + var system:Message = {role:"system" ,content:"You are a helpful assistant."} - addMessage("user",message); - HandlePostRequest(messages, "phi3.5", system) + addMessage("user", message); + console.log("added User Message") + + HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system); }; const [messages, setMessages] = useState([ @@ -65,21 +64,12 @@ const InputOutputBackend: React.FC = () => { } } },[]) - - const HandleGetRequest = (messages: Message[], ai_model: string, system_prompt: Message) => { - if (workerRef.current) { - workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt }) - workerRef.current.onmessage = (e) => { - addMessage("assistant",e.data) - } - } - } - - const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => { - if (workerRef.current) { + + 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) => { - HandleGetRequest(messages,ai_model,system_prompt) + addMessage("assistant",e.data) } } } diff --git a/app/ProcessAPI.js b/app/ProcessAPI.js index bfd94dd..a1f3a6d 100644 --- a/app/ProcessAPI.js +++ b/app/ProcessAPI.js @@ -4,12 +4,21 @@ 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 = () => { + axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token) + .then(Response => { + postMessage(Response.data.response) + }).catch(error => { + console.error("Error with GET response request:", error) + }) + } + switch (functionName) { case "getAccess": console.log("getting access...") @@ -26,19 +35,11 @@ onmessage = function (e) { console.log(messages) axios.post('https://localhost:5000/interstellar/api/ai_send', data) .then(Response => { - postMessage(Response.data) + getResponse() }).catch(error => { console.error("Error:", error) }) break - case "getResponse": - axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token) - .then(Response => { - postMessage(Response.data.response) - }).catch(error => { - console.error("Error with GET response request:", error) - }) - break } From f7cab6aec0333c097820ab2b8ab349b12a963bea Mon Sep 17 00:00:00 2001 From: YasinOnm08 Date: Fri, 20 Sep 2024 10:54:21 +0200 Subject: [PATCH 4/4] repush --- app/ProcessAPI.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/ProcessAPI.js b/app/ProcessAPI.js index a1f3a6d..d02861b 100644 --- a/app/ProcessAPI.js +++ b/app/ProcessAPI.js @@ -11,9 +11,14 @@ onmessage = function (e) { }; 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) })