130 lines
4.9 KiB
HTML
130 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Agentive RAG System</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Agentive RAG System</h1>
|
||
|
|
<form id="query-form">
|
||
|
|
<textarea id="query-text" placeholder="Enter your query here..." required></textarea>
|
||
|
|
<button type="submit">Submit</button>
|
||
|
|
</form>
|
||
|
|
<form id="upload-form" enctype="multipart/form-data">
|
||
|
|
<input type="file" id="file-input" accept=".txt" required>
|
||
|
|
<button type="submit">Upload</button>
|
||
|
|
</form>
|
||
|
|
<form id="react-query-form">
|
||
|
|
<textarea id="react-query-text" placeholder="Enter your query for ReAct..." required></textarea>
|
||
|
|
<button type="submit">Submit</button>
|
||
|
|
</form>
|
||
|
|
<div id="results"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const queryForm = document.getElementById('query-form');
|
||
|
|
const uploadForm = document.getElementById('upload-form');
|
||
|
|
const reactQueryForm = document.getElementById('react-query-form');
|
||
|
|
const resultsDiv = document.getElementById('results');
|
||
|
|
|
||
|
|
queryForm.addEventListener('submit', async (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
const queryText = document.getElementById('query-text').value;
|
||
|
|
const response = await fetch('/query', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ query: queryText })
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
displayResults(data.results);
|
||
|
|
});
|
||
|
|
|
||
|
|
uploadForm.addEventListener('submit', async (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
const fileInput = document.getElementById('file-input');
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('file', fileInput.files[0]);
|
||
|
|
const response = await fetch('/upload', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
displayResults(data.message);
|
||
|
|
});
|
||
|
|
|
||
|
|
reactQueryForm.addEventListener('submit', async (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
const queryText = document.getElementById('react-query-text').value;
|
||
|
|
const response = await fetch('/react_query', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ query: queryText })
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
pollTaskStatus(data.task_id);
|
||
|
|
});
|
||
|
|
|
||
|
|
async function pollTaskStatus(taskId) {
|
||
|
|
const interval = setInterval(async () => {
|
||
|
|
const response = await fetch(`/status/${taskId}`);
|
||
|
|
const data = await response.json();
|
||
|
|
displayTaskStatus(data);
|
||
|
|
if (data.status === 'completed' || data.status.startsWith('failed')) {
|
||
|
|
clearInterval(interval);
|
||
|
|
}
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayResults(results) {
|
||
|
|
resultsDiv.innerHTML = '';
|
||
|
|
if (Array.isArray(results)) {
|
||
|
|
results.forEach(result => {
|
||
|
|
const p = document.createElement('p');
|
||
|
|
p.textContent = result;
|
||
|
|
resultsDiv.appendChild(p);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
const p = document.createElement('p');
|
||
|
|
p.textContent = results;
|
||
|
|
resultsDiv.appendChild(p);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayTaskStatus(data) {
|
||
|
|
resultsDiv.innerHTML = `<h3>Status: ${data.status}</h3>`;
|
||
|
|
if (data.current_step) {
|
||
|
|
const step = document.createElement('p');
|
||
|
|
step.textContent = `Current Step: ${data.current_step}`;
|
||
|
|
resultsDiv.appendChild(step);
|
||
|
|
}
|
||
|
|
if (data.steps) {
|
||
|
|
const stepsList = document.createElement('ul');
|
||
|
|
data.steps.forEach(step => {
|
||
|
|
const li = document.createElement('li');
|
||
|
|
li.textContent = step;
|
||
|
|
stepsList.appendChild(li);
|
||
|
|
});
|
||
|
|
resultsDiv.appendChild(stepsList);
|
||
|
|
}
|
||
|
|
if (data.results) {
|
||
|
|
const resultsList = document.createElement('ul');
|
||
|
|
data.results.forEach(result => {
|
||
|
|
const li = document.createElement('li');
|
||
|
|
li.textContent = result;
|
||
|
|
resultsList.appendChild(li);
|
||
|
|
});
|
||
|
|
resultsDiv.appendChild(resultsList);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|