File size: 6,404 Bytes
8cc3bbd
134533e
 
 
 
8cc3bbd
134533e
9c848c2
 
8cc3bbd
 
 
 
 
 
 
 
 
 
 
 
 
 
134533e
 
 
9c848c2
8cc3bbd
 
 
 
 
5be321a
37301ca
 
 
8cc3bbd
 
 
 
 
 
 
 
37301ca
8cc3bbd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9c848c2
8cc3bbd
37301ca
8cc3bbd
 
 
 
 
 
 
37301ca
8cc3bbd
37301ca
8cc3bbd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37301ca
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8cc3bbd
 
 
134533e
37301ca
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!-- 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>

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