vue调用openai的代码

openai 文章 2023-03-19 17:27 2467 0 全屏看文

AI助手支持GPT4.0

以下是一个简单的 Vue 应用示例,用于对接 ChatGPT 接口。该示例包含一个输入框、一个发送按钮、一个显示对话的区域以及一个保存聊天记录的功能。请注意,你需要在这个示例中替换你自己的 ChatGPT API 密钥。


首先确保已经安装了 Vue 和 Axios:

npm install -g vue
npm install axios

创建一个名为 app.vue 的文件,并将以下内容复制到该文件中:

<template>
  <div id="app">
    <div class="chat-container">
      <div class="messages">
        <div v-for="(message, index) in messages" :key="index" :class="message.type">
          {{ message.content }}
        </div>
      </div>
      <div class="input-container">
        <input type="text" v-model="userInput" @keyup.enter="sendMessage" placeholder="Type your message" />
        <button @click="sendMessage">发送</button>
        <button @click="saveChat">保存聊天记录</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInput: '',
      messages: []
    };
  },
  methods: {
    async sendMessage() {
      if (!this.userInput) return;

      this.messages.push({ type: 'user', content: this.userInput });

      const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
        prompt: `User: ${this.userInput}\nChatGPT: `,
        max_tokens: 150,
        n: 1,
        stop: null,
        temperature: 0.7,
      }, {
        headers: {
          'Authorization': 'Bearer YOUR_API_KEY',
          'Content-Type': 'application/json'
        }
      });

      const chatGPTResponse = response.data.choices[0].text.trim();
      this.messages.push({ type: 'chatgpt', content: chatGPTResponse });

      this.userInput = '';
    },
    saveChat() {
      const chatLog = this.messages.map(message => `${message.type === 'user' ? 'User' : 'ChatGPT'}: ${message.content}`).join('\n');
      const blob = new Blob([chatLog], { type: 'text/plain;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'chat_log.txt';
      link.click();
    }
  }
};
</script>

<style scoped>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

.messages {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.input-container {
  display: flex;
  justify-content: space-between;
}

input {
  flex-grow: 1;
  margin-right: 1rem;
}

.user {
  text-align: right;
  color: blue;
}

.chatgpt {
  text-align: left;
  color: green;
}
</style>

请将 YOUR_API_KEY 替换为您的 ChatGPT API 密钥。这个示例中,我们使用了 DaVinci

-EOF-

AI助手支持GPT4.0


国内超级便宜服务器

摸鱼人热门新闻聚合

钻级赞助商 我要加入

开发者在线工具

第三方支付技术请加QQ群

相关文章
目前市面上AI模型价格对比
ChatGPT Plus会员代充值
如何申请OpenAI(ChatGPT)密钥
openai消费等级和api接口开放程度
openai(chatGPT)部分返回值的解释
随便看看
微信公众号免300认证教程 5750
小程序已经上线,作为管理员无法在小程序数据助手查看数据? 5156
小程序广告组件通过审核,但是小程序内没有显示广告? 4931
企业微信通讯录账号被管理员误/恶意删除,怎么办? 9353
问题? 8879
如何快速搭建抽奖助手小程序(无需代码知识) 6014
许涛 大哥在吗, 要解冻小程序的时候提示信息主体不一致, 能帮忙看下吗? 7316
小程序搜一搜全称搜索不显示 麻烦解决一下!谢谢 6639
我的小程序广告收款主体是个体工商户,每个月邮寄两次发票很是麻烦,我年底的时候打包邮寄一次可以么? 5975
如何解决渲染层网络错误Failed to load media? 17249