ChatGPT微信小程序

ChatGPT是人工智能研究实验室OpenAI在2022年11月30日发布的全新聊天机器人模型。

准备工作

1.ChatGPT账户:上某宝5软妹币一个，账户有18刀的余额(接口请求要收费的，所以后面放弃了)。
2.梯子：没有梯子访问官网会被提示 OpenAI's services are not available in your country.
3.apiKey：通过梯子和账户登上ChatGPT官网, 再前往apiKeys管理页面进行申请。

后端

因为采用的是简单的接口访问ChatGPT接口，再返回给小程序，所以只需要一个简单的node应用。

代码与注释

const express = require('express')
const axios = require('axios')
const app = express()app.use(express.urlencoded({ extended: false }))// ChatGPT官网申请的apiKey，我的第二天就失效了，要重新申请
const apiKey = 'sk-HySXDJmHfsadkkaslkdjaslkdjasldkjasdkljasd'// 定义前端请求接口路径
app.post('/message', async (req, res) => {const { message, type} = req.body// 模型const model = type === 'code' ? 'code-davinci-002' : 'text-davinci-003'const data = {  model,prompt: message,  // 发送的消息max_tokens: 2000,  temperature: 0.5  //  可以简单理解为精准度， 0最精准~1最灵动}  try {// 通过axios请求const result = await axios.post('https://api.openai.com/v1/completions', data, {  timeout: 300000,headers: { Authorization: `Bearer ${apiKey}` }})//  判断是否有回答if(result.data.choices && result.data.choices[0].text){res.status(200).send(result.data.choices[0].text)}else{// 没有回答内容res.status(200).send('下次一定会~')}} catch (error) {// token过期或其他报错console.error(error)res.status(400).send('出错了哦~')}
})var server = app.listen(8002, () => {var host = server.address().address;var port = server.address().port;console.log('Example app listening at http://%s:%s', host, port);
})

小程序端

vue3与uniapp开发

页面代码

