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-18 11:54:14 +02:00
commit 692eb62d44
15 changed files with 918 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/layout.tsx Normal file
View file

@ -0,0 +1,16 @@
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}

157
app/page.tsx
View file

@ -0,0 +1,157 @@
"use client"; // Add this at the top to mark this file as a Client Component
import React, { useState, useEffect, useRef } from 'react';
import './styles.css'; // Make sure this matches your CSS file path
const App = () => {
const [showDivs, setShowDivs] = useState(true); // Default to true to show divs on load
const conversationRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Scroll to bottom when the component mounts or updates
const scrollToBottom = () => {
const conversation = conversationRef.current;
if (conversation) {
conversation.scrollTop = conversation.scrollHeight;
}
};
scrollToBottom(); // Scroll to the bottom when the page loads
// Use MutationObserver to efficiently observe changes in the conversation element
const observer = new MutationObserver(scrollToBottom);
if (conversationRef.current) {
observer.observe(conversationRef.current, {
childList: true,
subtree: true,
});
}
return () => {
if (conversationRef.current) {
observer.disconnect();
}
};
}, []);
const toggleDivs = () => {
setShowDivs(prevState => !prevState);
};
return (
<div className="App">
<header>
<div className="header-menu">
<ul>
<li>
<a href="/">
<img src="/img/logo.png" alt="logo" />
</a>
</li>
<li>
<a href="/documentation">Documentation</a>
</li>
<li>
<a href="/faq">FAQ</a>
</li>
<li>
<button onClick={toggleDivs}>{showDivs ? "Hide Divs" : "Show Divs"}</button>
</li>
</ul>
</div>
</header>
<div className="container">
{showDivs && (
<div className="history-background">
<div className="history">
<ul>
<li>
<a href="#">history1</a>
</li>
{/* Add more history items here */}
</ul>
</div>
</div>
)}
{showDivs && (
<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>
<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>
)}
<div className="output">
<div className="conversation resize" ref={conversationRef}>
{/* Render messages here */}
{/* Replace the following example with dynamic rendering */}
<div className="user-message">User: Example message</div>
<div className="ai-message">AI: Example response</div>
</div>
</div>
<form className="input" method="POST" action="" id="inputForm">
<input
type="text"
name="user_message"
placeholder="Type your message here..."
/>
<button type="submit" name="option" value="chat">
<img src="/img/send.svg" alt="send" />
</button>
<button type="submit" name="option" value="voice">
<img src="/img/microphone.svg" alt="microphone" />
</button>
</form>
</div>
</div>
);
};
export default App;

524
app/styles.css Normal file
View file

