Spaces:

broadfield-dev
/

bible-app

Paused

App Files Files Community

broadfield-dev commited on Sep 13, 2025

Commit

f75ebe1

verified ·

1 Parent(s): c65bf2f

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +80 -20

templates/index.html CHANGED Viewed

@@ -5,46 +5,37 @@
     <title>Bible Search App</title>
     <style>
         body { font-family: sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; }
-        h1, h2, h3 { color: #4a4a4a; }
         .container { max-width: 800px; margin: auto; background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
         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; color: #5c67f2; }
-        .flash { padding: 1em; margin-bottom: 1em; border-radius: 4px; }
-        .flash.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
-        .flash.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
-        .flash.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
         hr { border: none; border-top: 1px solid #e1e1e8; margin: 2em 0; }
-        .admin-section { background-color: #f8f9fa; padding: 1.5em; border-radius: 5px; border: 1px solid #e1e1e8; }
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- Flash messages will appear here -->
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                {% for category, message in messages %}
-                    <div class="flash {{ category }}">{{ message }}</div>
-                {% endfor %}
-            {% endif %}
-        {% endwith %}
         <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>
         <div class="admin-section">
             <h3>Admin Panel</h3>
-            <form action="/build-rag" method="post" onsubmit="return confirm('This will build the database and push it to the Hub. This can take a long time. Are you sure?');">
-                <p>Click to build the vector database from the JSON files and upload it to the Hugging Face Hub for persistence. <strong>Requires a write-permission HF_TOKEN secret.</strong></p>
-                <input type="submit" value="Build and Push Database to Hub">
             </form>
         </div>
         {% if query %}
@@ -61,5 +52,74 @@
             {% endfor %}
         {% endif %}
     </div>
 </body>
 </html>

     <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; }
+        /* Other styles remain the same */
+        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; color: #5c67f2; }
         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>
         <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>
         {% if query %}
             {% endfor %}
         {% endif %}
     </div>
+    <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) {
+            statusDiv.style.display = 'block';
+            statusDiv.textContent = message;
+            statusDiv.className = ''; // Reset classes
+            if (status.startsWith('IN_PROGRESS')) {
+                statusDiv.classList.add('info');
+                buildButton.disabled = true;
+                buildButton.value = 'Building...';
+            } else if (status === 'SUCCESS') {
+                statusDiv.classList.add('success');
+                buildButton.disabled = false;
+                buildButton.value = 'Build and Push Database to Hub';
+                clearInterval(statusInterval);
+                 // Prompt user to refresh to load the new data
+                if(confirm("Build successful! Refresh the page to start searching?")) {
+                    window.location.reload();
+                }
+            } else if (status === 'FAILED') {
+                statusDiv.classList.add('error');
+                buildButton.disabled = false;
+                buildButton.value = 'Try Build Again';
+                clearInterval(statusInterval);
+            } 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.');
+            }
+        }
+        buildForm.addEventListener('submit', async function(event) {
+            event.preventDefault();
+            if (!confirm('This will start the build process. It 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' });
+                // Start polling for status updates every 5 seconds
+                statusInterval = setInterval(checkStatus, 5000);
+            } catch (error) {
+                updateStatusDisplay('FAILED', 'Failed to send build request to the server.');
+            }
+        });
+        // Check status on page load
+        document.addEventListener('DOMContentLoaded', checkStatus);
+    </script>
 </body>
 </html>