<template><view class="page-container"><u-navbar :is-fixed="false" :back-text-style="{color: '#56B6C2'}" :title-width="320" :back-icon-size="0" back-text="About" :title-bold="true" :custom-back="goAbout" class="navbar" :title="navTitle"></u-navbar><view class="box"><scroll-view class="chat-box" scroll-y :style="{height: `${winHeight - navbarHeight}px`}" :scrollIntoView="scrollIntoView" :scroll-with-animation="true" :show-scrollbar="false" :enhanced="true"><view v-for="(item, index) in chatHistory" :key="index"><view class="pop" :class="{'is-Q': item.type === 'Q'}"><view class="info"><text>{{item.type === 'A' ? 'A :' : ': Q'}}</text></view><view class="content"><uParse :content="item.value"></uParse></view></view></view><view style="height: 220rpx" id="btm"></view></scroll-view><view class="input-wrap" :class="{'is-hidekeyboard': keyboardHeight === 0}":style="{bottom: `${keyboardHeight}px`}"><textareav-model="text"class="input"type="text":fixed="true":show-confirm-bar="false":disable-default-padding="true":autoHeight="true":adjust-position="false"@keyboardheightchange="keyboardheightchange"@confirm="sendData"/><view class="btn" @click="sendData">发送</view></view></view><view class="about">About</view></view>
</template><script setup lang="ts">
import { ref, getCurrentInstance, nextTick, watch } from "vue";
import { onReady } from "@dcloudio/uni-app";
import uParse from "@/components/u-parse/u-parse.vue";
import * as marked from "marked";
type chatItem = {type: "A" | "Q";value: string;
};const _this = getCurrentInstance();
const loading = ref(false);
const text = ref("");
const scrollIntoView = ref("")
const winHeight = uni.getSystemInfoSync().windowHeight
const keyboardHeight = ref(0)
const navbarHeight = ref(uni.upx2px(100))
const navTitle = ref('ChatGPT Openai')const chatHistory = ref<chatItem[]>([
]);onReady(() => {uni.createSelectorQuery().in(_this).select('.navbar').boundingClientRect(rect => {rect = rect as UniApp.NodeInfonavbarHeight.value = rect.height!}).exec()
})const sendData = () => {if (loading.value || text.value === "") return;loading.value = true;scrollIntoView.value = 'btm'chatHistory.value.push({type: "Q",value: text.value,});nextTick(() => {text.value = "";})setTimeout(() => {scrollIntoView.value = ''}, 500)uni.request({url: 'http://localhost:8002/message',method: "POST",data: {message: text.value,},header: {"content-type": "application/x-www-form-urlencoded",},success: (res) => {let v: stringif(res.data){v = marked.marked(res.data as string);}else{v = '暂时想不出来，下次一定会哈~'}chatHistory.value.push({type: "A",value: v,});nextTick(() => {scrollIntoView.value = 'btm'setTimeout(() => {scrollIntoView.value = ''}, 500)})},complete: () => {loading.value = false;},});
};const keyboardheightchange = (e: any) => {keyboardHeight.value = e.detail.height
}const goAbout = () => {uni.navigateTo({url: '/pages/about/index'})
}watch(() => loading.value, (v) => {if(v){navTitle.value = '正在输入聊天内容...'}else{navTitle.value = 'ChatGPT Openai'}
})
</script><style lang="scss">
.page-container {font-size: 26rpx;line-height: 52rpx;view,input,text,scroll-view,textarea {box-sizing: border-box;font-size: 32rpx;}.box {background-color: #f5f6fb;}.chat-box {height: 100vh;padding: 50rpx 30rpx 0rpx;}.pop {margin-bottom: 50rpx;&.is-Q{text-align: right;.info{flex-direction: row-reverse;.avatar{margin-left: 20rpx;}}}}.info{display: flex;margin-bottom: 20rpx;color: #666;}.avatar {height: 80rpx;width: 80rpx;margin-right: 20rpx;border-radius: 50%;}.content{display: inline-block;width: auto;max-width: calc(100%);word-wrap: break-word;word-break: break-all;background-color: #fff;border-radius: 18rpx;padding: 20rpx;text-align: left;}
}
.code {display: block;overflow-x: auto;padding: 30rpx;
}.code {color: #abb2bf;background: #282c34;
}
.input {min-height: 70rpx;width: 100%;margin-right: 20rpx;padding: 15rpx 20rpx;background-color: #f7f7f7;
}
.input-wrap {position: fixed;bottom: 0;left: 0;background-color: #fff;padding: 10rpx;display: flex;justify-content: space-between;align-items: center;border-radius: 10rpx;width: 100%;&.is-hidekeyboard{padding-bottom: var(--safe-area-inset-bottom);}
}
.btn {height: 70rpx;line-height: 70rpx;background-color: #56b6c2;padding: 0 30rpx;border-radius: 6rpx;color: #fff;font-weight: 500;white-space: nowrap;&:active {opacity: 0.7;}&::after {background-color: none;}
}
.text {font-size: 30rpx;
}.about{position: fixed;left: 30rpx;top: 0rpx;font-size: 28rpx;// font-weight: bold;width: 120rpx;border-radius: 8rpx;background-color: #56b6c2;text-align: center;line-height: 66rpx;color: #fff;
}
</style>

运行效果

Tips: 开发测试共两天，18美金就用(好)完(贵)了。有趣的东西也尝尝鲜~

ChatGPT微信小程序相关推荐

ChatGPT微信小程序搭建总结
经过长达一个多月的努力,我完成了我的第一个项目--用chatgpt搭建微信小程序,今天对这个项目的完成进行总结. 其一,是我对用chatgpt搭建微信小程序项目的理解,包括项目的架构与操作流程.我认为 ...
chatgpt智能问答微信小程序+后端源码+视频搭建教程
chatgpt智能问答微信小程序+后端源码+视频搭建教程,这是一套微信小程序,后端是thinkphp框架为接口的,后端是前后端分离用elmentUI的源码框架. 小狐狸GPT付费体验系统是一款基于Th ...
免注册免登录，微信小程序 ChatGPT 智能问答一键体验
基于ChatGPT开发的'ChatBot智能问答'的微信小程序,它能快速准确地回答你的各种问题.无论是学习.工作还是生活,它都能为你提供帮助.使用起来非常方便,只需在微信中打开小程序搜索'ChatBo ...
基于ChatGPT的智能问答、ai绘图微信小程序思路
ChatGPT ![在这里插入图片描述](https://img-blog.csdnimg.cn/186d9ecc453b48be9f19c467da7c3f07.jpeg ChatGPT是opena ...
微信小程序_把chatgpt聊天数据复制到剪切板
文章目录 ⭐ 前言 ⭐ 开始网格背景样式配置对话框样式配置复制到剪切板 ⭐ 结束 ⭐ 前言大家好,我是yma16,不止前端,本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据. ...
在微信小程序上搭建CHATGPT，具体的操作步骤
首先,您需要登录微信小程序,然后在搜索框中输入"CHATGPT",就可以看到相关的小程序,点击它,就可以进入CHATGPT的主页.在主页上,您可以看到CHATGPT的介绍和使用说明 ...
ChatGPT都说厉害的东西，零基础，3个小时完成微信小程序的制作并发布
ChatGPT都说厉害的东西,零基础,3个小时完成微信小程序的制作并发布目录 ChatGPT都说厉害的东西,零基础,3个小时完成微信小程序的制作并发布一.事情的起因(先解释一些因素,可以选择跳过) ...
用ChatGPT通过WebSocket开发一个交互性的五子棋微信小程序（二）
文章目录 1 前言 1.1 实现的原理 1.2 如何与微信小程序联系 2 五子棋项目 2.1 申请OpenAI的API 2.2 调用API代码 2.3 界面代码 3 同步五子棋到前端小程序 3.1 W ...
微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天背景效果关于账号注册接口实现 8行python搞定小程序实现页面结构数据逻辑结束背景从2022年的年底,网上都是chagpt的传说,个人 ...

ChatGPT微信小程序

准备工作

后端

代码与注释

小程序端

页面代码

运行效果

ChatGPT微信小程序相关推荐

最新文章

热门文章