From 9051d566f848589e24a4c4143f0ca296051dbe8e Mon Sep 17 00:00:00 2001 From: David Snelling Date: Fri, 20 Jun 2025 13:49:59 -0700 Subject: [PATCH] **feat(demo): enhance UI/UX & content of interactive demo** ### Changes: - **Favicon Update**: Replaced the relative favicon path with an absolute URL pointing to the GitHub-hosted file. - **Header Redesign**: Improved header layout with a more modern and aligned flexbox structure. Adjusted logo size and added a left-aligned text section. - **Styling Enhancements**: - Introduced new styles for zoom controls, Google-like search results, and result clusters. - Updated padding, alignment, and hover states for buttons and interactive elements. - Refined visual hierarchy in sections with updated margins, sizes, and typography. - **Added `What Can You Build?` Section**: Highlighted potential use cases for Brainy (e.g., semantic search, recommendation systems, adaptive experiences). - **Improved Demo Steps**: - Refactored interactive demo into guided "steps" for better usability. - Added tooltips to clarify button functionality. - Updated step titles and descriptions for clarity and conciseness. - **Code Samples**: - Simplified JavaScript import instructions for Node.js and browser environments. - Highlighted CDN options for easier library access. - **Advanced Features & New Controls**: - Introduced new backup, restore, and additional operation buttons for database management. - Added zoom-in, zoom-out, and zoom-to-fit controls for visualizations. - Enhanced semantic search with dynamic filtering and guidance for queries. ### Purpose: Updated the interactive demo to improve its usability, visual appeal, and feature coverage. These enhancements make the demo more user-friendly and better illustrate Brainy's capabilities, aiding developers in exploring and understanding the platform. --- examples/demo.html | 2015 +++++++++++++++++++++++++++----------------- 1 file changed, 1249 insertions(+), 766 deletions(-) diff --git a/examples/demo.html b/examples/demo.html index a869920a..23bf8c24 100644 --- a/examples/demo.html +++ b/examples/demo.html @@ -4,7 +4,7 @@ Brainy Interactive Demo - A Lightweight Graph & Vector Data Platform - + @@ -583,6 +702,49 @@

☁️ Cloud Ready

Easy deployment to Google, AWS, Azure, and other cloud platforms

+
+

🎮 Model Control Protocol (MCP)

+

Allow external AI models to access Brainy data and use augmentation pipeline as tools

+
+ + + + +
+

📊 What Can You Build?

+
+
+

🔍 Semantic Search Engines

+

Find content based on meaning, not just keywords

+
+
+

👍 Recommendation Systems

+

Suggest similar items based on vector similarity

+
+
+

🧠 Knowledge Graphs

+

Build connected data structures with relationships

+
+
+

🤖 AI Applications

+

Store and retrieve embeddings for machine learning models

+
+
+

💡 AI-Enhanced Applications

+

Build applications that leverage vector embeddings for intelligent data processing

+
+
+

📁 Data Organization Tools

+

Automatically categorize and connect related information

+
+
+

🔄 Adaptive Experiences

+

Create applications that learn and evolve with your users

+
+
+

🔌 Model-Integrated Systems

+

Connect external AI models to Brainy data and tools using MCP

+
@@ -594,7 +756,7 @@

Node.js Environment

-import {BrainyData, NounType, VerbType} from '@soulcraft/brainy'
+import { BrainyData, NounType, VerbType } from '@soulcraft/brainy'
 
 // Create and initialize the database
 const db = new BrainyData()
