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

Fixed | Change Main Category

Browse source
This commit is contained in:
sageTheDM 2024-10-03 14:03:28 +02:00
parent b8fdf5b3d8
commit f8f72ba447
2 changed files with 210 additions and 283 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

399
app/components/Models.tsx
View file

@ -1,288 +1,214 @@
"use client"; import React, { useEffect, useState } from 'react';
import React, { useState, useEffect } from 'react';
// Define all models that should be available. // Sample modelList definition; replace this with your actual modelList
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 keys of modelList
// Define the available selectedAIFunction options type ModelKeys = keyof typeof modelList;
const modelDropdown = {
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineNonFoss: [
'Online Cheap (OpenAI)',
'Online Expensive (OpenAI)',
'Online Cheap (Anthropic)',
'Online Expensive (Anthropic)',
'Online Cheap (Google)',
'Online Expensive (Google)',
'Online (La Plateforme)'
],
onlineFoss: ['Online (FOSS) (La Plateforme)'],
};
const selectedAIFunction = [
'Code',
'Math',
'Language',
'Character',
'Finance',
'Weather',
'Time',
'Image',
'Custom1',
'Custom2'
]
const ModelSection: React.FC = () => { const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
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>("");
useEffect(() => { useEffect(() => {
var temp = localStorage.getItem("activeSelectedAIFunction") || "" // Load initial values from localStorage
setActiveSelectedAIFunction(temp) const temp = localStorage.getItem("activeSelectedAIFunction") || "";
setActiveSelectedAIFunction(temp);
// Check if localStorage keys exist, else set defaults
if (!localStorage.getItem('selectedModelDropdown')) { if (!localStorage.getItem('selectedModelDropdown')) {
localStorage.setItem("selectedModelDropdown", "Offline Fast" ) localStorage.setItem("selectedModelDropdown", "Offline Fast");
} }
if (!localStorage.getItem("activeSelectedAIFunction")) { // Set the dropdown and selected AI function from localStorage
setActiveSelectedAIFunction('Code') const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
localStorage.setItem('activeSelectedAIFunction' ,'Code') const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
}
setSelectedModelDropdown(storedSelectedModel);
setCurrentSelectedAIFunction(storedActiveFunction);
if (!localStorage.getItem("model")) { if (!localStorage.getItem("model")) {
localStorage.setItem("model" ,'starcoder2') localStorage.setItem("model", 'starcoder2');
} }
if (!localStorage.getItem("radioSelection")) { if (!localStorage.getItem("radioSelection")) {
localStorage.setItem("radioSelection" ,'None') localStorage.setItem("radioSelection", 'None');
} }
const handleStorageChange = () => { // Load radio selection from localStorage
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange);
setRadioSelection(localStorage.getItem('radioSelection') || ''); setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); }, []);
// Cleanup listener on component unmount
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}, []); // Dependency array can remain empty if you only want this to run on mount
useEffect(() => { const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
}
}, [activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const selectedModel = event.target.value as ModelKeys;
setSelectedModelDropdown(newModel); setSelectedModelDropdown(selectedModel);
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly localStorage.setItem('selectedModelDropdown', selectedModel);
// Update model and type in local storage
const modelType = modelList[selectedModel].model_type;
const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
localStorage.setItem('model', model);
localStorage.setItem('type', modelType);
}; };
// Determine the filtered models based on current radioSelection const isOfflineModel = (model: string) => {
const filteredModels = (() => { return modelList[model as ModelKeys].model_type === 'local';
let models = []; };
switch (radioSelection) {
case 'Offline':
models = [
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS
break;
case 'Offline (FOSS)':
models = [
...modelDropdown.onlineFoss,
]; // Show only offline models with FOSS
break;
case 'Online':
models = [
...modelDropdown.offlineNonFoss,
...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.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...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.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
]; // Show all models if nothing matches
break;
}
return Array.from(new Set(models)); // Remove duplicates using Set
})();
const isOfflineModel = (model: string) =>
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => { const modelClicked = (model: string) => {
localStorage.setItem('activeSelectedAIFunction' , model) const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
setActiveSelectedAIFunction(model)
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList; if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]]) const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]]) const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
localStorage.setItem('activeSelectedAIFunction', model);
setActiveSelectedAIFunction(model);
localStorage.setItem('model', newModel);
localStorage.setItem('type', modelType);
setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
} else {
console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
} }
};
return ( return (
<div className="model-background"> <div className="model-background">
@ -305,8 +231,9 @@ const ModelSection: React.FC = () => {
{/* Model Grid with Cards */} {/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{selectedAIFunction.map( {Object.keys(modelList[selectedModelDropdown])
(displayedCategory) => ( .filter((key) => key !== 'model_type') // Exclude model_type from display
.map((displayedCategory) => (
<button <button
key={displayedCategory} key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
@ -317,8 +244,8 @@ const ModelSection: React.FC = () => {
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
) ))
)} }
</div> </div>
</div> </div>
</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 {