AI 版“神笔马良” make-real 工作原理揭秘

上一篇文章是理解本文的基础，推荐按顺序阅读。

除了图文版本之外，也推荐观看视频版本：

https://www.bilibili.com/video/BV1de411r7uU/?aid=237701882&ci...

在上一篇文章中，我们介绍了生成式 AI 是如何理解文本、并进一步生成文本的。OpenAI 最新发布的 GPT 系列模型 GPT-4V(ison)，则让我们见识了 AI 模型还能拥有理解图片等视觉信息的能力。

在众多基于 GPT-4V 视觉能力开发的应用中，开源白板软件 tldraw 中名为“Make Real”的新功能一经发布，就在社交媒体上引发大量关注。

"Make Real" 功能与神话故事“神笔马良”所描述的场景有些相似，用户只需要在白板上快速绘制一个草稿，再点击 Make Real 按钮，就能够生成一段真实的代码，对应草稿中所描述的功能。

如同配图中我们所尝试的，在白板左侧绘制了一个新闻 App，其中有搜索框和新闻卡片等元素。通过 Make Real 生成之后，右侧的代码还原程度确实不错，进一步选择 Copy HTML 则可以复制代码进行后续开发，也可以继续编辑草稿重新生成代码。

除了静态页面，社交媒体上也有很多用户晒出了使用 Make Real 生成打砖块游戏、管理后台页面、代码编辑器等更为复杂的内容。

在本文中，我们将继续从一些例子出发，一起逐步理解 AI 版“神笔马良”背后的工作原理。这包括：

• 模型是如何拥有“视觉”的
• 模型如何将图文信息结合理解
• tldraw 基于 GPT 实现 Make Real 的工程原理

由于目前 OpenAI 还未发布 GPT-4V 相关的研究资料，因此我们还无法断定 GPT-4V 模型具体使用了什么方式实现视觉能力。但已有不少专业人士分析 GPT-4V 很有可能使用了与 Google DeepMind 团队发布的 Flamingo 模型相似的技术，因此本篇文章将使用 Flamingo 所对应的技术原理作为分析讲解的基础。

AI 模型如何理解图片

在上一篇文章中我们讲解了 AI 模型是如何理解句子的：当模型理解句子时，首先需要将句子分为多个词语，逐一理解。

而当 AI 模型学习如何理解图片时，也采用了相同的思路：将图片切分为多个更小的图片，逐一理解每个小图片的含义。

以图中两张小狗图片为例，在模型学习的过程中，研究人员先对图像进行文字标注，指出图片中的信息是“小狗”，再将图片切分后作为学习素材提供给模型。

模型首先会将每个切分的小图片进行特征提取，此时的特征仅仅来源于颜色、图案等信息，并不拥有任何具体“含义”，此处和下文的配图中我们都将以一组圆形的色块代表小图片提取后的特征。与上一篇文章中所讲的文本量化结果相似，小图片的特征也是一个量化的结果，可以被程序使用。

在一轮针对两张图片的学习后，模型就理解了从这 18 个小图片中提取的 18 组特征与“小狗”这一信息存在关联。

显然这一关联关系并不精确，因为右侧图片切分后只有中间的小图片包含小狗，其余周围 8 个小图片基本没有小狗的特征，但也建立了关联。

实际上模型是通过学习大量图片之后逐步弱化错误的关联关系，使得正确的关联关系最终脱颖而出。

具体来说，每次学习过后，模型都将对特征“贴上”对应含义的标签。同样以小狗为例，只要学习的小狗图片足够多，模型就会发现某一个特征已经被多次贴上“小狗”这一标签，那么这一特征的真实含义是小狗的概率就更高，很可能是一个正确的关联。而与之相反，另一个特征可能仅有一次贴上“小狗”这一标签，其余标签为“天空”、“云”，那么该特征中很可能并不包含“小狗”的含义。

经过足够多的学习之后，AI 模型就识别出了许多特征的真实含义。在此基础上，再将一张全新图片发送给模型时，模型也将从中提取特征，并基于过往学习的结果，计算出这些特征最有可能的含义作为对整张图片的理解。

