Spaces:
Runtime error
Runtime error
| <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> | |
| // Embed search‑id from the server | |
| 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"); | |
| // ⬇️ send sid with the upload | |
| 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"); // indeterminate mode | |
| progressBar.style.display = "inline-block"; | |
| statusText.textContent = "🔍 Processing search..."; | |
| }); | |
| </script> | |
| <hr> | |
| <!-- ⬇️ the hidden sid travels with every form submit --> | |
| <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> | |