【腾讯云 HAI域探秘】整合腾讯云HAI的ChatGLM模型到NUXT官网:实现智能IM功能

2024-03-21 07:40

本文主要是介绍【腾讯云 HAI域探秘】整合腾讯云HAI的ChatGLM模型到NUXT官网:实现智能IM功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

脑图分析

智能IM功能.png

im效果演示

tutieshi_640x314_37s.gif

前言

在当今数字化时代,智能化技术的应用已经成为许多企业和网站提升用户体验、提高效率的关键要素之一。而在实现智能化的过程中,整合人工智能模型成为了一个重要的环节。本文将介绍如何将腾讯云HAI的ChatGLM模型整合到NUXT官网中,以实现智能IM功能。
腾讯云高性能应用服务(Hyper Application Inventor,HAI),是一款面向 AI 、科学计算的 GPU 应用服务产品,为开发者量身打造的澎湃算力平台。无需复杂配置,便可享受即开即用的GPU云服务体验。在 HAI 中,根据应用智能匹配并推选出最适合的 GPU 算力资源,以确保您在数据科学、LLM、AI 作画等高性能应用中获得最佳性价比此外,HA 的一键部署特性让您可以在短短几分钟内构建如 StableDifusion、ChatGLM 等热门模型的应用环境。而对于 AI 研究者,我们的直观图形界面大大降低了调试的复杂度,支持 jupyterlab、webui 等多种连接方式,助您轻松探索与创新。

本文将带领读者一步步完成整合腾讯云HAI的ChatGLM模型到NUXT官网的过程。我们将详细说明如何在NUXT官网中配置和调用ChatGLM2-6B API接口,实现与用户的智能对话功能。

腾讯云HAI介绍

腾讯云高性能应用服务(HAI)是为开发者量身定制的强大计算平台。无需繁琐配置,即可体验即开即用的GPU云服务。在HAI中,我们智能匹配并推荐最适合您的GPU算力资源,确保您在数据科学、LLM、AI作画等高性能应用中获得卓越性能和极高的性价比。

HAI 服务优势

大幅降低GPU云服务器使用门槛,多角度优化产品使用体验,开箱即用
在这里插入图片描述

场景介绍

  1. 利用HAI部署的ChatGLM2-6B,能够快速进行AI对话

  2. 借助HAI部署的ChatGLM2-6B API,能够快速实现开发者所需的相关API服务

  3. 通过HAI部署的ChatGLM2-6B API,可以快速进行模型的微调

在这里插入图片描述

创建NUXT模板

  1. 在终端输入下面的命令创建一个 NUXT 项目
npx create-nuxt-app <项目名>
  1. 详细配置如下图所示

image.png

  1. 创建api , util 等基础配置 , 这里不做详细讲解,可以去文末的git中获取哦!!
  2. 启动初始项目

image.png

配置im相关内容

客服图标

通过下面的代码添加一个客服的图标按钮 , 当点击图标时弹出聊天框.

<template><div><Nuxt /><div class="user"><i class="el-icon-user" /></div></div>
</template>
<style scoped>
.user {position: absolute;right: 0;bottom: 180px;width: 30px;height: 30px;background: #f00;border: 1px solid #00f;border-radius:50% ;display: flex;justify-content: center;align-items: center;margin-right: 30px;cursor: pointer;
}
i {font-size: 18px;
}
</style>

image.png

客服对话框主体