然而这种经典的学习模式存在着一些局限性。2021 年初，OpenAI 发布了名为 CLIP 的模型，使 AI 模型理解图片的能力达到了新的高度。

“图文并茂”的 CLIP

在 CLIP 的研究中，OpenAI 的研究者们认为传统的给图片打标签的方法十分浪费。因为图片中包含的信息很多，如果让一个人来描述同样的小狗图片，他可能会描述出小狗、沙滩、天空、海鸥等更多细节信息，但标签通常只能描述图片中一个显著的内容，而忽视了其他内容，这也导致 AI 模型学习的效率和结果都不够好。

由于当时 OpenAI 在 GPT 模型上已经有所建树，所以他们的研究思路也延续了他们在文本方面的经验，提出了一种新颖的思路：能否让模型图文并茂地去理解图片呢？

所谓图文并茂，在 CLIP 中就是指将一张图片和一段文本作为一对学习素材结合理解。对于文本的处理与上一篇文章所讲一致：将文本转换为一组能描述其内容含义的量化结果。而图片的特征提取则延续传统的思路：切分为小图片之后转换为特征。

不同之处在于 CLIP 不再将图片特征与单一的标签进行关联，而是与文本提取出的量化结果进行关联。与单一标签相比，文本的量化结果所包含的信息量大大增加，也与图片的真实含义更加吻合。

在 CLIP 的训练方式下，一个图片特征在一轮学习中就能获取多个与其相关的含义，而在学习大量图片后，每个图片特征所关联的含义丰富度也就远超传统方法了。

大量 VS 超大量

除了巧妙的实现思路，CLIP 在工程方面的改进同样突出。

在传统方法中，准备打好标签的图片素材是一件费时费力的事。著名的图片素材库 ImageNet 就以包含了 1400 万张带标签的图片闻名，也足以称得上是“大量”学习素材。

但 OpenAI 的研究者则认为这样的图片数量还不够。与传统方法精细挑选图片并人工打标签不同，OpenAI 在 CLIP 的研究中另辟蹊径，转而从社交媒体上搜集了海量的图文内容。因为图文的发布者通常都会保证图文之间有关联性，而 CLIP 需要的又是内容丰富的描述性文本而非精确的标签，因此社交媒体上这些量大又易于获取的图文内容就成了 CLIP 最好的学习素材。

初代 CLIP 在训练中就使用了 4 亿组图文，超出传统的标签图片一个数量级，只能用“超大量”来形容。OpenAI 的研究者也表示图片有的是，在这一方法下图片数量已不再是瓶颈。

不完美的 CLIP

尽管横空出世的 CLIP 让大家眼前一亮，但它本身还不够完美。其中最大的局限性在于 CLIP 完成学习后，只能处理“判断图片和文本是否匹配”这一单一任务类型。

如配图所画，我们可以将 CLIP 学习后的结果理解为一个封闭的盒子，尽管在盒子内部有着丰富的知识，但盒子外部只能以“图文是否匹配”的形式对 CLIP 提出问题。

例如问“有一只棕色小狗”这段文本和对应的图片（也对应了其包含的一组图片特征，配图中仅画出一个作为示意）是否匹配，CLIP 会在 0~1 之间计算出一个 > 0.5 的结果，判定为匹配。反之，“在太空中”这段文本与图片的匹配度 < 0.5，则判定为不匹配。

因此虽然 CLIP 能够完成“从数百张图片中快速找到符合一辆白色货车驶过这一描述的图片”这样高难度的任务，但却不能给任何一副画作取一个标题。

此时的 CLIP 本身就像武侠小说中只有深厚内力、但不会任何招式的角色，急需一本招式秘籍提升战斗力。

此后围绕 CLIP 开展的研究工作数不胜数，而 Google 的 DeepMind 团队发布的 Flamingo 模型就是其中威力巨大的招式秘籍之一。

融合图文的 Flamingo

2022 年，DeepMind 发布了 Flamingo，向大家展示了如何让 AI 模型将图文融合，完成更多有价值的任务。

