详解基于百炼平台及函数计算快速上线网页AI助手

news2024/9/20 21:38:52

引言

在当今这个信息爆炸的时代，用户对于在线服务的需求越来越趋向于即时性和个性化。无论是寻找产品信息、解决问题还是寻求建议，人们都期望能够获得即时反馈。这对企业来说既是挑战也是机遇——如何在海量信息中脱颖而出，提供高效且贴心的服务？答案之一就是利用现在炙手可热的AI技术。

阿里云百炼平台为企业提供了一种快速、便捷的方式来实现这一目标。通过集成百炼平台上的 AI 助手，企业可以在短短十分钟内为自己的网站增添一个智能客服系统，从而显著提升用户体验，同时降低人工客服的成本与压力。

本文将详细介绍如何使用阿里云百炼平台在您的网站上部署一个功能完善的 AI 助手。我们将从创建项目开始，一步步指导您完成配置，并最终让 AI 助手上线运行。无论您是技术背景深厚的专业人士，还是对此领域有所了解的产品经理，本指南都将帮助您轻松掌握这一过程。

此处附上学习地址，欢迎朋友们多交流探讨！

阿里云百炼实训营

百炼控制台

另附笔者之前的文章，里面也是较为详细的阐述了百炼平台的基础使用，可供大家学习或参考：精铸智刃·“百炼”成钢——深度探索阿里云百炼大模型开发平台

基于阿里云百炼平台及函数计算快速上线一个网页AI助手

本文的产品方案地址如下：https://www.aliyun.com/solution/tech-solution/add-an-ai-assistant-to-your-website-in-10-minutes 亲测整个流程体验下来大约耗时10分钟。

image.png

主要分为以下四个步骤：

image.png

创建大模型应用

首先需要通过百炼创建一个大模型应用，并获取调用大模型应用 API 的相关凭证，如果有私有模型也可直接调用私有模型的接口，此处还是以百炼平台的大模型应用为例，因为比较方便。

进入百炼平台，点击【我的应用】，选择【创建应用】。

image.png

在此处任意选择一个即可，但是注意，不同的模型计价不同：

image.png

具体的计价表周周这里也整理出来了，如下图所示：

image.png

其中，通义千问-Max是通义千问2.5系列千亿级别超大规模语言模型，支持中文、英文等不同语言输入，也是这几个里面参数量最大的。

不过为了节省，周周还是使用了价格稍便宜的通义千问-Plus。

image.png

这里大家也可以看到，除了模型选择外，在参数设置中还有温度系数、最长回复长度和携带上下文轮数三个可控参数。

  • 温度系数：调控生成的多样性。

  • 最长回复长度：模型生成的长度限制，不包含prompt。允许的最大长度因模型不同有所改变。

  • 携带上下文轮数：设置输入模型的最大历史对话轮数，轮数越多，对话相关性越强。

后面两个是比较好理解的，这里着重说明一下温度系数的概念。

温度系数定义

温度系数是一个介于0到正无穷之间的数值，通常在实际应用中设定在一个较小的范围内，比如0到2之间。它是基于统计物理学中的概念，在机器学习中被用来模拟系统的随机性。

温度系数的作用

  • 确定性 vs 随机性：

  • 当温度系数接近0时，模型倾向于选择概率最高的下一个词，这使得生成的文本更为确定和保守，但也可能导致重复或缺乏创意的结果。

  • 当温度系数接近1时，模型的选择接近于均匀分布，这意味着模型将根据所有候选词汇的概率分布来做出选择，这增加了生成文本的多样性和随机性。

  • 当温度系数大于1时，模型的选择变得更加随机，甚至可能选择一些概率较低的词汇，这可能会导致生成的文本更具创新性，但也可能不太连贯。

  • 平衡探索与利用：

温度系数可以帮助平衡模型在探索新文本（尝试不同的生成路径）与利用已知高概率路径之间的权衡。

