agents/frontend/index.html

130 lines
4.9 KiB
HTML
Raw Normal View History

2024-06-09 13:45:19 -04:00
<!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>