LLM 聊天机器人 3.0：将 LLM 与动态 UI 元素融合

大型语言模型（LLM）极大地改变了聊天机器人和对话式人工智能，使交互更加自然和直观。然而，在某些方面仍有改进空间，可以提高其有效性。

我们来看看与传统聊天机器人的典型互动

User: I'm looking for warm travel destinations in Europe.

AI: Great! I can help with that. Which country are you interested in?
1. Spain
2. Italy
3. Greece

User: 2

AI: Excellent choice. What type of accommodation do you prefer?
1. Hotel
2. Hostel
3. Airbnb

1. 用户通常需要根据 LLM 的响应进行深入或选择。
2. 选择选项需要输入文本或使用编号系统。
3. 此过程可能很繁琐，尤其是在进行多次选择或在移动设备上时。

使用 LLM 生成动态 UI
从更用户友好的角度来看同一个问题，受到网络上典型 UI 元素（按钮、图标等）的启发，我们可以将这些相同的元素集成到聊天本身。结果可能是这样的。

我们问了同样的问题，但没有仅仅得到国家列表或项目符号，而是得到了这样的选择

选择一个或多个项目后，会自动向 LLM 发送包含所选内容的回复，因此它“知道”我们选择了什么，在下面的案例中是“葡萄牙里斯本”。

您可以在这里尝试：https://fluidchat.vercel.app

请注意，该应用程序仍在开发中，并使用 gpt-4o-mini，该模型有时无法输出某些图标的正确代码。

与基于文本的聊天对话的主要区别

1. 动态 UI 生成：LLM 可以生成按钮、复选框和下拉菜单等 UI 元素。
2. 交互式选择：用户可以直接通过 UI 进行选择，而无需键入响应。
3. 对话上下文：UI 交互无缝集成到对话历史记录中。
4. 移动友好：界面设计旨在方便在桌面和移动设备上使用。

****这种方法与 Artifact（Claude）和 Canvas（OpenAI）有何不同****
Anthropic 术语中的 Artifacts 和 OpenAI 术语中的 Canvas 都引入了以超友好方式呈现信息（如 HTML、SVG、React 等）的方法。但是，它们尚未提供捕获信息（例如用户输入）的方法。

技术深度解析

为了实现这种动态 UI 生成，我们为少数元素实现了一种非常简单的自定义标记语言。这种语言允许 LLM 不仅生成文本，还生成用于渲染 UI 元素的指令。

该标记语言的设计与典型的编程语言不同。这种区别至关重要，因为它可以防止 LLM 在生成实际代码片段作为对话一部分时造成混淆。

这是一个展示我们自定义标记语言某些元素的表格

为了使这项工作有效，我们需要在两方面实施它：LLM 端（通过提示）和解释并显示这些 UI 元素的客户端。

LLM 端

这是一个简单的提示，告诉 LLM 何时以及如何使用这些元素。

You are an AI assistant capable of presenting options for user selection and using Font Awesome icons. When appropriate, use the following formats:

1. [SINGLE_SELECT] for single-choice options
2. [MULTI_SELECT] for multiple-choice options
3. [CHOICE] for general choice options

Present the options in a numbered list format. Use Font Awesome icons by wrapping the icon name in double curly braces, like {{icon-name}}. Examples:

[SINGLE_SELECT]
1. {{fa-home}} Home
2. {{fa-user}} Profile
3. {{fa-cog}} Settings

[MULTI_SELECT]
1. {{fa-pizza-slice}} Pizza
2. {{fa-hamburger}} Burger
3. {{fa-ice-cream}} Ice Cream

[CHOICE]
1. {{fa-car}} Drive
2. {{fa-bicycle}} Cycle
3. {{fa-walking}} Walk

客户端
在客户端（聊天界面）我们也必须集成这些元素。

// Render different types of content
const renderContent = () => {
  if (typeof message.content === 'string') {
    return <p>{message.content}</p>;
  }
  if (Array.isArray(message.content)) {
    return message.content.map((item, index) => (
      <div key={index}>
        {item.text && <p>{item.text}</p>}
        {item.options && renderOptions(item.options, item.type)}
      </div>
    ));
  }
  return null;
};

// Render interactive UI elements
const renderOptions = (options, type) => {
  switch (type) {
    case 'single-select':
      // Render single-select buttons
    case 'multi-select':
      // Render multi-select buttons with confirm
    default:
      return null;
  }
};

视觉增强：锦上添花

上述实现不仅限于输入元素，还可以添加对富可视化（如显示 font-awesome、markdown 等）的支持。其中一些视觉元素已经得到所有主要聊天机器人界面的支持。

例如，我们可以扩展我们的标记语言以包含图标规范

[CHOICE:Small{icon:pizza-sm},Medium{icon:pizza-md},Large{icon:pizza-lg}]

这可以渲染为同时包含文本和代表性图标的按钮，进一步改善用户体验。

下一步是什么

这里介绍的流畅方法只是 LLM 和用户之间交互新 UI 模式的开始，它使交互更顺畅，尤其是在用户需要大量输入（而不是简单的信息对话）时。

看看语音交互将如何发展也将很有趣，尤其是在流式语音 API 方面。然而，在我看来，文本交互永远不会失去其应用，尤其是在内容丰富的应用程序中，因为它们太嘈杂而无法听。我们已经从有时感觉像折磨的热线菜单中体验到了后者 :)