From ddaf7638ace7b5512f730c306f41a6bf2f3584f1 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Thu, 26 Sep 2024 09:45:31 +0200
Subject: [PATCH] settings

---
 app/components/Models.tsx | 282 +++++++++++++++++++-------------------
 1 file changed, 141 insertions(+), 141 deletions(-)

diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 58815ec..7647753 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -1,149 +1,149 @@
-  import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
-  // Define the available model options
-  const modelOptions = [
-    'Offline Fast',
-    'Offline Fast (FOSS)',
-    'Offline Slow',
-    'Offline Slow (FOSS)',
-    'Online (La Plateforme)',
-    'Online (FOSS) (La Plateforme)',
-    'Online Cheap (OpenAI)',
-    'Online Expensive (OpenAI)',
-    'Online Cheap (Anthropic)',
-    'Online Expensive (Anthropic)',
-    'Online Cheap (Google)',
-    'Online Expensive (Google)',
-  ];
+// Define the available model options
+const offlineModels = [
+  'Offline Fast',
+  'Offline Fast (FOSS)',
+  'Offline Slow',
+  'Offline Slow (FOSS)',
+];
 
-  // Define the properties passed to the Models component
-  interface ModelsProps {
-    selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
-  }
+const onlineModels = [
+  'Online (La Plateforme)',
+  'Online (FOSS) (La Plateforme)',
+  'Online Cheap (OpenAI)',
+  'Online Expensive (OpenAI)',
+  'Online Cheap (Anthropic)',
+  'Online Expensive (Anthropic)',
+  'Online Cheap (Google)',
+  'Online Expensive (Google)',
+];
 
-  const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
-    // State for the selected model, default is loaded from localStorage or defaults to 'Offline Fast'
-    const [selectedModel, setSelectedModel] = useState<string>(() => {
-      return localStorage.getItem('selectedModel') || 'Offline Fast';
-    });
+const fossModels = [
+  'Offline Fast (FOSS)',
+  'Offline Slow (FOSS)',
+  'Online (FOSS) (La Plateforme)',
+];
 
-    // Handle changes in the selected model from the dropdown
-    const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const newModel = event.target.value;
-      setSelectedModel(newModel);
-    };
+// Define the properties passed to the Models component
+interface ModelsProps {
+  selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
+}
 
-    // Utility function to check if a model is an offline model
-    const isOfflineModel = (model: string) => {
-      return model.includes('Offline');
-    };
+const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
+  const [selectedModel, setSelectedModel] = useState<string>(() => {
+    return localStorage.getItem('selectedModel') || 'Offline Fast';
+  });
 
-    // Utility function to check if a model is an online model
-    const isOnlineModel = (model: string) => {
-      return model.includes('Online');
-    };
-
-    // Save selected model to localStorage whenever it changes
-    useEffect(() => {
-      localStorage.setItem('selectedModel', selectedModel);
-    }, [selectedModel]);
-
-    // Filter models based on the selected privacy option (Offline, AI Online, None)
-    const filteredModels = modelOptions.filter((model) => {
-      if (selectedOption === 'Offline') {
-        return !isOnlineModel(model);  // Hide online models
-      } else if (selectedOption === 'AI Online') {
-        return !isOfflineModel(model);  // Hide offline models
-      } else {
-        return true;  // Show all models for "None"
-      }
-    });
-
-    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">
-            <button className="code-model model-box">
-              <div className="overlay">
-                <h3>Code</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="math-model model-box">
-              <div className="overlay">
-                <h3>Math</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="language-model model-box">
-              <div className="overlay">
-                <h3>Language</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="character-model model-box">
-              <div className="overlay">
-                <h3>Character</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="financial-model model-box">
-              <div className="overlay">
-                <h3>Finance</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="weather-model model-box">
-              <div className="overlay">
-                <h3>Weather</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="time-planner-model model-box">
-              <div className="overlay">
-                <h3>Time</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="image-model model-box">
-              <div className="overlay">
-                <h3>Image</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay"> 
-                <h3>Custom1</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay"> 
-                <h3>Custom2</h3>
-                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-    );
+  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newModel = event.target.value;
+    setSelectedModel(newModel);
   };
 
-  export default Models;
+  const isOfflineModel = (model: string) => offlineModels.includes(model);
+  const isOnlineModel = (model: string) => onlineModels.includes(model);
+  const isFossModel = (model: string) => fossModels.includes(model);
+
+  useEffect(() => {
+    localStorage.setItem('selectedModel', selectedModel);
+  }, [selectedModel]);
+
+  const filteredModels = (() => {
+    switch (selectedOption) {
+      case 'Offline':
+        return offlineModels; // Show only offline models
+      case 'AI Online':
+        return onlineModels; // Show only online models
+      default:
+        return [...offlineModels, ...onlineModels]; // Show all models
+    }
+  })();
+
+  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">
+          <button className="code-model model-box">
+            <div className="overlay">
+              <h3>Code</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="math-model model-box">
+            <div className="overlay">
+              <h3>Math</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="language-model model-box">
+            <div className="overlay">
+              <h3>Language</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="character-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="financial-model model-box">
+            <div className="overlay">
+              <h3>Finance</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="weather-model model-box">
+            <div className="overlay">
+              <h3>Weather</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="time-planner-model model-box">
+            <div className="overlay">
+              <h3>Time</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="image-model model-box">
+            <div className="overlay">
+              <h3>Image</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="default-model model-box">
+            <div className="overlay"> 
+              <h3>Custom1</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="default-model model-box">
+            <div className="overlay"> 
+              <h3>Custom2</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Models;