yesyes very good commit

app/components/Models.tsx

@@ -1,7 +1,131 @@
 "use client";
 import React, { useState, useEffect } from 'react';
 
-// Define the available model options
+// Define all models that should be available.
+const modelList = {
+  'Offline Fast': {
+    'Math': 'qwen2-math:1.5b',
+    'Code': 'starcoder2',
+    'Language': 'llama3.2',
+    'Character': 'dolphin-phi',
+    'Finance': 'qwen2-math:1.5b',
+    'Weather': 'llama3.2',
+    'Time': 'llama3.2',
+    'Image': 'llava-phi3'
+  },
+  'Offline Slow': {
+    'Math': 'wizard-math',
+    'Code': 'starcoder2:7b',
+    'Language': 'llama3.1',
+    'Character': 'dolphin-llama3',
+    'Finance': 'wizard-math',
+    'Weather': 'llama3.1',
+    'Time': 'llama3.1',
+    'Image': 'llava'
+  },
+  'Offline Fast (FOSS)': {
+    'Math': 'qwen2-math:1.5b',
+    'Code': 'qwen2.5-coder:1.5b',
+    'Language': 'phi3.5',
+    'Character': 'dolphin-mistral',
+    'Finance': 'qwen2-math:1.5b',
+    'Weather': 'phi3.5',
+    'Time': 'phi3.5',
+    'Image': 'llava'
+  },
+  'Offline Slow (FOSS)': {
+    'Math': 'mathstral',
+    'Code': 'qwen2.5-coder',
+    'Language': 'qwen2.5',
+    'Character': 'dolphin-mistral',
+    'Finance': 'mathstral',
+    'Weather': 'qwen2.5',
+    'Time': 'qwen2.5',
+    'Image': 'llava'
+  },
+  'Online Cheap (OpenAI)': {
+    'Math': 'gpt-4o-mini',
+    'Code': 'gpt-4o-mini',
+    'Language': 'gpt-4o-mini',
+    'Character': 'gpt-4o-mini',
+    'Finance': 'gpt-4o-mini',
+    'Weather': 'gpt-4o-mini',
+    'Time': 'gpt-4o-mini',
+    'Image': 'gpt-4o-mini'
+  },
+  'Online Expensive (OpenAI)': {
+    'Math': 'gpt-4o',
+    'Code': 'gpt-4o',
+    'Language': 'gpt-4o',
+    'Character': 'gpt-4o',
+    'Finance': 'gpt-4o',
+    'Weather': 'gpt-4o',
+    'Time': 'gpt-4o',
+    'Image': 'gpt-4o'
+  },
+  'Online Cheap (Anthropic)': {
+    'Math': 'claude-3-haiku',
+    'Code': 'claude-3-haiku',
+    'Language': 'claude-3-haiku',
+    'Character': 'claude-3-haiku',
+    'Finance': 'claude-3-haiku',
+    'Weather': 'claude-3-haiku',
+    'Time': 'claude-3-haiku',
+    'Image': 'claude-3-haiku'
+  },
+  'Online Expensive (Anthropic)': {
+    'Math': 'claude-3-5-sonnet',
+    'Code': 'claude-3-5-sonnet',
+    'Language': 'claude-3-5-sonnet',
+    'Character': 'claude-3-5-sonnet',
+    'Finance': 'claude-3-5-sonnet',
+    'Weather': 'claude-3-5-sonnet',
+    'Time': 'claude-3-5-sonnet',
+    'Image': 'claude-3-5-sonnet'
+  },
+  'Online Cheap (Google)': {
+    'Math': 'gemini-1.5-flash-latest',
+    'Code': 'gemini-1.5-flash-latest',
+    'Language': 'gemini-1.5-flash-latest',
+    'Character': 'gemini-1.5-flash-latest',
+    'Finance': 'gemini-1.5-flash-latest',
+    'Weather': 'gemini-1.5-flash-latest',
+    'Time': 'gemini-1.5-flash-latest',
+    'Image': 'gemini-1.5-flash-latest'
+  },
+  'Online Expensive (Google)': {
+    'Math': 'gemini-1.5-pro-latest',
+    'Code': 'gemini-1.5-pro-latest',
+    'Language': 'gemini-1.5-pro-latest',
+    'Character': 'gemini-1.5-pro-latest',
+    'Finance': 'gemini-1.5-pro-latest',
+    'Weather': 'gemini-1.5-pro-latest',
+    'Time': 'gemini-1.5-pro-latest',
+    'Image': 'gemini-1.5-pro-latest'
+  },
+  'Online (La Plateforme)': {
+    'Math': 'open-mistral-nemo',
+    'Code': 'codestral-latest',
+    'Language': 'mistral-small-latest',
+    'Character': 'mistral-large-latest',
+    'Finance': 'open-mistral-nemo',
+    'Weather': 'mistral-small-latest',
+    'Time': 'mistral-small-latest',
+    'Image': 'pixtral-12b-2409'
+  },
+  'Online (FOSS) (La Plateforme)': {
+    'Math': 'open-mistral-nemo',
+    'Code': 'open-codestral-mamba',
+    'Language': 'open-mistral-nemo',
+    'Character': 'open-mixtral-8x22b',
+    'Finance': 'open-mixtral-8x22b',
+    'Weather': 'open-mistral-nemo',
+    'Time': 'open-mistral-nemo',
+    'Image': 'pixtral-12b-2409'
+  }
+}
+
+// Define the available category options
 const modelDropdown = {
   offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
   offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
@@ -12,6 +136,7 @@ const modelDropdown = {
     'Online Expensive (Anthropic)',
     'Online Cheap (Google)',
     'Online Expensive (Google)',
+    'Online (La Plateforme)'
   ],
   onlineFoss: ['Online (FOSS) (La Plateforme)'],
 };
@@ -20,7 +145,7 @@ const Models: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
   const [selectedModel, setSelectedModel] = useState('');
   const [radioSelection, setRadioSelection] = useState<string | null>("")
-  
+
   useEffect(() => {
     setRadioSelection(localStorage.getItem('radioSelection'))
     const handleStorageChange = () => {
@@ -98,6 +223,13 @@ const Models: React.FC = () => {
   const isOfflineModel = (model: string) =>
     modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
+  const modelClicked = (model: string) => {
+    const category = selectedModel as keyof typeof modelList;
+    console.log(model)
+    console.log(category)
+    console.log(modelList[category][model as keyof typeof modelList[typeof category]]);
+  }
+
   return (
     <div className="model-background">
       <div className="models">
@@ -122,7 +254,7 @@ const Models: React.FC = () => {
         <div className="grid">
           {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map(
             (category) => (
-              <button key={category} className={`${category.toLowerCase()}-model model-box`}>
+              <button key={category} className={`${category.toLowerCase()}-model model-box`} onClick={() => modelClicked(category)}>
                 <div className="overlay">
                   <h3>{category}</h3>
                   {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}