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

Last minute changes

Browse source
This commit is contained in:
sageTheDM 2024-10-10 10:33:33 +02:00
parent 8ec93d4f1c
commit 44d74a560a
2 changed files with 161 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/backend/InputOutputHandler.tsx
View file

@ -115,7 +115,8 @@ const InputOutputBackend: React.FC = () => {
Communicate in the language specified by the user (country code: ${preferredLanguage}), and only in this language.
You are only able to change language if the user specifically states you must.
Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.
These are the currently newest Weather infos for the region. In case the user asks about anything weather related, you can use the following data to help the user: ${weatherData}. If there is nothing there say there is no data`
These are the currently newest Weather infos for the region. Only for the case when the user asks about anything weather related,
you can use the following data to help the user: ${weatherData}. If there is nothing there say there is no data`
: `You are a helpful assistant.`;
console.log(newSystemMessage)
setSystemMessage(newSystemMessage)

203
app/components/Models.tsx
View file

@ -1,21 +1,8 @@
"use client";
import React, { useState, useEffect } from 'react';
// Define the types for ModelType and ModelListType
type ModelType = {
model_type: string;
Math: string;
Code: string;
Language: string;
Weather: string;
};
type ModelListType = {
[key: string]: ModelType;
};
// Define the AI models list
const modelList: ModelListType = {
// Define all models that should be available.
const modelList = {
'Offline Fast': {
model_type: 'local',
Math: 'qwen2-math:1.5b',
@ -99,47 +86,161 @@ const modelList: ModelListType = {
Code: 'open-codestral-mamba',
Language: 'open-mistral-nemo',
Weather: 'open-mistral-nemo',
},
}
}
// Define the available selectedAIFunction options
const modelDropdown = {
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineNonFoss: [
'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)',
'Online Expensive (Anthropic)',
'Online Cheap (Google)',
'Online Expensive (Google)',
'Online (La Plateforme)'
],
onlineFoss: ['Online (FOSS) (La Plateforme)'],
};
// AI Functions list
const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const;
type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names
const selectedAIFunction = [
'Code',
'Math',
'Language',
'Weather'
]
const ModelSection: React.FC = () => {
const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => "Offline Fast");
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => "Code");
const [, setSelectedModel] = useState<string>("");
const [, setSelectedModelType] = useState<string>("");
// Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
useEffect(() => {
setSelectedModelDropdown(localStorage.getItem("selectedModelDropdown")|| "Offline Fast");
setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || "Code");
if (typeof localStorage !== 'undefined') {
const defaultValues = {
selectedModelDropdown: 'Offline Fast',
activeSelectedAIFunction: 'Code',
model: 'starcoder2',
radioSelection: 'None',
type: 'local',
};
Object.entries(defaultValues).forEach(([key, value]) => {
if (!localStorage.getItem(key)) {
localStorage.setItem(key, value);
}
});
setIsOpenSourceMode(localStorage.getItem("openSourceMode"));
setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || '');
setRadioSelection(localStorage.getItem("radioSelection") || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
const handleStorageChange = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange);
// Cleanup listener on component unmount
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}
}, []);
// Update the model and type when the dropdown or function changes
useEffect(() => {
const aiFunctionsActiveSelectedAIFunction = activeSelectedAIFunction as AIFunction
const newSelectedModel = modelList[selectedModelDropdown]?.[aiFunctionsActiveSelectedAIFunction] || "";
const newModelType = modelList[selectedModelDropdown]?.model_type || "";
setSelectedModel(newSelectedModel);
setSelectedModelType(newModelType);
localStorage.setItem("model", newSelectedModel);
localStorage.setItem("type", newModelType);
}, [selectedModelDropdown, activeSelectedAIFunction]);
if (typeof localStorage !== 'undefined') {
const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
}
}
}, [activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value;
setSelectedModelDropdown(newModel);
localStorage.setItem('selectedModelDropdown', newModel);
if (typeof localStorage !== 'undefined') {
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
modelClicked(model)
}
};
const modelClicked = (functionName: AIFunction) => {
setActiveSelectedAIFunction(functionName);
localStorage.setItem('activeSelectedAIFunction', functionName);
};
// Determine the filtered models based on current radioSelection
const filteredModels = (() => {
let models = [];
switch (radioSelection) {
case 'Offline':
models = [
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.onlineFoss,
];
} // Show only offline models without FOSS
break;
case 'Online':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.offlineFoss,
];
} // Show only online models without FOSS
break;
case 'None':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.offlineFoss,
...modelDropdown.onlineFoss,
];
} // Show all models if nothing matches
break;
default:
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
}
return Array.from(new Set(models)); // Remove duplicates using Set
})();
const isOfflineModel = (model: string) =>
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('activeSelectedAIFunction', model)
setActiveSelectedAIFunction(model)
const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast'
const selectedAIFunction = modelDropdown as keyof typeof modelList;
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
}
}
return (
<div className="model-background">
@ -148,29 +249,33 @@ const ModelSection: React.FC = () => {
<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}>
{Object.keys(modelList).map((model) => (
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
))}
</select>
</div>
{/* Model Grid with Cards */}
<div className="grid">
{aiFunctions.map((functionName) => (
{selectedAIFunction.map(
(displayedCategory) => (
<button
key={functionName}
className={`${functionName.toLowerCase()}-model model-box ${activeSelectedAIFunction === functionName ? 'selected' : ''}`}
onClick={() => modelClicked(functionName)}
key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
onClick={() => modelClicked(displayedCategory)}
>
<div className="overlay">
<h3>{functionName}</h3>
<h3>{displayedCategory}</h3>
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
))}
)
)}
</div>
</div>
</div>