別再用碎紙片畫圖了！GPT Image Canvas：讓你的 AI 繪圖進入「無限畫布」時代 | Stop the Chaos: GPT Image Canvas - Bringing AI Art into the Era of Infinite Canvas

把 AI 繪圖從單調的對話框，變成可以隨意揮灑的專業設計畫布。 | Moving AI image generation from boring chatboxes to a professional, free-form design canvas.

🔎 工具速覽 / AT A GLANCE

Category	AI-Powered Design Tool / Local Canvas
Pricing	Open Source (Free)
BestFor	UI/UX Designers, Concept Artists, and Devs who hate organized folders
GitHub Stars	⭐ 141

🚀 引言 / Introduction

身為系統顧問，我最怕看到老闆說『那個...感覺可以再調整一下』，然後給你一張畫滿紅線的截圖。其實我們缺的不是 AI，而是一個能把 AI 產出直接拿來『對齊』的空間。GPT Image Canvas 正好解決了這個痛點：它不再是讓你在對話框裡像抽盲盒一樣等圖，而是直接把 tldraw 的無限畫布跟 AI 結合。想像一下，你可以在畫布上隨意擺放參考圖、生成新構圖，不用在 50 個瀏覽器分頁中迷失，這對我們這種肝指數偏高、只想快點下班吃雞排的人來說，簡直是救贖。 | As a system consultant, my nightmare is the boss saying 'It feels like it needs a bit of adjustment' while sending a screenshot covered in red ink. What we actually need isn't just AI, but a space where AI outputs can be aligned and iterated. GPT Image Canvas solves this: instead of 'blind-box' prompting in a chat window, it integrates tldraw's infinite canvas with AI. Imagine placing reference images and generating new compositions on one canvas without getting lost in 50 browser tabs—a true lifesaver for those of us with high liver enzymes just wanting to finish work and grab some fried chicken.

🛠️ 核心功能 / Key Features

Infinite AI Canvas: Powered by tldraw, supporting prompt-to-image and reference-image generation, breaking the linear limits of chat interfaces.

無限 AI 畫布：基於 tldraw，支持 Prompt 生成與參考圖生成，不用再忍受對話框的線性限制。

Local-first Storage: Generated images and project snapshots are stored locally, avoiding the lag of cloud synchronization.

Local-First 儲存：生成結果與專案快照直接存本地，不用擔心雲端同步慢到像在跑 3G。

Flexible API Integration: Native support for OpenAI gpt-image-2 and compatibility with various OpenAI-style image endpoints (e.g., PackyCode).

彈性 API 接接：原生支持 OpenAI gpt-image-2，也兼容各種 OpenAI 格式的 API 端點（例如 PackyCode）。

Credential-aware Routing: Built-in credential sensing that routes to login when keys are missing and directly to the canvas when available, eliminating the frustration of repetitive API key entry.

智能權限路由：內建憑證感知，沒 Key 時會導向登入頁，有 Key 直接進畫布，不用每次手動輸入 API Key 到崩潰。

💡 技術亮點 / Tech Highlights

Goodbye 'Endless Bugs': Visualized generation history with locate, rerun, and download capabilities—no more searching for images like a needle in a haystack.

告別『修不完的 Bug』：將生成歷史紀錄視覺化，支持定位、重新運行與下載，找圖不再像在大海撈針。

Cloud Backup Options: Optional Tencent Cloud COS backup ensures your hard work is safe even if your computer hits a Blue Screen of Death.

雲端備份選項：支持騰訊雲 COS 備份，本地快照與雲端同步兩手準備，防止電腦突然藍屏導致心血白費。

Minimal Deployment: Rapid startup with Node.js 22 and pnpm; Docker support makes deployment easier than writing unit tests.

極簡部署：Node.js 22 + pnpm 快速啟動，Docker 支持讓部署過程比寫單元測試簡單多了。

📦 快速上手 / Quick Start

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

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

Quick Start: Run `pnpm install` $\rightarrow$ Copy `.env.example` to `.env` $\rightarrow$ Fill in `OPENAI_API_KEY` $\rightarrow$ `pnpm dev`.

快速啟動：執行 `pnpm install` $\rightarrow$ 複製 `.env.example` 為 `.env` $\rightarrow$ 填入 `OPENAI_API_KEY` $\rightarrow$ `pnpm dev`。

Start Creating: Open `http://localhost:5173` and unleash your creativity on the canvas (or secretly procrastinate while your boss is watching).

開始創作：打開 `http://localhost:5173`，在畫布上直接發揮你的創意（或在老闆眼皮底下摸魚）。

準備好試試 別再用碎紙片畫圖了！GPT Image Canvas：讓你的 AI 繪圖進入「無限畫布」時代 | Stop the Chaos: GPT Image Canvas - Bringing AI Art into the Era of Infinite Canvas 了嗎？

Ready to try 別再用碎紙片畫圖了！GPT Image Canvas：讓你的 AI 繪圖進入「無限畫布」時代 | Stop the Chaos: GPT Image Canvas - Bringing AI Art into the Era of Infinite Canvas?

前往 GitHub 頁面 →