forked from React-Group/interstellar_ai
121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
const Models: React.FC = () => {
|
|
const modelOptions = [
|
|
'Offline Fast',
|
|
'Offline Fast (FOSS)',
|
|
'Offline Slow',
|
|
'Offline Slow (FOSS)',
|
|
'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)',
|
|
];
|
|
|
|
const [selectedModel, setSelectedModel] = useState<string>(() => {
|
|
// Load the selected model from localStorage on initial render
|
|
return localStorage.getItem('selectedModel') || 'Offline Fast';
|
|
});
|
|
|
|
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const newModel = event.target.value;
|
|
setSelectedModel(newModel);
|
|
};
|
|
|
|
const isOfflineModel = (model: string) => {
|
|
return model.includes('Offline');
|
|
};
|
|
|
|
// Save selected model to localStorage whenever it changes
|
|
useEffect(() => {
|
|
localStorage.setItem('selectedModel', selectedModel);
|
|
}, [selectedModel]);
|
|
|
|
return (
|
|
<div className="model-background">
|
|
<div className="models">
|
|
<div className="titel">
|
|
<h1>Different AI models</h1>
|
|
</div>
|
|
<div className="model-dropdown">
|
|
<label htmlFor="model-select">Select AI Model:</label>
|
|
<select id="model-select" value={selectedModel} onChange={handleModelChange}>
|
|
{modelOptions.map((model) => (
|
|
<option key={model} value={model}>
|
|
{model}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="grid">
|
|
<button className="code-model model-box">
|
|
<div className="overlay">
|
|
<h3>Code</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="math-model model-box">
|
|
<div className="overlay">
|
|
<h3>Math</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="language-model model-box">
|
|
<div className="overlay">
|
|
<h3>Language</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="character-model model-box">
|
|
<div className="overlay">
|
|
<h3>Character</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="financial-model model-box">
|
|
<div className="overlay">
|
|
<h3>Finance</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="weather-model model-box">
|
|
<div className="overlay">
|
|
<h3>Weather</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="time-planner-model model-box">
|
|
<div className="overlay">
|
|
<h3>Time</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="image-model model-box">
|
|
<div className="overlay">
|
|
<h3>Image</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="default-model model-box">
|
|
<div className="overlay">
|
|
<h3>Custom1</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
<button className="default-model model-box">
|
|
<div className="overlay">
|
|
<h3>Custom2</h3>
|
|
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Models;
|