写点什么

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

作者:攀登者
  • 2023-12-07
    北京
  • 本文字数:3744 字

    阅读完需:约 12 分钟

脑图分析

im 效果演示

前言

在当今数字化时代,智能化技术的应用已经成为许多企业和网站提升用户体验、提高效率的关键要素之一。而在实现智能化的过程中,整合人工智能模型成为了一个重要的环节。本文将介绍如何将腾讯云 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. 详细配置如下图所示



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

  2. 启动初始项目


配置 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>
复制代码


客服对话框主体

<template>  <el-dialog    title="提示"    :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>
复制代码


效果图如下


物料准备

点击链接获取 内测资格 (大约 1 天左右即可哦!!)



内测资格审核通过后点击链接 体验HAI 前往体验


ChatGLM2 6B 创建

选择应用

点击链接进入产品页面,


  1. 选择AI模型中的 ChatGLM2 6B

  2. 地域选择广州

  3. 算力方案选择基础型即可

  4. 实例名称根据自己的喜好命名即可 , 这里我们命名为 "chatIM"

  5. 硬盘选择 80gb 即可

  6. 点击 立即购买


详细配置如下图所示:


等待创建完成

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


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

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


更新软件源列表

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


apt-get update && apt-get install sudosudo apt-get update  sudo apt-get install psmisc
复制代码


指令解释

  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文件



修改 api.py 文件

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

引入中间件

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


添加跨域中间件

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


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


修改后如下图所示


修改接口地址

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

开启 API 服务

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


cd ./ChatGLM2-6Bpython api.py
复制代码

新增服务器端口规则

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



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



测试接口

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


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



  1. apifox 配置如下



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


对接 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)      })    }
复制代码

效果展示

销毁

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


腾讯云 HAI 思考

  1. HAI 服务器是否可以与serveless 进行结合, 实现按实际使用的计算和存储量计费,不用不付费,按秒计量,按小时结算。

  2. 关于ChatGLM2 6B 或者其他的 HAI 服务是否可以提供一些prompt 的模板用于实现个人服务的微调

总结

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


  1. 数据的返回处理, 需要对关键字替换等操作

  2. 服务器不能太小了 ,本次测试使用的是 0.88 的 , 测试过程中 如果 max_length 超过 1000 基本会出错

  3. 添加数据缓存, 由于是测试版本 我并没有添加数据缓存的功能, 这一点在正式就开发过程中需要注意哦!!

发布于: 刚刚阅读数: 5
用户头像

攀登者

关注

还未添加个人签名 2023-12-05 加入

还未添加个人简介

评论

发布
暂无评论
【腾讯云 HAI域探秘】整合腾讯云HAI的ChatGLM模型到NUXT官网:实现智能IM功能_攀登者_InfoQ写作社区