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 Tasks3. 抹除原图文字把底子擦干净使用 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 人民广场站剖面 PEOPLES 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 } } }