WIP: UI is now stable

This commit is contained in:
Saifeddine ALOUI 2023-04-12 01:34:50 +02:00
parent 83e538e0f6
commit e845521cca
4 changed files with 46 additions and 29 deletions

16
app.py
View File

@ -95,6 +95,14 @@ class Gpt4AllWebUI:
"/get_args", "get_args", self.get_args, methods=["GET"]
)
self.add_endpoint(
"/extensions", "extensions", self.extensions, methods=["GET"]
)
self.add_endpoint(
"/training", "training", self.training, methods=["GET"]
)
self.add_endpoint(
"/help", "help", self.help, methods=["GET"]
)
@ -412,6 +420,14 @@ GPT4All:Welcome! I'm here to assist you with anything you need. What can I do fo
def help(self):
return render_template("help.html")
def training(self):
return render_template("training.html")
def extensions(self):
return render_template("extensions.html")
if __name__ == "__main__":
parser = argparse.ArgumentParser(description="Start the chatbot Flask app.")

View File

@ -1,13 +1,13 @@
document.getElementById('help-link').addEventListener('click', loadHelpPage);
document.getElementById('training-link').addEventListener('click', loadHelpPage);
function loadHelpPage(event) {
event.preventDefault(); // Prevent the default link behavior
fetch('/help')
fetch('/training')
.then(response => response.text())
.then(html => {
document.getElementById('help').innerHTML = html;
document.getElementById('training').innerHTML = html;
})
.catch(error => {
console.error('Error loading help page:', error);

View File

@ -8,7 +8,7 @@
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
</head>
<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900 overflow-hidden">
<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900">
<div class="w-full h-50 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6 py-6">
<div class="w-12 h-12"><img src="{{ url_for('static', filename='images/icon.png') }}"></div>
<h1>GPT4All - WEBUI</h1>
@ -70,43 +70,43 @@
</div>
<div class="tab-pane" id="settings" style="display: none;">
<div class="h-96 overflow-y-auto">
<form id="model-params-form" class="bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4">
<form id="model-params-form" class="bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-white">
<div class="mb-4">
<label class="block text-gray-500 font-bold mb-2" for="model">Model</label>
<select class="bg-gray-700 text-gray-100 shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="model" name="model" value="gpt4all-lora-quantized.bin">
<label class="block font-bold mb-2" for="model">Model</label>
<select class="bg-gray-700 shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="model" name="model" value="gpt4all-lora-quantized.bin">
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="seed">Seed</label>
<input class="bg-gray-700 text-gray-100 shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="seed" type="text" name="seed" value="0">
<label class="block font-bold mb-2" for="seed">Seed</label>
<input class="bg-gray-700 shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="seed" type="text" name="seed" value="0">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="temp">Temperature</label>
<input class="bg-gray-700 slider absolute top-0 w-full opacity-0" id="temp" type="range" min="0" max="1" step="0.1" value="0.1" name="temp">
<label class="block font-bold mb-2" for="temp">Temperature</label>
<input class="w-full slider-value" id="temp" type="range" min="0" max="1" step="0.1" value="0.1" name="temp">
<p id="slider-value">0.1</p>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="n-predict">N Predict</label>
<input class="bg-gray-700 slider absolute top-0 w-full opacity-0" id="n-predict" type="range" min="0" max="2048" step="1" value="256" name="n-predict">
<label class="block font-bold mb-2" for="n-predict">N Predict</label>
<input class="w-full slider-value" id="n-predict" type="range" min="0" max="2048" step="1" value="256" name="n-predict">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="top-k">Top K</label>
<input class="bg-gray-700 slider absolute top-0 w-full opacity-0" id="top-k" type="range" min="0" max="100" step="1" value="40" name="top-k">
<label class="block font-bold mb-2" for="top-k">Top K</label>
<input class="w-full slider-value" id="top-k" type="range" min="0" max="100" step="1" value="40" name="top-k">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="top-p">Top P</label>
<input class="bg-gray-700 slider absolute top-0 w-full opacity-0" id="top-p" type="range" min="0" max="100" step="1" value="40" name="top-p">
<label class="block font-bold mb-2" for="top-p">Top P</label>
<input class="w-full slider-value" id="top-p" type="range" min="0" max="100" step="1" value="40" name="top-p">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="repeat-penalty">Repeat penalty</label>
<input class="bg-gray-700 slider absolute top-0 w-full opacity-0" id="repeat-penalty" type="range" min="0" max="100" step="1" value="40" name="repeat-penalty">
<label class="block font-bold mb-2" for="repeat-penalty">Repeat penalty</label>
<input class="w-full slider-value" id="repeat-penalty" type="range" min="0" max="100" step="1" value="40" name="repeat-penalty">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="repeat-last-n">Repeat penalty</label>
<input class="bg-gray-700 slider absolute top-0 w-full opacity-0" id="repeat-last-n" type="range" min="0" max="100" step="1" value="40" name="repeat-last-n">
<label class="block font-bold mb-2" for="repeat-last-n">Repeat penalty</label>
<input class="w-full slider-value" id="repeat-last-n" type="range" min="0" max="100" step="1" value="40" name="repeat-last-n">
</div>
<div class="mb-4">
<button type="submit" id="submit-model-params" 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">Update parameters</button>
<button type="submit" id="submit-model-params" class="my-1 mx-1 outline-none px-4 bg-accent rounded-md bg-gray-500 hover:bg-gray-300 transition-colors ease-in-out">Update parameters</button>
</div>
</form>
</div>
@ -127,6 +127,8 @@
<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>
<script src="{{ url_for('static', filename='js/extensions.js') }}"></script>
<script src="{{ url_for('static', filename='js/training.js') }}"></script>
</body>
</html>

View File

@ -4,11 +4,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help | Your Website Name</title>
<title>Help | GPT4All-ui</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" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}"/>
<!-- Include custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/help.css') }}">
</head>
@ -42,8 +40,8 @@
<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>
<li><a href="https://github.com/nomic-ai/gpt4all-ui/graphs/contributors" class="text-blue-100">A number of very talented open-source developers without whom this project wouldn't be as awesome as it is.</a></li>
<li> We also appreciate the support of the users of this tool who have 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>
@ -51,8 +49,9 @@
<li>pyllamacpp</li>
<li>llamacpp</li>
<li>llama</li>
<li>tailwindcss</li>
</ul>
<p>Thank you to everyone who contributed to the development of this website!</p>
<p>Thank you to everyone who contributed to the development of this project!</p>
</section>
<!-- How to use section -->