如图；国内通过调用openai接口进行互动，实现图文互动/文本互动
注意：请求人数较多，需要等待
1、 获取ApiKey
注册 OpenAI 账号，获取你的 ApiKey，过程略。
2、 聊天接口
⚠️ 不再推荐使用本接口，后面将废弃。
接口地址 (POST请求)
POST https://api.openai.com/pro/chat/completions
请求参数
| 参数名 | 类型 | 长度 | 必须 | 备注 |
|---|---|---|---|---|
| apiKey | String | 64 | 是 | OpenAI 的 ApiKey |
| sessionId | String | 64 | 是 | 会话ID，关联上下文，推荐使用UUID作为sessionId |
| content | String | 1000 | 是 | 发送的内容 |
请求示例（Content-Type = application/json）
{"apiKey": "",
"sessionId": "8d1cb9b0-d535-43a8-b738-4f61b1608579",
"content": "你是谁？"
}
响应示例
{"code": 200,
"message": "执行成功",
"data": "我是一名人工智能助手，用于协助回答问题和提供建议。您可以通过与我进行对话来获取您需要的信息或帮助。"
}
本接口使用的是 gpt-3.5-turbo 模型，支持通过上下文内容进行连续对话。
本接口对官方的接口进行了封装，开发者只需为每个 ApiKey 下的每个会话分配一个独立的 sessionId 即可实现连续对话 。
推荐使用 uuid 作为 sessionId 以保证全局唯一 ，否则对话可能会“串线”。
对话中的上下文信息有效期为30分钟，过期后再次发送消息无法关联上下文。
# 测试聊天
curl https://api.openai.com/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer " \
-d '{"model": "gpt-3.5-turbo",
"messages": [{"role": "user", "content": "Hello!"}]}'
# 响应结果
{"id": "chatcmpl-21lvNzPaxlsQJh0BEIb9DqoO0pZUY",
"object": "chat.completion",
"created": 1680656905,
"model": "gpt-3.5-turbo-0301",
"usage": {"prompt_tokens": 10,
"completion_tokens": 10,
"total_tokens": 20
},
"choices": [
{"message": {"role": "assistant",
"content": "Hello there! How can I assist you today" />},"finish_reason": "stop","index": 0}]}# 测试生成图片curl https://api.openai.com/v1/images/generations \-H "Content-Type: application/json" \-H "Authorization: Bearer " \-d '{"prompt": "A bikini girl","n": 2,"size": "512x512"}'# 响应结果{"created": 1680705608,"data": [{"url": "https://oaidalleapiprodscus.blob.core.windows.net/private/org-xxxxxxx"},{"url": "https://oaidalleapiprodscus.blob.core.windows.net/private/org-xxxxxxx"}]}OpenAI本身是没有记忆的，如果你不告诉他你之前说了什么以及他之前回答了什么，那么他只会根据你最近一次发送的内容进行回答。
所以，要想实现“连续对话”，每次发送消息时，你需要将你之前发送的内容(user)以及OpenAI之前返回的内容(assistant)，再结合你本次想发送的内容(user) 按 时序 组合成一个 messages[] 数组，然后再将这个数组发送给OpenAI就行了，就是这么简单。
4 、⭐️ 第三方应用
如果你用的是第三方开发者开发的基于OpenAI 的应用可以参考以下：
| 名称 | Github地址 | Stars |
|---|---|---|
| OpenAI-Translator | GitHub - yetone/openai-translator: 基于 ChatGPT API 的划词翻译浏览器插件和跨平台桌面端应用 - Browser extension and cross-platform desktop application for translation based on ChatGPT API. | |
| ChatGPT-Next-Web | GitHub - Yidadaa/ChatGPT-Next-Web: One-Click to deploy well-designed ChatGPT web UI on Vercel. 一键拥有你自己的 ChatGPT 网页服务。 | |
| ChatGPT-Web | https://github.com/Chanzhaoyu/chatgpt-web |
5、 查询余额
接口地址 (GET请求)
GET https://api.openai.com/pro/balance?apiKey=sk-xxxxxxxxxxxxxx
请求参数
| 参数名 | 类型 | 长度 | 必须 | 备注 |
|---|---|---|---|---|
| apiKey | String | 64 | 是 | OpenAI 的 ApiKey |
响应示例
{"code": 200,
"message": "执行成功",
"data": {"total": 18.00,
"balance": 17.92,
"used": 0.08
}
}
原OpenAI官方后台查询余额的接口由于被用户滥用，官方给撤销了，现在提供一个折中的方式去计算账户余额。
逻辑是先得到OpenAI给你账户授权的总金额，然后减去最近100天你账户消耗的金额，得到的 balance 即为账户可用余额。
{{ frinedInfo.name }}{{ frinedInfo.detail }} <!-- 
{{ item.name }}{{ item.time }} -->{{ item.name }}{{ item.time }}请稍后...{{ item.msg }}
{{ item.name }}{{ item.time }}{{ item.msg }}<!-- -->import { animation } from "@/util/util";import { getChatMsg, chatgpt } from "@/api/getData";import HeadPortrait from "@/components/HeadPortrait";import Emoji from "@/components/Emoji";import FileCard from "@/components/FileCard.vue";export default {components: {HeadPortrait,Emoji,FileCard,},props: {frinedInfo: Object,default() {return {};},},watch: {frinedInfo() {this.getFriendChatMsg();},},data() {return {chatList: [],inputMsg: "",showEmoji: false,friendInfo: {},srcImgList: [],isSend: false,};},mounted() {this.getFriendChatMsg();},methods: {//获取聊天记录getFriendChatMsg() {let params = {frinedId: this.frinedInfo.id,};getChatMsg(params).then((res) => {console.error("333", res);this.chatList = res;// this.chatList.forEach((item) => {// if (item.chatType == 2 && item.extend.imgType == 2) {// this.srcImgList.push(item.msg);// }// });this.scrollBottom();});},//发送信息sendMsg(msgList) {this.chatList.push(msgList);this.scrollBottom();},//获取窗口高度并滚动至最底层scrollBottom() {this.$nextTick(() => {const scrollDom = this.$refs.chatContent;animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);});},//关闭标签框clickEmoji() {this.showEmoji = !this.showEmoji;},//发送文字信息sendText() {if (this.inputMsg) {let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "",time: new Date().toLocaleTimeString(),msg: this.inputMsg,chatType: 0, //信息类型，0文字，1图片uid: "1001", //uid};this.sendMsg(chatMsg);this.$emit("personCardSort", this.frinedInfo.id);this.inputMsg = "";let data = {// prompt: chatMsg.msg,// temperature: 1,// top_p: 1,// // model: "text-davinci-003",// max_tokens: 2048,// frequency_penalty: 0,// "model": "gpt-3.5-turbo",// "messages": [{"role": "user", "content": "Hello!"}],// presence_penalty: 0,// stop: ["Human:", "AI:"],model: "gpt-3.5-turbo",messages: [{ role: "user", content: chatMsg.msg }],};this.loading = true;this.isSend = true;let chatGPT = {headImg: require("@/assets/img/head_portrait1.jpg"),name: "小五",time: new Date().toLocaleTimeString(),msg: "",images: [],chatType: 0, //信息类型，0文字，1图片uid: "1002", //uid};this.sendMsg(chatGPT);chatgpt(data).then((res) => {this.isSend = false;if (res.data) {this.chatList[this.chatList.length - 1].images=[];console.error("555", this.chatList);this.chatList[this.chatList.length - 1].type = 1;this.chatList[this.chatList.length - 1].images.push(res.data[0].url);} else {this.chatList[this.chatList.length - 1].msg =res.choices[0].message.content;}});} else {this.$message({message: "消息不能为空哦~",type: "warning",});}},//发送表情sendEmoji(msg) {let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "大毛是小白",time: new Date().toLocaleTimeString(),msg: msg,chatType: 1, //信息类型，0文字，1图片extend: {imgType: 1, //(1表情，2本地图片)},uid: "1001",};this.sendMsg(chatMsg);this.clickEmoji();},//发送本地图片sendImg(e) {let _this = this;console.log(e.target.files);let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "大毛是小白",time: "09：12 AM",msg: "",chatType: 1, //信息类型，0文字，1图片, 2文件extend: {imgType: 2, //(1表情，2本地图片)},uid: "1001",};let files = e.target.files[0]; //图片文件名if (!e || !window.FileReader) return; // 看是否支持FileReaderlet reader = new FileReader();reader.readAsDataURL(files); // 关键一步，在这里转换的reader.onloadend = function () {chatMsg.msg = this.result; //赋值_this.srcImgList.push(chatMsg.msg);};this.sendMsg(chatMsg);e.target.files = null;},//发送文件sendFile(e) {let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "大毛是小白",time: "09：12 AM",msg: "",chatType: 2, //信息类型，0文字，1图片, 2文件extend: {fileType: "", //(1word，2excel，3ppt，4pdf，5zpi, 6txt)},uid: "1001",};let files = e.target.files[0]; //图片文件名chatMsg.msg = files;console.log(files);if (files) {switch (files.type) {case "application/msword":case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":chatMsg.extend.fileType = 1;break;case "application/vnd.ms-excel":case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":chatMsg.extend.fileType = 2;break;case "application/vnd.ms-powerpoint":case "application/vnd.openxmlformats-officedocument.presentationml.presentation":chatMsg.extend.fileType = 3;break;case "application/pdf":chatMsg.extend.fileType = 4;break;case "application/zip":case "application/x-zip-compressed":chatMsg.extend.fileType = 5;break;case "text/plain":chatMsg.extend.fileType = 6;break;default:chatMsg.extend.fileType = 0;}this.sendMsg(chatMsg);e.target.files = null;}},// 发送语音telephone() {this.$message("敬请期待一下吧~");},//发送视频video() {this.$message("敬请期待一下吧~");},},};.flash_cursor {width: auto;height: 30px;display: inline-block;background: #d6e3f5;opacity: 1;animation: glow 800ms ease-out infinite alternate;}@keyframes glow {0% {opacity: 1;}25% {opacity: 0.5;}50% {opacity: 0;}75% {opacity: 0.5;}100% {opacity: 1;}}.chat-window {width: 100%;height: 100%;margin: 0 auto;position: relative;.top {margin-bottom: 20px;&::after {content: "";display: block;clear: both;}.head-pic {float: left;}.info-detail {float: left;margin: 5px 20px 0;.name {font-size: 20px;font-weight: 600;color: #fff;}.detail {color: #9e9e9e;font-size: 12px;margin-top: 2px;}}.other-fun {float: right;margin-top: 20px;span {margin-left: 30px;cursor: pointer;}// .icon-tupian {// }input {display: none;}}}.botoom {width: 100%;height: 70vh;background-color: rgb(50, 54, 68);border-radius: 20px;padding: 20px;box-sizing: border-box;position: relative;.chat-content {width: 100%;height: 85%;overflow-y: scroll;padding: 20px;box-sizing: border-box;&::-webkit-scrollbar {width: 0;/* Safari,Chrome 隐藏滚动条 */height: 0;/* Safari,Chrome 隐藏滚动条 */display: none;/* 移动端、pad 上Safari，Chrome，隐藏滚动条 */}.chat-wrapper {position: relative;word-break: break-all;.chat-friend {width: 100%;float: left;margin-bottom: 20px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;.chat-text {max-width: 90%;padding: 20px;border-radius: 20px 20px 20px 5px;background-color: rgb(56, 60, 75);color: #fff;&:hover {background-color: rgb(39, 42, 55);}pre {white-space: break-spaces;}}.chat-img {img {width: 100px;height: 100px;}}.info-time {margin: 10px 0;color: #fff;font-size: 14px;img {width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 10px;}span:last-child {color: rgb(101, 104, 115);margin-left: 10px;vertical-align: middle;}}}.chat-me {width: 100%;float: right;margin-bottom: 20px;position: relative;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;.chat-text {float: right;max-width: 90%;padding: 20px;border-radius: 20px 20px 5px 20px;background-color: rgb(29, 144, 245);color: #fff;&:hover {background-color: rgb(26, 129, 219);}}.chat-img {img {max-width: 300px;max-height: 200px;border-radius: 10px;}}.info-time {margin: 10px 0;color: #fff;font-size: 14px;display: flex;justify-content: flex-end;img {width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-left: 10px;}span {line-height: 30px;}span:first-child {color: rgb(101, 104, 115);margin-right: 10px;vertical-align: middle;}}}}}.chatInputs {width: 100%;position: absolute;bottom: 0;margin: 0 auto;align-items: center;display: flex;padding-bottom: 15px;.boxinput {width: 50px;height: 50px;background-color: rgb(66, 70, 86);border-radius: 15px;border: 1px solid rgb(80, 85, 103);position: relative;cursor: pointer;img {width: 30px;height: 30px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}}.emoji {transition: 0.3s;&:hover {background-color: rgb(46, 49, 61);border: 1px solid rgb(71, 73, 82);}}.inputs {width: 70%;height: 50px;background-color: rgb(66, 70, 86);border-radius: 15px;border: 2px solid rgb(34, 135, 225);padding: 10px;box-sizing: border-box;transition: 0.2s;margin-right: 10px;font-size: 20px;color: #fff;font-weight: 100;&:focus {outline: none;}}.send {background-color: rgb(29, 144, 245);border: 0;transition: 0.3s;box-shadow: 0px 0px 5px 0px rgba(0, 136, 255);&:hover {box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);}}}}}
-->
import { animation } from "@/util/util";import { getChatMsg, chatgpt } from "@/api/getData";import HeadPortrait from "@/components/HeadPortrait";import Emoji from "@/components/Emoji";import FileCard from "@/components/FileCard.vue";export default {components: {HeadPortrait,Emoji,FileCard,},props: {frinedInfo: Object,default() {return {};},},watch: {frinedInfo() {this.getFriendChatMsg();},},data() {return {chatList: [],inputMsg: "",showEmoji: false,friendInfo: {},srcImgList: [],isSend: false,};},mounted() {this.getFriendChatMsg();},methods: {//获取聊天记录getFriendChatMsg() {let params = {frinedId: this.frinedInfo.id,};getChatMsg(params).then((res) => {console.error("333", res);this.chatList = res;// this.chatList.forEach((item) => {// if (item.chatType == 2 && item.extend.imgType == 2) {// this.srcImgList.push(item.msg);// }// });this.scrollBottom();});},//发送信息sendMsg(msgList) {this.chatList.push(msgList);this.scrollBottom();},//获取窗口高度并滚动至最底层scrollBottom() {this.$nextTick(() => {const scrollDom = this.$refs.chatContent;animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight);});},//关闭标签框clickEmoji() {this.showEmoji = !this.showEmoji;},//发送文字信息sendText() {if (this.inputMsg) {let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "",time: new Date().toLocaleTimeString(),msg: this.inputMsg,chatType: 0, //信息类型，0文字，1图片uid: "1001", //uid};this.sendMsg(chatMsg);this.$emit("personCardSort", this.frinedInfo.id);this.inputMsg = "";let data = {// prompt: chatMsg.msg,// temperature: 1,// top_p: 1,// // model: "text-davinci-003",// max_tokens: 2048,// frequency_penalty: 0,// "model": "gpt-3.5-turbo",// "messages": [{"role": "user", "content": "Hello!"}],// presence_penalty: 0,// stop: ["Human:", "AI:"],model: "gpt-3.5-turbo",messages: [{ role: "user", content: chatMsg.msg }],};this.loading = true;this.isSend = true;let chatGPT = {headImg: require("@/assets/img/head_portrait1.jpg"),name: "小五",time: new Date().toLocaleTimeString(),msg: "",images: [],chatType: 0, //信息类型，0文字，1图片uid: "1002", //uid};this.sendMsg(chatGPT);chatgpt(data).then((res) => {this.isSend = false;if (res.data) {this.chatList[this.chatList.length - 1].images=[];console.error("555", this.chatList);this.chatList[this.chatList.length - 1].type = 1;this.chatList[this.chatList.length - 1].images.push(res.data[0].url);} else {this.chatList[this.chatList.length - 1].msg =res.choices[0].message.content;}});} else {this.$message({message: "消息不能为空哦~",type: "warning",});}},//发送表情sendEmoji(msg) {let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "大毛是小白",time: new Date().toLocaleTimeString(),msg: msg,chatType: 1, //信息类型，0文字，1图片extend: {imgType: 1, //(1表情，2本地图片)},uid: "1001",};this.sendMsg(chatMsg);this.clickEmoji();},//发送本地图片sendImg(e) {let _this = this;console.log(e.target.files);let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "大毛是小白",time: "09：12 AM",msg: "",chatType: 1, //信息类型，0文字，1图片, 2文件extend: {imgType: 2, //(1表情，2本地图片)},uid: "1001",};let files = e.target.files[0]; //图片文件名if (!e || !window.FileReader) return; // 看是否支持FileReaderlet reader = new FileReader();reader.readAsDataURL(files); // 关键一步，在这里转换的reader.onloadend = function () {chatMsg.msg = this.result; //赋值_this.srcImgList.push(chatMsg.msg);};this.sendMsg(chatMsg);e.target.files = null;},//发送文件sendFile(e) {let chatMsg = {headImg: require("@/assets/img/head_portrait.jpg"),name: "大毛是小白",time: "09：12 AM",msg: "",chatType: 2, //信息类型，0文字，1图片, 2文件extend: {fileType: "", //(1word，2excel，3ppt，4pdf，5zpi, 6txt)},uid: "1001",};let files = e.target.files[0]; //图片文件名chatMsg.msg = files;console.log(files);if (files) {switch (files.type) {case "application/msword":case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":chatMsg.extend.fileType = 1;break;case "application/vnd.ms-excel":case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":chatMsg.extend.fileType = 2;break;case "application/vnd.ms-powerpoint":case "application/vnd.openxmlformats-officedocument.presentationml.presentation":chatMsg.extend.fileType = 3;break;case "application/pdf":chatMsg.extend.fileType = 4;break;case "application/zip":case "application/x-zip-compressed":chatMsg.extend.fileType = 5;break;case "text/plain":chatMsg.extend.fileType = 6;break;default:chatMsg.extend.fileType = 0;}this.sendMsg(chatMsg);e.target.files = null;}},// 发送语音telephone() {this.$message("敬请期待一下吧~");},//发送视频video() {this.$message("敬请期待一下吧~");},},};.flash_cursor {width: auto;height: 30px;display: inline-block;background: #d6e3f5;opacity: 1;animation: glow 800ms ease-out infinite alternate;}@keyframes glow {0% {opacity: 1;}25% {opacity: 0.5;}50% {opacity: 0;}75% {opacity: 0.5;}100% {opacity: 1;}}.chat-window {width: 100%;height: 100%;margin: 0 auto;position: relative;.top {margin-bottom: 20px;&::after {content: "";display: block;clear: both;}.head-pic {float: left;}.info-detail {float: left;margin: 5px 20px 0;.name {font-size: 20px;font-weight: 600;color: #fff;}.detail {color: #9e9e9e;font-size: 12px;margin-top: 2px;}}.other-fun {float: right;margin-top: 20px;span {margin-left: 30px;cursor: pointer;}// .icon-tupian {// }input {display: none;}}}.botoom {width: 100%;height: 70vh;background-color: rgb(50, 54, 68);border-radius: 20px;padding: 20px;box-sizing: border-box;position: relative;.chat-content {width: 100%;height: 85%;overflow-y: scroll;padding: 20px;box-sizing: border-box;&::-webkit-scrollbar {width: 0;/* Safari,Chrome 隐藏滚动条 */height: 0;/* Safari,Chrome 隐藏滚动条 */display: none;/* 移动端、pad 上Safari，Chrome，隐藏滚动条 */}.chat-wrapper {position: relative;word-break: break-all;.chat-friend {width: 100%;float: left;margin-bottom: 20px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;.chat-text {max-width: 90%;padding: 20px;border-radius: 20px 20px 20px 5px;background-color: rgb(56, 60, 75);color: #fff;&:hover {background-color: rgb(39, 42, 55);}pre {white-space: break-spaces;}}.chat-img {img {width: 100px;height: 100px;}}.info-time {margin: 10px 0;color: #fff;font-size: 14px;img {width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 10px;}span:last-child {color: rgb(101, 104, 115);margin-left: 10px;vertical-align: middle;}}}.chat-me {width: 100%;float: right;margin-bottom: 20px;position: relative;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;.chat-text {float: right;max-width: 90%;padding: 20px;border-radius: 20px 20px 5px 20px;background-color: rgb(29, 144, 245);color: #fff;&:hover {background-color: rgb(26, 129, 219);}}.chat-img {img {max-width: 300px;max-height: 200px;border-radius: 10px;}}.info-time {margin: 10px 0;color: #fff;font-size: 14px;display: flex;justify-content: flex-end;img {width: 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-left: 10px;}span {line-height: 30px;}span:first-child {color: rgb(101, 104, 115);margin-right: 10px;vertical-align: middle;}}}}}.chatInputs {width: 100%;position: absolute;bottom: 0;margin: 0 auto;align-items: center;display: flex;padding-bottom: 15px;.boxinput {width: 50px;height: 50px;background-color: rgb(66, 70, 86);border-radius: 15px;border: 1px solid rgb(80, 85, 103);position: relative;cursor: pointer;img {width: 30px;height: 30px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}}.emoji {transition: 0.3s;&:hover {background-color: rgb(46, 49, 61);border: 1px solid rgb(71, 73, 82);}}.inputs {width: 70%;height: 50px;background-color: rgb(66, 70, 86);border-radius: 15px;border: 2px solid rgb(34, 135, 225);padding: 10px;box-sizing: border-box;transition: 0.2s;margin-right: 10px;font-size: 20px;color: #fff;font-weight: 100;&:focus {outline: none;}}.send {background-color: rgb(29, 144, 245);border: 0;transition: 0.3s;box-shadow: 0px 0px 5px 0px rgba(0, 136, 255);&:hover {box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);}}}}}