<template><el-dialogtitle="提示":visible.sync="dialogVisible"width="60%"center:before-close="handleClose":close-on-click-modal="false":close-on-press-escape="false"><div class="box"><!-- <div>快捷输入</div> --><div class="msghis"><div v-for="(item, index) in historyMsg" :key="index"><p class="user">{{ item[0] }} <el-avatar> user </el-avatar></p><p class="gpt"><el-avatar> gpt </el-avatar>{{ item[1] }}</p></div></div><div class="sendMsg"><el-form :model="formInline"><el-form-item class="send"><el-input v-model="formInline.input" /><el-button type="primary" @click="onSubmit">发送</el-button></el-form-item></el-form></div></div><!-- <span slot="footer" class="dialog-footer"><el-button type="primary" @click="handleCloseTrue">关 闭</el-button></span> --></el-dialog>
</template><script>
export default {props: {dialogVisible: {type: Boolean,default: false}},data () {return {formInline: {input: ''},historyMsg: [["'你好,发热了怎么办?'",'如果自己发热了,最好的做法是尽快联系医疗机构进行评估和治疗。同时,在等待医疗帮助到达之前,可以']]}},methods: {handleClose () {//   this.handleClear()this.$emit('update:dialogVisible', false)},handleCloseTrue () {this.$emit('update:dialogVisible', false)}}
}
</script>
<style scoped>
.box {width: 100%;height: 300px;border: 1px solid #000;
}
.send ::v-deep .el-form-item__content {display: flex;margin-top: 20px;
}
.msghis {width: 100%;height: 200px;/* border: 1px solid #000; */overflow-y: auto;/* margin-top: 20px; */
}
.user {display: flex;align-items: center;justify-content: flex-end;padding-bottom: 10px;padding-top: 10px;background: #c3c3;
}
.gpt {display: flex;align-items: center;padding-bottom: 10px;padding-top: 10px;background: rgba(9, 219, 198, 0.6);
}
</style>

效果图如下

image.png

物料准备

点击链接获取 内测资格 (大约1天左右即可哦!!)
image.png
内测资格审核通过后点击链接 体验HAI 前往体验
image.png

ChatGLM2 6B 创建

选择应用

点击链接进入产品页面,

  1. 选择AI模型中的ChatGLM2 6B
  2. 地域选择广州
  3. 算力方案选择基础型即可
  4. 实例名称根据自己的喜好命名即可 , 这里我们命名为 “chatIM”
  5. 硬盘选择 80gb 即可
  6. 点击 立即购买

详细配置如下图所示:

buy.cloud.tencent.com_hai_applicationId=app-nd3qslnz&regionId=1&bundleId=XL&alias=chatIM&diskSize=80.png

等待创建完成

创建需要一段时间需要等待8分钟左右

image.png

启动 ChatGLM2-6B 提供的 API 服务

在 算力管理 页面,选择进入 jupyter_lab 页面

image.png

更新软件源列表

如下图所示 选择终端进入 , 并输入如下指令

apt-get update && apt-get install sudo
sudo apt-get update  
sudo apt-get install psmisc

image.png

指令解释

  1. “apt-get update && apt-get install sudo” 的作用是更新软件源列表并安装sudo程序。其中,“apt-get update"用于更新软件源列表,以确保系统中的软件安装包是最新的。”&&"用于连接两个命令,表示前一个命令执行成功后才执行第二个命令。"apt-get install sudo"用于安装sudo程序,sudo是一种权限管理程序,可以允许普通用户以特权用户的身份执行某些命令,以便进行需要特权身份才能进行的操作。
  2. “sudo apt-get update” 用于使用sudo权限更新软件源列表,此命令与第一行命令的"apt-get update"功能类似,但是使用了sudo权限,以便更新软件源时需要进行特权操作。
  3. “sudo apt-get install psmisc” 用于使用sudo权限安装psmisc软件包,psmisc是一个包含一些有关进程管理的实用程序的软件包。

查看api.py 文件

进入 ChatGLM2-6B 文件点开 api.py文件

image.png

修改api.py文件

使用 fastapi.middleware.cors 来解决跨域问题

引入中间件

api.py文件头部引入 from fastapi.middleware.cors import CORSMiddleware

image.png

添加跨域中间件

api.py 文件中添加 跨域中间件如下

app.add_middleware(CORSMiddleware,allow_origins=["*"],  # 允许所有来源allow_credentials=True,allow_methods=["*"],  # 允许所有 HTTP 方法allow_headers=["*"],  # 允许所有 HTTP 头部
)

修改后如下图所示
image.png

修改接口地址

api.py文件中 @app.post("/") 改写成 @app.post("/api") 即可

开启API服务

在终端输入如下指令 开启API 服务

cd ./ChatGLM2-6B
python api.py

新增服务器端口规则

  1. 点击实例的空白处 进入详细的配置页面

image.png

  1. 点击编辑规则选择 入站规则 中的添加规则

image.png
image.png

测试接口

使用postman或者apifox等接口调试工具 进行接口测试

  1. 复制实例的公网ip 地址 , 端口地址是 8000 , 接口名称为 /api

image.png

  1. apifox 配置如下

image.png

  1. 保存实例 发送请求测试连接是否成功

image.png

对接nuxt官网

接口函数封装

import request from '@/utils/request'export function getIm (data) {return request({url: '/api',method: 'post',data})
}

接口调用

通过函数进行接口调用 , 然后将 回答的 history 添加到 回答列表中即可

 async onSubmit () {const params = {prompt: this.formInline.input,history: [],max_length: 50,top_p: 0.7,temperature: 0.95}await getIm(params).then((res) => {console.log(res)})}

效果展示

tutieshi_640x314_37s.gif

销毁

当使用完成之后记得销毁实例哦!!!

image.png

腾讯云HAI 思考

  1. HAI服务器是否可以与serveless 进行结合, 实现按实际使用的计算和存储量计费,不用不付费,按秒计量,按小时结算。
  2. 关于ChatGLM2 6B 或者其他的HAI 服务是否可以提供一些prompt 的模板用于实现个人服务的微调

总结

将ChatGLM 模型接入到官网充当客服这个角色觉得还是可以的, 但是需要解决的问题如下:

  1. 数据的返回处理, 需要对关键字替换等操作
  2. 服务器不能太小了 ,本次测试使用的是0.88 的 , 测试过程中 如果 max_length 超过 1000 基本会出错
  3. 添加数据缓存, 由于是测试版本 我并没有添加数据缓存的功能, 这一点在正式就开发过程中需要注意哦!!

这篇关于【腾讯云 HAI域探秘】整合腾讯云HAI的ChatGLM模型到NUXT官网:实现智能IM功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/832108

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount