最近刷到 Lovart 新功能的时候，我是震惊的。它可以：

✅ 一键拆分图片图层

✅ 一键拆分文字元素

✅ 文字可直接编辑内容、字体、颜色、对齐方式

第一眼看上去我的反应是：

>"哇塞！太厉害了！怎么做到的！"

第二眼看上去我的反应是：

>"我也要拥有！"

哎哟，然后就让我看到拆分图层后的文字，其实和原始图片中的文字字体和颜色并不一致……

哈哈哈，再加上被同事写PPT的思路（让AI生图画色块，再在上面叠加文本框）点亮了灵感，我就想出了下面的方案。

当然，完全不保证Lovart就是这么做的，只能说效果上有些类似。

复现的代码已经上传到Github：[poster-text-editor](https://github.com/DSXiangLi/poster_text_editor)。感兴趣的同学可以自己clone下来试试

模型部分文字识别用的Gemini-3.1，图像编辑用的GPT-Image-2，都是用的老张NLP中转站（好处就是可以各取所长，三大巨头每家模型都各有所长）。

但是项目需要大家自己提供Key才能使用——哈哈毕竟我只充值了30块（老张广告费请结算一下）～

## 先来看看效果对比
### Lovart 效果
Step 1： 用GPT-Image-2生成一个有很多文字的图片
Step 2： 使用Lovart编辑元素，就会得到下面拥有图层拆分的文件
![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/2d81db5d1ac80fd7bda9e200c56a10ad.jpg)
Step 3： 文字部分支持内容、字体、颜色、对齐方式的调整
![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/c7643d72ecf432c83e38b7757c6f7ae6.jpg)


### 复现效果

有了思路做就很快了，和Claude Code一起整了1个多小时，就有了下面的效果。

一个简易的网站，提供：
- 图片上传
- 识别文字
- 抹除文字
- 文字编辑

![截图_选择区域_20260524150032](https://developer.qcloudimg.com/http-save/yehe-6190096/01d43c5111ed3afcf49354a64ee03fa4.png)


下面是效果
![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/99e870f438e82d44a9567d66d8af7c65.jpg)


## 实现思路拆解

>Lovart 很可能并不是在“真的拆图层”。它可能是在：
>✅ 识别文字
>✅ 把原文字抹掉
>✅ 在前端叠加新的文字层
>——一种“假图层编辑”。

### 1. Bounding Box识别（找到文字在哪）

这个任务的核心其实是大家很熟悉的目标检测任务。

关键看当前的多模态模型能否对文字位置进行精准识别。

需要注意的点：

这里需要剔除一些图片化文字。

本质上，所有无法直接用"字体 + 字号 + 颜色"直接还原的文字，是不应该出现在文字编辑任务中的。

模型选型：

测试了下，至少Gemini-3.0以上的模型进行Bounding Box目标检测输出，准确率还是很高的。

不排除指令的影响因素，但在我测试的范围内，GPT-5+的效果并不如Gemini-3。

下面是 Gemini-3.1-pro-preview、GPT-5.5、Claude-Opus-4-7 的效果对比：

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/97265c519128f35d8e4ac8ca1c3186fe.jpg)

![截图_选择区域_20260524165231](https://developer.qcloudimg.com/http-save/yehe-6190096/b7c75720d5351d0828b350de4d680292.jpg)


技术细节补充：Bounding Box坐标输出的两种格式

这里在页面上增加了"缩放按钮"，因为Bounding Box的坐标输出有两种形式：

|格式|	说明|	需要处理|
|---|----|----|
|相对位置	|标准化到0-1000的相对位置	|需要根据图片像素进行缩放|
|绝对位置	|直接输出和图片大小一致的绝对位置	|无需额外处理|

不同模型，甚至不同版本的模型处理方式都不完全一致，所以需要做好兼容。

### 2. 补充文字Meta属性（让文字有样子）

为文字补充字体+颜色+字号等相关信息。

**需要承认的是，多模态模型在这些任务中有一定的局限性，准确率并不算高。**
|属性|	模型推理准确率|	我的方案|
|---|----|----|
|颜色|	一般	|更好的方案是使用取色器|
|字体|	较低	|需要人工调整|
|字号|	很不准	|直接根据Bounding Box的尺寸和文字数量计算得到，不让模型推理|

相关论文推荐：
最近有篇论文对多模态模型在设计领域的很多相关任务都做了评测，可以先去看看，了解下当前多模态模型在设计领域的边界：**不过也不用太着急——毕竟每过几个月边界就会大幅向前推动。**

> Graphic-Design-Bench: A Comprehensive Benchmark for Evaluating AI on Graphic Design Tasks

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/fc32c831e1cf34f4fa840c1f3d4905dc.jpg)

### 3. 抹除原图文字（把底子擦干净）

使用 GPT-Image-2 对原始图片中对应文字进行抹除。

为了和前面LLM识别的文字框保持一致，这里需要传入Bounding Box识别到的文字信息。

如果想做得更加精细：可以把文字内容和位置信息都传入（避免图片中不同位置存在相同内容时的误抹除）。

### 4. 画布中叠加图片和文本框（合体！）
把抹除图片的文字，和bounding box识别出的文本框叠加在一起，看起来就有点像是Lovart文字元素识别的效果啦

### 当前Demo的局限性
这里只是一个初步的Demo，还有一些需要额外处理的细节：

- 超大图片处理：对于超过生图模型尺寸的图片，需要进行合理的chunking再处理
- 字体匹配优化：目前字体识别还是靠人工调整，后续可以接入字体相似度匹配模型
- 颜色精准提取：可以用取色器替代模型推理

## 其他思路：跳出"图像编辑"的思维定式

最近发现一个很有意思的点：

> 不仅模型有思维惯性，人也有思维惯性。

之前设计的工作模式，是"先出设计稿，然后通过PS进行修改"。

于是在针对"如何修改图片上文字"这个任务时，我们第一时间想到的也是 **"图片编辑"任务**。

但是，这一定是个图片编辑任务吗？

哈哈，当然不一定是。

之所以要做图片编辑，无外乎两点：
- **一致性**：只修改需要修改的地方，并保持其他位置不变
- **修改成本低**：无需对其他内容进行重新绘制或生成

所以针对以上两点，我们可以分别想另外两种歪着

### 思路1：结构化绘图指令（在文本阶段完成文本修改）

最近测试发现，GPT-Image-2对于结构化的绘图指令，有很好的实现效果。

举个之前看到很火的城市结构图的例子：

![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/4a1ab05702c2e7348ce45ed64698e06d.jpg)

绘图指令如下
```json
{
  "type": "complex urban systems atlas infographic",
  "style": "{argument name=\"color palette\" default=\"dark background with glowing blue, gold, and purple accents\"}, highly detailed technical illustration, 3D isometric cutaway",
  "header": {
    "title": "{argument name=\"chinese city name\" default=\"上海\"}城市系统剖面 {argument name=\"english city name\" default=\"SHANGHAI\"} URBAN SYSTEMS ATLAS",
    "subtitles": [
      "地表之上，是城市；地表之下，是秩序 {argument name=\"english subtitle\" default=\"Beneath the skyline lies the machine.\"}",
      "一座城市如何运转 How a Megacity Actually Works"
    ]
  },
  "layout": {
    "top_left": "Compass rose and city map labeled '上海市域位置 SHANGHAI LOCATION'",
    "top_right": "Data table titled '城市数据 CITY DATA' with 7 rows of statistics",
    "centerpiece": {
      "description": "{argument name=\"centerpiece style\" default=\"highly detailed 3D isometric cutaway render\"} of a megacity river landscape",
      "layers": [
        "地面层 SURFACE",
        "排水层 DRAINAGE LAYER",
        "电力层 POWER LAYER",
        "通信层 COMMUNICATION LAYER",
        "轨道交通层 METRO LAYER",
        "道路隧道层 ROAD TUNNEL LAYER",
        "管廊综合层 UTILITY CORRIDOR LAYER"
      ]
    },
    "side_panels": [
      { "id": "01", "title": "城市主骨架 URBAN SKELETON", "elements": "Map with 8 legend items" },
      { "id": "02", "title": "排水与地下水网 DRAINAGE + STORMWATER", "elements": "Cross-section diagram '典型排水剖面 DRAINAGE SECTION' with 5 legend items" },
      { "id": "03", "title": "电网与能源分配 POWER GRID + ENERGY", "elements": "Cross-section diagram '典型变电站剖面 SUBSTATION SECTION' with 6 legend items" },
      { "id": "04", "title": "通信与网络骨干 TELECOM + INTERNET", "elements": "Cross-section diagram '数据中心剖面 DATA CENTER SECTION' with 6 legend items" },
      { "id": "05", "title": "地铁与地下交通 METRO + SUBSURFACE MOBILITY", "elements": "Cross-section diagram '人民广场站剖面 PEOPLE'S SQUARE STATION' with 6 legend items" },
      { "id": "06", "title": "道路、高架与循环 ROADS + ELEVATED MOBILITY", "elements": "Cross-section diagram '南浦大桥剖面 NANPU BRIDGE SECTION' with 6 legend items" },
      { "id": "07", "title": "管廊与地下设施 UTILITY CORRIDORS + PLUMBING", "elements": "Cross-section diagram '综合管廊 UTILITY CORRIDOR' with 8 legend items" },
      { "id": "08", "title": "城市流量与系统协同 URBAN FLOWS + COORDINATION", "elements": "Map diagram '城市运行指挥中心 CITY OPERATIONS CENTER' with 6 legend items" }
    ],
    "bottom_panels": {
      "system_logic": {
        "title": "城市系统协同逻辑 SYSTEM COORDINATION LOGIC",
        "steps": 4,
        "labels": ["感知层 SENSING LAYER", "网络层 NETWORK LAYER", "平台层 PLATFORM LAYER", "应用层 APPLICATION LAYER"]
      },
      "city_brain": {
        "title": "城市大脑 CITY BRAIN",
        "central_node": 1,
        "peripheral_nodes": 8
      },
      "references": {
        "depth_scale": { "title": "深度与尺度 DEPTH & SCALE REFERENCE", "icons": 5 },
        "map_scale": { "title": "比例尺 SCALE", "markers": 4 }
      }
    }
  }
}

```


结构化指令的核心优势：
- **指令本身可以完美实现文字内容和绘图内容的隔离**
- **相对无损地呈现布局信息**
- **所有文字层面的修改，完全可以通过修改生图指令来实现**

所以，当不需要考虑保证每次生图完全一致，还在前期创意生图阶段时：可以直接修改绘图指令完成对文字的修改

文本任务请在文本阶段完成，何必进入图像任务呢？


### 思路2：一切编辑任务都是生成任务（Image-Mask）

针对已经进入最后**精修阶段**，不能接受图片有大范围变化的情况，那只能考虑使用**GPT-Image-2的图像编辑功能了。**

GPT-Image-2的图像编辑机制：

支持上传和图片大小相同的遮罩层（Mask），进行图像编辑。
![图片](https://developer.qcloudimg.com/http-save/yehe-6190096/d8333a141cfbd210aede830414a0c618.jpg)

**！需要注意： 实现本质上依旧是图像生成任务。**

所以OpenAI官方已经说明：**无法保证图像编辑前后，非遮罩的位置完全不变。**

不过我初步尝试，感觉**只修改局部文字，似乎对图片影响很小。**

当然肯定存在很多人眼无法观测的变化，但太夸张的改变我也还没试出来过。


## 写在最后
这一章就聊这么多了。

至于网传**Codex可以拆分PSD文件**——哈哈也已经有思路了。

还是那句话：

>当你摆脱"图像编辑"任务的桎梏，天高海阔～

当然，进一步提高Bounding Box准确率、字体准确率，在当前模型能力下，可以进一步使用Agent来实现效果优化：

比如后面接一个多模态模型对比字体差异，给出优化建议，然后进入iteration的优化环节, 用更多token、更多校验逻辑、更长的延时来换取更好的效果。关键还是看业务场景


哎哟，然后就让我看到拆分图层后的文字，其实和原始图片中的文字字体和颜色并不一致……

和AI一起搞事情#6. 如何实现Lovart元素编辑？

提供一种复现“Lovart元素编辑”功能的思路，代码已经上传到Github: poster-text-editor。提供处理图像的网页和编辑功能，感兴趣的朋友可以clone直接使用。

人工智能

Lovart新功能实现图片文字编辑:通过Gemini-3.1识别文字位置，GPT-Image-2抹除原文字，前端叠加可编辑文本框。复现方案已开源，无需真实拆分图层即可实现文字内容、字体、颜色的直接修改，为设计稿优化提供高效解决方案。

文字识别

图片处理

数据中心

AI生图

Agent

JSON

2026年中大促 | AI 领航 智绘未来

文字识别限时特惠，新用户0.5折起


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

和AI一起搞事情#6. 如何实现Lovart元素编辑？-腾讯云开发者社区-腾讯云

和AI一起搞事情#6. 如何实现Lovart元素编辑？

和AI一起搞事情#6. 如何实现Lovart元素编辑？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