技术分享 | DeepChat与大模型重塑智能网页应用新体验

随着科技的发展速度，智能网页应用正变得无处不在。当大模型技术逐渐落地，原本静态的网页开始向智能互动平台转型，这确实带来了更好的用户体验和操作便捷性。 但话说回来，技术虽然进步了，许多网页应用在没有全面集成大模型的情况下，依然会遇到不少挑战： **1. 用户体验割裂** 用户不得不在主业务界面和AI界面之间频繁切换。这种操作中断不仅容易出错，还会大大降低整体的使用体验。 **2. 数据提取困难** 图表中的数据通常以图形形式呈现，用户很难直接提取和利用这些数据。传统方法效率低、容易出错，直接拖慢了业务决策的节奏。 **3. 自动化任务难以实现** 自动填表、智能提示这类任务大多依赖固定规则，缺乏智能性和灵活性，最终影响的是用户效率和体验。 那么，怎么解决这些问题呢？ 越来越多的开发者选择把大模型直接集成到网页前端，这么做有几个显著优势： **无缝用户体验** 在前端直接调用大模型，用户可以在同一界面内完成问答、数据分析和操作，无需在不同界面之间跳转，操作的连续性和流畅性自然就上去了。 **快速数据提取** 大模型可以直接从网页内容中提取并处理数据，替代手动操作，省时省力。 **智能自动化** 通过前端集成大模型，自动填表和智能提示这些任务都可以实现，网页应用的灵活性和智能化水平也得到提升。 要实现这些效果，可以借助 **DeepChat 与大模型函数调用结合**。 **DeepChat 简介** DeepChat 是一个可以在任何网页应用中整合AI服务的聊天组件，主要用来简化与远程服务的交互。它支持多种API连接，能实现智能对话，开发者可以创建高度定制化的用户体验，灵活性也很强。 **01** **核心功能与特点** - **多API连接**：RESTful 接口和 WebSocket 服务都能兼容。 - **实时对话**：确保消息即时传递和反馈。 - **多线程交互**：支持并行处理多个对话。 - **高度定制化**：可以全面调整功能和视觉样式，契合品牌形象和用户需求。 - **跨框架兼容**：适用于 React、Vue、Angular 等前端框架。 - **社区驱动**：开源项目，接受社区贡献，持续优化和创新。 **02** **应用场景** - **客户支持**：提供7×24小时AI客服服务，提高客户满意度。 - **用户引导**：通过对话指导用户使用产品，加快上手速度。 - **数据查询**：用户可通过对话框快速查询业务数据。 - **自动填表**：智能解析用户输入，减少手动操作。 - **智能推荐**：推荐相关内容或商品，提高转化率。 - **实时分析**：分析用户输入，提供针对性建议和反馈。 **大模型函数调用简介** FunctionCall 是目前大模型中常见的一项功能，让聊天模型能像人一样智能地决定何时调用外部 API，比如发邮件、查天气或处理结构化数据。它能帮助开发者更灵活地使用大语言模型，实现更智能的应用。 **01** **主要特点** - **智能选择函数**：模型能根据用户输入自动决定是否需要调用某个函数。 - **生成 JSON**：模型会生成包含函数参数的 JSON。开发者只需用这个 JSON 去实际调用相关函数。 - **可靠的数据返回**：通过函数调用，能更准确地返回结构化数据。 - **并行调用**：支持多个函数同时调用，效率提升明显。 **02** **使用过程** 1. **定义函数**：先在 API 请求中定义有哪些可用的函数，包括它们的名称和参数。 2. **调用模型**：把用户的查询和定义好的函数传给模型。 3. **生成 JSON**：模型决定是否需要调用函数，并生成相关的 JSON 数据。 4. **实际调用**：把生成的 JSON 数据解析，真正去调用那个函数。 5. **处理结果**：函数返回结果后，把它作为新消息传回给模型，生成用户能读懂的结果。 **03** **常见用例** - API 请求：如查询天气、发邮件等。 - 自然语言转 API 调用：比如用户问“谁是我最好的客户？”，模型可以把这个问句转换成调用如 `get_customers` 这样的内部 API。 - 抽取结构化数据：从普通文本中提取像名字、生日等具体信息。 **下面，我们以订餐表单收集为例制作一个简单的 Demo。** **1、创建 HTML 表单** **2、集成 DeepChat** **3、工具定义** **4、工具实现** **5、效果示例** 初始界面，顶部是表单： 自动填表效果： **大模型函数调用调优技巧** **函数选取** 由于模型能力的限制，函数选取经常会出错。比如，在需要调用“填写表单”功能时，模型可能会选择“获取表单状态”。为了提高模型选择函数的成功率，可以主动筛选传递给模型的可用函数。可以考虑使用 [semantic-router](https://github.com/aurelio-labs/semantic-router) 来实现这个目标。 **调用成功率** 函数调用成功率需要优化，尤其是使用某些支持函数调用的开源模型时，比如 MiniMax、ChatGLM3-6B、llama3 等。这些模型可能在应该调用函数时却没有调用，需要通过提示词优化来提升调用成功率。 参考以下统计表格 [composio.dev](https://composio.dev/blog/gpt-4-function-calling-example/)，可以看到不同手段的优化效果。 **在数智云产品中的应用** 通过引入 DeepChat + 大模型，数果智能研发的 AI 智慧助手现在能帮用户更方便地查询指标、保存单图和做简单的归因分析。这些功能让产品变得更智能、更好用。未来，我们计划添加更多实用的功能，让大家使用起来更加顺手，更符合日常工作需求。 **总结** 在这个数字时代，DeepChat 与大模型的结合，不仅仅是技术的革新，更是对用户体验的深刻理解。我们将在数智云产品中，不断利用先进的大模型技术，为我们的用户打造更为极致的产品体验。