概述

最近chatGpt爆火出圈，如果我们也想要亲身体验一把并将其实现到我们自己的静态页面上。

只需两步就能完成

1.获取token

国外注册比较简单，国内就比较麻烦。所以花钱在网上买了个账号，还不能登录，需要搭梯子才能登录。要求对方退钱，或者直接给一个token。对方说不能退钱，给了一个token。

2.写页面接口

<html>
<head>
<title>
chatGPT
</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" style="display: flex;flex-flow: column;margin: 20 ">
    <div style="display: flex;justify-content: center;align-items: center;margin: 20">
        <textarea type="text" v-model="info" cols="40" rows="3" style="margin:15"></textarea>
        <button v-on:click="ask()">发送</button>
    </div>
    <div style="display: flex;justify-content: center;align-items: center;"><textarea name="res" id="res" cols="100"
            rows="20">{{res}}</textarea></div>
</div>

<body>
<script language="javascript">
const { chatGPT } = Vue
    chatGPT({
        data() {
            return {
                reqInfo: '软件架构定义和组成',
                resInfo: '',
                token: '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'
            }
        },
        methods: {
            ask() {
                this.res = '请求中。。。。。。'
                axios.post('https://api.openai.com/v1/completions', {"model":"text-davinci-003","prompt":this.reqInfo,"max_tokens":2048,"temperature":0.7,"top_p":1,"frequency_penalty":0,"presence_penalty":0}, {
                    headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.token }
                }).then(response => { this.resInfo = response.data.choices[0].text })
            }
        }
    }).mount('#app')
</script>
</html>