小程序内嵌chagpt的聊天功能
小程序内嵌chagpt的聊天功能
yma16
发布于 2023-11-16 15:56:45
发布于 2023-11-16 15:56:45
背景
从2022年的年底，网上都是chagpt的传说，个人理解这个chatgpt是模型优化训练，我们在用chatgpt的时候就在优化这个模型，这个是付费的，换言之，我们都是chagpt的韭菜，OpenAI 是一个研究组织，chagpt是他们的一个产品工具。
带着好奇心做了个小程序的聊天页面。
效果
8行python搞定接口实现
def getOpenAiText(request):
if request.method == 'GET':
text = request.GET.get('text', default='')
responseText = openai.Completion.create(
model="text-davinci-003",
prompt=text,
max_tokens=100,
temperature=0
)
return JsonResponse({"data": responseText, "code": 200,"msg":'success'})
return JsonResponse({"data": {}, "code": 0,"msg":'not allowed'})设计
设计思路：灵感来源微信对话框模式一对一
只需要设计数据结构为
[{
question:‘’,
answer:‘’,
isEdit:false
}]可以显示问答的状态
在添加一个currentIndex标识编辑的状态，遍历数字显示，加上时间绑定即可实现，
缓存采用storage。
页面结构
<view class="container-future">
<view class="form-container-api">
<view>
<button style="width: 100%;" type="primary" formType="submit">openai调用</button>
</view>
<view class="chat-container">
<view wx:for="{{ chatObjConfig.option }}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="form-request">
<view wx:if="{{item.isEdit}}">问：$ <input bindinput="bindKeyInput" placeholder="输入关键词" data-column-index="{{index}}" disabled="{{isLoading}}" /></view>
<view wx:else class='questioned'>
<view>
问：$ {{item.question}}
</view>
</view>
</view>
<view class="form-response">
<view class='questioned'>openai回答：$ {{item.answer}}</view>
</view>
</view>
</view>
<view class="form-submit">
<button style="width: 100%;" type="primary" bindtap="search" loading="{{isLoading}}" disabled="{{isLoading}}">发送</button>
</view>
</view>
<view class="loading" wx:if="{{isLoading}}">
<view class="loader-child" />
<view class="loader-child" />
<view class="loader-child" />
</view>
</view>逻辑
// pages/future/future.js
const app = getApp();
const baseUrl = app.remoteConfig.baseUrl;
Component({
/**
* 继承父级样式
*/
options: {
addGlobalClass: true,
},
/**
*组件的初始数据
*/
data: {
searchOpenAiText:'',
responseText:'',
// questions，answer，index
chatObjConfig:{
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.dataset
console.log('this.data.chatObjConfig',this.data.chatObjConfig)
const option=this.data.chatObjConfig.option
option.some((item,index)=>{
if(columnIndex===index){
item.question=e.detail.value
item.isEdit=true
return 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;charset=UTF-8' }
const params={
"text":this.data.searchOpenAiText
}
const thisBack=this
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + path,
headers: headers,
data:params,
method: 'GET',
success: (res) => {
console.log(res,'res')
const data=res.data.data
const option=thisBack.data.chatObjConfig.option
const currentIndex=thisBack.data.chatObjConfig.currentIndex
const choices=data.choices
console.log('choices',choices)
option.some((item,index)=>{
if(currentIndex===index){
item.answer=choices?choices.map(choicesItem=>{return choicesItem.text}).join('\n'):'。。。未知'
item.isEdit=false
return true
}
return false
})
const chatObjConfig={
option:option,
currentIndex:currentIndex+1
}
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)
}
});
})
}
}
})本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2023-02-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读