位置: IT常识 - 正文

Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程

编辑:rootadmin
Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程

推荐整理分享Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

首先,我们需要确定所需功能和技术栈:

前端框架:Vue.js聊天机器人:Chat GPT APICSS框架:Bootstrap or 自主设计

在开始编写代码之前,请确认 Chat GPT API 服务已经配置好, 并且您已获得了API密钥或者token。

Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程

接下来是 Vue.js项目初始化:

# 安装vue-clinpm install -g vue-cli # 创建一个基于webpack模板新项目(chatbot)vue init webpack chatbot# 进入到目录cd chatbot && npm install# 添加chat-gpt依赖库yarn add @huggingface/chatapi-basic

然后打开package.json文件,在scripts中添加一些scripts命令:

"build": "node build/build.js","lint": "eslint --ext .js,.vue src","start": "node server/index.js", // 开始服务器监听请求

server/index.js 文件为聊天机器人Node代理类(实现跨域+GPT-API调用),具体请参考源码。(下方直接复制源码代码)

编辑聊天界面,在chatbot/src/components目录下新建Chat.vue文件,并编写以下代码:

<template> <div class="container"> <h3>简单CSS样式</h3> <div class="row pt-4"> <div class="col-md"> <!-- 用户输入 --> <label for="">User Input</label> <input type="text" placeholder="" v-model='userInput' @keyup.enter='sendMsg()'class='form-control'> </div> <!-- 工作区域 --> <div class="col-md border-left py-2 px-5 h-100 overflow-y-auto text-center"> <!-- 聊天内容列表--> <ul ref='dialogue' style='list-style-type: none;width:auto;margin-top:auto; margin-bottom:auto;' > <!--<li><strong>会话开始</strong></li>--> </ul> </div> </div> </div></template><script lang=js>export default { name: "BaseChat", data(){ return{ chatData:[], userInput:'', sessionId:'' }},mounted () { this.init() // 初始化sessionId}, methods:{ init : async function (){ const ans = await this.$axios.get('/api/session') this.sessionId =(ans.data).id; }, // 发送消息到后端API(接受GPT回复) sendMsg:async function(){ //添加用户发送信息到对话框列表中 if(this.userInput!=""){ await this.updateDialogue('Me',this.userInput); } //获取ai的回答并将其添加到对话框列表中let response = await this.getResponse(); await this.updateDialogue('AI',response); }, async getResponse(){ let without_space_input = this.userInput.trim(); //调用前端Chat GPT API const ans = await axios.post( '/api/chat/text',{ message :without_space_input,sessionId:this.sessionId} ); return ans.data.message; }, updateDialogue: function(user,message) { const ulTags= this.$refs.dialogue ; var newli = document.createElement("li"); var newText=document.createTextNode(message); if (user=='Me'){ newli.style="text-align:right; color:green"; } else{ newli.style="color:blue"; } ulTags.appendChild(newli).appendChild(newText); }, }}</script><style>.container{ width:100%; height:50vh;}</style>

接下来是 Chat 接口代理代码, 在server/index.js文件添加以下内容:

const express=require('express')const bodyParser=require('body-parser');const app=express();var config={key:"API-KEY",//API key token or Secret-API-keyengine : "davinci"};var sessionID=null;app.use(express.static('../chatbot/dist/'))app.use(bodyParser.json());app.get('/hello',(req,res)=>{ res.send("<h1>Hello World!</h1>");});/** 开始对话创建一个sesssion.**/async function create_session() {const api_url='https://api.openai.com/v1/engine/'+config.engine+'/completions';var headers={ 'Content-Type': 'application/json', auth:`Bearer ${config.key}` }; const prompt = "Hello openai"; // Initial seed const data= { prompt: plug(prompt), max_tokens: 300,temperature:0.8,n :1 ,presence_penalty :0,delay :false }let res = await fetch(api_url,{method:'POST',headers,body: JSON.stringify(data)}) .then(response => response.json()) if(!('id' in res)){ console.error("Error calling GPT API",res); throw new Error("Create Session Token request failed"); } console.log("------------->>>",res.choices[0].text.replace(/[\r\n]+/gm, "")); sessionID=res.id; return { success:true,id:(sessionID)};}app.get('/api/session',(req,res)=>{ (async ()=>{const ans ={success:false};try{ ans.success=true; ans["id"]=await create_session();// 返回目前在线最新对话的Api-Key和Session-Token. }catch(e){ console.log(e);}res.status(200).json(ans);})()});/** Chat基础API,使用GPT模型实现聊天机器人功能。**/const chat_message="Chat basic API functionality!";function plug(text){//判断是否是列表let mcs=text.charAt(text.length-1)===';'if(mcs==true){ c='\n'} else{c=''}return text+c+chat_message;}app.post('/api/chat/text',(req,res)=>{(async ()=>{try{ const message=req.body.message;//请求消息体的文本消息内容const api_url='https://api.openai.com/v1/engine/'+config.engine+'/completions';var headers={ 'Content-Type': 'application/json', auth:`Bearer ${config.key}`};console.log(req.body) const prompt=[message] +" "; // Initial seedconst data= { prompt: plug(prompt), max_tokens: 300, temperature:0.8,n :1 ,presence_penalty :0,delay :false } let res = await fetch(api_url,{method:'POST',headers,body: JSON.stringify(data)}) .then(response => response.json()) if(!('choices' in res)){console.error("Error calling GPT API",res); throw new Error("Create Session Token request failed"); } res.status(200).json({ message:(res.choices[0].text)}); }catch(e){ console.log(e); }})()});app.listen(9002,()=>{console.log('listening port....9002')})

最后,运行命令node server/index.js启动服务器。 在浏览器中打开http://localhost:{port}/即可使用简单的Vue.ChatBot聊天界面。

祝您编码愉快!如果有任何问题,请随时联系我。

本文链接地址:https://www.jiuchutong.com/zhishi/287200.html 转载请保留说明!

上一篇:尖椒炒肉的做法(图文)(湘菜尖椒炒肉的做法)

下一篇:【详讲】微信小程序分包流程步骤(微信怎么开小)

  • 多缴纳的附加税可以以后期间抵扣吗
  • 进项税额转出的情况
  • 什么叫做供应链公司
  • 个人代开资金占用费,如何计算代扣代缴个税
  • 企业奖金会计分录
  • 自然人税收管理系统扣缴客户端
  • 交强险可以打折扣吗
  • 减免税额和抵免的区别
  • 从一个公司到另一个公司公积金
  • 母公司为子公司担保需要股东会决议吗
  • 简易计征开什么发票
  • 退休人员额外收入的税收标准
  • 小规模纳税人购置税控设备
  • 财务离开公司需要交接哪些资料?
  • 差旅费属于什么支出类型
  • 计提工资当月要结转吗?
  • 取得无形资产当期收入
  • 无形资产减值准备
  • 举办活动的工作要求
  • 收到股本的现金怎么做账
  • 购车税务发票
  • 建筑业增值税税率11变为10
  • 个体工商户季度不超过30万免增值税吗
  • 跨月冲红的发票怎么做账
  • 已经计提的增值税怎么退
  • 支票发生退票
  • 用钱买的代金券怎么使用
  • 固定资产折旧率是多少
  • 人力资源服务差额
  • 滴滴电子发票怎么填写
  • 贴息债券计算公式
  • 总资产报酬率怎么查
  • win10电脑如何设置锁屏时间
  • 电脑病毒的特点包括
  • PHP:mb_ereg_search_setpos()的用法_mbstring函数
  • 前端的基本知识
  • 一个简单安全的小故事
  • OpenCV之 BGR、GRAY、HSV色彩空间&色彩通道专题 【Open_CV系列(三)】
  • 帝国cms建站实例教程
  • 商户待清算账户是什么
  • phpcms验证码不显示
  • 支付对价的公允价值的处理
  • 个体工商户生产经营所得税税率表2023
  • 劳务公司给包工头转账交税吗
  • 跨年收入退款如何处理
  • 电子税务局增值税抵扣流程
  • 突然收到电子退库收入
  • 什么样的纳税人属于小规模纳税人
  • 出售固定资产计入营业外收入
  • 所得税税率变化对已确认递延所得税资产的影响
  • 工程项目成本核算
  • 可供出售金融资产和交易性金融资产
  • 直接人工标准工时计算公式
  • 内部使用的收据可以做原始凭证吗
  • 发票入账是借还是贷
  • 股东退股如何清算
  • 付款与开票单位不一致怎样做账
  • 私人网银可以转账吗
  • 如何结转生产成本至库存商品
  • 删除sql server2019
  • mysql(master/slave)主从复制原理及配置图文详解
  • 数据库服务器配置方案
  • adsl用户之间共享电话线路
  • 硬盘安装在机箱内,属于主机的组成部分
  • watchdog. sys
  • window7 aero
  • win8打开运行窗口
  • ubuntu系统安装谷歌浏览器
  • ubuntu20.04怎么用
  • win7系统升级win10系统方法
  • linux常用命令详解
  • eclipse win7
  • relative absolute无法冲破的等级问题解决第1/3页
  • 获取nodejs命令行信息
  • 在一个android创建一个按钮多选对话框
  • jquery?
  • android电池优化设置
  • 浙江国税咨询电话12306
  • 劳务合同和劳务协议的区别和联系
  • 税收优惠政策有什么公司受影响
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设