那么不同的场景到底适合什么样的温度呢？一般而言，低温度适合于需要高度准确和一致性的应用场景，如代码生成、专业文档编写等；中等温度适用于大多数通用场景，可以产生既连贯又有一定创造性的文本；高温度适用于需要大量创意和多样性的场景，如故事创作、诗歌生成等。

这里针对上面场景举一个简单的例子。

假设模型预测下一个词的概率分布如下：

image.png

当我温度系数=0.1，几乎总是选择"猫"，因为它是概率最高的选项。

当我温度系数=1.0，按照原始概率分布进行选择，"猫"仍然是最可能的选项，但"狗"和"鱼"也会被选择。

当我温度系数=2.0，选择变得更为随机，即使是概率较低的词汇也有可能被选中。

对照上面的例子，相信也很容易明白，我们现在的场景需要一定的专用性和通用性，但是专用性要求更高，所以温度系数必定选择在01之间，这里建议调整为0.40.6的这个区间，具体情况还需根据反复调试来判断。

image.png

完成后点击右上角【发布应用】。

image.png

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

image.png
image.png

回到应用列表，可以查看所有百炼应用 ID。

image.png

搭建示例网站

进入函数计算界面，选择准备好的应用模板，快速搭建一个空白的示例网站。

点击【直接部署】，填写前面获取到的百炼应用 ID 以及 API-KEY。

image.png

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

image.png

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

image.png

image.png

为网站增加 AI 助手

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

image.png

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

image.png

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

image.png

重新访问示例网站页面以查看最新效果。

image.png

为 AI 助手增加私有知识

在接入成功后，你会发现虽然能够调用模型能力，但是对于本地的知识却完全不了解，下面，我们可以添加一些公司的相关产品资料，工作文档等。

回到百炼控制台的【数据管理】中点击导入数据，根据引导上传我私有知识库：

image.png
image.png

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

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

image.png
image.png
image.png

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

image.png

我们检验一下效果（此处我使用的自己的知识库）：

image.png

应用于生产环境

该网页AI助手的前端是基于NLUX（一个用于开发大模型对话机器人的前端库）开发的，如果您对于 AI 助理有更多定制化的需求，如希望调整样式、支持历史会话管理等，可以参考 NLUX 的文档进行定制开发。

前端示例代码 

<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.14/index.css" />
<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.14/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.png
image.png

总结

在这个数字化转型加速推进的时代，利用AI技术提升在线服务的质量已成为企业成功的关键因素之一。阿里云百炼平台不仅简化了AI助手的部署流程，还帮助企业实现了服务的即时性和个性化，从而更好地满足客户需求。

通过遵循本文档中的步骤，您已经能够快速地在自己的网站上部署一个功能全面的AI助手。这不仅能显著改善用户体验，还能有效减少客户服务部门的工作负担，使企业能够在激烈的市场竞争中脱颖而出。

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

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

相关文章

【C语言】fseek、ftell以及rewind函数（随机文件读写）

【C语言】fseek、ftell以及rewind函数（随机文件读写）

文章目录 前言1. fseek1.1 fseek函数原型1.2 fseek函数的形式参数1.3 fseek实例演示 2. ftell2.1 ftell函数原型2.2 ftell函数的实例演示 3. rewind3.1 rewind函数原型3.2 rewind函数实例演示 前言 在之前&#xff0c;我讲过文件的顺序读写。但是我们可不可以随机读写文件呢&a…
阅读更多...
PCL从理解到应用【09】 点云特征 | 关键点提取 | 方法汇总

PCL从理解到应用【09】 点云特征 | 关键点提取 | 方法汇总

前言 在PCL中&#xff0c;有多种方法和函数可以用来提取点云特征&#xff0c;本文介绍关键点提取。 提取点云关键点&#xff0c;本文介绍的方法包括&#xff1a;SIFT、Harris、NARF、ISS和SUSAN。 Harris 提取点云关键点&#xff0c;效果如下图所示&#xff1a; 白色点是原始…
阅读更多...
MATLAB预测模型（2）

MATLAB预测模型（2）

