別再用對話框畫圖了！GPT Image Canvas：把 AI 繪圖變成你的無限靈感畫布 | Stop Chatting, Start Drawing: GPT Image Canvas

將 tldraw 的靈活性與 AI 生成能力結合，打造本地化的專業 AI 視覺工作流。 | Combining tldraw's flexibility with AI generation for a professional local AI visual workflow.

🔎 工具速覽 / AT A GLANCE

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

🚀 引言 / Introduction

身為系統設計顧問，我最怕遇到那種『你要它想什麼』的老闆，而最痛苦的莫過於在對話框裡跟 AI 玩『猜猜看我想要什麼圖』的遊戲。gpt-image-canvas 就像是給 AI 繪圖裝上了『白板』，讓你不用在對話紀錄裡翻到天荒地老，直接在畫布上對著圖片下指令，把肝指數省下來喝下午茶。 | As a system design consultant, I dread the 'you should just know what I want' boss. The most painful part is playing 'guess the image' in a chat box. gpt-image-canvas is like giving AI image generation a 'whiteboard,' allowing you to prompt directly on the canvas without scrolling through endless chat history—saving your sanity and your liver for afternoon tea.

🛠️ 核心功能 / Key Features

AI Interactive Canvas: Built on tldraw, supporting prompt-to-image and reference-image generation.

AI 互動畫布：基於 tldraw 構建，支援從文字直接生成圖片或基於參考圖進行創作。

Local-first Storage: Generated images and project snapshots are stored locally, avoiding slow cloud sync issues.

本地優先儲存：生成的圖片與專案快照儲存在本地，不用擔心雲端同步慢到像在撥接。

Flexible API Integration: Supports official OpenAI and compatible endpoints (e.g., PackyCode), making model switching effortless.

靈活的 API 接構：支援 OpenAI 官方及所有相容接口（如 PackyCode），換模型就像換雞排店一樣簡單。

Credential-aware Routing: Built-in authentication logic that guides users to settings if missing keys, or directly to the canvas if authenticated.

智能權限路由：內建憑證感知，沒 Key 時導向設定頁，有 Key 時直奔畫布，不讓使用者在報錯頁面發呆。

💡 技術亮點 / Tech Highlights

Beyond the Chatbox: Shifts from 'conversational' to 'visual' operation, allowing generated images to be laid out and compared directly on the canvas.

告別對話框噩夢：將『對話式』轉為『視覺式』操作，讓 AI 產出的圖能直接在畫布上佈局、比對。

Professional Snapshots & History: Includes generation history with locate, rerun, and download features, ensuring assets are never lost.

專業級快照與歷史：內建生成歷史紀錄，支援定位、重新運行與下載，再也不怕 Bug 修完發現圖找不到了。

Cloud Backup Options: Supports Tencent Cloud COS backup, balancing local speed with cloud reliability.

雲端備份選項：支援騰訊雲 COS 備份，在本地速度與雲端安全之間取得平衡。

📦 快速上手 / Quick Start

Environment Setup: Install Node.js 22+ and pnpm 9.14.2 (Corepack recommended).

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

Rapid Deployment: Run `pnpm install` $\rightarrow$ copy `.env.example` to `.env` $\rightarrow$ run `pnpm dev`.

快速部署：執行 `pnpm install` $\rightarrow$ 複製 `.env.example` 到 `.env` $\rightarrow$ 執行 `pnpm dev`。

API Configuration: Enter your OpenAI API Key or custom Base URL in the `.env` file or the 'Configuration' dialog in the top-right of the web app.

配置 API：在 `.env` 或 Web 介面右上角的『配置』對話框輸入你的 OpenAI API Key 或自定義 Base URL。

Start Creating: Open `http://localhost:5173` and start unleashing your creativity (or meeting your boss's demands) on the canvas.

開始創作：開啟 `http://localhost:5173`，直接在畫布上揮灑你的創意（或應付老闆的要求）。

準備好試試 別再用對話框畫圖了！GPT Image Canvas：把 AI 繪圖變成你的無限靈感畫布 | Stop Chatting, Start Drawing: GPT Image Canvas 了嗎？

Ready to try 別再用對話框畫圖了！GPT Image Canvas：把 AI 繪圖變成你的無限靈感畫布 | Stop Chatting, Start Drawing: GPT Image Canvas?

前往 GitHub 頁面 →