Spaces:

broadfield-dev
/

bible-app

Paused

App Files Files Community

broadfield-dev commited on Sep 14, 2025

Commit

8cc3bbd

verified ·

1 Parent(s): bc986bc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +115 -24

templates/index.html CHANGED Viewed

@@ -1,38 +1,129 @@
-<!-- templates/book.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>The Book of {{ book_name }} - Bible 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); }
-        h1, h2 { color: #4a4a4a; }
-        p { line-height: 1.6; }
-        .verse-num { font-weight: bold; color: #5c67f2; vertical-align: super; font-size: 0.8em; margin-left: 4px; }
-        .nav-links { margin-bottom: 2em; font-size: 1.1em; }
-        a { color: #5c67f2; text-decoration: none; }
-        a:hover { text-decoration: underline; }
-        .chapter-heading { margin-top: 2em; border-bottom: 1px solid #e1e1e8; padding-bottom: 0.5em;}
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="nav-links">
-            <a href="/">← Back to Search</a>
-        </div>
-        <h1>The Book of {{ book_name }}</h1>
         <hr>
-        {% for chapter_num in chapters.keys()|sort %}
-            <h2 class="chapter-heading">Chapter {{ chapter_num }}</h2>
-            <p>
-                {% for verse in chapters[chapter_num] %}
-                    <span class="verse-num">{{ verse.verse }}</span> {{ verse.text }}
-                {% endfor %}
-            </p>
-        {% endfor %}
     </div>
 </body>
-</html>

+<!-- templates/index.html -->
 <!DOCTYPE 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>
+        <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 %}
+            <h2>Results for: "{{ query }}"</h2>
+        {% endif %}
+        {% if results %}
+            {% for result in results %}
+                <div class="result">
+                    <!-- *** CHANGE 1: MAKE THE REFERENCE A CLICKABLE LINK *** -->
+                    {% 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>
+    <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.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);
+                // *** CHANGE 2: REMOVE THE ANNOYING POPUP ***
+                // Simply update the text to inform the user.
+                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.');
+            }
+        }
+        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>