品牌 资讯 搭配 材料 时尚 热点 行业 首饰 玉石 行情

全球微速讯:3小时!开发ChatGPT微信小程序

2022-12-21 17:46:47 来源:

导读 |上周OpenAI发布了对话语言模型 ChatGPT,相关讨论引爆全网。你是否也迫不及待体验一番?本文特邀作者腾讯云开发者社区作者戴传友从开发环境准备、开发过程、服务器接口、腾讯API网关接入到部署,详细教你如何动手开发一个chatGPT微信小程序。


【资料图】

在《ChatGPT-地表最强AI模型!要消灭人类?》、《算法工程师深度解构ChatGPT技术》两篇文章中,我们分别囊举了ChatGPT的丰富玩法并解析其工作原理。如果你对相关内容感兴趣,欢迎回溯围观~公众号的粉丝朋友们在评论区畅想了更多ChatGP应用实践,也有粉丝表示想要亲自体验下其奇妙之处。此次,我们邀请腾讯云开发者社区开发者由浅入深带你动手开发一个ChatGPT微信小程序,其中会详细介绍开发环境准备、项目实现、服务接口搭建、腾讯API网关接入、部署等环节。
准备工作1)小程序申请在微信中搜索 "ChatGPT"相关的小程序,检查有哪些名字未被占用。选好名字并记录准备144px*144px尺寸的logo,并在微信公众平台官网首页申请微信小程序。一般来说,大概3个小时左右就可以通过审核。2)openai 账号申请OpenAI( https://openai.com/)目前不在中国区域开展业务,国内不能正常的体验到openai提供的服务。账号的申请和注册具体教程,各位阅读者可以自行搜索。申请到账号之后,为了在代码中实对OpenAI 提供的 api ,我们还需要申请一个apiKey。这是通过代码访问ChatGPT的关键所在。账号申请成功后,访问https://beta.openai.com/account/api-keys页面生成apiKey。其中尤其注意保存好key(不能再次查看,如果丢失只能重新生成)。
至此,基本准备工作已全部完成,接下来将为各位开发者讲述核心代码的开发流程。开发环境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 更加简单。开发过程中,布局基本上是在使用view和text签,以及其它官方文档上说明的其他标签。但是各位在开发过程中,需要尤其关注官方文档中有关组件的内容。
开发过程1)如何引入 weui 组件
有两种组件接入方式可供选择:通过 useExtendedLib 扩展库 的方式引入。这种方式引入的组件将不会计入代码包大小。通过npm (opens new window)方式下载构建。npm包名为weui-miniprogram。如果你在开发过程中不想花大量时间研究npm且期望快速实现看到效果,又或者受困于小程序商店上架会限制到代码包大小(但是useExtendedLib 扩展库不计入代码包大小),个人建议选择了第一种方式。weui 官方参考文档如下:https://wechat-miniprogram.github.io/weui/docs/quickstart.html2)定义tabbar如果你觉得一个页面展示的信息过于单调,可以在小程序中使用tabbar。按照微信官方提供的自定义tabbar指引,你可以轻松把代码复制到项目工程中。本文把核心步骤代码公示出,更多细节有兴趣可以访问微信官方指引页,地址如下:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
主要步骤:在app.json 中新增 tabbar 配置信息

{    "pages": [        "pages/chat/index",        "pages/index/index",        "pages/logs/logs"    ],    "window": {        "backgroundTextStyle": "light",        "navigationBarBackgroundColor": "#fff",        "navigationBarTitleText": "ChatGPT",        "navigationBarTextStyle": "black"    },    "style": "v2",    "sitemapLocation": "sitemap.json",    "useExtendedLib": {        "weui": true    },    "tabBar": {        "color": "#1485EE",        "selectedColor": "#FF514E",        "list": [            {                "pagePath": "pages/chat/index",                "text": "ChatGPT概览"            },            {                "pagePath": "pages/index/index",                "text": "我的创作"            }        ]    }}

值得注意的是,tabBar-list-pagePath的路径需要存在,否则编译器会报错。此处我把项目的工程目录截图公开,各位对比上下文配置信息更容易理解。3) 编写主界面规划的界面中只需要一个输入框及一个询问按钮。当用户点击询问按钮的时候,获取输入框中的值,去请求服务器的/ask接口获取结果。获取数据之后,再展示到页面中的结果展示中。确定了这个基本流程,接下来只要知道这些基本组件在微信小程序里面使用什么标签就好了。更多的细节可以访问 微信小程序的开发文档。

请输入你想要解决的问题:
0/50
回复: {{result}}
{{message}}

4)绑定点击事件在form表单上绑定事件:

然后在对应的js文件里面定义submitForm方法。
5)请求服务器接口

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并且映射到我们自己的服务器。
更多腾讯云api 介绍:https://cloud.tencent.com/developer/article/1877519
2)部署过程在微信开发者工具里面进行代码上传,然后在微信小程序后台里面就能看到上传的版本。建议各位开发者提交审核之前用真机扫描体验一下,有bug及时修复。
确认无误后就可以提交审核了,系统提示1-7个工作日内完成。审核完成后,手动进行 “全量” 或者 “灰度” 发布,你的Chatgpt小程序就能在微信内被搜索到。腾讯工程师技术干货直达:

1、算法工程师深度解构ChatGPT技术

2、耗时减半?腾讯云OCR只做了3件事

3、探秘微信业务优化:DDD从入门到实践

4、10分钟!从架构视角读懂K8s

粉丝福利,后台回复“ChatGPT”获得本篇作者推荐相关学习材料

标签:

(责任编辑:new01)

相关文章

全球微速讯:3小时!开发ChatGPT微信小程序

​导读|上周OpenAI发布了对话语言模型ChatGPT,相关讨论引爆全网。你是否也迫不及待体验一番?本文特邀作者腾讯云开发者社区作者戴传友从开发环

2022-12-21 17:46:47

环球焦点!协程这么好,它能完全代替线程么?

​好多问题呀,开始回答或者提问前,其实可以看看问题本身是不是有问题,像黄执中一样。------这个问题首先前提就有问题,谁说协程那么好的?任

2022-12-21 11:52:35

3000吨级自升式风电安装船交付启航|全球看热讯

​当日,由江苏启东中远海运海工为国外客户订制的N966自升式风电安装船交付启航。据介绍,该船主吊机起重能力超过3200吨,最大吊高达325米,最大

2022-12-21 05:21:25

和讯SGI公司|九安医疗和讯SGI指数持续高位 产品单一终是隐患

​九安医疗(002432)所处行业涉及IVD及家用医疗健康产品领域、互联网医疗领域。截止三季度,九安医疗所从事的主要业务、经营模式及主要业绩驱动因

2022-12-20 17:03:06

A股异动 | 航天电子盘中涨6% 控股子公司引入8名战略投资者 获38亿增资 全球即时

​格隆汇12月20日丨航天电子盘中涨6 46%,报6 76元,总市值184亿元。航天电子19日公告,近日,公司控股子公司航天飞鸿公司在北京产权交易所以挂

2022-12-20 11:12:48

天天观热点:Polkadot 能否达到与 L2 解决方案相当的出块时间?| W3F 12 月 AMA

​加入PolkaWorld社区,共建Web3 0!Web3基金会技术教育和Grant负责人Bill在Reddit上举办了2022年最后一

2022-12-19 23:46:10

业务流程建模,细到几层?

​​在我做的BDF框架中,业务建模是非常重要的一个能力之一。因为有了建模能力,就可以提供面向于不同目标用户的可解释能力了。这种可解释能力可

2022-12-19 16:21:55

【当前热闻】异动快报:*ST亚联(002316)12月19日10点44分触及跌停板

​12月19日盘中消息,10点44分*ST亚联(002316)触及跌停板。目前价格3 83,下跌4 96%。其所属行业多元金融目前下跌。领涨股为拉卡拉。该股为数字

2022-12-19 10:38:41

切勿松懈!太康县委政法委召开疫情防控推进工作会

​整理简报,编发信息 4月26日,上午下班后,太康县委政法委涉法涉诉信访室主任李斌和办公室几名工作人员仍在有条不紊地工作着。李斌等人工

2022-12-19 01:03:34

环球热议:两部门印发《血站新冠病毒感染防控工作指引(第二版)》

​为落实进一步优化新冠肺炎疫情防控措施相关要求,指导采供血机构科学有效做好无偿献血工作,国家卫生健康委办公厅、中央军委后勤保障部卫生局

2022-12-18 13:34:52

疫情过渡期,“居家羊”工资如何发放?

​疫情防控政策优化调整后,新冠阳性感染者从集中隔离转为以居家隔离为主。北京市新冠隔离人员工资标准依据的是《北京市高级人民法院北京市劳动

2022-12-17 15:33:57

12月16日基金净值:兴全合远两年持有混合A最新净值0.8511,跌0.13% 全球观点

​12月16日,兴全合远两年持有混合A最新单位净值为0 8511元,累计净值为0 8511元,较前一交易日下跌0 13%。历史数据显示该基金近1个月下跌1 73%

2022-12-17 01:19:30

Xilinx@OFC16:B100G复用转发器方案可扩展至400G光传输-每日速递

