10分钟在网站上增加一个AI助手

news2024/11/18 17:46:44

只需 10 分钟，为您的网站添加一个 AI 助手，以便全天候（7x24）回应客户咨询，提升用户体验、增强业务竞争力。

方案概览

2024-07-01_09-56-05

在网站中引入一个 AI 助手，只需 4 步：

  1. 创建大模型问答应用：我们将先通过百炼创建一个大模型应用，并获取调用大模型应用 API 的相关凭证。

  2. 搭建示例网站：然后我们将通过函数计算，来快速搭建一个网站，模拟您的企业官网或者其他站点。

  3. 引入 AI 助手：接着我们将通过修改几行代码，实现在网站中引入一个 AI 助手。

  4. 增加私有知识：最后可以通过准备一些私有知识，让 AI 助理能回答原本无法准确回答的问题，帮助您更好的应对客户咨询。

image.png

1. 创建大模型问答应用

首先我们可以通过创建一个百炼应用，来获取大模型的推理 API 服务，用于实现 AI 助手。

百炼提供的 新用户免费额度可以完全覆盖本教程所需资源消耗。额度消耗完后按 token 计费，相比自行部署大模型可以显著降低初期投入成本。

1.1 创建应用

  1. 进入百炼控制台的我的应用，创建应用。在对话框，选择智能体应用并创建。

    2024-08-30_15-21-59

  2. 在应用设置页面，模型选择通义千问-Plus，其他参数保持默认。

    您也可以选择输入一些 Prompt，比如设置一些人设以引导大模型更好的应对客户咨询。 

    你叫小助，可以帮助用户解答产品选购、使用等方面的问题。

    image

  3. 在页面右侧可以提问验证模型效果。不过您会发现，目前它还无法准确回答你们公司的商品信息。点击右上角的发布，我们将在后面的步骤中去解决这一问题。

    image.png

1.2 获取调用 API 所需的凭证

为了在后续通过 API 调用大模型应用的能力，我们需要获取一个百炼应用的API-KEY 和应用 ID：

  1. 返回我的应用页面，点击查看我的API-KEY，在弹出窗口中创建一个新API-KEY。

    image.png

  2. 在应用列表中可以查看所有百炼应用 ID。

    32

2. 搭建示例网站

在让 AI 助手能准确回答问题之前，我们可以先尝试快速将 AI 助手集成到网站中。

您可以通过我们提前准备好的应用模板，快速搭建一个空白的示例网站，用于模拟您的企业官网或者其他站点。详细步骤如下：

函数计算提供的 免费试用额度可以完全覆盖本教程所需资源消耗。额度消耗完后按量计费，对于本教程所涉及的 web 服务，只在有访问的情况下会产生费用。

2.1 创建应用

请打开我们提供的函数计算应用模板，参考下图选择直接部署、并填写前面获取到的百炼应用 ID 以及 API-KEY。

然后其他表单项保持默认，点击页面左下角的创建并部署默认环境，等待项目部署完成即可（预计耗时 1 分钟）。

这里需要填写百炼应用 ID 和 API-KEY，是因为我们预置的应用模板中包含了通过百炼应用调用大模型的代码，以便您在后续快速完成体验。

image.png

2.2 访问网站

应用部署完成后，您可以在应用详情的环境信息中找到示例网站的访问域名，点击即可查看，确认示例网站已经部署成功。

image.png

image.png

3. 为网站增加 AI 助手

在网站中增加 AI 助手非常简单，您只需要在网站的 html 文件中插入几行代码。

3.1 增加 AI 助手相关代码

示例工程中包含了被注释的引入 AI 助手代码，您需要找到并解除注释。详细操作步骤如下：

  1. 回到应用详情页，在环境详情的最底部找到函数资源，点击函数名称，进入函数详情页。

    image.png

  2. 进入函数详情页后，在代码视图中找到public/index.html文件，然后取消③所在位置的代码注释即可。

    2024-09-09_10-25-15

  3. 最后点击部署代码，等待部署完成即可。

3.2 验证网站上的 AI 助手

现在，您可以重新访问示例网站页面以查看最新效果。此时您会发现网站的右下角出现了 AI 助手图标

image.png

，点击即可唤起 AI 助手。

image.png

4. 为 AI 助手增加私有知识

通过前面的步骤，您已经拥有了一个可以和客户对话的 AI 助手。但是，如果想让 AI 助手像公司员工一样，更加精准且专业地回答与商品相关的问题，我们还需要为大模型应用配置知识库。

