Added web interface

2025-11-03 15:31:27 +01:00
parent 404134bc5a
commit 8d0890edc5
3 changed files with 147 additions and 1 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+        <title>Semantic Document Search</title>
+        <style>
+            body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
+            .search-box { margin-bottom: 20px; }
+            input[type="text"] { width: 70%; padding: 10px; font-size: 16px; }
+            button { padding: 10px 20px; font-size: 16px; background: #007cba; color: white; border: none; cursor: pointer; }
+            button:hover { background: #005c8a; }
+            .result { border: 1px solid #ddd; margin: 10px 0; padding: 15px; border-radius: 5px; }
+            .result-header { font-weight: bold; color: #333; margin-bottom: 10px; }
+            .result-text { background: #f9f9f9; padding: 10px; border-radius: 3px; }
+            .distance { color: #666; font-size: 0.9em; }
+            .no-results { text-align: center; color: #666; margin: 40px 0; }
+            .loading { text-align: center; color: #007cba; margin: 20px 0; }
+        </style>
+    </head>
+    <body>
+        <h1>🔍 Semantic Document Search</h1>
+        <div class="search-box">
+            <form id="searchForm">
+                <input type="text" id="queryInput" placeholder="Enter your search query..." required>
+                <button type="submit">Search</button>
+            </form>
+        </div>
+        <div id="results"></div>
+        
+        <script>
+            document.getElementById('searchForm').addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const query = document.getElementById('queryInput').value;
+                const resultsDiv = document.getElementById('results');
+                
+                resultsDiv.innerHTML = '<div class="loading">Searching...</div>';
+                
+                try {
+                    const response = await fetch('/api/search', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ query: query })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.error) {
+                        resultsDiv.innerHTML = `<div class="no-results">Error: ${data.error}</div>`;
+                        return;
+                    }
+                    
+                    if (data.results.length === 0) {
+                        resultsDiv.innerHTML = '<div class="no-results">No results found.</div>';
+                        return;
+                    }
+                    
+                    resultsDiv.innerHTML = data.results.map((result, i) => `
+                        <div class="result">
+                            <div class="result-header">
+                                Result ${i + 1} - ${result.document} 
+                                <span class="distance">(Distance: ${result.distance.toFixed(4)})</span>
+                            </div>
+                            <div>Page: ${result.page}, Chunk: ${result.chunk}</div>
+                            <div class="result-text">${result.text}</div>
+                        </div>
+                    `).join('');
+                    
+                } catch (error) {
+                    resultsDiv.innerHTML = `<div class="no-results">Error: ${error.message}</div>`;
+                }
+            });
+        </script>
+    </body>
+    </html>