| | <!doctype html> |
| | <html> |
| | <head> |
| | <title>Retriever</title> |
| | <style> |
| | body { font-family:sans-serif; max-width:800px; margin:40px auto; } |
| | progress { width:300px; height:20px; vertical-align:middle; } |
| | #uploadStatus { margin-left:10px; font-weight:bold; } |
| | #uploadProgress::-webkit-progress-value { background:#4caf50; } |
| | #uploadProgress::-webkit-progress-bar { background:#eee; } |
| | </style> |
| | </head> |
| | <body> |
| | <h2>Upload Text or PDF Files</h2> |
| |
|
| | <input type="file" id="fileUpload" multiple><br><br> |
| | <progress id="uploadProgress" value="0" max="100" style="display:none;"></progress> |
| | <span id="uploadStatus"></span> |
| |
|
| | <script> |
| | |
| | const SID = "{{ sid }}"; |
| | |
| | document.getElementById("fileUpload").addEventListener("change", function () { |
| | const files = this.files; |
| | if (files.length === 0) return; |
| | |
| | const formData = new FormData(); |
| | for (const file of files) { |
| | formData.append("file", file); |
| | } |
| | |
| | const xhr = new XMLHttpRequest(); |
| | const progressBar = document.getElementById("uploadProgress"); |
| | const statusText = document.getElementById("uploadStatus"); |
| | |
| | |
| | xhr.open("POST", `/upload?sid=${SID}`, true); |
| | |
| | xhr.upload.onprogress = function (e) { |
| | if (e.lengthComputable) { |
| | const percent = Math.round((e.loaded / e.total) * 100); |
| | progressBar.value = percent; |
| | progressBar.style.display = "inline-block"; |
| | statusText.textContent = `Uploading: ${percent}%`; |
| | } |
| | }; |
| | |
| | xhr.onload = function () { |
| | progressBar.value = 100; |
| | statusText.textContent = "✅ Upload complete!"; |
| | setTimeout(() => { progressBar.style.display="none"; statusText.textContent=""; }, 1500); |
| | }; |
| | xhr.onerror = function () { statusText.textContent = "❌ Upload failed."; }; |
| | xhr.send(formData); |
| | }); |
| | |
| | document.querySelector('form[method="post"]').addEventListener("submit", function () { |
| | const progressBar = document.getElementById("searchProgress"); |
| | const statusText = document.getElementById("searchStatus"); |
| | progressBar.removeAttribute("value"); |
| | progressBar.style.display = "inline-block"; |
| | statusText.textContent = "🔍 Processing search..."; |
| | }); |
| | </script> |
| |
|
| | <hr> |
| |
|
| | |
| | <form method="post"> |
| | <input type="hidden" name="sid" value="{{ sid }}"> |
| | <label>Enter your question or claim:</label><br> |
| | <textarea name="query" rows="4" cols="80" required>{{ query }}</textarea><br><br> |
| |
|
| | <label>Number of paragraphs to return:</label> |
| | <input type="number" name="topk" value="{{ topk }}" min="1" max="50"><br><br> |
| |
|
| | <button type="submit">Retrieve</button> |
| | <progress id="searchProgress" max="100" style="width:300px; display:none;"></progress> |
| | <span id="searchStatus" style="margin-left:10px;"></span> |
| | </form> |
| |
|
| | <br> |
| | <form method="get" action="/reset" onsubmit="return confirm('Clear all uploaded files and results?');"> |
| | <input type="hidden" name="sid" value="{{ sid }}"> |
| | <button type="submit" style="color:red;">Start New Search</button> |
| | </form> |
| |
|
| | {% if results %} |
| | <br> |
| | <a href="{{ url_for('download', sid=sid) }}">Download these results</a> | |
| | <a href="{{ url_for('download_merged', sid=sid) }}">Download full merged text</a> |
| | <h3>Matching Paragraphs</h3> |
| | <ol> |
| | {% for para in results %} |
| | <li><p>{{ para }}</p></li> |
| | {% endfor %} |
| | </ol> |
| | {% endif %} |
| |
|
| |
|
| | </body> |
| | </html> |
| |
|
