React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

new model update

Browse source
This commit is contained in:
sageTheDM 2024-09-27 09:54:38 +02:00
parent 4318b1a9b7
commit 7e85c36ba8
2 changed files with 51 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

70
app/components/Models.tsx
View file

@ -30,12 +30,12 @@ const modelDropdown = {
const Models: React.FC = () => {
// Initialize state with value from localStorage or default to ''
const [radioSelection, setRadioSelection] = useState('');
useEffect(() => {
const handleStorageChange = () => {
setRadioSelection(localStorage.getItem('radioSelection') || '');
};
handleStorageChange()
handleStorageChange();
// Update dropdown immediately when localStorage changes internally or externally
window.addEventListener('storage', handleStorageChange);
@ -54,52 +54,58 @@ const Models: React.FC = () => {
// Determine the filtered models based on current radioSelection
const filteredModels = (() => {
let models = [];
switch (radioSelection) {
case 'Offline':
return modelDropdown.offlineModels; // Show only offline models
models = modelDropdown.offlineModels; // Show only offline models
break;
case 'AI Online':
return modelDropdown.onlineModels; // Show only online models
models = modelDropdown.onlineModels; // Show only online models
break;
case 'FOSS':
return modelDropdown.fossModels; // Show only FOSS models
models = modelDropdown.fossModels; // Show only FOSS models
break;
default:
return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
models = [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
break;
}
return Array.from(new Set(models)); // Remove duplicates using Set
})();
const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);
return (
<div className="model-background">
<div className="models">
<div className="title">
<h3>Different AI Models</h3>
</div>
<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={radioSelection} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
{/* Model Selection Dropdown */}
<div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={radioSelection} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
))}
</select>
</div>
{/* Model Grid with Cards */}
<div className="grid">
{['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
<button key={category} className={`${category.toLowerCase()}-model model-box`}>
<div className="overlay">
<h3>{category}</h3>
{isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
))}
</select>
</div>
{/* Model Grid with Cards */}
<div className="grid">
{['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
<button key={category} className={`${category.toLowerCase()}-model model-box`}>
<div className="overlay">
<h3>{category}</h3>
{isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
))}
</div>
</div>
</div>
</div>
);
};