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>
   );

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
+
+
+
+
+
+ 

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
+    }
+    
+    
+}

app/ProcessAPI.tsx

@@ -1,2 +0,0 @@
-import React from "react";
-import axios from 'axios';

app/ProcessMemory.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+type Chat = {
+    name:string
+    messages:string[]
+}
+
+type History = {
+    chats:Chat[]
+}
+
+
+