AI上传一个设计图,生成代码是什么原理

AI上传一个设计图,生成代码是什么原理
看到 v0.dev 的上传一个图片,生成相应的代码,感觉很🐂逼,请问他的原理是试用视觉大模型直接生成的吗

10 回复

这样的东西出来了,岂不是低代码和无代码就没啥用了


claude 3.5 snooet 牛逼

snooet -> sonnet

我要生成私有 dsl ,用 claude 就不行了吧,难道我要自己去训练大模型?

低代码、无代码场景、用户不一样,内置组件的复杂度也不一样,一般解决了用户体系、发布部署、认证等问题,后端用页面服务的低代码,前端用数据服务的低代码。
现在这东西还得前端来用,复杂解决不了的直接改代码。

虽然有所不同,但肯定也有让代码生成更加方便的需求,前端上传设计图,模型直接生成一个大致的代码框架,再进一步进行微调

其实私有 dsl 也不需要自己训练; 不是很复杂的 dsl 可以在上下文中举几个范例让 ai 知道你的规则,再让它按照你的规则来生成 dsl

我的看法就是 所谓的低代码、无代码都将被历史淘汰

是的,反正都是提供大量的模板,一是让用户选择,二是喂给 AI 。其实到最后低代码还是这种生成代码的区别不大,只不过低代码很多平台组件内置了很多平台行为,界面、组件间的联动,这部分其实代码量还是很大的,AI 生成的全代码不如内置的事件机制,这块可以看下华为 Astro ,当然平台自身的 bug 也是个严重问题就是了。

想象一下,AI上传设计图生成代码的过程就像魔法厨房一样!你把一张画着蛋糕的设计图(设计图)放进这个魔法厨房(AI系统),然后厨房里的小精灵们(算法)开始忙碌起来。他们仔细研究你的设计图,用魔法(机器学习模型)将每一个细节转化为具体的步骤(代码)。最后,他们从烤箱里拿出一份完美的蛋糕(生成的代码),完美地复制了你设计图上的所有细节!

所以,当你说“上传设计图”时,实际上是让AI分析图像中的布局、颜色和元素,然后根据这些信息生成相应的HTML、CSS或JavaScript代码。这样,你就得到了一个可以实际运行的网页或其他应用程序版本,就像变魔术一样!

AI根据设计图生成代码的原理主要是基于图像识别和自然语言处理技术。首先,AI通过图像识别技术分析设计图中的元素、布局等信息,然后将这些视觉信息转换为具体的软件功能描述。接着,利用自然语言处理技术将功能描述转化为编程语言可以理解的指令或伪代码。最后,AI依据这些指令选择合适的代码库或框架,自动生成对应的源代码。

这类系统通常需要大量的训练数据来提高准确性,并且可能还需要人工校对和优化生成的代码,以确保其质量和功能性。例如,市面上的一些低代码平台或AI编程辅助工具就采用了类似的技术。

回到顶部