今天教大家怎么白嫖ChatGPT，零基础小白10秒搭建完成

文章出处：万相科技人气：2870 发表时间：2024-01-09 21:57:40

近期的ChatGPT有多火，功能有多强大就不再复述了，今天主要给大家分享怎么实现自用。最近因国内的环境和OpenAI对国内政策不友好等因素，之前我们能正常使用的公众号或者网页版都陆续关闭，话不多说上干活。

一、我们的公众号首页菜单栏的“AI写作”功能可以满足您的需求，也可以访问http://ai.sc9.cn网页版使用，但是考虑成本问题，每天只能免费给大家使用10次哟，主要目的还是分享给大家研究和学习使用，如有很好的应用场景，我们可以深度探讨哦。

二、以下是分享Html源码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app" style="display: flex;flex-flow: column;margin: 20 ">    <scroll-view scroll-with-animation scroll-y="true" style="width: 100%;">        <!-- 用来获取消息体高度 -->        <view id="okk" scroll-with-animation>            <!-- 消息 -->            <view v-for="(x,i) in msgList" :key="i">                <!-- 用户消息 头像可选加入-->                <view v-if="x.my" style="display: flex;                flex-direction: column;                align-items: flex-end;">
                    <view style="width: 400rpx;">                        <view style="border-radius: 35rpx;">                            <text style="word-break: break-all;">{{x.msg}}</text>                        </view>                    </view>
                </view>                <!-- 机器人消息 -->                <view v-if="!x.my" style="display: flex;                flex-direction: row;                align-items: flex-start;">
                    <view style="width: 500rpx;">                        <view style="border-radius: 35rpx;background-color: #f9f9f9;">                            <text style="word-break: break-all;">{{x.msg}}</text>                        </view>                    </view>                </view>            </view>

            <view style="height: 130rpx;">
            </view>        </view>
    </scroll-view>
    <!-- 底部导航栏 -->    <view style="position: fixed;bottom:0px;width: 100%;display: flex;    flex-direction: column;    justify-content: center;    align-items: center;">    <view style="font-size: 55rpx;display: flex;        flex-direction: row;        justify-content: space-around;        align-items: center;width: 75%;    margin: 0;"><input @blur='entapi' required v-model="api" type="text" style="width: 75%;            height: 45px;            border-radius: 50px;            padding-left: 20px;            margin-left: 10px;background-color: #f0f0f0;" @confirm="sendMsg" confirm-type="search"                placeholder-class="my-neirong-sm" placeholder="输入apikey 样式:sk-s5S5BoV... "  /></view>        <view style="font-size: 55rpx;display: flex;        flex-direction: row;        justify-content: space-around;        align-items: center;width: 75%;    margin: 20;">
            <input v-on:keyup.enter="sendMsg"  v-model="msg" type="text" style="width: 75%;            height: 45px;            border-radius: 50px;            padding-left: 20px;            margin-left: 10px;background-color: #f0f0f0;" @confirm="sendMsg" confirm-type="search"                placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题,回车或者点击后面发送按钮" />            <button @click="sendMsg" :disabled="msgLoad" style="height: 45px;            width: 20%;;    color: #030303;    border-radius: 2500px;" >{{sentext}}</button>        </view>    </view>    </view></div><script>    const { createApp } = Vue    createApp({        data() {            return {                api: '',                msgLoad: false,                anData: {},                sentext: '先输入api再发送问题',
                animationData: {},                showTow: false,                msgList: [{                    my: false,                    msg: "你好我是openAI机器人,请问有什么问题可以帮助您?"                }],                msgContent: "",                msg: ""            }        },        methods: {              entapi(){        console.log('11');        this.sentext = 'api检测中'        axios.post('https://api.openai.com/v1/completions', {            prompt: '你好呀', max_tokens: 2048, model: "text-davinci-003"        }, {            headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.api }        }).then(res => {          console.log('suss',res);          this.msgLoad = false          this.sentext = '发送'                            }).catch(error =>{          console.log('error',error);          console.log(error.code);          if(error.code == 'ERR_BAD_REQUEST'){            this.sentext = 'apikey错误，检查确认后重新输入'            this.msgLoad = true                        return 0;          }                          })      },            sendMsg() {
                // 消息为空不做任何操作                if (this.msg == "") {                    return 0;                }        if (this.api == ""){          this.sentext = '请输入apikey再进行请求'          return 0;        }                this.sentext = '请求中'                this.msgList.push({                    "msg": this.msg,                    "my": true                })                console.log(this.msg);                this.msgContent += ('YOU:' + this.msg + "n")                this.msgLoad = true                // 清除消息                this.msg = ""                axios.post('https://api.openai.com/v1/completions', {                    prompt: this.msgContent, max_tokens: 2048, model: "text-davinci-003"                }, {                    headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.api }                }).then(res => {                    console.log(res);                    let text = res.data.choices[0].text.replace("openai:", "").replace("openai：", "").replace(/^n|n$/g, "")                    console.log(text);                    this.msgList.push({                        "msg": text,                        "my": false                    })                    this.msgContent += (text + "n")                    this.msgLoad = false                    this.sentext = '发送'                }).catch(error =>{          console.log('error',error);          console.log(error.code);          this.sentext = '请求失败,重新输入问题发送'          this.msgLoad = false                                              })
            },

        }    }).mount('#app')</script>