如何調(diào)用openai的api
<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%;">
? ? ? ? <!-- 用來(lái)獲取消息體高度 -->
? ? ? ? <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>
? ? ? ? ? ? ? ? <!-- 機(jī)器人消息 -->
? ? ? ? ? ? ? ? <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>
? ? <!-- 底部導(dǎo)航欄 -->
? ? <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: 20;">
? ? ? ? ? ? <input 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="用一句簡(jiǎn)短的話描述您的問(wèn)題" />
? ? ? ? ? ? <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: '替換為在官網(wǎng)申請(qǐng)到的接口',
? ? ? ? ? ? ? ? msgLoad: false,
? ? ? ? ? ? ? ? anData: {},
? ? ? ? ? ? ? ? sentext: '發(fā)送',
? ? ? ? ? ? ? ? animationData: {},
? ? ? ? ? ? ? ? showTow: false,
? ? ? ? ? ? ? ? msgList: [{
? ? ? ? ? ? ? ? ? ? my: false,
? ? ? ? ? ? ? ? ? ? msg: "你好我是openAI機(jī)器人,請(qǐng)問(wèn)有什么問(wèn)題可以幫助您?"
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? msgContent: "",
? ? ? ? ? ? ? ? msg: ""
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? sendMsg() {
? ? ? ? ? ? ? ? // 消息為空不做任何操作
? ? ? ? ? ? ? ? if (this.msg == "") {
? ? ? ? ? ? ? ? ? ? return 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.sentext = '請(qǐng)求中'
? ? ? ? ? ? ? ? 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 = '發(fā)送'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? }
? ? }).mount('#app')
</script>
