Visual Programming Platform for Algorithm & AI Workflow Development

🇨🇳 中文 | 🇬🇧 English | 📘 Documentation

A modern low-code visual programming platform built on NodeGraphQt and qfluentwidgets, supporting drag-and-drop component orchestration, asynchronous execution, file operations, control flow logic, and one-click export of workflows into standalone, executable projects—enabling seamless transition from development to deployment.

---

🌟 Why Choose CanvasMind?

Traditional Low-Code Tools	CanvasMind
Static component assembly	Dynamic expressions + global variables drive parameters
Only serial execution	Full conditional branching, iteration, and loops
No custom logic	Embedded code editor for writing Python components freely
Execution = endpoint	One-click export to standalone projects (API, CLI, Docker)
AI disconnected from canvas	Deep LLM integration: yellow jump / purple create buttons for canvas-aware intelligent completion

---

🌟 Key Features

🎨 Modern UI

• Fluent Design – Built with qfluentwidgets for a polished, native look
• Dark Theme – Eye-friendly dark mode by default
• Responsive Layout – Adapts to various screen sizes

🧩 Visual Programming

• Drag-and-Drop Nodes – Drag components from the panel onto the canvas
• Dataflow Connections – Connect output and input ports to define dependencies
• Backdrop Grouping – Visually group related nodes using Backdrop nodes
• Context Menus – Full right-click menu for node operations

🧠 Intelligent Node Recommendation ✨

• Type-Aware Suggestions – Automatically match compatible downstream components based on output port types
• Multi-Port Grouping – Recommendations grouped by source port for clarity
• Visual Differentiation – Color-coded suggestions per port type
• Cross-Canvas Learning – Tracks component connection frequency to improve recommendations over time

🤖 LLM-Canvas Context Integration (✅ Implemented)

• Yellow Jump Buttons: When the LLM references an existing node, a yellow [Node Name](jump) button appears—click to instantly navigate to that node on the canvas.
• Purple Create Buttons: When recommending a new capability, a purple [Component Name](create) button is generated—click to instantiate the component from your library and auto-connect it.
• Multimodal Context Injection: Automatically passes node JSON, variable states, and base64-encoded images to the LLM for precise, actionable suggestions.
• Canvas-Aware Completion: Supports simultaneous references to multiple existing nodes (yellow) and recommendations for missing components (purple), enabling end-to-end workflow completion.

⚡ Asynchronous Execution Engine

• Non-Blocking Execution – Uses QThreadPool to keep the UI responsive
• Real-Time Status Visualization – Node states shown via color (idle / running / success / failure)
• Topological Scheduling – Automatically resolves dependencies and executes in correct order
• Efficient Serialization – Uses pickle and pyarrow for fast data passing and storage

🔁 Advanced Control Flow ✨

• Conditional Branching – Enable/disable branches based on $...$ expressions (if/else logic)
• Iteration – Loop over lists or arrays, executing subgraphs per element
• Loop Control – Fixed-count or condition-driven loops
• Dynamic Subgraph Skipping – Entire downstream subgraphs of inactive branches are skipped for efficiency
• Expression-Driven Logic – Branch conditions, loop counts, etc., support dynamic expressions

🌐 Global Variables & Expression System ✨

• Structured Scopes – Three variable scopes: env (environment), custom (user-defined), and node_vars (node outputs)
• Dynamic Expressions – Use $env_user_id$ or $custom_threshold * 2$ in any parameter field
• Runtime Evaluation – Expressions resolved before execution, with support for nested dicts/lists
• Secure Sandbox – Powered by asteval; prevents unsafe operations and isolates environments via contextmanager
• UI Integration – Select variables or type expressions directly in component property panels

✅ Dynamic Code Components

• Full Python Logic – Write complete run() methods and helper functions inside nodes
• Dynamic Ports – Add/remove input/output ports via UI; bind global variables as defaults
• Full Feature Integration – Leverages global variables, expressions, auto-dependency install, logging, and status visualization
• Safe Execution – Runs in isolated subprocesses with timeout control, error capture, and retry support
• Developer-Friendly Editor – Professional code editor with dark theme, syntax highlighting, intelligent autocomplete, folding, and error diagnostics

📊 Node Management

• Dynamic Loading – Auto-scans components/ directory and loads new components
• Pydantic Schemas – Define inputs, outputs, and properties using Pydantic models
• Per-Node Logging – Each node maintains its own execution log
• State Persistence – Save/load entire workflows
• Auto Dependency Resolution – Components declare requirements; missing packages are auto-installed at runtime

📦 Model Export & Standalone Deployment ✨

• Subgraph Export – Select any group of nodes and export as a self-contained project
• Train/Inference Separation – Export only inference logic with trained models bundled
• Zero-Dependency Runtime – Generated project runs independently—no CanvasMind required
• Multi-Environment Support – Auto-generated requirements.txt enables deployment to servers, Docker, or CLI environments

🛠️ Exported Project Tool Integration

• Direct Invocation – Canvas can call exported project scripts by name and retrieve results
• Parameter Passing – Node properties define tool-call parameters, passed automatically at runtime
• Full Logging – Detailed logs of tool execution are captured and returned for debugging
• LLM Function Calling Ready – Standardized tool name, input/output schema, and examples for seamless LLM integration

---

🚀 Quick Start

Requirements

• Python 3.8+
• PyQt5 or PySide2

Install Dependencies

pip install -r requirements.txt

Run the Application

python main.py

Package with PyInstaller

pyinstaller --onedir --windowed --add-data "app;app" --add-data "icons;icons" -i icons/logo3.png main.py

---

🧪 Component Development

Create a New Component

1. Create a file in components/

# components/data/my_component.py
class MyComponent(BaseComponent):
    name = "My Processor"
    category = "Data"
    description = "Example component"
    requirements = "pandas>=1.3.0"
    inputs = [{"name": "input_data", "type": "TEXT"}]
    outputs = [{"name": "output_data", "type": "TEXT"}]
    properties = {"param1": {"type": "TEXT", "default": "hello"}}

    def run(self, params, inputs=None):
        """
        params: node properties from UI
        inputs: upstream data (key = input port name)
        return: output data (key = output port name)
        """
        input_data = inputs.get("input_data") if inputs else None
        param1 = params.get("param1", "default_value")
        result = f"Processed: {input_data} + {param1}"
        return {"output_data": result}

2. Auto-Loading – Components are automatically scanned and added to the panel
3. Auto Dependency Install – If a component fails due to missing packages, CanvasMind installs them from the requirements field and retries

Supported Port Types

Type	Description	Example
TEXT	Text input	String parameters
LONGTEXT	Long text input	Multi-line strings
INT	Integer	Numeric values
FLOAT	Floating point	Decimal numbers
BOOL	Boolean	Toggle switches
CSV	CSV list data	Column selections
JSON	JSON structure	Dynamic nested data
EXCEL	Excel data	Cell ranges
FILE	File path	Local file reference
UPLOAD	Document upload	User-uploaded files
SKLEARNMODEL	Scikit-learn model	Trained .pkl models
TORCHMODEL	PyTorch model	.pt or .pth models
IMAGE	Image data	Base64 or file paths

Supported Property Types

Type	Description	Example
TEXT	Text input	Short strings
LONGTEXT	Long text input	Code snippets, prompts
INT / FLOAT	Numeric input	Thresholds, counts
BOOL	Toggle	Enable/disable flags
CHOICE	Dropdown	Predefined options
DYNAMICFORM	Dynamic form	Variable-length lists
RANGE	Numeric range	Min/max sliders

---

🎮 Canvas Usage Guide

Basic Operations

1. Create Node – Drag from left panel to canvas
2. Connect Nodes – Drag from output port to input port
3. Run Node – Right-click → “Run This Node”
4. View Logs – Right-click → “View Node Logs”

Advanced Features

