mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
Merge branch 'nomic-ai:main' into main
This commit is contained in:
Andzejs Poprockis
GitHub
commit
8a0354f85b
@ -16,7 +16,7 @@ Watch usage videos [Usage Videos](https://www.youtube.com/watch?v=DCBefhJUUh4&ab
|
||||
|
||||
Watch settings videos [Usage Videos](https://www.youtube.com/watch?v=7KwR2vdt1t4&t=63s&ab_channel=ParisNeo)
|
||||
|
||||
|
||||
|
||||
|
||||
GPT4All is an exceptional language model, designed and developed by Nomic-AI, a proficient company dedicated to natural language processing. The app uses Nomic-AI's advanced library to communicate with the cutting-edge GPT4All model, which operates locally on the user's PC, ensuring seamless and efficient communication.
|
||||
|
||||
|
||||
13
scripts/convert model_with_tokenizer.bat
Normal file
13
scripts/convert model_with_tokenizer.bat
Normal file
@ -0,0 +1,13 @@
|
||||
@echo off
|
||||
@echo off
|
||||
set filename=../models/%1
|
||||
set newname=../models/%1.original
|
||||
|
||||
echo %modelPath%
|
||||
echo Converting the model to the new format...
|
||||
if not exist tmp\llama.cpp git clone https://github.com/ggerganov/llama.cpp.git tmp\llama.cpp
|
||||
cd tmp\llama.cpp
|
||||
cd ../..
|
||||
move /y "%filename%" "%newname%"
|
||||
echo Converting ...
|
||||
python tmp\llama.cpp\convert.py "%newname%" --outfile "%filename%" --vocab-dir %2
|
||||
261943
static/css/tailwind-dark.css
Normal file
261943
static/css/tailwind-dark.css
Normal file
File diff suppressed because it is too large
Load Diff
1
static/css/tailwind-dark.min.css
vendored
Normal file
1
static/css/tailwind-dark.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/css/tailwind.min.css
vendored
Normal file
1
static/css/tailwind.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/css/utilities.min.css
vendored
Normal file
1
static/css/utilities.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/images/dark.svg
Normal file
1
static/images/dark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
|
After Width: | Height: | Size: 281 B |
1
static/images/light.svg
Normal file
1
static/images/light.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#currentColor" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||
|
After Width: | Height: | Size: 651 B |
@ -18,7 +18,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
|
||||
console.log(id)
|
||||
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.classList.add('bg-secondary', 'drop-shadow-sm', 'p-4', 'mx-6', 'my-4', 'flex', 'flex-col', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300');
|
||||
messageElement.classList.add('bg-secondary', 'drop-shadow-sm', 'p-4', 'mx-6', 'my-4', 'flex', 'flex-col', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-300', 'text-black', 'dark:text-gray-200', 'dark:bg-gray-800', 'hover:bg-gray-400', 'dark:hover:bg-gray-700', 'transition-colors', 'duration-300');
|
||||
|
||||
messageElement.id = id
|
||||
//messageElement.classList.add(sender);
|
||||
|
||||
@ -54,10 +54,10 @@ function populate_discussions_list()
|
||||
discussions.forEach(discussion => {
|
||||
const buttonWrapper = document.createElement('div');
|
||||
//buttonWrapper.classList.add('flex', 'space-x-2', 'mt-2');
|
||||
buttonWrapper.classList.add('drop-shadow-sm', 'p-1', 'mx-2', 'my-2', 'flex', 'flex-row', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300', 'text-left');
|
||||
buttonWrapper.classList.add('drop-shadow-sm', 'p-1', 'mx-2', 'my-2', 'flex', 'flex-row', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-200', 'dark:bg-gray-800', 'transition-colors', 'duration-300', 'text-left');
|
||||
|
||||
const renameButton = document.createElement('button');
|
||||
renameButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
|
||||
renameButton.classList.add('bg-gray-400', 'hover:bg-gray-800', 'dark:hover:bg-gray-700', 'text-white', 'dark:text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
|
||||
const renameImg = document.createElement('img');
|
||||
renameImg.src = "/static/images/edit_discussion.png";
|
||||
renameButton.title = "Rename discussion";
|
||||
@ -86,7 +86,7 @@ function populate_discussions_list()
|
||||
});
|
||||
|
||||
const renameConfirmButton = document.createElement('button');
|
||||
renameConfirmButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-1', 'px-0', 'rounded', 'ml-2');
|
||||
renameConfirmButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'dark:text-white', 'font-bold', 'py-1', 'px-0', 'rounded', 'ml-2');
|
||||
renameConfirmButton.textContent = 'Rename';
|
||||
renameConfirmButton.addEventListener('click', () => {
|
||||
const newTitle = inputField.value;
|
||||
@ -122,7 +122,7 @@ function populate_discussions_list()
|
||||
dialog.showModal();
|
||||
});
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
|
||||
deleteButton.classList.add('bg-gray-400', 'hover:bg-gray-800', 'dark:hover:bg-gray-700', 'text-black', 'dark:text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
|
||||
const deleteImg = document.createElement('img');
|
||||
deleteImg.src = "/static/images/delete_discussion.png";
|
||||
deleteButton.title = "Delete discussion";
|
||||
@ -156,7 +156,7 @@ function populate_discussions_list()
|
||||
});
|
||||
|
||||
const discussionButton = document.createElement('button');
|
||||
discussionButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
|
||||
discussionButton.classList.add('bg-gray-400', 'hover:bg-gray-800', 'dark:hover:bg-gray-700', 'text-black', 'dark:text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
|
||||
discussionButton.textContent = discussion.title;
|
||||
discussionButton.title = "Open discussion";
|
||||
discussionButton.addEventListener('click', () => {
|
||||
|
||||
8
static/js/themechecker.js
Normal file
8
static/js/themechecker.js
Normal file
@ -0,0 +1,8 @@
|
||||
// Default starts with dark mode.
|
||||
document.documentElement.classList.add('dark');
|
||||
// Changes theme based on user's device preference when page is loaded.
|
||||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
46
static/js/themetoggle.js
Normal file
46
static/js/themetoggle.js
Normal file
@ -0,0 +1,46 @@
|
||||
var themeToggleDarkIcon = document.getElementById(
|
||||
"theme-toggle-dark-icon"
|
||||
);
|
||||
var themeToggleLightIcon = document.getElementById(
|
||||
"theme-toggle-light-icon"
|
||||
);
|
||||
|
||||
// Change the icons inside the button based on previous settings
|
||||
if (
|
||||
localStorage.getItem("color-theme") === "dark" ||
|
||||
(!("color-theme" in localStorage) &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
) {
|
||||
themeToggleLightIcon.classList.remove("hidden");
|
||||
} else {
|
||||
themeToggleDarkIcon.classList.remove("hidden");
|
||||
}
|
||||
|
||||
var themeToggleBtn = document.getElementById("theme-toggle");
|
||||
|
||||
themeToggleBtn.addEventListener("click", function () {
|
||||
// toggle icons inside button
|
||||
themeToggleDarkIcon.classList.toggle("hidden");
|
||||
themeToggleLightIcon.classList.toggle("hidden");
|
||||
|
||||
// if set via local storage previously
|
||||
if (localStorage.getItem("color-theme")) {
|
||||
if (localStorage.getItem("color-theme") === "light") {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("color-theme", "dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("color-theme", "light");
|
||||
}
|
||||
|
||||
// if NOT set via local storage previously
|
||||
} else {
|
||||
if (document.documentElement.classList.contains("dark")) {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("color-theme", "light");
|
||||
} else {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("color-theme", "dark");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
purge: [],
|
||||
darkMode: 'media', // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
content: [
|
||||
'./templates/index.html',
|
||||
'./templates/main.html',
|
||||
]
|
||||
}
|
||||
@ -1,8 +1,18 @@
|
||||
This section is under development. Stay tuned.<br>
|
||||
To have a glimpse of what extensions and options will be added, please look at my chatgpt-personality-selector google chrome extension:<br>
|
||||
<br>
|
||||
* <a href="https://chrome.google.com/webstore/detail/chatgpt-personality-selec/jdmpccdlifdkhniemenfmieffkdblahk?hl=en">https://chrome.google.com/webstore/detail/chatgpt-personality-selec/jdmpccdlifdkhniemenfmieffkdblahk?hl=en</a>
|
||||
<br>
|
||||
<br>
|
||||
After installing the extension, go to <a href="chat.openai.com/chat"/> and the extension popup will apear.<br>
|
||||
All personalities will be implemented to gpt4All and can be used with any llamacpp model.
|
||||
|
||||
<form id="model-params-form" class="bg-gray-50 dark:bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-black dark:text-white">
|
||||
<div></div>
|
||||
<div class="mb-4">
|
||||
<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">save extensions settings</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<footer class="bottom-0 text-black dark:text-white">
|
||||
This section is under development. Stay tuned.<br>
|
||||
To have a glimpse of what extensions and options will be added, please look at my chatgpt-personality-selector google chrome extension:<br>
|
||||
<br>
|
||||
* <a href="https://chrome.google.com/webstore/detail/chatgpt-personality-selec/jdmpccdlifdkhniemenfmieffkdblahk?hl=en">https://chrome.google.com/webstore/detail/chatgpt-personality-selec/jdmpccdlifdkhniemenfmieffkdblahk?hl=en</a>
|
||||
<br>
|
||||
<br>
|
||||
After installing the extension, go to <a href="chat.openai.com/chat"/> and the extension popup will apear.<br>
|
||||
All personalities will be implemented to gpt4All and can be used with any llamacpp model.
|
||||
</footer>
|
||||
|
||||
@ -6,14 +6,17 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Help | GPT4All-ui</title>
|
||||
<!-- Include Tailwind CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}"/>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/utilities.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}">
|
||||
<!-- 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">
|
||||
<nav class="flex justify-between items-center bg-gray-200 dark:bg-gray-900 text-black dark:text-white p-4">
|
||||
<a href="/" class="text-lg font-bold">GPT4All-ui</a>
|
||||
<!-- Dropdown menu -->
|
||||
<div class="relative">
|
||||
@ -35,13 +38,13 @@
|
||||
</nav>
|
||||
|
||||
<!-- Credits section -->
|
||||
<section id="credits" class="mb-8">
|
||||
<section id="credits" class="mb-8 ml-4 text-black dark:text-white">
|
||||
<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" 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><a href="https://github.com/nomic-ai/gpt4all-ui/graphs/contributors" target="_blank" class="text-blue-900 dark:text-blue-600">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>
|
||||
|
||||
@ -56,7 +59,7 @@
|
||||
</section>
|
||||
|
||||
<!-- How to use section -->
|
||||
<section id="how-to-use" class="mb-8">
|
||||
<section id="how-to-use" class="mb-8 ml-4 text-black dark:text-white">
|
||||
<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>
|
||||
@ -75,8 +78,8 @@
|
||||
|
||||
<!-- FAQ section -->
|
||||
<section id="faq">
|
||||
<h2 class="text-2xl font-bold mb-4">Frequently Asked Questions (FAQ)</h2>
|
||||
<dl class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-4 ml-4 text-black dark:text-white">Frequently Asked Questions (FAQ)</h2>
|
||||
<dl class="mb-8 ml-4 text-black dark:text-white">
|
||||
<div class="mb-4">
|
||||
<dt class="font-bold">How to install?</dt>
|
||||
<dd>Download the model from the github then use install.bat for windows and install.sh for linux/macOsX.</dd>
|
||||
@ -84,8 +87,8 @@
|
||||
</dl>
|
||||
</section>
|
||||
<section id="examples">
|
||||
<h2 class="text-2xl font-bold mb-4">Usage examples</h2>
|
||||
<dl class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-4 ml-4 text-black dark:text-white">Usage examples</h2>
|
||||
<dl class="mb-8 ml-4 text-black dark:text-white">
|
||||
<div class="mb-4">
|
||||
<dt class="font-bold">Casual discussion</dt>
|
||||
<dd>Hello, my name is (put your name here).</dd>
|
||||
|
||||
@ -1,62 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="mode-dark">
|
||||
<head>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GPT4All - WEBUI</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/utilities.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind-dark.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
|
||||
<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-200 dark:bg-gray-900 h-screen overflow-hidden">
|
||||
<div class="w-full h-50 border-b-4 border-black dark:border-gray-600 text-2xl font-bold flex justify-between items-center px-6 py-6">
|
||||
<div class="flex">
|
||||
<div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
|
||||
<div class="contents">
|
||||
<button id="theme-toggle" type="button" class="ml-5 bg-gray-200 dark:bg-gray-900 hover:bg-gray-300 dark:hover:bg-gray-500 rounded-lg text-sm p-2.5">
|
||||
<img id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" src="{{ url_for('static', filename='images/dark.svg') }}"></img>
|
||||
<img id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" src="{{ url_for('static', filename='images/light.svg') }}"></img>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-2xl text-black dark:text-white">GPT4ALL - WEBUI</h1>
|
||||
</div>
|
||||
<div class="content-center items-center mt-4">
|
||||
<ul class="flex
|
||||
content-center items-center">
|
||||
<li class="mr-1">
|
||||
<a href="#main" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="main-link">Main</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#settings" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="settings-link">Settings</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#extensions" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="extensions-link">Extensions</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#training" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="training-link">Training</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#help" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="help-link">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main" class="tab-pane flex flex-row flex-1">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="settings" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="extensions" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="training" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="help" style="display: none;">
|
||||
</div>
|
||||
<footer class="border-t border-accent flex">
|
||||
</footer>
|
||||
|
||||
</head>
|
||||
<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900 h-screen overflow-hidden">
|
||||
<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"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
|
||||
<h1>GPT4All - WEBUI</h1>
|
||||
</div>
|
||||
<div class="border-b border-gray-800 content-center items-center">
|
||||
<ul class="flex border-b border-gray-800 content-center items-center">
|
||||
<li class="mr-1">
|
||||
<a href="#main" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="main-link">Main</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#settings" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="settings-link">Settings</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#extensions" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="extensions-link">Extensions</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#training" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="training-link">Training</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a href="#help" class="bg-gray-700 text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-200 hover:text-black" id="help-link">Help</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main" class="tab-pane flex flex-row flex-1">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="settings" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="extensions" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="training" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane flex-1 overflow-auto" id="help" style="display: none;">
|
||||
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/discussions.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/extensions.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/training.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/help.js') }}"></script>
|
||||
|
||||
</div>
|
||||
<footer class="border-t border-accent flex">
|
||||
</footer>
|
||||
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/discussions.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/extensions.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/training.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/help.js') }}"></script>
|
||||
<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/audio.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/tabs.js') }}"></script>
|
||||
|
||||
<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/audio.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/tabs.js') }}"></script>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/themechecker.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/themetoggle.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<div class="flex h-screen w-screen">
|
||||
<div class="w-1/4 flex flex-col rounded bg-gray-700 text-white h-full overflow-hidden">
|
||||
<div id="action-buttons" class="flex-shrink-0 h-20">
|
||||
<button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600">
|
||||
<div class="w-1/4 flex flex-col rounded bg-gray-50 dark:bg-gray-700 text-white h-full overflow-hidden">
|
||||
<div id="action-buttons" class="flex-shrink-0 h-10 ml-1.5 mt-2 mb-4">
|
||||
<button id="new-discussion-btn" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
|
||||
<img src="/static/images/new_message.png" class="w-5 h-5">
|
||||
</button>
|
||||
<button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600">
|
||||
<button id="reset-discussions-btn" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
|
||||
<img src="/static/images/reset_db.png" class="w-5 h-5">
|
||||
</button>
|
||||
<button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600">
|
||||
<button value="Export" id="export-button" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
|
||||
<img src="/static/images/export_database.png" class="w-5 h-5">
|
||||
</button>
|
||||
<button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600">
|
||||
<button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
|
||||
<img src="/static/images/export_discussion.png" class="w-5 h-5">
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 p-0">
|
||||
<h1 class="font-bold font-large">Discussions</h1>
|
||||
<div class="flex-shrink-0 p-0 ml-1.5">
|
||||
<h1 class="font-bold font-large text-black dark:text-white">Discussions</h1>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-0">
|
||||
<div id="discussions-list" class="pb-96" >
|
||||
@ -23,19 +23,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="flex-shrink-0 p-4 bg-gray-700 text-white">
|
||||
<div class="flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-700 pl-7 text-black dark:text-white">
|
||||
<h1 class="font-bold font-large">Chat box</h1>
|
||||
</div>
|
||||
<div class="flex-grow overflow-y-auto p-0 bg-gray-700 rounded">
|
||||
<div class="flex-grow overflow-y-auto p-0 bg-gray-50 dark:bg-gray-700 rounded">
|
||||
<div id="chat-window" class="pb-96">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mx-2 flex flex-row bottom-0 fixed rounded shadow shadow-white bg-gray-300 flex-wrap">
|
||||
<form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
|
||||
<input type="text" id="user-input" placeholder="Type your message..." class="bg-gray-600 my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md">
|
||||
<div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
|
||||
<input type="submit" value="Send" id="submit-input" 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">
|
||||
</form>
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="w-full flex bottom-0 fixed rounded-sm shadow shadow-white bg-gray-300 p-1 dark:bg-gray-500 flex-wrap">
|
||||
<form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
|
||||
<input type="text" id="user-input" placeholder="Type your message..." class="dark:bg-gray-600 pl-1 pr-1 py-1 my-1 mr-2 text-black dark:text-white outline-none drop-shadow-sm w-full rounded-md flex-1">
|
||||
<div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
|
||||
<input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 dark:bg-gray-900 text-black dark:text-white rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1] transition-colors ease-in-out">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,56 +1,56 @@
|
||||
<div class="h-full 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 text-white">
|
||||
<div class="mb-4">
|
||||
<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">
|
||||
<form id="model-params-form" class="bg-gray-50 dark:bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-black dark:text-white">
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold" for="model">Model</label>
|
||||
<select class="bg-gray-200 dark:bg-gray-700 w-96 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline">
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2" for="model">Personalities</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="personalities" name="personalities" value="gpt4all_chatbot.yaml">
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="model">Personalities</label>
|
||||
<select class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="personalities" name="personalities" value="gpt4all_chatbot.yaml">
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2" for="model">Language</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="language" name="language" value="english">
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="model">Language</label>
|
||||
<select class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="language" name="language" value="english">
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2" for="model">Voice</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="voice" name="voice" value="english">
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="model">Voice</label>
|
||||
<select class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="voice" name="voice" value="english">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<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 class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="seed">Seed</label>
|
||||
<input class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded 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 flex-row">
|
||||
<label class="font-bold mb-2" for="temp" id="temperature-value">Temperature (0.1)</label>
|
||||
<input class="slider-value" id="temp" type="range" min="0" max="1" step="0.1" value="0.1" name="temp">
|
||||
</div>
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="n-predict" id="n-predict-value">N Predict (256)</label>
|
||||
<input class="slider-value" id="n-predict" type="range" min="0" max="2048" step="1" value="256" name="n-predict">
|
||||
</div>
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="top-k" id="top-k-value">Top K</label>
|
||||
<input class="slider-value" id="top-k" type="range" min="0" max="100" step="1" value="40" name="top-k">
|
||||
</div>
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="top-p" id="top-p-value">Top P</label>
|
||||
<input class="slider-value" id="top-p" type="range" min="0" max="1" step="0.01" value="0.95" name="top-p">
|
||||
</div>
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="repeat-penalty" id="repeat-penalty-value">Repeat penalty</label>
|
||||
<input class="slider-value" id="repeat-penalty" type="range" min="0" max="2" step="0.01" value="1.3" name="repeat-penalty">
|
||||
</div>
|
||||
<div class="mb-4 flex-row">
|
||||
<label class="font-bold mb-2" for="repeat-last-n" id="repeat-last-n-value">Repeat last N</label>
|
||||
<input class="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">
|
||||
<label class="block font-bold mb-2" for="temp" id="temperature-value">Temperature (0.1)</label>
|
||||
<input class="w-full slider-value" id="temp" type="range" min="0" max="1" step="0.1" value="0.1" name="temp">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2" for="n-predict" id="n-predict-value">N Predict (256)</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 font-bold mb-2" for="top-k" id="top-k-value">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 font-bold mb-2" for="top-p" id="top-p-value">Top P</label>
|
||||
<input class="w-full slider-value" id="top-p" type="range" min="0" max="1" step="0.01" value="0.95" name="top-p">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2" for="repeat-penalty" id="repeat-penalty-value">Repeat penalty</label>
|
||||
<input class="w-full slider-value" id="repeat-penalty" type="range" min="0" max="2" step="0.01" value="1.3" name="repeat-penalty">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block font-bold mb-2" for="repeat-last-n" id="repeat-last-n-value">Repeat last N</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 rounded-md bg-gray-500 hover:bg-gray-300 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-200 hover:bg-gray-300 py-1 dark:bg-gray-500 dark:hover:bg-gray-300 transition-colors ease-in-out">Update parameters</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user