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

Compare commits

base: React-Group:490a009bac4d0a4d802f0012f87593ed8ad0d6d0
Branches Tags
React-Group:main
..
compare: React-Group:4142062d9197f34047d9d20fc6a225d0efdf84a5
Branches Tags
React-Group:main

No commits in common. "490a009bac4d0a4d802f0012f87593ed8ad0d6d0" and "4142062d9197f34047d9d20fc6a225d0efdf84a5" have entirely different histories.
490a009bac ... 4142062d91

4 changed files with 65 additions and 130 deletions
Show stats Expand all files Collapse all files

15
app/backend/GetLocalStorage.ts
View file

@ -1,15 +0,0 @@
// getLocalStorageData.ts
export const getAllLocalStorageItems = (): Record<string, string | null> => {
const allData: Record<string, string | null> = {};
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key) {
const value = localStorage.getItem(key);
allData[key] = value;
}
}
return allData;
};

95
app/components/Models.tsx
View file

@ -2,9 +2,16 @@ import React, { useState, useEffect } from 'react';
// Define the available model options // Define the available model options
const modelDropdown = { const modelDropdown = {
offlineWithoutFoss: ['Offline Fast', 'Offline Slow'], offlineModels: [
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'], 'Offline Fast',
onlineWithoutFoss: [ 'Offline Fast (FOSS)',
'Offline Slow',
'Offline Slow (FOSS)',
],
onlineModels: [
'Online (La Plateforme)',
'Online (FOSS) (La Plateforme)',
'Online Cheap (OpenAI)', 'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)', 'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)', 'Online Cheap (Anthropic)',
@ -12,17 +19,21 @@ const modelDropdown = {
'Online Cheap (Google)', 'Online Cheap (Google)',
'Online Expensive (Google)', 'Online Expensive (Google)',
], ],
onlineFoss: ['Online (FOSS) (La Plateforme)'],
fossModels: [
'Offline Fast (FOSS)',
'Offline Slow (FOSS)',
'Online (FOSS) (La Plateforme)',
],
}; };
const Models: React.FC = () => { const Models: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModel, setSelectedModel] = useState(''); const [radioSelection, setRadioSelection] = useState('');
const radioSelection = localStorage.getItem('radioSelection')
useEffect(() => { useEffect(() => {
const handleStorageChange = () => { const handleStorageChange = () => {
setSelectedModel(localStorage.getItem('selectedModel') || ''); setRadioSelection(localStorage.getItem('radioSelection') || '');
}; };
handleStorageChange(); handleStorageChange();
@ -37,7 +48,7 @@ const Models: React.FC = () => {
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const newModel = event.target.value;
setSelectedModel(newModel); setRadioSelection(newModel);
localStorage.setItem('radioSelection', newModel); // Update localStorage directly localStorage.setItem('radioSelection', newModel); // Update localStorage directly
}; };
@ -46,55 +57,22 @@ const Models: React.FC = () => {
let models = []; let models = [];
switch (radioSelection) { switch (radioSelection) {
case 'Offline': case 'Offline':
models = [ models = modelDropdown.offlineModels; // Show only offline models
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS
break; break;
case 'Offline (FOSS)': case 'AI Online':
models = [ models = modelDropdown.onlineModels; // Show only online models
...modelDropdown.onlineFoss,
]; // Show only offline models with FOSS
break; break;
case 'Online': case 'FOSS':
models = [ models = modelDropdown.fossModels; // Show only FOSS 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; break;
default: default:
models = [ models = [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break; break;
} }
return Array.from(new Set(models)); // Remove duplicates using Set return Array.from(new Set(models)); // Remove duplicates using Set
})(); })();
const isOfflineModel = (model: string) => const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);
modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
return ( return (
<div className="model-background"> <div className="model-background">
@ -106,7 +84,7 @@ const Models: React.FC = () => {
{/* 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={selectedModel} onChange={handleModelChange}> <select id="model-select" value={radioSelection} onChange={handleModelChange}>
{filteredModels.map((model) => ( {filteredModels.map((model) => (
<option key={model} value={model}> <option key={model} value={model}>
{model} {model}
@ -115,19 +93,16 @@ const Models: React.FC = () => {
</select> </select>
</div> </div>
{/* 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( {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
(category) => ( <button key={category} className={`${category.toLowerCase()}-model model-box`}>
<button key={category} className={`${category.toLowerCase()}-model model-box`}> <div className="overlay">
<div className="overlay"> <h3>{category}</h3>
<h3>{category}</h3> {isOfflineModel(radioSelection) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} </div>
</div> </button>
</button> ))}
)
)}
</div> </div>
</div> </div>
</div> </div>

67
app/components/Settings.tsx
View file

@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme'; import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
import { getAllLocalStorageItems } from '../backend/GetLocalStorage';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@ -197,9 +196,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const handleRadioChange = (newValue: string) => { const handleRadioChange = (newValue: string) => {
setSelectedOption(newValue); // Update the state with the selected option setSelectedOption(newValue); // Update the state with the selected option
if (openSourceMode){
newValue += " (FOSS)"
}
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
}; };
@ -419,36 +415,34 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{/* 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">
{/* Offline */} <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')} // Allow selection only if not in open-source mode >
> Offline tools
Offline tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* Online */}
<div
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
onClick={() => handleRadioChange('Online')}
>
Online tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* None */}
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleRadioChange('None')}
>
None{openSourceMode ? ' (FOSS)' : ''}
</div>
</div> </div>
<br /> <div
<p> className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
After changing the preferred settings, please reload the website so it can update itself properly. onClick={() => !openSourceMode && handleRadioChange('AI Online')}
</p> >
Online tools
</div> </div>
<div
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 */} {/* Disable Chat History Checkbox */}
<div className="settings-option"> <div className="settings-option">
@ -820,8 +814,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
// Update radio selection based on the new openSourceMode value // Update radio selection based on the new openSourceMode value
if (newValue) { if (newValue) {
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
localStorage.setItem('radioSelection', 'FOSS'); // Update localStorage
} else { } else {
setSelectedOption('None'); // Or any other default value when disabling setSelectedOption('None'); // Or any other default value when disabling
localStorage.setItem('radioSelection', 'None'); // Update localStorage
} }
}} }}
/> />
@ -999,13 +995,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<h2>Settings for {accountName}</h2> <h2>Settings for {accountName}</h2>
{renderSettingsContent()} {renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button> <button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={() => {
applySettings;
getAllLocalStorageItems();
closeSettings(); // This is invoked when the button is clicked
}}>
Apply
</button>
</div> </div>
</div> </div>
</div> </div>

14
app/styles/Settings.css
View file

@ -109,20 +109,6 @@
transition: background 0.3s; transition: background 0.3s;
} }
/* Close button positioning */
.apply {
background: var(--close-button-color); /* Use variable for close button color */
color: white; /* Use white for text color */
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
position: absolute; /* Position the button absolutely */
top: 50px; /* Distance from the top */
right: 10px; /* Distance from the right */
transition: background 0.3s;
}
.close-popup:hover { .close-popup:hover {
background: darkred; /* Optional hover effect */ background: darkred; /* Optional hover effect */
} }