假设您在一家售卖智能手机的公司工作。您的网站上会有很多与智能手机相关的信息，如支持双卡双待、屏幕、电池容量、内存等信息。不同机型的详细配置清单参考：百炼系列手机产品介绍.docx。

4.1 配置知识库

接下来，我们可以尝试让大模型在面对客户问题时参考这份文档，以产出一个更准确的回答和建议。

  1. 上传文件：在百炼控制台的数据管理中点击导入数据，根据引导上传我们虚构的百炼系列手机产品介绍：

    根据您上传的文档大小，百炼需要一定时间解析，通常占用1~6分钟，请您耐心等待。

    image.png

  2. 建立索引：进入知识索引，根据引导创建一个新的知识库，并选择刚才上传的文件，其他参数保持默认即可。知识库将为上一步骤中准备的文档建立索引，以便后续大模型回答时检索参考。

    image

    image

    选择向量存储类型时，如果您希望集中存储、灵活管理多个应用的向量数据，可选择 ADB-PG。

    image

  3. 引用知识：完成知识库的创建后，可以返回我的应用进入到刚才创建的应用设置界面，打开知识检索增强开关、选择知识库，测试验证符合预期后点击发布。Prompt 中会被自动添加一段信息，以便大模型在后续回答时参考检索出来的信息。

    image

4.2 检验效果

有了参考知识，AI 助手就能准确回答关于您公司的商品的问题了。

image

总结

通过前面的学习，您已经能搭建一个大模型 RAG 应用，并且将其以 AI 助手的形式添加到网站中来应对客户咨询，过程仅需 0 元（免费试用额度内） 10 分钟。

应用于生产环境

在正式的将 AI 助手引入到您的生产环境之前，建议您了解如下信息：

前端代码

前面创建的网站 AI 助手，是基于NLUX（一个用于开发大模型对话机器人的前端库）开发的示例，功能还比较简单。

如果您对于 AI 助理有更多定制化的需求，如希望调整样式、支持历史会话管理等，可以参考 NLUX 的文档进行定制开发。

本文档的 AI 助理前端源代码从 web-chatbot-ui 仓库获取。

参考：定制前端组件的样式和内容

<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.15/index.css" />
<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.15/index.js"></script>
<script>
  window.CHATBOT_CONFIG = {
    endpoint: "/chat", // 可以替换为 https://{your-fc-http-trigger-domain}/chat
    displayByDefault: false, // 默认不展示 AI 助手聊天框
    aiChatOptions: { // aiChatOptions 中 options 会传递 aiChat 组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
      conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
        conversationStarters: [
          {prompt: '哪款手机续航最长？'},
          {prompt: '你们有哪些手机型号？'},
          {prompt: '有折叠屏手机吗?'},
        ]
      },
      displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
        height: 600,
      },
      personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
        assistant: {
          name: '你好，我是你的 AI 助手',
          // AI 助手的图标
          avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
          tagline: '您可以尝试点击下方的快捷入口开启体验！',
        }
      }
    },
    dataProcessor: {
      /**
       * 在向后端大模型应用发起请求前改写 Prompt。
       * 比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。
       * @param {string} prompt - 用户输入的 Prompt
       * @param {string}  - 改写后的 Prompt
       */
      rewritePrompt(prompt) {
        return prompt;
      }
    }
  };
