251 lines
8.4 KiB
HTML
251 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Brainy Browser-Server Search Example</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
h1, h2 {
|
|
color: #333;
|
|
}
|
|
pre {
|
|
background-color: #f5f5f5;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
}
|
|
button {
|
|
background-color: #4CAF50;
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
input[type="text"] {
|
|
padding: 10px;
|
|
width: 70%;
|
|
margin-right: 10px;
|
|
border-radius: 5px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.result-container {
|
|
margin-top: 20px;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.log {
|
|
margin-top: 10px;
|
|
color: #666;
|
|
}
|
|
.error {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Brainy Browser-Server Search Example</h1>
|
|
|
|
<p>
|
|
This example demonstrates how to use Brainy in a browser, call a server-hosted version for search,
|
|
store the results locally, and then perform further searches against the local instance.
|
|
</p>
|
|
|
|
<div>
|
|
<h2>Server URL</h2>
|
|
<input type="text" id="serverUrl" value="wss://your-brainy-server.com/ws" placeholder="WebSocket URL of your Brainy server">
|
|
<button id="connectBtn">Connect</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Search</h2>
|
|
<input type="text" id="searchQuery" placeholder="Enter search query">
|
|
<button id="searchServerBtn">Search Server</button>
|
|
<button id="searchLocalBtn">Search Local</button>
|
|
<button id="searchCombinedBtn">Search Combined</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Add Data</h2>
|
|
<input type="text" id="addData" placeholder="Enter text to add">
|
|
<button id="addBtn">Add to Both</button>
|
|
</div>
|
|
|
|
<div class="result-container">
|
|
<h2>Results</h2>
|
|
<pre id="results">Connect to a server to begin...</pre>
|
|
</div>
|
|
|
|
<div class="log" id="log"></div>
|
|
|
|
<!-- Import the Brainy library -->
|
|
<script type="module">
|
|
// Import the BrainyServerSearch class
|
|
import { BrainyServerSearch } from './index.js';
|
|
|
|
// Global variables
|
|
let brainySearch = null;
|
|
|
|
// DOM elements
|
|
const serverUrlInput = document.getElementById('serverUrl');
|
|
const connectBtn = document.getElementById('connectBtn');
|
|
const searchQueryInput = document.getElementById('searchQuery');
|
|
const searchServerBtn = document.getElementById('searchServerBtn');
|
|
const searchLocalBtn = document.getElementById('searchLocalBtn');
|
|
const searchCombinedBtn = document.getElementById('searchCombinedBtn');
|
|
const addDataInput = document.getElementById('addData');
|
|
const addBtn = document.getElementById('addBtn');
|
|
const resultsElement = document.getElementById('results');
|
|
const logElement = document.getElementById('log');
|
|
|
|
// Helper functions
|
|
function log(message, isError = false) {
|
|
const div = document.createElement('div');
|
|
div.textContent = message;
|
|
if (isError) {
|
|
div.classList.add('error');
|
|
}
|
|
logElement.appendChild(div);
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
}
|
|
|
|
function displayResults(results) {
|
|
resultsElement.textContent = JSON.stringify(results, null, 2);
|
|
}
|
|
|
|
// Event handlers
|
|
connectBtn.addEventListener('click', async () => {
|
|
const serverUrl = serverUrlInput.value.trim();
|
|
if (!serverUrl) {
|
|
log('Please enter a server URL', true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
log(`Connecting to ${serverUrl}...`);
|
|
brainySearch = new BrainyServerSearch(serverUrl);
|
|
await brainySearch.init();
|
|
log('Connected successfully!');
|
|
displayResults({ status: 'Connected', serverUrl });
|
|
} catch (error) {
|
|
log(`Connection error: ${error.message}`, true);
|
|
displayResults({ error: error.message });
|
|
}
|
|
});
|
|
|
|
searchServerBtn.addEventListener('click', async () => {
|
|
if (!brainySearch) {
|
|
log('Please connect to a server first', true);
|
|
return;
|
|
}
|
|
|
|
const query = searchQueryInput.value.trim();
|
|
if (!query) {
|
|
log('Please enter a search query', true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
log(`Searching server for "${query}"...`);
|
|
const results = await brainySearch.searchServer(query, 5);
|
|
log(`Found ${results.length} results from server`);
|
|
displayResults(results);
|
|
} catch (error) {
|
|
log(`Search error: ${error.message}`, true);
|
|
displayResults({ error: error.message });
|
|
}
|
|
});
|
|
|
|
searchLocalBtn.addEventListener('click', async () => {
|
|
if (!brainySearch) {
|
|
log('Please connect to a server first', true);
|
|
return;
|
|
}
|
|
|
|
const query = searchQueryInput.value.trim();
|
|
if (!query) {
|
|
log('Please enter a search query', true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
log(`Searching local database for "${query}"...`);
|
|
const results = await brainySearch.searchLocal(query, 5);
|
|
log(`Found ${results.length} results locally`);
|
|
displayResults(results);
|
|
} catch (error) {
|
|
log(`Search error: ${error.message}`, true);
|
|
displayResults({ error: error.message });
|
|
}
|
|
});
|
|
|
|
searchCombinedBtn.addEventListener('click', async () => {
|
|
if (!brainySearch) {
|
|
log('Please connect to a server first', true);
|
|
return;
|
|
}
|
|
|
|
const query = searchQueryInput.value.trim();
|
|
if (!query) {
|
|
log('Please enter a search query', true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
log(`Performing combined search for "${query}"...`);
|
|
const results = await brainySearch.searchCombined(query, 5);
|
|
log(`Found ${results.length} combined results`);
|
|
displayResults(results);
|
|
} catch (error) {
|
|
log(`Search error: ${error.message}`, true);
|
|
displayResults({ error: error.message });
|
|
}
|
|
});
|
|
|
|
addBtn.addEventListener('click', async () => {
|
|
if (!brainySearch) {
|
|
log('Please connect to a server first', true);
|
|
return;
|
|
}
|
|
|
|
const data = addDataInput.value.trim();
|
|
if (!data) {
|
|
log('Please enter data to add', true);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
log(`Adding data: "${data}"...`);
|
|
const id = await brainySearch.add(data, {
|
|
noun: 'Concept',
|
|
category: 'UserInput',
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
log(`Added data with ID: ${id}`);
|
|
displayResults({ success: true, id, data });
|
|
} catch (error) {
|
|
log(`Add error: ${error.message}`, true);
|
|
displayResults({ error: error.message });
|
|
}
|
|
});
|
|
|
|
// Initial log
|
|
log('Ready to connect to a Brainy server');
|
|
</script>
|
|
</body>
|
|
</html>
|