最近, ChatGPT比较火, 用Vue接入API实现了一个聊天机器人, 抛砖引玉做个分享, 后续还会有React Native版的分享

API

Request Url

POST https://api.openai.com/v1/chat/completions

Request Body

{
  "model": "gpt-3.5-turbo",
  "messages": [{"role": "user", "content": "Hello!"}]
}

model是指定模型, content是交互内容

Response Body

{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677652288,
  "choices": [{
    "index": 0,
    "message": {
      "role": "assistant",
      "content": "\n\nHello there, how may I assist you today?",
    },
    "finish_reason": "stop"
  }],
  "usage": {
    "prompt_tokens": 9,
    "completion_tokens": 12,
    "total_tokens": 21
  }
}

能看到响应的具体回复在choices[0].message.content中

代码

基于上述API, 实现简单的chatBot, 代码如下:

<div id="app">
    <h1>OpenAI Chatbot with Vue 3</h1>
    <form @submit.prevent="handleSubmit">
        <label for="message">Type your message:</label>
        <input v-model="message" type="text" id="message" name="message">
        <button type="submit" id="submit">Submit</button>
    </form>
    <div v-if="history.length" id="history">
        <h2>Chat history:</h2>
        <ul>
            <li v-for="entry in history" :key="entry.timestamp">
                <p><strong>{{ formatDate(entry.timestamp) }}:</strong> {{ entry.message }}</p>
            </li>
        </ul>
    </div>
    <div v-if="botResponse" id="response">
        <p><strong>Bot:</strong> {{ botResponse }}</p>
    </div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
    data() {
        return {
            message: '',
            botResponse: '',
            apiKey: '', // 填入自己的token
            history: []
        };
    },
    mounted() {
        const storedHistory = localStorage.getItem('chatHistory');
        if (storedHistory) {
            this.history = JSON.parse(storedHistory);
        }
    },
    methods: {
        async handleSubmit() {
            const requestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${this.apiKey}`
                },
                body: JSON.stringify({
                    model: 'gpt-3.5-turbo',
                    messages: [{ role: 'user', content: this.message }]
                })
            };
            const response = await fetch('https://api.openai.com/v1/chat/completions', requestOptions);
            const data = await response.json();
            this.botResponse = data.choices[0].message.content;
            const entry = {
                timestamp: Date.now(),
                message: this.message,
                botResponse: this.botResponse
            };
            this.history.push(entry);
            localStorage.setItem('chatHistory', JSON.stringify(this.history));
            this.message = '';
        },
        formatDate(timestamp) {
            const date = new Date(timestamp);
            const options = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
            return date.toLocaleString('en-US', options);
        }
    }
});

app.mount('#app');

功能点

• 基础对话
• 对话历史记录
• Session切换
• 编辑提问

源码地址

HTML-Vue3版本

• RN版后续更新

参考文档

Open AI docs