Spaces:
Sleeping
Sleeping
File size: 6,986 Bytes
e53c2d7 145f400 e53c2d7 |
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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
{% extends "base.html" %}
{% block title %}
<title>
The Ultimate RAG
</title>
{% endblock %}
{% block content %}
<div class="chat-container">
<div class="chat-body">
<div class="hero-section py-5 mb-5">
<div class="container text-center">
<h1 class="display-4 fw-bold mb-3">The Ultimate RAG</h1>
<p class="tagline h5 mb-4">ask anything...</p>
</div>
</div>
<div>
<form action="/new_chat" method="post">
<button type="submit">Add new chat</button>
</form>
</div>
<div class="container search-container">
<!-- File Upload Section -->
<div class="file-upload mb-4">
<h5 class="mb-3">Upload Documents</h5>
<form id="uploadForm" enctype="multipart/form-data">
<div class="mb-3">
<input class="form-control" type="file" id="fileInput" multiple>
</div>
<div id="fileList" class="file-list"></div>
</form>
</div>
<!-- Search Section -->
<div class="row justify-content-center">
<div class="col-md-12">
<div class="input-group mb-3">
<input type="text" class="form-control search-box" id="queryInput"
placeholder="Ask your question..." aria-label="Ask your question">
<button class="btn btn-primary btn-search" id="searchButton" type="button">Search</button>
</div>
</div>
</div>
</div>
<!-- Results section -->
<div class="container mt-5 d-none" id="results-section">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">Results</h5>
<div id="results-content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block body_scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// File upload handling
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
let uploadedFiles = [];
fileInput.addEventListener('change', function(e) {
fileList.innerHTML = '';
uploadedFiles = Array.from(e.target.files);
uploadedFiles.forEach((file, index) => {
const fileItem = document.createElement('div');
fileItem.className = 'file-item d-flex justify-content-between align-items-center';
fileItem.innerHTML = `
<span>${file.name}</span>
<button class="btn btn-sm btn-outline-danger remove-file" data-index="${index}">×</button>
`;
fileList.appendChild(fileItem);
});
// Add event listeners to remove buttons
document.querySelectorAll('.remove-file').forEach(button => {
button.addEventListener('click', function() {
const index = parseInt(this.getAttribute('data-index'));
uploadedFiles.splice(index, 1);
// Update file input and UI
const dataTransfer = new DataTransfer();
uploadedFiles.forEach(file => dataTransfer.items.add(file));
fileInput.files = dataTransfer.files;
// Re-render file list
const event = new Event('change');
fileInput.dispatchEvent(event);
});
});
});
// Search functionality
document.getElementById('searchButton').addEventListener('click', async function() {
const query = document.getElementById('queryInput').value.trim();
if (!query) {
alert('Please enter a question');
return;
}
if (uploadedFiles.length === 0) {
alert('Please upload at least one document');
return;
}
// Show loading state
document.getElementById('results-section').classList.remove('d-none');
document.getElementById('results-content').innerHTML = `
<div class="text-center py-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2">Processing your documents and question...</p>
</div>
`;
try {
// Prepare form data
const formData = new FormData();
// Append each file
uploadedFiles.forEach(file => {
formData.append('files', file); // Must use 'files' as the key
});
// Append the prompt
formData.append('prompt', query); // Must use 'prompt' as the key
// Headers will be set automatically by the browser
const response = await fetch('/message_with_docs', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// Display results
document.getElementById('results-content').innerHTML = `
<h6>Question:</h6>
<p class="mb-4">${query}</p>
<h6>Answer:</h6>
<div class="alert alert-success">
${data.response || 'No answer found in the provided documents'}
</div>
${data.sources ? `<h6>Sources:</h6><p>${data.sources}</p>` : ''}
`;
} catch (error) {
console.error('Error:', error);
document.getElementById('results-content').innerHTML = `
<div class="alert alert-danger">
Error processing your request: ${error.message}
</div>
`;
}
});
</script>
{% endblock %} |