</script>
<style>
  :root {
    /* webchat 工具栏的颜色 */
    --webchat-toolbar-background-color: #1464E4;
    /* webchat 工具栏文字和按钮的颜色 */
    --webchat-toolbar-text-color: #FFF;
  }
  /* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
  .webchat-container {
    z-index: 100;
    bottom: 10px;
    right: 10px;
  }
  /* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
  .webchat-bubble-tip {
    z-index: 99;
    bottom: 20px;
    right: 20px;
  }
</style>
服务端代码

前面创建的示例网站代码中，包含了一个调用大模型获取答案的接口POST /chat，具体实现代码在文件index.js中。

函数计算应用在没有访问时不产生任何费用，您完全可以保留此函数应用，在后续用作调用大模型的转发服务。

函数计算应用部署时附带的 **.devsapp.net 域名会在下发后 30 天内回收，且不支持 https 访问，只适合于测试验证。如果您希望在您的网站上直接调用函数计算中部署的POST /chat接口，建议使用函数计算 http 触发器中提供的域名，如：https://web-chat****.fcapp.run/chat。与此同时，建议您修改index.js中的 cors 配置，禁止其他站点对此接口的访问。

image

image

应用评测

建议在正式上线 AI 助手前，组织业务人员一起参与应用评测，确保大模型应用的回答效果符合预期。如果不符合预期，可以通过优化提示词、完善补充私有知识、调整文档切分策略等方法来改进回答效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2136431.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

prometheus监控k8s1.24以上版本pod实时数据指标

prometheus监控k8s1.24以上版本pod实时数据指标

8s组件本身提供组件自身运行的监控指标以及容器相关的监控指标。通过cAdvisor 是一个开源的分析容器资源使用率和性能特性的代理工具&#xff0c;集成到 Kubelet中&#xff0c;当Kubelet启动时会同时启动cAdvisor&#xff0c;且一个cAdvisor只监控一个Node节点的信息。cAdvisor…
阅读更多...
Transformer学习记录（6）：Vision Transformer

Transformer学习记录（6）：Vision Transformer

背景 Transformer模型最初是使用在NLP中&#xff0c;但近几年Transformer模型在图像上的使用越来越频繁&#xff0c;最新的模型也出现了很多基于Transfomer的&#xff0c;而其中经典的是Vision Transformer(ViT)&#xff0c;它是用于图像分类的&#xff0c;这里就以ViT-B/16这…
阅读更多...
【已解决】SpringBoot3项目整合Druid依赖：Druid监控页面404报错

【已解决】SpringBoot3项目整合Druid依赖：Druid监控页面404报错

文章标题 问题描述原因分析解决方案参考资料 问题描述 最近&#xff0c;笔者在SpringBoot3项目中整合Druid连接池时&#xff0c;偶然翻到一条介绍Druid监控的短视频&#xff0c;兴致盎然之下尝试设置了一下Druid监控。 But&#xff0c;按照视频中提供的yml参数对照设置&#x…
阅读更多...
试用过这么多ERP管理系统，还是这几款值得推荐！

试用过这么多ERP管理系统，还是这几款值得推荐！

已经考虑引入ERP系统却担心面临以下问题&#xff1f;ERP系统流程僵化难以调整&#xff1f;流程与实际业务脱节&#xff1f;培训不到位、技术支持不及时导致难以实现全员使用、共创&#xff1f;市面上的ERP系统众多不知道如何选择&#xff1f; 今天就根据2024最新市场动态&…
阅读更多...
C++开发基础之理解 CUDA 编译配置：`compute_XX` 和 `sm_XX` 的作用

C++开发基础之理解 CUDA 编译配置：`compute_XX` 和 `sm_XX` 的作用

前言 在 CUDA 编程中&#xff0c;确保代码能够在不同的 NVIDIA GPU 上高效运行是非常重要的。为了实现这一点&#xff0c;CUDA 编译器 (nvcc) 提供了多种配置选项&#xff0c;其中 compute_XX 和 sm_XX 是两个关键的编译选项。本文将深入探讨这两个选项的作用及其配置顺序&…
阅读更多...
什么是VHDX文件？

什么是VHDX文件？

VHDX文件是Docker环境中使用的一种虚拟硬盘文件格式&#xff0c;专门用于存储Docker容器 的镜像和数据。这种文件格式&#xff0c;VHDX&#xff0c;代表Virtual Hard Disk Extended&#xff0c;是一种用于虚拟化环境的硬盘文件格式&#xff0c;支持动态扩展、快照、加密等功能&…
阅读更多...
53.【C语言】 字符函数和字符串函数(strcmp函数)

53.【C语言】 字符函数和字符串函数(strcmp函数)

7.strcmp函数 *简单使用 cplusplus的介绍 点我跳转 strcmp:string compare 字符串比较 具体讲解见此文 点我跳转 *例题 求下列代码的执行结果 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <string.h> int main() {char arr1[20] { &quo…
阅读更多...
MoE 混合专家模型

MoE 混合专家模型

MoE特点 做了特征增广&#xff1b;门控机制保证了特征增广的同时模型不会过拟合。 大模型中会使用到MoE技术。 简单实现 实现一个简单的linear混合专家模型。这里每个专家是一个Linear。 MoE简单理解 import torch import torch.nn as nn import torch.nn.functional as F#…
阅读更多...
军用软件安全性可靠性设计与编码规范技术培训

军用软件安全性可靠性设计与编码规范技术培训

​课程介绍&#xff1a; 随着我国武器装备数字化、智能化水平不断提高&#xff0c;软件在武器装备中的作用越来越关键。由于软件能以人所不能比的速度可靠地完成关键控制任务&#xff0c;几乎在每个重要系统中都由计算机系统来进行控制&#xff0c;软件在运行和控制危险以及在…
阅读更多...
一个软件分发和下载的网站源码，带多套模板

一个软件分发和下载的网站源码，带多套模板

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程 代码下载&#xff1a;百度网盘
阅读更多...
Unity生命周期_一些容易忽略的点＞重复的生命周期代码会执行子类的。

Unity生命周期_一些容易忽略的点＞重复的生命周期代码会执行子类的。

图 官方的图&#xff1a;https://docs.unity.cn/cn/2019.4/Manual/ExecutionOrder.html 忽略点 父类和子类有相同的生命周期 问题描述&#xff1a; 当父类和子类都写了Awake &#xff0c;会执行子类的Awake &#xff0c;而不会执行父类的Awake using UnityEngine;public …
阅读更多...
【Ubuntu】Ubuntu双网卡配置 实现内外网互不影响同时可用

【Ubuntu】Ubuntu双网卡配置 实现内外网互不影响同时可用

【Ubuntu】Ubuntu双网卡配置 实现内外网互不影响同时可用 建议前提配置用到的命令参考文献&#xff1a; 建议 本文仅作个人记录&#xff0c;请勿完全照搬&#xff0c;建议直接看此视频&#xff0c;按作者的步骤进行配置 linux配置内外网&#xff08;ubuntu举例&#xff09;&am…
阅读更多...
c++面试-语法糖(一)

c++面试-语法糖(一)

c面试-语法糖(一) 1、const关键字的作用&#xff1f;(变量&#xff0c;参数&#xff0c;返回值) 定义常量值&#xff1a;const 可以用于定义常量变量&#xff0c;其值在初始化后不能被修改。 const int MAX_SIZE 100;修饰指针&#xff1a;const 可以修饰指针&#xff0c;表示…
阅读更多...
第158天：安全开发-Python-Socket编程反弹Shell分离免杀端口探针域名爆破

第158天：安全开发-Python-Socket编程反弹Shell分离免杀端口探针域名爆破

前置知识 使用 socket 模块 1. 导入模块 首先&#xff0c;你需要导入 Python 的 socket 模块。 import socket 2. 创建套接字 使用 socket.socket() 函数创建一个新的套接字。这个函数可以接收两个参数&#xff1a;地址族和套接字类型。 地址族&#xff08;Address Family&…
阅读更多...
【鸿蒙】HarmonyOS NEXT星河入门到实战9-组件化开发进阶应用状态管理

【鸿蒙】HarmonyOS NEXT星河入门到实战9-组件化开发进阶应用状态管理

目录 1.1 创建页面 1.2 页面跳转和后退 1.3 页面栈 1.4 路由模式 1.5 路由传参 2、生命周期 3、Stage模型 3.1 目录概览 3.2 app.json5应用配置 3.3 module.json5模型配置 3.4 UIAbility组件 3.5 UIAbility的添加和设置启动 3.6 UIAbility组件的生命周期 3.7 拉起另…
阅读更多...
LSS如何创建视锥

LSS如何创建视锥

先创建图像(u,v,d)坐标系下视锥 再根据相机内外参，将图像坐标系下uvd视锥x6，再调整到世界坐标系下XYZ视锥 1 完整代码 de
阅读更多...
KOC营销崛起：TikTok带货新力量，助力跨境电商发展

KOC营销崛起：TikTok带货新力量，助力跨境电商发展

近年来KOC这一新的营销角色悄然崛起&#xff0c;成为了跨境电商品牌推广的重要新力量。KOC虽非传统意义上的大网红&#xff0c;但他们凭借真实、接地气的分享&#xff0c;逐渐获得了大量的关注和信任。本文Nox聚星将和大家探讨KOC营销的崛起&#xff0c;分析其优势。 一、KOC营…
阅读更多...
Java多线程编程-基础篇

Java多线程编程-基础篇

多线程相关的概念 并发 并发是指在同一时间段内&#xff0c;两个或多个任务在同一个处理器上交替执行&#xff0c;使得在宏观上看起来像是同时进行。并发是通过快速切换任务来模拟同时执行的效果&#xff0c;实际上在任何一个时刻点上只有一个任务在执行。 也就是说&#xff0…
阅读更多...
计算机毕业设计 智慧物业服务系统的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 智慧物业服务系统的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…
阅读更多...
数字IC设计\FPGA 职位经典笔试面试--整理

数字IC设计\FPGA 职位经典笔试面试--整理

注&#xff1a; 资料都是基于网上一些博客分享和自己学习整理而成的 1&#xff1a;什么是同步逻辑和异步逻辑&#xff1f; 同步逻辑是时钟之间有固定的因果关系。异步逻辑是各时钟之间没有固定的因果关系。 同步时序 逻辑电路的特点&#xff1a;各触发器的时钟端全部连接在一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023