一、前言 在MATLAB中&#xff0c;进行线性回归、非线性回归以及统计回归预测可以通过多种方法实现&#xff0c;包括使用内置函数和自定义函数。下面&#xff0c;我将分别给出线性回归、非线性回归和基于统计回归进行预测的基本示例代码。 二、实现 1. 线性回归 MATLAB中的poly…
阅读更多...
机器人主板维修｜ABB机械手主板元器件故障

机器人主板维修｜ABB机械手主板元器件故障

【ABB机器人电路板故障原因诊断】 针对上述故障现象&#xff0c;我们需要对ABB机器人IO板进行详细的故障诊断。以下是一些可能的故障原因&#xff1a; 1. 元器件老化或损坏&#xff1a;ABB机械手安全面板上的元器件在长期使用过程中可能出现老化、损坏或接触不良等问题&#xf…
阅读更多...
PyCharm运行Python的Flask项目时，愚蠢的执行了默认Flask框架默认配置处理

PyCharm运行Python的Flask项目时，愚蠢的执行了默认Flask框架默认配置处理

一&#xff1a;问题描述 因为上半年开始学习完python后&#xff0c;开始转人工智能方向的工作内容&#xff0c;所以这半年几乎在攻关python以及人工智能方向的技能&#xff0c;但是我有喜欢用Java的一些开发的爽点。 最近整Flask的框架时发现了一个问题&#xff0c;我就在Fla…
阅读更多...
【数据结构算法经典题目刨析（c语言）】反转链表（图文详解）

【数据结构算法经典题目刨析（c语言）】反转链表（图文详解）

&#x1f493; 博客主页&#xff1a;C-SDN花园GGbond ⏩ 文章专栏&#xff1a;数据结构经典题目刨析(c语言) 目录 一、题目描述 二、思路分析 三、代码实现 一、题目描述&#xff1a; 二、思路分析 &#xff1a; 通过三个指针n1,n2,n3来实现链表的反转 1.首先初始化 n1为…
阅读更多...
IO流相关

IO流相关

1. IO概述 Java中I/O操作主要是指使用java.io包下的内容&#xff0c;进行输入、输出操作。输入也叫做读取数据&#xff0c;输出也叫做作写出数据。 1.1 IO的分类 根据数据的流向分为&#xff1a;输入流和输出流。 输入流 &#xff1a;把数据从其他设备上读取到内存中的流。 …
阅读更多...
力扣SQL50 好友申请 II ：谁有最多的好友 UNION ALL

力扣SQL50 好友申请 II ：谁有最多的好友 UNION ALL

Problem: 602. 好友申请 II &#xff1a;谁有最多的好友 &#x1f468;‍&#x1f3eb; 参考题解 功能概述&#xff1a; 该查询统计 RequestAccepted 表中用户&#xff08;作为请求方或接受方&#xff09;出现的总次数&#xff0c;并找出出现次数最多的用户ID。 执行步骤&a…
阅读更多...
PHP语言的学习(ctfshow中web入门web93~web104)

PHP语言的学习(ctfshow中web入门web93~web104)

PHP语言基础知识&#xff08;超详细&#xff09;_php开发知识-CSDN博客 PHP特性之CTF中常见的PHP绕过-CSDN博客 浅谈PHP代码执行中出现过滤限制的绕过执行方法_php过滤绕过-CSDN博客 php代码审计(适合小白入门)_php审计入门-CSDN博客 什么是PHP&#xff1f; PHP 是一种脚本…
阅读更多...
File 类练习

File 类练习

练习1&#xff1a;在当前模块下的aaa文件夹中创建一个a.txt文件。 分析&#xff1a;当前模块下是没有aaa文件夹的&#xff0c;这里我是手动在当前模块下创建了aaa文件夹&#xff0c;然后在指定a.txt的路径&#xff0c;再createNewFile()的。 public class File1 {public stat…
阅读更多...
一键重装系统哪个软件好用_2024年一键重装系统工具排行榜

一键重装系统哪个软件好用_2024年一键重装系统工具排行榜

