一、项目介绍

这是一套以 AI 智能体开发 + 图像编辑器架构设计 为核心的项目教程，基于 Python FastAPI + LangChain + LangGraph + React + Konva 开发一个 AI 修图智能体，带大家掌握 AI Agent 规划执行、图像处理管线、画布编辑器搭建等前沿技术，用自然语言驱动一整套修图工作流。

⭐️ 项目代码 100% 开源：https://github.com/yuyuanweb/ai-picture-editor

用户输入一句话，比如“去掉背景，把主体放大一点，调亮一些”，AI Agent 会自动拆解成多个修图步骤，用户确认后逐步执行。从文生图、抠图、调色、局部消除到图层拆分，21 个编辑工具全部由 Agent 调度完成。

为什么做这个项目？

1）赛道火热：AI 修图和 AI 生图是目前最热门的 AI 应用方向之一，各大厂和创业公司都在布局。掌握 AI 图像处理和智能体开发，求职时非常有竞争力。

2）技术含量高：这个项目涉及的技术面很广，从后端的 LangChain 模型接入、LangGraph 智能体、异步任务队列、对象存储，到前端的 Canvas 画布引擎、图层系统、选区交互，再到 AI 模型的文生图、语义分割、图像编辑，远不是增删改查能比的。

3）全栈实战：一个项目同时练 Python 后端和 React 前端，后端重点在 Agent 架构和图像处理管线，前端重点在画布引擎和复杂交互，两端都有大量值得写进简历的技术点。

二、项目功能演示

1、AI 文生图

在创作页输入一段提示词描述，AI 会生成四张候选图，挑一张满意的就能进入编辑器开始修图。

2、编辑器画布

进入编辑器后，画布支持缩放、平移、图层渲染。右侧图片墙展示所有历史版本和候选图，点击任意一张就能切换当前画布内容，还支持前后对比滑杆，直观查看修改效果。

3、AI Agent 对话修图

在编辑器底部的对话框里用自然语言描述修图需求，Agent 自动规划工具调用方案。单步操作直接执行，多步计划会弹出确认卡片，用户可以确认执行、取消后续或单步重试。

4、抠图和调色

一键去除背景，基于 rembg 本地模型推理，纯 CPU 运行。调色支持亮度、对比度、饱和度、色温等 11 个参数的精细调节。

5、画布变换和图层控制

裁剪、翻转、缩放、旋转、移动这些画布变换操作只改文档数据不碰像素，毫秒级响应。图层控制支持透明度调节、显隐切换和层序调整。

6、AI 生成式编辑

换背景、扩图、超分辨率这些操作需要调用远程 AI 模型，十几秒后生成结果出现在图片墙上，用户选中后替换当前画布内容。

7、区域选择和局部编辑

SAM 点选一下就能精确圈出画面中的物体轮廓，笔刷涂抹可以自由绘制不规则区域。圈好之后可以局部消除（AI 自动填补）或局部替换（用提示词描述替换内容）。

8、图层拆分

一键将图片拆分为主体层和背景层，可选 OCR 文字层。还可以点选画面中的任意物体，按需提升为独立图层。每个图层可以单独缩放、调色、移动，互不影响。

9、多步计划和人机协作

用户说一句“去掉背景，把主体水平翻转，再调亮一些”，Agent 自动生成结构化的多步计划。服务端会校验工具是否存在、参数是否合法、依赖关系是否有环，校验通过后展示给用户确认，确认后按拓扑排序逐步执行。

10、撤销重做和版本管理

每次编辑都产生一个新版本，形成版本链。支持撤销回退到任意历史版本，也支持重做前进，编辑历史不会丢失。

三、项目优势

项目收获

本项目紧跟 AI 时代，选题新颖，涵盖 AI 智能体开发、图像处理和画布编辑器三大技术方向。区别于增删改查的烂大街项目，鱼皮会带你实战大量新技术和企业应用场景，帮你成为 AI 时代企业的香饽饽，给你的简历和求职大幅增加竞争力！

从这个项目中你可以学到：

如何用 LangChain 接入规划模型，再用 LangGraph 编排状态图，实现自然语言驱动的修图工作流？
如何设计 ToolRegistry 工具注册表，一处定义同时服务 Agent、服务端校验和前端展示？
如何用 Provider 抽象层隔离模型实现，零成本 Mock 和真实模型自由切换？
如何用 ARQ 异步队列处理耗时的 AI 生图任务，配合 SSE 实时推送进度？
如何搭建 react-konva 画布引擎，实现图层渲染、视口缩放平移？
如何设计 revisionId 版本链，用最少的代码实现撤销重做？
如何用 SAM 模型做点选分割，一次编码多次解码达到毫秒级交互？
如何设计选区的 Redis 临时存储，高频交互不落数据库？
如何实现语义拆层，将一张图自动分离为主体、背景和文字层？
如何用 Kahn 算法做依赖拓扑排序，让多步计划按正确顺序执行？
如何实现 HITL（Human-in-the-Loop）人机协作，多步计划必须确认才能执行？
如何用 Docker 多阶段构建和 compose profile 完成一键部署？

