把 AI 畫布搬回家：gpt-image-canvas 實測心得 | Local AI Canvas: Exploring gpt-image-canvas

告別雲端訂閱與瑣碎對話，在本地端打造你的 AI 靈感畫布。 | Say goodbye to cloud subscriptions and fragmented chats; build your AI inspiration canvas locally.

🔎 工具速覽 / AT A GLANCE

Category	AI Productivity Tool / Local Canvas
Pricing	Open Source (Free)
BestFor	Designers, System Architects, and AI Power Users
GitHub Stars	⭐ 170

🚀 引言 / Introduction

身為一名被 Bug 追殺、肝指數快破表的系統顧問，我最怕的就是那種『老闆突然想換個方向』的奇葩需求。傳統的 AI 聊天介面像是在傳簡訊，對話多了就找不到之前的圖。而 gpt-image-canvas 正好解決了這個痛點：它把 AI 生成直接整合進 tldraw 的無限畫布裡。想像一下，你不用在分頁之間切換到眼花繚亂，而是像在白色畫板上 brainstorming 一樣，直接把靈感『種』在畫布上，這才是我們工程師想要的效率。

🛠️ 核心功能 / Key Features

tldraw-powered infinite canvas: Supports prompt-to-image and reference-image generation to prevent inspiration fragmentation.

tldraw 驅動的無限畫布：支持 Prompt 生成與參考圖繪製，靈感不再碎片化。

Local-first storage: Generated images and project snapshots are stored locally, avoiding cloud sync latency and privacy leaks.

本地優先儲存：生成的圖片與專案快照存本地，不必擔心雲端同步延遲或隱私洩漏。

Flexible API integration: Supports official OpenAI and various compatible endpoints (e.g., PackyCode), with Codex login fallback.

靈活的 API 接入：支持 OpenAI 官方及各種兼容端點（如 PackyCode），甚至能透過 Codex 登入。

Cloud backup options: Optional Tencent Cloud COS integration for both local flexibility and cloud security.

雲端備份選項：可選擇對接騰訊雲 COS，讓你的作品在本地靈活且在雲端安全。

💡 技術亮點 / Tech Highlights

No more staring at empty chat boxes: Operate directly on the canvas, as simple as sketching during an afternoon tea break.

不再面對空白對話框：直接在畫布上操作，像在下午茶時間隨手塗鴉一樣簡單。

Customizable API priority: Configure keys directly in the dialog without constantly editing .env files (avoiding the pain of forgotten restarts).

可自定義的 API 優先級：可以在對話框直接配置 Key，不用每次都去翻 `.env` 檔（懂的都懂，改完 env 沒重啟導致 Bug 的痛）。

Comprehensive history tracking: Generation history supports locating, rerunning, and downloading, eliminating the struggle of finding 'that one similar image' among hundreds.

完整的歷史追蹤：生成紀錄支持定位、重新運行與下載，再也不用在幾百張臨時圖片中找『那張比較像的』。

📦 快速上手 / Quick Start

Environment Setup: Install Node.js 22+ and pnpm 9.14.2 (Corepack activation is recommended to avoid version conflicts).

環境準備：安裝 Node.js 22+ 與 pnpm 9.14.2 (建議用 Corepack 激活，省去版本衝突的麻煩)。

Rapid Deployment: Run `pnpm install` $ ightarrow$ Copy `.env.example` to `.env` $ ightarrow$ `pnpm dev`.

快速部署：執行 `pnpm install` $ ightarrow$ 複製 `.env.example` 為 `.env` $ ightarrow$ `pnpm dev`。

API Configuration: Set `OPENAI_API_KEY` in `.env` or configure your API Endpoint via the top-right dialog in the web interface.

配置 API：在 `.env` 設定 `OPENAI_API_KEY` 或在 Web 界面右上角配置你的 API Endpoint。

Start Creating: Open `http://localhost:5173` and turn your complex requirements into concrete visual charts!

開始創作：打開 `http://localhost:5173`，把你的奇葩需求變成具體視覺化圖表吧！

準備好試試 把 AI 畫布搬回家：gpt-image-canvas 實測心得 | Local AI Canvas: Exploring gpt-image-canvas 了嗎？

Ready to try 把 AI 畫布搬回家：gpt-image-canvas 實測心得 | Local AI Canvas: Exploring gpt-image-canvas?

前往 GitHub 頁面 →