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

Model changes

Browse source
This commit is contained in:
sageTheDM 2024-10-02 09:04:24 +02:00
parent f7dc957c3a
commit e602c885e5
3 changed files with 222 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

80
app/components/Models.tsx
View file

@ -137,11 +137,11 @@ const modelList = {
}
}
// Define the available category options
// Define the available selectedAIFunction options
const modelDropdown = {
offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineWithoutFoss: [
onlineNonFoss: [
'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)',
@ -153,7 +153,7 @@ const modelDropdown = {
onlineFoss: ['Online (FOSS) (La Plateforme)'],
};
const Category = [
const selectedAIFunction = [
'Code',
'Math',
'Language',
@ -166,21 +166,23 @@ const Category = [
'Custom2'
]
const Models: React.FC = () => {
const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to ''
const [selectedModel, setSelectedModel] = useState('');
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeCategory, setActiveCategory] = useState('');
const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
useEffect(() => {
if (!localStorage.getItem('selectedModel')) {
localStorage.setItem("selectedModel", "Offline Fast" )
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
setActiveSelectedAIFunction(temp)
if (!localStorage.getItem('selectedModelDropdown')) {
localStorage.setItem("selectedModelDropdown", "Offline Fast" )
}
if (!localStorage.getItem("activeCategory")) {
setActiveCategory('Code')
localStorage.setItem('activeCategory' ,'Code')
if (!localStorage.getItem("activeSelectedAIFunction")) {
setActiveSelectedAIFunction('Code')
localStorage.setItem('activeSelectedAIFunction' ,'Code')
}
if (!localStorage.getItem("model")) {
@ -188,14 +190,14 @@ const Models: React.FC = () => {
}
const handleStorageChange = () => {
setSelectedModel(localStorage.getItem('selectedModel') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange);
setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModel(localStorage.getItem('selectedModel') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
// Cleanup listener on component unmount
return () => {
window.removeEventListener('storage', handleStorageChange);
@ -203,16 +205,16 @@ const Models: React.FC = () => {
}, []); // Dependency array can remain empty if you only want this to run on mount
useEffect(() => {
const storedCategory = localStorage.getItem("activeCategory");
if (storedCategory !== currentCategory) {
setCurrentCategory(storedCategory);
var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
}
}, [activeCategory]);
}, [activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value;
setSelectedModel(newModel);
localStorage.setItem('selectedModel', newModel); // Update localStorage directly
setSelectedModelDropdown(newModel);
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
};
// Determine the filtered models based on current radioSelection
@ -221,7 +223,7 @@ const Models: React.FC = () => {
switch (radioSelection) {
case 'Offline':
models = [
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS
break;
@ -232,7 +234,7 @@ const Models: React.FC = () => {
break;
case 'Online':
models = [
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
]; // Show only online models without FOSS
break;
@ -243,9 +245,9 @@ const Models: React.FC = () => {
break;
case 'None':
models = [
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
@ -257,9 +259,9 @@ const Models: React.FC = () => {
break;
default:
models = [
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
@ -268,14 +270,14 @@ const Models: React.FC = () => {
})();
const isOfflineModel = (model: string) =>
modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => {
localStorage.setItem('activeCategory' , model)
setActiveCategory(model)
const category = selectedModel as keyof typeof modelList;
localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
localStorage.setItem('activeSelectedAIFunction' , model)
setActiveSelectedAIFunction(model)
const selectedAIFunction = selectedModelDropdown 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 (
@ -288,7 +290,7 @@ const Models: React.FC = () => {
{/* Model Selection Dropdown */}
<div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={selectedModel} onChange={handleModelChange}>
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
@ -299,16 +301,16 @@ const Models: React.FC = () => {
{/* Model Grid with Cards */}
<div className="grid">
{Category.map(
{selectedAIFunction.map(
(displayedCategory) => (
<button
key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
onClick={() => modelClicked(displayedCategory)}
>
<div className="overlay">
<h3>{displayedCategory}</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
)
@ -319,4 +321,4 @@ const Models: React.FC = () => {
);
};
export default Models;
export default ModelSection;