forked from React-Group/interstellar_ai
Compare commits
No commits in common. "1f12a1d70804c91fba93c48d856db2b71ed29a86" and "dbf30fa8a7d73c172de7834be524b45009091095" have entirely different histories.
1f12a1d708
...
dbf30fa8a7
20 changed files with 86 additions and 251 deletions
|
@ -1,85 +1,54 @@
|
||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Login from './Login';
|
import Login from './Login';
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void;
|
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
|
||||||
showDivs: boolean;
|
showDivs: boolean;
|
||||||
toggleDivs: () => void;
|
toggleDivs: () => void;
|
||||||
showHistoryModelsToggle: boolean;
|
showHistoryModelsToggle: boolean;
|
||||||
showToggle: boolean;
|
showToggle: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Header: React.FC<HeaderProps> = ({
|
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
||||||
onViewChange,
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
showDivs,
|
|
||||||
toggleDivs,
|
|
||||||
showHistoryModelsToggle,
|
|
||||||
showToggle,
|
|
||||||
}) => {
|
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
|
||||||
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
const toggleRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
// Toggle menu state
|
const toggleMenu = () => {
|
||||||
const toggleMenu = () => {
|
setMenuOpen(!menuOpen);
|
||||||
setMenuOpen((prevMenuOpen) => !prevMenuOpen);
|
};
|
||||||
};
|
|
||||||
|
|
||||||
// Handle button click
|
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
|
||||||
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
|
onViewChange(page);
|
||||||
onViewChange(page);
|
toggleMenu();
|
||||||
setMenuOpen(false); // Close the menu when a button is clicked
|
};
|
||||||
};
|
|
||||||
|
|
||||||
// Effect to handle clicks outside of the dropdown
|
return (
|
||||||
useEffect(() => {
|
<>
|
||||||
const handleClickOutside = (event: MouseEvent) => {
|
<header>
|
||||||
// Check if the click is outside both the dropdown and the hamburger menu
|
<div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
|
||||||
if (
|
<span></span>
|
||||||
dropdownRef.current &&
|
<span></span>
|
||||||
!dropdownRef.current.contains(event.target as Node) &&
|
<span></span>
|
||||||
toggleRef.current &&
|
</div>
|
||||||
!toggleRef.current.contains(event.target as Node)
|
<nav className={`nav-links ${menuOpen ? "active" : ""}`}>
|
||||||
) {
|
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
|
||||||
setMenuOpen(false);
|
<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 && (
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
<button onClick={toggleDivs} className="nav-btn">
|
||||||
|
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||||
return () => {
|
</button>
|
||||||
document.removeEventListener('mousedown', handleClickOutside);
|
)}
|
||||||
};
|
</nav>
|
||||||
}, []);
|
<div className="header-button header-logo">
|
||||||
|
{/* AI logo or text */}
|
||||||
return (
|
</div>
|
||||||
<>
|
<div className="login-button-container">
|
||||||
<header>
|
<Login />
|
||||||
{showToggle && showHistoryModelsToggle && (
|
</div>
|
||||||
<button onClick={toggleDivs} className="nav-btn show-hide-btn">
|
</header>
|
||||||
{showDivs ? 'Hide' : 'Show'}
|
</>
|
||||||
</button>
|
);
|
||||||
)}
|
|
||||||
<nav ref={dropdownRef} 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>
|
|
||||||
</nav>
|
|
||||||
<div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
<div className="header-logo">
|
|
||||||
{/* AI logo or text */}
|
|
||||||
</div>
|
|
||||||
<div className="login-button-container">
|
|
||||||
<Login />
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Header;
|
export default Header;
|
||||||
|
|
|
@ -47,7 +47,6 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
className='textInputField'
|
|
||||||
/>
|
/>
|
||||||
<button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
|
<button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
|
||||||
<svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>
|
<svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>
|
||||||
|
|
|
@ -79,16 +79,12 @@ const Login: React.FC = () => {
|
||||||
|
|
||||||
// Function to handle account creation
|
// Function to handle account creation
|
||||||
const handleCreateAccount = async () => {
|
const handleCreateAccount = async () => {
|
||||||
if (newAccountName !== "" && newAccountEmail !== "" && newAccountPassword !== "") {
|
const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
|
||||||
const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
|
if (success) {
|
||||||
if (success) {
|
alert('Account created successfully! You can now log in.');
|
||||||
alert('Account created successfully! You can now log in.');
|
toggleSignUpPopup(); // Close sign-up popup
|
||||||
toggleSignUpPopup(); // Close sign-up popup
|
|
||||||
} else {
|
|
||||||
alert('Account creation failed. Please try again.');
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
alert('Account creation failed. Please do not leave any field empty.');
|
alert('Account creation failed. Please try again.');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,6 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type,
|
||||||
value={value} // Set the current value
|
value={value} // Set the current value
|
||||||
onChange={handleTextChange} // Handle input changes
|
onChange={handleTextChange} // Handle input changes
|
||||||
placeholder={placeholder} // Set the placeholder text
|
placeholder={placeholder} // Set the placeholder text
|
||||||
className='textInputField'
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -66,14 +66,3 @@ input:hover {
|
||||||
select{
|
select{
|
||||||
background-color: var(--input-background-color);
|
background-color: var(--input-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, p{
|
|
||||||
color: var(--text-color);
|
|
||||||
font-family: var(--font-family);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: var(--font-size)
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
header {
|
header{
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -10,16 +10,15 @@ header {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hamburger button styles */
|
.hamburger{
|
||||||
.hamburger {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5vw;
|
left: 5vw;
|
||||||
display: flex; /* Always show hamburger button */
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger span {
|
.hamburger span{
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
@ -27,53 +26,43 @@ header {
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.open span:nth-child(1) {
|
.hamburger.open span:nth-child(1){
|
||||||
transform: rotate(45deg) translate(5px, 10px);
|
transform: rotate(45deg) translate(5px, 10px);
|
||||||
}
|
}
|
||||||
.hamburger.open span:nth-child(2) {
|
.hamburger.open span:nth-child(2){
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.hamburger.open span:nth-child(3) {
|
.hamburger.open span:nth-child(3){
|
||||||
transform: rotate(-45deg) translate(5px, -10px);
|
transform: rotate(-45deg) translate(5px, -10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation links (hidden in header, shown in dropdown) */
|
|
||||||
.nav-links {
|
|
||||||
display: none; /* Default hidden */
|
.nav-links{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10vh; /* Adjust as needed */
|
left: 1vw;
|
||||||
left: 0;
|
display: flex;
|
||||||
background-color: var(--burger-menu-background-color);
|
gap: 0.5vw;
|
||||||
width: 100%;
|
width:max-content;
|
||||||
flex-direction: column;
|
height: 100%;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links.active {
|
.nav-btn{
|
||||||
display: flex; /* Show when active */
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn {
|
|
||||||
background-color: var(--input-button-color);
|
background-color: var(--input-button-color);
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
height: 50px; /* Consistent height */
|
height: 50%;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 10px;
|
padding: 2px 15px;
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
width: 100%; /* Full width */
|
|
||||||
text-align: center; /* Center text */
|
|
||||||
margin: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-btn:hover {
|
.nav-btn:hover{
|
||||||
background-color: var(--input-button-hover-color);
|
background-color: var(--input-button-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo styles */
|
.header-logo{
|
||||||
.header-logo {
|
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 5vh;
|
height: 5vh;
|
||||||
background-image: url(../../public/img/logo.png);
|
background-image: url(../../public/img/logo.png);
|
||||||
|
@ -84,8 +73,7 @@ header {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Login button styles */
|
.login-button-container{
|
||||||
.login-button-container {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.1vh;
|
top: 0.1vh;
|
||||||
right: 1vw;
|
right: 1vw;
|
||||||
|
@ -94,9 +82,9 @@ header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-login-button {
|
.header-login-button{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: max-content;
|
width:max-content;
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
padding: 0.5vw 1vw;
|
padding: 0.5vw 1vw;
|
||||||
background-color: var(--input-button-color);
|
background-color: var(--input-button-color);
|
||||||
|
@ -113,12 +101,4 @@ header {
|
||||||
|
|
||||||
.header-login-button:hover {
|
.header-login-button:hover {
|
||||||
background-color: var(--input-button-hover-color);
|
background-color: var(--input-button-hover-color);
|
||||||
}
|
|
||||||
|
|
||||||
.show-hide-btn{
|
|
||||||
width: fit-content;
|
|
||||||
align-self: left;
|
|
||||||
position: absolute;
|
|
||||||
left: 10vw;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
|
@ -33,11 +33,6 @@
|
||||||
height: 7vh;
|
height: 7vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textInputField::placeholder {
|
|
||||||
color: var(--text-color); /* Change to desired placeholder color */
|
|
||||||
opacity: 1; /* Ensures full opacity (optional) */
|
|
||||||
}
|
|
||||||
|
|
||||||
.input input:focus {
|
.input input:focus {
|
||||||
border-color: var(--input-button-hover-color);
|
border-color: var(--input-button-hover-color);
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 1dvh 0 0 0;
|
padding: 1dvh 0 0 0 ;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left panel styles */
|
/* Left panel styles */
|
||||||
|
@ -100,19 +100,20 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo {
|
.header-logo{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-left: -40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.open {
|
.hamburger.open{
|
||||||
margin-top: 0.5vh;
|
margin-top: 0.5vh;
|
||||||
padding-left: 1vw;
|
padding-left: 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links{
|
||||||
display: none; /* Hidden by default */
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10vh; /* Adjust as needed */
|
top: 10vh;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: var(--burger-menu-background-color);
|
background-color: var(--burger-menu-background-color);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -122,42 +123,24 @@
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links.active {
|
.nav-links.active{
|
||||||
display: flex; /* Show when active */
|
display: flex;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-btn {
|
.nav-btn{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: var(--input-button-color);
|
|
||||||
border: none;
|
|
||||||
font-size: 0.9em;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-btn:hover {
|
|
||||||
background-color: var(--input-button-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: flex; /* Always show hamburger button */
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-login-button {
|
.header-login-button{
|
||||||
right: 5vh; /* Keep login button visible */
|
right: 5vh;
|
||||||
}
|
|
||||||
|
|
||||||
.show-hide-btn{
|
|
||||||
width: fit-content;
|
|
||||||
left: 20vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-logo {
|
|
||||||
background-image: url(../../public/img/logo-small.png);
|
|
||||||
width: 4em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
on linux it is slightly easier
|
|
||||||
|
|
||||||
i'd say to create a preparation script for dnf/yum and apt based systems, which basically downloads the dependencies via the package manager, and ollama via the usual script
|
|
|
@ -1,7 +0,0 @@
|
||||||
You will need to make three folders:
|
|
||||||
|
|
||||||
node-bin - contains nodejs portable
|
|
||||||
python-bin - contains python3 portable - don't forget to add the .pth file and adjust it accordingly, because import site is normally missing.
|
|
||||||
ollama.bin - contains ollama portable
|
|
||||||
|
|
||||||
you also need vc redist 2019
|
|
|
@ -1,3 +0,0 @@
|
||||||
start /b scripts\prepare_py.bat
|
|
||||||
start /b scripts\prepare_npm.bat
|
|
||||||
start /b scripts\prepare_ollama.bat
|
|
|
@ -1,5 +0,0 @@
|
||||||
python313.zip
|
|
||||||
.
|
|
||||||
|
|
||||||
# Uncomment to run site.main() automatically
|
|
||||||
import site
|
|
|
@ -1,3 +0,0 @@
|
||||||
start /b scripts\run_ollama.bat
|
|
||||||
start /b scripts\run_electron.bat
|
|
||||||
start /b scripts\run_py.bat
|
|
|
@ -1,6 +0,0 @@
|
||||||
cd node-bin
|
|
||||||
set PATH=%PATH%;"%CD%";
|
|
||||||
cd ..
|
|
||||||
|
|
||||||
npm install
|
|
||||||
npm run build
|
|
|
@ -1,19 +0,0 @@
|
||||||
cd ollama-bin
|
|
||||||
start /b ollama.exe serve
|
|
||||||
timeout 5
|
|
||||||
ollama.exe pull phi3.5
|
|
||||||
ollama.exe pull qwen2-math:1.5b
|
|
||||||
ollama.exe pull starcoder2
|
|
||||||
ollama.exe pull llava-phi3
|
|
||||||
ollama.exe pull qwen2.5-coder:1.5b
|
|
||||||
ollama.exe pull starcoder2:7b
|
|
||||||
ollama.exe pull wizard-math
|
|
||||||
ollama.exe pull llama3.1
|
|
||||||
ollama.exe pull llama3.2
|
|
||||||
ollama.exe pull dolphin-phi
|
|
||||||
ollama.exe pull dolphin-llama3
|
|
||||||
ollama.exe pull dolphin-mistral
|
|
||||||
ollama.exe pull llava
|
|
||||||
ollama.exe pull qwen2.5
|
|
||||||
ollama.exe pull mathstral
|
|
||||||
ollama.exe pull qwen2.5-coder
|
|
|
@ -1,12 +0,0 @@
|
||||||
cd python-bin
|
|
||||||
set PATH=%PATH%;"%CD%";
|
|
||||||
curl -O https://bootstrap.pypa.io/get-pip.py
|
|
||||||
ren python py
|
|
||||||
py get-pip.py
|
|
||||||
cd Scripts
|
|
||||||
set PATH=%PATH%;"%CD%";
|
|
||||||
cd ..
|
|
||||||
cd ..
|
|
||||||
|
|
||||||
cd py
|
|
||||||
py -m pip install -r requirements.txt
|
|
|
@ -1,6 +0,0 @@
|
||||||
cd node-bin
|
|
||||||
set PATH=%PATH%;"%CD%";
|
|
||||||
cd ..
|
|
||||||
|
|
||||||
start /b npm start
|
|
||||||
npx electron .
|
|
|
@ -1,2 +0,0 @@
|
||||||
cd ollama-bin
|
|
||||||
start /b ollama.exe serve
|
|
|
@ -1,9 +0,0 @@
|
||||||
cd python-bin
|
|
||||||
set PATH=%PATH%;"%CD%";
|
|
||||||
cd Scripts
|
|
||||||
set PATH=%PATH%;"%CD%";
|
|
||||||
cd ..
|
|
||||||
cd ..
|
|
||||||
|
|
||||||
cd py
|
|
||||||
python api.py
|
|
Binary file not shown.
Before Width: | Height: | Size: 34 KiB |
Loading…
Reference in a new issue