【极简】Vue写的chatGpt前端应用

由于chatGPT是一个需要API Key和模型的大型语言模型，我们需要一个后端服务来与chatGPT交互，并且在前端展示结果。

以下是一个简单的Vue前端应用框架，你需要添加后端服务来与chatGPT交互。

<template>
  <div id="app">
    <input v-model="message" @keyup.enter="sendMessage" type="text" placeholder="Enter your message..." />
    <button @click="sendMessage">Send</button>
    <div v-for="(response, index) in responses" :key="index">
      <span>{{ response }}</span>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      message: '',
      responses: []
    }
  },
  methods: {
    async sendMessage() {
      if (this.message.trim() === '') {
        alert('Message cannot be empty');
        return;
      }
 
      try {
        // 假设有一个名为sendMessageToBackend的方法用于发送消息到后端
        // 后端再与chatGPT交互，并返回结果
        const response = await this.sendMessageToBackend(this.message);
        this.responses.push(response);
        this.message = '';
      } catch (error) {
        console.error('Error sending message:', error);
        alert('Error sending message. Check console for details.');
      }
    },
    // 这个方法需要你自己实现，用于发送消息到后端
    sendMessageToBackend(message) {
      // 实现发送到后端的逻辑
    }
  }
}
</script>
 
<style>
#app {
  text-align: center;
}
input {
  width: 50%;
  margin: 10px;
  padding: 10px;
}
button {
  width: 10%;
  margin: 10px;
  padding: 10px;
}
</style>

这个Vue应用框架包括了发送消息到chatGPT的基本逻辑，你需要实现sendMessageToBackend方法，该方法负责发送消息到后端服务，并从chatGPT接收响应。

注意：由于涉及API Key和敏感信息，在实际应用中，你需要确保这些信息的安全性和合法性。