Canvas AI Orchestration System
A streamlined web-based interface for AI interaction focused on the Canvas workspace. The system integrates with Ollama for AI model access and uses browser localStorage and IndexedDB for data persistence.
🤝 Companion System: Llama Jack
Canvas works seamlessly with Llama Jack - your AI-powered terminal workspace companion!
Why Use Both Together?
- Canvas: Web-based AI analysis with 5 specialized agents (DJINN, NAZAR, NARRA, WHALE, WATCHTOWER)
- Llama Jack: Terminal-based AI coding assistant with file editing, task management, and workspace exploration
Shared Intelligence
Both systems share the same Ollama AI backend with intelligent resource orchestration:
- Load Balancing: Automatic distribution between local and cloud AI
- Priority Modes: Configure Canvas-priority, Jack-priority, or balanced operation
- Seamless Coordination: They work together without resource conflicts
Quick Integration
# 1. Start Canvas (web interface)
launch-canvas.bat
# 2. Start Llama Jack (terminal companion)
hi jack
# Both systems now coordinate automatically!
See Llama Jack Integration Guide for detailed setup.
🌟 Visual README
Experience the Enhanced Visual Documentation: https://yufok1.github.io/Canvas-with-observation-feeds-HTML/
Features Matrix rain animation, cyberpunk aesthetics, and interactive documentation experience.
🎬 Live Demo
Interactive Canvas Demonstration: View the interface demonstration at: https://yufok1.github.io/Canvas-with-observation-feeds-HTML/canvas-with-observation-feeds.html
Experience the full Canvas workspace with live AI agents, Matrix rain effects, and real-time synthesis capabilities.
🌊 Matrix Rain Integration (Visual README Website Only)
The Visual README website features:
- Dynamic Matrix Rain: Cascading digital rain background effects powered by Matrix-Rain-HTML-Background
- Cyberpunk Aesthetics: Dark theme with neon accents and futuristic styling
- Interactive Elements: Hover effects and animated transitions throughout the interface
- Immersive Experience: Full-screen Matrix-style visual environment for enhanced productivity
The Canvas application itself uses cyberpunk gradients and pulse animations, but does not include Matrix rain effects.
System Components
Core Architecture
- Cloud Integration: Optional Ollama Turbo proxy for enhanced AI capabilities
- Persistent Storage: Dual storage system (localStorage + IndexedDB) for data reliability
- Streamlined Operation: Focus on Canvas productivity without external governance overhead
File Structure
canvas-with-observation-feeds.html: Main workspace interface with 5 AI agents + JACK terminal (322KB)launch-canvas.bat: Canvas launcher with optional cloud proxy integration (6.8KB)ollama-turbo-proxy.py: Cloud API proxy server for Ollama Turbo access (5.6KB)indexdb-backup.js: Storage management and overflow protection (7.9KB)setup-api-key.bat: Interactive API key configuration utility (3.9KB)
Canvas AI Systems (5 agents)
- DJINN: Strategic analysis and governance insights
- NAZAR: Consciousness and emotional analysis
- NARRA: Pattern recognition and narrative synthesis
- WHALE: Deep analysis and memory processing
- WATCHTOWER: System monitoring and metrics
Plus integrated JACK Terminal for direct AI interaction and coordination
JACK Terminal Integration
The JACK Terminal is a built-in console within the Canvas UI that provides:
- Direct command-line interaction with all AI agents
- Live status monitoring and orchestration feedback
- Rich CLI features: send commands, view responses, and coordinate agent actions
- Mirror of system events: see real-time logs and diagnostics
- Exportable session history for audit and review
Usage:
- Access JACK via the dedicated panel in the Canvas dashboard
- Type commands to interact with agents, trigger synthesis, or request diagnostics
- View live feedback and system status in the terminal window
Technical Notes:
- JACK is fully integrated with the event-driven architecture
- Terminal output is synchronized with Canvas state and agent responses
- All commands and responses are stored locally for privacy
Recent Improvements
Session Management & Feed Cleanup
- Automatic Feed Clearing: Old AI feeds are automatically cleared on page refresh using sessionStorage detection
- Fresh Session Detection: Prevents stale feed data from previous sessions causing display issues
- Clean Initialization: Each browser session starts with a clean slate while preserving in-session data
Model Switching Enhancements
- Synchronized Dropdowns: Model selector now instantly updates when toggling between Local/Cloud modes
- localStorage Race Fix: Added 10ms sync delays after state changes to prevent read/write conflicts
- Proper Initialization Order:
initializeTurboMode() now runs before populateModelSelector() for correct startup state
Jack Terminal Integration
- Non-Critical Error Display: Connection failures shown as info messages instead of alarming red errors
- User-Friendly Messages: “Jack mirror offline – no connection (Canvas unaffected)” instead of raw errors
- Reduced Console Noise: Eliminated console.error() spam, browser network logs still visible but ignorable
CORS & Request Handling
- Clean Request Headers: Removed invalid Access-Control-* headers from requests (those are response-only headers)
- Proper CORS Flow: Fixed client-side header issues that were causing preflight failures
- Local/Cloud Routing: Correct endpoint selection based on mode (11434 for local, 11438 for cloud proxy)
Proxy Security Improvements
The Ollama Turbo proxy now includes:
- Localhost binding: Only accepts connections from
127.0.0.1 for security
- CORS whitelist: Only allows requests from trusted origins (e.g.,
http://localhost:8000)
- API key hidden in logs: No longer prints the API key to the console
Recommendation: Always keep your API key secret and only run the proxy on trusted machines.
Quick Start
Canvas-Only Launch (Recommended)
# Launch Canvas with local Ollama
launch-canvas.bat
# Launch Canvas with cloud proxy (requires API key)
set OLLAMA_TURBO_API_KEY=your_api_key_here
launch-canvas.bat
System Requirements
- Local AI: Ollama installed and running on port 11434
- Cloud AI (Optional): Ollama Turbo API key for enhanced capabilities
- Browser: Modern browser with localStorage and IndexedDB support (Chrome, Firefox, Safari, Edge)
- Server: Python 3.7+ for proxy server (if using cloud features)
- System: 4GB RAM minimum for local AI models
Architecture Features
Storage System
- localStorage: Real-time Canvas state and AI feed synchronization
- IndexedDB: Persistent storage with overflow protection for large datasets
- Backup System: Automatic data preservation with surgical key exclusions
- Memory Management: Intelligent cleanup and optimization routines
- Session-Based Feed Clearing: Automatic cleanup of old AI feeds on page refresh to prevent stale data
AI Integration
- Local Ollama: Direct integration with local AI models on port 11434
- Cloud Proxy: Optional proxy server on port 11438 for Ollama Turbo access
- CORS Handling: Transparent browser security bypass for cloud API calls
- Request Management: Intelligent routing between local and cloud AI services
- Model Switching: Real-time toggle between local and cloud models with synchronized dropdown updates
- Race Condition Protection: 10ms localStorage sync delays ensure proper state transitions
Canvas Interface Functions
- 5 AI Agent System: Specialized agents for comprehensive analysis
- AI Agent Notepads: Individual notepad interfaces for each agent
- Observation Tools: Mark patterns, anomalies, correlations, insights, and notes
- Entity Chat System: Direct chat interface with AI entities
- Triage Diagnostics: System diagnostic and troubleshooting capabilities
- Smart Content Reduction: AI-powered content optimization and summarization
- Jack Terminal Mirror: Full terminal integration with status monitoring and controls (connection failures displayed as non-critical info messages)
- Live Feed Management: Real-time AI observation feeds with persistent storage
- Synthesis Engine: Advanced analysis synthesis with consensus building
- Memory System: Comprehensive memory management with clearance functions
- Export Capabilities: Data export and analysis report generation
- Cyberpunk Aesthetics: Dark theme with pulse animations and neon styling
Interface Layout
The Canvas interface features a responsive grid-based layout with specialized panels:
┌─────────────────────────────────────────────────────────┐
│ 🜂 CANVAS HEADER │
│ Orchestration Status & System Controls │
├─────────────────────┬───────────────────────────────────┤
│ │ │
│ 📝 SOVEREIGN │ 📡 LIVE AI FEEDS & CHAT │
│ CANVAS │ │
│ (Document Editor) │ • DJINN Analysis Feed │
│ │ • NAZAR Pattern Recognition │
│ │ • NARRA Emotional Intelligence │
│ │ • WHALE Governance Oversight │
│ │ • WATCHTOWER Surveillance │
├─────────────────────┼───────────────────────────────────┤
│ │ │
│ 📊 SYNTHESIS │ 🎯 JACK TERMINAL MIRROR │
│ REPORTS │ │
│ (AI Analysis) │ • Real-time Jack Commands │
│ │ • Canvas Search Integration │
│ │ • Constraint & Commentary │
│ │ • Live Metrics & Status │
└─────────────────────┴───────────────────────────────────┘
Panel Functions
- Header Panel: Orchestration status, mode indicators, system controls
- Sovereign Canvas: Main document editor with real-time AI analysis
- Live AI Feeds & Chat: Real-time agent outputs and interactive chat
- Synthesis Reports: AI-generated analysis with developmental continuity
- Jack Terminal Mirror: Integrated terminal for Llama Jack coordination
Usage Modes
Standalone Canvas Operation
- Launch:
launch-canvas.bat
- Access:
http://localhost:8000/canvas-with-observation-feeds.html
- Features: Full Canvas functionality with local AI integration
- Storage: localStorage + IndexedDB for complete data persistence
Cloud-Enhanced Operation
- Setup: Set
OLLAMA_TURBO_API_KEY environment variable
- Launch:
launch-canvas.bat (automatically detects API key)
- Proxy: Automatic proxy server startup on port 11438
- Features: Enhanced AI capabilities via Ollama Turbo cloud service
Technical Specifications
- Canvas Size: 322KB optimized HTML with embedded CSS/JS
- AI Agents: 5 specialized systems with coordinated analysis
- Storage Capacity: Unlimited via IndexedDB with intelligent overflow management
- Response Time: Sub-second local AI, 2-30s cloud AI (model dependent)
- Memory Usage: Optimized with automatic cleanup and garbage collection
API Integration
- Local Ollama: Direct HTTP requests to localhost:11434
- Cloud Proxy: Python server forwarding to Ollama Turbo with CORS handling
- Authentication: Bearer token for cloud API access
- Timeout Management: Configurable timeouts for different operation types
- Error Handling: Comprehensive error recovery and user feedback
Data Management
- Real-time Sync: Instant Canvas state updates across browser sessions
- Persistent Storage: IndexedDB for large datasets and analysis results
- Backup Strategy: Automatic backup with critical key protection
- Export Options: JSON export for analysis results and system state
- Privacy: All data stored locally, no external transmission except to configured AI services
Project Links
GitHub Repository: https://github.com/Yufok1/Canvas-with-observation-feeds-HTML
Llama Jack: https://github.com/Yufok1/Llama-Jack - AI orchestration and terminal integration
Matrix Rain Background: https://github.com/Yufok1/Matrix-Rain-HTML-Background
License
MIT License - See LICENSE file for details.
Contributing
See CONTRIBUTING.md for development guidelines and contribution process.
Canvas AI Orchestration System - Streamlined, powerful, focused with Matrix-powered cyberpunk aesthetics.