mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
WIP test
This commit is contained in:
Saifeddine ALOUI
parent
373c9e266c
commit
7125afffb4
6
app.py
6
app.py
@ -95,6 +95,10 @@ class Gpt4AllWebUI:
|
||||
"/get_args", "get_args", self.get_args, methods=["GET"]
|
||||
)
|
||||
|
||||
self.add_endpoint(
|
||||
"/help", "help", self.help, methods=["GET"]
|
||||
)
|
||||
|
||||
self.prepare_a_new_chatbot()
|
||||
|
||||
def list_models(self):
|
||||
@ -406,6 +410,8 @@ GPT4All:Welcome! I'm here to assist you with anything you need. What can I do fo
|
||||
def get_args(self):
|
||||
return jsonify(self.args)
|
||||
|
||||
def help(self):
|
||||
return render_template("help.html")
|
||||
|
||||
if __name__ == "__main__":
|
||||
parser = argparse.ArgumentParser(description="Start the chatbot Flask app.")
|
||||
|
||||
42
static/css/help.css
Normal file
42
static/css/help.css
Normal file
@ -0,0 +1,42 @@
|
||||
/* Style for the help page */
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.section-title p {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.list-disc,
|
||||
.list-decimal {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.list-inside {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.faq dt {
|
||||
font-weight: bold;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.faq dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
1
static/css/tailwindcss.min.css
vendored
Normal file
1
static/css/tailwindcss.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -13,11 +13,10 @@ function populate_discussions_list()
|
||||
buttonWrapper.classList.add('flex', 'items-center', 'mt-2', 'py-4', 'text-left');
|
||||
|
||||
const renameButton = document.createElement('button');
|
||||
renameButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', 'mr-2');
|
||||
renameButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-2', 'rounded', 'ml-2', 'mr-2',"w-20","h-20");
|
||||
const renameImg = document.createElement('img');
|
||||
renameImg.src = "/static/images/edit_discussion.png";
|
||||
renameImg.style.width='20px'
|
||||
renameImg.style.height='20px'
|
||||
renameImg.classList.add('py-2', 'px-2', 'rounded', 'w-10', 'h-10');
|
||||
renameButton.appendChild(renameImg);
|
||||
|
||||
//renameButton.style.backgroundImage = "/rename_discussion.svg"; //.textContent = 'Rename';
|
||||
@ -78,11 +77,10 @@ function populate_discussions_list()
|
||||
dialog.showModal();
|
||||
});
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', 'ml-2');
|
||||
deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'mr-2',"w-20","h-20");
|
||||
const deleteImg = document.createElement('img');
|
||||
deleteImg.src = "/static/images/delete_discussion.png";
|
||||
deleteImg.style.width='20px'
|
||||
deleteImg.style.height='20px'
|
||||
deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-10', 'h-10');
|
||||
|
||||
deleteButton.addEventListener('click', () => {
|
||||
fetch('/delete_discussion', {
|
||||
@ -112,7 +110,7 @@ function populate_discussions_list()
|
||||
});
|
||||
|
||||
const discussionButton = document.createElement('button');
|
||||
discussionButton.classList.add('flex-grow', 'w-full', 'bg-blue-500', 'hover:bg-blue-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'text-left', 'hover:text-white');
|
||||
discussionButton.classList.add('bg-blue-500', 'hover:bg-blue-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full', 'h-20');
|
||||
discussionButton.textContent = discussion.title;
|
||||
discussionButton.addEventListener('click', () => {
|
||||
// send query with discussion id to reveal discussion messages
|
||||
|
||||
15
static/js/help.js
Normal file
15
static/js/help.js
Normal file
@ -0,0 +1,15 @@
|
||||
document.getElementById('help-link').addEventListener('click', loadHelpPage);
|
||||
|
||||
|
||||
function loadHelpPage(event) {
|
||||
event.preventDefault(); // Prevent the default link behavior
|
||||
|
||||
fetch('/help')
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
document.getElementById('help').innerHTML = html;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading help page:', error);
|
||||
});
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GPT4All - WEBUI</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
|
||||
</head>
|
||||
<body class="w-screen h-full bg-primary text-gray-400 flex flex-col">
|
||||
@ -19,20 +19,29 @@
|
||||
<li class="mr-1">
|
||||
<a href="#settings" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-t-md font-medium hover:text-gray-900">Settings</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#extensions" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-t-md font-medium hover:text-gray-900">Extensions</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#training" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-t-md font-medium hover:text-gray-900">Training</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#help" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-t-md font-medium hover:text-gray-900" id="help-link">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main" class="tab-pane flex flex-col">
|
||||
<div class="w-1/3 bg-gray-200 flex flex-row">
|
||||
<section>
|
||||
<section id="action-buttons" class="flex-none md:border-b border-accent flex flex-row md:flex-row">
|
||||
<button id="new-discussion-btn" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1] transition-colors ease-in-out">
|
||||
<img src="/static/images/new_message.png" style="width: 20px;height: 20px;">
|
||||
<div id="main" class="tab-pane">
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<section class="col-span-1 bg-gray-200">
|
||||
<section id="action-buttons" class="bg-gray-100">
|
||||
<button id="new-discussion-btn" class="">
|
||||
<img src="/static/images/new_message.png" class="w-10 h-10">
|
||||
</button>
|
||||
<button value="Export" id="export-button" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1] transition-colors ease-in-out">
|
||||
<img src="/static/images/export_database.png" style="width: 20px;height: 20px;">
|
||||
<button value="Export" id="export-button" class="">
|
||||
<img src="/static/images/export_database.png" class="w-10 h-10">
|
||||
</button>
|
||||
<button value="Export" id="export-discussion-button" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1] transition-colors ease-in-out">
|
||||
<img src="/static/images/export_discussion.png" style="width: 20px;height: 20px;">
|
||||
<button value="Export" id="export-discussion-button" class="">
|
||||
<img src="/static/images/export_discussion.png" class="w-10 h-10">
|
||||
</button>
|
||||
</section>
|
||||
<div>
|
||||
@ -42,8 +51,8 @@
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex-coll w-full">
|
||||
<div id="chat-window" class="w-2/3 overflow-y-auto flex flex-col h-500">
|
||||
<section class="col-span-2 bg-gray-400">
|
||||
<div id="chat-window" class="overflow-y-auto">
|
||||
|
||||
</div>
|
||||
<form id="chat-form" class="flex w-full mt-auto">
|
||||
@ -54,7 +63,7 @@
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings" style="display: non;">
|
||||
<div class="tab-pane" id="settings" style="display: none;">
|
||||
<div class="h-96 overflow-y-auto">
|
||||
<form id="model-params-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="mb-4">
|
||||
@ -97,7 +106,13 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="extensions" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane" id="training" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane" id="help" style="display: none;">
|
||||
|
||||
</div>
|
||||
<footer class="border-t border-accent flex">
|
||||
</footer>
|
||||
<script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
|
||||
@ -106,6 +121,7 @@
|
||||
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/db_export.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/tabs.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/help.js') }}"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
templates/extensions.html
Normal file
1
templates/extensions.html
Normal file
@ -0,0 +1 @@
|
||||
This section is under development. Stay tuned.
|
||||
102
templates/help.html
Normal file
102
templates/help.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Help | Your Website Name</title>
|
||||
<!-- Include Tailwind CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}"
|
||||
integrity="sha512-PNlNwDXNLGt8dJtS5o5bw5aEabz7V9/TwGssCt7E8BX0y4bt4p4z96B+VbX9t2Zc29KKnJw2e0VHMC3KjJyLQ=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<!-- Include custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/help.css') }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="flex justify-between items-center bg-gray-900 text-white p-4">
|
||||
<a href="/" class="text-lg font-bold">GPT4All-ui</a>
|
||||
<!-- Dropdown menu -->
|
||||
<div class="relative">
|
||||
<button class="flex items-center text-lg font-bold">
|
||||
Help
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
class="ml-2 h-5 w-5 transform transition-transform duration-300">
|
||||
<path fill-rule="evenodd"
|
||||
d="M6.293 6.293a1 1 0 0 0-1.414 1.414L8.586 12l-3.707 3.293a1 1 0 1 0 1.414 1.414l4-4a1 1 0 0 0 0-1.414l-4-4a1 1 0 0 0-.707-.293zm7.414 0a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 1 1-1.414-1.414L11.414 12l3.293-3.293a1 1 0 0 1 1.414 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="absolute right-0 w-40 mt-2 py-2 bg-white rounded-md shadow-xl z-10 hidden">
|
||||
<li><a href="#credits" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Credits</a></li>
|
||||
<li><a href="#how-to-use" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">How to use</a></li>
|
||||
<li><a href="#faq" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Credits section -->
|
||||
<section id="credits" class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-4">Credits</h2>
|
||||
<p class="mb-4">Here are the developers who worked on this website:</p>
|
||||
<ul class="list-disc list-inside mb-4">
|
||||
<li>@ParisNeo : Creator of the project and Lead developer</li>
|
||||
<li>@AndriyMulyar : CEO of Nomic-ai who offered to link the project as their official ui for GPT4All</li>
|
||||
<li><a href="https://github.com/nomic-ai/gpt4all-ui/graphs/contributors">A number of very talented open source developers without whome this project wouldn't be as awesome as it is.</a></li>
|
||||
<li>You, the users of this tool who helped us in various ways</li>
|
||||
</ul>
|
||||
|
||||
<p class="mb-4">We would also like to acknowledge the following open-source projects that we used:</p>
|
||||
<ul class="list-disc list-inside mb-4">
|
||||
<li>pyllamacpp</li>
|
||||
<li>llamacpp</li>
|
||||
<li>llama</li>
|
||||
</ul>
|
||||
<p>Thank you to everyone who contributed to the development of this website!</p>
|
||||
</section>
|
||||
|
||||
<!-- How to use section -->
|
||||
<section id="how-to-use" class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-4">How to use</h2>
|
||||
<ol class="list-decimal list-inside mb-4">
|
||||
<li>Step 1: Write your prompt.</li>
|
||||
<li>Step 2: Press enter or click the send button.</li>
|
||||
<li>Step 3: Read the output.</li>
|
||||
<li>Step 4: Rank the output if you want or edit it.</li>
|
||||
<li>Step 5: Continue the discussion untill you have no more queries.</li>
|
||||
</ol>
|
||||
<p class="mb-4">Here are some tips and tricks to help you get the most out of this website:</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>Tip 1: Be specific with your questions.</li>
|
||||
<li>Tip 2: The model needs to be tamed. So try to put it in the mood to answer your question.</li>
|
||||
<li>Tip 3: The model can give helarious, false or completely made up responses. So be vigilant not to use the model for sensitive subjects like medication or financial advice</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- FAQ section -->
|
||||
<section id="faq">
|
||||
<h2 class="text-2xl font-bold mb-4">Frequently Asked Questions (FAQ)</h2>
|
||||
<dl class="mb-8">
|
||||
<div class="mb-4">
|
||||
<dt class="font-bold">How to install?</dt>
|
||||
<dd>Download the model from .</dd>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<dt class="font-bold">Question 2?</dt>
|
||||
<dd>Answer to question 2.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="font-bold">Question 3?</dt>
|
||||
<dd>Answer to question 3.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Include jQuery and custom JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
integrity="sha384-/Y6p6TKLrLCf7N6EWeWvB8KK9gBhuivtJ5f5r5cVzs3s15LYGroMNFaGv/ZeCwPb"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/help.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1
templates/training.html
Normal file
1
templates/training.html
Normal file
@ -0,0 +1 @@
|
||||
This section is under development. Stay tuned.
|
||||
Loading…
Reference in New Issue
Block a user