sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Fixed the Models utilising useEffect

Browse source
This commit is contained in:
sageTheDM 2024-09-25 13:33:51 +02:00
parent 9a55c0671d
commit 98ad5decd4
1 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/components/Models.tsx
View file

@ -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>