基础AI助手创建与网站集成

更新时间:

在阿里云上只需10分钟即可为您的网站添加一个可高度自定义的AI助手,以便全天候(7x24小时)回应专属知识问答。

实验简介

在阿里云上只需10分钟即可为您的网站添加一个可高度自定义的AI助手,以便全天候(7x24小时)回应专属知识问答。

实验思路

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

  2. 创建AI助手:我们将通过Appflow创建A助手,并对其进行配置。

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

  4. 增加私有知识:最后添加私有知识,让AI助手准确回答专业问题。

实验室资源方式简介

进入实操前,请确保阿里云账号满足以下条件:

  • 个人账号资源

    • 使用您个人的云资源进行操作,资源归属于个人。

    • 所有实验操作将保留至您的账号,请谨慎操作。

    • 平台仅提供手册参考,不会对资源做任何操作。

  • 确保已完成云工开物300元代金券领取。

  • 已通过实名认证且账户余额≥0元。

  • 本实验费用以实际使用的token量为准,以通义千问-Plus为例,输入 0.0008元/千tokens,输出0.002元/千tokens。

  • 本实验产生的费用优先使用优惠券。如果您调整了资源规格、使用时长,或执行了本方案以外的操作,可能导致费用发生变化,请以控制台显示的实际价格和最终账单为准。

  • 实操结束后,如通过云工开物代金券购买的产品,无需进行注销;如注销产品,代金券不会返还。

  • 新注册阿里云百炼的用户,通义系列模型提供模型的免费额度,不同模型的免费额度不同,请在使用前,先阅读产品文档确认模型的免费额度,或在使用前,登录阿里云百炼-模型广场-模型卡片详情,查看具体模型的免费额度。注意在使用过程中的token消耗。模型列表与价格 只有开通阿里云百炼服务后才能体验模型的免费额度。

领取专属权益及开通资源

第一步:在开始实验之前,请先点击右侧屏幕的“进入实操”再进行后续操作

image

第二步:本次实验需要您通过领取阿里云云工开物学生专属300元抵扣券兑换本次实操的云资源,如未领取请先点击领取。(若已领取请跳过)

image

重要

实验产生的费用优先使用优惠券,优惠券使用完毕后需您自行承担。

学生认证

实验步骤

阿里云百炼平台提供高效AI助手部署能力,用户可通过其预训练大模型(如通义系列)快速构建智能交互服务。开发者仅需调用标准化API接口,将自然语言处理、意图识别等能力无缝集成至网页,无需复杂训练或底层开发。部署后,AI助手可实时响应用户咨询,支持多轮对话、数据查询及个性化推荐,适用于电商导购、教育答疑等场景,实现零代码智能化升级,显著提升用户体验与运营效率。在阿里云上只需10分钟即可为您的网站添加一个AI助手,可以全天候(7x24)回应客户咨询,提升用户体验、增强业务竞争力。现在跟随我们,仅用4步就可以在网站中引入一个AI助手。

一、创建大模型问答应用

  • 若之前未开通过阿里云百炼服务(若已开通请跳过此步)

    • 1、前往阿里云百炼控制台在弹窗阅读服务协议后点击【同意】

      61055901f39eb444552ad15b35aa0712

    • 2、登录后,在控制台顶端通知信息处点击【立即开通】

      a4b4428a230cfa942651482a7e6d08d4

    • 3、阅读并勾选服务协议,然后单击【确认开通】

      92bedfb0be3045b7a1788a3025a92a4f

  • 若之前已开通过阿里云百炼服务:

    • 1、直接点击前往阿里云百炼控制台——应用管理

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

    • 2、创建智能体

      进入百炼控制台的应用管理页面,点击右上角【创建应用】

      image

      选择【智能体应用】,点击【立即创建】

      image

    • 3、智能体应用设置

      • 智能体名称:修改为网页AI助手

      • 模型选择:通义千问-Plus

      • 其他参数保持默认,同时也可以选择输入一些提示词,比如设置一些人设以引导大模型更好的应对客户咨询。

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

      image.png

    • 4、问答验证

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

      image.png

    • 5、 获取API-KEY 和应用 ID

      为了在后续通过 API 调用大模型应用的能力,我们需要获取一个百炼应用的 API-KEY 和应用 ID,并保存到本地用于后续配置。

      • 应用 ID:【应用】——【应用管理】——应用列表中可以查看所有百炼应用 ID

        image

      • API-KEY :在左侧导航栏点击【密钥管理】——【API-key】——【创建我的API-KEY】,在弹出窗口中创建一个新 API-KEY。

        image

