multithread trial 2

app/backend/InputOutputHandler.tsx

@@ -2,77 +2,110 @@
 import React, { useEffect, useRef, useState } from "react";
 import ConversationFrontend from "../components/ConversationFrontend";
 import InputFrontend from "../components/InputFrontend";
-
+import { error, log } from "console";
-const handleMicClick = () => {
+import axios from "axios";
-  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
-};
 
 const InputOutputBackend: React.FC = () => {
-    const [accessToken, setAccessToken] = useState("")
+  const [accessToken, setAccessToken] = useState("")
-    const workerRef = useRef<Worker | null>(null)
+  const postWorkerRef = useRef<Worker| null>(null)
-    type Message = {
+  const getWorkerRef = useRef<Worker | null>(null)
-      role: string
+  const [messages, setMessages] = useState([{role:"system", content:"You are a helpful assistant"}])
-      content: string
+  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) => {
+    return () => {
-      var system:Message = {role:"system" ,content:"You are a helpful assistant."}
+      if (postWorkerRef.current) {
-
+        postWorkerRef.current.terminate()
-      addMessage("user", message);
+      }
-      console.log("added User Message")
+      if (getWorkerRef.current) {
-      
+        getWorkerRef.current.postMessage("terminate")
-      HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
+        getWorkerRef.current.terminate()
-    };
+      }
-
-    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)
-            }
-        }
     }
+  },[])
+
+  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>

app/backend/ProcessAPI.js

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

app/backend/threads/GetWorker.js

@@ -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"})
+        
+    })
+}

app/backend/threads/PostWorker.js

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