Spaces:
Running
Running
| <!-- templates/index.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Bible Search App</title> | |
| <style> | |
| body { font-family: sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; } | |
| .container { max-width: 800px; margin: auto; background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } | |
| .admin-section { background-color: #f8f9fa; padding: 1.5em; border-radius: 5px; border: 1px solid #e1e1e8; } | |
| #build-status { margin-top: 1em; padding: 1em; border-radius: 4px; display: none; } | |
| #build-status.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } | |
| #build-status.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } | |
| #build-status.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } | |
| h1, h2, h3 { color: #4a4a4a; } | |
| input[type="text"] { width: 70%; padding: 0.8em; border: 1px solid #ccc; border-radius: 4px; } | |
| input[type="submit"] { padding: 0.8em 1.5em; border: none; background-color: #5c67f2; color: white; border-radius: 4px; cursor: pointer; } | |
| input[type="submit"]:hover { background-color: #4a54e1; } | |
| .result { border: 1px solid #e1e1e8; padding: 1em; margin-bottom: 1em; border-radius: 5px; background: #fdfdff; } | |
| .reference { font-weight: bold; } | |
| .reference a { color: #5c67f2; text-decoration: none; } | |
| .reference a:hover { text-decoration: underline; } | |
| hr { border: none; border-top: 1px solid #e1e1e8; margin: 2em 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Bible Search</h1> | |
| <form action="/search" method="post"> | |
| <input type="text" name="query" size="50" value="{{ query or '' }}" placeholder="e.g., love is patient, love is kind"> | |
| <input type="submit" value="Search"> | |
| </form> | |
| <hr> | |
| <!-- *** CHANGE 1: WRAP ADMIN PANEL IN A CONDITIONAL BLOCK *** --> | |
| {% if show_admin %} | |
| <div class="admin-section"> | |
| <h3>Admin Panel</h3> | |
| <form id="build-form"> | |
| <p>Build the vector database from the JSON files and upload it for persistence. <strong>Requires a write-permission HF_TOKEN secret.</strong></p> | |
| <input type="submit" id="build-button" value="Build and Push Database to Hub"> | |
| </form> | |
| <div id="build-status"></div> | |
| </div> | |
| {% endif %} | |
| {% if query %} | |
| <h2>Results for: "{{ query }}"</h2> | |
| {% endif %} | |
| {% if results %} | |
| {% for result in results %} | |
| <div class="result"> | |
| {% if result.book_name and result.chapter %} | |
| <p class="reference"> | |
| <a href="{{ url_for('view_chapter', version=result.version, book_name=result.book_name, chapter_num=result.chapter) }}"> | |
| {{ result.reference }} ({{result.version}}) | |
| </a> | |
| </p> | |
| {% else %} | |
| <p class="reference">{{ result.reference }} ({{result.version}})</p> | |
| {% endif %} | |
| <p>{{ result.text }}</p> | |
| <small>Score (Distance): {{ "%.4f"|format(result.score) }}</small> | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| </div> | |
| <!-- The script can remain, it will just not find the elements if the admin panel is hidden, which is harmless. --> | |
| <script> | |
| const buildForm = document.getElementById('build-form'); | |
| const buildButton = document.getElementById('build-button'); | |
| const statusDiv = document.getElementById('build-status'); | |
| let statusInterval; | |
| function updateStatusDisplay(status, message) { | |
| if (!statusDiv) return; // Exit if admin panel is not shown | |
| statusDiv.style.display = 'block'; | |
| statusDiv.className = ''; | |
| if (status.startsWith('IN_PROGRESS')) { | |
| statusDiv.classList.add('info'); | |
| buildButton.disabled = true; | |
| buildButton.value = 'Building...'; | |
| statusDiv.textContent = message; | |
| } else if (status === 'SUCCESS') { | |
| statusDiv.classList.add('success'); | |
| buildButton.disabled = false; | |
| buildButton.value = 'Build and Push Database to Hub'; | |
| clearInterval(statusInterval); | |
| statusDiv.textContent = message + " Refresh the page to use the new data."; | |
| } else if (status === 'FAILED') { | |
| statusDiv.classList.add('error'); | |
| buildButton.disabled = false; | |
| buildButton.value = 'Try Build Again'; | |
| clearInterval(statusInterval); | |
| statusDiv.textContent = message; | |
| } else { // NOT_STARTED | |
| statusDiv.style.display = 'none'; | |
| buildButton.disabled = false; | |
| } | |
| } | |
| async function checkStatus() { | |
| try { | |
| const response = await fetch('/status'); | |
| const data = await response.json(); | |
| updateStatusDisplay(data.status, data.message); | |
| } catch (error) { | |
| console.error('Error fetching status:', error); | |
| updateStatusDisplay('FAILED', 'Could not connect to server to get status.'); | |
| } | |
| } | |
| // Only add event listener if the form exists | |
| if (buildForm) { | |
| buildForm.addEventListener('submit', async function(event) { | |
| event.preventDefault(); | |
| if (!confirm('This will rebuild the database, which can take a long time. Are you sure?')) return; | |
| buildButton.disabled = true; | |
| updateStatusDisplay('IN_PROGRESS', 'Initiating build process...'); | |
| try { | |
| await fetch('/build-rag', { method: 'POST' }); | |
| statusInterval = setInterval(checkStatus, 5000); | |
| } catch (error) { | |
| updateStatusDisplay('FAILED', 'Failed to send build request to the server.'); | |
| } | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', checkStatus); | |
| </script> | |
| </body> | |
| </html> |