net网站建设,如何自学跨境电商,网络程序开发,运营和营销的区别和联系微信小程序_调用openAi搭建虚拟伙伴聊天背景效果关于账号注册接口实现8行python搞定小程序实现页面结构数据逻辑结速背景
从2022年的年底#xff0c;网上都是chagpt的传说#xff0c;个人理解这个chatgpt是模型优化训练#xff0c;我们在用chatgpt的时候就在优化这个模型网上都是chagpt的传说个人理解这个chatgpt是模型优化训练我们在用chatgpt的时候就在优化这个模型这个是付费的换言之我们都是chagpt的韭菜OpenAI 是一个研究组织chagpt是他们的一个产品工具。 带着好奇心做了个小程序的聊天页面。
效果
像个机器人聊天
关于账号注册
由于国内电话不支持绑定openAi的邮箱需要虚拟号码激活具体步骤网上都有教程
接口实现
8行python搞定
install openai获取apiKey调用即可向openai发送请求
def getOpenAiText(request):if request.method GET:text request.GET.get(text, default)responseText openai.Completion.create(modeltext-davinci-003,prompttext,max_tokens100,temperature0)return JsonResponse({data: responseText, code: 200,msg:success})return JsonResponse({data: {}, code: 0,msg:not allowed})小程序实现
设计思路灵感来源微信对话框模式一对一 只需要设计数据结构为 [{ question:‘’, answer:‘’, isEdit:false }] 可以显示问答的状态 在添加一个currentIndex标识编辑的状态遍历数字显示加上时间绑定即可实现 缓存采用storage。
页面结构
view classcontainer-futureview classform-container-apiviewbutton stylewidth: 100%; typeprimary formTypesubmitopenai调用/button/viewview classchat-containerview wx:for{{ chatObjConfig.option }} wx:for-indexindex wx:for-itemitem wx:keyindexview classform-requestview wx:if{{item.isEdit}}问$ input bindinputbindKeyInput placeholder输入关键词 data-column-index{{index}} disabled{{isLoading}} //view view wx:else classquestionedview问$ {{item.question}}/view/view/viewview classform-responseview classquestionedopenai回答$ {{item.answer}}/view/view/view/viewview classform-submitbutton stylewidth: 100%; typeprimary bindtapsearch loading{{isLoading}} disabled{{isLoading}}发送/button/view/viewview classloading wx:if{{isLoading}}view classloader-child /view classloader-child /view classloader-child //view
/view数据逻辑
// pages/future/future.js
const app getApp();
const baseUrl app.remoteConfig.baseUrl;
Component({/*** 继承父级样式*/options: {addGlobalClass: true,},/***组件的初始数据*/data: {searchOpenAiText:,responseText:,// questionsanswerindexchatObjConfig:{option:[{question:,answer:,isEdit:true}],currentIndex:0}},lifetimes: {// 生命周期函数可以为函数或一个在 methods 段中定义的方法名attached: function () {if(wx.getStorageSync(openAiOptions)){this.setData({chatObjConfig:wx.getStorageSync(openAiOptions)})}},moved: function () { },detached: function () {wx.setStorageSync(openAiOptions, this.data.chatObjConfig)},},methods: {bindKeyInput(e) {const {columnIndex}e.currentTarget.datasetconsole.log(this.data.chatObjConfig,this.data.chatObjConfig)const optionthis.data.chatObjConfig.optionoption.some((item,index){if(columnIndexindex){item.questione.detail.valueitem.isEdittruereturn true}return false})this.setData({searchOpenAiText:e.detail.value,chatObjConfig:{option:option,currentIndex:columnIndex}})},search(e){console.log(this.data.searchOpenAiText)if(!this.data.searchOpenAiText){wx.showModal({cancelColor: cancelColor,title:请输入})}wx.showLoading({title: 加载中,})this.setData({isLoading: true})console.log(e)const path /common-api/searchOpenAiText/const headers { Content-Type: application/json;charsetUTF-8 }const params{text:this.data.searchOpenAiText}const thisBackthisreturn new Promise((resolve, reject) {wx.request({url: baseUrl path,headers: headers,data:params,method: GET,success: (res) {console.log(res,res)const datares.data.dataconst optionthisBack.data.chatObjConfig.optionconst currentIndexthisBack.data.chatObjConfig.currentIndexconst choicesdata.choicesconsole.log(choices,choices)option.some((item,index){if(currentIndexindex){item.answerchoices?choices.map(choicesItem{return choicesItem.text}).join(\n):。。。未知item.isEditfalsereturn true}return false})const chatObjConfig{option:option,currentIndex:currentIndex1}option.push({question:,answer:,isEdit:true})thisBack.setData({isLoading: false,chatObjConfig:chatObjConfig})setTimeout(function () {wx.hideLoading()}, 2000)resolve(res)},fail: error {thisBack.setData({isLoading: false})setTimeout(function () {wx.hideLoading()}, 2000)reject(error)}});})}}
})结速
最后我的小程序yma16 欢迎大家访问