@ -0,0 +1,524 @@
:root {
--background-color: white;
--text-color: white;
--font-family: Arial, sans-serif;
--history-background-color: rgb(0, 0, 48);
--models-background-color: rgb(0, 0, 48);
--output-background-color: black;
/* Set the conversation background to black */
--user-message-color: rgb(0, 128, 255);
/* Blueish bubble for user */
--ai-message-color: rgb(100, 100, 255);
/* Lighter blue for AI */
--input-background-color: rgb(0, 0, 48);
--input-button-color: rgb(0, 128, 255);
--input-button-hover-color: rgb(0, 100, 200);
--scrollbar-track: rgb(91, 172, 253);
--scrollbar-thumb: rgb(0, 88, 176);
}
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
overflow: hidden;
/* Prevent scrolling */
}
/* Body Styling */
body {
margin-top: 2em;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
margin-bottom: 0.5em;
}
/* Header Styling */
header {
background-color: var(--background-color);
color: black;
width: 100%;
text-decoration: none;
position: fixed;
top: 0;
left: 0;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
font-family: var(--font-family);
}
header li {
display: inline-block;
margin: 0 15px;
}
header img {
height: 2em;
vertical-align: middle;
}
header a {
color: black;
text-decoration: none;
transition: color 0.3s;
}
header a:hover {
color: var(--input-button-color);
}
/* Container Grid Layout */
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 3fr 1fr 1fr 1fr;
gap: 10px;
width: 90vw;
height: 95vh;
}
/* History Section */
.history-background {
grid-column: 1/2;
grid-row: 1/2;
height: 100%;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
border-radius: 2em;
}
.history {
height: 100%;
overflow-y: scroll;
padding-right: 10px;
}
.history ul {
list-style: none;
}
.history ul li {
padding: 10px 0;
border-bottom: 1px solid var(--text-color);
width: 100%;
}
.history ul li a {
display: block;
text-decoration: none;
color: white;
width: 100%;
padding: 5px;
}
.history ul li a:hover {
background-color: var(--input-button-hover-color);
}
/* Models Section */
.model-background {
grid-column: 1/2;
grid-row: 2/5;
overflow-y: auto;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
height: 90%;
box-sizing: border-box;
overflow: hidden;
}
.models {
grid-column: 1/2;
grid-row: 2/5;
overflow-y: auto;
background-color: var(--models-background-color);
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 {
padding-bottom: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5vh;
width: fit-content;
/* height: calc(100% - 2em); */
}
.grid h3 {
font-size: x-large;
}
.model-box {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 5%;
overflow: hidden;
position: relative;
height: 18vh;
width: 18vh;
}
.overlay {
z-index: 900;
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
/* Dark overlay */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 300%;
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
font-size: xx-large;
}
.overlay img {
align-self: flex-end;
justify-self: end;
height: 3vh;
width: 3vh;
position: absolute;
right: 15px;
bottom: 15px;
}
.model-box:hover .overlay {
opacity: 1;
}
.code-model {
background-image: url(/img/code.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.math-model {
background-image: url(/img/math.jpg);
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.language-model {
background-image: url(/img/language.jpg);
background-color: #72cce4;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.default-model {
background-image: url(/img/default.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* Output Section */
.output {
grid-column: 2;
grid-row: 1 / 4;
border-radius: 2em;
background-color: var(--output-background-color);
padding: 1.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1.2em;
overflow-y: auto;
min-height: 75vh;
margin-bottom: 0;
width: 100%;
height: 100%;
}
/* Conversation */
#conversation {
display: flex;
flex-direction: column;
padding: 10px;
overflow-y: auto;
max-height: 80vh;
background-color: var(--output-background-color);
/* Black background */
border-radius: 10px;
scroll-behavior: smooth;
/* Optional: Smooth scrolling */
}
/* Resizable Conversation */
.resize {
resize: both;
overflow: auto;
/* Allow resizing both horizontally and vertically */
min-width: 300px;
min-height: 300px;
/* Minimum dimensions to prevent it from becoming too small */
}
/* User and AI Messages */
.user-message,
.ai-message {
margin: 10px 0;
padding: 10px 15px;
border-radius: 15px;
max-width: 60%;
width: fit-content;
/* Adjusts width to fit the content */
word-wrap: break-word;
display: block;
/* Changed from inline-block to block */
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
/* Align user message to the right */
.user-message {
background-color: var(--user-message-color);
color: var(--text-color);
border-bottom-right-radius: 0;
margin-left: auto;
text-align: right;
/* Align text to the right */
}
/* Align AI message to the left */
.ai-message {
background-color: var(--ai-message-color);
color: var(--text-color);
border-bottom-left-radius: 0;
margin-right: auto;
text-align: left;
/* Align text to the left */
}
/* Output Form Buttons */
.output form {
display: flex;
justify-content: flex-start;
gap: 10px;
}
.output form button {
background-color: transparent;
color: white;
border: none;
padding: 0;
margin: 5px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.output form button:hover {
transform: scale(1.2);
}
.output form button img {
height: 1.8em;
}
/* Input Section */
.input {
grid-column: 2/3;
grid-row: 4/5;
border-radius: 20px;
background-color: var(--input-background-color);
padding: 1.5vh;
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
/* margin-top: -9em; */
gap: 10px;
height: 10vh;
}
.input input {
flex-grow: 1;
padding: 5px;
font-size: 1.2em;
border-radius: 8px;
border: 2px solid var(--input-button-color);
outline: none;
margin-right: 10px;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
transition: border-color 0.3s ease-in-out;
height: 7vh;
}
.input input:focus {
border-color: var(--input-button-hover-color);
}
.input button {
padding: 1em;
margin: 5px;
background-color: var(--input-button-color);
color: white;
border: none;
border-radius: 50%;
font-size: 1.5em;
cursor: pointer;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.input button img {
height: 1em;
}
.input button:hover {
background-color: var(--input-button-hover-color);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* FAQ Section */
#faq {
max-width: 800px;
width: 90%;
margin-top: 50px;
padding: 20px;
background-color: #222;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#faq h2 {
text-align: center;
color: #00ccff;
font-size: 2em;
margin-bottom: 20px;
}
.faq-item {
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
background-color: #333;
}
.faq-item h3 {
color: #00ccff;
margin-bottom: 10px;
font-size: 1.5em;
}
.faq-item p {
color: #ddd;
font-size: 1.1em;
line-height: 1.5;
}
.faq-item:hover {
background-color: #444;
transition: background-color 0.3s;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
border-radius: 5px;
overflow: hidden;
margin-left: 10px;
padding-left: 15px;
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: 5px;
}
@media (max-width: 1400px) {
.grid {
grid-template-columns: 1fr;
}
.model-box {
width: 15vw;
aspect-ratio: 1/1;
}
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
width: 95vw;
}
.history,
.models {
display: none;
/* Hide history and models */
}
.output {
grid-column: 1;
grid-row: 1 / span 2;
}
.input {
grid-column: 1;
grid-row: 3;
/* margin-top: -4em; */
}
.input button {
height: 40px;
width: 40px;
}
.output form button img {
height: 1.5em;
}
}