二、创建AI助手

  1. 登录AppFlow控制台

    • 可以直接点击进入AppFlow控制台

    • 也可以通过以下方式进入:

      • 在阿里云官网产品页面搜索计算巢服务

        image

      • 点击【管理控制台】

        image

      • 进入后搜索【AppFlow】,点击【查看详情】

        image

      • 点击【立即访问AppFlow】

        image

      • 进入到AppFlow控制台

        image

  2. 创建模型服务AI助手

    • 在左侧导航栏中选择【模型服务AI助手】,点击【创建AI助手】

      image

    • 设置基本信息

      image.png

    • 点击【提交】,创建成功

      image

  3. 导入模型

    • 点击【导入模型】

      image

    • 选择阿里云百炼作为模型服务平台并点击【确定】,您也可以根据自身业务需求选择其他平台作为模型服务提供平台。

      image

    • 跳出连接凭证弹窗,点击选项,点击【添加新凭证】

      image

    • 输入凭证名称与先前获取的调用所需的API-KEY,以便AppFlow进行后续凭证认证

      image

    • 回到选择连接凭证弹窗,点击刷新按钮,点击下拉选项,选择到刚才创建的凭证

      image

    • 点击【下一步】

      image

    • 输入先前获取的调用所需的应用ID后点击确定,将先前创建的百炼大模型应用与AI助手进行关联。其他参数保持默认,之后点击【保存】

      image

    • 导入配置成功

      image

  4. web页面集成配置

    • 点击【集成】——【web页面集成】

      image

    • 页面中点击【创建集成】

      image

    • 输入集成名称后点击【确定】进入详情配置页面

      image

    • 对照右方可视化界面,您可针对集成效果进行个性化修改,如字体颜色、背景颜色、嵌入界面大小、头像图标、预置问题等。完成配置后点击提交按钮进行保存

      image.png

三、搭建示例网站

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

    为了能够快速体验 AI 助手的嵌入效果,可以搭建一个完整的示例网站(包括临时访问域名等),我们提供了基于函数计算 FC 的一键部署模板。通过此方式,您无需手动配置环境,即可体验一个具备 AI 助手能力的可访问网站。

  2. 点击链接并登录账号后选择直接部署,滑动到页面下方点击【创建并部署默认环境】

    image

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

    image

  4. 示例代码中包含了被注释的引入 AI 助手代码与说明,您需要找到您的专属悬浮挂件部署脚本代码并粘贴于注释下方。回到AI助手Web集成页面,在最底部找到登录配置,点击匿名方式,复制悬浮挂件部署脚本。

    image

  5. 在环境详情页底部点击函数名称进入函数详情。在代码编辑器中切换至 index.html,根据文件内的注释提示,将悬浮挂件部署脚本粘贴到指定位置。

    image.png

    image

  6. 重新运行HTML文件或代码视图中的【部署代码】按钮并重新访问域名,即可看到增加了AI助手的网页效果。

    image.png

  7. 现在,您可以重新访问示例网站页面以查看最新效果。此时您会发现网站的右下角出现了 AI 助手图标image,点击即可唤起 AI 助手。

    image.png

四、增加私有知识

  1. 最后可以通过准备一些私有知识,让 AI 助手能回答原本无法准确回答的问题,帮助客户更好地应对客户咨询。通过前面的步骤,在网页上已经拥有了一个可以和客户对话的 AI 助手。但是,如果想让 AI 助手像公司员工一样,更加精准且专业地回答与商品相关的问题,我们还需要为大模型应用配置知识库。

    场景假设:假设您在一家售卖智能手机的公司工作。您的网站上会有很多与智能手机相关的信息,如支持双卡双待、屏幕、电池容量、内存等信息。

    知识库参考百炼系列手机产品介绍.docx,点击下载知识库文件。

  2. 在百炼控制台点击【应用数据】——【非结构化数据】——【导入数据】,上传我们虚构的百炼系列手机产品介绍。

    image.png

  3. 导入方式选择【本地上传】,文档识别选择【文档智能解析】,之后点击拖拽上传之前准备好的百炼系列手机产品介绍,最后点击【确认】

    image.png

    请等待知识库文件状态从“待解析”变为“导入成功”,确保成功上传。

    image

  4. 点击【知识库】—创建知识库】

    image.png

  5. 填写知识库名称和描述,点击【下一步】,选择刚才上传的文件

    image.png

  6. 其他参数保持默认即可,数据处理页面中按需勾选想要的功能配置,最后点击【导入完成】。后续大模型回答时可以检索参考知识库中的文档。

    image.png

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

    image

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

    image.png

  9. 可以再次发布智能体,回到网页示例页面与网页AI助手对话,您的AI小助手将为您生成专属推荐!

    image

实验资源释放

为避免不必要的扣费,请您实验结束后务必按步骤进行实验资源释放!!

  1. 实验结束后,阿里云百炼账号无需注销,无资源释放。

  2. 删除函数FC应用

    • 函数FC控制台中找到刚才创建的应用,并点击【删除应用】

      image

    • 勾选并点击【删除应用与所选资源】

      image

    • 提示删除完成后,请再次检查是否删除成功

      image

  3. 删除AppFlow

    • AppFlow控制台中找到刚才创建的AI助手,并点击【删除】

      image

    • 点击【确认删除】

      image

    • 提示删除完成后,请再次检查是否删除成功

      image

背景知识

本场景主要涉及产品:阿里云百炼

模型token费用:请查看模型列表:模型列表与价格

登录阿里云百炼-模型广场-对应模型卡片查看详情,可以查看模型的免费额度,也可以关注系统管理-系统工具中的调用统计。

image

image

关闭实验

  • 在完成实验后,点击 结束实操

    image

  • 点击 取消 回到实验页面,点击 确定 跳转实验评分

    image

  • 请为本次实验评分,并给出您的建议,点击 确认,结束本次实验

    image