ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-19 04:17:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP: New version of the UI

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-04-12 00:10:36 +02:00
parent 0157ddf2b3
commit 2395f449f6
2 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/js/discussions.js
View File

@ -10,13 +10,13 @@ function populate_discussions_list()
discussions.forEach(discussion => {
const buttonWrapper = document.createElement('div');
//buttonWrapper.classList.add('flex', 'space-x-2', 'mt-2');
buttonWrapper.classList.add('flex', 'items-center', 'mt-2', 'px-2', 'py-4', 'text-left');
buttonWrapper.classList.add('flex', 'items-center', 'mt-2', 'px-2', 'py-1', 'text-left');
const renameButton = document.createElement('button');
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.classList.add('py-2', 'px-2', 'rounded', 'w-10', 'h-10');
renameImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
renameButton.appendChild(renameImg);
//renameButton.style.backgroundImage = "/rename_discussion.svg"; //.textContent = 'Rename';
@ -77,10 +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-2', 'px-4', 'rounded', 'ml-2', 'mr-2',"w-20","h-20");
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.classList.add('py-2', 'px-2', 'rounded', 'w-10', 'h-10');
deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
deleteButton.addEventListener('click', () => {
fetch('/delete_discussion', {

62
templates/chat.html
View File

@ -6,8 +6,8 @@
<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 bg-blue-1000">
<div class="w-full h-20 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6">
<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-blue-1000">
<div class="w-full h-25 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6">
<div class="w-12 h-12"><img src="{{ url_for('static', filename='images/icon.png') }}"></div>
<h1>GPT4All - WEBUI</h1>
</div>
@ -32,40 +32,40 @@
</div>
<div id="main" class="tab-pane bg-gray-800">
<div class="grid grid-cols-3 gap-4">
<section class="col-span-1 bg-gray-800">
<section id="action-buttons" class="bg-gray-800">
<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="">
<img src="/static/images/export_database.png" class="w-10 h-10">
</button>
<button value="Export" id="export-discussion-button" class="">
<img src="/static/images/export_discussion.png" class="w-10 h-10">
</button>
<section class="col-span-1 bg-gray-800 overflow-y-auto">
<section id="action-buttons" class="bg-gray-800 px-4 py-4">
<button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600 ">
<img src="/static/images/new_message.png" class="w-10 h-10">
</button>
<button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600">
<img src="/static/images/export_database.png" class="w-10 h-10">
</button>
<button value="Export" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600">
<img src="/static/images/export_discussion.png" class="w-10 h-10">
</button>
</section>
<div>
<h1 class="font-bold font-large">Discussions</h1>
</div>
<div id="discussions-list" class="overflow-y-auto">
</div>
</section>
<section class="col-span-2 bg-gray-400">
<div id="chat-window" class="overflow-y-auto">
</div>
</section>
<div>
<h1>Discussions</h1>
</div>
<div id="discussions-list" class="overflow-y-auto">
</div>
</section>
<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">
<input type="text" id="user-input" placeholder="Type your message..." class="bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2">
<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">
<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>
</form>
</section>
</div>
<form id="chat-form" class="flex w-full mt-auto">
<input type="text" id="user-input" placeholder="Type your message..." class="bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2">
<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">
<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>
</form>
</div>
<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">
<form id="model-params-form" class="bg-white shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="model">Model</label>
<select class="bg-gray-700 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="model" name="model" value="gpt4all-lora-quantized.bin">