此外，还能学会很多 AI 编程、系统架构设计、技术方案对比的方法，提升排查问题、自主解决 Bug 的能力。鱼皮还给大家提供了大量的项目扩展点，有能力的同学可以进一步拉开和别人的区分度，无限进步！

这个项目特别适合谁？

想学 AI 智能体开发，但不知道从哪个项目入手
想系统实战 LangChain、LangGraph、图像处理、Canvas 画布引擎等热门技术
想做一个技术含量高、面试能聊出深度的全栈项目
想学 Python 后端，快速补齐 FastAPI + 异步任务 + 对象存储这套技能
想找一个从开发到部署全流程完整、能直接当毕设的 AI 项目

鱼皮系列项目优势

鱼皮原创项目系列以 实战视频教程 为主，从 0 到 1 带做，涵盖企业级 Java / Python 后端 + 前端全栈项目、最新 AI 应用开发 + AI 编程项目、大厂架构进阶项目。已有近 30 套 保姆级项目教程，并提供现成的源码、简历写法和面试题解，帮你用最快的速度学会做项目、写满简历、拿到 Offer。

此外，加入后还可享受以下服务：

教程资料	求职助力
详细的文字教程 / 直播笔记	⭐️ 现成的简历写法，直接写满简历
完整的项目源码	⭐️ 项目相关面试题解和真实面经
1 对 1 答疑解惑 + 专属交流群	⭐️ 项目扩展思路，拉开区分度
前端 + Java 后端万用项目模板	⭐️ 从学项目到拿 Offer 一条龙

比起看网上的教程自学，鱼皮项目系列的优势：学知识 → 做项目 → 答疑解惑 → 简历写法 → 面试题解，一条龙服务！

编程导航已有 近 30 套项目教程！ 每个项目的学习重点不同，从 0 到 1 带做，有大量完整的 AI 应用开发 + AI 编程 + 全栈项目，零基础也能学！

详细请见：https://codefather.cn/course（在该页面右侧有教程推荐和学习建议）

四、核心业务流程

整个项目的核心业务流程可以分为三条主线：文生图创作、编辑器修图和 Agent 对话修图。

文生图创作流程

用户在创作页输入提示词，提交后后端创建一个异步生图任务，通过 ARQ 队列分发给 Worker 执行。Worker 调用百炼文生图 API 拿到结果后，第一时间把图片从临时链接下载下来转存到 MinIO 对象存储，然后通过 Redis Pub/Sub 发布事件，前端通过 SSE 长连接接收到生成完成的通知，展示四宫格候选图。用户挑选一张后，创建编辑会话进入编辑器。

编辑器修图流程

进入编辑器后，用户可以通过工具栏按钮或 Agent 对话两种方式触发修图操作。同步工具（裁剪、翻转、调色等）直接修改画布文档并生成新版本，毫秒级返回。异步工具（换背景、扩图、超分等）走 ARQ 队列，生成结果出现在图片墙中，用户选中后采用到当前画布。每次编辑都产生新的 revision，形成版本链，支持随时撤销重做。

Agent 对话修图流程

用户在对话框输入自然语言修图需求，后端 LangGraph 状态图进入 plan 节点，LLM 输出 tool_calls 列表。然后进入 verify 节点，服务端对每一步做工具存在性检查、参数合法性校验、依赖补全和环检测。校验通过后，单步操作直接执行，多步计划推送给前端展示确认卡片。用户确认后，按依赖拓扑排序逐步执行，就绪的步骤自动启动，异步工具由 Worker 接力完成。

五、项目功能梳理

文生图模块

提示词驱动的 AI 图片生成
四宫格候选图展示和选择
异步任务队列处理生图请求
SSE 实时进度推送
图片转存对象存储，获取永久访问链接

编辑器画布模块

react-konva 画布渲染和图层叠加
视口缩放平移（滚轮缩放、拖拽平移）
撤销重做（基于 revisionId 版本链）
图片墙展示历史版本和候选图
前后对比滑杆
Zustand 管理画布视口状态

AI Agent 对话模块

自然语言输入修图需求
LangChain 接入规划模型（ChatOpenAI、bind_tools）
LangGraph 状态图规划工具调用
ToolRegistry 统一工具注册和参数校验
单步直接执行，多步确认后执行
计划卡片展示执行状态
消息列表和对话历史

编辑工具模块（21 个工具）

