Daniel Marques
feat: add llavm
22d91a3
raw
history blame
21.4 kB
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link rel="icon" type="image" href="static\social_icons\favicon.png" />
<script src="static\dependencies\jquery\3.6.0\jquery.min.js"></script>
<script src="static\dependencies\bootstrap-5.1.3-dist\js\bootstrap.min.js"></script>
<link
rel="stylesheet"
href="static\dependencies\bootstrap-5.1.3-dist\css\bootstrap.min.css"
/>
<title>localGPT</title>
</head>
<script>
function openFileSelection() {
const fileInput = document.getElementById("fileInput");
fileInput.accept = ".csv, .pdf, .txt, .doc";
fileInput.click();
fileInput.addEventListener("change", handleFileSelection);
}
function handleFileSelection(event) {
// You can perform some checks on the files here if you want
// Open the modal after file selection
const uploadModal = new bootstrap.Modal(
document.getElementById("uploadModal"),
);
uploadModal.show();
}
function submitPromptForm() {
// Show the modal
$("#responseModal").modal("show");
// Submit the form after a short delay to allow the modal to open
setTimeout(function () {
document.getElementById("promptForm").submit();
}, 5);
}
function submitForm(action) {
var form = document.getElementById("uploadForm");
var input = document.createElement("input");
input.type = "hidden";
input.name = "action";
input.value = action;
form.appendChild(input);
// After the form is submitted, close the current modal and open the new one.
$("#uploadModal").on("hidden.bs.modal", function () {
$("#ingesting-modal").modal("show");
});
if (action == "add" || action == "reset") {
$("#uploadModal").modal("hide");
}
form.submit();
}
</script>
{% if show_response_modal %}
<script>
$(document).ready(function () {
$("#response_modal").modal("show");
});
</script>
{% endif %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
body {
background-image: linear-gradient(90deg, #09203f, #0057ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.titlegpt{
font-size: 9vw;
color: white;
font-family: 'Play', sans-serif;
}
.search {
width: 100%;
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(255, 0, 0, 0.6);
background-color: #fff;
padding: 4px;
border-radius: 5px;
}
::placeholder {
color: rgb(110, 104, 104);
opacity: 1;
}
.search-2 {
position: relative;
width: 100%;
}
.search-2 input {
height: 45px;
border: none;
width: 100%;
padding-left: 100px;
padding-right: 200px;
}
.search-2 input:focus {
border-color: none;
box-shadow: none;
outline: none;
}
.search-2 i {
position: absolute;
top: 12px;
left: -10px;
font-size: 24px;
color: #eee;
}
.search-2 button {
position: absolute;
right: 100px;
top: 0px;
border: none;
height: 45px;
background-color: #ff0059;
color: #fff;
width: 90px;
border-radius: 4px;
}
.search-2 button:hover {
background: #ff0059;
color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
}
.search-2 .upload_button {
position: absolute;
right: 1px;
top: 0px;
border: none;
height: 45px;
background-color: #ff0059;
color: #fff;
width: 90px;
border-radius: 4px;
}
.cancel_button {
border: none;
height: 45px;
background-color: gray;
color: #fff;
width: 90px;
border-radius: 4px;
}
.cancel_button:hover {
background: rgb(114, 113, 113);
color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
}
.default_button {
border: none;
height: 45px;
background-color: #ff0059;
color: #fff;
width: 90px;
border-radius: 4px;
}
.default_button:hover {
background: #ff0059;
color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
}
.upload_button:hover {
background: #ff0059;
color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
}
.search-2 .tutorial_button {
position: absolute;
left: 1px;
top: 0px;
border: none;
height: 45px;
background-color: #ff0059;
color: #fff;
width: 90px;
border-radius: 4px;
}
.tutorial_button:hover {
background: #ff0059;
color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
}
.form-control:focus {
border-color: #bc13cf;
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(255, 0, 0, 0.6);
}
@media (max-width: 800px) {
.search-2 i {
left: 4px;
}
.search-2 input {
padding-left: 34px;
}
.search-2 button {
height: 37px;
top: 5px;
}
.search-2 .tutorial_button {
height: 37px;
top: 5px;
}
.search-2 .upload_button {
height: 37px;
top: 5px;
}
.search-2 input {
height: 45px;
border: none;
width: 100%;
padding-left: 100px;
padding-right: 200px;
}
.default_button {
height: 37px;
}
.cancel_button {
height: 37px;
}
}
.accordion-button:focus {
z-index: 3;
border-color: #ff0059;
box-shadow: 0 0 0 0.25rem rgba(153, 50, 168, 0.25);
}
.accordion-button:not(.collapsed) {
color:#ff0059;
background-color: #f5b3cb;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}
</style>
<body>
<div class="container">
<div class="titlegpt">LocalGPT</div>
<div class="search">
<div class="row">
<div class="col-md-12">
<div class="search-2">
<form
id="promptForm"
action="{{ url_for('home_page') }}"
method="POST"
>
<button
type="button"
class="tutorial_button"
data-bs-toggle="modal"
data-bs-target="#tutorial_modal"
>
Tutorial
</button>
<i class="bx bxs-map"></i>
<input
type="text"
name="user_prompt"
id="searchInput"
placeholder="Tell a summary of what you want to know?"
/>
<button type="button" onclick="submitPromptForm()">
Search
</button>
</form>
<form
id="uploadForm"
action="{{ url_for('home_page') }}"
method="POST"
enctype="multipart/form-data"
>
<input
type="file"
name="documents"
id="fileInput"
style="display: none"
multiple
/>
<button
type="button"
class="upload_button"
onclick="openFileSelection()"
>
Upload
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- For some reason the script needs to go here to make the the enter key also trigger the generating response modal -->
<script>
document
.getElementById("searchInput")
.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
event.preventDefault(); // Prevent form submission
submitPromptForm(); // Call the function to show the modal
}
});
</script>
<!-- Chat Response Modal -->
<div
class="modal fade"
id="response_modal"
tabindex="-1"
aria-labelledby="response_modal"
aria-hidden="true"
>
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header text-center">
<h5
class="modal-title w-100"
id="response_modal"
style="color: #292b2c"
>
Response
</h5>
</div>
<div class="modal-body text-center" style="color: #292b2c">
<strong>Search</strong>
<br />
<p>{{response_dict['Prompt']}}</p>
<strong>Answer</strong>
<br />
<p style="margin-left: 5%; margin-right: 5%">
{{response_dict['Answer']}}
</p>
<strong>Sources</strong>
<div
class="accordion"
id="accordionExample"
style="margin-top: 10px"
>
{% for item in response_dict['Sources'] %}
<div class="accordion-item">
<h2
class="accordion-header text-center"
id="heading{{ loop.index0 }}"
>
<button
class="accordion-button d-block text-center"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse{{ loop.index0 }}"
aria-expanded="true"
aria-controls="collapse{{ loop.index0 }}"
>
{{ item[0] }}
<!-- Source -->
</button>
</h2>
<div
id="collapse{{ loop.index0 }}"
class="accordion-collapse collapse {% if loop.first %}show{% endif %}"
aria-labelledby="heading{{ loop.index0 }}"
data-bs-parent="#accordionExample"
>
<div
class="accordion-body"
style="
text-align: justify;
margin-left: 5%;
margin-right: 5%;
"
>
{{ item[1] }}
<!-- Content -->
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="default_button"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<!-- Generating Response Modal -->
<div
class="modal fade"
id="responseModal"
tabindex="-1"
aria-labelledby="responseModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
data-bs-keyboard="false"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5
class="modal-title justify-content-center"
id="responseModalLabel"
>
Generating Response
</h5>
</div>
<div class="modal-body text-center">
<p>Please wait...</p>
</div>
</div>
</div>
</div>
<!-- Upload Confirmation Modal -->
<div
class="modal fade"
id="uploadModal"
tabindex="-1"
aria-labelledby="uploadModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5
class="modal-title justify-content-center"
id="uploadModalLabel"
>
File Upload Confirmation
</h5>
</div>
<div class="modal-body margin-left: 5%; text-align: left;">
<ul>
<li>
Click
<span style="background-color: #ff0059; color: white">Add</span> if
you want to add the documents selected to your pre-existing
knowledge base.
</li>
<br />
<li>
Click
<span style="background-color: #ff0059; color: white">Reset</span>
if you want to reset your knowledge base, and then use your new
documents as your new knowledge base.
</li>
<br />
<li>
Click
<span style="background-color: gray; color: white">Cancel</span>
if you don't want to make any changes.
</li>
</ul>
</div>
<div class="modal-footer justify-content-center">
<button
type="submit"
name="button_clicked"
value="add_document"
class="default_button"
onclick="submitForm('add')"
>
Add
</button>
<button
type="submit"
name="button_clicked"
value="reset_document"
class="default_button"
onclick="submitForm('reset')"
>
Reset
</button>
<button type="button" class="cancel_button" data-bs-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
<!-- Ingesting Documents Modal -->
<div
class="modal fade"
id="ingesting-modal"
tabindex="-1"
role="dialog"
data-bs-backdrop="static"
data-bs-keyboard="false"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5 class="modal-title">Ingesting Documents...</h5>
</div>
<div class="modal-body text-center">
<p>Please wait while we ingest the documents.</p>
</div>
</div>
</div>
</div>
<!-- Tutorial Modal -->
<div
class="modal fade"
id="tutorial_modal"
tabindex="-1"
aria-labelledby="tutorial_modal"
aria-hidden="true"
>
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header text-center">
<h5
class="modal-title w-100"
id="tutorial_modal"
style="color: #292b2c"
>
Tutorial
</h5>
</div>
<div class="modal-body" style="color: #292b2c">
<strong style="margin-left: 5%; text-align: left">About</strong>
<br />
<p style="text-align: justify; margin-left: 5%; margin-right: 5%">
Introducing a cutting-edge application that empowers users to
leverage the capabilities of a language model, even in the absence
of an internet connection. This advanced tool serves as an
indispensable resource for accessing information beyond the
confines of traditional language model tools such as chatGPT.
<br /><br />
One of the key advantages of this application is the preservation
of data control. This feature becomes particularly valuable when
handling sensitive data that must remain within the confines of an
organization or personal documents that warrant utmost
confidentiality, eliminating the need to transmit information
through third-party channels.
<br /><br />
Seamlessly integrating personal documents into the system is
effortless, ensuring a smooth user experience. Whether in the form
of text, PDF, CSV, or Excel files, users can conveniently provide
the desired information for inquiry. The application swiftly
processes these documents, effectively creating a comprehensive
database for the model to leverage, enabling accurate and
insightful responses.
<br /><br />
A notable benefit of this approach lies in its efficient resource
utilization. Unlike the resource-intensive retraining processes
employed by alternative methods, the ingestion of documents within
this application demands significantly less compute power. This
efficiency optimization allows for a streamlined user experience,
saving both time and computational resources.
<br /><br />
Discover the unparalleled capabilities of this technical marvel,
as it enables users to tap into the full potential of language
models, all while operating offline. Experience a new era of
information access, bolstering productivity and expanding
possibilities. Embrace this powerful tool and unlock the true
potential of your data today.
</p>
<strong style="margin-left: 5%; text-align: left"
>Upload Documents</strong
>
<br />
<p
style="
line-height: 1.75;
margin-left: 5%;
margin-right: 5%;
text-align: left;
"
>
1. To upload documents for the app to ingest as its new knowledge
base click the
<span style="background-color: #ff0059; color: white">Upload</span>
button.
<br />
2. Select the documents you want to serve as your new knowledge
base to converse with.
<br />
3. Then you will be prompted with a confirmation to either
<span style="background-color: #ff0059; color: white">Add</span> the
documents to your knowledge base,
<span style="background-color: #ff0059; color: white">Reset</span>
your knowledge base with the documents you just selected, or
<span style="background-color: gray; color: white">Cancel</span>
the upload.
<br />
4. There will be a short wait time as the documents get ingested
into the vector database as your new knowledge base.
</p>
<a
href="static/document_examples/constitution.pdf"
style="margin-left: 5%"
download
>
<button class="default_button" style="width: auto">
Example Constitution
</button>
</a>
<a href="static/document_examples/news_articles.zip" download>
<button class="default_button" style="width: auto">
Example News Articles
</button>
</a>
<br />
<br />
<strong style="margin-left: 5%; text-align: left">Searching</strong>
<p
style="
line-height: 1.75;
margin-left: 5%;
margin-right: 5%;
text-align: left;
"
>
1. In order to ask a question, type a question into the search bar
like:
<br />
2.
<span style="background-color: gray; color: white"
>Give me a summary of the documents</span
>
<br />
3. Hit enter on your keyboard or click
<span style="background-color: #ff0059; color: white">Search</span>
<br />
4. Wait while the LLM model consumes the prompt and prepares the
answer.
<br />
5. Once done, it will print the answer and the 4 sources it used
as context from your documents; you can then ask another question
without re-running the script, just wait for the prompt again.
</p>
<br />
</div>
<div class="modal-footer justify-content-center">
<button
type="button"
class="default_button"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</body>
</html>