一键重装系统哪个软件好&#xff1f;现在市面上重装软件五花八门&#xff0c;有些网友不知道哪些好用&#xff0c;下面小编就为大家整理几款不错的电脑一键重新系统软件供大家选择&#xff0c;现整理2024年一键重装系统软件排行。 一键重装系统哪个软件好用&#xff1f; 一键重…
阅读更多...
如何系统地自学Python？AI的回答让你少走三年弯路！

如何系统地自学Python？AI的回答让你少走三年弯路！

系统地自学Python是一个循序渐进的过程&#xff0c;需要掌握基础知识、进阶技能以及实践项目。以下是一个详细的自学Python的指南&#xff1a; 一、学习准备<末尾有AI整理的学习资料、电子书籍、实战项目> 了解Python&#xff1a; Python是一种流行的编程语言&#xff…
阅读更多...
入门 PyQt6 看过来（案例）22~ 图表案例

入门 PyQt6 看过来（案例）22~ 图表案例

​ ​ def showPie(self):"""绘制饼状图"""# &#xff08;1&#xff09;创建图表和视图chart QChart()chart.setTitle(中国高等教育普及率)chart.legend().setAlignment(Qt.AlignmentFlag.AlignLeft)chartView QChartView(self) # 必须有sel…
阅读更多...
CookieMaker工作室合作开发C++项目十一：拟态病毒

CookieMaker工作室合作开发C++项目十一：拟态病毒

&#xff08;注&#xff1a;本文章使用了“无标题技术”&#xff09; 一天&#xff0c;我和几个同事&#xff0c;平台出了点BUG&#xff0c;居然给我刷出了千年杀&#xff0c;同事看得瑕疵欲裂&#xff0c;发誓要将我挫骨扬灰—— &#xff08;游戏入口&#xff1a;和平精英31.…
阅读更多...
iOS技术之安装nvmnode完整步骤

iOS技术之安装nvmnode完整步骤

1.前提 首先电脑里得有brew、git、vscode这些工具, 当然了要用nvm&node肯定是需要这些基本开发工具 2.删除node环境 如果mac里没有安装过node、npm可以无视直接去 3 安装nvm。 为了保证安装nvm能够成功管理node&#xff0c;必须把电脑里之前安装的node全部清理&#xf…
阅读更多...
微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法

微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法

配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法 overflow_title{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; }只需要加上这两行css代码即可 word-break:break-all;…
阅读更多...
Spring泛型的依赖注入

Spring泛型的依赖注入

泛型依赖注入就是允许我们在使用spring进行依赖注入的同时&#xff0c;利用泛型的优点对代码进行精简&#xff0c;将可重复使用的代码全部放到一个类之中&#xff0c;方便以后的维护和修改。同时在不增加代码的情况下增加代码的复用性。
阅读更多...
Go切片深入学习

Go切片深入学习

Go切片专项学习 go切片扩容机制 go1.18 之前&#xff1a; 1.如果期望容量大于当前容量的两倍就会使用期望容量&#xff1b; 2.如果当前切片的长度小于 1024 就会将容量翻倍&#xff1b; 3.如果当前切片的长度大于 1024 就会每次增加 25% 的容量&#xff0c;直到新容量大于期…
阅读更多...
基于AI大模型的数据治理

基于AI大模型的数据治理

— 01— 什么是大模型&#xff1f; 大模型是指具有数千万甚至数亿参数的深度学习模型。近年来&#xff0c;随着计算机技术和大数据的快速发展&#xff0c;深度学习在各个领域取得了显著的成果&#xff0c;如自然语言处理&#xff0c;图片生成&#xff0c;工业数字化等。为了提…
阅读更多...
如何快速下载huggingface大模型

如何快速下载huggingface大模型

Stackoverflow 上有个AI开发入门的最常见问题 How to download model from huggingface?&#xff0c;回答五花八门&#xff0c;可见下载 huggingface 模型的方法是十分多样的。 其实网络快、稳的话&#xff0c;随便哪种方法都挺好&#xff0c;然而结合国内的网络环境&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023