抠图：rembg 本地模型，纯 CPU 推理
调色：亮度、对比度、饱和度、色温等 11 参数调节
画布变换：裁剪、翻转、缩放、旋转、移动
图层控制：透明度、显隐切换、层序调整
生成式编辑：换背景、扩图、超分辨率
候选采用：生成结果流转回编辑会话

区域选择模块

SAM 点选分割（一次编码多次解码）
笔刷涂抹自由绘制选区
选区绑定 revisionId，版本切换时自动恢复
选区 Redis 临时存储

局部编辑模块

局部消除：inpainting 移除选区内容，AI 自动填补
局部替换：提示词描述替换选区内容

图层拆分模块

自动拆分为主体层和背景层
可选 OCR 文字层
点选任意物体按需提升为独立图层，背景自动修复
幂等校验，避免重复拆层
LayerDocument JSONB 持久化

多步计划模块

LLM 输出结构化 JSON 计划（最多 8 步）
服务端校验：工具存在性、参数合法性、依赖补全、环检测
Kahn 算法拓扑排序，就绪步骤自动执行
HITL 人机协作：确认执行、取消后续、单步重试
JSONB 存储计划，刷新页面后恢复执行进度

用户和认证模块

账号密码注册登录
bcrypt 密码哈希存储
JWT httpOnly Cookie 认证
全局路由守卫

部署模块

Docker 多阶段构建
docker-compose profile 编排
CV 模型卷挂载，避免重复下载
Mock 和真实模型环境变量切换

六、技术选型

后端

核心框架：

Python 3.13
FastAPI Web 框架
SQLAlchemy 2 ORM + Alembic 数据库迁移
Pydantic v2 数据校验

AI 和图像处理：

⭐️ LangChain 模型接入（ChatOpenAI、bind_tools、工具签名转换）
⭐️ LangGraph 智能体状态图
⭐️ 百炼（DashScope）文生图、图像编辑、超分辨率
⭐️ qwen-plus 大模型做 Agent 规划
⭐️ SAM（Segment Anything Model）点选分割
⭐️ rembg 本地抠图模型
Pillow 图像处理
OpenCV 图像操作

异步和存储：

⭐️ ARQ 异步任务队列（基于 Redis）
⭐️ MinIO 对象存储（S3 协议兼容）
PostgreSQL 关系型数据库
Redis 缓存、Pub/Sub、选区临时存储

前端

核心框架：

React 19 + TypeScript
Vite 构建工具
Tailwind CSS v4 样式体系

画布和状态管理：

⭐️ react-konva 画布引擎（图层渲染、视口变换）
⭐️ Zustand 画布视口状态管理
⭐️ TanStack Query 服务端数据管理
SSE 实时事件接收

部署

Docker 多阶段构建
docker-compose profile 编排
Nginx 反向代理

开发工具

⭐️ Cursor 编辑器 AI 编程
uv 包管理器（Python）
pytest 测试框架

七、架构设计

项目采用前后端分离架构，前端是 React 单页应用，后端是 FastAPI 服务，通过 RESTful API 和 SSE 通信。

后端内部分为路由层、业务服务层和数据访问层。路由层负责接收请求和返回响应，业务服务层处理核心逻辑，数据访问层通过 SQLAlchemy ORM 操作数据库。Agent 模块独立于业务服务：LangChain 负责接规划模型和绑定工具签名，LangGraph 状态图负责把自然语言编排成工具调用计划。

耗时的 AI 生图、换背景、扩图等操作通过 ARQ 异步任务队列分发给独立的 Worker 进程处理，处理完成后通过 Redis Pub/Sub 发布事件，API 进程通过 SSE 长连接推送给前端。

图片统一存储在 MinIO 对象存储中，数据库只记录存储路径。选区数据存 Redis，高频交互不落数据库。画布文档和多步计划用 JSONB 格式持久化在 PostgreSQL 中。

八、准备工作

AI 学习资源

1、AI 面试题

建议大家在学习项目的过程中，持续阅读 AI 大模型相关的面试题，巩固知识点。这块鱼皮已经帮大家拿捏了，我们的程序员面试刷题神器面试鸭搞了个 AI 大模型面试题库，建议没事就阅读一些题目来学习学习。

2、开源 AI 知识库

由于 AI 技术日新月异，建议大家平时多关注 AI 相关的资讯动态，比如鱼皮开源的 AI 知识库，汇总了热门的 AI 大模型和工具，比如 Deepseek 使用指南、提示词技巧分享、知识干货、应用场景、AI 变现、行业资讯、教程资源等一系列内容，帮助你快速掌握 AI 技术，走在时代前沿。

3、鱼皮 AI 导航网站

