30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度这次我们来看一个面向 AI 创作的开源工作台——Infinite Canvas无限画布。这个项目的核心价值在于它把 AI 图片生成、画布编排、提示词库、素材管理和智能对话助手整合到了一个统一的界面里让你在一个地方就能完成从创意构思到视觉方案迭代的全过程。对于经常需要探索不同视觉风格、批量生成图片或管理复杂创作流程的设计师、内容创作者和 AI 爱好者来说它能显著提升效率。简单来说Infinite Canvas 是一个基于 Web 的“一站式”AI 创作平台。它本身不提供 AI 模型而是作为一个强大的前端工作台通过配置 OpenAI 兼容的 API 接口如 chatgpt2api、grok2api 等调用后端的大模型能力进行文生图、图生图、对话等操作。这意味着它的硬件门槛极低只要能运行现代浏览器和连接 API就能使用。项目采用 Next.js 等技术栈开发支持 Docker 一键部署和 Vercel 快速部署非常适合个人本地使用或小团队内部协作。本文将带你快速上手 Infinite Canvas。我们会从核心功能速览开始明确它能做什么、不能做什么然后详细讲解两种主流部署方式本地开发环境启动和 Docker 部署接着我们会一步步完成 API 配置并实测文生图、图生图、画布节点操作、提示词库使用等核心功能最后我们会探讨其资源占用、常见问题排查以及如何将其融入你的实际工作流。如果你正在寻找一个能整合现有 AI 能力、提升创作效率的可视化工具这篇文章值得你仔细阅读。1. 核心能力速览在深入部署和操作之前我们先通过一个表格快速了解 Infinite Canvas 的核心规格和能力边界这有助于你判断它是否适合你的需求。能力项说明项目类型开源 AI 创作工作台前端应用开源地址GitHub - basketikun/infinite-canvas核心功能无限画布编排、AI 文生图/图生图/参考图编辑、画布智能助手、提示词库、素材管理、支持音频/视频生成依赖后端 APIAI 能力来源兼容 OpenAI 接口的第三方 API如 chatgpt2api, grok2api, flow2api, newapi 等项目本身不包含模型。硬件门槛极低。主要依赖浏览器性能AI 计算由后端 API 服务承担。本地部署服务本身对 CPU/GPU 无特殊要求。显存占用不涉及。图像生成等重型计算发生在你配置的远程 API 服务器上。启动方式1.本地开发运行(bun run dev)2.Docker 容器运行3.Vercel 一键部署是否支持 API是作为客户端调用外部 API。项目也提供了本地 Canvas Agent可通过 MCP 协议让 AI Agent如 Codex, Claude Code操作画布。是否支持批量任务是。通过画布节点可以组织复杂工作流理论上可串联多个生成任务实现半自动化批量出图。数据存储默认配置下API Key、画布数据、生成记录等保存在浏览器本地存储。也可通过配置使用外部存储。适合场景个人灵感探索、视觉方案快速迭代、提示词工程实验、多步骤 AI 创作流程管理、教育与演示。不适合场景需要完全离线、本地模型推理的场景高并发、多用户在线生产环境项目处于开发阶段数据结构和存储格式可能变更。从表格可以看出Infinite Canvas 的核心优势在于集成与编排。它解决了 AI 创作中工具链割裂的问题——你不再需要在不同的标签页或软件间切换来管理提示词、上传参考图、调整参数和保存结果。2. 适用场景与使用边界理解了核心能力后我们进一步明确它的适用场景和需要注意的边界。它最适合谁用AI 绘画爱好者与设计师需要一个可视化界面来系统性地尝试不同提示词、融合多种参考图并保存成功的“配方”。内容创作者与营销人员需要快速为文章、社交媒体批量生成风格统一的配图并管理这些素材。产品经理与策划在早期构思阶段用 AI 快速生成产品原型图、界面草图或故事板并在画布上关联和注释。开发者与研究者希望有一个前端界面来测试和对比不同 AI 模型 API 的生成效果或构建自定义的创作工作流。它能解决什么问题流程碎片化将提示词输入、图片生成、编辑、对话、素材归档等多个环节集中在一个工作台。创意难以延续通过画布节点连接可以清晰地记录从“初步构思”到“最终成图”的完整迭代路径方便回溯和修改。提示词管理混乱内置的提示词库功能可以收藏和复用来自开源社区的优质提示词。协作与展示困难画布本身就是一个可视化的创作看板便于向他人展示思路和过程。使用边界与注意事项非离线解决方案你必须拥有可用的 OpenAI 兼容 API 服务自建或使用第三方。项目不包含任何本地推理模型。开发阶段警告项目明确处于活跃开发阶段数据库结构和存储格式可能调整不建议用于对数据持久性要求极高的生产环境或直接公网暴露给多人共用。重要数据建议定期导出备份。版权与合规使用 AI 生成内容时你必须确保遵守所用 API 服务商的规定并对生成内容负责。用于商业用途时需特别注意人物肖像、商标、艺术风格等可能存在的版权风险。隐私安全默认情况下API Key 存储在浏览器本地。在共享电脑或不确定安全性的环境中使用时需谨慎。如果部署在服务器上应做好适当的访问控制。3. 环境准备与前置条件开始部署前请确保你的环境满足以下基本要求。由于 Infinite Canvas 是前端应用对本地环境的要求相对宽松。基础运行环境操作系统Windows 10/11, macOS, Linux 均可。主要取决于你选择的部署方式。Node.js 环境如果选择本地bun运行需要安装bun一个快速的 JavaScript 运行时。也可以使用npm或yarn但项目推荐bun。Docker 环境如果选择 Docker 部署需要在本地安装 Docker 和 Docker Compose。这是最推荐的方式能避免环境依赖问题。网络能够访问 GitHub 以下载代码并且能够稳定连接你计划使用的 AI API 服务如 chatgpt2api 等。AI API 服务准备关键这是 Infinite Canvas 能够工作的前提。你需要提前准备好一个可用的 OpenAI 兼容 API 端点Base URL和对应的 API Key。选项一使用第三方服务例如chatgpt2api、grok2api等。你需要在其官网注册并获取 API Key 和 Base URL。通常这类服务会提供一定的免费额度。选项二自建服务如果你本地部署了诸如stable-diffusion-webui的 API 服务、Ollama的 OpenAI 兼容接口或者其他任何提供了/v1/chat/completions和/v1/images/generations等标准 OpenAI 接口的服务也可以使用。只需确保 Infinite Canvas 所在的网络能够访问到这个服务的地址。端口占用检查Infinite Canvas 默认使用3000端口。在启动前请检查该端口是否被其他应用如其他 Next.js 项目、某些开发服务器占用。Windows在命令行中运行netstat -ano | findstr :3000。macOS/Linux在终端中运行lsof -i :3000或sudo lsof -i :3000。 如果端口被占用你可以选择停止占用端口的进程或者在后续的启动命令中指定另一个端口。4. 安装部署与启动方式Infinite Canvas 提供了多种启动方式这里介绍最常用的两种本地 Bun 运行和 Docker 运行。Docker 方式更为简单和干净强烈推荐。4.1 方式一使用 Docker 快速启动推荐Docker 方式能隔离所有依赖避免环境冲突是最省心的部署方法。获取项目代码git clone gitgithub.com:basketikun/infinite-canvas.git cd infinite-canvas或者如果你没有配置 SSH可以使用 HTTPS 方式git clone https://github.com/basketikun/infinite-canvas.git cd infinite-canvas构建并运行 Docker 容器 项目根目录下提供了Dockerfile。使用以下命令构建镜像并运行容器# 构建 Docker 镜像镜像标签命名为 infinite-canvas docker build -t infinite-canvas . # 运行容器将容器内的 3000 端口映射到本机的 3000 端口 docker run --rm -p 3000:3000 infinite-canvas--rm参数表示容器停止后自动删除避免残留。如果你想在后台运行可以加上-d参数docker run -d --rm -p 3000:3000 --name my-canvas infinite-canvas访问服务 容器启动后打开浏览器访问http://localhost:3000。如果一切正常你将看到 Infinite Canvas 的界面。4.2 方式二本地 Bun 开发环境运行如果你需要修改代码或进行二次开发可以选择在本地运行。安装 Bun 如果你还没有安装 Bun请根据官方文档安装https://bun.sh/docs/installation进入项目前端目录并安装依赖git clone gitgithub.com:basketikun/infinite-canvas.git cd infinite-canvas cd web # 注意前端代码在 web 子目录下 bun install这个过程会下载项目所需的所有 Node.js 依赖包。启动开发服务器bun run dev同样服务将在http://localhost:3000启动。开发模式下你对代码的修改会触发热重载。启动成功标志浏览器访问http://localhost:3000后能看到 Infinite Canvas 的主界面通常是一个空白的画布区域和顶部的工具栏。5. 功能测试与效果验证服务成功启动后最关键的一步是配置 AI API否则所有生成功能都无法使用。配置完成后我们将逐一测试核心功能。5.1 第一步配置 AI API 连接这是让 Infinite Canvas “活”起来的关键。在浏览器中打开http://localhost:3000。点击界面右上角的设置齿轮图标按钮。找到API 配置或模型设置相关区域不同版本位置可能略有不同通常在“系统设置”或“聊天设置”中。你需要填写两个核心信息Base URL你的 OpenAI 兼容 API 服务的地址。例如如果你使用chatgpt2api可能是https://api.chatgpt2api.com/v1。请务必替换为你自己服务的真实地址。API Key对应服务的 API 密钥。保存配置。“New API 自动配置”技巧 根据项目文档如果你使用特定的 New API可以在系统设置 - 聊天方式 - 添加聊天设置中填入一个格式化的 URL例如https://canvas.best?apiKey你的密钥baseUrl你的API地址访问此链接后系统会自动打开配置弹窗并填充信息。如果你自己部署了 Infinite Canvas需要将https://canvas.best替换成你自己的部署地址。5.2 第二步基础功能实测配置成功后我们就可以开始测试了。5.2.1 文生图 (Text-to-Image)这是最基础的功能用于验证 API 连接是否正常。操作在画布空白处右键或通过工具栏找到“添加节点” - “AI 图像”或类似选项。在节点的输入框中输入正向提示词例如a beautiful sunset over a mountain lake, digital art和负向提示词可选。参数设置通常可以设置模型、图片尺寸、生成数量、采样步数等。这些参数取决于你后端 API 的支持情况。执行生成点击“生成”按钮。预期结果节点状态变为“完成”并在画布上显示生成的图片缩略图。成功判断图片正常显示且风格、内容符合提示词的大致描述。失败排查无反应或报错首先检查 API Base URL 和 Key 是否正确网络是否通畅。查看浏览器开发者工具F12的“网络(Network)”和“控制台(Console)”标签页看是否有请求失败或错误信息。图片扭曲或黑图可能是后端模型不支持该尺寸或参数尝试使用更通用的参数如 512x51220步。5.2.2 图生图 (Image-to-Image) 与参考图编辑测试利用现有图片进行再创作的能力。准备素材在画布上上传一张本地图片作为参考图通常通过拖拽或上传按钮。操作选中该图片节点右键或通过关联菜单选择“图生图”或“以图生图”。在弹出的界面中你可以调整提示词和“重绘强度”等参数。执行生成点击生成。预期结果生成一张既保留原图部分元素如构图、色彩又融入新提示词内容的新图片。成功判断新图片是原图有意义的变体而非完全无关的内容。失败排查如果效果不佳尝试调整“重绘强度”。强度过低可能变化不大强度过高可能失去原图特征。5.2.3 画布助手与智能对话测试围绕画布内容进行交互式创作的能力。操作在画布上选中一个或多个节点可以是图片节点或文本节点。调用助手通过右键菜单或侧边栏找到“画布助手”或“对话”功能。输入指令在对话框中输入自然语言指令例如“为这张图片生成一个描述它的提示词”、“基于这张图和上一张图创作一个连贯的新场景”。预期结果助手能够理解画布上下文并执行相应操作如生成新的图片节点、修改现有节点属性或给出文本回答。成功判断助手的回应与选中的节点内容相关并能正确执行你的指令。失败排查此功能高度依赖后端对话模型如 GPT-4的理解和调用能力。如果指令未被正确理解尝试更清晰、更具体的表述。5.2.4 提示词库的使用测试利用社区优质提示词的能力。操作在界面中找到“提示词库”或“Prompt Library”入口。浏览与搜索提示词库会加载缓存在内存中的开源提示词。你可以按类别、风格或关键词进行浏览和搜索。应用提示词点击一个感兴趣的提示词它通常会被自动填入当前激活的图像生成节点的提示词框中或创建一个新的生成节点。预期结果快速应用复杂、成熟的提示词组合生成高质量图片。成功判断提示词被成功应用并生成了符合该风格预期的图片。5.2.5 画布编排与节点操作测试工作台的核心——可视化流程管理。创建节点尝试创建多种类型的节点文本节点记录想法、图片节点参考图或生成图、AI 图像节点、分组节点等。连接节点使用连线工具将节点连接起来。例如将一个文本节点创意描述连接到 AI 图像节点作为输入。组织画布拖拽移动节点缩放画布使用小地图导航。创建多个画布项目来管理不同的创作主题。导入/导出测试画布项目的导出通常为 JSON 文件和导入功能确保你的工作流可以保存和复用。预期结果能够直观地构建出“创意输入 - AI 生成 - 结果评估 - 二次修改”的完整可视化流程。成功判断画布操作流畅节点连接逻辑清晰数据能正确保存和加载。6. 接口 API 与批量任务Infinite Canvas 本身主要是一个前端交互界面其“批量任务”能力并非通过传统的命令行 API 实现而是通过画布节点工作流的自动化潜力和本地 Canvas Agent来体现。6.1 画布工作流实现半自动化批量你可以构建一个可复用的画布模板创建一个接收“文本列表”或“图片列表”的输入节点。将其连接到一个 AI 图像生成节点。通过复制节点、修改输入参数的方式快速生成一系列变体。 虽然不能像脚本一样一键处理成百上千个任务但对于小批量、多方案的探索性任务这种可视化串联的效率远高于手动在 WebUI 中反复操作。6.2 本地 Canvas Agent 与 MCP 集成进阶这是实现更智能自动化的关键。通过运行本地 Canvas Agent你可以让 Codex 或 Claude Code 这类 AI 编程助手通过 MCPModel Context Protocol协议来直接操作你的画布。启动 Canvas Agent根据项目AGENTS.md文档你需要在本机运行一个 Agent 服务。这通常需要额外的环境配置如安装相关 SDK。安装 Codex App 插件项目提供了 Codex App 插件安装后 Codex 会自动注册 MCP 并尝试连接本地 Agent。通过自然语言控制画布连接成功后你可以在 Codex 中直接输入指令如“在画布中央添加一个节点提示词是 ‘a cat wearing glasses’并使用 SDXL 模型生成”Agent 会解析指令并操作画布执行。实现复杂工作流理论上你可以编写脚本或通过对话让 Agent 帮你完成一系列重复性的画布操作从而实现更高级的批量任务。注意此功能目前处于开发阶段配置相对复杂且依赖特定的 AI 编程工具。对于大多数用户优先掌握画布本身的手动和半自动编排能力更为实际。7. 资源占用与性能观察由于 Infinite Canvas 是纯前端应用其本地资源占用主要取决于浏览器和画布中内容的复杂程度。内存占用打开一个包含数十个节点和图片的画布项目浏览器标签页的内存占用可能在 300MB - 800MB 之间属于现代 Web 应用的正常范围。节点和图片越多占用越高。CPU 占用常规操作下 CPU 占用很低。在进行复杂的画布缩放、渲染大量连线或图片滤镜时会有短暂升高。网络流量所有的 AI 生成请求图片、对话都会发送到你配置的外部 API因此会产生相应的网络流量和 API 调用费用。请注意监控你所用 API 服务的用量。存储占用默认情况下所有数据画布、图片、设置都存储在浏览器的 IndexedDB 或 LocalStorage 中。对于长期、大量的创作这可能会占用数百 MB 甚至更多的本地存储空间。请定期清理浏览器数据或关注项目未来是否支持导出到外部文件/数据库。性能优化建议画布优化对于极其复杂的项目可以尝试将已完成的部分节点“折叠”或“分组”以减少实时渲染压力。图片管理生成的图片以缩略图形式显示原图可能被缓存。如果感觉卡顿可以尝试在浏览器设置中清除该站点的缓存注意这可能会删除未导出的画布数据请先导出备份。浏览器选择使用 Chrome、Edge、Firefox 等主流浏览器的较新版本以获得更好的性能。8. 常见问题与排查方法在部署和使用过程中你可能会遇到以下问题。这里提供通用的排查思路。问题现象可能原因排查方式解决方案访问localhost:3000失败1. 服务未成功启动。2. 端口被占用。3. 防火墙/安全软件阻止。1. 检查终端/命令行确认服务启动无报错。2. 使用netstat或lsof检查 3000 端口。3. 尝试访问http://127.0.0.1:3000。1. 根据错误日志解决依赖或配置问题。2. 终止占用端口的进程或修改启动命令更换端口如docker run -p 3001:3000。3. 临时关闭防火墙或添加规则。AI 生成图片失败或报错1. API 配置错误URL 或 Key。2. 网络问题无法连接 API。3. 后端 API 服务不支持该模型或参数。4. API 额度已用尽。1. 复查设置中的 Base URL 和 API Key。2. 打开浏览器开发者工具 (F12)查看 “Network” 标签中生成请求的返回状态码和响应体。3. 直接使用 curl 或 Postman 测试你的 API 端点是否正常。1. 修正配置信息。2. 确保网络通畅API 服务可达。3. 尝试使用更通用的模型名和参数如dall-e-2,512x512。4. 检查 API 服务商后台的余额或用量。画布数据丢失1. 浏览器本地存储被清除。2. 使用了隐私/无痕模式。3. 项目版本升级导致数据结构不兼容。1. 检查是否清理过浏览器数据。2. 确认是否在常规浏览器窗口中使用。1.重要数据务必定期使用画布的“导出”功能备份为 JSON 文件2. 不要在无痕模式下进行重要创作。3. 关注项目更新日志重大版本升级前先备份。提示词库为空或加载失败1. 网络问题导致无法从 GitHub 抓取。2. 项目用于缓存提示词的 Next.js Route 运行异常。1. 检查网络连接。2. 查看浏览器控制台是否有关于提示词库的加载错误。1. 刷新页面或等待网络恢复。2. 可以暂时手动输入提示词此功能不影响核心生成能力。Docker 构建或运行失败1. Docker 未正确安装或启动。2. Dockerfile 依赖的镜像源问题。3. 磁盘空间不足。1. 运行docker --version和docker ps检查 Docker 状态。2. 查看构建失败的具体错误信息。1. 重新安装或启动 Docker Desktop。2. 尝试更换 Docker 镜像源如国内镜像。3. 清理磁盘空间。本地 Bun 运行bun install失败1. Node.js/bun 版本问题。2. 网络问题导致包下载失败。3. 系统权限不足。1. 确认 bun 已正确安装 (bun --version)。2. 检查网络或尝试使用代理。1. 升级 bun 到最新稳定版。2. 重试命令或删除node_modules和bun.lockb后重新安装。3. 在 macOS/Linux 上避免使用sudo可考虑使用nvm管理 Node 环境。9. 最佳实践与使用建议为了更稳定、高效地使用 Infinite Canvas并规避潜在风险建议遵循以下实践首次使用先做连通性测试部署完成后不要急于构建复杂工作流。先配置最简单的 API用一句简单的提示词测试文生图功能是否畅通。这是验证整个链路是否可用的最快方法。画布项目分而治之不要将所有创作都放在一个巨大的画布里。为不同的主题、项目或客户创建独立的画布项目并通过“项目”功能进行管理。这样结构清晰也便于分享和备份。善用“导出/导入”功能这是你最重要的数据保险。在尝试新版本、清理浏览器数据或更换电脑前务必将重要的画布项目导出为 JSON 文件保存。构建可复用的模板节点如果你有一套固定的生成参数如特定的模型、尺寸、风格化权重可以将其保存为一个节点然后通过复制来快速复用避免每次手动设置。关注 API 成本与合规如果你使用付费 API注意监控生成图片的尺寸、数量和质量设置这些直接影响成本和耗时。同时严格遵守 API 服务商的内容政策避免生成违规内容。本地部署的安全边界如果你将 Infinite Canvas 部署在云服务器或内网供他人访问务必设置好访问密码、防火墙规则或通过 VPN 访问防止 API Key 和创作数据泄露。版权与授权意识使用 AI 生成商业用途的图片时务必确认你使用的 API 服务条款允许商用。对于生成内容中可能包含的他人版权元素如特定艺术家风格、知名角色形象要保持警惕必要时进行二次创作或获取授权。参与社区与关注更新项目处于活跃开发期新功能、Bug 修复会不断推出。关注 GitHub 仓库的 Issues 和 Releases可以及时了解动态也能向开发者反馈问题。Infinite Canvas 作为一个开源 AI 创作工作台其最大的魅力在于将离散的创作动作整合进一个可扩展、可编程的视觉空间里。它可能不是功能最强大的单一工具但在“连接”与“编排”这件事上它提供了一个极具潜力的范式。对于想要系统性探索 AI 绘画、管理复杂创作流程的用户来说花一些时间熟悉它的画布逻辑和节点操作很可能会为你打开一扇新的效率之门。先从部署和一次成功的文生图开始逐步尝试图生图、画布助手最终构建属于自己的自动化视觉工作流这才是解锁其价值的正确路径。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度