30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度开源AI创作无限画布infinite-canvas是一个把素材管理、提示词工程、AI生图、画布编排和智能助手整合在一起的一站式工作台。它不是一个独立的AI模型而是一个基于Web的前端应用核心价值在于提供了一个可视化的创作环境让你能在一个界面里完成从灵感构思、素材整理、AI生成到方案迭代的全过程。这个项目由开发者 basketikun 开源目前在GitHub上获得了超过2.6k的Star热度很高。它的定位非常明确为AI图片创作提供高效的工作流。你不用再在多个标签页或软件间来回切换——找参考图、写提示词、调用AI接口、保存结果、二次编辑这些操作都可以在同一个无限大的画布上完成。对于想尝试AI绘画但觉得流程繁琐的开发者或创作者来说infinite-canvas的核心吸引力在于其“一体化”和“可视化”。它支持文生图、图生图、参考图编辑甚至集成了对话助手和本地Agent可以直接在画布上与AI协作。更重要的是它完全兼容OpenAI的API生态这意味着你可以接入任何支持OpenAI格式的AI服务无论是官方的API还是各类开源模型部署后提供的兼容接口甚至是社区提供的免费中转服务灵活性极高。本文将带你快速上手infinite-canvas从环境部署、服务启动、API配置到核心的无限画布操作、AI生图测试、提示词库使用以及如何利用本地Agent进行自动化创作。我们重点关注它的实际部署门槛、功能集成度、以及作为工作台是否能真正提升创作效率。1. 核心能力速览在深入部署和操作之前我们先通过一个表格快速了解infinite-canvas的核心规格和能力边界帮助你判断它是否适合你的需求。能力项说明项目类型开源Web前端工作台非独立AI模型核心功能无限画布编排、AI文生图/图生图、参考图编辑、对话助手、提示词库、素材管理、视频生成、本地Agent集成硬件门槛无GPU要求。项目本身是Web应用AI推理依赖后端API服务。本地运行只需普通电脑。显存占用不占用本地显存。图像生成等计算任务由你配置的后端API服务承担。启动方式本地开发模式启动、Docker容器运行、或一键部署至Vercel等云平台是否支持API是。作为前端它通过调用配置的OpenAI兼容API来工作。同时项目也提供了本地Canvas Agent可通过MCP协议被其他AI助手如Codex、Claude Code调用。是否支持批量任务支持在画布上组织多个生成节点可视为一种可视化的批量任务编排。数据存储画布数据、素材、生成记录默认保存在浏览器本地存储。也可通过配置使用外部存储。适合场景AI绘画工作流探索、视觉方案快速迭代、提示词管理与测试、多AI工具协同创作、个人或小团队本地化部署使用开源协议GNU Affero General Public License v3.0 (AGPL-3.0)从表格可以看出infinite-canvas最大的特点是低门槛和高集成度。它对用户本地的硬件几乎没有要求真正的计算压力转移到了你配置的AI服务上。这使其非常适合那些已经拥有或可以访问稳定AI API如Midjourney API、Stable Diffusion API服务、或各类开源模型中转服务的创作者用于构建一个专属的、可定制化的创作中心。2. 适用场景与使用边界在决定投入时间部署和使用前明确它的适用场景和限制至关重要。它非常适合以下人群和场景AI绘画流程优化者厌倦了在Discord、WebUI、PS、文件管理器之间反复切换希望有一个统一界面管理整个创作流程。视觉方案探索者需要快速生成大量草图或变体并在一个画布上对比、组合、迭代例如UI/UX设计、概念艺术、营销素材创作。提示词工程师需要系统地管理、测试和复用不同风格的提示词infinite-canvas内置的提示词库和画布节点化操作非常适合这一点。希望集成AI到工作流的开发者项目提供了本地Agent和MCP支持允许像Codex这样的AI编码助手直接操作画布为实现自动化创作流程提供了可能。追求数据隐私的个人/小团队由于可以完全本地部署且数据默认存储在浏览器本地对于不希望创作过程和素材上传到第三方云服务的用户来说是一个安全的选择。它可能不适合或需要注意的边界非“开箱即用”的AI生成器它本身不包含任何AI模型。你必须自己准备一个可用的、支持OpenAI兼容接口的AI服务如图像生成、对话大模型并正确配置API密钥和地址。这对于不熟悉API调用的纯新手有一定门槛。高并发生产环境项目README明确提示当前处于开发阶段数据结构和存储格式可能变动不建议直接用于公网多人共用。它更偏向于个人或小范围的内部工具。复杂的图像精修虽然支持参考图编辑图生图但其图像处理能力取决于后端AI服务的功能。对于需要复杂图层、蒙版、笔刷操作的专业级修图仍需依赖Photoshop等专业软件。版权与合规性使用AI生成内容时必须遵守相关法律法规和平台政策。确保你使用的后端AI服务合法合规并对生成的内容尤其是涉及肖像、商标、特定风格拥有相应的使用权。项目本身是工具不承担内容合规责任。安全与合规提醒素材来源上传至画布的参考图、素材请确保你拥有相应的版权或使用权。AI服务合规你配置的AI API服务应来自合法合规的渠道遵守其服务条款不用于生成违法、侵权或不良内容。数据备份由于数据默认存储在浏览器本地清除浏览器数据可能导致丢失。重要项目务必定期使用画布的导出功能进行备份。3. 环境准备与前置条件部署infinite-canvas本身非常简单核心在于准备好可用的AI服务环境。以下是部署前需要确认的事项清单。1. 基础运行环境操作系统Windows 10/11, macOS, 或 Linux (如Ubuntu) 均可。项目通过Docker或Node.js运行跨平台兼容性好。Node.js环境 (可选)如果你选择从源码运行开发服务器需要安装Node.js (推荐LTS版本) 和包管理器Bun或npm/yarn。从网络材料看项目推荐使用Bun。Docker环境 (推荐)如果希望环境隔离、部署简单强烈推荐安装Docker和Docker Compose。这是最通用且不易出错的方式。Git用于克隆代码仓库。2. 核心依赖可用的AI API服务这是最关键的一步。infinite-canvas需要至少一个支持OpenAI兼容接口的后端服务。你有多种选择商业API如OpenAI的DALL-E API、Midjourney API如果提供兼容接口。开源模型自建服务在本地或云服务器上部署Stable Diffusion WebUI (配--api参数)、ComfyUI (通过comfy-api等扩展)、或其他任何能提供类似/v1/images/generations或/v1/chat/completions接口的服务。第三方中转/聚合API网络上一些项目提供了将不同模型封装成OpenAI格式的服务例如材料中提到的chatgpt2api、grok2api、flow2api、newapi等。使用这类服务时请务必确认其可靠性、稳定性和隐私政策。你需要准备好API Base URL你的AI服务的地址例如http://localhost:7860/v1(Stable Diffusion WebUI) 或https://api.openai.com/v1。API Key对应服务的密钥。对于本地部署的开源模型可能不需要密钥或使用固定字符串。3. 网络与端口infinite-canvas默认运行在3000端口。确保该端口未被其他程序占用。如果你的AI API服务运行在本地如localhost:7860浏览器需要能访问到这个地址。如果infinite-canvas部署在Docker容器内可能需要配置网络让容器能访问宿主机服务。4. 磁盘空间项目本身很小但生成的图片、缓存的数据会占用浏览器本地存储空间。确保有足够的磁盘空间。4. 安装部署与启动方式提供了从简单到灵活的多种部署方式你可以根据自身情况选择。4.1 方式一Docker快速启动最推荐Docker方式能避免环境依赖问题是最简单快捷的启动方法。克隆仓库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命令执行后如果看到类似输出说明服务已启动 infinite-canvas0.4.0 start next start ▲ Next.js 14.2.5 - Local: http://localhost:3000访问服务 打开浏览器访问http://localhost:3000。你应该能看到infinite-canvas的界面。4.2 方式二本地开发模式运行如果你需要修改代码或进行二次开发可以选择此方式。克隆仓库并进入前端目录git clone https://github.com/basketikun/infinite-canvas.git cd infinite-canvas cd web # 核心前端代码在web目录下安装依赖并启动 项目推荐使用Bun作为包管理器。如果你没有安装Bun需要先安装它或者使用npm/yarn。# 使用Bun (推荐) bun install bun run dev # 或使用npm npm install npm run dev # 或使用yarn yarn install yarn dev访问服务 开发服务器启动后同样访问http://localhost:3000。4.3 方式三一键部署到Vercel免服务器对于想快速体验且不介意使用云服务的用户可以直接将项目导入Vercel。访问 Vercel官网 并登录支持GitHub账号登录。点击“Add New...” - “Project”。导入你的GitHub仓库basketikun/infinite-canvas。在配置页面构建命令和输出目录通常会自动识别根目录有vercel.json配置。直接点击“Deploy”即可。部署完成后你会获得一个*.vercel.app的域名通过该域名即可访问你的infinite-canvas实例。注意Vercel部署是Serverless的你的画布数据默认仍存储在访问者的浏览器本地而不是Vercel服务器上。这意味着在不同设备或浏览器间数据不互通。5. 首次配置与API连接成功启动服务并打开页面后第一件事就是配置AI服务否则大部分功能无法使用。进入配置页面 点击页面右上角的设置图标通常是一个齿轮或用户头像找到“系统设置”或“API配置”相关入口。配置AI服务 你需要填写两个核心信息Base URL你的OpenAI兼容API的基础地址。例如本地Stable Diffusion WebUI:http://127.0.0.1:7860/v1本地ComfyUI API:http://127.0.0.1:8188第三方服务:https://api.example.com/v1API Key对应服务的密钥。对于很多本地开源服务可以填写任意非空字符串如sk-demo。使用“New API自动配置”链接可选 如果你使用的服务支持一种特定的配置链接格式可以在设置中找到“添加聊天设置”的地方直接填入如下格式的链接https://canvas.best?apiKey你的API_KEYbaseUrl你的BASE_URL访问此链接或将canvas.best替换为你自己的部署地址后页面会自动弹出配置弹窗并填充信息。这是一个便捷的分享配置方式。测试连接 配置保存后尝试在画布上使用“对话助手”或“文生图”功能。如果能正常收到AI的回复或生成图片说明配置成功。6. 核心功能测试与效果验证配置好API后我们就可以深入测试infinite-canvas的各项核心功能了。我们将按照一个典型的创作流程来验证。6.1 功能一无限画布与节点操作这是项目的基石所有创作都在这个画布上进行。测试目的验证画布的基本交互能力包括创建、编辑、组织节点。操作步骤进入主界面默认会有一个空白画布。你可以通过鼠标滚轮缩放拖拽画布背景移动视角。创建节点在画布空白处右键或使用快捷键选择创建不同类型的节点如“文本节点”、“图像节点”、“AI生成节点”。编辑节点点击节点右侧或下方会出现属性面板可以编辑节点的内容如文本、样式、关联的AI参数等。连接节点从一个节点的输出锚点拖拽到另一个节点的输入锚点可以建立节点间的逻辑关系。例如将一个“提示词”文本节点的输出连接到“文生图”节点的输入。画布管理测试创建多个画布项目、使用小地图导航、撤销/重做操作、导入/导出画布通常为JSON格式。预期结果与成功标准能够流畅地缩放、拖动画布。可以成功创建、移动、删除各类节点。节点之间的连线操作正常连线能清晰表达数据流向。画布的导入导出功能能正确保存和恢复工作状态。6.2 功能二AI文生图与提示词库这是最常用的AI创作功能。测试目的验证通过配置的API进行文生图并利用内置提示词库提升效率。操作步骤创建生成节点在画布上添加一个“AI图像生成”节点可能命名为“文生图”、“Generate Image”等。编写提示词手动输入在节点的“Prompt”输入框中直接编写描述如“a beautiful sunset over a mountain lake, digital art”。使用提示词库点击提示词输入框旁的按钮或从侧边栏打开提示词库。提示词库会从多个GitHub开源项目抓取并缓存了大量分类提示词。你可以浏览、搜索并点击插入到当前输入框。设置参数配置生成参数如模型选择取决于后端API、图片尺寸、生成数量、采样步数等。执行生成点击节点上的“生成”或“运行”按钮。节点状态会变化生成完成后图片会显示在节点上或作为输出。预期结果与成功标准提示词库能够正常加载并显示分类和内容。点击生成后能收到来自后端API的响应并在合理时间内取决于API速度在画布上看到生成的图片。生成的图片质量符合后端AI模型的能力预期。6.3 功能三图生图与参考图编辑基于现有图片进行迭代创作。测试目的验证上传参考图并以此为基础进行AI再创作的功能。操作步骤上传参考图可以将本地图片直接拖拽到画布上或通过“上传”按钮添加创建一个图像节点。创建图生图节点添加一个“图生图”节点。连接节点将图像节点的输出连接到图生图节点的“参考图”输入端口。设置参数在图生图节点上除了输入提示词还可以设置“重绘强度”、“去噪强度”等参数控制新图像与参考图的相似度。执行生成点击生成观察输出结果。预期结果与成功标准图片上传成功并能正确显示在画布上。图生图节点能正确接收参考图输入。生成的图片在内容和风格上受到参考图的影响调整参数能产生可感知的变化。6.4 功能四画布助手与对话创作这是一个集成在画布环境中的AI对话助手。测试目的验证在画布上下文中与AI对话并让AI直接操作画布元素的能力。操作步骤在画布上选中一个或多个节点如一个文本节点包含角色描述一个图像节点包含风格参考。打开“画布助手”面板可能是一个聊天侧边栏。向助手提问例如“基于我选中的角色和风格生成一个场景描述”或“为选中的图片生成三个变体”。助手会根据选中的节点内容进行理解并可能直接调用AI生成新的节点如图片、文本插入到画布中。预期结果与成功标准画布助手能够正确识别当前选中的节点内容。助手给出的回复或执行的操作如生成新图片与画布上下文相关。新生成的内容能自动作为节点添加到画布合适的位置。6.5 功能五本地Agent与MCP集成高级功能这是实现自动化工作流的关键。测试目的验证通过本地Canvas Agent让外部AI编码助手如Codex, Claude Code能读取和操作当前画布。操作步骤启动Canvas Agent根据项目文档AGENTS.md在本地运行Canvas Agent服务。这通常是一个独立的进程或服务。安装Codex App插件如果你使用Codex App安装项目提供的插件。插件会自动注册MCPModel Context Protocol并尝试连接本地运行的Canvas Agent。在Codex中操作画布在Codex中你可以用自然语言描述对画布的修改例如“在画布中央添加一个文本节点内容为‘Hello World’”或“将当前画布上所有图片节点的尺寸调整为512x512”。Codex会通过MCP将指令发送给Canvas Agent执行。预期结果与成功标准Canvas Agent服务能正常启动并与infinite-canvas前端通信。Codex插件能成功发现并连接到Agent。在Codex中发出的画布操作指令能实时反映在前端infinite-canvas的界面上。常见失败原因Canvas Agent未启动或端口被占用。MCP配置不正确Codex无法发现Agent。网络策略阻止了本地进程间的通信。7. 接口API与批量任务策略infinite-canvas本身主要提供Web界面但其设计思想与节点化工作流天然支持“批量”和“自动化”概念。7.1 作为API消费者infinite-canvas是一个强大的API消费者前端。你配置的每一个AI生成节点本质上都是在向你的后端API发送一个结构化的请求。你可以通过编排多个节点实现复杂的批量或条件生成逻辑。示例批量风格测试创建一个“风格提示词”文本节点内容为“cinematic lighting, masterpiece”。创建多个“主题提示词”文本节点内容分别为“a cat”, “a dog”, “a castle”。创建一个“文生图”节点。使用“组合”节点或直接连线将“风格提示词”和每一个“主题提示词”分别连接到“文生图”节点的提示词输入可能需要一个连接器节点来合并文本。复制多个“文生图”节点每个对应一个主题。然后依次执行或通过脚本触发。 这样就能批量生成同一风格下不同主题的图片。7.2 通过Canvas Agent提供API能力虽然infinite-canvas前端不直接提供REST API供外部调用但其Canvas Agent组件通过MCP协议暴露了画布的操作接口。这意味着任何支持MCP的AI助手或自动化工具都可以编程式地操作你的画布。这为实现自动化批量任务打开了大门。你可以编写一个脚本或使用AI助手来读取一个包含大量提示词的CSV文件。对于每一行通过MCP命令在画布上创建文本节点和图像生成节点并触发生成。等待生成完成后通过MCP命令将生成的图片节点内容保存到指定目录。这是一个高阶用法需要你熟悉MCP协议和一定的脚本编写能力。项目文档AGENTS.md和canvas-agent目录下的代码是主要的参考资料。8. 资源占用与性能观察由于infinite-canvas是纯前端应用其本身的资源占用非常低性能主要取决于以下几个方面浏览器资源内存复杂的画布数百个节点、大量高清图片会占用较多的浏览器内存。建议定期清理不必要的节点或使用画布的分组/图层功能管理大型项目。本地存储所有画布数据、图片缓存都保存在浏览器的IndexedDB或LocalStorage中。如果存储空间不足可能导致保存失败。可以在浏览器开发者工具的“Application”标签页中管理存储。网络性能API调用延迟生成图片的速度完全取决于你配置的后端AI API的响应速度。如果API服务器在国外或网络不佳会导致生成等待时间很长。图片加载画布上显示的图片尤其是原图如果来自远程URL或较大会影响画布滚动的流畅度。优化建议对于本地部署的AI服务确保infinite-canvas和API服务在同一台机器或局域网内以减少网络延迟。如果使用远程API考虑其稳定性和速率限制。对于包含大量图片的项目可以考虑启用画布的“缩略图”模式或定期将最终成果导出为项目文件备份后清理画布中的历史中间节点。9. 常见问题与排查方法在部署和使用过程中你可能会遇到以下问题。这里提供通用的排查思路。问题现象可能原因排查方式解决方案页面打开空白或错误1. 服务未成功启动。2. 端口冲突。3. 浏览器缓存问题。1. 检查终端运行日志是否有报错。2. 使用netstat -ano | findstr :3000(Win) 或lsof -i :3000(Mac/Linux) 查看3000端口占用。3. 打开浏览器开发者工具(Console)查看JS错误。1. 根据错误日志修复如依赖安装失败。2. 更换端口运行如docker run -p 3001:3000。3. 尝试无痕模式或清除浏览器缓存。AI生成失败提示API错误1. API配置错误URL或Key。2. 后端API服务未运行或不可达。3. 网络问题跨域、防火墙。4. 后端API不支持请求的格式或模型。1. 检查设置中的Base URL和API Key是否正确。2. 直接访问你的API地址如http://localhost:7860/docs或http://localhost:7860/v1/models看是否正常响应。3. 在浏览器开发者工具(Network)中查看请求详情和响应信息。1. 修正配置信息。2. 确保后端AI服务已启动。3. 如果是本地服务检查是否使用了localhost在Docker容器内可能需要改用宿主机的IP。4. 确认后端服务支持OpenAI Images API格式。画布操作卡顿1. 画布节点和元素过多。2. 浏览器硬件加速未开启或性能不足。3. 内存占用过高。1. 观察画布节点数量。2. 在浏览器设置中开启硬件加速。3. 打开浏览器任务管理器查看内存占用。1. 将不用的节点分组、折叠或删除。2. 尝试更换更现代的浏览器如Chrome, Edge。3. 关闭其他占用大量内存的网页或重启浏览器。提示词库无法加载1. 网络问题无法访问GitHub。2. Next.js路由服务异常。1. 检查网络连接。2. 查看浏览器控制台是否有关于提示词库请求的报错。1. 检查网络代理设置。2. 如果是本地部署可以尝试重启服务。提示词库非核心功能不影响基础使用。数据丢失1. 清除了浏览器本地数据。2. 更换了浏览器或设备。3. 项目版本升级导致数据格式不兼容。1. 回忆是否进行过浏览器数据清理操作。1.养成定期导出画布项目JSON文件的习惯这是最重要的备份手段。2. 注意项目处于开发阶段重要数据不要仅依赖本地存储。Canvas Agent连接失败1. Agent服务未运行。2. MCP配置错误。3. 防火墙/安全软件阻止。1. 检查Canvas Agent进程是否在运行。2. 查看Agent和Codex等客户端的日志输出。1. 按照AGENTS.md文档确保Agent正确启动。2. 检查MCP服务器地址和端口配置是否正确。3. 暂时关闭防火墙或安全软件测试。10. 最佳实践与使用建议为了更稳定、高效地使用infinite-canvas遵循以下实践会大有裨益从简单开始第一次使用时先配置好一个最简单的文生图流程并跑通。确保基础API连接正常再尝试复杂的节点连线、图生图、Agent等功能。建立配置模板对于常用的生成参数如固定尺寸、采样器、模型可以将其保存为节点模板或项目模板方便在新项目中快速复用。项目文件管理将每个独立的创作构思保存为单独的画布项目文件JSON。使用清晰的文件命名并建立专门的目录进行归档管理。素材与输出管理虽然画布内可以管理素材但对于最终成品和重要中间素材建议定期使用“导出图片”功能保存到本地文件系统并按项目分类存储。API服务选择追求质量与稳定考虑使用可靠的商业API或自己部署成熟的开源模型如SDXL。追求免费与实验可以寻找社区提供的免费OpenAI兼容中转API但需接受其不稳定性、排队和可能的内容限制。本地化与隐私在本地机器部署Stable Diffusion WebUI --api模式是最能保证隐私和可控性的方案。版本控制与备份由于项目处于活跃开发阶段如果你进行了本地化部署或修改建议fork原仓库进行维护。在升级版本前务必备份你的画布项目文件和任何自定义配置。合规使用始终对你使用AI生成的内容负责。确保你的提示词和使用的素材不侵犯他人知识产权生成的内容符合法律法规和公序良俗。开源AI创作无限画布infinite-canvas解决的核心痛点是AI创作流程的碎片化。它通过一个无限延伸的画布将灵感记录、素材整理、提示词工程、AI生成、结果编辑和方案迭代无缝衔接起来。对于经常使用AI进行视觉创作的开发者、设计师或爱好者来说它能显著减少上下文切换提升创作效率和灵感连续性。最值得尝试的点在于其极低的部署门槛和高度的可扩展性。你不需要强大的显卡就能运行它只需要一个能访问的AI API。同时通过节点化的工作流和MCP Agent支持它为自动化创作和集成到更复杂的工具链中提供了可能性。最容易踩的坑是忽略API配置和依赖浏览器本地存储。第一个问题会导致所有AI功能失效第二个问题则有数据丢失的风险。因此部署后的第一要务是正确配置API并在使用中养成定期导出项目备份的习惯。下一步你可以探索如何将它与更多的本地AI服务如本地部署的LLM对话模型、语音模型结合或者利用Canvas Agent开发属于自己的自动化创作脚本真正打造一个围绕在你个人工作流中心的智能创作中枢。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度