为Web项目添加AI助手,原来如此简单【华为开发者空间】

举报
叶一一 发表于 2024/11/28 20:03:22 2024/11/28
【摘要】 背景右下角什么时候多了AI助手最近我在浏览常用的网站的时候,发现右下角不知道什么时候增加了一个AI助手。之前,想要使用AI助手辅助工作,还需要通过专门的入口进入与AI助手聊天的界面。而现在,AI助手就出现在我浏览的页面的某个位置(一般是右下角),我在浏览页面的过程中,随时可以打开它,与它建立一系列的对话,获取自己想要的答案。于是,我挨个体验了一下不同网站上的AI助手,发现无论是智能程度还是反...

背景

右下角什么时候多了AI助手

最近我在浏览常用的网站的时候,发现右下角不知道什么时候增加了一个AI助手。

之前,想要使用AI助手辅助工作,还需要通过专门的入口进入与AI助手聊天的界面。而现在,AI助手就出现在我浏览的页面的某个位置(一般是右下角),我在浏览页面的过程中,随时可以打开它,与它建立一系列的对话,获取自己想要的答案。

于是,我挨个体验了一下不同网站上的AI助手,发现无论是智能程度还是反应速度,都非常棒。不过,不同网站的AI助手提供的服务能力不同。技术社区侧重对技术文章的总结、代码解读和实现方案的优化建议等。云服务则侧重提供产品介绍和解决方案。还有部分网站的AI助手需要介绍SVIP特权才能使用。

这次的体验,给我很直观的感受是,智能化、个性化的服务,会让用户有一个很棒的体验。

于是,我有了一个想法,既然能提升用户体验,何不再我们的网站项目中试试呢?

自己造轮子OR解决方案

显然,想要从无到有开发一个AI助手,成本应该不低。

一般这种情况,我会优先考虑开源项目。而作为华为云的活跃用户,我也是第一时间想到在华为云找相关的解决方案。

果然不出我所料,华为云作为优秀的云服务厂商,提供了云上开发的服务能力——

华为开发者空间

读完华为开发者空间的图解,又查看了一遍我开通的开发者空间上的功能,我发现华为开发者空间提供的能力非常强大。

华为开发者空间

一分钟了解华为开发者空间

华为开发者空间,是为全球开发者打造的专属开发者空间,致力于为每个开发者提供一台云主机、一套开发工具和云上存储空间,汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等各项根技术的开发工具资源,并提供配套案例指导开发者从开发编码到应用调测,基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。

华为开发者空间为广大开发者提供的一站式开发者服务平台,为开发者提供全方位的技术支持和服务,帮助开发者更高效地开发和部署应用。在华为开发者空间,开发者可以享受到丰富的开发者工具、开发者社区、技术文档、培训课程、技术支持等服务,帮助开发者快速构建高质量的应用。同时,华为开发者空间还提供了多种云服务,如云服务器、云数据库、云存储等,为开发者提供一站式的云计算解决方案。

01.jpg

个人电脑开发和开发者空间云主机开发的区别

很久之前,我在接触虚拟机的时候,就发现了类似的问题。尽管个人电脑安装了各种需要的运行环境,可以满足日常的工作需要。

但是,当我需要某个特殊版本的语言时,个人电脑的不足之处便展现出来了。无论是部署还是运行命令都变得复杂无比。

所以,自动化部署的云主机,很好的弥补了个人电脑的不足。

02.jpg

为什么选择华为开发者空间?

为什么不呢?

1、与其花费一整天搞定部署,不如选择开箱即用的华为开发者空间

作为云上开发桌面,开发者云主机预置预装华为优质开发工具和场景化资源池,支持:

  • Web连接访问
  • 开发桌面主机规格自定义
  • 开发桌面操作系统自定义

2、与其忙忙碌碌的下载一系列的工具插件,不如选择内置了开发工具集合的华为开发者空间

以华为云CodeArts IDE为核心的开发工具集合,支持:

  • CodeArts IDE开发环境预置
  • 开发者使用CodeArts IDE免登(linux版本)
  • 多语言开发及代码助手

3、与其花费大量时间逐个学习各类沙箱,不如选择预置场景化沙箱环境的华为开发者空间

华为开发者空间预置华为云、鲲鹏、昇腾、鸿蒙等场景化沙箱环境,支持:

  • 分钟级创建及恢复沙盒环境
  • 应用一键部署至沙盒环境
  • 环境配置模板化管理保存

4、与其担心数据丢失的风险,不如选择支持数据云上保存的华为开发者空间

为开发者提供的云上存储空间,开发者可进行关键资产保存和中转,支持:

  • 开发者云主机配置数据留存
  • 支持开发者文件保存和内容中转
  • 开发者案例知识和学习内容收藏

基于云主机为Web项目添加AI助手

准备工作

1、免费领取云主机

实验前,确定自己是否已经领取了云主机。

如果还没有云主机,可点击链接,根据领取指南进行操作。

开始实验

步骤1:创建智能问答机器人

1、在浏览器中输入华为云网址:https://www.huaweicloud.com/,进入华为云首页。

2、在华为云的首页右上方,点击“登录”,在弹出的对话框中输入自己的用户名和密码。

3、在华为云首页,依次选择“产品”>“人工智能”>“智能问答机器人”,进入智能问答机器人 QABot页面。

03.jpg

4、点击“立即使用”按钮进入管理页面。

04.jpg

5、点击“购买问答机器人”按钮进入购买页面。

05.jpg

6、选择“试用”购买即可。

06.jpg

步骤2:增加私有知识

1、登录对话机器人服务管理控制台,在左侧菜单栏中选择“智能问答机器人”。在机器人列表,点击“机器人管理”进入管理页面,页面如下图所示。

07.jpg

2、对问答机器人添加私有知识可以从知识库和技能平台两个方面入手:知识库和技能平台

3、在“问答机器人”页面左侧导航栏中选择“知识库 > 问答管理”,在问答管理页面执行如下操作:

3.1 在问答管理中单击添加按钮新建问题分类,例如“IT问题”。

08.jpg

3.2 在问答管理中单击“新建”创建问答语料,详细创建过程请参见管理问答语料

这里我们输入几个问答语料,在后面测试的时候使用。

Q:忘记密码怎么办

A:‌通过安全模式重置密码‌(无需密码重置磁盘)

09.jpg

Q: 蓝屏了怎么办

A:蓝屏后请重启PC,重启无效后,建议联系技术支持人员

10.jpg

4、问答机器人页面左侧导航栏中选择技能平台 > 技能管理,在技能管理页面执行如下操作:

4.1 点击“添加技能”按钮选择感兴趣的类型,建议从“预置技能”入手,点击下一步,选择感兴趣的技能,点击确定完成配置。

11.jpg

步骤3:部署Web项目

本小节需要部署一个Python Web项目,可以是自己的项目,如果没有项目可以使用示例项目,代码地址如下:

git clone https://github.com/nishaotang/huawei_cbs_demo.git

1、进入云主机,打开终端。

2、执行命令安装python:

sudo apt-get install python-is-python3


3、验证python是否安装完成,出现图片所示表示我们python的环境变量已经配置完成:

12.jpg

4、打开CodeArts IDE,点击“打开项目”选择事先准备好的python Web项目文件夹点击“打开“按钮,等待加载完毕。

13.jpg

5、本样例以Python Flask框架为例。在下方 bash面板中输入如下命令,完成flask安装:

pip install flask

6使用如下命令启动项目,出现下图所示表示启动成功(app.py为入口文件):

14.jpg

7、打开浏览器访问地址http://127.0.0.1:5000/ 展示效果如下:

15.jpg

步骤4:调用AI助手实现智能问答

1、登录“我的凭证> 访问秘钥”页面,获取Access Key(AK)和Secret Access Key(SK)。

2、登录“我的凭证> 项目”页面,获取待使用区域的“项目ID”。调用服务时会用到这些信息,请提前保存。

3、登录对话机器人服务管理控制台,在左侧菜单栏中选择“智能问答机器人”。在机器人列表,获取机器人ID(qabot_id)。

4、安装SDK

使用SDK前,需要安装“huaweicloudsdkcore”和“huaweicloudsdkcbs”。代码如下:

# 安装核心库
pip install huaweicloudsdkcore
# 安装CBS服务库
pip install huaweicloudsdkcbs

5、认证用的ak和sk直接写到代码中有很大的安全风险,建议在配置文件或者环境变量中密文存放,使用时解密,确保安全。本示例中的ak和sk保存在环境变量中,运行本示例前请先在本地环境中配置环境变量HUAWEICLOUD_SDK_AK和HUAWEICLOUD_SDK_SK,以及项目id和机器人ID打开终端,输入以下命令打开环境变量配置文件:

vi ~/.bashrc

设置环境变量,保存文件并退出编辑器:

export HUAWEICLOUD_SDK_AK="已获取AK值" 
export HUAWEICLOUD_SDK_SK="已获取SK值" 
export HUAWEICLOUD_PROJECT_ID="已获取项目id"
export HUAWEICLOUD_QABOT_ID="已获取机器id"

输入以下命令使配置文件生效

source ~/.bashrc

