From f7dc957c3ac2902fa17b6427465d017562f669e2 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Wed, 2 Oct 2024 08:24:01 +0200 Subject: [PATCH 1/4] Minor model changes --- app/components/Models.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index dee935e..74f096e 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -174,9 +174,18 @@ const Models: React.FC = () => { const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory")); useEffect(() => { - // Retrieve initial values from localStorage - setRadioSelection(localStorage.getItem('radioSelection') || ''); - setSelectedModel(localStorage.getItem('selectedModel') || ''); + if (!localStorage.getItem('selectedModel')) { + localStorage.setItem("selectedModel", "Offline Fast" ) + } + + if (!localStorage.getItem("activeCategory")) { + setActiveCategory('Code') + localStorage.setItem('activeCategory' ,'Code') + } + + if (!localStorage.getItem("model")) { + localStorage.setItem("model" ,'starcoder2') + } const handleStorageChange = () => { setSelectedModel(localStorage.getItem('selectedModel') || ''); @@ -185,6 +194,8 @@ const Models: React.FC = () => { // Update immediately when localStorage changes window.addEventListener('storage', handleStorageChange); + setRadioSelection(localStorage.getItem('radioSelection') || ''); + setSelectedModel(localStorage.getItem('selectedModel') || ''); // Cleanup listener on component unmount return () => { window.removeEventListener('storage', handleStorageChange); From e602c885e526cf4f8aa7a4e46d1a7b786536d767 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Wed, 2 Oct 2024 09:04:24 +0200 Subject: [PATCH 2/4] Model changes --- app/components/Models.tsx | 80 +++---- app/components/settings/Settings.tsx | 6 +- app/components/settings/theme.ts | 334 ++++++++++++++------------- 3 files changed, 222 insertions(+), 198 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 74f096e..6ca8aeb 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -137,11 +137,11 @@ const modelList = { } } -// Define the available category options +// Define the available selectedAIFunction options const modelDropdown = { - offlineWithoutFoss: ['Offline Fast', 'Offline Slow'], + offlineNonFoss: ['Offline Fast', 'Offline Slow'], offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'], - onlineWithoutFoss: [ + onlineNonFoss: [ 'Online Cheap (OpenAI)', 'Online Expensive (OpenAI)', 'Online Cheap (Anthropic)', @@ -153,7 +153,7 @@ const modelDropdown = { onlineFoss: ['Online (FOSS) (La Plateforme)'], }; -const Category = [ +const selectedAIFunction = [ 'Code', 'Math', 'Language', @@ -166,21 +166,23 @@ const Category = [ 'Custom2' ] -const Models: React.FC = () => { +const ModelSection: React.FC = () => { // Initialize state with value from localStorage or default to '' - const [selectedModel, setSelectedModel] = useState(''); + const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); const [radioSelection, setRadioSelection] = useState("") - const [activeCategory, setActiveCategory] = useState(''); - const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory")); - + const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); + const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); + useEffect(() => { - if (!localStorage.getItem('selectedModel')) { - localStorage.setItem("selectedModel", "Offline Fast" ) + var temp = localStorage.getItem("activeSelectedAIFunction") || "" + setActiveSelectedAIFunction(temp) + if (!localStorage.getItem('selectedModelDropdown')) { + localStorage.setItem("selectedModelDropdown", "Offline Fast" ) } - if (!localStorage.getItem("activeCategory")) { - setActiveCategory('Code') - localStorage.setItem('activeCategory' ,'Code') + if (!localStorage.getItem("activeSelectedAIFunction")) { + setActiveSelectedAIFunction('Code') + localStorage.setItem('activeSelectedAIFunction' ,'Code') } if (!localStorage.getItem("model")) { @@ -188,14 +190,14 @@ const Models: React.FC = () => { } const handleStorageChange = () => { - setSelectedModel(localStorage.getItem('selectedModel') || ''); + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); }; // Update immediately when localStorage changes window.addEventListener('storage', handleStorageChange); setRadioSelection(localStorage.getItem('radioSelection') || ''); - setSelectedModel(localStorage.getItem('selectedModel') || ''); + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); // Cleanup listener on component unmount return () => { window.removeEventListener('storage', handleStorageChange); @@ -203,16 +205,16 @@ const Models: React.FC = () => { }, []); // Dependency array can remain empty if you only want this to run on mount useEffect(() => { - const storedCategory = localStorage.getItem("activeCategory"); - if (storedCategory !== currentCategory) { - setCurrentCategory(storedCategory); + var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || ""; + if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) { + setCurrentSelectedAIFunction(storedActiveSelectedAIFunction); } - }, [activeCategory]); + }, [activeSelectedAIFunction]); const handleModelChange = (event: React.ChangeEvent) => { const newModel = event.target.value; - setSelectedModel(newModel); - localStorage.setItem('selectedModel', newModel); // Update localStorage directly + setSelectedModelDropdown(newModel); + localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly }; // Determine the filtered models based on current radioSelection @@ -221,7 +223,7 @@ const Models: React.FC = () => { switch (radioSelection) { case 'Offline': models = [ - ...modelDropdown.onlineWithoutFoss, + ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, ]; // Show only offline models without FOSS break; @@ -232,7 +234,7 @@ const Models: React.FC = () => { break; case 'Online': models = [ - ...modelDropdown.offlineWithoutFoss, + ...modelDropdown.offlineNonFoss, ...modelDropdown.offlineFoss, ]; // Show only online models without FOSS break; @@ -243,9 +245,9 @@ const Models: React.FC = () => { break; case 'None': models = [ - ...modelDropdown.offlineWithoutFoss, + ...modelDropdown.offlineNonFoss, ...modelDropdown.offlineFoss, - ...modelDropdown.onlineWithoutFoss, + ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, ]; // Show all models if nothing matches break; @@ -257,9 +259,9 @@ const Models: React.FC = () => { break; default: models = [ - ...modelDropdown.offlineWithoutFoss, + ...modelDropdown.offlineNonFoss, ...modelDropdown.offlineFoss, - ...modelDropdown.onlineWithoutFoss, + ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, ]; // Show all models if nothing matches break; @@ -268,14 +270,14 @@ const Models: React.FC = () => { })(); const isOfflineModel = (model: string) => - modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model); + modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model); const modelClicked = (model: string) => { - localStorage.setItem('activeCategory' , model) - setActiveCategory(model) - const category = selectedModel as keyof typeof modelList; - localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]]) - localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]]) + localStorage.setItem('activeSelectedAIFunction' , model) + setActiveSelectedAIFunction(model) + const selectedAIFunction = selectedModelDropdown 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 ( @@ -288,7 +290,7 @@ const Models: React.FC = () => { {/* Model Selection Dropdown */}
- {filteredModels.map((model) => (