Merge pull request 'main' (#6) from React-Group/interstellar_ai:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/6
This commit is contained in:
commit
0e1aa00c7e
16 changed files with 410 additions and 114 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -38,3 +38,6 @@ next-env.d.ts
|
||||||
|
|
||||||
.idea/
|
.idea/
|
||||||
venv/
|
venv/
|
||||||
|
|
||||||
|
key.pem
|
||||||
|
cert.pem
|
||||||
|
|
|
@ -4,7 +4,7 @@ import InputBackend from './InputBackend';
|
||||||
|
|
||||||
const AI: React.FC = () => {
|
const AI: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div className="ai-container">
|
<div>
|
||||||
<InputBackend />
|
<InputBackend />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,13 +1,124 @@
|
||||||
// AI.tsx
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
const Documentation = () => {
|
||||||
const AI: React.FC = () => {
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="documentation-container">
|
||||||
<h1>hans</h1>
|
<section id="documentation" className="documentation-section">
|
||||||
|
<h1 className="title">AI Virtual Assistant - Internship Students 2024</h1>
|
||||||
|
<h2 className="subtitle">General planning:</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
We are currently in the process of developing a Python application that leverages HTML and CSS to create an intuitive graphical user interface (GUI). This application will integrate multiple AI models through API calls, enabling users to effortlessly switch between different models tailored for specific tasks, such as coding, mathematics, and language processing. A key feature of our design is that the application will be capable of running locally, ensuring that users can access its functionality without the need for an internet connection.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
Upon receiving our assignment, we initiated the project by outlining a detailed timeline for each task to ensure a structured approach to development. This timeline serves as a roadmap, helping us allocate resources effectively and track our progress. Following this planning phase, Patrick_Pluto took the lead in creating the repository, establishing a centralized location for our codebase. Meanwhile, Yasin and sageTheDM forked the repository to begin their contributions, allowing them to work on specific features and enhancements independently.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
As we move forward, our focus will be on refining the user experience, optimizing the integration of AI models, and ensuring that the application is robust and user-friendly. We are excited about the potential of this project and are committed to delivering a high-quality application that meets the needs of our users.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Frontend planning:</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
We are committed to designing a visually appealing graphical user interface (GUI) that significantly enhances user experience and engagement. The GUI will prominently feature a chat function, allowing users to interact seamlessly with the AI Assistant. This conversational interface will facilitate easy communication, making it intuitive for users to ask questions and receive responses.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
To further improve usability, we will incorporate distinct buttons that enable users to switch effortlessly between online and offline modes. This functionality ensures that users can access the AI's capabilities regardless of their internet connectivity, making the application versatile and accommodating to various user environments.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
Additionally, the interface will provide options for users to select from a range of AI models, each tailored for specific use cases such as coding assistance, mathematical problem-solving, and language translation. This feature empowers users to choose the most suitable AI for their needs, thereby enhancing the overall effectiveness and relevance of the application.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
We will also prioritize creating an intuitive layout, ensuring that all elements are easily accessible and visually coherent. By focusing on user experience in our design, we aim to make the application not only functional but also enjoyable to use. Our goal is to create a user-friendly environment that encourages exploration and interaction, ultimately leading to a more satisfying and productive experience for all users.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Draw.io:</h2>
|
||||||
|
<p className="paragraph">Insert your Draw.io diagrams here.</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Inspiration:</h2>
|
||||||
|
<p className="paragraph">Describe your inspirations here.</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">First prototype:</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
After prototyping the Website we started working on optimizing the css and html structure, and combining the front and the backend together with each other using Flask. Since we have never once done that once it was more learning by doing than planning that is why we have not planned this step but documented it.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Web APP</h2>
|
||||||
|
<h3 className="subsection-title">QtWebEngine 5</h3>
|
||||||
|
<p className="paragraph">
|
||||||
|
We decided on going with QtWebEngine, because Qt is cross platform, and easy to use. QtWebEngine is basically a slimmed down version of Chromium that runs on the Qt Widget Framework. It looked pretty good, but the browser part is very barebones, so it broke a lot of styling.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 className="subsection-title">Styling</h3>
|
||||||
|
<p className="paragraph">
|
||||||
|
After conducting thorough testing, we discovered that even after performing a browser reset, the web application exhibited a distinct styling compared to the web version. This inconsistency prompted us to undertake a comprehensive overhaul of the entire CSS framework.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
In our redesign, we focused on enhancing the user experience by implementing custom scrollbars that align with our overall aesthetic. Additionally, we expanded upon our existing design foundation to ensure a more cohesive and visually appealing interface.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
Our efforts have resulted in a web application that is not only visually consistent across different platforms but also optimized for performance. The revamped web app is designed to be responsive, making it accessible and functional on a wide range of devices, from desktops to tablets and smartphones. This adaptability ensures that users can enjoy a seamless experience, regardless of the device they choose to use.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
Overall, these improvements reflect our commitment to delivering a high-quality product that meets the diverse needs of our users while maintaining a polished and professional appearance.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Prototype: 17.09.2024</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
Our current prototype operates on a straightforward Python backend, which, while functional, relies heavily on our optimism that it will remain stable and not encounter any critical failures or data loss.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
The existing chat system is equipped with several key features designed to enhance user interaction. Users can easily resend the AI's response, allowing for quick follow-up questions or clarifications. Additionally, the system provides the ability to edit user messages, ensuring that any mistakes can be corrected without starting the conversation anew.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
Furthermore, users have the option to copy the AI's responses, facilitating easy sharing or saving of information for future reference. These features aim to create a more flexible and user-friendly experience, allowing for seamless communication and interaction with the AI.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
While the current setup serves as a solid foundation, we recognize the need for further improvements and enhancements to ensure reliability and robustness as we move forward in the development process.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
Theoretically there is also voice recognition but let us ignore that for now.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">17.09.2024</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
After transitioning to React, we made several significant changes. We renamed our History and Models components to .left-panel, which can now be hidden when not in use. Additionally, with various optimizations through React, we’ve successfully split the CSS and HTML components into more manageable parts.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
We also made our first strides towards achieving a fully responsive website. With these changes, we are well on our way to completing the responsive design in the near future.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Backend planning:</h2>
|
||||||
|
<h3 className="subsection-title">Task:</h3>
|
||||||
|
<p className="paragraph">
|
||||||
|
We will develop an extensible backend that enables us to easily swap out different AI models, facilitating the creation of a versatile AI Virtual Assistant. This architecture will allow for seamless integration of new AI technologies as they become available, ensuring that our application remains up-to-date and capable of meeting diverse user needs.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
The backend will also incorporate advanced features such as speech recognition, allowing users to interact with the AI Assistant through voice commands for a more natural and intuitive experience. Additionally, we will implement functionality to save chat histories, enabling users to revisit previous conversations and maintain continuity in their interactions with the AI.
|
||||||
|
</p>
|
||||||
|
<p className="paragraph">
|
||||||
|
For the AI model, we will utilize Microsoft Phi 3.5, which offers robust capabilities for understanding and generating human-like responses. This choice will enhance the overall performance of the Virtual Assistant, making it a valuable tool for users seeking assistance across various tasks and topics. By combining an extensible backend with powerful AI capabilities, we aim to deliver a comprehensive and user-friendly virtual assistant experience.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Design Philosophy:</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
Our design philosophy is to create one script file per feature. This allows us to possibly reuse certain features in other projects very easily, as we can copy the individual .py files, which all work on their own, except the specific .py file for this project, which is specially tailored towards this AI chatbot.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">UML diagrams:</h2>
|
||||||
|
<p className="paragraph">Insert your UML diagrams here, one picture per diagram.</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">First Prototype:</h2>
|
||||||
|
<p className="paragraph">
|
||||||
|
You are able to simply select an AI Model, then type out what you want to ask. This Prototype is already ready to answer questions and detect what language you write in and give the answer in the corresponding language.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className="subtitle">Combining back and frontend</h2>
|
||||||
|
<h3 className="subsection-title">Flask setup</h3>
|
||||||
|
<p className="paragraph">
|
||||||
|
The flask setup was relatively quick. We had to adjust all of the file references, and add /static
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AI;
|
export default Documentation;
|
||||||
|
|
106
app/Faq.tsx
106
app/Faq.tsx
|
@ -1,13 +1,107 @@
|
||||||
// AI.tsx
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
const FAQ: React.FC = () => {
|
||||||
const AI: React.FC = () => {
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<section id="faq">
|
||||||
<h1>Peter</h1>
|
<h2>Frequently Asked Questions</h2>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>What is this AI assistant for?</h3>
|
||||||
|
<p>This AI assistant helps you with various tasks such as answering questions, generating text, and even helping with code or writing tasks.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>How does the AI assistant work?</h3>
|
||||||
|
<p>The assistant uses machine learning algorithms to understand your input and provide contextually relevant answers or generate content based on the task you've described.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Can I trust the answers given by the AI assistant?</h3>
|
||||||
|
<p>While the AI strives to give accurate and helpful answers, it is important to verify critical information, especially for complex or sensitive queries.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>What kind of questions can I ask?</h3>
|
||||||
|
<p>You can ask a wide range of questions from simple factual queries to more complex requests like generating creative writing or code snippets.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Is my data secure when using the AI assistant?</h3>
|
||||||
|
<p>We take privacy seriously. Your data is handled according to our privacy policy, ensuring that any personal information shared is securely processed and not misused.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>How can I provide feedback about the AI assistant?</h3>
|
||||||
|
<p>Feedback can be provided through our feedback form, available on our website. We appreciate your input and use it to improve the AI assistant's performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Can I customize the AI assistant's responses?</h3>
|
||||||
|
<p>Customization options are limited in the current version, but we are working on features that will allow users to tailor responses to better suit their needs.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>How frequently is the AI assistant updated?</h3>
|
||||||
|
<p>The AI assistant is updated regularly to improve its functionality and incorporate new features. Stay tuned to our update logs for information on the latest improvements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>What should I do if the AI assistant is not working properly?</h3>
|
||||||
|
<p>If you encounter any issues with the AI assistant, please contact our support team for assistance. Provide details about the problem to help us resolve it quickly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Will the AI assistant be available in multiple languages?</h3>
|
||||||
|
<p>Yes, the AI assistant is designed to support multiple languages. You can specify your language preference in the settings to receive responses in your chosen language.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>How can I integrate the AI assistant into my own application?</h3>
|
||||||
|
<p>Integration guidelines are available in our developer documentation. Follow the instructions to incorporate the AI assistant into your application via our API.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Is there a mobile version of the AI assistant?</h3>
|
||||||
|
<p>Currently, the AI assistant is optimized for desktop use. We are working on a mobile version to provide a seamless experience on smartphones and tablets.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Can the AI assistant handle multiple simultaneous conversations?</h3>
|
||||||
|
<p>Yes, the AI assistant is capable of managing multiple conversations at once, ensuring that each interaction is handled efficiently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>What are the system requirements to use the AI assistant?</h3>
|
||||||
|
<p>The AI assistant can be accessed through most modern web browsers. Ensure your browser is up-to-date for the best experience.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>How can I access previous conversations?</h3>
|
||||||
|
<p>Previous conversations can be accessed through the chat history feature available in the assistant's interface.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>What are the limitations of the current AI assistant?</h3>
|
||||||
|
<p>The AI assistant may have limitations in understanding highly specialized or nuanced topics. We are continuously working to expand its capabilities.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>How do I update my profile or settings?</h3>
|
||||||
|
<p>Profile and settings updates can be made through the account management section of the application. Ensure you save your changes before exiting.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Can the AI assistant be used offline?</h3>
|
||||||
|
<p>Currently, the AI assistant requires an internet connection to function. Offline capabilities are being explored for future updates.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-item">
|
||||||
|
<h3>Who can I contact for technical support?</h3>
|
||||||
|
<p>Technical support can be reached through our support contact page on the website. Our team is available to help with any technical issues you may encounter.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AI;
|
export default FAQ;
|
||||||
|
|
|
@ -2,41 +2,36 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
toggleDivs: () => void;
|
|
||||||
showDivs: boolean;
|
|
||||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
|
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
|
||||||
|
showDivs: boolean;
|
||||||
|
toggleDivs: () => void;
|
||||||
showHistoryModelsToggle: boolean;
|
showHistoryModelsToggle: boolean;
|
||||||
|
showToggle: boolean; // Add this prop
|
||||||
}
|
}
|
||||||
|
|
||||||
const Header: React.FC<HeaderProps> = ({ toggleDivs, showDivs, onViewChange, showHistoryModelsToggle }) => {
|
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
||||||
return (
|
return (
|
||||||
<header>
|
<header>
|
||||||
<div className="header-menu">
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" onClick={() => onViewChange('AI')}>
|
<button onClick={() => onViewChange('AI')} className="header-button">
|
||||||
<img src="/img/logo.png" alt="logo" />
|
<img src="/img/logo.png" alt="logo" className="header-logo" />
|
||||||
</a>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" onClick={() => onViewChange('Documentation')}>
|
<button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button>
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" onClick={() => onViewChange('FAQ')}>
|
<button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
|
||||||
FAQ
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
{showHistoryModelsToggle && (
|
{showToggle && showHistoryModelsToggle && (
|
||||||
<li>
|
<li>
|
||||||
<button onClick={toggleDivs}>
|
<button onClick={toggleDivs} className="header-button">
|
||||||
{showDivs ? "Hide History and Models" : "Show History and Models"}
|
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
|
import Header from "./Header";
|
||||||
|
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Next.js',
|
title: 'AI Assistant | Interstellar Development',
|
||||||
description: 'Generated by Next.js',
|
description: 'A little AI chat that is able to assist you in little tasks',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
|
@ -10,7 +13,9 @@ export default function RootLayout({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>{children}</body>
|
<body>
|
||||||
|
<main>{children}</main>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
23
app/page.tsx
23
app/page.tsx
|
@ -1,10 +1,9 @@
|
||||||
// LandingPage.tsx
|
"use client";
|
||||||
"use client"
|
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
import AI from './AI';
|
import AI from './AI';
|
||||||
import FAQ from './Faq';
|
import FAQ from './Faq'; // Ensure the import path is correct
|
||||||
import Documentation from './Documentation';
|
import Documentation from './Documentation'; // Ensure the import path is correct
|
||||||
import History from './History';
|
import History from './History';
|
||||||
import Models from './Models';
|
import Models from './Models';
|
||||||
import './styles/master.css';
|
import './styles/master.css';
|
||||||
|
@ -45,34 +44,34 @@ const LandingPage: React.FC = () => {
|
||||||
|
|
||||||
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
|
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
|
||||||
setView(view);
|
setView(view);
|
||||||
// Optionally hide the History/Models section when changing view
|
|
||||||
if (view !== 'AI') {
|
if (view !== 'AI') {
|
||||||
setShowDivs(false);
|
setShowDivs(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="container">
|
||||||
<Header
|
<Header
|
||||||
toggleDivs={toggleDivs}
|
toggleDivs={toggleDivs}
|
||||||
showDivs={showDivs}
|
showDivs={showDivs}
|
||||||
onViewChange={handleViewChange}
|
onViewChange={handleViewChange}
|
||||||
showHistoryModelsToggle={view === 'AI'}
|
showHistoryModelsToggle={true}
|
||||||
|
showToggle={view === 'AI'} // Pass the condition here
|
||||||
/>
|
/>
|
||||||
<div className="container">
|
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
|
||||||
{view === 'AI' && (
|
{showDivs && (
|
||||||
<div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
|
<div className="history-models">
|
||||||
<History />
|
<History />
|
||||||
<Models />
|
<Models />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
|
</div>
|
||||||
|
<div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
|
||||||
{view === 'AI' && <AI />}
|
{view === 'AI' && <AI />}
|
||||||
{view === 'FAQ' && <FAQ />}
|
{view === 'FAQ' && <FAQ />}
|
||||||
{view === 'Documentation' && <Documentation />}
|
{view === 'Documentation' && <Documentation />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
/* container.css */
|
/* container.css */
|
||||||
.container {
|
.container,
|
||||||
|
.content {
|
||||||
padding-top: 10vh;
|
padding-top: 10vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
@ -10,60 +11,25 @@
|
||||||
|
|
||||||
.left-panel {
|
.left-panel {
|
||||||
width: 25vw; /* Adjust as needed */
|
width: 25vw; /* Adjust as needed */
|
||||||
transition: width 0.3s ease, visibility 0.3s ease; /* Transition for width, opacity, and visibility */
|
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-panel.hidden {
|
.left-panel.hidden {
|
||||||
opacity: 0; /* Fade out when hidden */
|
opacity: 0; /* Fade out when hidden */
|
||||||
width: 0; /* Set width to 0 when hidden */
|
width: 0; /* Collapse width to 0 */
|
||||||
visibility: hidden; /* Hide the panel while keeping the space occupied */
|
visibility: hidden; /* Hide visibility while collapsing */
|
||||||
margin-right: -30vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-container {
|
.conversation-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
transition: width 0.3s ease, visibility 0.3s ease; /* Transition for margin-left */
|
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Adjust margin-left when panel is shown or hidden */
|
/* Adjust margin-left when panel is shown or hidden */
|
||||||
.conversation-container.expanded {
|
.conversation-container.expanded {
|
||||||
margin-left: 0;
|
margin-left: 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-container.collapsed {
|
.conversation-container.collapsed {
|
||||||
margin-left: 30vw; /* Same as the width of the left-panel */
|
margin-left: 1vw; /* Space for the left panel */
|
||||||
}
|
|
||||||
|
|
||||||
/* container.css */
|
|
||||||
|
|
||||||
/* Overlay styles for Documentation and FAQ */
|
|
||||||
.overlay {
|
|
||||||
position: fixed; /* Fixed positioning for overlay */
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
||||||
z-index: 1000; /* Ensure it is above other content */
|
|
||||||
display: none; /* Hidden by default */
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white; /* Text color for better readability */
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show overlay when active */
|
|
||||||
.overlay.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Specific styling for Documentation overlay */
|
|
||||||
.overlay.documentation {
|
|
||||||
/* Add specific styles for Documentation overlay if needed */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Specific styling for FAQ overlay */
|
|
||||||
.overlay.faq {
|
|
||||||
/* Add specific styles for FAQ overlay if needed */
|
|
||||||
}
|
}
|
||||||
|
|
46
app/styles/doc.css
Normal file
46
app/styles/doc.css
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
/* styles.css */
|
||||||
|
|
||||||
|
/* Styling for the documentation container */
|
||||||
|
.documentation-container {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.documentation-section {
|
||||||
|
max-width: 900px;
|
||||||
|
height: 80vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #555;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subsection-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,51 @@
|
||||||
.faq-background{
|
/* Make sure the parent container of #faq takes up the full viewport height */
|
||||||
width: 100vw;
|
.faq-container {
|
||||||
height: 100vh;
|
display: flex;
|
||||||
color: white;
|
justify-content: center; /* Center horizontally */
|
||||||
background-color: white;
|
align-items: center; /* Center vertically */
|
||||||
|
height: 100vh; /* Full viewport height */
|
||||||
|
padding: 0 10px; /* Optional padding to ensure spacing on small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
#faq {
|
||||||
|
max-width: 800px;
|
||||||
|
width: 90%;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #222;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow-y: scroll; /* Allow vertical scrolling if content overflows */
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
}
|
}
|
|
@ -11,4 +11,5 @@
|
||||||
@import './input.css';
|
@import './input.css';
|
||||||
@import './faq.css';
|
@import './faq.css';
|
||||||
@import './scrollbar.css';
|
@import './scrollbar.css';
|
||||||
|
@import './doc.css';
|
||||||
@import './responsive.css';
|
@import './responsive.css';
|
||||||
|
|
|
@ -55,3 +55,22 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Responsive design adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subsection-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
20
py/api.py
20
py/api.py
|
@ -1,5 +1,7 @@
|
||||||
from flask import Flask, request, jsonify
|
from flask import Flask, request, jsonify
|
||||||
|
from flask_cors import CORS
|
||||||
import ollama
|
import ollama
|
||||||
|
import secrets
|
||||||
|
|
||||||
|
|
||||||
class AI:
|
class AI:
|
||||||
|
@ -19,14 +21,16 @@ class AI:
|
||||||
class API:
|
class API:
|
||||||
def __init__(self):
|
def __init__(self):
|
||||||
self.app = Flask(__name__)
|
self.app = Flask(__name__)
|
||||||
self.ai_response = []
|
self.ai_response = {}
|
||||||
self.ai = AI()
|
self.ai = AI()
|
||||||
|
CORS(self.app)
|
||||||
|
|
||||||
def run(self):
|
def run(self):
|
||||||
@self.app.route('/interstellar/api/ai_create', methods=['GET'])
|
@self.app.route('/interstellar/api/ai_create', methods=['GET'])
|
||||||
def create_ai():
|
def create_ai():
|
||||||
self.ai_response.append("")
|
access_token = secrets.token_urlsafe(4096)
|
||||||
return jsonify({'status': 200, 'access_token': len(self.ai_response) - 1})
|
self.ai_response[access_token] = ""
|
||||||
|
return jsonify({'status': 200, 'access_token': access_token})
|
||||||
|
|
||||||
@self.app.route('/interstellar/api/ai_send', methods=['POST'])
|
@self.app.route('/interstellar/api/ai_send', methods=['POST'])
|
||||||
def send_ai():
|
def send_ai():
|
||||||
|
@ -35,17 +39,23 @@ class API:
|
||||||
ai_model = data.get('ai_model')
|
ai_model = data.get('ai_model')
|
||||||
system_prompt = data.get('system_prompt')
|
system_prompt = data.get('system_prompt')
|
||||||
access_token = data.get('access_token')
|
access_token = data.get('access_token')
|
||||||
|
if access_token not in self.ai_response:
|
||||||
|
return jsonify({'status': 401, 'error': 'Invalid access token'})
|
||||||
self.ai.process_local(ai_model, message, system_prompt, self, access_token)
|
self.ai.process_local(ai_model, message, system_prompt, self, access_token)
|
||||||
return jsonify({'status': 200})
|
return jsonify({'status': 200})
|
||||||
|
|
||||||
@self.app.route('/interstellar/api/ai_get', methods=['GET'])
|
@self.app.route('/interstellar/api/ai_get', methods=['GET'])
|
||||||
def get_ai():
|
def get_ai():
|
||||||
data = request.args.get('access_token')
|
data = request.args.get('access_token')
|
||||||
return jsonify({'status': 200, 'response': self.ai_response[int(data)]})
|
if data not in self.ai_response:
|
||||||
|
return jsonify({'status': 401, 'error': 'Invalid access token'})
|
||||||
|
return jsonify({'status': 200, 'response': self.ai_response[data]})
|
||||||
|
|
||||||
self.app.run(debug=True)
|
ssl_context = ('cert.pem', 'key.pem')
|
||||||
|
self.app.run(debug=True, host='0.0.0.0', port=5000, ssl_context=ssl_context)
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
api = API()
|
api = API()
|
||||||
api.run()
|
api.run()
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
openssl req -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365
|
||||||
python -m venv venv
|
python -m venv venv
|
||||||
source venv/bin/activate
|
source venv/bin/activate
|
||||||
pip install -r requirements.txt
|
pip install -r requirements.txt
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
flask
|
flask
|
||||||
|
flask-cors
|
||||||
ollama
|
ollama
|
Loading…
Reference in a new issue