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

main #133

Merged
Patrick_Pluto merged 5 commits from sageTheDm/interstellar_ai:main into main 2024-10-10 10:23:05 +02:00
Conversation 0 Commits 5 Files changed 3 +50 -161
1 changed files with 50 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d1aa5015d8 - Show all commits

211
app/components/Models.tsx
View file

@ -1,8 +1,21 @@
"use client";
import React, { useState, useEffect } from 'react';
// Define all models that should be available.
const modelList = {
// Define the types for ModelType and ModelListType
type ModelType = {
model_type: string;
Math: string;
Code: string;
Language: string;
Weather: string;
};
type ModelListType = {
[key: string]: ModelType;
};
// Define the AI models list
const modelList: ModelListType = {
'Offline Fast': {
model_type: 'local',
Math: 'qwen2-math:1.5b',
@ -86,161 +99,41 @@ const modelList = {
Code: 'open-codestral-mamba',
Language: 'open-mistral-nemo',
Weather: 'open-mistral-nemo',
}
}
// Define the available selectedAIFunction options
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',
'Weather'
]
// AI Functions list
const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const;
type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names
const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
const [selectedModelDropdown, setSelectedModelDropdown] = useState<string>(() => localStorage.getItem("selectedModelDropdown") || "Offline Fast");
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState<AIFunction>(() => (localStorage.getItem("activeSelectedAIFunction") as AIFunction) || "Code");
const [selectedModel, setSelectedModel] = useState<string>("");
const [selectedModelType, setSelectedModelType] = useState<string>("");
// Update the model and type when the dropdown or function changes
useEffect(() => {
if (typeof localStorage !== 'undefined') {
const defaultValues = {
selectedModelDropdown: 'Offline Fast',
activeSelectedAIFunction: 'Code',
model: 'starcoder2',
radioSelection: 'None',
type: 'local',
};
Object.entries(defaultValues).forEach(([key, value]) => {
if (!localStorage.getItem(key)) {
localStorage.setItem(key, value);
}
});
setIsOpenSourceMode(localStorage.getItem("openSourceMode"));
setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || '');
setRadioSelection(localStorage.getItem("radioSelection") || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
const handleStorageChange = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange);
// Cleanup listener on component unmount
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}
}, []);
const newSelectedModel = modelList[selectedModelDropdown]?.[activeSelectedAIFunction] || "";
const newModelType = modelList[selectedModelDropdown]?.model_type || "";
useEffect(() => {
if (typeof localStorage !== 'undefined') {
const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
}
}
}, [activeSelectedAIFunction]);
setSelectedModel(newSelectedModel);
setSelectedModelType(newModelType);
localStorage.setItem("model", newSelectedModel);
localStorage.setItem("type", newModelType);
}, [selectedModelDropdown, activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value;
setSelectedModelDropdown(newModel);
if (typeof localStorage !== 'undefined') {
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
modelClicked(model)
}
localStorage.setItem('selectedModelDropdown', newModel);
};
// Determine the filtered models based on current radioSelection
const filteredModels = (() => {
let models = [];
switch (radioSelection) {
case 'Offline':
models = [
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.onlineFoss,
];
} // Show only offline models without FOSS
break;
case 'Online':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
];
if (isOpenSourceMode == "true") {
models = [
...modelDropdown.offlineFoss,
];
} // Show only online models without FOSS
break;
case 'None':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
];
if (isOpenSourceMode == "true") {
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) => {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('activeSelectedAIFunction', model)
setActiveSelectedAIFunction(model)
const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast'
const selectedAIFunction = modelDropdown as keyof typeof modelList;
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
}
}
const modelClicked = (functionName: AIFunction) => {
setActiveSelectedAIFunction(functionName);
localStorage.setItem('activeSelectedAIFunction', functionName);
};
return (
<div className="model-background">
@ -249,33 +142,29 @@ const ModelSection: React.FC = () => {
<h3>Different AI Models</h3>
</div>
{/* Model Selection Dropdown */}
<div className="model-dropdown">
<label htmlFor="model-select">Select AI Model:</label>
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
{filteredModels.map((model) => (
{Object.keys(modelList).map((model) => (
<option key={model} value={model}>
{model}
</option>
))}
</select>
</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>
)
)}
{aiFunctions.map((functionName) => (
<button
key={functionName}
className={`${functionName.toLowerCase()}-model model-box ${activeSelectedAIFunction === functionName ? 'selected' : ''}`}
onClick={() => modelClicked(functionName)}
>
<div className="overlay">
<h3>{functionName}</h3>
</div>
</button>
))}
</div>
</div>
</div>