Project: Creative Apps (GitHub Copilot) - VisionGen

Track

Creative Apps (GitHub Copilot)

Project Name

VisionGen

GitHub Username

@iwangbowen

Repository URL

https://github.com/iwangbowen/vision-gen

Project Description

VisionGen is a node-based infinite canvas AI image generation tool designed for film and animation content creators. It focuses on storyboard generation and image asset management, enabling creators to visually compose scenes using an intuitive drag-and-drop node graph.

Problem: Storyboard creation for film/animation is tedious — creators constantly switch between text editors, image generators, and asset managers. There's no unified visual workspace that ties AI generation directly into the creative workflow.

Key Features:

Infinite canvas with Text-to-Image, Image-to-Image, and Multi-Input fusion nodes
Built-in image editing: crop, inpainting, outpainting, camera angle control, enhance, and watermark removal
Pluggable LLM backend supporting Google Gemini
Timeline panel for frame sequencing and storyboard ordering
Asset library with drag-and-drop to canvas or timeline
Dark/light theme, undo/redo (50 steps), keyboard shortcuts, and context menus
Pure frontend — no backend required.

Demo Video or Screenshots

Demo Video

Video Link - VisionGen — AI Storyboard Canvas with Node-Based Image Generation

Screenshots

Primary Programming Language

TypeScript/JavaScript

Key Technologies Used

• React 19 + TypeScript 5.9
• Vite 7 (build tool)
• @xyflow/react (React Flow) for node-based infinite canvas
• Tailwind CSS v4 with @tailwindcss/vite
• Zustand 5 (state management with persistence)
• Google Gemini API (image generation + SSE streaming analysis)
• Lucide React (icons)
• react-image-crop, react-signature-canvas (image editing)
• GitHub Copilot (development assistant)

Submission Type

Individual

Team Members

No response

Submission Requirements

• My project meets the track-specific challenge requirements
• My repository includes a comprehensive README.md with setup instructions
• My code does not contain hardcoded API keys or secrets
• I have included demo materials (video or screenshots)
• My project is my own work with proper attribution for any third-party code
• I agree to the Code of Conduct
• I have read and agree to the Disclaimer
• My submission does NOT contain any confidential, proprietary, or sensitive information
• I confirm I have the rights to submit this content and grant the necessary licenses

Quick Setup Summary

1. Clone the repo: git clone https://github.com/iwangbowen/vision-gen.git
2. Install dependencies: npm install
3. Start dev server: npm run dev
4. Open http://localhost:5173
5. Configure your LLM API key in Settings dialog (Gemini)

Technical Highlights

• Node-based visual programming paradigm built on React Flow for intuitive storyboard composition
• Rich in-canvas image editing pipeline: inpainting with brush masks, AI outpainting, 3D camera angle control via SVG orbit interaction
• Custom drag-and-drop protocol using dedicated MIME types (visiongen-asset, visiongen-timeline-item) for reliable cross-panel communication
• Zero-backend architecture — entire app runs in the browser, API keys stored locally via Zustand persist middleware
• 50-step undo/redo system with clipboard support for complex node graph operations

Challenges & Learnings

GitHub Copilot's Impact on Development

Copilot agent mode was a game-changer for this solo project. It handled large-scale refactoring — renaming 40+ files during rebranding and translating all Chinese UI to English — in minutes instead of a full day. For LLM API integration (Gemini streaming, base64 image handling), Copilot's context-aware suggestions significantly reduced debugging time. It also maintained consistency across 30+ components by referencing my existing patterns (Zustand stores, Tailwind tokens, drag-and-drop protocols). The result: my role shifted from "writing code" to "directing code," allowing me to focus on UX and architecture decisions.

Technical Challenges

Designing a zero-backend architecture with a 50-step undo/redo system across interconnected node graphs, and implementing in-canvas image editing (brush inpainting, 3D camera angle control, AI outpainting) within React Flow, pushed the limits of a pure frontend app.

Contact Information

iwangbowen@gmail.com

Country/Region

China

This issue is a project submission, not a scoped implementation request, and it names no source files or tests to change. Start with README.md, run npm install and npm run dev, and inspect the Settings dialog and documented features; no completion condition is defined for a newcomer.