forked from React-Group/interstellar_ai
Model refactor 1
This commit is contained in:
parent
73d87136c8
commit
d1aa5015d8
1 changed files with 50 additions and 161 deletions
|
|
@ -1,8 +1,21 @@
|
||||||
"use client";
|
"use client";
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
// Define all models that should be available.
|
// Define the types for ModelType and ModelListType
|
||||||
const modelList = {
|
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 = {
|
||||||
'Offline Fast': {
|
'Offline Fast': {
|
||||||
model_type: 'local',
|
model_type: 'local',
|
||||||
Math: 'qwen2-math:1.5b',
|
Math: 'qwen2-math:1.5b',
|
||||||
|
|
@ -86,161 +99,41 @@ const modelList = {
|
||||||
Code: 'open-codestral-mamba',
|
Code: 'open-codestral-mamba',
|
||||||
Language: 'open-mistral-nemo',
|
Language: 'open-mistral-nemo',
|
||||||
Weather: '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)'],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectedAIFunction = [
|
// AI Functions list
|
||||||
'Code',
|
const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const;
|
||||||
'Math',
|
type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names
|
||||||
'Language',
|
|
||||||
'Weather'
|
|
||||||
]
|
|
||||||
|
|
||||||
const ModelSection: React.FC = () => {
|
const ModelSection: React.FC = () => {
|
||||||
// Initialize state with value from localStorage or default to ''
|
const [selectedModelDropdown, setSelectedModelDropdown] = useState<string>(() => localStorage.getItem("selectedModelDropdown") || "Offline Fast");
|
||||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
|
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState<AIFunction>(() => (localStorage.getItem("activeSelectedAIFunction") as AIFunction) || "Code");
|
||||||
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
const [selectedModel, setSelectedModel] = useState<string>("");
|
||||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
const [selectedModelType, setSelectedModelType] = useState<string>("");
|
||||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
|
||||||
const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
|
|
||||||
|
|
||||||
|
// Update the model and type when the dropdown or function changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof localStorage !== 'undefined') {
|
const newSelectedModel = modelList[selectedModelDropdown]?.[activeSelectedAIFunction] || "";
|
||||||
const defaultValues = {
|
const newModelType = modelList[selectedModelDropdown]?.model_type || "";
|
||||||
selectedModelDropdown: 'Offline Fast',
|
|
||||||
activeSelectedAIFunction: 'Code',
|
|
||||||
model: 'starcoder2',
|
|
||||||
radioSelection: 'None',
|
|
||||||
type: 'local',
|
|
||||||
};
|
|
||||||
|
|
||||||
Object.entries(defaultValues).forEach(([key, value]) => {
|
setSelectedModel(newSelectedModel);
|
||||||
if (!localStorage.getItem(key)) {
|
setSelectedModelType(newModelType);
|
||||||
localStorage.setItem(key, value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
setIsOpenSourceMode(localStorage.getItem("openSourceMode"));
|
localStorage.setItem("model", newSelectedModel);
|
||||||
setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || '');
|
localStorage.setItem("type", newModelType);
|
||||||
setRadioSelection(localStorage.getItem("radioSelection") || '');
|
}, [selectedModelDropdown, activeSelectedAIFunction]);
|
||||||
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);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof localStorage !== 'undefined') {
|
|
||||||
const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
|
|
||||||
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
|
|
||||||
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [activeSelectedAIFunction]);
|
|
||||||
|
|
||||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
const newModel = event.target.value;
|
const newModel = event.target.value;
|
||||||
setSelectedModelDropdown(newModel);
|
setSelectedModelDropdown(newModel);
|
||||||
if (typeof localStorage !== 'undefined') {
|
localStorage.setItem('selectedModelDropdown', newModel);
|
||||||
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
|
|
||||||
const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
|
|
||||||
modelClicked(model)
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Determine the filtered models based on current radioSelection
|
const modelClicked = (functionName: AIFunction) => {
|
||||||
const filteredModels = (() => {
|
setActiveSelectedAIFunction(functionName);
|
||||||
let models = [];
|
localStorage.setItem('activeSelectedAIFunction', functionName);
|
||||||
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 (
|
return (
|
||||||
<div className="model-background">
|
<div className="model-background">
|
||||||
|
|
@ -249,33 +142,29 @@ const ModelSection: React.FC = () => {
|
||||||
<h3>Different AI Models</h3>
|
<h3>Different AI Models</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Model Selection Dropdown */}
|
|
||||||
<div className="model-dropdown">
|
<div className="model-dropdown">
|
||||||
<label htmlFor="model-select">Select AI Model:</label>
|
<label htmlFor="model-select">Select AI Model:</label>
|
||||||
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
||||||
{filteredModels.map((model) => (
|
{Object.keys(modelList).map((model) => (
|
||||||
<option key={model} value={model}>
|
<option key={model} value={model}>
|
||||||
{model}
|
{model}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
{/* Model Grid with Cards */}
|
|
||||||
<div className="grid">
|
<div className="grid">
|
||||||
{selectedAIFunction.map(
|
{aiFunctions.map((functionName) => (
|
||||||
(displayedCategory) => (
|
|
||||||
<button
|
<button
|
||||||
key={displayedCategory}
|
key={functionName}
|
||||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
className={`${functionName.toLowerCase()}-model model-box ${activeSelectedAIFunction === functionName ? 'selected' : ''}`}
|
||||||
onClick={() => modelClicked(displayedCategory)}
|
onClick={() => modelClicked(functionName)}
|
||||||
>
|
>
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
<h3>{displayedCategory}</h3>
|
<h3>{functionName}</h3>
|
||||||
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
)
|
))}
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue