PAI Canvas is a powerful, browser-based infinite canvas tool designed for node-based AI image and video generation workflows. Built with a modular architecture using Vite, React 19, and React Flow, it empowers creators to build complex, multi-step AI generation pipelines seamlessly.
- Visual Programming Interface: Connect prompts, images, and configuration nodes to build complex AI generation pipelines.
- Node Types: Supports various specialized nodes including Text Input, Image Input, Image/Video Generation, API Settings, Local Save, Text Preview, Image Grid Preview, Scene Extraction, and more.
- Smart Routing & Context: Nodes automatically pass context (images, prompts) downstream, allowing for advanced chaining (e.g., Generate Image -> Image to Video).
- Broad Provider Support: Seamlessly integrates with top-tier AI models including Google (Imagen 3, Veo 3.1), OpenAI (DALL-E 3, Sora), Jimeng (4.5, 3.1), Midjourney, Flux, and Nano-banana.
- Advanced Parameter Control: Fine-tune aspect ratios (from 1:1 to extreme 1:8 / 8:1 panoramas), resolutions (1K to true 16.5MP 4K Area-based scaling), and generation counts.
- Multi-Image Generation & Previes: Support for generating multiple images simultaneously with grid previews.
- Local Cache Server: A Python-based local connector (
http://127.0.0.1:9527) handles native file system operations, enabling direct saving to local disks. - Format Conversion: Built-in support for converting raw PNG outputs to high-quality JPGs to save disk space.
- History & Polling: Robust task lifecycle management with persistent history and async job polling.
- Scene Extraction: Analyze scripts and extract character/scene breakdowns automatically.
- Storyboard Matrix: Organize shots chronologically with dedicated prompt and reference image inputs.
- Camera Movement Controls: Specific nodes to control AI video camera movements (Pan, Zoom, Tilt, Roll).
- Node.js 18+
- npm 9+
- Python local connector service running on
http://127.0.0.1:9527(strictly required for localSavenode operations and image caching).
npm installnpm run devOpen the development server URL printed in the terminal (usually http://localhost:5173).
- Canvas Engine: Powered by
React Flow(@xyflow/react) serving as the source of truth for nodes, edges, viewport, and selection. - Graph State: Centralized state management syncing React Flow events with application logic.
- Task Lifecycle (
src/domains/generation/taskLifecycle.ts): The core engine for preparing requests, handling API keys, polling async jobs, and parsing model outputs. - Model Providers (
src/services/generation/providers/): Modular adapters for different AI backends (GPT, Google, Sora, Veo, etc.), translating canvas configurations into provider-specific API payloads. - UI Base: React 19 + Tailwind CSS 4 + shadcn/ui.
| Command | Description |
|---|---|
npm run dev |
Start Vite development server |
npm run build |
Build production bundle |
npm run preview |
Preview production build locally |
npm run lint / format |
Run ESLint / Prettier |
src/components/- UI components including Canvas elements, distinct Nodes, side Panels, and Modals.src/domains/- Core business logic for graph registry, generation tasks, storyboard management, etc.src/features/- React Flow state implementations and canvas interaction hooks.src/hooks/- Reusable React hooks.src/services/- External API connectors, proxy configurations, and provider implementations.src/stores/- Global Zustand state stores (Settings, History, API Keys).src/utils/- Helper functions (e.g., dynamic resolution calculation).