React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Changed the models

Browse source
This commit is contained in:
sageTheDM 2024-09-25 12:53:54 +02:00
parent b834112e61
commit b58ad967dd
7 changed files with 181 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
app/components/Models.tsx
View file

@ -1,85 +1,103 @@
// Models.tsx
import React from 'react';
import React, { useState } 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="grid">
<button className="code-model model-box">
<div className="overlay">
<h3>Code</h3>
<img src="/img/wifi.svg" alt="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" />
</div>
</button>
<button className="language-model model-box">
<div className="overlay">
<h3>Language</h3>
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
<h3>Default</h3>
</div>
</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 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>
{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>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>Character</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
</div>
</div>
</div>
);

116
app/styles/models.css
View file

@ -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;
justify-content: center;
flex-direction: column;
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;
}
.grid h3 {
font-size: large;
width: 100%; /* Ensure grid takes full width */
}
.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 */
}

BIN
public/img/character.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
public/img/financial.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
public/img/image.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 243 KiB

BIN
public/img/time.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
public/img/weather.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB