Fixed the Models utilising useEffect

app/components/Models.tsx

@@ -1,8 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const Models: React.FC = () => {
-  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
-
   const modelOptions = [
     'Offline Fast',
     'Offline Fast (FOSS)',
@@ -18,14 +16,25 @@ const Models: React.FC = () => {
     'Online Expensive (Google)',
   ];
 
+  const [selectedModel, setSelectedModel] = useState<string>(() => {
+    // Load the selected model from localStorage on initial render
+    return localStorage.getItem('selectedModel') || 'Offline Fast';
+  });
+
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedModel(event.target.value);
+    const newModel = event.target.value;
+    setSelectedModel(newModel);
   };
 
   const isOfflineModel = (model: string) => {
     return model.includes('Offline');
   };
 
+  // Save selected model to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('selectedModel', selectedModel);
+  }, [selectedModel]);
+
   return (
     <div className="model-background">
       <div className="models">
@@ -69,31 +78,31 @@ const Models: React.FC = () => {
           </button>
           <button className="financial-model model-box">
             <div className="overlay">
-              <h3>Character</h3>
+              <h3>Financial</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>
+              <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>Character</h3>
+              <h3>Time Planner</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>
+              <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>Character</h3>
+              <h3>Default</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>