Model refactor 1

app/components/Models.tsx

@@ -1,8 +1,21 @@
 "use client";
 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': {
     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 = [
+// 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 = () => {
-  // Initialize state with value from localStorage or default to ''
+  const [selectedModelDropdown, setSelectedModelDropdown] = useState<string>(() => localStorage.getItem("selectedModelDropdown") || "Offline Fast");
-  const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
+  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState<AIFunction>(() => (localStorage.getItem("activeSelectedAIFunction") as AIFunction) || "Code");
-  const [radioSelection, setRadioSelection] = useState<string | null>("")
+  const [selectedModel, setSelectedModel] = useState<string>("");
-  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
+  const [selectedModelType, setSelectedModelType] = useState<string>("");
-  const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
-  const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
 
+  // Update the model and type when the dropdown or function changes
   useEffect(() => {
-    if (typeof localStorage !== 'undefined') {
+    const newSelectedModel = modelList[selectedModelDropdown]?.[activeSelectedAIFunction] || "";
-      const defaultValues = {
+    const newModelType = modelList[selectedModelDropdown]?.model_type || "";
-        selectedModelDropdown: 'Offline Fast',
-        activeSelectedAIFunction: 'Code',
-        model: 'starcoder2',
-        radioSelection: 'None',
-        type: 'local',
-      };
 
-      Object.entries(defaultValues).forEach(([key, value]) => {
+    setSelectedModel(newSelectedModel);
-        if (!localStorage.getItem(key)) {
+    setSelectedModelType(newModelType);
-          localStorage.setItem(key, value);
-        }
-      });
 
-      setIsOpenSourceMode(localStorage.getItem("openSourceMode"));
+    localStorage.setItem("model", newSelectedModel);
-      setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || '');
+    localStorage.setItem("type", newModelType);
-      setRadioSelection(localStorage.getItem("radioSelection") || '');
+  }, [selectedModelDropdown, activeSelectedAIFunction]);
-      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);
-      };
-    }
-  }, []);
-  
-
-  useEffect(() => {
-    if (typeof localStorage !== 'undefined') {
-      const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
-      if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
-        setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
-      }
-    }
-  }, [activeSelectedAIFunction]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
     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 (
     <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(
+          {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>