sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Compare commits

base: sageTheDm:dbcf1f7d0c4d1052e671b4928a816c3a6ebc2adb
Branches Tags
sageTheDm:main
React-Group:main
..
compare: sageTheDm:6435d5f4e4e4fc8a4406929504a2f3b5ea88ebe5
Branches Tags
sageTheDm:main
React-Group:main

No commits in common. "dbcf1f7d0c4d1052e671b4928a816c3a6ebc2adb" and "6435d5f4e4e4fc8a4406929504a2f3b5ea88ebe5" have entirely different histories.
dbcf1f7d0c ... 6435d5f4e4

8 changed files with 120 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/backend/ChatHistory.ts
View file

@ -6,7 +6,7 @@ type ChatMessage = {
let chatHistory: ChatMessage[] = []; let chatHistory: ChatMessage[] = [];
function addMessageToHistory(name: string, message: any): void { function addMessageHistory(name: string, message: any): void {
const newMessage: ChatMessage = { const newMessage: ChatMessage = {
name: name, name: name,
messages: message, messages: message,
@ -16,7 +16,7 @@ function addMessageToHistory(name: string, message: any): void {
console.log(`Added message from ${name}: ${message}`); console.log(`Added message from ${name}: ${message}`);
} }
function removeMessageFromHistory(timestamp: number): void { function removeMessageHistory(timestamp: number): void {
const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp); const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp);
if (index > -1) { if (index > -1) {
chatHistory.splice(index, 1); chatHistory.splice(index, 1);

19
app/backend/InputOutputHandler.tsx
View file

@ -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(() => {
@ -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()
} }
} }
@ -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()

7
app/backend/database.ts
View file

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

15
app/backend/threads/GetWorker.ts → app/backend/threads/GetWorker.js
View file

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

10
app/backend/threads/PostWorker.ts → app/backend/threads/PostWorker.js
View file

@ -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
app/backend/voice_backend.ts
View file

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

196
app/components/Models.tsx
View file

@ -135,121 +135,121 @@ const modelList = {
Image: 'pixtral-12b-2409' Image: 'pixtral-12b-2409'
} }
} }
// Define the keys of modelList // Define the keys of modelList
type ModelKeys = keyof typeof modelList; type ModelKeys = keyof typeof modelList;
const ModelSection: React.FC = () => { const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast'); const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
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(() => {
// Load initial values from localStorage // Load initial values from localStorage
const temp = localStorage.getItem("activeSelectedAIFunction") || ""; const temp = localStorage.getItem("activeSelectedAIFunction") || "";
setActiveSelectedAIFunction(temp); setActiveSelectedAIFunction(temp);
// Check if localStorage keys exist, else set defaults // Check if localStorage keys exist, else set defaults
if (!localStorage.getItem('selectedModelDropdown')) { if (!localStorage.getItem('selectedModelDropdown')) {
localStorage.setItem("selectedModelDropdown", "Offline Fast"); localStorage.setItem("selectedModelDropdown", "Offline Fast");
} }
// Set the dropdown and selected AI function from localStorage // Set the dropdown and selected AI function from localStorage
const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys; const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code'; const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
setSelectedModelDropdown(storedSelectedModel); setSelectedModelDropdown(storedSelectedModel);
setCurrentSelectedAIFunction(storedActiveFunction); setCurrentSelectedAIFunction(storedActiveFunction);
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');
} }
// Load radio selection from localStorage // Load radio selection from localStorage
setRadioSelection(localStorage.getItem('radioSelection') || ''); 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<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const selectedModel = event.target.value as ModelKeys; const selectedModel = event.target.value as ModelKeys;
setSelectedModelDropdown(selectedModel); setSelectedModelDropdown(selectedModel);
localStorage.setItem('selectedModelDropdown', selectedModel); localStorage.setItem('selectedModelDropdown', selectedModel);
// Update model and type in local storage // Update model and type in local storage
const modelType = modelList[selectedModel].model_type; const modelType = modelList[selectedModel].model_type;
const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]]; const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
localStorage.setItem('model', model); 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); 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 ( const isOfflineModel = (model: string) => {
<div className="model-background"> return modelList[model as ModelKeys].model_type === 'local';
<div className="models"> };
<div className="title">
<h3>Different AI Models</h3>
</div>
{/* Model Selection Dropdown */} const modelClicked = (model: string) => {
<div className="model-dropdown"> const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
<label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
))}
</select>
</div>
{/* Model Grid with Cards */} if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
<div className="grid"> const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
{Object.keys(modelList[selectedModelDropdown]) const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
.filter((key) => key !== 'model_type') // Exclude model_type from display
.map((displayedCategory) => ( localStorage.setItem('activeSelectedAIFunction', model);
<button setActiveSelectedAIFunction(model);
key={displayedCategory} localStorage.setItem('model', newModel);
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} localStorage.setItem('type', modelType);
onClick={() => modelClicked(displayedCategory)} setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
> } else {
<div className="overlay"> console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
<h3>{displayedCategory}</h3> }
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} };
</div>
</button> return (
)) <div className="model-background">
} <div className="models">
<div className="title">
<h3>Different AI Models</h3>
</div>
{/* Model Selection Dropdown */}
<div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
))}
</select>
</div>
{/* Model Grid with Cards */}
<div className="grid">
{Object.keys(modelList[selectedModelDropdown])
.filter((key) => key !== 'model_type') // Exclude model_type from display
.map((displayedCategory) => (
<button
key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
onClick={() => modelClicked(displayedCategory)}
>
<div className="overlay">
<h3>{displayedCategory}</h3>
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
))
}
</div>
</div> </div>
</div> </div>
</div> );
); };
};
export default ModelSection; export default ModelSection;

4
app/styles/header.css
View file

@ -84,9 +84,9 @@ header{
.header-login-button{ .header-login-button{
height: 100%; height: 100%;
width:max-content; width:4vw;
font-size: var(--font-size); font-size: var(--font-size);
padding: 0.5vw 1vw; padding: 3px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: var(--text-color); color: var(--text-color);
border: none; border: none;