在当今数字化时代,智能化技术的应用已经成为许多企业和网站提升用户体验、提高效率的关键要素之一。而在实现智能化的过程中,整合人工智能模型成为了一个重要的环节。本文将介绍如何将腾讯云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接口,实现与用户的智能对话功能。
npx create-nuxt-app <项目名>
通过下面的代码添加一个客服的图标按钮 , 当点击图标时弹出聊天框.
<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 前往体验
点击链接进入产品页面,
详细配置如下图所示:
创建需要一段时间需要等待8分钟左右
在 算力管理 页面,选择进入 jupyter_lab 页面
如下图所示 选择终端进入 , 并输入如下指令
apt-get update && apt-get install sudo sudo apt-get update sudo apt-get install psmisc
进入 ChatGLM2-6B 文件点开 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 服务
cd ./ChatGLM2-6B python api.py
使用postman或者apifox等接口调试工具 进行接口测试
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) }) }
当使用完成之后记得销毁实例哦!!!
将ChatGLM 模型接入到官网充当客服这个角色觉得还是可以的, 但是需要解决的问题如下:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。