Merge pull request 'main' (#60) from React-Group/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/60

app/backend/InputOutputHandler.tsx

@@ -120,7 +120,8 @@ const InputOutputBackend: React.FC = () => {
       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. 
       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. 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`
+      These are the currently newest Weather infos for the region. Only for the case when 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 are a helpful assistant.`;
     console.log(newSystemMessage)
     setSystemMessage(newSystemMessage)

app/components/Models.tsx

@@ -1,21 +1,8 @@
 "use client";
 import React, { useState, useEffect } from 'react';
 
-// 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 = {
+// Define all models that should be available.
+const modelList = {
   'Offline Fast': {
     model_type: 'local',
     Math: 'qwen2-math:1.5b',
@@ -99,47 +86,161 @@ const modelList: ModelListType = {
     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)'],
 };
 
-// AI Functions list
-const aiFunctions = ['Math', 'Code', 'Language', 'Weather'] as const;
-type AIFunction = typeof aiFunctions[number]; // Restrict to these exact function names
+const selectedAIFunction = [
+  'Code',
+  'Math',
+  'Language',
+  'Weather'
+]
 
 const ModelSection: React.FC = () => {
-  const [selectedModelDropdown, setSelectedModelDropdown] = useState(() => "Offline Fast");
-  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(() => "Code");
-  const [, setSelectedModel] = useState<string>("");
-  const [, setSelectedModelType] = useState<string>("");
+  // 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")
 
   useEffect(() => {
-    setSelectedModelDropdown(localStorage.getItem("selectedModelDropdown")|| "Offline Fast");
-    setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || "Code");
+    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);
+      };
+    }
   }, []);
+  
 
-  // Update the model and type when the dropdown or function changes
   useEffect(() => {
-    const aiFunctionsActiveSelectedAIFunction = activeSelectedAIFunction as AIFunction
-    const newSelectedModel = modelList[selectedModelDropdown]?.[aiFunctionsActiveSelectedAIFunction] || "";
-    const newModelType = modelList[selectedModelDropdown]?.model_type || "";
-
-    setSelectedModel(newSelectedModel);
-    setSelectedModelType(newModelType);
-
-    localStorage.setItem("model", newSelectedModel);
-    localStorage.setItem("type", newModelType);
-  }, [selectedModelDropdown, activeSelectedAIFunction]);
+    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);
-    localStorage.setItem('selectedModelDropdown', newModel);
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
+      const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
+      modelClicked(model)
+    }
   };
 
-  const modelClicked = (functionName: AIFunction) => {
-    setActiveSelectedAIFunction(functionName);
-    localStorage.setItem('activeSelectedAIFunction', functionName);
-  };
+  // 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]])
+    }
+  }
 
   return (
     <div className="model-background">
@@ -148,29 +249,33 @@ 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}>
-            {Object.keys(modelList).map((model) => (
+            {filteredModels.map((model) => (
               <option key={model} value={model}>
                 {model}
               </option>
             ))}
           </select>
         </div>
-
+        {/* Model Grid with Cards */}
         <div className="grid">
-          {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>
-          ))}
+          {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>
+            )
+          )}
         </div>
       </div>
     </div>