David Snelling
0b7b3f947b
Standardized documentation by adding a centered Brainy logo across README files, examples, and guides. Adjusted text formatting for consistency, improved alignment, and readability of feature descriptions and examples.
254 lines
8.4 KiB
HTML
254 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>
|
|
<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>
|
|
|
|
<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>
|