• 推理格式：模型用 DIL 编写界面，DIL 将 Markdown 与类 JSX 标签和 JavaScript 结合在一起。
• 服务端编译：服务器将每个部分响应转换为一个 JavaScript 程序，以及一份包含文本和数据的 JSON 文档。
• 客户端运行时：一个沙箱化运行时执行该程序并产生 UI 操作。
• 渲染：ChatGPT 将这些操作应用到自己的原生组件上。
• 设计系统与目录：模型可用的组件、属性和设计令牌。

## Team plan estimate
Drag the slider to see the **monthly price** for your team.
{@body const [seats,setSeats] = DIL.useState(8)}
{@body const price = seats*29}
<box border padding={3} gap={2}>
  <slider min={1} max={50} value={seats} onChange={setSeats}/>
  <title size="xl">${price}/mo</title>
</box>

• 它必须易于可靠地书写， 因此它由模型已经非常熟悉的记法构成。
• 它必须在写到一半时仍然可用。 语句各自独占一行，任何未闭合的元素都可以自动闭合。这样一来，服务器就可以在最后一个完整结构处截断部分响应，并且仍然能够编译它。

function __dilSafe(evaluate, failureValue) {
  try { return evaluate(); } catch { return failureValue; }
}

DIL.render(__dil.jsx(() => {
  const __dilConstants = DIL.useConstants();
  const __dilModelDataBindings = DIL.useAppData((appData) => appData.opGenui?.modelDataBindings ?? {});
  const [seats, setSeats] = DIL.useState(8, { key: "seats" });
  const price = __dilSafe(() => seats * 29, undefined);
  return __dil.jsx(__dil.Fragment, null,
    __dil.jsx("title", { size: "lg" }, __dilConstants["0"]),
    __dil.jsx("text", null, __dilConstants["1"], __dil.jsx("bold", null, __dilConstants["2"]), __dilConstants["3"]),
    __dil.jsx("box", { border: true, padding: 3, gap: 2 },
      __dilSafe(() => __dil.jsx("slider", { min: 1, max: 50, value: seats, onChange: setSeats }), null),
      __dil.jsx("title", { size: "xl" }, __dilConstants["4"], __dilSafe(() => price, null), __dilConstants["5"])));
}, { key: "body:2" }));

{
  "constants": {
    "0": "Team plan estimate",
    "1": "Drag the slider to see the ",
    "2": "monthly price",
    "3": " for your team.",
    "4": "$",
    "5": "/mo"
  },
  "appData": { "opGenui": { "componentResults": {}, "modelDataBindings": {} } }
}

• 普通函数调用。 标记会变成对 __dil.jsx 的调用，因此 JavaScript 运行时无需 DIL 解析器即可求值该程序。
• 错误隔离。 表达式被包裹在 __dilSafe 中，因此抛出异常的表达式只会移除一个元素，而不会中止整个渲染过程。
• 独立表中的文本。 静态文本移入常量表，因此在响应流式传输时，不断增长的文本改变的是数据而非程序。
• 稳定的状态键。 每个状态片段都会获得一个键（{ key: "seats" }），因此其值在每次重新编译后都能保留。
• 修复与验证。 不完整的语句和标签会被丢弃，未闭合的元素会被闭合，未通过目录验证的属性会被移除并记录为诊断信息。

• 锁定。 在评估程序之前，worker 会从其全局作用域中移除网络访问、定时器、消息传递和动态代码评估，并冻结剩余的全局对象。
• 评估。 然后它使用 new Function 评估程序。运行时对象（DIL、__dil、GenUI）以及目录中的复合组件作为参数传入。
• 看门狗。 在超时时间内未响应的程序会被隔离，worker 会被重启。

CREATE #1  title   SET size = "lg"                                    PLACE under root at 0
CREATE #2  text "Team plan estimate"                                  PLACE under #1 at 0
CREATE #3  text                                                       PLACE under root at 1
CREATE #4  text "Drag the slider to see the "                         PLACE under #3 at 0
CREATE #5  bold                                                       PLACE under #3 at 1
CREATE #6  text "monthly price"                                       PLACE under #5 at 0
CREATE #7  text " for your team."                                     PLACE under #3 at 2
CREATE #8  box     SET border = true, padding = 3, gap = 2            PLACE under root at 2
CREATE #9  slider  SET min = 1, max = 50, value = 8, onChange = fn#1  PLACE under #8 at 0
CREATE #10 title   SET size = "xl"                                    PLACE under #8 at 1
CREATE #11 text "$"                                                   PLACE under #10 at 0
CREATE #12 text "232"                                                 PLACE under #10 at 1
CREATE #13 text "/mo"                                                 PLACE under #10 at 2

• 生成的界面在每个平台上都与其他 ChatGPT 界面风格一致。
• 编译器有可供校验输出的 schema。 组件上不存在的属性，或类型错误的字面量，会在编译期间被移除，并记录为一条诊断信息。

• 原生组件。 ChatGPT 客户端代码的组件注册表中定义了约 70 个组件；在我们捕获的响应中出现了其中 39 个。
• 设计令牌，用于间距、圆角、颜色和尺寸。
• 复合组件由 OpenAI 用 DIL 编写，并预先构建后发送到沙箱，例如图像和产品组件。在我们的抓取记录中，模型使用了这些组件，但从未定义过自己的组件。

• 输出通常尚不可运行。 在大多数时刻，它都是一个不完整的程序，仍有标签或表达式处于打开状态，无法按原样执行。
• 界面必须在增长过程中保持可用。 用户已经操作过的组件必须保持其状态。
• 部分内容是单独到达的。 图像等数据来自服务器，而非来自文本。

{"o": "patch", "v": [
  {"p": "/message/content/parts/0", "o": "append", "v": " Sunday lamb roast with friends — generous food, …"},
  {"p": "/message/metadata/model_dil_v2/code", "o": "replace", "v": "DIL.render(__dil.jsx(()=>{…"},
  {"p": "/message/metadata/model_dil_v2/constants", "o": "append", "v": {"0": "Here's a plan for a proper Sunday lamb roast with friends — …"}},
  {"p": "/message/metadata/model_dil_v2/constants", "o": "append", "v": {"1": "Since you're"}},
  {"p": "/message/metadata/model_dil_v2/fallbackMarkdown", "o": "append", "v": " Sunday lamb roast with friends — …"}
]}

• 编译写到一半的响应
• 更新文本
• 更新 UI

• 文本在 0.7 秒内淡入；
• 新行和网格项在 0.42 秒内滑入；
• 图表在 1.8 秒内绘制；
• 容器高度以过渡方式变化，而不是跳跃式变化。

<AppBlock title="Drum Lab" icon="app-chatgpt" variant="inline" app_block_id="drum-lab-01">
<div id="dl" class="w-full min-w-0 space-y-4 text-base">
  <style>
    #dl{color:var(--viz-text)}#dl button{touch-action:manipulation}#dl .panel{background:var(--viz-panel);border:1px solid var(--viz-border);border-radius:15px}…
  </style>
  …
      <button id="dl-play" class="btn" style="background:var(--viz-text);color:var(--viz-card);min-width:100px">▶ Play</button>
  …
</div>
<script>
(function(){
const root=document.getElementById('dl');if(root.dataset.init)return;root.dataset.init="yes";
…
function audioInit(){if(!audio){const C=window.AudioContext||window.webkitAudioContext; if(!C)return false;audio=new C();…
…
})();
</script>
</AppBlock>