生成式UI 动态化SDK的研发--开篇

这里写目录标题

1. 背景

随着AI大模型技术的兴起，UI界面的开发和交互必定会发生巨大的改变。在大模型技术出现之前，软件的界面是通过UI设计师和交互设计师先定义好软件的UI界面，由交互设计师去定义好交互。最后给到程序员开发成程序给到用户使用。但是最近的情况可能大家也感觉到了，AI大模型的出现，取代了很多设计师的工作。通过AI大模型，可以生成很多精美的界面，然后给到程序员开发实现。那既然AI大模型能取代设计师的工作，有没有可能取代程序员的工作呢，答案是可能的。这就是生成式UI，生成式UI可以自动生成界面元素，如按钮、文本框、菜单等，节省设计师的时间和精力‌，而且根据用户的偏好和使用习惯提供个性化的界面设计方案，降低了设计成本。

在目前生成式UI在业界有很多方案，比较常见的有：使用大模型生成react-native代码，或者生成HTML+CSS代码等。本系列文章提供了另外一套方案，即提供一套DSL，训练大模型能生成我们定义的DSL，然后下发到端侧容器渲染。本系列文章主要就是做端侧容器SDK的实现，因为我不会大模型的相关技术，所以想把我设计的DSL和端侧容器的代码分享出来，供大家一起交流完善，直到最后有足够多的DSL模板数据能够给到大模型训练，最终能根据用户的query生成精美的界面.

2.名词解释

2.1 DSL

DSL（Domain Specific Language）即特定领域语言，是一种为特定任务设计的计算机语言。它专注于某个特定问题领域，通常比通用编程语言更为简洁和高效。

2.2 AI大模型

AI大模型‌是指拥有超大规模参数（通常在十亿个以上）和复杂计算结构的机器学习模型。这些模型通过海量数据的训练，能够捕捉到更为丰富的特征，从而在‌图像识别、‌自然语言处理、语音识别等领域表现出色。大模型具有参数规模巨大、结构复杂、训练时间较长等特点，通常需要大量计算资源，但在特定任务上表现出色。

2.3 生成式UI

‌生成式UI（Generative UI）‌是一种利用人工智能技术自动创建和优化用户界面的方法。它通过分析客户需求和设计规范，快速生成适应不同平台和设备的界面布局，旨在提升用户体验和开发效率‌1。

3. 前言

本系列文章会从0到1介绍一个生成式UI动态化SDK的实现，采用Kotlin语言开发，参考阿里开源的GaiaX动态化跨端框架，布局引擎，表达式引擎使用GaiaX中已经写好的。 GaiaX,仓库地址：GaiaX git仓库地址 ，GaiaX从开发到渲染到移动端设备上的过程如下图所示。

经过验证，目前GaiaX SDK可以实现生成式UI的大部分场景下的界面开发需求，不直接使用GaiaX的原因主要是作为大模型生成的代码，应该越简洁越好，GaiaX不适合的原因。主要体现在以下几点：

1. 组件类型少： 目前仅支持Text，Image, 列表，容器，例如常用的checkbox,选择框，编辑框不支持
2. 样式属性支持的种类少： GaiaX 使用CSS的方式来描述组件的样式，经过验证发现有些CSS样式的属性在移动设备上根本不支持
3.SDK目前的缓存策略不完善: 只有一级缓存，缺乏网络缓存和文件缓存
4. 开发工具的支持: 目前GaiaX SDK 界面dsl开发主要依赖GaiaX Studio,但是GaiaX Studio的源码没有开源，虽然官方文档说可以使用插件，但是目前给出的官方文档中，无法验证是否可以开发扩展的UI组件插件，使其支持拖拽生成DSL的功能。而且GaiaX Studio的使用文档也不完善，虽然有个教学视频，但是讲的都很浅，当开发出一个dsl模板后，导出到 Android项目中后，需要改下模板的内容。事件的绑定缺乏例子。在GaiaX中不知道如何去设置，缺乏最佳实践的案例
5. DSL功能函数的支持少： 目前GaiaX SDK 仅支持size()和env()两个函数，一些例如网络请求，数据持久化等操作还不支持。无法支撑一些例如下单，登录等需要网络和持久化的需求场景。

其中最主要的原因是，描述复杂界面需要多个模板嵌套，出问题的风险大，并且增加了网络传输的带宽，比如完成下列的购物车界面就需要三个模板嵌套，总共需要9个文件共同配合才能实现，如果界面的复杂性再高点，需要的嵌套子模版会更多。比如描述一个购物车的DSL：

代码如下：

特别不合理，所以需要新版的DSL语法。新版的DSL会采用XML的方式实现，让界面更简单和更具有描述性。

本系列文章只介绍Android端的SDK实现，IOS，HarmonyOS的文章会在Android系列的文章更新差不多了后看情况再出。文章会介绍的内容有，DSL语法，DSL的解析渲染，基础文字组件，图片组件，容器组件，列表组件，动画，进度条，表达式引擎，布局引擎，事件引擎，通过DSL构建的页面等。最终的效果是在Android端提供的容器里面展示我们的使用自定义DSL编写的页面。定义好DSL的语法规则后，就可以作为大模型的训练素材了。

当生成式UI的SDK开发的差不多的时候，我们需要提供开发套件，比如开发DSL的Studio,这个Studio必须能让开发的人员可以实时预览自己修改DSL后界面的变化。并且能够校验DSL模板是否正确，可以拖拽设计界面，是否有语法错误。以及渲染出来的效果是否符合预期。比如后面可能会有通过设计图直接生成可交互界面的情况，大模型生成好界面的代码后需要放到Studio软件中校验是否和输入的设计图符合等。这里会参考AndroidStudio的实时预览实现。

4.未来展望

如果开发的顺利的话，我们可以加入3D界面的渲染展示，通过XML定义3D渲染需要的资源，并能清晰的表示界面间的层级关系以及空间位置关系，比如在3D场景中，我们可以在XML的节点属性中添加当前节点的空间位置，纹理贴图的资源路径等属性，在SDK中实现OpenGL或者是其他3D渲染引擎即可。添加后台模板管理系统，异常监控，埋点上报等。