forked from React-Group/interstellar_ai
133 lines
No EOL
3.4 KiB
TypeScript
133 lines
No EOL
3.4 KiB
TypeScript
"use client"
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import ConversationFrontend from "../components/ConversationFrontend";
|
|
import InputFrontend from "../components/InputFrontend";
|
|
import { error, log } from "console";
|
|
import axios from "axios";
|
|
|
|
const InputOutputBackend: React.FC = () => {
|
|
const [accessToken, setAccessToken] = useState("")
|
|
const postWorkerRef = useRef<Worker| null>(null)
|
|
const getWorkerRef = useRef<Worker | null>(null)
|
|
const [messages, setMessages] = useState([{role:"system", content:"You are a helpful assistant"}])
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
if (postWorkerRef.current) {
|
|
postWorkerRef.current.terminate()
|
|
}
|
|
if (getWorkerRef.current) {
|
|
getWorkerRef.current.postMessage("terminate")
|
|
getWorkerRef.current.terminate()
|
|
}
|
|
}
|
|
},[])
|
|
|
|
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>
|
|
<ConversationFrontend
|
|
messages={messages}
|
|
onResendClick={handleResendClick}
|
|
onEditClick={handleEditClick}
|
|
onCopyClick={handleCopyClick}
|
|
/>
|
|
<InputFrontend
|
|
message=""
|
|
onSendClick={handleSendClick}
|
|
onMicClick={handleMicClick}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default InputOutputBackend
|
|
|
|
|
|
|
|
|
|
|
|
|