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
|
// Define the available model options
|
||||||
const modelOptions = [
|
const offlineModels = [
|
||||||
'Offline Fast',
|
'Offline Fast',
|
||||||
'Offline Fast (FOSS)',
|
'Offline Fast (FOSS)',
|
||||||
'Offline Slow',
|
'Offline Slow',
|
||||||
'Offline Slow (FOSS)',
|
'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 properties passed to the Models component
|
const onlineModels = [
|
||||||
interface ModelsProps {
|
'Online (La Plateforme)',
|
||||||
selectedOption: string; // Privacy setting: "Offline", "AI Online", "None"
|
'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 }) => {
|
const fossModels = [
|
||||||
// State for the selected model, default is loaded from localStorage or defaults to 'Offline Fast'
|
'Offline Fast (FOSS)',
|
||||||
const [selectedModel, setSelectedModel] = useState<string>(() => {
|
'Offline Slow (FOSS)',
|
||||||
return localStorage.getItem('selectedModel') || 'Offline Fast';
|
'Online (FOSS) (La Plateforme)',
|
||||||
});
|
];
|
||||||
|
|
||||||
// Handle changes in the selected model from the dropdown
|
// Define the properties passed to the Models component
|
||||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
interface ModelsProps {
|
||||||
const newModel = event.target.value;
|
selectedOption: string; // Privacy setting: "Offline", "AI Online", "None"
|
||||||
setSelectedModel(newModel);
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// Utility function to check if a model is an offline model
|
const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
|
||||||
const isOfflineModel = (model: string) => {
|
const [selectedModel, setSelectedModel] = useState<string>(() => {
|
||||||
return model.includes('Offline');
|
return localStorage.getItem('selectedModel') || 'Offline Fast';
|
||||||
};
|
});
|
||||||
|
|
||||||
// Utility function to check if a model is an online model
|
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
const isOnlineModel = (model: string) => {
|
const newModel = event.target.value;
|
||||||
return model.includes('Online');
|
setSelectedModel(newModel);
|
||||||
};
|
|
||||||
|
|
||||||
// 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>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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