settings
This commit is contained in:
parent
a05b9d6a5f
commit
ddaf7638ac
1 changed files with 141 additions and 141 deletions
|
|
@ -1,149 +1,149 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
// Define the available model options
|
||||
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)',
|
||||
];
|
||||
// Define the available model options
|
||||
const offlineModels = [
|
||||
'Offline Fast',
|
||||
'Offline Fast (FOSS)',
|
||||
'Offline Slow',
|
||||
'Offline Slow (FOSS)',
|
||||
];
|
||||
|
||||
// Define the properties passed to the Models component
|
||||
interface ModelsProps {
|
||||
selectedOption: string; // Privacy setting: "Offline", "AI Online", "None"
|
||||
}
|
||||
const 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)',
|
||||
];
|
||||
|
||||
const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
|
||||
// State for the selected model, default is loaded from localStorage or defaults to 'Offline Fast'
|
||||
const [selectedModel, setSelectedModel] = useState<string>(() => {
|
||||
return localStorage.getItem('selectedModel') || 'Offline Fast';
|
||||
});
|
||||
const fossModels = [
|
||||
'Offline Fast (FOSS)',
|
||||
'Offline Slow (FOSS)',
|
||||
'Online (FOSS) (La Plateforme)',
|
||||
];
|
||||
|
||||
// Handle changes in the selected model from the dropdown
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newModel = event.target.value;
|
||||
setSelectedModel(newModel);
|
||||
};
|
||||
// Define the properties passed to the Models component
|
||||
interface ModelsProps {
|
||||
selectedOption: string; // Privacy setting: "Offline", "AI Online", "None"
|
||||
}
|
||||
|
||||
// Utility function to check if a model is an offline model
|
||||
const isOfflineModel = (model: string) => {
|
||||
return model.includes('Offline');
|
||||
};
|
||||
const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
|
||||
const [selectedModel, setSelectedModel] = useState<string>(() => {
|
||||
return localStorage.getItem('selectedModel') || 'Offline Fast';
|
||||
});
|
||||
|
||||
// Utility function to check if a model is an online model
|
||||
const isOnlineModel = (model: string) => {
|
||||
return model.includes('Online');
|
||||
};
|
||||
|
||||
// Save selected model to localStorage whenever it changes
|
||||
useEffect(() => {
|
||||
localStorage.setItem('selectedModel', selectedModel);
|
||||
}, [selectedModel]);
|
||||
|
||||
// Filter models based on the selected privacy option (Offline, AI Online, None)
|
||||
const filteredModels = modelOptions.filter((model) => {
|
||||
if (selectedOption === 'Offline') {
|
||||
return !isOnlineModel(model); // Hide online models
|
||||
} else if (selectedOption === 'AI Online') {
|
||||
return !isOfflineModel(model); // Hide offline models
|
||||
} else {
|
||||
return true; // Show all models for "None"
|
||||
}
|
||||
});
|
||||
|
||||
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={selectedModel} onChange={handleModelChange}>
|
||||
{filteredModels.map((model) => (
|
||||
<option key={model} value={model}>
|
||||
{model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Model Grid with Cards */}
|
||||
<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>
|
||||
);
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newModel = event.target.value;
|
||||
setSelectedModel(newModel);
|
||||
};
|
||||
|
||||
export default Models;
|
||||
const isOfflineModel = (model: string) => offlineModels.includes(model);
|
||||
const isOnlineModel = (model: string) => onlineModels.includes(model);
|
||||
const isFossModel = (model: string) => fossModels.includes(model);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('selectedModel', selectedModel);
|
||||
}, [selectedModel]);
|
||||
|
||||
const filteredModels = (() => {
|
||||
switch (selectedOption) {
|
||||
case 'Offline':
|
||||
return offlineModels; // Show only offline models
|
||||
case 'AI Online':
|
||||
return onlineModels; // Show only online models
|
||||
default:
|
||||
return [...offlineModels, ...onlineModels]; // Show all models
|
||||
}
|
||||
})();
|
||||
|
||||
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={selectedModel} onChange={handleModelChange}>
|
||||
{filteredModels.map((model) => (
|
||||
<option key={model} value={model}>
|
||||
{model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Model Grid with Cards */}
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue