|
|
<!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> |
|
|
|
