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

Merge pull request 'main' (#36) from React-Group/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/36
This commit is contained in:
Patrick 2024-10-03 16:16:34 +02:00
commit dbcf1f7d0c
8 changed files with 149 additions and 125 deletions
Show stats 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[] = [];
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);

23
app/backend/InputOutputHandler.tsx
View file

@ -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<string>("USD");
const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
const [timeFormat, setTimeFormat] = useState<string>("24-hour");
@ -24,6 +24,8 @@ const InputOutputBackend: React.FC = () => {
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
const [messages, setMessages] = useState<Message[]>([]);
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
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<HTMLDivElement>(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()

7
app/backend/database.ts
View file

@ -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<boolean> => {
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<boolean> => {
export const sendToDatabaseAndGetString = async (data: any): Promise<string> => {
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 });

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

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

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

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

5
app/backend/voice_backend.ts
View file

@ -5,7 +5,10 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
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
})

206
app/components/Models.tsx
View file

@ -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<ModelKeys>('Offline Fast');
const [radioSelection, setRadioSelection] = useState<string | null>("");
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
const [radioSelection, setRadioSelection] = useState<string | null>("");
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
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<HTMLSelectElement>) => {
const selectedModel = event.target.value as ModelKeys;
setSelectedModelDropdown(selectedModel);
localStorage.setItem('selectedModelDropdown', selectedModel);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
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 (
<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>
);
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 (
<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>
);
};
export default ModelSection;

4
app/styles/header.css
View file

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