soulcraft/brainy
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases 335 Packages Wiki Activity Actions

feat: add browser-server search example with server search augmentations

Browse source
This commit is contained in:
David Snelling 2025-06-06 10:48:10 -07:00
parent bf3d9a055b
commit a206b9926d
7 changed files with 2021 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

251
examples/browser-server-search/index.html Normal file
View file

@ -0,0 +1,251 @@
<!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>