不标榜自己,我们的价值取决于您
我们致力企业提供一站式全网营销方案
今天教大家怎么白嫖ChatGPT,零基础小白10秒搭建完成
文章出处: 万相科技 人气:1375 发表时间: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(){
conso