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

Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai

Browse source
This commit is contained in:
Patrick_Pluto 2024-09-25 13:22:20 +02:00
commit 2d877b6845
22 changed files with 383 additions and 318 deletions
Download patch file Download diff file Expand all files Collapse all files

71
app/components/Credits.tsx Normal file
View file

@ -0,0 +1,71 @@
import React from 'react';
const Credits: React.FC = () => {
return (
<div className="credits-container">
<section id="credits" className="credits-section">
<h1 className="title">Credits</h1>
<h2 className="subtitle">Icons</h2>
<p className="paragraph">
This project utilizes the following icon resources:
</p>
<a
href="https://www.svgrepo.com/author/Solar%20Icons/"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Solar Icons
</a>
<a
href="https://www.svgrepo.com/author/Dazzle%20UI/"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Dazzle UI
</a>
<h2 className="subtitle">Fonts</h2>
<p className="paragraph">
The fonts used in this project are provided by:
</p>
<a
href="https://github.com/itfoundry/Poppins"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Poppins
</a>
<a
href="https://openfontlicense.org"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
</a>
<a
href="http://www.apache.org/licenses/LICENSE-2.0"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Roboto, Rock Salt
</a>
<a
href="https://ubuntu.com/legal/font-licence"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Ubuntu
</a>
</section>
</div>
);
};
export default Credits;

45
app/components/Header.tsx
View file

@ -1,26 +1,25 @@
// Header.tsx
import React, { useState } from 'react';
import Login from './Login';
interface HeaderProps {
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
showDivs: boolean;
toggleDivs: () => void;
showHistoryModelsToggle: boolean;
showToggle: boolean; // Add this prop
showToggle: boolean;
}
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const [menuOpen, setMenuOpen] = useState(false);
const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
onViewChange(page)
toggleMenu()
}
const toggleMenu = () => {
setMenuOpen(!menuOpen);
};
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
onViewChange(page);
toggleMenu();
};
return (
<>
@ -30,17 +29,19 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
<span></span>
<span></span>
</div>
<nav className={`nav-links ${menuOpen ? "active":""}`}>
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button>
)}
</nav>
<nav className={`nav-links ${menuOpen ? "active" : ""}`}>
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button>
)}
</nav>
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
{/* AI logo or text */}
</button>
<div className="login-button">
<Login />

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>
);

6
app/page.tsx
View file

@ -6,11 +6,12 @@ import FAQ from './components/Faq'; // Ensure the import path is correct
import Documentation from './components/Documentation'; // Ensure the import path is correct
import History from './components/History';
import Models from './components/Models';
import Credits from './components/Credits';
import './styles/master.css';
const LandingPage: React.FC = () => {
const [showDivs, setShowDivs] = useState(true);
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
const conversationRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -42,7 +43,7 @@ const LandingPage: React.FC = () => {
setShowDivs(prevState => !prevState);
};
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
setView(view);
if (view !== 'AI') {
setShowDivs(false);
@ -70,6 +71,7 @@ const LandingPage: React.FC = () => {
{view === 'AI' && <AI />}
{view === 'FAQ' && <FAQ />}
{view === 'Documentation' && <Documentation />}
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
</div>
</div>
);

2
app/styles/Login.css
View file

@ -15,7 +15,7 @@
/* Popup content box */
.popup-content {
background: var(--popup-background-color); /* Use variable for background color */
background-color: var(--popup-background-color); /* Use variable for background color */
color: var(--popup-text-color); /* Use variable for text color */
padding: 30px;
border-radius: 10px;

3
app/styles/container.css
View file

@ -1,7 +1,6 @@
/* container.css */
.container,
.content {
padding-top: 10vh;
display: flex;
height: 100vh;
width: 100vw;
@ -10,6 +9,7 @@
}
.left-panel {
margin-top: 10vh;
width: 25vw; /* Adjust as needed */
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
background-color: var(--left-panel-background-color); /* Use variable for background color */
@ -25,6 +25,7 @@
}
.conversation-container {
margin-top: 10vh;
flex: 1;
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */

52
app/styles/credit.css Normal file
View file

@ -0,0 +1,52 @@
/* Styling for the credits container */
.credits-container {
padding: 2rem;
}
.credits-section {
max-width: 900px;
height: 80vh;
margin: 0 auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
overflow-y: scroll;
}
.title {
font-size: 2rem;
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
font-size: 1.5rem;
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.paragraph {
font-size: 1rem;
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
}
/* Styling for the credit buttons */
.credit-btn {
display: inline-block;
padding: 10px 15px;
margin: 10px 5px;
background-color: var(--button-background-color); /* Button background */
color: var(--button-text-color); /* Button text */
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.credit-btn:hover {
background-color: var(--button-hover-background-color); /* Button hover */
}

24
app/styles/header.css
View file

@ -11,10 +11,31 @@ header{
}
.hamburger{
position: absolute;
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger.open:nth-child(1)
.hamburger span{
width: 25px;
height: 3px;
background-color: white;
margin: 4px;
transition: 0.3s;
}
.hamburger.open span:nth-child(1){
transform: rotate(45deg) translate(5px, 10px);
}
.hamburger.open span:nth-child(2){
opacity: 0;
}
.hamburger.open span:nth-child(3){
transform: rotate(-45deg) translate(5px, -10px);
}
.nav-links{
position: absolute;
@ -45,7 +66,6 @@ header{
position: absolute;
top: 2.5vh;
right: 1vw;
justify-self: flex-end;
padding: 10px 20px;
background-color: var(--input-button-color);
color: var(--text-color);

1
app/styles/master.css
View file

@ -15,4 +15,5 @@
@import './Login.css';
@import './Settings.css';
@import './fonts.css';
@import './credit.css';
@import './responsive.css';

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 */
}

28
app/styles/responsive.css
View file

@ -104,16 +104,38 @@
color: var(--user-message-text-color); /* Use variable for button text color */
}
.login-button button{
margin: 20px 0;
.header-login-button{
position: absolute;
top: 3.5vh;
right: 5vw;
}
.hamburger.open{
margin-top: 0.5vh;
padding-left: 1vw;
}
.nav-links{
position: fixed;
display: none;
position: absolute;
top: 10vh;
left: 0;
background-color: var(--burger-menu-background-color);
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 10px;
height: fit-content;
}
.nav-links.active{
display: flex;
}
.nav-btn{
width: 100%;
text-align: left;
padding: 10px;
}
.hamburger {

1
app/styles/variables.css
View file

@ -29,6 +29,7 @@
--faq-item-text-color: #333; /* Text color for FAQ items */
--faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
--popup-background-color: #8B9635
--pop-up-text: #000; /* Text color for pop-ups */
--input-border-color: #8B9635; /* Input border color */
--font-family: 'Poppins', 'sans-serif';/* Default font family */