@@ -626,12 +788,12 @@ await db.addVerb(catId, dogId, {
 
       

         
Browser Environment

-        
You can import the browser-optimized version in two ways:

+        
Brainy uses a unified build that automatically adapts to your environment:

 
-        
Option 1: Using the browser-specific import

+        
Option 1: Standard Import

         
-// Import the browser-optimized version
-import {BrainyData, NounType, VerbType} from '@soulcraft/brainy/browser'
+// Standard import - automatically adapts to any environment
+import { BrainyData, NounType, VerbType } from '@soulcraft/brainy'
 
 // Use the same API as in Node.js
 const db = new BrainyData()
@@ -642,40 +804,39 @@ await db.init()
         
Option 2: Using a script tag in HTML

         
 <script type="module">
-  // Import Brainy library directly as a module
-  import {BrainyData, NounType, VerbType} from '../node_modules/@soulcraft/brainy/dist/brainy.js'
+  // Use the CDN to load the unified build
+  import { BrainyData, NounType, VerbType } from 'https://cdn.jsdelivr.net/npm/@soulcraft/brainy/dist/unified.js'
+
+  // Or minified version
+  // import { BrainyData, NounType, VerbType } from 'https://cdn.jsdelivr.net/npm/@soulcraft/brainy/dist/unified.min.js'
 
-  // Use the same API as in Node.js
   const db = new BrainyData()
   await db.init()
   // ...
 </script>
         

-        
Modern bundlers like Webpack, Rollup, and Vite will automatically select the browser-optimized version when
-          targeting browser environments.

+        
Modern bundlers like Webpack, Rollup, and Vite will automatically use the unified build which adapts to any
+          environment.

Interactive Brainy Explorer

-

This interactive demo allows you to experiment with all of Brainy's features. Initialize the database, add - data, create relationships, and perform searches - all with real-time visualizations.

+

This interactive demo guides you through Brainy's features step by step, from basic operations to advanced + capabilities.

- - - -
-

Database Operations

-

Initialize the database, add sample data, or clear all data.

+ +
+

Step 1: Getting Started with Brainy

+

Let's start by initializing the database and exploring basic operations.

+ + - - -
@@ -696,110 +857,49 @@ await db.init()
- -
-

Data Model Management

-

Create entities (nouns), define relationships (verbs), and manage your data schema.

+ +
+

Step 2: Adding Entities (Nouns)

+

Now that your database is initialized, let's add some entities (nouns) to it.

-
- - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
+
+ +
- -
-
- - -
+
+ + +
-
- - - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
- -
- - -
+
+ +
@@ -807,16 +907,68 @@ await db.init()
- -
-

Vector Search & Semantic Queries

-

Perform semantic searches using vector embeddings and similarity matching.

+ +
+

Step 3: Creating Relationships (Verbs)

+

Connect your entities with meaningful relationships to build a knowledge graph.

+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+

Step 4: Semantic Search

+

Search your data using vector embeddings for semantic understanding.

- +
+

+ Try searching for topics in the sample data like "travel", "AI", "fitness", "food", "design", + "sustainability", or specific concepts like "workout challenge", "social media", "photography", etc. +

+
- Zoom - - - +
+ Select a feature above to see a detailed demonstration...
- -
-

CLI Command Interface

-

Simulate CLI commands and explore Brainy's command-line interface.

+ +
+

Step 7: Command Line Interface

+

Try Brainy's CLI commands for scripting and automation.

@@ -895,72 +1069,22 @@ await db.init()
- Available Commands:
+ Common Commands:
brainy init - Initialize a new database
brainy add <data> - Add data to the database
brainy search <query> - Search for entities
brainy relate <from> <to> - Create relationships
- brainy export - Export database
brainy status - Show database status
brainy help - Show all commands
- - -
-

Feature Demonstrations

-

Explore specific features and capabilities of Brainy with guided demonstrations.

- -
-
-

🔍 HNSW Vector Search

-

Demonstrate fast approximate nearest neighbor search with hierarchical navigable small world - graphs.

- -
- -
-

🌐 Graph Traversal

-

Show graph traversal algorithms and relationship queries.

- -
- -
-

🧠 Embedding Pipeline

-

Demonstrate automatic text-to-vector conversion and similarity computation.

- -
- -
-

📊 Real-time Updates

-

Show live data synchronization and event streaming capabilities.

- -
- -
-

💾 Storage Backends

-

Compare different storage options: memory, filesystem, and cloud.

- -
- -
-

🔧 TypeScript Integration

-

Show type-safe operations and schema validation.

- -
-
- -
- Select a feature above to see a detailed demonstration... -
-
@@ -968,10 +1092,12 @@ await db.init()