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

这篇具有很好参考价值的文章主要介绍了Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  1. 前端框架:Vue.js
  2. 聊天机器人:Chat GPT API
  3. CSS框架:Bootstrap or 自主设计

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

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

# 安装vue-cli
npm 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-key
	engine : "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 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(!('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.toymoban.com/news/detail-444439.html

到了这里,关于Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+Websocket<简单实现聊天功能>

    此篇文章是针对 Websocket 的简单了解和应用,利用 Nodejs 简单搭建一个服务器加以实现。 首先创建一个 vue 项目,会vue的我就不必多说了; 然后再创建一个 server 文件夹,在终端上打开该文件夹,输入 vue init (一直敲 \\\"回车\\\" 键),最后再建一个 server.js 文件,如下图 代码如下

    2023年04月22日
    浏览(40)
  • 3分钟部署私人chat-gpt教程

    点击 Vercel 邮箱注册一个号,+86的手机号也能注册。需要github账号和openai key 1. 在首页新建项目 2. 登录你的github账号,然后创建一个仓库 导入第三方的仓库 输入: https://github.com/Yidadaa/ChatGPT-Next-Web 点击创建项目 进入项目的设置 配置环境变量 环境变量配置如下: OPENAI_API_KE

    2024年02月15日
    浏览(49)
  • SpringBoot和Vue2集成WebSocket,实现聊天室功能

    springboot集成websocket实现聊天室的功能。如有不足之处,还望大家斧正。

    2024年01月23日
    浏览(45)
  • 【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

    Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配置简单且完全开源。 安装 Luckysheet 1、通过CDN引入依赖 由于 Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码 2、指

    2023年04月22日
    浏览(90)
  • 如何使用SpringBoot和Netty实现一个WebSocket服务器,并配合Vue前端实现聊天功能?

    本文将详细介绍如何使用SpringBoot和Netty实现一个WebSocket服务器,并配合Vue前端实现聊天功能。 WebSocket是一种基于TCP的协议,它允许客户端和服务器之间进行双向通信,而不需要像HTTP那样进行请求和响应。Netty是一个Java网络编程框架,它提供了强大的异步事件驱动网络编程能

    2024年02月16日
    浏览(42)
  • 保姆级教程--抢先体验 Microsoft 365 Copilot,微软全家桶Chat GPT

    【ChatGPT】前些天发现了一个巨牛的人工智能学习电子书,通俗易懂,风趣幽默,无广告,忍不住分享一下给大家。(点击查看学习资料) 前段时间微软发的Microsoft 365 Copilot 可以说非常火爆了,那么该怎么抢鲜体验呢。今天分享的操作,目前大家不用急着来,因为订阅365还是

    2024年02月01日
    浏览(86)
  • 我用nodejs和electron实现了一个简单的聊天软件-----chat 开源

    🔗https://www.bilibili.com/video/BV1Fg4y1u76d/ 希望观众老爷给个免费的三连支持一下新人up主 翎 是基于 electron(vue2) 和 nodejs 实现的简单聊天软件,其中用 websocket 和 http 进行通讯传递,数据库使用了 mysql 数据库,该项目功能简单,界面简洁,适合正在练习 websocket 和 vue 的小白查看代码,代码

    2024年02月12日
    浏览(61)
  • chat gpt实现的降采样算法

    保障每个样本都被用到了。

    2024年02月13日
    浏览(32)
  • 字节跳动推出的 AI 工具:Coze,无需编程基础,快速创建 AI Chat Bot,功能堪比 GPT4.0

    今天给大家介绍一款由字节跳动公司推出的人工智能工具:Coze。它是一个应用编辑平台,用于开发新一代 AI Chat Bot,无需编程基础,就可以快速创建各种类型的 Chat Bot,并将其发布到各类社交平台和通讯软件上。据说该工具提供了免费的 ChatGPT3.5 和 GPT4 的功能,其功能可与

    2024年02月04日
    浏览(102)
  • ChatGPT-MP:基于GPT实现的微信小程序,适配H5和WEB端,包含前后台,支持打字效果输出流式输出,支持AI聊天次数限制,支持分享增加次数等功能

    包含前后台,支持打字效果输出流式输出,支持AI聊天次数限制,支持分享增加次数等功能。 开源版禁止商用,仅供学习交流,禁止倒卖。 感谢Star! 技术栈:JDK8 + SpringBoot + Vue2 + Uniapp + Mysql Github地址:https://github.com/oldinaction/ChatGPT-MP Gitee地址(国内访问更快):https://gitee.com

    2024年02月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包