GPT Image Canvas：把 AI 繪圖變成你的數位白板 | Local AI Visual Brainstorming

不再是單一對話框，讓 AI 繪圖在無限畫布上自由伸展 | Transition from a chat box to an infinite AI creative canvas.

🔎 工具速覽 / AT A GLANCE

Category	AI 視覺化工具 / 開源專案
Pricing	免費 (開源 / 自備 API Key)
BestFor	設計師、產品經理、需要快速原型化 (Prototyping) 的工程師
GitHub Stars	⭐ 141

🚀 引言 / Introduction

各位還在用那種『對話一次、等圖一張』的傳統 AI 聊天介面嗎？如果你像我一樣，每天被老闆要求『隨便調整一下』或者『想像力豐富一點』搞到肝指數爆表，那你絕對需要試試這個。GPT Image Canvas 把 tldraw 的無限畫布跟 AI 繪圖結合，讓你的靈感不再被限制在對話視窗裡，而是像在白板上 brainstorming 一樣自由。簡單來說，就是把 AI 繪圖變成你的數位草稿本。/ Stop struggling with the 'one-prompt-one-image' chat loop. GPT Image Canvas merges tldraw's infinite canvas with AI image generation, turning your creative process into a visual brainstorming session rather than a linear chat.

🛠️ 核心功能 / Key Features

Infinite Canvas Workflow: Built on tldraw, supporting prompt-to-image and reference-image generation without switching tabs.

無限畫布工作流：基於 tldraw，支援 Prompt 轉圖片及參考圖生成，不再需要頻繁切換視窗。

Local-First Storage: Generated images and project snapshots are stored locally for maximum reliability.

本地優先儲存：生成的圖片與專案快照直接存在本地，不用擔心網路斷線或雲端遺失。

Flexible API Integration: Native OpenAI support and compatibility with any OpenAI-standard image endpoints, including Codex login.

彈性 API 接口：原生支援 OpenAI，也相容任何 OpenAI 格式的 Image Endpoint，甚至可以用 Codex 登入。

Cloud Backup Option: Integrated Tencent Cloud COS backup to ensure your work survives sudden system crashes.

雲端備份選項：內建騰訊雲 COS 備份，讓你的大作不會因為電腦突然藍屏而消失。

Complete Generation History: Locate, rerun, and download previous generations to track your creative evolution.

完整的生成歷史：支援定位、重新執行與下載，修 Bug 的心路歷程也可以在畫布上被記錄。

💡 技術亮點 / Tech Highlights

Handle 'Chaotic Requirements' with ease: Compare different image versions side-by-side on the canvas for rapid iteration.

不用再忍受『老闆的奇葩要求』：直接在畫布上對比不同版本的生成圖，快速迭代直到滿足那位大老闆。

Rapid Deployment: Get it running during your afternoon tea break with minimal configuration.

極速部署，下午茶時間就能跑起來：pnpm install 完直接啟動，不用寫複雜的 Config 搞到加班。

Credential-Aware Routing: Smart homepage logic that seamlessly directs users based on API key availability.

權限感知路由：聰明的入口設計，沒 Key 時顯示首頁，有 Key 直接進畫布，使用者體驗拿捏得剛剛好。

📦 快速上手 / Quick Start

Prerequisites: Install Node.js 22+ and pnpm 9.14.2 (Corepack activation recommended).

環境準備：安裝 Node.js 22+ 與 pnpm 9.14.2 (建議用 Corepack 快速激活)。

Setup: Run `pnpm install` $\rightarrow$ Copy `.env.example` to `.env` $\rightarrow$ `pnpm dev`.

安裝與啟動：執行 `pnpm install` $\rightarrow$ 複製 `.env.example` 為 `.env` $\rightarrow$ `pnpm dev`。

Configuration: Add your `OPENAI_API_KEY` in .env, or set `OPENAI_BASE_URL` for compatible endpoints.

配置 API：在 .env 填入你的 `OPENAI_API_KEY`，或者設定 `OPENAI_BASE_URL` 接入你私有的中轉接口。

Start Creating: Open `http://localhost:5173` and start brainstorming on your canvas!

開始創作：打開 `http://localhost:5173`，在畫布上揮灑你的創意吧！

準備好試試 GPT Image Canvas：把 AI 繪圖變成你的數位白板 | Local AI Visual Brainstorming 了嗎？

Ready to try GPT Image Canvas：把 AI 繪圖變成你的數位白板 | Local AI Visual Brainstorming?

前往 GitHub 頁面 →