面向未来的 AI 研发和前端领域大模型

第 19 届 D2 终端技术大会将于 3 月 8 日在杭州举办。

现在,前端写代码越来越高级了。 只需要上传一张图片,就轻松写出前端界面的源代码。原本3小时的活,现在1小时搞定。

在喝杯咖啡的时间里,让代码自动生成,想想就有点小激动!

所以,我配拥有一个吗?(bushi

来看看蚂蚁内部怎么干(mo)活(yu)的?

一张图就能搞定中后台页面,简直是前端开发者的"懒人神器"!

首先,把图片切成几块,挑选出你想要生成代码的部分,然后狠狠地点击"生成代码"按钮!

接下来,选择你喜欢的技术栈和框架。

然后,坚定地点击"OK",让代码生成的魔法开始发挥作用!

最后,放松等待几分钟,小茶时间结束后,你就能看到闪闪发光的代码和炫酷的效果预览啦!

这个代码有没有生成到你的"心趴"上呢?

不止中后台,移动端也能一键生成,简直是"码农的魔法棒"!🪄挥一挥,页面搞定了!

不满意怎么办?还能支持二次调整,让你秒变前端大神!

如果页面很大怎么办?让俺复刻一个 B 站的首页,从自动切图分区到代码生成,只需要几分钟的时间,原本需要花个把小时开发。

她叫 WeaveFox

这个工具叫什么呢?没错,就是 WeaveFox。

WeaveFox 是由蚂蚁前端团队自研的 AI 工具。是面向 AI 时代的前端智能研发平台,基于蚂蚁百灵多模态大模型打造,能够根据设计图直接生成前端源代码,为前端研发带来高质、高效、高产的研发体验。平台目前已支持控制台、移动端 H5、小程序、以及局部卡片等多种主流应用类型。

从图到码:技术揭底

WeaveFox 基于蚂蚁自研的百灵多模态模型构建,是具备细粒度 UI 理解能力的前端领域大模型,为前端开发提供了更精准的代码生成和优化能力。


D2 分享

回顾过去的 2024 年,AI 技术持续多维突破。从技术演进维度看,基于 transformer 架构的大模型持续改进训练效率,多模态学习、具身智能等前沿方向取得了一定突破进展;在应用落地维度,行业解决方案正在显现出垂直领域特征,医疗和制造等场景的专用模型开发加速推进;技术标准体系方面,目前看还尚未形成统一的产业共识实施标准。基础理论框架和应用范式来看,AI 技术体系到目前仍没有收敛,在我们所处的前端技术领域,似乎正在经历"需求爆发与技术重构"的双重变革,同时也让我们看到了很多新机会。

技术团队日常面临着大量的网页开发需求,如小程序、H5、移动端卡片、中后台页面、营销页面等。而界面类开发存在诸多痛点,编码和调试耗时漫长,手工切图繁琐且易出错,设备兼容性与业务多样性带来高昂成本,并且依赖开发者丰富经验,往往需要多种角色协作。

为解决这些问题,我们基于蚂蚁自研的多模态技术和大模型基础设施打造了前端领域大模型,实现输入任意设计图,直接生成可用源代码,从而提升开发效率。将前端领域大量高质量数据进行无损压缩颇具挑战,我们为此构建了千万级别高质量训练样本,搭建高效训练架构以支撑敏捷迭代模型版本,自建了评测体系,支持多维白盒指标评测和纯图理解泛化评测,以此判别模型性能基线是否得到优化。同时,为了让下游生态更易兼容和集成,我们建立了完备描述语义 UI 的 IR-Spec 底层标准,这一标准具备广泛的意义,不仅支持技术栈扩展,能够支持市面上流行的框架和类库,如 React、Vue、小程序、Ant-design、ElementUI 等。生成的生产级 CleanCode 可与人工实现相媲美,涵盖 icon 自动识别、高阶组件封装、循环结构识别生成、自动适应布局、语义化代码变量、图片资源自动切图以及复用和封装处理等功能。

2025 年,是前端领域智能产业升级的重要一年,这次 D2 大会上,蚂蚁集团平台智能体验技术负责人达峰会带来面向未来的 AI 研发升级和前端领域大模型相关的介绍以及后续的技术开放计划分享,共同探讨前端的新机遇,共享技术变革的红利。

欢迎大家参与,3 月 8 日,期待我们在杭州相见!

大会网站:d2.alibabatech.com/

相关推荐
Senar7 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴24 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言29 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴39 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml