diff --git a/app/backend/ChatHistory.ts b/app/backend/ChatHistory.ts index 62c9a50..8d768ed 100644 --- a/app/backend/ChatHistory.ts +++ b/app/backend/ChatHistory.ts @@ -6,7 +6,7 @@ type ChatMessage = { let chatHistory: ChatMessage[] = []; -function addMessageHistory(name: string, message: any): void { +function addMessageToHistory(name: string, message: any): void { const newMessage: ChatMessage = { name: name, messages: message, @@ -16,7 +16,7 @@ function addMessageHistory(name: string, message: any): void { console.log(`Added message from ${name}: ${message}`); } -function removeMessageHistory(timestamp: number): void { +function removeMessageFromHistory(timestamp: number): void { const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp); if (index > -1) { chatHistory.splice(index, 1); diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index d419d9b..95ee7d5 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -15,7 +15,7 @@ const InputOutputBackend: React.FC = () => { content: string } - // Define state variables for user preferences and messages + // Define state variables for user preferences and messages const [preferredCurrency, setPreferredCurrency] = useState("USD"); const [preferredLanguage, setPreferredLanguage] = useState("english"); const [timeFormat, setTimeFormat] = useState("24-hour"); @@ -24,6 +24,8 @@ const InputOutputBackend: React.FC = () => { const [dateFormat, setDateFormat] = useState("DD-MM-YYYY"); const [messages, setMessages] = useState([]); const [myBoolean, setMyBoolean] = useState(() => 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 useEffect(() => { @@ -55,7 +57,7 @@ const InputOutputBackend: React.FC = () => { { role: "assistant", content: "Hello! How may I help you?" }, ]); }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]); - + const conversationRef = useRef(null) const [copyClicked, setCopyClicked] = useState(false) @@ -72,7 +74,7 @@ const InputOutputBackend: React.FC = () => { useEffect(() => { getNewToken() - postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url)) + postWorkerRef.current = new Worker(new URL("./threads/PostWorker.ts", import.meta.url)) postWorkerRef.current.onmessage = (event) => { const status = event.data.status @@ -101,7 +103,7 @@ const InputOutputBackend: React.FC = () => { }, []) const getNewToken = () => { - axios.get("http://localhost:5000/interstellar_ai/api/ai_create") + axios.get(apiURL.href) .then(response => { setAccessToken(response.data.access_token) }) @@ -113,9 +115,11 @@ const InputOutputBackend: React.FC = () => { const startGetWorker = () => { if (!getWorkerRef.current) { - getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url)) + getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url)) - getWorkerRef.current.postMessage({ action: "start", access_token: accessToken }) + const windowname = window.location.hostname + + getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname }) addMessage("assistant", "") getWorkerRef.current.onmessage = (event) => { @@ -178,7 +182,8 @@ const InputOutputBackend: React.FC = () => { } } setInputMessage("") - postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key }) + 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, windowname }) startGetWorker() } } @@ -228,7 +233,7 @@ const InputOutputBackend: React.FC = () => { } }; - const handleStopClick = () => { + const handleStopClick = () => { endGetWorker() getNewToken() } @@ -246,7 +251,7 @@ const InputOutputBackend: React.FC = () => { const handleEditClick = () => { let newestMessage = messages[messages.length - 2].content setInputMessage(newestMessage) - const updatedMessages = messages.slice(0, messages.length-2) + const updatedMessages = messages.slice(0, messages.length - 2) setMessages(updatedMessages) endGetWorker() getNewToken() diff --git a/app/backend/database.ts b/app/backend/database.ts index 90c69cf..559179a 100644 --- a/app/backend/database.ts +++ b/app/backend/database.ts @@ -18,9 +18,12 @@ 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. */ +const apiURL = new URL("http://localhost:5000/interstellar_ai/db") +apiURL.hostname = window.location.hostname; + export const sendToDatabase = async (data: any): Promise => { try { - const response = await axios.post("http://localhost:5000/interstellar_ai/db", data); + const response = await axios.post(apiURL.href, data); const status = response.data.status; const success = response.data.response; postMessage({ status, success }); @@ -33,7 +36,7 @@ export const sendToDatabase = async (data: any): Promise => { export const sendToDatabaseAndGetString = async (data: any): Promise => { try { - const response = await axios.post("http://localhost:5000/interstellar_ai/db", data); + const response = await axios.post(apiURL.href, data); const status = response.data.status; const success = response.data.response; postMessage({ status, success }); diff --git a/app/backend/threads/GetWorker.js b/app/backend/threads/GetWorker.ts similarity index 61% rename from app/backend/threads/GetWorker.js rename to app/backend/threads/GetWorker.ts index 5eedbb2..2813a93 100644 --- a/app/backend/threads/GetWorker.js +++ b/app/backend/threads/GetWorker.ts @@ -1,10 +1,14 @@ import axios from "axios"; -let accesstoken +let windownameGlobal = "" + +let accesstoken = "" onmessage = (event) => { - const { action, access_token } = event.data + const { action, access_token, windowname } = event.data accesstoken = access_token + windownameGlobal = windowname + if (action === "start") { fetchData() } else if (action === "terminate") { @@ -14,9 +18,12 @@ onmessage = (event) => { const fetchData = () => { - const apiURL = "http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken + const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken) + apiURL.hostname = windownameGlobal; - axios.get(apiURL) + console.log(apiURL.href) + + axios.get(apiURL.href) .then(response => { const data = response.data postMessage(data) diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.ts similarity index 69% rename from app/backend/threads/PostWorker.js rename to app/backend/threads/PostWorker.ts index f63ad77..ed0a526 100644 --- a/app/backend/threads/PostWorker.js +++ b/app/backend/threads/PostWorker.ts @@ -1,7 +1,7 @@ import axios from "axios"; onmessage = (e) => { - const { messages, ai_model, model_type, access_token, api_key } = e.data + const { messages, ai_model, model_type, access_token, api_key, windowname } = e.data const Message = { @@ -12,7 +12,13 @@ onmessage = (e) => { api_key: api_key } - axios.post("http://localhost:5000/interstellar_ai/api/ai_send", Message) + const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_send") + console.log(windowname) + apiURL.hostname = windowname; + + console.log(apiURL.href) + + axios.post(apiURL.href, Message) .then(response => { const status = response.data.status postMessage({ status }) diff --git a/app/backend/voice_backend.ts b/app/backend/voice_backend.ts index 4bf0092..7716f0d 100644 --- a/app/backend/voice_backend.ts +++ b/app/backend/voice_backend.ts @@ -5,7 +5,10 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise => { const formdata = new FormData() formdata.append("audio", audio_data) - return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata) + const apiURL = new URL("http://localhost:5000/interstellar_ai/api/voice_recognition") + apiURL.hostname = window.location.hostname; + + return axios.post(apiURL.href, formdata) .then((response) => { return response.data.response }) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 79f9124..d408eb0 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -135,121 +135,121 @@ const modelList = { Image: 'pixtral-12b-2409' } } - // Define the keys of modelList - type ModelKeys = keyof typeof modelList; +// Define the keys of modelList +type ModelKeys = keyof typeof modelList; - const ModelSection: React.FC = () => { - // Initialize state with value from localStorage or default to '' - const [selectedModelDropdown, setSelectedModelDropdown] = useState('Offline Fast'); - const [radioSelection, setRadioSelection] = useState(""); - const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); - const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); +const ModelSection: React.FC = () => { + // Initialize state with value from localStorage or default to '' + const [selectedModelDropdown, setSelectedModelDropdown] = useState('Offline Fast'); + const [radioSelection, setRadioSelection] = useState(""); + const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); + const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); - useEffect(() => { - // Load initial values from localStorage - const temp = localStorage.getItem("activeSelectedAIFunction") || ""; - setActiveSelectedAIFunction(temp); + useEffect(() => { + // Load initial values from localStorage + const temp = localStorage.getItem("activeSelectedAIFunction") || ""; + setActiveSelectedAIFunction(temp); - // Check if localStorage keys exist, else set defaults - if (!localStorage.getItem('selectedModelDropdown')) { - localStorage.setItem("selectedModelDropdown", "Offline Fast"); - } + // Check if localStorage keys exist, else set defaults + if (!localStorage.getItem('selectedModelDropdown')) { + localStorage.setItem("selectedModelDropdown", "Offline Fast"); + } - // Set the dropdown and selected AI function from localStorage - const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; - const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; + // Set the dropdown and selected AI function from localStorage + const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; + const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; - setSelectedModelDropdown(storedSelectedModel); - setCurrentSelectedAIFunction(storedActiveFunction); + setSelectedModelDropdown(storedSelectedModel); + setCurrentSelectedAIFunction(storedActiveFunction); - if (!localStorage.getItem("model")) { - localStorage.setItem("model", 'starcoder2'); - } + if (!localStorage.getItem("model")) { + localStorage.setItem("model", 'starcoder2'); + } - if (!localStorage.getItem("radioSelection")) { - localStorage.setItem("radioSelection", 'None'); - } + if (!localStorage.getItem("radioSelection")) { + localStorage.setItem("radioSelection", 'None'); + } - // Load radio selection from localStorage - setRadioSelection(localStorage.getItem('radioSelection') || ''); - }, []); + // Load radio selection from localStorage + setRadioSelection(localStorage.getItem('radioSelection') || ''); + }, []); - const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]); + const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]); - const handleModelChange = (event: React.ChangeEvent) => { - const selectedModel = event.target.value as ModelKeys; - setSelectedModelDropdown(selectedModel); - localStorage.setItem('selectedModelDropdown', selectedModel); + const handleModelChange = (event: React.ChangeEvent) => { + const selectedModel = event.target.value as ModelKeys; + setSelectedModelDropdown(selectedModel); + localStorage.setItem('selectedModelDropdown', selectedModel); - // Update model and type in local storage - const modelType = modelList[selectedModel].model_type; - const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]]; + // Update model and type in local storage + const modelType = modelList[selectedModel].model_type; + const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]]; - localStorage.setItem('model', model); - localStorage.setItem('type', modelType); - }; - - const isOfflineModel = (model: string) => { - return modelList[model as ModelKeys].model_type === 'local'; - }; - - const modelClicked = (model: string) => { - const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList; - - if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) { - const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]; - const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]]; - - localStorage.setItem('activeSelectedAIFunction', model); - setActiveSelectedAIFunction(model); - localStorage.setItem('model', newModel); - localStorage.setItem('type', modelType); - setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked - } else { - console.error(`Model ${model} not found for function ${selectedModelDropdown}`); - } - }; - - return ( -
-
-
-

Different AI Models

-
- - {/* Model Selection Dropdown */} -
- - -
- - {/* Model Grid with Cards */} -
- {Object.keys(modelList[selectedModelDropdown]) - .filter((key) => key !== 'model_type') // Exclude model_type from display - .map((displayedCategory) => ( - - )) - } -
-
-
- ); + localStorage.setItem('model', model); + localStorage.setItem('type', modelType); }; + const isOfflineModel = (model: string) => { + return modelList[model as ModelKeys].model_type === 'local'; + }; + + const modelClicked = (model: string) => { + const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList; + + if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) { + const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]; + const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]]; + + localStorage.setItem('activeSelectedAIFunction', model); + setActiveSelectedAIFunction(model); + localStorage.setItem('model', newModel); + localStorage.setItem('type', modelType); + setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked + } else { + console.error(`Model ${model} not found for function ${selectedModelDropdown}`); + } + }; + + return ( +
+
+
+

Different AI Models

+
+ + {/* Model Selection Dropdown */} +
+ + +
+ + {/* Model Grid with Cards */} +
+ {Object.keys(modelList[selectedModelDropdown]) + .filter((key) => key !== 'model_type') // Exclude model_type from display + .map((displayedCategory) => ( + + )) + } +
+
+
+ ); +}; + export default ModelSection; diff --git a/app/styles/header.css b/app/styles/header.css index af4c1c0..9f30d31 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -84,9 +84,9 @@ header{ .header-login-button{ height: 100%; - width:4vw; + width:max-content; font-size: var(--font-size); - padding: 3px; + padding: 0.5vw 1vw; background-color: var(--input-button-color); color: var(--text-color); border: none;