Spaces:
Build error
Build error
<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> | |