React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: React-Group:d2b92dbe9b5b28bc1b48f9bee5a77aa6228f8d98
Branches Tags
React-Group:main
..
compare: React-Group:ab12b796ec9a2c1fe16eb84fb4bf3ea64bc04c52
Branches Tags
React-Group:main

No commits in common. "d2b92dbe9b5b28bc1b48f9bee5a77aa6228f8d98" and "ab12b796ec9a2c1fe16eb84fb4bf3ea64bc04c52" have entirely different histories.
d2b92dbe9b ... ab12b796ec

5 changed files with 154 additions and 136 deletions
Show stats Expand all files Collapse all files

128
app/components/Models.tsx
View file

@ -1,15 +1,14 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
// Define the available model options // Define the available model options
const modelDropdown = { const offlineModels = [
offlineModels: [
'Offline Fast', 'Offline Fast',
'Offline Fast (FOSS)', 'Offline Fast (FOSS)',
'Offline Slow', 'Offline Slow',
'Offline Slow (FOSS)', 'Offline Slow (FOSS)',
], ];
onlineModels: [ const onlineModels = [
'Online (La Plateforme)', 'Online (La Plateforme)',
'Online (FOSS) (La Plateforme)', 'Online (FOSS) (La Plateforme)',
'Online Cheap (OpenAI)', 'Online Cheap (OpenAI)',
@ -18,66 +17,59 @@ const modelDropdown = {
'Online Expensive (Anthropic)', 'Online Expensive (Anthropic)',
'Online Cheap (Google)', 'Online Cheap (Google)',
'Online Expensive (Google)', 'Online Expensive (Google)',
], ];
fossModels: [ const fossModels = [
'Offline Fast (FOSS)', 'Offline Fast (FOSS)',
'Offline Slow (FOSS)', 'Offline Slow (FOSS)',
'Online (FOSS) (La Plateforme)', 'Online (FOSS) (La Plateforme)',
], ];
};
const Models: React.FC = () => { // Define the properties passed to the Models component
// Initialize state with value from localStorage or default to '' interface ModelsProps {
const [radioSelection, setRadioSelection] = useState(() => localStorage.getItem('radioSelection') || ''); selectedOption: string; // Privacy setting: "Offline", "AI Online", "None"
}
useEffect(() => { const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
const handleStorageChange = () => { const [selectedModel, setSelectedModel] = useState<string>(() => {
setRadioSelection(localStorage.getItem('radioSelection') || ''); return localStorage.getItem('selectedModel') || 'Offline Fast';
}; });
// 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 handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const newModel = event.target.value;
setRadioSelection(newModel); setSelectedModel(newModel);
localStorage.setItem('radioSelection', newModel); // Update localStorage directly
}; };
// Determine the filtered models based on current radioSelection 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 = (() => { const filteredModels = (() => {
switch (radioSelection) { switch (selectedOption) {
case 'Offline': case 'Offline':
return modelDropdown.offlineModels; // Show only offline models return offlineModels; // Show only offline models
case 'AI Online': case 'AI Online':
return modelDropdown.onlineModels; // Show only online models return onlineModels; // Show only online models
case 'FOSS':
return modelDropdown.fossModels; // Show only FOSS models
default: default:
return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches return [...offlineModels, ...onlineModels]; // Show all models
} }
})(); })();
const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);
return ( return (
<div className="model-background"> <div className="model-background">
<div className="models"> <div className="models">
<div className="title"> <div className="title">
<h3>Different AI Models</h3> <h3>Different AI models</h3>
</div> </div>
{/* Model Selection Dropdown */} {/* Model Selection Dropdown */}
<div className="model-dropdown"> <div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label> <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) => ( {filteredModels.map((model) => (
<option key={model} value={model}> <option key={model} value={model}>
{model} {model}
@ -88,14 +80,66 @@ const Models: React.FC = () => {
{/* Model Grid with Cards */} {/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => ( <button className="code-model model-box">
<button key={category} className={`${category.toLowerCase()}-model model-box`}>
<div className="overlay"> <div className="overlay">
<h3>{category}</h3> <h3>Code</h3>
{isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {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> </div>
</button> </button>
))}
</div> </div>
</div> </div>
</div> </div>

35
app/components/Settings.tsx
View file

@ -398,36 +398,30 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Privacy Settings</h2> <h2>Privacy Settings</h2>
{/* AI Mode Radio Options */} {/* AI Mode Radio Options */}
<div className="settings-option"> <div className="settings-option">
<p>Disable Options:</p> <p>Disable Options:</p>
<div className="slider"> <div className="slider">
<div <div
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`} className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('Offline')} // Handle selection only if not in open source mode onClick={() => handleRadioChange('Offline')} // Handle selection
> >
Offline tools Offline tools
</div> </div>
<div <div
className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`} className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('AI Online')} onClick={() => handleRadioChange('AI Online')}
> >
Online tools Online tools
</div> </div>
<div <div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`} className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('None')} onClick={() => handleRadioChange('None')}
> >
None None
</div> </div>
</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> </div>
{/* Disable Chat History Checkbox */} {/* Disable Chat History Checkbox */}
@ -456,7 +450,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div> </div>
); );
case 'theme': case 'theme':
return ( return (
<div className="settings-section"> <div className="settings-section">
@ -794,18 +787,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<input <input
type="checkbox" type="checkbox"
checked={openSourceMode} checked={openSourceMode}
onChange={() => { onChange={() => setOpenSourceMode(!openSourceMode)}
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 Enable Open Source Mode
</label> </label>
@ -813,7 +795,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div> </div>
); );
case 'account': case 'account':
return ( return (
<div className="settings-section"> <div className="settings-section">

7
app/styles/Settings.css
View file

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

2
app/styles/history.css
View file

@ -1,7 +1,7 @@
.history-background { .history-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 40vh; height: 45vh;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;

26
app/styles/models.css
View file

@ -1,20 +1,19 @@
.model-background { .model-background {
grid-column: 1/2; grid-column: 1 / 2;
grid-row: 1/2; grid-row: 2 / 5;
height: 45vh; overflow-y: scroll;
overflow: hidden; background-color: var(--models-background-color); /* Ensure this variable is defined */
background-color: var(--history-background-color);
padding: 1em;
margin: 1em;
margin-right: 0;
border-radius: 2em; border-radius: 2em;
padding: 1em;
margin-left: 1em;
height: 40vh;
box-sizing: border-box;
} }
.models { .models {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
overflow-y: scroll;
} }
.models .titel { .models .titel {
@ -48,7 +47,7 @@
justify-content: center; justify-content: center;
color: var(--text-color); /* Use variable for text color */ color: var(--text-color); /* Use variable for text color */
border-radius: 5%; border-radius: 5%;
overflow: scroll; overflow: hidden;
position: relative; position: relative;
height: 18vh; height: 18vh;
width: 18vh; width: 18vh;
@ -117,7 +116,7 @@
background-position: center; background-position: center;
} }
.finance-model { .financial-model {
background-image: url(/img/financial.jpg); background-image: url(/img/financial.jpg);
background-color: #72cce4; background-color: #72cce4;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -133,7 +132,7 @@
background-position: center; background-position: center;
} }
.time-model { .time-planner-model {
background-image: url(/img/time.jpg); background-image: url(/img/time.jpg);
background-color: #72cce4; background-color: #72cce4;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -149,8 +148,7 @@
background-position: center; background-position: center;
} }
.custom1-model, .default-model {
.custom2-model {
background-image: url(/img/default.jpg); background-image: url(/img/default.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;