2023-04-06 19:12:49 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2023-04-08 16:00:02 +00:00
|
|
|
<meta charset="utf-8">
|
2023-04-06 19:12:49 +00:00
|
|
|
<title>GPT4All - WEBUI</title>
|
2023-04-10 14:14:39 +00:00
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindcss.css') }}">
|
2023-04-06 19:12:49 +00:00
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
|
|
|
|
|
</head>
|
|
|
|
|
<body class="w-screen h-screen bg-primary text-gray-400 flex flex-col overflow-hidden">
|
|
|
|
|
<div class="w-full h-20 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>
|
2023-04-10 14:14:39 +00:00
|
|
|
<div class="border-b border-gray-200">
|
|
|
|
|
<ul class="flex border-b border-gray-200">
|
|
|
|
|
<li class="mr-1">
|
|
|
|
|
<a href="#main" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-t-md font-medium hover:text-gray-900">Main</a>
|
|
|
|
|
</li>
|
|
|
|
|
<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>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2023-04-10 18:58:53 +00:00
|
|
|
<div id="main" class="tab-pane flex flex-col">
|
|
|
|
|
<div class="w-1/3 bg-gray-200 flex flex-row border-r border-gray-400 h-screen">
|
|
|
|
|
<section>
|
2023-04-10 15:36:26 +00:00
|
|
|
<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;">
|
|
|
|
|
</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>
|
|
|
|
|
<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>
|
|
|
|
|
</section>
|
2023-04-10 14:14:39 +00:00
|
|
|
<div>
|
|
|
|
|
<h1>Discussions</h1>
|
2023-04-07 21:22:17 +00:00
|
|
|
</div>
|
2023-04-10 18:58:53 +00:00
|
|
|
<div id="discussions-list" class="overflow-y-auto h-full">
|
2023-04-10 14:14:39 +00:00
|
|
|
|
2023-04-07 21:22:17 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
2023-04-10 18:58:53 +00:00
|
|
|
<div class="flex-coll w-full h-screen">
|
|
|
|
|
<div id="chat-window" class="w-2/3 overflow-y-auto flex flex-col flex-1">
|
2023-04-10 14:14:39 +00:00
|
|
|
|
2023-04-10 18:58:53 +00:00
|
|
|
</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>
|
2023-04-10 14:14:39 +00:00
|
|
|
</div>
|
2023-04-10 18:58:53 +00:00
|
|
|
</div>
|
2023-04-10 14:14:39 +00:00
|
|
|
</div>
|
2023-04-10 18:58:53 +00:00
|
|
|
<div class="tab-pane" id="settings" style="display: non;">
|
2023-04-10 14:14:39 +00:00
|
|
|
<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">
|
|
|
|
|
<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">
|
|
|
|
|
</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 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 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 h-full opacity-0" 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 h-full opacity-0" 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 h-full opacity-0" 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 h-full opacity-0" 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 h-full opacity-0" 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 h-full opacity-0" 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>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-04-06 19:12:49 +00:00
|
|
|
|
|
|
|
|
<footer class="border-t border-accent flex">
|
|
|
|
|
</footer>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
|
2023-04-08 10:54:51 +00:00
|
|
|
<script src="{{ url_for('static', filename='js/discussions.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/db_export.js') }}"></script>
|
2023-04-10 14:14:39 +00:00
|
|
|
<script src="{{ url_for('static', filename='js/tabs.js') }}"></script>
|
2023-04-08 10:54:51 +00:00
|
|
|
|
2023-04-06 19:12:49 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
