Medical_RAG / templates /index.html
Surbhi123's picture
Upload folder using huggingface_hub
64772a4 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bio Medical RAG App</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
body {
background-color: black;
font-family: "Poppins", sans-serif;
color: white;
}
.chat-container {
max-width: 800px;
margin: 50px auto;
margin-top: 10%;
padding: 20px;
background-color: #333;
border-radius: 10px;
}
.chat-heading {
text-align: center;
font-size: 2.5em;
font-weight: 600;
margin-bottom: 30px;
color: #ffd700; /* Golden color for the heading */
}
.chat-input {
margin-top: 20px; /* Added margin */
margin-bottom: 20px;
height: 100px; /* Increased height */
}
.chat-button {
background-color: green;
color: white;
padding: 10px 20px;
font-size: 1.2em;
}
.chat-response {
background-color: #444;
padding: 15px;
border-radius: 5px;
min-height: 100px; /* Minimum height for the response box */
margin-top: 20px;
}
.accordion {
margin-top: 20px;
background-color: #444;
border-radius: 5px;
}
.accordion-button {
color: white;
background-color: #555;
}
.accordion-body {
color: white; /* Improved visibility of text */
}
pre {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="container chat-container">
<h1 class="chat-heading">Bio Medical RAG App</h1>
<div class="accordion" id="appDescriptionAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="descriptionHeading">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseDescription"
aria-expanded="true"
aria-controls="collapseDescription"
>
About This App
</button>
</h2>
<div
id="collapseDescription"
class="accordion-collapse collapse"
aria-labelledby="descriptionHeading"
data-bs-parent="#appDescriptionAccordion"
>
<div class="accordion-body text-dark">
This is a RAG implementation using Open Source stack. BioLLM 8B
has been used to build this app along with ClinicalBert as an
embedding model, Qdrant as a self hosted Vector DB, and Langchain
& Llama CPP as an orchestration frameworks.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<textarea
id="userInput"
class="form-control chat-input"
placeholder="Type your query here..."
></textarea>
<button id="submitBtn" class="btn chat-button">Submit</button>
<div id="response" class="chat-response"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document
.getElementById("submitBtn")
.addEventListener("click", async function () {
var userInput = document.getElementById("userInput").value;
document.getElementById("response").innerHTML =
"<p>Processing...</p>";
const formData = new FormData();
formData.append("query", userInput);
try {
const response = await fetch("/get_response", {
method: "POST",
body: formData,
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
document.getElementById(
"response"
).innerHTML = `<p>${data.answer}</p><br><pre><b>Context: </b> ${data.source_document}</pre><br><pre><b>Source Document: </b> ${data.doc}</pre>`;
} catch (error) {
console.error("Error:", error);
document.getElementById("response").innerHTML =
"<p>Error processing your request</p>";
}
});
</script>
</body>
</html>