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

mostly working version

Browse source
This commit is contained in:
sageTheDM 2024-09-26 12:31:56 +02:00
parent fdf568b124
commit 7ec0a192de
4 changed files with 125 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
app/components/Models.tsx
View file

@ -1,14 +1,15 @@
import React, { useState, useEffect } from 'react';
// Define the available model options
const offlineModels = [
const modelDropdown = {
offlineModels: [
'Offline Fast',
'Offline Fast (FOSS)',
'Offline Slow',
'Offline Slow (FOSS)',
];
],
const onlineModels = [
onlineModels: [
'Online (La Plateforme)',
'Online (FOSS) (La Plateforme)',
'Online Cheap (OpenAI)',
@ -17,59 +18,66 @@ const onlineModels = [
'Online Expensive (Anthropic)',
'Online Cheap (Google)',
'Online Expensive (Google)',
];
],
const fossModels = [
fossModels: [
'Offline Fast (FOSS)',
'Offline Slow (FOSS)',
'Online (FOSS) (La Plateforme)',
];
],
};
// Define the properties passed to the Models component
interface ModelsProps {
selectedOption: string; // Privacy setting: "Offline", "AI Online", "None"
}
const Models: React.FC = () => {
// Initialize state with value from localStorage or default to ''
const [radioSelection, setRadioSelection] = useState(() => localStorage.getItem('radioSelection') || '');
const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
const [selectedModel, setSelectedModel] = useState<string>(() => {
return localStorage.getItem('selectedModel') || 'Offline Fast';
});
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;
setSelectedModel(newModel);
setRadioSelection(newModel);
localStorage.setItem('radioSelection', newModel); // Update localStorage directly
};
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]);
// Determine the filtered models based on current radioSelection
const filteredModels = (() => {
switch (selectedOption) {
switch (radioSelection) {
case 'Offline':
return offlineModels; // Show only offline models
return modelDropdown.offlineModels; // Show only offline models
case 'AI Online':
return onlineModels; // Show only online models
return modelDropdown.onlineModels; // Show only online models
case 'FOSS':
return modelDropdown.fossModels; // Show only FOSS models
default:
return [...offlineModels, ...onlineModels]; // Show all models
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>
<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}>
<select id="model-select" value={radioSelection} onChange={handleModelChange}>
{filteredModels.map((model) => (
<option key={model} value={model}>
{model}
@ -80,66 +88,14 @@ const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
{/* Model Grid with Cards */}
<div className="grid">
<button className="code-model model-box">
{['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>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" />}
<h3>{category}</h3>
{isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
))}
</div>
</div>
</div>

35
app/components/Settings.tsx
View file

@ -398,30 +398,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return (
<div className="settings-section">
<h2>Privacy Settings</h2>
{/* AI Mode Radio Options */}
<div className="settings-option">
<p>Disable Options:</p>
<div className="slider">
<div
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
onClick={() => handleRadioChange('Offline')} // Handle selection
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('Offline')} // Handle selection only if not in open source mode
>
Offline tools
</div>
<div
className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''}`}
onClick={() => handleRadioChange('AI Online')}
className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('AI Online')}
>
Online tools
</div>
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleRadioChange('None')}
className={`slider-option ${selectedOption === 'None' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('None')}
>
None
</div>
</div>
<br />
{openSourceMode && (
<p style={{ color: 'grey' }}>These options are deactivated because you are in FOSS mode.</p>
)}
<p>
After changing the preferred settings, please reload the website so it can update itself properly.
</p>
</div>
{/* Disable Chat History Checkbox */}
@ -450,6 +456,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div>
);
case 'theme':
return (
<div className="settings-section">
@ -787,7 +794,18 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<input
type="checkbox"
checked={openSourceMode}
onChange={() => setOpenSourceMode(!openSourceMode)}
onChange={() => {
const newValue = !openSourceMode;
setOpenSourceMode(newValue);
// Update radio selection based on the new openSourceMode value
if (newValue) {
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
localStorage.setItem('radioSelection', 'FOSS'); // Update localStorage
} else {
setSelectedOption('None'); // Or any other default value when disabling
localStorage.setItem('radioSelection', 'None'); // Update localStorage
}
}}
/>
Enable Open Source Mode
</label>
@ -795,6 +813,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div>
);
case 'account':
return (
<div className="settings-section">

5
app/styles/Settings.css
View file

@ -185,3 +185,8 @@ input[type="radio"] {
display: none; /* Hide the default radio buttons */
}
.slider-option.disabled {
opacity: 0.5; /* Make the option appear greyed out */
pointer-events: none; /* Prevent clicks */
}

7
app/styles/models.css
View file

@ -117,7 +117,7 @@
background-position: center;
}
.financial-model {
.finance-model {
background-image: url(/img/financial.jpg);
background-color: #72cce4;
background-repeat: no-repeat;
@ -133,7 +133,7 @@
background-position: center;
}
.time-planner-model {
.time-model {
background-image: url(/img/time.jpg);
background-color: #72cce4;
background-repeat: no-repeat;
@ -149,7 +149,8 @@
background-position: center;
}
.default-model {
.custom1-model,
.custom2-model {
background-image: url(/img/default.jpg);
background-repeat: no-repeat;
background-size: cover;