Changed the models

app/components/Models.tsx

@@ -1,85 +1,103 @@
-// Models.tsx
+import React, { useState } from 'react';
-import React from 'react';
 
 const Models: React.FC = () => {
+  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
+
+  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)',
+  ];
+
+  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedModel(event.target.value);
+  };
+
+  const isOfflineModel = (model: string) => {
+    return model.includes('Offline');
+  };
+
   return (
     <div className="model-background">
       <div className="models">
         <div className="titel">
           <h1>Different AI models</h1>
         </div>
-        <form action="">
+        <div className="model-dropdown">
+          <label htmlFor="model-select">Select AI Model:</label>
+          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
+            {modelOptions.map((model) => (
+              <option key={model} value={model}>
+                {model}
+              </option>
+            ))}
+          </select>
+        </div>
         <div className="grid">
           <button className="code-model model-box">
             <div className="overlay">
               <h3>Code</h3>
-                <img src="/img/wifi.svg" alt="Wi-Fi" />
+              {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>
-                <img src="/img/nowifi.svg" alt="No Wi-Fi" />
+              {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>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="weather-model model-box">
+            <div className="overlay">
+              <h3>Character</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>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="image-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="default-model model-box">
             <div className="overlay"> 
-                <h3>Default</h3>
+              <h3>Character</h3>
-              </div>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-            </button>
-            {/* Example Models */}
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
             </div>
           </button>
         </div>
-        </form>
       </div>
     </div>
   );

app/styles/models.css

@@ -1,7 +1,7 @@
 .model-background {
     grid-column: 1 / 2;
     grid-row: 2 / 5;
-    overflow-y: auto;
+    overflow-y: scroll;
     background-color: var(--models-background-color); /* Ensure this variable is defined */
     border-radius: 2em;
     padding: 1em;
@@ -11,24 +11,9 @@
 }
 
 .models {
-    grid-column: 1 / 2;
-    grid-row: 2 / 5;
-    overflow-y: auto;
-    background-color: var(--models-background-color); /* Ensure this variable is defined */
-    border-radius: 2em;
-    padding: 1em;
-    height: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-y: scroll;
-}
-
-.models form {
-    padding-right: 10px;
-    padding-left: 10px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    justify-content: center;
+    height: 100%;
 }
 
 .models .titel {
@@ -39,15 +24,21 @@
     font-size: 0.7em;
 }
 
+.model-dropdown {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1em; /* Space between dropdown and models */
+}
+
+.model-dropdown label {
+    margin-right: 0.5em; /* Space between label and dropdown */
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5vh;
-    width: fit-content;
+    width: 100%; /* Ensure grid takes full width */
-}
-
-.grid h3 {
-    font-size: large;
 }
 
 .model-box {
@@ -60,6 +51,7 @@
     position: relative;
     height: 18vh;
     width: 18vh;
+    margin: auto; /* Center each model box in the grid cell */
 }
 
 .overlay {
@@ -73,11 +65,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 300%;
+    font-size: x-large;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
-    font-size: xx-large;
 }
 
 .overlay img {
@@ -94,6 +85,7 @@
     opacity: 1;
 }
 
+/* Model background styles */
 .code-model {
     background-image: url(/img/code.jpg);
     background-repeat: no-repeat;
@@ -102,7 +94,7 @@
 
 .math-model {
     background-image: url(/img/math.jpg);
-    background-color: var(--background-color); /* Use variable for background color */
+    background-color: var(--background-color);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -110,7 +102,47 @@
 
 .language-model {
     background-image: url(/img/language.jpg);
-    background-color: #72cce4; /* Use variable for background color */
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.character-model {
+    background-image: url(/img/character.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.financial-model {
+    background-image: url(/img/financial.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.weather-model {
+    background-image: url(/img/weather.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.time-planner-model {
+    background-image: url(/img/time.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.image-model {
+    background-image: url(/img/image.jpg);
+    background-color: #72cce4;
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -122,3 +154,33 @@
     background-size: cover;
     background-position: center;
 }
+
+.model-dropdown {
+    display: flex;
+    flex-direction: column; /* Stack label and dropdown */
+    align-items: center; /* Center the content */
+    margin-bottom: 1em; /* Space between dropdown and models */
+}
+
+.model-dropdown label {
+    margin-bottom: 0.5em; /* Space between label and dropdown */
+    font-size: large; /* Increase font size for visibility */
+    color: var(--text-color); /* Use variable for text color */
+}
+
+#model-select {
+    padding: 0.5em; /* Padding for better touch targets */
+    border-radius: 5px; /* Rounded corners */
+    border: 1px solid var(--input-border-color); /* Border color */
+    background-color: var(--input-background-color); /* Background color */
+    color: var(--text-color); /* Text color */
+    font-size: medium; /* Font size for dropdown */
+    cursor: pointer; /* Cursor change on hover */
+    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
+}
+
+#model-select:hover {
+    background-color: var(--button-hover-background-color); /* Change background on hover */
+    border-color: var(--button-background-color); /* Change border color on hover */
+}
+