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

Merge pull request 'main' (#45) from React-Group/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/45
This commit is contained in:
YasinOnm08 2024-10-04 08:43:55 +02:00
commit c64a62a220
5 changed files with 302 additions and 277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

242
app/components/Models.tsx
View file

@ -4,139 +4,140 @@ import React, { useState, useEffect } from 'react';
// Define all models that should be available. // Define all models that should be available.
const modelList = { const modelList = {
'Offline Fast': { 'Offline Fast': {
'model_type': 'local', model_type: 'local',
'Math': 'qwen2-math:1.5b', Math: 'qwen2-math:1.5b',
'Code': 'starcoder2', Code: 'starcoder2',
'Language': 'llama3.2', Language: 'llama3.2',
'Character': 'dolphin-phi', Character: 'dolphin-phi',
'Finance': 'qwen2-math:1.5b', Finance: 'qwen2-math:1.5b',
'Weather': 'llama3.2', Weather: 'llama3.2',
'Time': 'llama3.2', Time: 'llama3.2',
'Image': 'llava-phi3' Image: 'llava-phi3'
}, },
'Offline Slow': { 'Offline Slow': {
'model_type': 'local', model_type: 'local',
'Math': 'wizard-math', Math: 'wizard-math',
'Code': 'starcoder2:7b', Code: 'starcoder2:7b',
'Language': 'llama3.1', Language: 'llama3.1',
'Character': 'dolphin-llama3', Character: 'dolphin-llama3',
'Finance': 'wizard-math', Finance: 'wizard-math',
'Weather': 'llama3.1', Weather: 'llama3.1',
'Time': 'llama3.1', Time: 'llama3.1',
'Image': 'llava' Image: 'llava'
}, },
'Offline Fast (FOSS)': { 'Offline Fast (FOSS)': {
'model_type': 'local', model_type: 'local',
'Math': 'qwen2-math:1.5b', Math: 'qwen2-math:1.5b',
'Code': 'qwen2.5-coder:1.5b', Code: 'qwen2.5-coder:1.5b',
'Language': 'phi3.5', Language: 'phi3.5',
'Character': 'dolphin-mistral', Character: 'dolphin-mistral',
'Finance': 'qwen2-math:1.5b', Finance: 'qwen2-math:1.5b',
'Weather': 'phi3.5', Weather: 'phi3.5',
'Time': 'phi3.5', Time: 'phi3.5',
'Image': 'llava' Image: 'llava'
}, },
'Offline Slow (FOSS)': { 'Offline Slow (FOSS)': {
'model_type': 'local', model_type: 'local',
'Math': 'mathstral', Math: 'mathstral',
'Code': 'qwen2.5-coder', Code: 'qwen2.5-coder',
'Language': 'qwen2.5', Language: 'qwen2.5',
'Character': 'dolphin-mistral', Character: 'dolphin-mistral',
'Finance': 'mathstral', Finance: 'mathstral',
'Weather': 'qwen2.5', Weather: 'qwen2.5',
'Time': 'qwen2.5', Time: 'qwen2.5',
'Image': 'llava' Image: 'llava'
}, },
'Online Cheap (OpenAI)': { 'Online Cheap (OpenAI)': {
'model_type': 'openai', model_type: 'openai',
'Math': 'gpt-4o-mini', Math: 'gpt-4o-mini',
'Code': 'gpt-4o-mini', Code: 'gpt-4o-mini',
'Language': 'gpt-4o-mini', Language: 'gpt-4o-mini',
'Character': 'gpt-4o-mini', Character: 'gpt-4o-mini',
'Finance': 'gpt-4o-mini', Finance: 'gpt-4o-mini',
'Weather': 'gpt-4o-mini', Weather: 'gpt-4o-mini',
'Time': 'gpt-4o-mini', Time: 'gpt-4o-mini',
'Image': 'gpt-4o-mini' Image: 'gpt-4o-mini'
}, },
'Online Expensive (OpenAI)': { 'Online Expensive (OpenAI)': {
'model_type': 'openai', model_type: 'openai',
'Math': 'gpt-4o', Math: 'gpt-4o',
'Code': 'gpt-4o', Code: 'gpt-4o',
'Language': 'gpt-4o', Language: 'gpt-4o',
'Character': 'gpt-4o', Character: 'gpt-4o',
'Finance': 'gpt-4o', Finance: 'gpt-4o',
'Weather': 'gpt-4o', Weather: 'gpt-4o',
'Time': 'gpt-4o', Time: 'gpt-4o',
'Image': 'gpt-4o' Image: 'gpt-4o'
}, },
'Online Cheap (Anthropic)': { 'Online Cheap (Anthropic)': {
'model_type': 'anthropic', model_type: 'anthropic',
'Math': 'claude-3-haiku', Math: 'claude-3-haiku',
'Code': 'claude-3-haiku', Code: 'claude-3-haiku',
'Language': 'claude-3-haiku', Language: 'claude-3-haiku',
'Character': 'claude-3-haiku', Character: 'claude-3-haiku',
'Finance': 'claude-3-haiku', Finance: 'claude-3-haiku',
'Weather': 'claude-3-haiku', Weather: 'claude-3-haiku',
'Time': 'claude-3-haiku', Time: 'claude-3-haiku',
'Image': 'claude-3-haiku' Image: 'claude-3-haiku'
}, },
'Online Expensive (Anthropic)': { 'Online Expensive (Anthropic)': {
'model_type': 'anthropic', model_type: 'anthropic',
'Math': 'claude-3-5-sonnet', Math: 'claude-3-5-sonnet',
'Code': 'claude-3-5-sonnet', Code: 'claude-3-5-sonnet',
'Language': 'claude-3-5-sonnet', Language: 'claude-3-5-sonnet',
'Character': 'claude-3-5-sonnet', Character: 'claude-3-5-sonnet',
'Finance': 'claude-3-5-sonnet', Finance: 'claude-3-5-sonnet',
'Weather': 'claude-3-5-sonnet', Weather: 'claude-3-5-sonnet',
'Time': 'claude-3-5-sonnet', Time: 'claude-3-5-sonnet',
'Image': 'claude-3-5-sonnet' Image: 'claude-3-5-sonnet'
}, },
'Online Cheap (Google)': { 'Online Cheap (Google)': {
'model_type': 'google', model_type: 'google',
'Math': 'gemini-1.5-flash-latest', Math: 'gemini-1.5-flash-latest',
'Code': 'gemini-1.5-flash-latest', Code: 'gemini-1.5-flash-latest',
'Language': 'gemini-1.5-flash-latest', Language: 'gemini-1.5-flash-latest',
'Character': 'gemini-1.5-flash-latest', Character: 'gemini-1.5-flash-latest',
'Finance': 'gemini-1.5-flash-latest', Finance: 'gemini-1.5-flash-latest',
'Weather': 'gemini-1.5-flash-latest', Weather: 'gemini-1.5-flash-latest',
'Time': 'gemini-1.5-flash-latest', Time: 'gemini-1.5-flash-latest',
'Image': 'gemini-1.5-flash-latest' Image: 'gemini-1.5-flash-latest'
}, },
'Online Expensive (Google)': { 'Online Expensive (Google)': {
'model_type': 'google', model_type: 'google',
'Math': 'gemini-1.5-pro-latest', Math: 'gemini-1.5-pro-latest',
'Code': 'gemini-1.5-pro-latest', Code: 'gemini-1.5-pro-latest',
'Language': 'gemini-1.5-pro-latest', Language: 'gemini-1.5-pro-latest',
'Character': 'gemini-1.5-pro-latest', Character: 'gemini-1.5-pro-latest',
'Finance': 'gemini-1.5-pro-latest', Finance: 'gemini-1.5-pro-latest',
'Weather': 'gemini-1.5-pro-latest', Weather: 'gemini-1.5-pro-latest',
'Time': 'gemini-1.5-pro-latest', Time: 'gemini-1.5-pro-latest',
'Image': 'gemini-1.5-pro-latest' Image: 'gemini-1.5-pro-latest'
}, },
'Online (La Plateforme)': { 'Online (La Plateforme)': {
'model_type': 'mistral', model_type: 'mistral',
'Math': 'open-mistral-nemo', Math: 'open-mistral-nemo',
'Code': 'codestral-latest', Code: 'codestral-latest',
'Language': 'mistral-small-latest', Language: 'mistral-small-latest',
'Character': 'mistral-large-latest', Character: 'mistral-large-latest',
'Finance': 'open-mistral-nemo', Finance: 'open-mistral-nemo',
'Weather': 'mistral-small-latest', Weather: 'mistral-small-latest',
'Time': 'mistral-small-latest', Time: 'mistral-small-latest',
'Image': 'pixtral-12b-2409' Image: 'pixtral-12b-2409'
}, },
'Online (FOSS) (La Plateforme)': { 'Online (FOSS) (La Plateforme)': {
'model_type': 'mistral', model_type: 'mistral',
'Math': 'open-mistral-nemo', Math: 'open-mistral-nemo',
'Code': 'open-codestral-mamba', Code: 'open-codestral-mamba',
'Language': 'open-mistral-nemo', Language: 'open-mistral-nemo',
'Character': 'open-mixtral-8x22b', Character: 'open-mixtral-8x22b',
'Finance': 'open-mixtral-8x22b', Finance: 'open-mixtral-8x22b',
'Weather': 'open-mistral-nemo', Weather: 'open-mistral-nemo',
'Time': 'open-mistral-nemo', Time: 'open-mistral-nemo',
'Image': 'pixtral-12b-2409' Image: 'pixtral-12b-2409'
} }
} }
// Define the available selectedAIFunction options // Define the available selectedAIFunction options
const modelDropdown = { const modelDropdown = {
offlineNonFoss: ['Offline Fast', 'Offline Slow'], offlineNonFoss: ['Offline Fast', 'Offline Slow'],
@ -172,6 +173,7 @@ const ModelSection: React.FC = () => {
const [radioSelection, setRadioSelection] = useState<string | null>("") const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>(""); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
useEffect(() => { useEffect(() => {
var temp = localStorage.getItem("activeSelectedAIFunction") || "" var temp = localStorage.getItem("activeSelectedAIFunction") || ""
@ -233,23 +235,23 @@ const ModelSection: React.FC = () => {
models = [ models = [
...modelDropdown.onlineNonFoss, ...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS ];
break; if (isOpenSourceMode == "true") {
case 'Offline (FOSS)':
models = [ models = [
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show only offline models with FOSS ];
} // Show only offline models without FOSS
break; break;
case 'Online': case 'Online':
models = [ models = [
...modelDropdown.offlineNonFoss, ...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
]; // Show only online models without FOSS ];
break; if (isOpenSourceMode == "true") {
case 'Online (FOSS)':
models = [ models = [
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
]; // Show only online models with FOSS ];
} // Show only online models without FOSS
break; break;
case 'None': case 'None':
models = [ models = [
@ -257,13 +259,13 @@ const ModelSection: React.FC = () => {
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss, ...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show all models if nothing matches ];
break; if (isOpenSourceMode == "true") {
case 'None (FOSS)':
models = [ models = [
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show all models if nothing matches ];
} // Show all models if nothing matches
break; break;
default: default:
models = [ models = [

2
app/components/settings/ButtonSettings.tsx
View file

@ -11,7 +11,7 @@ const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className
<div className="settings-option"> <div className="settings-option">
<button <button
onClick={onClick} // Call the onClick function when the button is clicked onClick={onClick} // Call the onClick function when the button is clicked
className={className} // Apply any additional classes className={className="export-button"} // Apply any additional classes
> >
{label} {/* Display the label on the button */} {label} {/* Display the label on the button */}
</button> </button>

61
app/components/settings/Settings.tsx
View file

@ -106,21 +106,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim()); const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim()); const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); // Per default a purple color gradient
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
// Theme selection // Theme selection
const [selectedTheme, setSelectedTheme] = useState<string>(''); const [selectedTheme, setSelectedTheme] = useState<string>('');
// API Keys // API Keys
const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim()); const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim()); const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim()); const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean')); const [google, setGoogle] = useState(localStorage.getItem('google') || "");
const [myBoolean, setMyBoolean] = useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
const settings = { const settings = {
userPreferences: { userPreferences: {
@ -216,7 +218,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{ name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" }, { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
{ name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" }, { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" }, { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
]; ];
const timeZoneOptions = [ const timeZoneOptions = [
@ -330,15 +332,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
useEffect(() => { useEffect(() => {
const savedOption = localStorage.getItem('radioSelection'); const savedOption = localStorage.getItem('radioSelection');
if (savedOption) { if (savedOption) {
savedOption.replace(" (FOSS)", "");
setSelectedOption(savedOption); // Set saved selection setSelectedOption(savedOption); // Set saved selection
} }
}, []); }, []);
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
}; };
@ -574,24 +574,21 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={newName} value={newName}
type='text' type='text'
setValue={setNewName} setValue={setNewName}
placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
/> />
<TextSettings <TextSettings
label="New Email" label="New Email"
value={newEmail} value={newEmail}
setValue={setNewEmail} setValue={setNewEmail}
type="email" // Input type is email type="email" // Input type is email
placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
/> />
<TextSettings <TextSettings
label="New Password" label="New Password"
value={newPassword} value={newPassword}
setValue={setNewPassword} setValue={setNewPassword}
type="password" // Input type is password type="password"
/> placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default
<TextSettings
label="Current Password"
value={currentPassword}
setValue={setCurrentPassword}
type="password" // Input type is password
/> />
<ButtonSetting <ButtonSetting
label="Log Out" // Button label label="Log Out" // Button label
@ -619,25 +616,49 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={mistral} // State variable for the input value={mistral} // State variable for the input
setValue={setMistral} // State updater function setValue={setMistral} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('mistral') || "Enter the API key"}
/> />
<div className="settings-option">
<a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
<button className="export-button">Get your API key here</button>
</a>
</div>
<TextSettings <TextSettings
label="OpenAI" // Label for the input label="OpenAI" // Label for the input
value={openai} // State variable for the input value={openai} // State variable for the input
setValue={setOpenai} // State updater function setValue={setOpenai} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('openai') || "Enter the API key"}
/> />
<div className="settings-option">
<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
<button className="export-button">Get your API key here</button>
</a>
</div>
<TextSettings <TextSettings
label="Anthropic" // Label for the input label="Anthropic" // Label for the input
value={anthropic} // State variable for the input value={anthropic} // State variable for the input
setValue={setAnthropic} // State updater function setValue={setAnthropic} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
/> />
<div className="settings-option">
<a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
<button className="export-button">Get your API key here</button>
</a>
</div>
<TextSettings <TextSettings
label="Google" // Label for the input label="Google" // Label for the input
value={google} // State variable for the input value={google} // State variable for the input
setValue={setGoogle} // State updater function setValue={setGoogle} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('google') || "Enter the API key"}
/> />
<div className="settings-option">
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
<button className="export-button">Get your API key here</button>
</a>
</div>
</div> </div>
); );

4
app/components/settings/TextSettings.tsx
View file

@ -5,9 +5,10 @@ interface TextSettingProps {
value: string; // The current text value value: string; // The current text value
setValue: (newText: string) => void; // The method to update the state setValue: (newText: string) => void; // The method to update the state
type: 'text' | 'email' | 'password'; // The type of input field type: 'text' | 'email' | 'password'; // The type of input field
placeholder?: string; // Optional placeholder text
} }
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => { const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type, placeholder }) => {
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newText = e.target.value; // Get the new value from the input const newText = e.target.value; // Get the new value from the input
setValue(newText); // Update the state in the parent component setValue(newText); // Update the state in the parent component
@ -20,6 +21,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type
type={type} // Use the type prop for the input type={type} // Use the type prop for the input
value={value} // Set the current value value={value} // Set the current value
onChange={handleTextChange} // Handle input changes onChange={handleTextChange} // Handle input changes
placeholder={placeholder} // Set the placeholder text
/> />
</div> </div>
); );

4
app/styles/models.css
View file

@ -61,8 +61,8 @@
} }
.model-box.selected { .model-box.selected {
box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */ box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
border-color: yellow; border-color: var(--apply-button-hover-color);
} }
.overlay { .overlay {