和AI一起搞事情#6. 如何实现AI生图文字可编辑？

这篇文章介绍了和AI一起搞事情#6. 如何实现AI生图文字可编辑？，分享给大家做个参考，收藏极客资料网收获更多编程知识

最近刷到 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、更多校验逻辑、更长的延时来换取更好的效果。关键还是看业务场景

文章来源:https://www.cnblogs.com/gogoSandy/p/20191216
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！