uniapp-Aai绘图小程序搭建教程

473 阅读3分钟

应用名称:Aai绘图工具

支持Ai功能:文生图、图生图、艺术二维码、Ai消除去水印、局部重绘、老照片修复、高清放大、图片转漫画、图片扩展、Ai抠图

绘图费用

  1. 一般生图费用:0.09/张,包含高清修复的:0.15/张
  2. 如果用量较多可以拿到半价:0.045/张,包含高清修复的:0.075/张

支持平台(支持uniCloud阿里云空间)

  1. 支持微信H5公众号版 PC电脑版。(需要已认证的微信公众号)
  2. 支持微信小程序。(上架需申请Ai绘图类目,可使用第三方合同申请Ai类目,使用第三个合同比较简单,开发者可指导协作完成)
  3. 支持支付宝小程序。(无需Ai类目,工具类目即可上架)
  4. 支持抖音小程序。(必须深度算法合成备案才能上架)

源码说明

  • 客户端(ai-image):ext.dcloud.net.cn/plugin?id=1…

  • ai-image可打包成 H5、微信小程序、支付宝小程序、抖音小程序 并发布

  • 管理端(ai-image-admin)

  • ai-image-admin可打包成H5发布,用于管理配置客户端,或者说是站长的控制台,站长自己用不要对外开放

开通uniCloud阿里云服务空间 开通地址:unicloud.dcloud.net.cn/

建议按量付费,请使用阿里云服务,其他服务可能不兼容

下载HBuilder开发工具:www.dcloud.io/hbuilderx.h…

小程序域名白名单

  1. 请求域名:api.next.bspapp.com、sd-json.oss-cn-hongkong.aliyuncs.com
  2. 下载域名:sd-json.oss-cn-hongkong.aliyuncs.com
  3. 除了阿里云自带的请求域名外,请求和下载还要额外添加:sd-json.oss-cn-hongkong.aliyuncs.com,该域名是Ai绘图回调的文件地址,
  4. Ai回调有些是JSON数据,有些是图片地址,所有需要把该域名添加到请求域名,和下载域名

同时你unicloud的上传域名,和下载域名也要添加,unicloud空间查看域名 8c7c23f68cc0d28cd63e44e8faa01c31_08127cad5ad62be99e5076344d51b2a3.png

安装教程

  • 先安装ai-image-admin,导入HBuilder 后关联阿里云空间

  • HBuilder下载地址:www.dcloud.io/hbuilderx.h… 56ce8e796c996b8b76a3c86f6a62c6cf_bfc147a7bf935d1770f269bc40478190.png

  • 初始化云数据库 ce6596f069950b26ee5e386f8aadce7d_badeaee9a641274ca4c21a96bc9e08eb.png

  • 如果弹窗窗口直接覆盖 516d28edc3c131651ab50f43f1952cc3_a2669aa128f32ee429c308dfd720d8ef.png

  • 等待初始化完成 73b6afc47bf3b036fef82dc9f58a64d8_dd6c2e853873bde8f339fc2ba1be622d.png

  • 上传所有云函数及公共模块 8f857b37e62a938c1aca5a4936aef18b_4a02d79d159b2e2e46f7b47099dc22ec.png

  • 如果弹出窗口直接替换 6e75f9722cb8f5997978b1a218b25a3c_99e7b6b900d2a064d4d440968ea0dad6.png

  • 等待上传完成 4eb4d8e91a6d89bb5220104d70067103_03ebfcf80fd71f4cebf5187d500dedd0.png

  • 再安装ai-image,必须一起安装完在测试使用,步骤与上面都差不多

  • 导入HBuilder后关联阿里云空间 077dfb526ef7539a815e8365324eba7b_96f671248aaaf9f194a2465709138f10.png

  • 初始化云数据库 b9c162e35200c8caa96341070ad9b9de_0951ee37f136e8034a03c4fcd0ba20f0.png

  • 如果弹出询问窗直接覆盖 e762993c5cd91fd576329362b5c5164a_4f4a793da6a70d59410e83ab7fbb4c2c.png

  • 等待初始化完成 9143d20c733d7453641888d47a068348_a14f89329c04fb678776f87f778db30d.png

  • 上传所有云函数及公共模块 45f741eafa6a9fcdaef19fedabd81839_491318823dd02103ae75735789aa4ea4.png

  • 如果弹出询问窗直接替换 875b67a433cfbfd2daceb8d1f21daae2_6de36c086718fe5a0d220c07bb617ea8.png

  • 等待上传完成 e13c3afb55feef6f090dbdb0b5e25c36_b17e23964b38fe4a64d2af005dcbd0b0.png

发布管理端(ai-image-admin)得先发布管理端完成小程序配置才能发布小程序端

  • ai-image-admin发行 网站-PC,并关联你的uniCloud阿里云空间一般会自动上传 bbdd272f1a7b62adbdf72caebd783f30_213ce572c3be390807c369f46d66c80a.png

  • 如果无法自动上传,需要手动上传,先等待打包完成 ba4781aecb7b7d1bbb7201dd39d11935_016a970580c8aec56708a51329db175e.png

  • 打开打包完成的目录地址,把web改成admin,方便上传,因为打包的H5运行路径(会改的话可以自己改路径)就是admin,所有要用admin b41335575807cab2d297a31b00d41215_9a4262c1007c4775f9d485a20d3c3c7f.png f5401d9778a7c4d08e52e205f5e55c7f_852ac65994d9e3584d053940157444f2.png

  • 上传文件到云空间,这里上传的是unicloud,如果你用其他云空间托管也可以上传其他云空间,记得配置跨域 d8c1de20e6435f143135c65e57195107_43312ae7f367f063e9e2617a554cda45.png 62796f1dee9f3fc59f1235b1119eca1c_32ed1c4b6f08fd58adbdf7b5ede572d6.png 191ce7c6b9f4d3501cd8bb28cc2f8ac1_648c3477bbf4824eb3beb0673699e43a.png d2957063fa6825d20fbfd9a53380c6b9_f275d46c8711356be14023190e183e1f.png

  • 配置跨域 82de2f1aa19fafaf8d99c1336ee89b20_9d3d129bc84d6bc1dd26a27258825c67.png 4e607b938e4bd917961cdbd6e234d96b_cdd5f32960a72c1d7dfe7251e49fcf22.png 8d6936608ea124459c7ac916f2785a9f_0c80234c32c118e6b7e1d00800a58c6e.png

  • 访问管理端,在默认域名后面添加目录/admin 192adb42c62df97ce608d0dd03910eda_dc68be894aecfda9ca65f56a5b0ad999.png

  • 管理端初始化账号:admin

  • 管理端初始化密码:112233 d19bdfc342501638784b3cf1cf6149b7_56568014942cd2975e9337f1021fc008.png

  • 添加一个小程序,获取mymp_id,这里以支付宝小程序为例 80171d7c97c47306c25f48fe9ddbebe3_6deaa5e320fe6bcf02e6d94a6f0904bd.png

在ai-image客户端配置mymp_id,就可以运行或者打包ai-image项目了

  • 不用全部配置,要发布支付宝小程序,就修改mp-alipay的参数,要上架哪个平台就修改对应平台的mymp_id就行 1b194efc32d8faf701cf6a4c117f2599_14f461932c9c8ceb462318ed7ba98501.png

发布到支付宝小程序

  • 注意:是ai-image项目。建议先运行测试没问题在打包发布,不会运行测试的直接打包发布应该也没问题(开发者已经测试好没问题了) d87ccdfca1dbd612db020a9453d32c1f_99437f104a4ed21a5cc3725e91a99c51.png