2025-06-06 10:48:10 -07:00
<!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 >
2025-06-11 08:49:30 -07:00
< div style = "display: flex; align-items: center; margin-bottom: 20px;" >
< img src = "../../brainy.png" alt = "Brainy Logo" width = "100" style = "margin-right: 20px;" / >
< h1 > Brainy Browser-Server Search Example< / h1 >
< / div >
2025-06-06 10:48:10 -07:00
< 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 >
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
< 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 >
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
< 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 >
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
< div >
< h2 > Add Data< / h2 >
< input type = "text" id = "addData" placeholder = "Enter text to add" >
< button id = "addBtn" > Add to Both< / button >
< / div >
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
< div class = "result-container" >
< h2 > Results< / h2 >
< pre id = "results" > Connect to a server to begin...< / pre >
< / div >
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
< div class = "log" id = "log" > < / div >
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
<!-- Import the Brainy library -->
< script type = "module" >
// Import the BrainyServerSearch class
import { BrainyServerSearch } from './index.js';
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
// Global variables
let brainySearch = null;
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
// 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');
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
// 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;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
function displayResults(results) {
resultsElement.textContent = JSON.stringify(results, null, 2);
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
// Event handlers
connectBtn.addEventListener('click', async () => {
const serverUrl = serverUrlInput.value.trim();
if (!serverUrl) {
log('Please enter a server URL', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
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 });
}
});
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
searchServerBtn.addEventListener('click', async () => {
if (!brainySearch) {
log('Please connect to a server first', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
const query = searchQueryInput.value.trim();
if (!query) {
log('Please enter a search query', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
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 });
}
});
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
searchLocalBtn.addEventListener('click', async () => {
if (!brainySearch) {
log('Please connect to a server first', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
const query = searchQueryInput.value.trim();
if (!query) {
log('Please enter a search query', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
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 });
}
});
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
searchCombinedBtn.addEventListener('click', async () => {
if (!brainySearch) {
log('Please connect to a server first', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
const query = searchQueryInput.value.trim();
if (!query) {
log('Please enter a search query', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
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 });
}
});
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
addBtn.addEventListener('click', async () => {
if (!brainySearch) {
log('Please connect to a server first', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
const data = addDataInput.value.trim();
if (!data) {
log('Please enter data to add', true);
return;
}
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
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 });
}
});
2025-06-11 08:49:30 -07:00
2025-06-06 10:48:10 -07:00
// Initial log
log('Ready to connect to a Brainy server');
< / script >
< / body >
< / html >
