From 491229a1b09fb3f3878e20083bdf17609ab24ea7 Mon Sep 17 00:00:00 2001 From: Patrick_Pluto Date: Thu, 10 Oct 2024 08:34:27 +0200 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=AB=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/settings/Settings.tsx | 9 +++++++- py/ai.py | 34 +++++++++++----------------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index d0f769b..87b05b6 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -12,9 +12,11 @@ import PrivacySettings from './PrivacySettings'; import FontSizeSetting from './FontSize'; import OpenSourceModeToggle from './OpenSourceToggle'; import { + changeHistory, changeSettings, createAccount, deleteAccount, + getHistory, } from '../../backend/database'; import ThemeDropdown from './DropDownTheme'; @@ -372,7 +374,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( localStorage.setItem("currentEmail", useEmail) alert('Account successfully changed!') window.location.reload() + } else { + alert("failed to send settings") } + } else { + alert("failed to create account") } } }; @@ -409,7 +415,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( checked={myBoolean} setChecked={setMyBoolean} /> - void; accountName: string }> = ( onClick={handleLogout} // Function to call on click className="update-credentials-button" // Custom styling class /> +

WARNING: Will delete your chat history.

Date: Thu, 10 Oct 2024 09:18:12 +0200 Subject: [PATCH 2/4] Model refactor 1 --- app/components/Models.tsx | 211 +++++++++----------------------------- 1 file changed, 50 insertions(+), 161 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 469d9cb..3c4fa66 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -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("") - const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); - const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); - const [isOpenSourceMode, setIsOpenSourceMode] = useState("false") + const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => localStorage.getItem("selectedModelDropdown") || "Offline Fast"); + const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => (localStorage.getItem("activeSelectedAIFunction") as AIFunction) || "Code"); + const [selectedModel, setSelectedModel] = useState(""); + const [selectedModelType, setSelectedModelType] = useState(""); + // 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) => { 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 (
@@ -249,33 +142,29 @@ const ModelSection: React.FC = () => {

Different AI Models

- {/* Model Selection Dropdown */}
- {/* Model Grid with Cards */} +
- {selectedAIFunction.map( - (displayedCategory) => ( - - ) - )} + {aiFunctions.map((functionName) => ( + + ))}
From 4342e9a269b17091263c79822e4888f38df69ad5 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 10 Oct 2024 09:29:41 +0200 Subject: [PATCH 3/4] CSS hot fixes --- app/styles/models.css | 4 ++-- app/styles/responsive.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/styles/models.css b/app/styles/models.css index e657d6c..1ccd862 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -49,8 +49,8 @@ border-radius: 5%; overflow: hidden; position: relative; - height: 18vh; - width: 18vh; + height: 8vw; + width: 8vw; margin: auto; /* Center each model box in the grid cell */ } .model-box.selected { diff --git a/app/styles/responsive.css b/app/styles/responsive.css index dd0d3b0..4a9c70f 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -57,8 +57,8 @@ } /* Model box styles */ .model-box { - max-width: none; /* Remove max-width */ - margin: 0 auto; /* Center each model-box */ + width: 50vw; + height: 50vw; } /* Input styles */ .input { From 8ec93d4f1c940b45cdca25c33acf14a3d9d5581f Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Thu, 10 Oct 2024 09:58:47 +0200 Subject: [PATCH 4/4] production ready changes --- app/components/Models.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 3c4fa66..ce8dfbe 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -107,14 +107,20 @@ const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const; type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names const ModelSection: React.FC = () => { - const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => localStorage.getItem("selectedModelDropdown") || "Offline Fast"); - const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => (localStorage.getItem("activeSelectedAIFunction") as AIFunction) || "Code"); - const [selectedModel, setSelectedModel] = useState(""); - const [selectedModelType, setSelectedModelType] = useState(""); + const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => "Offline Fast"); + const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => "Code"); + const [, setSelectedModel] = useState(""); + const [, setSelectedModelType] = useState(""); + + useEffect(() => { + setSelectedModelDropdown(localStorage.getItem("selectedModelDropdown")|| "Offline Fast"); + setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || "Code"); + }, []); // Update the model and type when the dropdown or function changes useEffect(() => { - const newSelectedModel = modelList[selectedModelDropdown]?.[activeSelectedAIFunction] || ""; + const aiFunctionsActiveSelectedAIFunction = activeSelectedAIFunction as AIFunction + const newSelectedModel = modelList[selectedModelDropdown]?.[aiFunctionsActiveSelectedAIFunction] || ""; const newModelType = modelList[selectedModelDropdown]?.model_type || ""; setSelectedModel(newSelectedModel);