​varplayer=polyvObject( & 039; plv_608c319f9fac7d8f73fd7dcbeab1bd62_6 & 039;) videoPlayer({ & 039;width & 039;: & 039;680 & 039;, & 039;height & 039;: & 039;383 & 039;, & 039;vid & 039;: & 039;608c31

2022-12-16 16:31:31

天天信息:阳煤化工:公司目前暂未收到股东关于股权转让和股权质押事项新的通知

​同花顺(300033)金融研究中心12月16日讯,有投资者向阳煤化工(600691)提问,你好,当前的股东华阳集团(002906)是否控股?股权质押情况如

2022-12-16 10:08:06

冠石科技: 关于股东减持达到1%的补充公告 天天资讯

​证券代码:605588       证券简称:冠石科技          公告编号:2022-046               南京冠石科技股份

2022-12-15 22:18:35

华大九天:公司以实现我国EDA自主发展为己任,通过不断开发新产品和新技术,加速EDA工具国产化进程_环球资讯

​华大九天(301269)11月29日在投资者关系平台上答复了投资者关心的问题。

2022-12-15 15:23:35

国家统计局:前11月全国房地产开发投资下降9.8%|微速讯

​国家统计局:前11月全国房地产开发投资下降9 8%2022年12月15日10:21中国网财经

2022-12-15 10:19:08

对乙酰氨基酚VS布洛芬,到底谁更胜一筹? 环球微动态

​目前,对乙酰氨基酚和布洛芬已经成为家庭常备的镇痛解热药物。然而二者的化学结构、作用强度、不良反应又有明显的差别,该如何做出正确选择呢

2022-12-14 20:56:38

西北工业大学法学系师生到宜阳县人民检察院开展社会实践活动

​西北工业大学法学系师生在参观中大河网讯7月5日,宜阳县人民检察院迎来一群特殊的“客人”——西北工业大学法学系师生,开展社会实践的他们...

2022-12-14 14:49:58

微头条丨突发大利好!拜登:超预期!美股却跳水800点 中概股走强…能源行业“里程碑式成就”来了

​当地时间12月13日,美股三大指数收盘集体上涨,但较盘初涨幅大幅回落。道指涨0 30%,标普500指数涨0 73%,纳指涨1 01%。美国11月通胀数据涨幅

2022-12-14 08:47:22

光华科技: 北京市中伦(广州)律师事务所关于公司2022年第四次临时股东大会的法律意见书

​广州市天河区珠江新城华夏路 10 号富力中心 23 层                           邮政编码:510623      

2022-12-13 18:09:48

高职幼教:怎样教出孩子喜欢的好老师 当前热讯

​原标题:高职幼教:怎样教出孩子喜欢的好老师“双师型”教师队伍建设,历来是职业教育改革与发展的关键一环。对于高职幼教专业的教师来说,...

2022-12-13 10:58:45

*ST华源: 关于发行股份购买资产并募集配套资金暨关联交易报告书修订说明的公告

​证券代码:600726 900937   证券简称:*ST 华源 *ST 华电 B   公告编号:临 2022-092                 华电能源

2022-12-12 22:11:46

移动5G助力东方特钢持续提升“含智量”

​继实现东方特钢原料场堆取料机5G远程控制后,近日,常州移动又发挥5G优势,助力东方特钢开展高炉煤仓抓斗行车无人化改造,进一步提升企业“含

2022-12-12 15:26:07

思派健康(00314.HK)12月12日起招股 发售价将为每股18.6港元

​格隆汇12月12日丨思派健康发布公告,公司拟全球发售991 94万股股份,其中中国香港发售股份99 2万股,国际发售股份892 74万股,另有15%超额配股

2022-12-12 06:39:23

阳煤化工:目前公司股权转让事项正在积极推进,如有进展公司将第一时间进行披露_微头条

​阳煤化工(600691)12月09日在投资者关系平台上答复了投资者关心的问题。投资者:为什么股权划转一年半以上了,潞安化工还没有入主阳霉化工?潞

2022-12-09 10:12:01

高通胀侵蚀收入 美国10月消费信贷增加271亿美元

​智通财经APP获悉,美国10月份消费信贷较上月加速增长,反映出信用卡余额增加和非循环贷款稳步增长。美联储公布的数据显示,继9月份增加近260亿

2022-12-08 09:05:29

当前资讯!新乳业: 关于召开2022年第二次临时股东大会的通知

​证券代码:002946             证券简称:新乳业        公告编号:2022-065债券代码:128142              债券

2022-12-06 23:55:41

千叶珠宝发布2022年半年报 净利润同比下降42.54%

​8月31日,千叶珠宝(代码:833585 NQ)发布2022年半年报业绩报告。2022年1月1日-2022年6月30日,公司实现营业收入4 09亿元,同比下降30 81%,

2022-09-16 14:18:31

促进企业做强做优 秦皇岛市共有省级“专精特新”中小企业125家

​今年上半年,公司顺利通过河北省工业设计中心、河北省工业企业研发机构、‘专精特新’中小企业认定,预计可获得奖励100余万元,

2022-08-22 13:37:42