3小时!开发ChatGPT微信小程序
2022-12-19 00:37:29 来源:
导读 |上周OpenAI发布了对话语言模型 ChatGPT,相关讨论引爆全网。你是否也迫不及待体验一番?本文特邀作者腾讯云开发者社区作者戴传友从开发环境准备、开发过程、服务器接口、腾讯API网关接入到部署,详细教你如何动手开发一个chatGPT微信小程序。
在《ChatGPT-地表最强AI模型!要消灭人类?》、《算法工程师深度解构ChatGPT技术》两篇文章中,我们分别囊举了ChatGPT的丰富玩法并解析其工作原理。如果你对相关内容感兴趣,欢迎回溯围观~公众号的粉丝朋友们在评论区畅想了更多ChatGP应用实践,也有粉丝表示想要亲自体验下其奇妙之处。此次,我们邀请腾讯云开发者社区开发者由浅入深带你动手开发一个ChatGPT微信小程序,其中会详细介绍开发环境准备、项目实现、服务接口搭建、腾讯API网关接入、部署等环节。至此,基本准备工作已全部完成,接下来将为各位开发者讲述核心代码的开发流程。开发环境1)新建小程序首先,根据自己的实际情况下载对应版本的微信开发者工具。下载地址如下:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html其次,我个人建议新建小程序时选择最简单的基础模版,并勾选使用微信云开发环境。去除繁杂的配置以便你能更快速的对微信小程序的代码结构有初步了解。我成文时,因为申请的小程序还没有审核通过,所以选择下述测试号用来进行开发。2)环境介绍导出初始化项目之后,你会看到比较清晰的文件结构。小程序开发跟普通的html、css、js 三剑客用来开发网页没有本质的区别。在微信体系内,wxml、wxss、js 都是 html、css、js的子集。页面的结构在wxml 中写,用到的样式在 wxss中定义;变量和函数以及网络请求 等在 js 中执行。简单说来,小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。这里的 app 是指放在根目录的 app.js、app.json、app.wxss 这三个文件,他们主要负责全局性的逻辑、配置及样式。pages 则是你即将编写的多个页面。多个 pages 之间可以通过官方提供的导航功能进行跳转。每个 page 页面由 page.js、page.json、page.wxml、page.wxss 四个文件组成。其中 WXML 页面类似 HTML 文件,主要负责页面的结构。相比于HTML而言,WXML 更加简单。开发过程中,布局基本上是在使用submitForm: function (e) { //一般前置检查代码 ... const that = this wx.request({ url: "http://youdomain.com/api/xxxx", method: "post", header: {"content-type": "application/x-www-form-urlencoded"}, data: data, success(rsp) { console.log("ask result-----",rsp.data) that.setData({ result: rsp.data.data.rsp, disabled: false, loading: false, }) }, complete(d) { console.log(d) } }) console.info("form.submited") ....其他相关代码},值得注意的是,上面用到的url需要在小程序中进行域名白名单注册,否则无法被访问到。同时进行注册的域名,需要进行备案。配置地址:登录微信小程序管理后台,在开发管理-服务器域名中进行配置。如下图。上述内容搭建完成后,下一步是配置服务器。本着快速开发的原则,可以借用“现成的轮子”,保障效率第一。各位可以参考现有的api-server脚手架(https://github.com/wytxer/template-node-egg)。之后配置接口名字以及对应的handle。我定义了一个名字叫做 /ask 的接口名字,同时定义了处理ask接口的 handle函数如下。
async ask() { const { request, helper, axios, logger } = this.ctx const { message } = request.body logger.info("requset body===", request.body) logger.info("message===",message) ...其余相关代码 这里的token就是前面提到的在openai上申请到的token const config = { headers: { Authorization: `Bearer ${token}` } } const req = { model: "text-curie-001", prompt: message, max_tokens: 2000, temperature: 0.5 } console.log("req===",req) let text = "" const result = await axios.post("https://api.openai.com/v1/completions", req, { timeout: 300000, headers: { Authorization: "Bearer ${token}" } }) .then(rsp => { console.log("pdf file result", rsp) if (rsp.choices) { text = rsp.choices[0].text } }) .catch(err => { console.log("pdf file error", err) }) const data = { rsp: text } helper.success(data, "success")}这里的token就是前面提到的在openai上申请到的token ,注意不要泄漏。腾讯api网关接入及部署1)网关接入考虑到并发能力,频率限制,自动扩容等能力的接入,我选择了腾讯云api网关。如何把api通过腾讯云暴露到外网呢?首先,访问https://console.cloud.tencent.com/apigateway/service?rid=1。其次,新建一个service,并且选择https协议【微信要求https协议】。最后,新建接口ask并且映射到我们自己的服务器。2)部署过程在微信开发者工具里面进行代码上传,然后在微信小程序后台里面就能看到上传的版本。建议各位开发者提交审核之前用真机扫描体验一下,有bug及时修复。粉丝福利,后台回复“ChatGPT”获得本篇作者推荐相关学习材料
关键词:
相关新闻
- 3小时!开发ChatGPT微信小程序
- 当前消息!还能统治!詹皇31+7+8外线神准 6记三分轰垮对手
- 科恒股份:公司毛利率主要受原材料价格、人工成本持续上升及竞争态势的影响
- 好利来创始人罗红开蛋糕店很成功还很爱摄影 但一直未披露过学历
- 本周盘点(12.12-12.16):新华传媒周跌0.26%,主力资金合计净流出669.47万元
- 只有医用防护口罩(GB19083-2010)等五种编码口罩能防疫
- 箭牌家居: 关于董事会、监事会完成换届选举及聘任高级管理人员等人员的公告_当前滚动
- 贵人鸟(603555)12月15日主力资金净卖出198.61万元 天天观点
- 天风证券:给予国瓷材料买入评级,目标价位41.25元
- 资讯:新华百货: 银川新华百货商业集团股份有限公司《董事会各专门委员会实施细则》2022年12月修订
- 工伤赔偿基本工资都包括哪些内容
- 全球报道:【机构调研记录】上投摩根基金调研楚江新材、龙磁科技
- 浙江仙通: 浙江仙通股东大会议事规则(2022年12月修订)
- 医渡科技(02158.HK)早盘涨近25%,截至发稿,涨16.98%,报7.99港元,成交额2.51亿港元
- 天天热头条丨亨通光电: 亨通光电第八届监事会第十七次会议决议公告
- 每日热讯!蓝科高新(601798)12月12日主力资金净卖出920.18万元
- 天天百事通!三年最高点!春节前机票搜索量暴涨 航空业复苏即将到来
- 环球今日报丨新莱应材(300260)12月8日主力资金净卖出3288.92万元
- 【机构调研记录】惠升基金调研江航装备
- 股票行情快报:ST金鸿(000669)12月6日主力资金净买入9.51万元
- 摩托车又火了!2022年上半年北京报考摩托车超120028人
- Stellantis考虑对墨西哥的工厂进行改造 生产混合动力和电动汽车
- 本田公布“成绩单”:6月热销14.1万辆超过比亚迪
- 淮北市相山区总工会组织求职者走进企业体验岗位