forked from React-Group/interstellar_ai
105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
// Define the available model options
|
|
const modelDropdown = {
|
|
offlineModels: [
|
|
'Offline Fast',
|
|
'Offline Fast (FOSS)',
|
|
'Offline Slow',
|
|
'Offline Slow (FOSS)',
|
|
],
|
|
|
|
onlineModels: [
|
|
'Online (La Plateforme)',
|
|
'Online (FOSS) (La Plateforme)',
|
|
'Online Cheap (OpenAI)',
|
|
'Online Expensive (OpenAI)',
|
|
'Online Cheap (Anthropic)',
|
|
'Online Expensive (Anthropic)',
|
|
'Online Cheap (Google)',
|
|
'Online Expensive (Google)',
|
|
],
|
|
|
|
fossModels: [
|
|
'Offline Fast (FOSS)',
|
|
'Offline Slow (FOSS)',
|
|
'Online (FOSS) (La Plateforme)',
|
|
],
|
|
};
|
|
|
|
const Models: React.FC = () => {
|
|
// Initialize state with value from localStorage or default to ''
|
|
const [radioSelection, setRadioSelection] = useState(() => localStorage.getItem('radioSelection') || '');
|
|
|
|
useEffect(() => {
|
|
const handleStorageChange = () => {
|
|
setRadioSelection(localStorage.getItem('radioSelection') || '');
|
|
};
|
|
|
|
// Update dropdown immediately when localStorage changes internally or externally
|
|
window.addEventListener('storage', handleStorageChange);
|
|
|
|
// Cleanup listener on component unmount
|
|
return () => {
|
|
window.removeEventListener('storage', handleStorageChange);
|
|
};
|
|
}, []);
|
|
|
|
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const newModel = event.target.value;
|
|
setRadioSelection(newModel);
|
|
localStorage.setItem('radioSelection', newModel); // Update localStorage directly
|
|
};
|
|
|
|
// Determine the filtered models based on current radioSelection
|
|
const filteredModels = (() => {
|
|
switch (radioSelection) {
|
|
case 'Offline':
|
|
return modelDropdown.offlineModels; // Show only offline models
|
|
case 'AI Online':
|
|
return modelDropdown.onlineModels; // Show only online models
|
|
case 'FOSS':
|
|
return modelDropdown.fossModels; // Show only FOSS models
|
|
default:
|
|
return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
|
|
}
|
|
})();
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Models;
|