本章我们尝试复现“图像文字元素编辑”功能，代码已经上传到Github。AI 生图配合文字元素编辑，确实能解决很多场景上AI生图无法直接落得的业务问题，感兴趣的朋友可以clone直接使用。
最近刷到 Lxxxxt 新功能的时候，我是震惊的。它可以：
✅ 一键拆分图片图层
✅ 一键拆分文字元素
✅ 文字可直接编辑内容、字体、颜色、对齐方式
第一眼看上去我的反应是：
"哇塞！太厉害了！怎么做到的！"
第二眼看上去我的反应是：
"作为一个零付费用户，好用的功能我都要自己拥有！"
哎哟，然后就让我看到拆分图层后的文字，其实和原始图片中的文字字体和颜色并不一致……
哈哈哈，再加上被同事写PPT的思路（让AI生图画色块，再在上面叠加文本框）点亮了灵感，我就想出了下面的方案。
当然，完全不保证Lxxxxt就是这么做的，只能说效果上有些类似。
复现的代码已经上传到Github：poster-text-editor。
模型部分文字识别和图像编辑使用的模型只能大家去代码里看了，审核不让说，都是用的老张NLP中转站（好处就是可以各取所长，三大巨头每家模型都各有所长）。
但是项目需要大家自己提供Key才能使用——哈哈毕竟我只充值了30块（老张广告费请结算一下）～
先来看看效果对比
Lxxxxt 效果
Step 1： 用Gxxxxx2生成一个有很多文字的图片
Step 2： 使用Lxxxxxt编辑元素，就会得到下面拥有图层拆分的文件
Step 3： 文字部分支持内容、字体、颜色、对齐方式的调整
复现效果
有了思路做就很快了，和CC一起整了1个多小时，就有了下面的效果。
一个简易的网站，提供：
- 图片上传
- 识别文字
- 抹除文字
- 文字编辑
下面是效果
实现思路拆解
Lxxxxxt 很可能并不是在“真的拆图层”。它可能是在：
✅ 识别文字
✅ 把原文字抹掉
✅ 在前端叠加新的文字层
——一种“假图层编辑”。
1. Bounding Box识别（找到文字在哪）
这个任务的核心其实是大家很熟悉的目标检测任务。
关键看当前的多模态模型能否对文字位置进行精准识别。
需要注意的点：
这里需要剔除一些图片化文字。
本质上，所有无法直接用"字体 + 字号 + 颜色"直接还原的文字，是不应该出现在文字编辑任务中的。
模型选型：
测试了下，至少Gxxxxx3.0以上的模型进行Bounding Box目标检测输出，准确率还是很高的。
不排除指令的影响因素，但在我测试的范围内，Gxxxx5+的效果并不如Gxxxx3。
下面是多模型的效果对比：
技术细节补充：Bounding Box坐标输出的两种格式
这里在页面上增加了"缩放按钮"，因为Bounding Box的坐标输出有两种形式：
| 格式 | 说明 | 需要处理 |
|---|---|---|
| 相对位置 | 标准化到0-1000的相对位置 | 需要根据图片像素进行缩放 |
| 绝对位置 | 直接输出和图片大小一致的绝对位置 | 无需额外处理 |
不同模型，甚至不同版本的模型处理方式都不完全一致，所以需要做好兼容。
2. 补充文字Meta属性（让文字有样子）
为文字补充字体+颜色+字号等相关信息。
需要承认的是，多模态模型在这些任务中有一定的局限性，准确率并不算高。
| 属性 | 模型推理准确率 | 我的方案 |
|---|---|---|
| 颜色 | 一般 | 更好的方案是使用取色器 |
| 字体 | 较低 | 需要人工调整 |
| 字号 | 很不准 | 直接根据Bounding Box的尺寸和文字数量计算得到，不让模型推理 |
相关论文推荐：
最近有篇论文对多模态模型在设计领域的很多相关任务都做了评测，可以先去看看，了解下当前多模态模型在设计领域的边界：不过也不用太着急——毕竟每过几个月边界就会大幅向前推动。
Graphic-Design-Bench: A Comprehensive Benchmark for Evaluating AI on Graphic Design Tasks
3. 抹除原图文字（把底子擦干净）
使用 Gxxxxxxx2 对原始图片中对应文字进行抹除。
为了和前面LLM识别的文字框保持一致，这里需要传入Bounding Box识别到的文字信息。
如果想做得更加精细：可以把文字内容和位置信息都传入（避免图片中不同位置存在相同内容时的误抹除）。
4. 画布中叠加图片和文本框（合体！）
把抹除图片的文字，和bounding box识别出的文本框叠加在一起，看起来就有点像是Lxxxxxt文字元素识别的效果啦
当前Demo的局限性
这里只是一个初步的Demo，还有一些需要额外处理的细节：
- 超大图片处理：对于超过生图模型尺寸的图片，需要进行合理的chunking再处理
- 字体匹配优化：目前字体识别还是靠人工调整，后续可以接入字体相似度匹配模型
- 颜色精准提取：可以用取色器替代模型推理
其他思路：跳出"图像编辑"的思维定式
最近发现一个很有意思的点：
不仅模型有思维惯性，人也有思维惯性。
之前设计的工作模式，是"先出设计稿，然后通过PS进行修改"。
于是在针对"如何修改图片上文字"这个任务时，我们第一时间想到的也是 "图片编辑"任务。
但是，这一定是个图片编辑任务吗？
哈哈，当然不一定是。
之所以要做图片编辑，无外乎两点：
- 一致性：只修改需要修改的地方，并保持其他位置不变
- 修改成本低：无需对其他内容进行重新绘制或生成
所以针对以上两点，我们可以分别想另外两种歪着
思路1：结构化绘图指令（在文本阶段完成文本修改）
最近测试发现，Gxxxxxx2对于结构化的绘图指令，有很好的实现效果。
举个之前看到很火的城市结构图的例子：
绘图指令如下
{
"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）
针对已经进入最后精修阶段，不能接受图片有大范围变化的情况，那只能考虑使用图像编辑功能了。
Gxxxxxx2的图像编辑机制：
支持上传和图片大小相同的遮罩层（Mask），进行图像编辑。
需要注意：
实现本质上依旧是图像生成任务。
所以官方已经说明：无法保证图像编辑前后，非遮罩的位置完全不变。
不过我初步尝试，感觉只修改局部文字，似乎对图片影响很小。
当然肯定存在很多人眼无法观测的变化，但太夸张的改变我也还没试出来过。
写在最后
这一章就聊这么多了。
至于网传Cxxxx可以拆分PSD文件——哈哈我也已经有思路了。
还是那句话：
当你摆脱"图像编辑"任务的桎梏，天高海阔～
当然，进一步提高Bounding Box准确率、字体准确率，在当前模型能力下，可以进一步使用Agent来实现效果优化：
比如后面接一个多模态模型对比字体差异，给出优化建议，然后进入iteration的优化环节, 用更多token、更多校验逻辑、更长的延时来换取更好的效果。关键还是看业务场景