16.jpg

6、在CodeArts IDE项目中新建文件huawei_cbs.py,完整代码如下:

# coding=utf-8
import os,json
from huaweicloudsdkcore.auth.credentials import BasicCredentials
from huaweicloudsdkcore.exceptions import exceptions
from huaweicloudsdkcore.http.http_config import HttpConfig
# 导入CBS服务库huaweicloudsdkcbs
from huaweicloudsdkcbs.v1.region.cbs_region import CbsRegion
from huaweicloudsdkcbs.v1 import *

def cbsUtil(question):
    # 使用默认配置,如出现'HttpConfig' is not defined报错,请检查是否已正确安装sdk
    config = HttpConfig.get_default_config()
    # 根据需要配置是否跳过SSL证书校验
    config.ignore_ssl_verification = False

    # 默认连接超时时间为60秒,读取超时时间为120秒,支持统一指定超时时长timeout=timeout,或分别指定超时时长timeout=(connect timeout, read timeout)
    config.timeout = 10

    # 配置AK、SK、project_id信息。华为云通过AK识别用户的身份,通过SK对请求数据进行签名验证,用于确保请求的机密性、完整性和请求者身份的正确性。
    # 请勿将认证信息硬编码到代码中,有安全风险。
    ak = os.getenv('HUAWEICLOUD_SDK_AK')
    sk = os.getenv('HUAWEICLOUD_SDK_SK')
    project_id = os.getenv('HUAWEICLOUD_PROJECT_ID')
    qabot_id = os.getenv('HUAWEICLOUD_QABOT_ID')
    basic_credentials = BasicCredentials(ak, sk, project_id)
    # 初始化指定云服务的客户端 {Service}Client ,以初始化 Region 级服务CBS的 CbsClient 为例
    client = CbsClient.new_builder() \
        .with_http_config(config) \
        .with_credentials(basic_credentials) \
        .with_region(CbsRegion.value_of("cn-north-4")) \
        .build()
    try:
        request = ExecuteQaChatRequest()
        request.qabot_id = qabot_id
        request.body = PostRequestsReq(
            question = question
        )

        response = client.execute_qa_chat(request)
        
        #问答型机器人回复
        if response.reply_type == 0:
            return response.qabot_answers.answers[0].answer
        #任务型机器人回复
        elif response.reply_type == 1 :
            return response.taskbot_answers.answer
        #闲聊回复
        elif response.reply_type == 2:
            return response.chat_answers.answer
        else:
            return '请求失败'
    except exceptions.ClientRequestException as e:
        print(e.status_code)
        print(e.request_id)
        print(e.error_code)
        print(e.error_msg)
        return e.error_msg

7、修改app.py文件用于请求接口函数,添加如下代码:

@app.route('/aiApi',methods=['POST'])
def aiApi():
    prompts = request.form.get('prompts')
    message = huawei_cbs.cbsUtil(prompts)
    print(message)
    return jsonify({'success': True,'message':message})

8、修改前端js用于调用后端接口,代码如下:

// 发送信息到后台
      ajaxRequest = $.ajax({
        url: '/aiApi',
        type: 'POST',
        data: data,
        success:function(response){
          
            // 处理后端返回的响应
            if (response.success) {
                //自定义回复显示代码 使用response.message
            } else {
                //自定义失败显示
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
          //自定义异常处理
        }
});

9、调整完成后可以出现如下图所示效果。

17.jpg

输入问题:北京天气

18.jpg

至此,基于云主机的Web项目增加AI助手就体验完成。

优化建议

1、命令代码中的冒号是中文,建议改为英文符号

【开发者空间实践】基于云主机快速为Web项目添加AI助手一文中,【4.3部署Web项目】步骤中,给出的git命令中的冒号是中文的,建议改为英文符号。

19.jpg

2、安装核心库的顺序建议提前

【开发者空间实践】基于云主机快速为Web项目添加AI助手一文中,【4.3 部署Web项目】,这个步骤的最后一步是启动Web项目,但是实际操作时一直提示缺少核心库,文章中安装核心库的步骤在【4.4 调用AI助手实现智能问答】中,建议提前到【4.3 部署Web项目】中。

20.jpg

总结

华为开发者空间提供的能力十分强大,内置了诸多开发工具,与华为云的生态深度融合,可以便捷是使用华为云的服务。

为Web项目部署AI助手的过程并不复杂,过程简单易懂,几乎没有卡顿,体验过程十分顺畅。不过,实践指导的文档上面有一些需要优化的点,如果能完成优化,会更加完美。

另外,AI助手的外观还有比较原始,希望后续能够进一步的美化。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。