interstellar_ai/app/components/Models.tsx

"use client";
import React, { useState, useEffect } from 'react';

// Define all models that should be available.
const modelList = {
  'Offline Fast': {
    'model_type': 'local',
    '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': {
    'model_type': 'local',
    '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)': {
    'model_type': 'local',
    '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)': {
    'model_type': 'local',
    '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)': {
    'model_type': '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)': {
    'model_type': '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)': {
    'model_type': '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)': {
    'model_type': '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)': {
    'model_type': '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)': {
    'model_type': '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)': {
    'model_type': 'mistral',
    '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)': {
    'model_type': 'mistral',
    '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)'],
  onlineWithoutFoss: [
    '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 Category = [
  'Code', 
  'Math', 
  'Language', 
  'Character', 
  'Finance', 
  'Weather', 
  'Time', 
  'Image', 
  'Custom1', 
  'Custom2'
]

const Models: React.FC = () => {
  // Initialize state with value from localStorage or default to ''
  const [selectedModel, setSelectedModel] = useState('');
  const [radioSelection, setRadioSelection] = useState<string | null>("")
  const [activeCategory, setActiveCategory] = useState('');
  const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));

  useEffect(() => {
    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') || '');
    };

    // 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);
    };
  }, []); // 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);
    }
  }, [activeCategory]);

  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newModel = event.target.value;
    setSelectedModel(newModel);
    localStorage.setItem('selectedModel', newModel); // Update localStorage directly
  };

  // Determine the filtered models based on current radioSelection
  const filteredModels = (() => {
    let models = [];
    switch (radioSelection) {
      case 'Offline':
        models = [
          ...modelDropdown.onlineWithoutFoss,
          ...modelDropdown.onlineFoss,
        ]; // Show only offline models without FOSS
        break;
      case 'Offline (FOSS)':
        models = [
          ...modelDropdown.onlineFoss,
        ]; // Show only offline models with FOSS
        break;
      case 'Online':
        models = [
          ...modelDropdown.offlineWithoutFoss,
          ...modelDropdown.offlineFoss,
        ]; // Show only online models without FOSS
        break;
      case 'Online (FOSS)':
        models = [
          ...modelDropdown.offlineFoss,
        ]; // Show only online models with FOSS
        break;
      case 'None':
        models = [
          ...modelDropdown.offlineWithoutFoss,
          ...modelDropdown.offlineFoss,
          ...modelDropdown.onlineWithoutFoss,
          ...modelDropdown.onlineFoss,
        ]; // Show all models if nothing matches
        break;
      case 'None (FOSS)':
        models = [
          ...modelDropdown.offlineFoss,
          ...modelDropdown.onlineFoss,
        ]; // Show all models if nothing matches
        break;
      default:
        models = [
          ...modelDropdown.offlineWithoutFoss,
          ...modelDropdown.offlineFoss,
          ...modelDropdown.onlineWithoutFoss,
          ...modelDropdown.onlineFoss,
        ]; // Show all models if nothing matches
        break;
    }
    return Array.from(new Set(models)); // Remove duplicates using Set
  })();

  const isOfflineModel = (model: string) =>
    modelDropdown.offlineWithoutFoss.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]])
  }

  return (
    <div className="model-background">
      <div className="models">
        <div className="title">
          <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={selectedModel} onChange={handleModelChange}>
            {filteredModels.map((model) => (
              <option key={model} value={model}>
                {model}
              </option>
            ))}
          </select>
        </div>

        {/* Model Grid with Cards */}
        <div className="grid">
          {Category.map(
            (displayedCategory) => (
              <button
                key={displayedCategory}
                className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`} 
                onClick={() => modelClicked(displayedCategory)}
              >
                <div className="overlay">
                  <h3>{displayedCategory}</h3>
                  {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
                </div>
              </button>
            )
          )}
        </div>
      </div>
    </div>
  );
};

export default Models;