使用VUE构建AI聊天机器人 - 免费体验文心GPT - 常规

<p><!doctype html></p>
<html class='no-js' lang=''>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='x-ua-compatible' content='ie=edge'>
        <title>Ai Chat公益版</title>
        <meta name='description' content='文心GPT免费体验,文心GPT在线体验,文心GPT官网地址,文心GPT免登录,文心GPT免注册,与Ai对话，请描述您的需求-支持中文、英语、日本语等,文心GPT和本网站都是基于open ai实现的'/>
        <meta name='keywords' content='文心GPT 人工智能文心GPT 聊天机器人文心GPT 文心GPT免费 文心GPT在线体验 文心GPT官网 文心GPT登录 文心GPT注册 文心GPT地址'/>
        <style>
            #chatgpt-response {
                font-family: '宋体';
                font-size: 20px;
                color: #0000FF;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <div id='chatgpt-response'>{{response}}</div>
            <div>
                <input type='text' v-model='message' @keyup.enter='sendMessage'>
                <button @click='sendMessage'>发送</button>
            </div>
        </div>
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: '',
                    response: ''
                },
                methods: {
                    sendMessage: function () {
                        var self = this;
                        fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Bearer YOUR_API_KEY'
                            },
                            body: JSON.stringify({
                                prompt: '请描述您的需求：' + self.message,
                                max_tokens: 50,
                                n: 1,
                                stop: ['\n']
                            })
                        })
                        .then(function (response) {
                            return response.json();
                        })
                        .then(function (data) {
                            self.response = data.choices[0].text;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                        self.message = '';
                    }
                }
            });
        </script>
    </body>
</html>