forked from React-Group/interstellar_ai
Fixed | Change Main Category
This commit is contained in:
parent
b8fdf5b3d8
commit
f8f72ba447
2 changed files with 210 additions and 283 deletions
|
|
@ -1,328 +1,255 @@
|
||||||
"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
|
||||||
|
type ModelKeys = keyof typeof modelList;
|
||||||
|
|
||||||
// Define the available selectedAIFunction options
|
const ModelSection: React.FC = () => {
|
||||||
const modelDropdown = {
|
// Initialize state with value from localStorage or default to ''
|
||||||
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
|
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
|
||||||
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
|
const [radioSelection, setRadioSelection] = useState<string | null>("");
|
||||||
onlineNonFoss: [
|
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||||
'Online Cheap (OpenAI)',
|
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||||
'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 = [
|
useEffect(() => {
|
||||||
'Code',
|
// Load initial values from localStorage
|
||||||
'Math',
|
const temp = localStorage.getItem("activeSelectedAIFunction") || "";
|
||||||
'Language',
|
setActiveSelectedAIFunction(temp);
|
||||||
'Character',
|
|
||||||
'Finance',
|
|
||||||
'Weather',
|
|
||||||
'Time',
|
|
||||||
'Image',
|
|
||||||
'Custom1',
|
|
||||||
'Custom2'
|
|
||||||
]
|
|
||||||
|
|
||||||
const ModelSection: React.FC = () => {
|
// Check if localStorage keys exist, else set defaults
|
||||||
// Initialize state with value from localStorage or default to ''
|
if (!localStorage.getItem('selectedModelDropdown')) {
|
||||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
|
localStorage.setItem("selectedModelDropdown", "Offline Fast");
|
||||||
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
}
|
||||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
|
||||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
|
||||||
setActiveSelectedAIFunction(temp)
|
|
||||||
if (!localStorage.getItem('selectedModelDropdown')) {
|
|
||||||
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';
|
||||||
}
|
|
||||||
|
|
||||||
if (!localStorage.getItem("model")) {
|
setSelectedModelDropdown(storedSelectedModel);
|
||||||
localStorage.setItem("model" ,'starcoder2')
|
setCurrentSelectedAIFunction(storedActiveFunction);
|
||||||
}
|
|
||||||
|
|
||||||
if (!localStorage.getItem("radioSelection")) {
|
if (!localStorage.getItem("model")) {
|
||||||
localStorage.setItem("radioSelection" ,'None')
|
localStorage.setItem("model", 'starcoder2');
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleStorageChange = () => {
|
if (!localStorage.getItem("radioSelection")) {
|
||||||
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
|
localStorage.setItem("radioSelection", 'None');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load radio selection from localStorage
|
||||||
|
setRadioSelection(localStorage.getItem('radioSelection') || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
|
||||||
|
|
||||||
|
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
const selectedModel = event.target.value as ModelKeys;
|
||||||
|
setSelectedModelDropdown(selectedModel);
|
||||||
|
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);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update immediately when localStorage changes
|
const isOfflineModel = (model: string) => {
|
||||||
window.addEventListener('storage', handleStorageChange);
|
return modelList[model as ModelKeys].model_type === 'local';
|
||||||
|
|
||||||
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 modelClicked = (model: string) => {
|
||||||
var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
|
const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
|
||||||
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
|
|
||||||
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
|
|
||||||
}
|
|
||||||
}, [activeSelectedAIFunction]);
|
|
||||||
|
|
||||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
|
||||||
const newModel = event.target.value;
|
const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||||
setSelectedModelDropdown(newModel);
|
const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||||
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
|
|
||||||
};
|
|
||||||
|
|
||||||
// Determine the filtered models based on current radioSelection
|
localStorage.setItem('activeSelectedAIFunction', model);
|
||||||
const filteredModels = (() => {
|
setActiveSelectedAIFunction(model);
|
||||||
let models = [];
|
localStorage.setItem('model', newModel);
|
||||||
switch (radioSelection) {
|
localStorage.setItem('type', modelType);
|
||||||
case 'Offline':
|
setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
|
||||||
models = [
|
} else {
|
||||||
...modelDropdown.onlineNonFoss,
|
console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
|
||||||
...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) =>
|
return (
|
||||||
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
|
<div className="model-background">
|
||||||
|
<div className="models">
|
||||||
|
<div className="title">
|
||||||
|
<h3>Different AI Models</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
const modelClicked = (model: string) => {
|
{/* Model Selection Dropdown */}
|
||||||
localStorage.setItem('activeSelectedAIFunction' , model)
|
<div className="model-dropdown">
|
||||||
setActiveSelectedAIFunction(model)
|
<label htmlFor="model-select">Select AI Model:</label>
|
||||||
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
|
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
||||||
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
|
{filteredModels.map((model) => (
|
||||||
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
|
<option key={model} value={model}>
|
||||||
}
|
{model}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
return (
|
{/* Model Grid with Cards */}
|
||||||
<div className="model-background">
|
<div className="grid">
|
||||||
<div className="models">
|
{Object.keys(modelList[selectedModelDropdown])
|
||||||
<div className="title">
|
.filter((key) => key !== 'model_type') // Exclude model_type from display
|
||||||
<h3>Different AI Models</h3>
|
.map((displayedCategory) => (
|
||||||
</div>
|
<button
|
||||||
|
key={displayedCategory}
|
||||||
{/* Model Selection Dropdown */}
|
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
||||||
<div className="model-dropdown">
|
onClick={() => modelClicked(displayedCategory)}
|
||||||
<label htmlFor="model-select">Select AI Model:</label>
|
>
|
||||||
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
<div className="overlay">
|
||||||
{filteredModels.map((model) => (
|
<h3>{displayedCategory}</h3>
|
||||||
<option key={model} value={model}>
|
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
{model}
|
</div>
|
||||||
</option>
|
</button>
|
||||||
))}
|
))
|
||||||
</select>
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Model Grid with Cards */}
|
|
||||||
<div className="grid">
|
|
||||||
{selectedAIFunction.map(
|
|
||||||
(displayedCategory) => (
|
|
||||||
<button
|
|
||||||
key={displayedCategory}
|
|
||||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
|
||||||
onClick={() => modelClicked(displayedCategory)}
|
|
||||||
>
|
|
||||||
<div className="overlay">
|
|
||||||
<h3>{displayedCategory}</h3>
|
|
||||||
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
};
|
||||||
};
|
|
||||||
|
|
||||||
export default ModelSection;
|
export default ModelSection;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue