Press "Enter" to skip to content

“LLM和GUI的协同,超越智能聊天机器人”

使用OpenAI GPT函数调用驱动您的移动应用

Midjourney创建的图像

介绍

我们引入一种革命性的用户体验方法,将会话式人工智能和图形用户界面(GUI)交互以一种自然语言工具栏的形式进行最佳混合。它位于每个屏幕的底部,并允许用户从一个入口点与您的整个应用进行交互。用户始终可以选择语言和直接操作。他们不必搜索在哪里以及如何完成任务,并且可以用自己的语言表达自己的意图,同时保留GUI的速度、紧凑性和可见性。 GUI屏幕的定义随用户的请求一起发送给大型语言模型(LLM),让LLM朝用户的意图导航GUI。我们在前一篇文章的基础之上进行了改进,并提供了一个实现了这一概念的Flutter示例应用供您自行尝试。完整的Flutter代码可在GitHub上找到,这样您就可以在自己的环境中探索这个概念。本文旨在面向产品所有者、用户体验设计师和移动开发人员。

“LLM和GUI的协同,超越智能聊天机器人” 四海 第2张

背景

自然语言界面和图形用户界面(GUI)连接人类用户与计算机系统的能力。自然语言使人类能够就超出当前问题范围的事物进行交流,而指向则可用于对世界中的具体项进行交流。与使用自然语言进行沟通相比,指向对沟通对象的认知努力较少,并且也减少了混淆的空间。然而,自然语言可以传达关于整个世界的信息:具体、抽象、过去、现在、未来以及元世界,提供对所有内容的随机访问。

随着ChatGPT的崛起,自然语言处理的解释质量已经达到了很高的水平,并且使用函数调用现在可以实现完整的自然语言界面,可以减少误解。 LLM社区当前的趋势是将聊天界面作为主要的对话式用户界面。这种方法源于聊天是书面人际交互的主要形式,通过滚动窗口保留了对话历史。许多类型的信息适合图形表示。一种常见的方法是将GUI元素融入聊天对话中。然而,这样做的成本是聊天历史变得庞大,并且在聊天历史中管理GUI元素的状态非常复杂。通过完全采用聊天范例,我们失去了向用户提供菜单驱动的交互路径的选择,因此他们在了解应用程序的功能方面更加模糊。

此处采用的方法可以应用于各种应用程序,例如银行、购物和旅行应用程序。移动应用程序在前屏幕上具有最重要的功能,但在其他标签或隐藏在菜单中的屏幕上的功能可能对用户来说非常难找到。当用户可以用自己的语言表达他们的请求时,他们可以自然而然地被带到最有可能满足他们需求的屏幕上。当最重要的功能位于前屏幕时,以GUI元素的形式呈现的核心功能选项的数量可能相当庞大。自然语言从另一角度来看:用户主动并明确表达他们想要的是什么。将两者结合以达到最佳效果,两种方法相互补充,用户可以选择最适合自己任务或子任务的选项。

自然语言工具栏

自然语言工具栏(NLB)允许用户输入或说出他们希望从应用程序中获得的信息。随着他们的请求,应用程序的所有屏幕的定义都使用OpenAI所称的“函数调用”技术发送到LLM。在我们的概念中,我们将GUI屏幕视为在我们的应用程序中可调用的函数,其中该屏幕上的用户输入小部件被视为该函数的参数。

我们将以一个银行应用程序作为例子,来说明这个概念。当用户以自然语言发出请求时,LLM会通过告诉我们的应用程序中的导航组件哪个屏幕需要打开以及需要设置哪些值来回应。如下图所示:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第3张

以下图像展示了一些交互示例:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第4张

“LLM和GUI的协同,超越智能聊天机器人” 四海 第5张

以下图像展示了LLM的一个派生结论,即它认为最好的帮助用户的方式是显示附近的银行办公室:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第6张

以下示例显示了即使是非常简短的表达方式也可以导致用户想要的结果:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第7张

因此,自由输入也可以是一种非常快速的交互模式。对这种简写标识的正确解释取决于其背后意图的非歧义性。在这种情况下,该应用程序除了转账界面之外没有其他界面,因此LLM可以做出非歧义的决定。

另一个额外的功能是交互具有历史记录,因此您可以继续键入来更正先前的意图:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第8张

因此,LLM可以将多个消息组合在一起,其中一个消息纠正或增强另一个消息,以产生所需的功能调用。这对于旅行规划应用程序非常方便,您最初只需提及起点和目的地,并在随后的消息中使用额外要求进行细化,比如日期、时间、只有直达连接、只有头等舱等。

您可以在此处单击以自行尝试示例应用程序。语音输入在Chrome浏览器上、Android和iOS原生应用上都可以使用。所使用的是平台提供的语音识别功能,因此如果其质量不足以满足您的目的,还有改进的空间。

工作原理

当用户在自然语言栏中提出问题时,将一个JSON模式添加到LLM的提示中,该模式定义了所有屏幕及其输入元素的结构和目的。LLM试图将用户的自然语言表达映射到这些屏幕定义之一,并返回一个JSON对象,以便您的代码可以进行“函数调用”来激活适用的屏幕。

函数和屏幕之间的对应关系如下图所示:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第9张

您可以在此处获取完整的函数规范。

自然语言栏的Flutter实现基于LangChain Dart,这是LangChain生态系统的Dart版本。所有提示工程都在客户端上进行。实际上,屏幕、导航逻辑和函数模板放在一起更有意义。事实上,函数模板已经被编织到导航结构中,因为它们之间是一对一的关系。以下是激活并导航到信用卡界面的代码:

DocumentedGoRoute(   name: 'creditcard',   description: 'Show your credit card and maybe perform an action on it',   parameters: [     UIParameter(       name: 'limit',       description: 'New limit for the card',       type: 'integer',     ),     UIParameter(       name: 'action',       description: 'Action to perform on the card',       enumeration: ['replace', 'cancel'],     ),   ],   pageBuilder: (context, state) {     return MaterialPage(         fullscreenDialog: true,         child: LangBarWrapper(             body: CreditCardScreen(                 label: 'Credit Card',                 action: ActionOnCard.fromString(                     state.uri.queryParameters['action']),                 limit:                     int.tryParse(state.uri.queryParameters['limit'] ?? ''))));   }),

在顶部,我们看到这是一个路由:应用程序中路由系统中的一个目标,可以通过超链接激活。描述是LLM将用于将屏幕与用户意图匹配的部分。其下的参数(信用卡限额和操作)以自然语言定义了屏幕的字段,因此LLM可以从用户的问题中提取它们。然后,pageBuilder-item定义了如何使用深链接的查询参数来激活屏幕。您可以在https://langbar-1d3b9.web.app/home中识别出这些:在NLB中键入“信用卡限额为10000”,浏览器的地址栏将显示为:https://langbar-1d3b9.web.app/creditcard?limit=10000

使用了LangChain代理,使这种方法不依赖于GPT,因此还可以使用其他LLM(如Llama、Gemini、Falcon等)应用。此外,它还可以轻松添加基于LLM的辅助功能。

历史面板

自然语言栏提供了一个可折叠的交互历史面板,以便用户可以轻松重复以前的语句。这样,交互历史就会得到保留,类似于聊天界面,但以紧凑、可折叠的形式呈现,节省屏幕空间,避免杂乱。用户以其使用的语言显示上一个语句。系统响应作为用户语句上的超链接并入其中,因此可以单击以重新激活相应的屏幕:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第10张

当LLM无法完全确定要激活的屏幕时,系统响应将明确显示,此时历史面板会自动展开。这可能发生在用户提供的信息不足、用户请求超出应用范围或发生错误的情况下:

“LLM和GUI的协同,超越智能聊天机器人” 四海 第11张

未来

历史面板是一个提供客户支持和上下文相关帮助的好地方,可以以聊天机器人的形式提供。目前正在进行RAG(检索增强生成)技术的活跃讨论和演进,该技术允许聊天机器人根据您自己组织提供的大量文本内容回答用户问题。此外,自然语言栏是想象使用自然语言给应用程序提供更多功能和便利的良好起点。请在评论中留下您的想法。我真的很好奇。

客户支持

除了您的应用程序之外,您的组织还有一个为用户提供大量信息的网站。也许这个网站已经有一个聊天机器人了。甚至你的应用程序可能已经有一个聊天机器人。交互历史面板是一个好的地方,也可以进行客户支持对话。

上下文相关帮助

在上述描述的情况下,我们保持了与应用程序的语言交互的历史记录。将来,我们可能会在历史序列中(隐式)添加直接用户与GUI的交互痕迹。上下文相关的帮助可以通过将用户交互的历史痕迹与应用程序的帮助文档上的RAG相结合来提供。这样,将更多地根据应用程序的当前状态来回答用户的问题。

超越移动应用的静态辅助

当前的提案是一个MVP。它为在应用程序的上下文中解释用户语言请求提供了一个静态模板。这种技术开辟了各种未来改进的广阔领域:

  • 当用户在特定屏幕上提出问题时,我们可以动态地将更具体的解释模板(函数)添加到与该屏幕状态相关的提示中,例如“为什么提交按钮变灰/不可用?”。
  • 使用自然语言栏进行函数调用可以用作创造性应用的助手,例如在选择上执行过程,如“使大小相同”或“转换为可重用组件”。Microsoft Copolit 365 已经使用了类似的功能。本文介绍的方法还可以使您的组织利用此类功能。

与系统的每个方面进行自然语言交互很快将成为每个用户界面的主要组成部分。当使用函数调用时,您必须在提示中包含系统的能力,但很快市场上将会出现更经济、更强大的方法。例如,OpenAI 最近推出了带有函数调用的模型微调,允许您创建一个 LLN 版本,并将系统的能力集成其中。即使这些能力非常广泛,提示的负载仍然有限。

结论

LLN 可以作为一种了不起的粘合剂,通过“函数调用”与基于 GUI 的应用程序进行自然语言交互。引入了自然语言栏,用户可以通过键入或说出自己的意图,系统将会响应并导航到正确的屏幕并预填正确的值。样品应用程序使您能够真正感受到这是什么样子,而可用的源代码使您可以快速将其应用到自己的 Flutter 应用程序中。自然语言栏不仅适用于 Flutter 或移动应用程序,而且可以应用于任何带有 GUI 的应用程序。它最大的优势在于从单个访问点向用户展示了应用程序的全部功能,而用户无需知道如何操作、找到它们,甚至无需了解应用程序的行话。从应用程序开发的角度来看,您只需记录屏幕的目的和其中的输入部件,即可向用户提供所有这些功能。

LinkedIn上关注我

特别感谢David Miguel LozanoLangChain Dart方面对我提供帮助

一些有趣的文章:多模对话谷歌关于 GUI 和 LLM 的博客将 GUI 交互解释为语言LLN 助理语言和 GUI聊天机器人和 GUI

本文中的所有图片(除非另有声明)均为作者原创

Leave a Reply

Your email address will not be published. Required fields are marked *