鱼皮 AI 导航网站为大家提供了免费 AI 教程、AI 资源大全、最新 AI 资讯、AI 学习交流社区，大家可以畅所欲言，共同拥抱 AI。

九、学习大纲

为了帮大家循序渐进地学习，我们将项目设计为三个阶段，可以根据自己的时间和水平按需学习。

第一阶段：基础设施搭建

第 1 期：项目总览

项目介绍和功能演示
项目优势和收获
核心业务流程
功能模块梳理
技术选型和架构设计
准备工作和学习大纲

第 2 期：项目搭建和用户认证

monorepo 目录结构和 Docker Compose 中间件编排
FastAPI 后端入口、健康检查和 Alembic 数据库迁移
Vite 反向代理实现前后端同源，免除跨域烦恼
Tailwind CSS v4 的 design token 体系
bcrypt 密码哈希和 JWT httpOnly Cookie 认证方案
落地页、登录注册页和全局路由守卫

第 3 期：对象存储和 AI 文生图

对象存储的作用和 MinIO 封装
上传校验、签名 URL 和 Asset 数据模型
Provider 抽象层设计，零成本 Mock 和真实模型自由切换
ARQ 异步队列，让生图任务不阻塞接口响应
Redis Pub/Sub 配合 SSE 实现实时进度推送
创作页和四宫格候选选图页

第二阶段：编辑器和 Agent

第 4 期：编辑器画布和会话管理

EditSession 会话模型和 LayerDocument 画布文档
react-konva 画布搭建，图层渲染和视口缩放平移
Zustand 管理画布视口状态，和 TanStack Query 分工协作
基于 EditHistory 的版本链，撤销重做的完整实现
会话图片墙，候选图切换和过渡动画
前后对比滑杆的裁剪式渲染

第 5 期：Agent 对话框架

ToolRegistry 工具注册表，一处定义同时服务 Agent、服务端校验和前端展示
LangChain 接入规划模型：ChatOpenAI、bind_tools、工具签名转换
LangGraph 状态图的最小实现：plan → verify → END
计划校验：参数合法性、依赖补全、环检测
单步直接执行和多步确认机制
前端对话组件：消息列表、计划卡片、输入框

第 6 期：编辑工具

抠图：rembg 本地模型推理，纯 CPU 运行
调色：11 个参数的 Pillow 色彩处理管线
画布变换：裁剪、翻转、缩放、旋转、移动，只改文档不碰像素
图层控制：透明度、显隐切换、层序调整
换背景、扩图、超分：Provider 生成式 API 加 ARQ 异步执行
候选采用机制：结果如何流转回编辑会话
前端工具栏和编辑面板的交互设计

第三阶段：高级能力和部署

第 7 期：区域选择和局部编辑

SAM 点选分割，一次编码多次解码的性能优化
笔刷遮罩，自由涂抹生成选区
选区存 Redis 而不是数据库，绑定 revisionId 保证数据一致性
前端两种选择模式的交互实现和选区撤销重做
局部消除和局部替换两个编辑工具的实现
选区和 Agent 对话的自动衔接

第 8 期：图层拆分和图层操作

语义拆层的设计取舍，为什么不做全自动全图拆层
拆层工具：自动分离主体和背景，可选 OCR 文字层
点选成层：按需提升任意物体为独立图层，背景自动修复
幂等校验：重复拆层和重复成层的防护
LayerDocument 的 JSONB 持久化，切图再切回来图层不丢失
前端图层面板：显隐切换、透明度调节、缩放旋转、层序调整
图层在画布上的拖拽移动和拖角缩放交互

第 9 期：多步计划和人机协作

计划装配：自动编号、依赖补全、Kahn 算法环检测
就绪判断和推进引擎，同步工具当场完成，异步工具由 Worker 接力
HITL 人工确认机制，单步直接执行，多步先确认再跑
取消未执行的步骤，重试失败的步骤
JSONB 存储计划，刷新页面后接着跑
前端计划卡片和自适应轮询

第 10 期：部署上线

环境准备和从零跑通项目的完整步骤
Dockerfile 多阶段构建和 docker-compose profile 编排
CV 模型卷挂载和环境变量配置
Mock 切换真实模型的冒烟测试
后端测试体系：pytest 覆盖认证、会话、工具、Agent、评测

扩展篇：项目扩展思路

智能改尺寸、营销图模板、批量处理、ZIP 导出
Agent 规划过程逐 token 流式输出，降低等待感
LangGraph checkpoint 持久化，刷新页面后恢复 Agent 执行进度
接入更多模型平台，验证 Provider 抽象层扩展性
多用户并发控制：信号量限制同时生成请求数量
安全加固：限流、敏感词过滤、上传内容审核
商业化方向：会员付费、API 开放、企业定制

编程导航教程