75 lines
3.6 KiB
HTML
75 lines
3.6 KiB
HTML
<!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; }
|
|
.document-link { color: #007cba; text-decoration: none; }
|
|
.document-link:hover { text-decoration: underline; }
|
|
.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} - <a href="/file/${encodeURIComponent(result.document_index)}#page=${result.page}" class="document-link" target="_blank">${result.document_name}</a>
|
|
<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> |