Sean Ren AI 体验产品设计师

输入访问码

这份作品集仅供受邀查看。

跳到​研究​部分
Sean RenModel Studies观看这些研究

Vibe Coding生成​式​动态2026 年​秋

Model Studies

关于 AI 模型​内部​发生​了​什么​的​研究，用​代码，按​它们​运行​的​数学​画出来。

关于当今模型内部机制的动态研究：文本如何变成 token，每个词关注什么，下一个词如何被选出，图像模型如何作画。每幅图都由其机制的一个小型可用版本计算得出。页面打开时，一个分词器和一个语言模型就会在你的浏览器里训练，每项研究都可以上手玩。

上手​玩​这些​研究阅读​研究
角色
设计​师
创意​技术​专家
方法
Vibe Coding
研究
分词​器、注意力、采样、扩散、AI 形象
工具
Claude Code、React、Canvas 2D
时间
2026 年​秋

研究

AI 通常​被​画​成​机器​人​或​发光​的​大脑，可​这​完全​看不出​它是​怎样​工作​的。

动​笔​之前，我先​看了 AI 是​如何​被​描绘​的：人们​随手​找​来​的​图​库​图片、实验​室​委托​创作​的​艺术​作品，以及​少数​设计​师​从​系统​本身​出发​做出​的​图形。

Better Images of AI，始​于 2021 年

图​库​图片

由 We and AI 与 BBC R&D 发起的非营利组织 Better Images of AI 发现，图库里满是科幻机器人、发光的大脑和蓝色背景。它认为这些图片误导人们对 AI 的理解，也掩盖了构建 AI 的人。

Better Images of AI（在​新​标签​页​中​打开）
Justin Jay Wang，OpenAI 与 Cursor

从​机制​出发​的​图形

Justin Jay Wang 的图形从系统的行为出发。为 OpenAI 做的，是为每位访客实时生成的渐变；为 Cursor 做的，是线描图：强化学习变成相互咬合的齿轮，代码库索引变成层层叠起的网格。他指挥一个智能体，把每一幅都写成代码里的规则。

用​代码​做​设计（在​新​标签​页​中​打开）

我​从​他的​方法​里​学​到​什么

  1. 从机制出发。画面来自系统的行为。
  2. 设计一套规则。每改一个参数就是一个新变体，规则让它们保持同一家族。
  3. 保持简洁。一种线宽，一种强调色，大片留白。
  4. 让动态演出过程。每项研究都按其机制的方式运动。

我​加了​什么

  1. 运行真实的算法。每种机制的小型可用版本计算出自己的图，所以形状本身就是证据。
  2. 让人们动手玩。规则里的参数，就是页面上的控件。
  3. 以产品设计师的眼光来读。每项研究最后都说明，它的机制会给界面带来什么改变。
  4. 用我自己的素材。扩散研究用的是我的一幅油画。

Token

模型​从来​看不到​字母。它​读​的是 token，也就是​根据​共同​出现​的​频率​学​到​的​文本​片段。

这个​分词​器​从一​页​关于​光、水​和​绘画​的​句子​里​学​到了​它的​合并​规则。输入​任何​内容，它​都会​切成​自己​认识​的​片段；把​滑​块​往​回​拖，可以​看到​学​到​的​合并​更少​时​的​样子。

10 个 token： the, painter, re, paint, e, d, the, mo, on, light

它​如何​运作

字​节​对​编码​从​单​个​字符​开始，统计​训练​文本​中​每一​对​相邻​的​组合，把​出现​最​频繁​的​一对​合并​成​新的 token，如此​反复。编码​时，再按​学​到​的​顺序​重​放​这些​合并。

常见​词​会​合成​一个 token。训练​文本​里​从​没​出现​过的​词，会​拆​成​它​见过​的​片段，这​就是​模型​能读​懂​任意​字符​串​的​原因。

它​如何​被​画出来

每一​道​拱​是​一次​合并，连接​它​所​合并​的​两​个​片段​的​中心，比​它​内部​的​合并​高​一层。墨色​的​拱​完成​一个 token，灰色​的是​其中​的​中间​步骤。

读​数​会​写​出​这次​合并，以及​它​在学​到​的​列表​中的​名次。每​个 token 下面​的​条​带​写​着​它的 ID，也就是​模型​真正​收到​的​数字。

在​界面​中

限​额​和​价格​都​按 token 计算，所以​产品​在​用户​书写​的​地方，也​应该​按 token 计数，而不是​按​字符。

拼写类任务，比如数一个词有几个字母，对从没见过这些字母的模型来说很难；产品可以把它们交给代码。主要在英文上训练的分词器，会把其他语言切成更多片段，所以同样一条消息，用中文可能比用英文更贵。

来源： Sennrich、Haddow 与 Birch，2016, Petrov 等，2023

注意力

每​个​词​都会​回头​看​它​前面​的​词，找到​的​一部分​内容​会​被​向前​复制。

指向​一个​词，看看​它​在​看​哪里。这个​句子​是​故意​重复​的：第二​遍​时，归纳​头​会​找到​第一次​出现​的​位置，并​预测​出​紧​随​其后​的​那个​名字。也可以​写​一个​带​重复​短​语​的​句子​试​试。

归纳​头​给​出​的​下​一个​词：Vela，复制​自​第 4 个​词。

它​如何​运作

在 Transformer 的每一层里，每个 token 都会给它前面的 token 打分，再按权重混合它找到的内容。可解释性研究发现，有些注意力头承担着可辨认的工作。

前词头把每个词和它前面的词连起来。归纳头在这条连接上更进一步：它找到当前词更早出现的副本，再关注紧接其后的内容。模型就是这样，把提示词里只出现过一次的模式延续下去的。

它​如何​被​画出来

线​下方​的​曲线​是​一个​词​的​注意力，粗细​对应​权​重。上方​的​拱​是​前​词头。矩阵​则​一次​呈现​整个​头，每​个​词​一行，看得​越​多​的​地方​越​暗。

这些​权​重​是​把​每​个​头​已​发表​的​规则​应用​到​你的​句子​上，并​像​大​模型​那样，让​一部分​权​重​落在​第​一个​词​上。它们​不是​从​训练​好的​网络​里​读​出来​的。

在​界面​中

这​就是​为什么​提示​词​里​的​示例​有用，也是​为什么​提过​一次​的​名字​或​格式​会​反复​出现。

它​也​解释​了​一种​失败：模型​可能​复制​一个​谁​都没​打算​设定​的​模式。让​人们​能​查看、固定、编辑​或​删除​之前​的​上下文，他们​就​能​掌控​什么​会​被​复制。

来源： Vaswani 等，2017, Elhage 等，2021, Olsson 等，2022, Wang 等，2022, Xiao 等，2023

采样

下​一个​词​是​从​一个​概率​分布​里​抽出​来​的，温度​决定​了​这​一​抽​能​偏离​最​可能​的​路径​多​远。

这个​小​模型​在“the light”之后​可能​写​出​的​每​一个​句子，都​被​一次​画出来。调整​温度，抽​一个​句子，再​指向​任意​分叉，看看​下​一个​词​的​概率。

the light 之后​的​下​一个​词

  1. falls17%
  2. on14%
  3. is11%
  4. comes11%
  5. turns11%
  6. moves8.2%

它​如何​运作

语言模型给词表里的每个词一个概率。在 softmax 之前把分数除以温度：温度低于 1，概率分布变得更尖；高于 1，则变得更平。温度为零时，模型总是选概率最高的词，所以同样的提示词总是得到同样的回答。

这里​的​模型​是​一个​三元​组​模型，就是​香​农​在 1948 年​用​手工​采样​的​那种，它​在​你的​浏览​器​里，用​和​分词​器​同一​页​句子​训练​而​成。

它​如何​被​画出来

每​个​分叉​是​一个​可能​的​下​一个​词。它的​带​宽​对应​概率，最​可能​的​词​在​中间；路径​越​不可能，河流​的​墨色​就​越​淡，直至​变​灰。

钴​蓝色​的​笔​是​一次​真实​的​采样。它的​随机​数​设​了​种子，所以​每次​访问​时，封面​画出​的​都是​同样​的​句子。

在​界面​中

“重新​生成”之所以​存在，是​因为​回答​本身​就是​采样。产品​可以​按​任务​设定​温度：提取​信息​和​写​代码​用​低温，头脑​风暴​和​起名​用​高​一点​的​温度。

当​一个​问题​有​好​几个​好​答案​时，并排​展示​几个，比​把​一次​抽样​当成​唯一​答案​告诉​人们​的​更多。

来源： Shannon，1948, Holtzman 等，2020

扩散

图像​模型​靠​去除​噪声​作画，大​的​形状​远​比​细节​更​早​确定​下来。

这​是​我的​一幅​油画，被​埋​进​噪声，再​一步步​复原。拖​动​查看​每​一步，或者​让​它​自己​播放。

它​如何​运作

扩散​模型​学习​逆转​一个​过程：用​许多​步​把​图像​和​高斯​噪声​混​在一起。生成，就是​从​纯​噪声​开始，每​一步​去掉​一点。

自然​图像​的​大部分​能量​集中​在​大​的​形状​上，而​噪声​均匀​分布​在​各个​尺度。所以​随着​噪声​被​去掉，大​的​形状​最先​清晰，细节​最后​出现，生成​过程​往往是​从​粗​到​细。

它​如何​被​画出来

左边​是​每​一步​带​噪声​的​输入，采用​余弦​调度。右边​是​根据​这个​输入​对​画​作​的​最佳​线性​猜测：逐​个​频带​应用​维​纳​滤波，训练​好的​模型​的​猜测​大致​也是​如此。

条​带​把​画面​分成​多个​频带，最大​的​形状​排在​最前；某​个​频带​的​信号​一旦​强​过​噪声，就把​它​填满。

在​界面​中

构图​很​早就​确定​了，所以​生成​过程​中​就​能​预​览。变体​可以​按​重做​多少​步​来​提供：只​重做​后面​几​步，布局​不变、细节​改变；从​更​早​开始，布局​也​会​跟着​变。

我​画​画​时，先​铺​大​块​面，人物​的​边缘​留到​最后。模型​最终​也是​按​同样​的​顺序​工作。

来源： Ho、Jain 与 Abbeel，2020, Nichol 与 Dhariwal，2021, Meng 等，2022, Dieleman，2024

绘图​规则

一套​绘图​规则​贯穿​每​一项​研究，读​懂​一项，就​能读​懂​下​一项。

拱​连接​属于​一起​的​东西

合并​在​线​的​上方​拱起，注意力​挂​在​线​的​下方，高度​表示​有​多​深​或有​多​远。分叉​分割​概率，频带​按​尺度​分割​画面。

颜色​只有​一份​工作

墨色​是​模型​已经​确定​的，钴​蓝​是​它​此刻​正在​做的，灰色​是​它​略过​的。东西​淡出​时​变成​更​浅​的​实​色，所以​静止​的​一帧​读起来​也像​在​运动。

从​白​纸​到​白​纸

每​项​研究​播放​一次，从​白​纸​到​结果，再回到​白​纸，让​下​一项​干净​地​切入。开启“减弱​动态​效果”时，每​项​研究​改​为​显示​完成后​的​画面。

来源

每幅​图​背后​的​论文。