我开发过一款开源的数据可视化编辑器，在编辑完成后他会产生一个 json 格式的项目数据结构。这两年 AI 识图的效果快速发展。我就在想，如果我随手丢一个可视化面板的效果图，AI 就可以识别这个效果图中的元素，并且按照我项目的数据格式要求生成最终的 JSON 文件。这样一来岂不就完成了 AI 直接生成可视化面板的效果吗？
摸索了一两天之后有一条可实践的路径，大概流程为
- 让 AI 识别图片中的可视化元素。
- 根据识别的元素选择我编辑器中可以使用的组件
- 结合上面两点让 AI 输出一个简化版的数据结构，其中包括使用的组件类型、组件的尺寸、组件的位置等信息
- 然后再自己编写一套逻辑解析上面的简化版数据结构，确保生成的最终数据结构是编辑器可以识别的
上面的流程确实能够走通，但是生成的效果图实在惨不忍睹(如下图）。
最根本的原因在于不管提示词写得多么详细，AI 反馈过来的简化的数据结构始终都是非常潦草的。比如我从肉眼上看这个设计稿可能至少需要一百个可视化元素，但实际上它返回给我的结果可能就包含十几二十个元素。我以为是 AI 上下文大小限制的问题。但我切换过高级模型 200K 的上下文长度完全是足够的。但是 AI 输出结果依然没有提升多少。 想问问各位 V 友。这个想法是现阶段可以实现的吗？ AI 识图的能力有没有到可以支撑这个想法的地步？
 | 1 mqnu00 8 天前 > 让 AI 识别图片中的可视化元素 这一步应该不是 AI 实现的而是什么 识图 API 将图片转换成 AI 可读的 PROMPT ，可能是这一步给出的信息太少了？ |
 | 2 weixind 8 天前 “ json 格式的项目数据结构” 使用中间产物的思路不太对。 抛弃编辑器。 直接做 AI-native 的方案。 |
 | 3 gorvey 8 天前 我做过一个类似的,将设计图转为 html+css 静态页面,还原度还不错 具体思路是从设计平台比如蓝湖里面复制图层信息,然后给 AI 生成 我拿的是这些平台预处理后的图层信息,里面的样式已经生成了,然后过滤掉不需要的字段,最终结果比如: --- layerData 结构描述: - type: 图层类型 - name: 图层名称 - x, y: 坐标位置 - width, height: 尺寸 - css: 样式信息 - content: 图层内容 layerDatas: [ { "type": "text", "name": "默认标签", "x": 670, "y": 296, "width": 55, "height": 17, "css": [ "font-weight: normal;", "font-size: 12px;", "line-height: 20px;", "color: rgba(0, 0, 0, 0.6);" ], "content": "总分：150" }, { "type": "text", "name": "默认标签", "x": 742, "y": 296, "width": 103, "height": 17, "css": [ "font-weight: normal;", "font-size: 12px;", "line-height: 20px;", "color: rgba(0, 0, 0, 0.6);" ], "content": "答题时长：120 分钟" }, { "type": "shape", "name": "矩形 9835", "x": 733, "y": 299, "width": 1, "height": 12, "css": [ "width: 1px;", "height: 12px;", "background: #d6d7d8;" ], "content": "" } ] 再让 AI 根据图层信息,转换为页面代码,相当于直接从你这里第三步开始,因为是从设计稿源文件里面直接获取的图层信息，所以比较准确,如果你能想办法解决下第一步识图的问题,效果应该还不错的 |
 | 4 DAGU1182810784 OP @gorvey 嗯嗯，目前就是识图这部分有很大问题，第一步偏差大了后面的偏差就指数级增长了 |
| 5 DAGU1182810784 OP @weixind 那就是直接让 AI 写 html 、css 、js 了 |
| 6 DAGU1182810784 OP @mqnu00 因为是编辑器，所以每个元素都包含坐标、尺寸信息，如果先转成 pompot 再喂给 AI ，偏差会进一步拉大 |
Select Language