以 CLIP 折戟的“为图片取标题”任务为例，我们在配图中给出了一组图文相间的内容：

给 [沙滩排球] 这张图片取个标题

在实现图文融合时，Flamingo 继续沿用了生成式 AI 模型的思路。

Flamingo 首先会将图文相间的内容转换为一组词语和图片，配图中我们用绿色色块代表图片在句子中的位置。

之后，Flamingo 将词语和图片分别交给两个模型处理，文本模型负责将词语转换为量化结果，视觉模型负责将图片转换为图片特征。所以一个 Flamingo 模型实际上要包含两个子模型，分别处理文本和图片，以 OpenAI 为例，它就可以使用一个 GPT 类型的模型处理文本，和一个 CLIP 类型的模型处理图片。

这一组合式模型的设计使得 Flamingo 的适用性大大提升，因为它所使用的子模型可以是已有模型而不需要重新训练，也可以在更好的子模型出现后随时灵活替换。

最后 Flamingo 则是采用生成式模型的核心思路，将词语和图片基于自注意力机制再进行一轮结合理解。

在词语和图片补充自注意力之后，我们又一次得到了生成式模型中的典型结果。配图中虚线上方每一行对应一个词语或图片，一行中加号左侧为词语或图片自身的量化结果和图片特征，加号右侧为来自其余词语和图片的自注意力。

和配图所画一致，词语的量化结果是由文本模型转换而来，在配图中以长条形色块示意。图片的特征则是由视觉模型转换而来，在配图中以圆形色块示意。

正如它们不同的色块形状所揭示的，尽管 Flamingo 实现了将穿插的图文分别量化，并补充了自注意力，但最终计算得到的仍是一个文本量化结果和图片特征交织而成的产物。产物中虽然蕴含了丰富的信息，但不论是文本模型（只能识别长条形色块）还是视觉模型（只能识别圆形色块）都无法直接使用这一产物。

但 Flamingo 认为这并不是一个难题。虽然最终的混合产物无法被文本模型或视觉模型继续使用，但产物所蕴含的丰富量化信息是客观存在的。所以要完成特定的任务，只需要提供少量“正确答案”，就能够找到混合产物与正确答案之间的“规律”。

继续以“给图片取标题”这个特定任务为例，首先人为给三张图片取标题。

如配图所画，我们给三张图片分别取标题为：

• 沙滩上的小狗
• 山顶蹦极
• 海上冲浪

之后我们将三张图片放入一个固定的文本模版中，组成“给 [X] 这张图片取个标题”这一图文混合内容，输入给 Flamingo 模型，转换出对应的混合产物。

由于我们给出的三个图片标题“正确答案”都是纯文本内容，因此可以将它们输入到文本模型中转换成对应的文本量化结果。

至此，我们就获得了三组一一对应的图文混合产物与文本量化结果。而它们之间的对应关系所包含的“规律”，就是我们希望获得的 AI 模型能力。

在 Flamingo 的实验过程中，研究者们发现由于图文混合产物和文本量化结果中包含的信息都足够丰富，因此它们之间的映射关系也很容易找出规律，通常可以被表示为一个线性关系。

这也意味着只需要少量的样本，就能够计算出这一线性关系。

所谓的线性关系，可以理解为 AI 模型完成特定任务时所有的数学公式，以“取标题”任务的公式为例，将图文混合产物放入公式中进行计算，得到的结果就是对应标题的文本量化结果。

我们在配图中以坐标轴的形式示意三组混合产物和文本量化结果的映射关系，橙色的直线是计算后得到的线性关系。

在找到公式之后，AI 模型就可以持续完成同类型的任务。

再次将“为沙滩排球的图片取标题”的图文内容放入已经找到公式的 AI 模型中，就可以依次：

1. 将图文内容转换为混合产物
2. 将混合产物根据公式（线性关系）计算出文本量化结果
3. 基于文本量化结果生成文本
4. 得到“沙滩打排球”这一标题

Make Real：AI 与工程的巧妙结合

在理解了以 CLIP 和 Flamingo 为代表的 AI 模型是如何理解图片并与文本结合之后，我们应该意识到 AI 的视觉能力并不是十全十美的。

