forked from React-Group/interstellar_ai
Compare commits
No commits in common. "c20610485921c5bc4f109e81ed5ec1b7b00eb09b" and "9373fa8e593e8763fa15a116c837cc4b3922faff" have entirely different histories.
c206104859
...
9373fa8e59
6 changed files with 34 additions and 62 deletions
|
@ -15,7 +15,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
content: string
|
content: string
|
||||||
}
|
}
|
||||||
|
|
||||||
// Define state variables for user preferences and messages
|
// Define state variables for user preferences and messages
|
||||||
const [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
|
const [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
|
||||||
const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
|
const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
|
||||||
const [timeFormat, setTimeFormat] = useState<string>("24-hour");
|
const [timeFormat, setTimeFormat] = useState<string>("24-hour");
|
||||||
|
@ -24,8 +24,6 @@ const InputOutputBackend: React.FC = () => {
|
||||||
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
|
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
|
||||||
const [messages, setMessages] = useState<Message[]>([]);
|
const [messages, setMessages] = useState<Message[]>([]);
|
||||||
const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
|
const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
|
||||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create")
|
|
||||||
apiURL.hostname = window.location.hostname;
|
|
||||||
|
|
||||||
// Fetch local storage values and update state on component mount
|
// Fetch local storage values and update state on component mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -57,7 +55,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
{ role: "assistant", content: "Hello! How may I help you?" },
|
{ role: "assistant", content: "Hello! How may I help you?" },
|
||||||
]);
|
]);
|
||||||
}, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]);
|
}, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]);
|
||||||
|
|
||||||
|
|
||||||
const conversationRef = useRef<HTMLDivElement>(null)
|
const conversationRef = useRef<HTMLDivElement>(null)
|
||||||
const [copyClicked, setCopyClicked] = useState(false)
|
const [copyClicked, setCopyClicked] = useState(false)
|
||||||
|
@ -74,7 +72,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getNewToken()
|
getNewToken()
|
||||||
|
|
||||||
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.ts", import.meta.url))
|
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))
|
||||||
|
|
||||||
postWorkerRef.current.onmessage = (event) => {
|
postWorkerRef.current.onmessage = (event) => {
|
||||||
const status = event.data.status
|
const status = event.data.status
|
||||||
|
@ -103,7 +101,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const getNewToken = () => {
|
const getNewToken = () => {
|
||||||
axios.get(apiURL.href)
|
axios.get("http://localhost:5000/interstellar_ai/api/ai_create")
|
||||||
.then(response => {
|
.then(response => {
|
||||||
setAccessToken(response.data.access_token)
|
setAccessToken(response.data.access_token)
|
||||||
})
|
})
|
||||||
|
@ -115,11 +113,9 @@ const InputOutputBackend: React.FC = () => {
|
||||||
|
|
||||||
const startGetWorker = () => {
|
const startGetWorker = () => {
|
||||||
if (!getWorkerRef.current) {
|
if (!getWorkerRef.current) {
|
||||||
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url))
|
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url))
|
||||||
|
|
||||||
const windowname = window.location.hostname
|
getWorkerRef.current.postMessage({ action: "start", access_token: accessToken })
|
||||||
|
|
||||||
getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname })
|
|
||||||
|
|
||||||
addMessage("assistant", "")
|
addMessage("assistant", "")
|
||||||
getWorkerRef.current.onmessage = (event) => {
|
getWorkerRef.current.onmessage = (event) => {
|
||||||
|
@ -182,8 +178,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setInputMessage("")
|
setInputMessage("")
|
||||||
const windowname = window.location.hostname
|
postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key })
|
||||||
postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key, windowname })
|
|
||||||
startGetWorker()
|
startGetWorker()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -233,7 +228,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleStopClick = () => {
|
const handleStopClick = () => {
|
||||||
endGetWorker()
|
endGetWorker()
|
||||||
getNewToken()
|
getNewToken()
|
||||||
}
|
}
|
||||||
|
@ -251,7 +246,7 @@ const InputOutputBackend: React.FC = () => {
|
||||||
const handleEditClick = () => {
|
const handleEditClick = () => {
|
||||||
let newestMessage = messages[messages.length - 2].content
|
let newestMessage = messages[messages.length - 2].content
|
||||||
setInputMessage(newestMessage)
|
setInputMessage(newestMessage)
|
||||||
const updatedMessages = messages.slice(0, messages.length - 2)
|
const updatedMessages = messages.slice(0, messages.length-2)
|
||||||
setMessages(updatedMessages)
|
setMessages(updatedMessages)
|
||||||
endGetWorker()
|
endGetWorker()
|
||||||
getNewToken()
|
getNewToken()
|
||||||
|
|
|
@ -18,12 +18,9 @@ if all went well, you will get the status 200 in response.data.status
|
||||||
to check if the request was accepted or declined, check response.data.response, it will be either true or false depending on if it worked, or not.
|
to check if the request was accepted or declined, check response.data.response, it will be either true or false depending on if it worked, or not.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/db")
|
|
||||||
apiURL.hostname = window.location.hostname;
|
|
||||||
|
|
||||||
export const sendToDatabase = async (data: any): Promise<boolean> => {
|
export const sendToDatabase = async (data: any): Promise<boolean> => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.post(apiURL.href, data);
|
const response = await axios.post("http://localhost:5000/interstellar_ai/db", data);
|
||||||
const status = response.data.status;
|
const status = response.data.status;
|
||||||
const success = response.data.response;
|
const success = response.data.response;
|
||||||
postMessage({ status, success });
|
postMessage({ status, success });
|
||||||
|
@ -36,7 +33,7 @@ export const sendToDatabase = async (data: any): Promise<boolean> => {
|
||||||
|
|
||||||
export const sendToDatabaseAndGetString = async (data: any): Promise<string> => {
|
export const sendToDatabaseAndGetString = async (data: any): Promise<string> => {
|
||||||
try {
|
try {
|
||||||
const response = await axios.post(apiURL.href, data);
|
const response = await axios.post("http://localhost:5000/interstellar_ai/db", data);
|
||||||
const status = response.data.status;
|
const status = response.data.status;
|
||||||
const success = response.data.response;
|
const success = response.data.response;
|
||||||
postMessage({ status, success });
|
postMessage({ status, success });
|
||||||
|
|
|
@ -1,14 +1,10 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
let windownameGlobal = ""
|
let accesstoken
|
||||||
|
|
||||||
let accesstoken = ""
|
|
||||||
onmessage = (event) => {
|
onmessage = (event) => {
|
||||||
const { action, access_token, windowname } = event.data
|
const { action, access_token } = event.data
|
||||||
accesstoken = access_token
|
accesstoken = access_token
|
||||||
|
|
||||||
windownameGlobal = windowname
|
|
||||||
|
|
||||||
if (action === "start") {
|
if (action === "start") {
|
||||||
fetchData()
|
fetchData()
|
||||||
} else if (action === "terminate") {
|
} else if (action === "terminate") {
|
||||||
|
@ -18,12 +14,9 @@ onmessage = (event) => {
|
||||||
|
|
||||||
const fetchData = () => {
|
const fetchData = () => {
|
||||||
|
|
||||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken)
|
const apiURL = "http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken
|
||||||
apiURL.hostname = windownameGlobal;
|
|
||||||
|
|
||||||
console.log(apiURL.href)
|
axios.get(apiURL)
|
||||||
|
|
||||||
axios.get(apiURL.href)
|
|
||||||
.then(response => {
|
.then(response => {
|
||||||
const data = response.data
|
const data = response.data
|
||||||
postMessage(data)
|
postMessage(data)
|
|
@ -1,7 +1,7 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
onmessage = (e) => {
|
onmessage = (e) => {
|
||||||
const { messages, ai_model, model_type, access_token, api_key, windowname } = e.data
|
const { messages, ai_model, model_type, access_token, api_key } = e.data
|
||||||
|
|
||||||
|
|
||||||
const Message = {
|
const Message = {
|
||||||
|
@ -12,13 +12,7 @@ onmessage = (e) => {
|
||||||
api_key: api_key
|
api_key: api_key
|
||||||
}
|
}
|
||||||
|
|
||||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_send")
|
axios.post("http://localhost:5000/interstellar_ai/api/ai_send", Message)
|
||||||
console.log(windowname)
|
|
||||||
apiURL.hostname = windowname;
|
|
||||||
|
|
||||||
console.log(apiURL.href)
|
|
||||||
|
|
||||||
axios.post(apiURL.href, Message)
|
|
||||||
.then(response => {
|
.then(response => {
|
||||||
const status = response.data.status
|
const status = response.data.status
|
||||||
postMessage({ status })
|
postMessage({ status })
|
|
@ -5,10 +5,7 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
|
||||||
const formdata = new FormData()
|
const formdata = new FormData()
|
||||||
formdata.append("audio", audio_data)
|
formdata.append("audio", audio_data)
|
||||||
|
|
||||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/voice_recognition")
|
return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
|
||||||
apiURL.hostname = window.location.hostname;
|
|
||||||
|
|
||||||
return axios.post(apiURL.href, formdata)
|
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response.data.response
|
return response.data.response
|
||||||
})
|
})
|
||||||
|
|
|
@ -154,15 +154,15 @@ const modelDropdown = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectedAIFunction = [
|
const selectedAIFunction = [
|
||||||
'Code',
|
'Code',
|
||||||
'Math',
|
'Math',
|
||||||
'Language',
|
'Language',
|
||||||
'Character',
|
'Character',
|
||||||
'Finance',
|
'Finance',
|
||||||
'Weather',
|
'Weather',
|
||||||
'Time',
|
'Time',
|
||||||
'Image',
|
'Image',
|
||||||
'Custom1',
|
'Custom1',
|
||||||
'Custom2'
|
'Custom2'
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -172,29 +172,25 @@ const ModelSection: React.FC = () => {
|
||||||
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
||||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
||||||
setActiveSelectedAIFunction(temp)
|
setActiveSelectedAIFunction(temp)
|
||||||
if (!localStorage.getItem('selectedModelDropdown')) {
|
if (!localStorage.getItem('selectedModelDropdown')) {
|
||||||
localStorage.setItem("selectedModelDropdown", "Offline Fast")
|
localStorage.setItem("selectedModelDropdown", "Offline Fast" )
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!localStorage.getItem("activeSelectedAIFunction")) {
|
if (!localStorage.getItem("activeSelectedAIFunction")) {
|
||||||
setActiveSelectedAIFunction('Code')
|
setActiveSelectedAIFunction('Code')
|
||||||
localStorage.setItem('activeSelectedAIFunction', 'Code')
|
localStorage.setItem('activeSelectedAIFunction' ,'Code')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!localStorage.getItem("model")) {
|
if (!localStorage.getItem("model")) {
|
||||||
localStorage.setItem("model", 'starcoder2')
|
localStorage.setItem("model" ,'starcoder2')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!localStorage.getItem("radioSelection")) {
|
if (!localStorage.getItem("radioSelection")) {
|
||||||
localStorage.setItem("radioSelection", 'None')
|
localStorage.setItem("radioSelection" ,'None')
|
||||||
}
|
|
||||||
|
|
||||||
if (!localStorage.getItem("type")) {
|
|
||||||
localStorage.setItem("type", 'local')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleStorageChange = () => {
|
const handleStorageChange = () => {
|
||||||
|
@ -281,7 +277,7 @@ const ModelSection: React.FC = () => {
|
||||||
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
|
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
|
||||||
|
|
||||||
const modelClicked = (model: string) => {
|
const modelClicked = (model: string) => {
|
||||||
localStorage.setItem('activeSelectedAIFunction', model)
|
localStorage.setItem('activeSelectedAIFunction' , model)
|
||||||
setActiveSelectedAIFunction(model)
|
setActiveSelectedAIFunction(model)
|
||||||
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
|
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
|
||||||
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
|
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
|
||||||
|
@ -313,7 +309,7 @@ const ModelSection: React.FC = () => {
|
||||||
(displayedCategory) => (
|
(displayedCategory) => (
|
||||||
<button
|
<button
|
||||||
key={displayedCategory}
|
key={displayedCategory}
|
||||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
||||||
onClick={() => modelClicked(displayedCategory)}
|
onClick={() => modelClicked(displayedCategory)}
|
||||||
>
|
>
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue