HumOS Canvas 🎨🤖

AI-Powered Infinite Canvas for Mind Mapping and Brainstorming

An infinite canvas application that combines visual thinking with AI-powered idea generation. Create, connect, and expand your ideas with multiple AI models working in parallel.

✨ Features

• Infinite Canvas: Pan, zoom, and navigate a limitless workspace
• Node Management: Create, edit, resize, and delete nodes with visual feedback
• Smart Connections: Link nodes with visual connections (Ctrl/Cmd + click and drag)
• AI Integration: Generate connected ideas using multiple AI models simultaneously
• Multi-Provider Support: Works with OpenAI, OpenRouter, local models, and any OpenAI-compatible API
• Demo Mode: Free tier using Groq API with powerful models like Llama 3.3 70B
• Interactive UI: Floating tooltip buttons appear above selected nodes for quick actions
• Model Management: Drag-and-drop model selector panel with active/inactive model organization
• Undo/Redo: Full history management with 50-state memory
• Auto-save: Persistent local storage with automatic recovery
• Import/Export: JSON-based data exchange with validation
• Media Support: Image generation, upload, and video generation capabilities
• Markdown Rendering: Rich text formatting with live preview

🚀 Quick Start

# Clone the repository
git clone https://github.com/lout33/humos_canvas.git
cd humos_canvas

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 and start creating!

Demo Mode (No API Key Required)

The application includes a free demo mode using Groq's API with powerful models like Llama 3.3 70B. Just click "Configure" and select "Demo Mode" to get started immediately.

🏗️ Architecture

HumOS Canvas features a modular, SOLID-principled architecture that replaced a monolithic 3944-line file with focused, maintainable modules:

Core Modules

• CanvasState.js (~500 lines) - Data management and persistence

  • Canvas data (nodes, connections, selections)
  • History management for undo/redo
  • Spatial grid optimization for performance
  • Copy/paste functionality
  • Local storage persistence

• AIManager.js (~800 lines) - AI integration and processing

  • Multi-provider API management (OpenAI, OpenRouter, local models)
  • Demo mode with free Groq API integration
  • Parallel AI generation across multiple models
  • Image and video generation capabilities
  • Provider detection and error handling

• UIManager.js (~900 lines) - User interface and interactions

  • Modal dialogs (API config, content expansion)
  • Floating tooltip system with smart positioning
  • Drag-and-drop model selector panel
  • Notification system and progress tracking
  • Import/export functionality

• InputHandler.js (~600 lines) - User input and interactions

  • Mouse and keyboard event handling
  • Node selection, dragging, and resizing
  • Connection creation and management
  • Canvas navigation (pan, zoom, reset)
  • Keyboard shortcuts and hotkeys

• InfiniteCanvasSimple.js (~150 lines) - Main coordinator

  • Module initialization and orchestration
  • Event binding and lifecycle management
  • Public API for external integrations
  • Maintains backward compatibility

Supporting Modules

• canvasRenderer.js - High-performance canvas rendering with viewport culling
• markdownParser.js - Markdown parsing and text processing
• markdownRenderer.js - Canvas-based markdown rendering
• aiService.js - Low-level AI API communication

Benefits of Modular Architecture

• Single Responsibility: Each module has one clear purpose
• Maintainability: Changes are isolated to specific areas
• Testability: Individual modules can be tested independently
• Extensibility: New features can be added without affecting existing code
• Performance: Viewport culling and spatial indexing for smooth interaction
• Developer Experience: Easier debugging and code navigation

🤖 AI Provider Configuration

The application supports multiple AI providers through a flexible configuration system:

Supported Providers

• Demo Mode: Free Groq API with Llama 3.3 70B, Qwen QWQ 32B, and Gemma2 9B (recommended for getting started)
• OpenAI: https://api.openai.com/v1 - GPT models
• OpenRouter: https://openrouter.ai/api/v1 - Access to hundreds of models from different providers
• Local Models: http://localhost:1234/v1 - LM Studio, Ollama with OpenAI compatibility
• Custom APIs: Any OpenAI-compatible endpoint

Setup

1. Click the "⚙️ Configure" button
2. Choose Demo Mode (free) or enter your API configuration
3. Select which models to activate from the available list
4. Use the drag-and-drop model panel to manage active models

OpenRouter Setup (Recommended)

For maximum model variety and cost-effectiveness:

1. Sign up at openrouter.ai
2. Get your API key from the dashboard
3. Use base URL: https://openrouter.ai/api/v1
4. Access hundreds of models from OpenAI, Anthropic, Google, Meta, and more

💡 About HumOS

HumOS (Human-AI Integration Framework) aims to enhance human capabilities, foster self-understanding, and contribute to solving complex challenges through continuous learning and collaboration. The system is designed around the "Synergy Loop" - a continuous cycle of information flow and co-creation between human and AI.

Icon Design Philosophy

The HumOS icon represents the core philosophy of human-AI integration:

• Left side (Blue gradient): Human consciousness, brain patterns, and cognitive processes
• Right side (Gold gradient): AI neural networks, processing capabilities, and machine learning
• Central synergy core (White): The integration point where human and AI capabilities merge and amplify each other
• Flow lines (Dashed curves): Continuous data exchange, learning loops, and collaborative information flow
• Enhancement nodes (Corner circles): Augmented capabilities and expanded potential emerging from the integration
• Connection lines: The network effect of human-AI collaboration extending capabilities in all directions

The design symbolizes the transformation from separate human and AI systems to an integrated framework where both enhance each other's capabilities.

💻 Development

Prerequisites

• Node.js 18+
• npm

Setup

# Install dependencies
npm install

# Set up environment variables (optional - demo mode works without API keys)
cp .env.example .env
# Edit .env and add your Groq API key for enhanced demo mode

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Environment Variables

The application includes a free demo mode, but you can enhance it with your own API keys:

1. Copy .env.example to .env
2. Get a free Groq API key from console.groq.com/keys
3. Add your API key to the .env file:

VITE_GROQ_API_KEY=your_actual_groq_api_key_here

Note: The .env file is automatically ignored by git to keep your API keys secure.

Project Structure

src/
├── InfiniteCanvasSimple.js    # Main coordinator class
├── CanvasState.js            # Data management & persistence
├── AIManager.js              # AI integration & processing  
├── UIManager.js              # User interface & interactions
├── InputHandler.js           # Input handling & events
├── canvasRenderer.js         # High-performance rendering
├── markdownParser.js         # Markdown text processing
├── markdownRenderer.js       # Canvas markdown rendering
└── aiService.js              # AI API communication

main.js                       # Application entry point
index.html                    # HTML template
style.css                     # Styling and UI components
package.json                  # Dependencies and scripts

📖 Usage

Basic Operations

• Create Node: Double-click empty space
• Edit Node: Double-click a node to edit text (supports Markdown)
• Select Node: Click a node - tooltip buttons will appear above it
• Move Node: Drag a selected node
• Resize Node: Drag the resize handles on selected nodes
• Connect Nodes: Ctrl/Cmd + click and drag from connection points (blue circles)
• Delete Node: Select node(s) and press Delete/Backspace

Canvas Navigation

• Pan: Right-click + drag, Space + drag, or two-finger scroll
• Zoom: Mouse wheel or zoom buttons
• Reset View: Click the reset view button (⌂)
• Font Size: Use +/- buttons to adjust global font size

AI Features

1. Select a node containing your central idea
2. Tooltip buttons appear above the selected node:
   • ✨ Generate Ideas - Create connected AI-generated concepts
   • ⛶ Expand Content - View full content in modal dialog
   • 🖼️ Generate Image - Create images from text (requires Replicate API)
   • 📁 Upload Image - Add images to nodes
   • 🎨 Edit Image - Modify images with AI (requires Replicate API)
   • 🎬 Generate Video - Create videos from text (requires Replicate API)
3. Multiple models can generate ideas simultaneously
4. New nodes are created and automatically connected

Keyboard Shortcuts

• Ctrl/Cmd + C - Copy selected nodes
• Ctrl/Cmd + V - Paste nodes
• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Y - Redo
• Delete/Backspace - Delete selected nodes
• Escape - Clear selection or close modals

⚙️ Technical Details

Dependencies

• Vite: Modern build tool and dev server
• ES6 Modules: Modern JavaScript module system
• Canvas API: High-performance 2D rendering
• Local Storage: Data persistence
• Fetch API: HTTP requests for AI services

Performance Features

• Viewport Culling: Only renders visible nodes for smooth performance
• Spatial Grid: Optimized node lookup and collision detection
• Efficient Rendering: Minimized canvas redraws and optimized drawing operations
• Memory Management: Proper cleanup of video elements and event listeners

Features Implemented

• ✅ Modular Architecture: Clean separation of concerns with SOLID principles
• ✅ Vite-based Build System: Fast development and optimized production builds
• ✅ Multi-Provider AI Integration: Support for multiple AI services
• ✅ Demo Mode: Free tier with powerful models (Groq API)
• ✅ Interactive UI: Floating tooltips and drag-and-drop panels
• ✅ Rich Media Support: Images, videos, and markdown rendering
• ✅ Performance Optimization: Viewport culling and spatial indexing
• ✅ Data Persistence: Auto-save with import/export functionality
• ✅ Error Handling: Comprehensive error management and user feedback
• ✅ Responsive Design: Works on desktop and tablet devices

Browser Compatibility

Modern browsers with ES6 module support required:

• Chrome 61+
• Firefox 60+
• Safari 11+
• Edge 16+

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

The modular architecture makes it easy to:

• Add new AI providers in AIManager.js
• Enhance UI components in UIManager.js
• Improve rendering in canvasRenderer.js
• Add new input methods in InputHandler.js

Areas of Interest

• 🤖 AI Provider Integration - Add support for new AI services
• 🎨 UI/UX Improvements - Enhance user interface and experience
• ⚡ Performance Optimization - Improve rendering and interaction performance
• 📱 Mobile Support - Better touch and mobile device support
• ♿ Accessibility - Improve accessibility features
• 🧪 Testing - Add unit tests, integration tests, or E2E tests

📄 License

MIT License - see the LICENSE file for details.

🔗 Links

• Live Demo
• VS Code Extension - A powerful visual canvas editor for VS Code with full Obsidian Canvas compatibility.
• Contributing Guidelines
• Changelog
• Issues

⭐ Star History

If you find this project useful, please consider giving it a star! It helps others discover the project and motivates continued development.

---

Made with ❤️ by the HumOS Canvas Team