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

Compare commits

base: React-Group:2ae151dae82842451979f799ddd1caed63dfbd31
Branches Tags
React-Group:main
..
compare: React-Group:bd4599367b572ff64b3d26a9813b99e5f7de243b
Branches Tags
React-Group:main

No commits in common. "2ae151dae82842451979f799ddd1caed63dfbd31" and "bd4599367b572ff64b3d26a9813b99e5f7de243b" have entirely different histories.
2ae151dae8 ... bd4599367b

7 changed files with 101 additions and 181 deletions
Show stats Expand all files Collapse all files

124
app/components/Models.tsx
View file

@ -1,103 +1,85 @@
import React, { useState } from 'react';
// Models.tsx
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>
<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>
<form action="">
<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" />}
<img src="/img/wifi.svg" alt="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" />}
<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" />}
<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>
</div>
);

116
app/styles/models.css
View file

@ -1,7 +1,7 @@
.model-background {
grid-column: 1 / 2;
grid-row: 2 / 5;
overflow-y: scroll;
overflow-y: auto;
background-color: var(--models-background-color); /* Ensure this variable is defined */
border-radius: 2em;
padding: 1em;
@ -11,9 +11,24 @@
}
.models {
display: flex;
flex-direction: column;
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;
}
.models .titel {
@ -24,21 +39,15 @@
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: 100%; /* Ensure grid takes full width */
width: fit-content;
}
.grid h3 {
font-size: large;
}
.model-box {
@ -51,7 +60,6 @@
position: relative;
height: 18vh;
width: 18vh;
margin: auto; /* Center each model box in the grid cell */
}
.overlay {
@ -65,10 +73,11 @@
display: flex;
justify-content: center;
align-items: center;
font-size: x-large;
font-size: 300%;
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
font-size: xx-large;
}
.overlay img {
@ -85,7 +94,6 @@
opacity: 1;
}
/* Model background styles */
.code-model {
background-image: url(/img/code.jpg);
background-repeat: no-repeat;
@ -94,7 +102,7 @@
.math-model {
background-image: url(/img/math.jpg);
background-color: var(--background-color);
background-color: var(--background-color); /* Use variable for background color */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
@ -102,47 +110,7 @@
.language-model {
background-image: url(/img/language.jpg);
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-color: #72cce4; /* Use variable for background color */
background-repeat: no-repeat;
background-size: contain;
background-position: center;
@ -154,33 +122,3 @@
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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
public/img/financial.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 140 KiB

BIN
public/img/image.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 243 KiB

BIN
public/img/time.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 156 KiB

BIN
public/img/weather.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 MiB