Spaces:
Sleeping
Sleeping
File size: 4,510 Bytes
8338481 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Patent RAG QA 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/[email protected]/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">Patent RAG QA 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.
</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/[email protected]/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> |