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

Compare commits

base: React-Group:e9f91f3f734a339ef3bfdbd621d6599786e3df73
Branches Tags
React-Group:main
..
compare: React-Group:f9a2b7bbc52a9b14c54140ff3fce870efd979128
Branches Tags
React-Group:main

No commits in common. "e9f91f3f734a339ef3bfdbd621d6599786e3df73" and "f9a2b7bbc52a9b14c54140ff3fce870efd979128" have entirely different histories.
e9f91f3f73 ... f9a2b7bbc5

2 changed files with 55 additions and 161 deletions
Show stats Expand all files Collapse all files

3
app/backend/InputOutputHandler.tsx
View file

@ -120,8 +120,7 @@ const InputOutputBackend: React.FC = () => {
Communicate in the language specified by the user (country code: ${preferredLanguage}), and only in this language. Communicate in the language specified by the user (country code: ${preferredLanguage}), and only in this language.
You are only able to change language if the user specifically states you must. You are only able to change language if the user specifically states you must.
Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it. Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.
These are the currently newest Weather infos for the region. Only for the case when the user asks about anything weather related, These are the currently newest Weather infos for the region. In case the user asks about anything weather related, you can use the following data to help the user: ${weatherData}. If there is nothing there say there is no data`
you can use the following data to help the user: ${weatherData}. If there is nothing there say there is no data`
: `You are a helpful assistant.`; : `You are a helpful assistant.`;
console.log(newSystemMessage) console.log(newSystemMessage)
setSystemMessage(newSystemMessage) setSystemMessage(newSystemMessage)

213
app/components/Models.tsx
View file

@ -1,8 +1,21 @@
"use client"; "use client";
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
// Define all models that should be available. // Define the types for ModelType and ModelListType
const modelList = { 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': { 'Offline Fast': {
model_type: 'local', model_type: 'local',
Math: 'qwen2-math:1.5b', Math: 'qwen2-math:1.5b',
@ -86,161 +99,47 @@ const modelList = {
Code: 'open-codestral-mamba', Code: 'open-codestral-mamba',
Language: 'open-mistral-nemo', Language: 'open-mistral-nemo',
Weather: '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 = [ // AI Functions list
'Code', const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const;
'Math', type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names
'Language',
'Weather'
]
const ModelSection: React.FC = () => { const ModelSection: React.FC = () => {
// Initialize state with value from localStorage or default to '' const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => "Offline Fast");
const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => "Code");
const [radioSelection, setRadioSelection] = useState<string | null>("") const [, setSelectedModel] = useState<string>("");
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [, setSelectedModelType] = useState<string>("");
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { setSelectedModelDropdown(localStorage.getItem("selectedModelDropdown")|| "Offline Fast");
const defaultValues = { setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || "Code");
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);
};
}
}, []); }, []);
// Update the model and type when the dropdown or function changes
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { const aiFunctionsActiveSelectedAIFunction = activeSelectedAIFunction as AIFunction
const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || ""; const newSelectedModel = modelList[selectedModelDropdown]?.[aiFunctionsActiveSelectedAIFunction] || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) { const newModelType = modelList[selectedModelDropdown]?.model_type || "";
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
} setSelectedModel(newSelectedModel);
} setSelectedModelType(newModelType);
}, [activeSelectedAIFunction]);
localStorage.setItem("model", newSelectedModel);
localStorage.setItem("type", newModelType);
}, [selectedModelDropdown, activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const newModel = event.target.value;
setSelectedModelDropdown(newModel); setSelectedModelDropdown(newModel);
if (typeof localStorage !== 'undefined') { localStorage.setItem('selectedModelDropdown', newModel);
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
modelClicked(model)
}
}; };
// Determine the filtered models based on current radioSelection const modelClicked = (functionName: AIFunction) => {
const filteredModels = (() => { setActiveSelectedAIFunction(functionName);
let models = []; localStorage.setItem('activeSelectedAIFunction', functionName);
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]])
}
}
return ( return (
<div className="model-background"> <div className="model-background">
@ -249,33 +148,29 @@ const ModelSection: React.FC = () => {
<h3>Different AI Models</h3> <h3>Different AI Models</h3>
</div> </div>
{/* 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={selectedModelDropdown} onChange={handleModelChange}> <select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
{filteredModels.map((model) => ( {Object.keys(modelList).map((model) => (
<option key={model} value={model}> <option key={model} value={model}>
{model} {model}
</option> </option>
))} ))}
</select> </select>
</div> </div>
{/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{selectedAIFunction.map( {aiFunctions.map((functionName) => (
(displayedCategory) => ( <button
<button key={functionName}
key={displayedCategory} className={`${functionName.toLowerCase()}-model model-box ${activeSelectedAIFunction === functionName ? 'selected' : ''}`}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} onClick={() => modelClicked(functionName)}
onClick={() => modelClicked(displayedCategory)} >
> <div className="overlay">
<div className="overlay"> <h3>{functionName}</h3>
<h3>{displayedCategory}</h3> </div>
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} </button>
</div> ))}
</button>
)
)}
</div> </div>
</div> </div>
</div> </div>