• Loops – Use Loop/Iterate nodes with Backdrop for structured iteration
• File Handling – Click file picker in property panel
• Workflow Management – Save/load via top-left buttons
• Node Grouping – Select multiple nodes → right-click → “Create Backdrop”
• Dependency Management – Failed components auto-install missing requirements

Keyboard Shortcuts

• Ctrl+R – Run workflow
• Ctrl+S – Save workflow
• Ctrl+O – Load workflow
• Ctrl+A – Select all nodes
• Del – Delete selected nodes

---

🛠️ Development Notes

Node Status Colors

• Idle – Gray border
• Running – Blue border
• Success – Green border
• Failed – Red border

Connection Line Colors

• Idle – Yellow
• Input Active – Blue
• Output Active – Green

Logging System

• Each node has independent logs with timestamps
• Powered by Loguru – use self.logger in components
• All print() output is automatically captured

Dataflow

• Inputs auto-populated from upstream outputs
• Outputs stored by port name
• Full multi-input/multi-output support

---

📥 Model Export (Standalone Deployment)

Core Value

Export any subgraph as a self-contained project that runs in any Python environment—no CanvasMind required.

Use Cases

• Train/Inference Split – Export only inference logic with models bundled
• Team Sharing – Share full workflows as runnable projects
• Production Deployment – Run on servers or in Docker
• Offline Execution – CLI-only environments

Export Features

✅ Smart Dependency Analysis – Copies only necessary component code
✅ Path Rewriting – Model/data files copied and converted to relative paths
✅ Column Selection Preserved – CSV column config fully retained
✅ Environment Isolation – Auto-generated requirements.txt
✅ Ready-to-Run – Includes run.py and api_server.py

Export Steps

1. Select Nodes – Choose any nodes on canvas (multi-select supported)
2. Click Export – Top-left “Export Model” button (📤 icon)
3. Choose Directory – Project folder auto-generated
4. Run Externally:

# Install dependencies
pip install -r requirements.txt

# Run model
python run.py

Exported Project Structure

model_xxxxxxxx/
├── model.workflow.json    # Full workflow definition (nodes, connections, column selections)
├── project_spec.json      # Input/output schema
├── preview.png            # Canvas preview snapshot
├── README.md              # Project overview
├── requirements.txt       # Auto-analyzed dependencies
├── run.py                 # CLI entrypoint
├── api_server.py          # FastAPI microservice
├── scan_components.py     # Component loader
├── runner/
│   ├── component_executor.py
│   └── workflow_runner.py
├── components/            # Original component code (preserved structure)
│   ├── base.py
│   └── your_components/
└── inputs/                # Bundled models/data files

---

🔮 Roadmap

1. Enhanced Code Editor

• Integrate LSP (Language Server Protocol) to replace Jedi-based static completion

2. Remote Execution

• Submit workflows to remote servers / Kubernetes / Ray clusters
• Local = orchestration only; execution = distributed
• Ideal for LLMs and big data workloads

3. Parallel Execution

• Problem: Current execution is serial → underutilizes CPU/GPU
• Solution:
  • Parallel execution of independent nodes
  • GPU-aware scheduling (e.g., assign PyTorch models to specific devices)

---

📊 Feature Status (✅ Implemented | ⏳ Planned)

• ✅ Visual canvas (NodeGraphQt)
• ✅ Control flow: conditionals, loops, iteration
• ✅ Global variables + expression system
• ✅ Dynamic code components (embedded editor)
• ✅ Intelligent node recommendations
• ✅ One-click export (CLI + API)
• ✅ Multi-environment management
• ✅ LLM context integration (yellow jump / purple create buttons)
• ⏳ Code-to-canvas auto-creation (from editor → new node)
• ⏳ Parallel & remote execution

---

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the GPLv3 License.

---

🙏 Acknowledgements

• NodeGraphQt – Node graph framework
• PyQt-Fluent-Widgets – Fluent Design UI library
• Loguru – Elegant Python logging