sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

MY brain is fried and fired || Patrick helped me on the drpodown issues --> none left for the moment

Browse source
This commit is contained in:
sageTheDM 2024-09-27 14:56:46 +02:00
parent 7e85c36ba8
commit 5dd5b939df
4 changed files with 130 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

95
app/components/Models.tsx
View file

@ -2,16 +2,9 @@ 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)',
offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineWithoutFoss: [
'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)',
@ -19,21 +12,17 @@ const modelDropdown = {
'Online Cheap (Google)',
'Online Expensive (Google)',
],
fossModels: [
'Offline Fast (FOSS)',
'Offline Slow (FOSS)',
'Online (FOSS) (La Plateforme)',
],
onlineFoss: ['Online (FOSS) (La Plateforme)'],
};
const Models: React.FC = () => {
// Initialize state with value from localStorage or default to ''
const [radioSelection, setRadioSelection] = useState('');
const [selectedModel, setSelectedModel] = useState('');
const radioSelection = localStorage.getItem('radioSelection')
useEffect(() => {
const handleStorageChange = () => {
setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModel(localStorage.getItem('selectedModel') || '');
};
handleStorageChange();
@ -48,7 +37,7 @@ const Models: React.FC = () => {
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value;
setRadioSelection(newModel);
setSelectedModel(newModel);
localStorage.setItem('radioSelection', newModel); // Update localStorage directly
};
@ -57,22 +46,55 @@ const Models: React.FC = () => {
let models = [];
switch (radioSelection) {
case 'Offline':
models = modelDropdown.offlineModels; // Show only offline models
models = [
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS
break;
case 'AI Online':
models = modelDropdown.onlineModels; // Show only online models
case 'Offline (FOSS)':
models = [
...modelDropdown.onlineFoss,
]; // Show only offline models with FOSS
break;
case 'FOSS':
models = modelDropdown.fossModels; // Show only FOSS models
case 'Online':
models = [
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss,
]; // Show only online models without FOSS
break;
case 'Online (FOSS)':
models = [
...modelDropdown.offlineFoss,
]; // Show only online models with FOSS
break;
case 'None':
models = [
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
case 'None (FOSS)':
models = [
...modelDropdown.offlineFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
default:
models = [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
models = [
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss,
]; // 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);
const isOfflineModel = (model: string) =>
modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
return (
<div className="model-background">
@ -84,7 +106,7 @@ const Models: React.FC = () => {
{/* Model Selection Dropdown */}
<div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={radioSelection} onChange={handleModelChange}>
<select id="model-select" value={selectedModel} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
@ -93,16 +115,19 @@ const Models: React.FC = () => {
</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>
))}
{['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(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
)
)}
</div>
</div>
</div>