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;