首先 AI 的视觉能力仍然建立在过往的学习素材之上，素材越丰富的场景 AI 理解的就会越好，但未曾包含在学习素材之中的内容 AI 也无法理解。

其次，以 CLIP 为基础的视觉模型优势在于可以从图片中提取出更加丰富的信息。但对于一些精确的信息，例如“图中有几个苹果”、“马路上哪两辆车之间距离最短”，视觉模型就难以得出正确的结果。

所以在 AI 模型进一步增强之前，想充分发挥其能力就需要在工程上扬长避短。开篇提到的在社交媒体上赚足眼球的 Make Real 功能就是这方面的典范。

Make Real 的思路是在白板上绘制一个草稿，之后就能自动生成对应实现的 Web UI 代码。

Web UI 界面截图和设计稿必然是在网络上大量流传的素材，视觉模型很可能在这方面受到了良好的训练。

而手绘风格的草稿，能够快速描绘出整体的信息，但在细节处肯定不够精确，这也正符合视觉模型的能力特点：整体的信息可以被模型充分提取，而细节处的不完美模型本来也感知不到。

基于我们已经讲述过的原理，我们有理由猜测设计风格越常规的草稿最终的生成效果越好，而独树一帜的设计最终生成的还原度则比较一般。为了验证这一猜测，我们通过 Make Real 创作了配图中所示的两组作品。

上方的作品在草稿中绘制了一个常规的 Web 页面，包含菜单、图表、表格等元素，Make Real 生成的代码还原度比较高，基本完全理解了草稿中的意图。

下方的作品则在草稿中绘制了一组不常见的元素组合，尽管 Make Real 已经努力将它们全部囊括在生成的代码中，但在位置、样式部分的还原度就较低了。

因为 Make Real 的代码开源，所以我们很容易理解其工作原理。

从 Make Real 的源代码中不难看出，当用户绘制一幅草稿后，Make 会将草稿图片嵌入对应的文本模版中，形成图文混合内容。

我们在配图中摘录了部分比较有趣的模版内容。

在模版中我们可以看到 Make Real 通过各类文本内容增强特定部分的注意力，引导模型从文本和图片中获取有助于最终生成代码的细节信息。

这其中包括对意图的引导：“从低保真线框图构建工作网站原型”；也有对生成结果的限制：“以单个 HTML 文件的形式回复”。同时为了保证生成的代码完整可用，引导模型在代码中使用特定的技术栈和外部资源。

为了让模型更加具有创造力，而不是过度抑制“幻觉”，模版的末尾也包含了“猜测一下”、“弄错比让事情不完整更好”等鼓励模型发挥创造力的文本。

有兴趣的读者可以尝试一下，如配图所画，在 ChatGPT 上输入同样的文本提示词和图片草稿，ChatGPT 也将返回与 Make Real 最终呈现结果相近的代码文本。

而 Make Real 所做的则是让整个使用比在 ChatGPT 中对话并复制粘贴代码更加顺滑。

在 Make Real 的包装下，所有的细节与繁琐工作被隐藏在了幕后，台前留下的只有神奇的效果。

用户在 Make Real 的白板中绘制草稿，Make Real 程序在幕后将草稿图片与文本模版整合，通过 API 的方式发送给 GPT。再将 GPT 返回的代码文本渲染到白板的 iframe 中进行预览，就实现了草稿生成代码的完整流程。

逐步拆解之后，我们发现 Make Real 所做的工作并不复杂，但它可以被视作基于 AI 模型开发应用的一种最佳实践：

• 理解 AI 模型的长处与局限性，寻找一个扬长避短的场景
• 结合已有的工程代码（例如白板画草稿），简化为 AI 输入内容的过程
• 将吸引 AI 模型注意力的技巧以提示词文本模版的形式包含在程序内部
• 将 AI 模型生成的结果以特定的方式进行展示

可以看出，尽管 AI 模型不断演进，但现阶段创意和工程仍然是重要的组成部分。AI 模型与工程结合，更高效地解决特定场景的问题还有很多探索空间。