更新记录

v1.0.0(2024-11-18) 下载此版本

小程序发布上线,已经上线到微信小程序,搜索“垃圾识别AI”可以体验


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.92 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

基于大模型的-垃圾分类AI

这个项目使用AI大模型实现了垃圾分类识别。

体验小程序

gh_bbb954829e2a_430

基本原理

  1. 使用百度的AI大模型,识别出图片中的垃圾类型。
  2. 将识别结果传给大模型进行语义分析,判断是什么垃圾类型

修改配置

1、App.vue 程序启动,获取百度AI接口token

    export default {
        onLaunch: function() {
            console.log('App Launch')

            // 程序启动,立即获取token
            this.$store.dispatch("getToken")
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }

2、修改store/index.js 在 store/index.js中,请求百度AI的图像识别接口。 不过首先需要去注册一个账号,注册地址:https://ai.baidu.com/ 微信图片_20241115142300

然后到应用列表找到 API Key 和 Secret Key

image-20241115142817818

然后将 store/index.js 中的49和50行代码替换为自己的 API Key 和 Secret Key:

image-20241115143056829

3、修改大模型配置

语义识别判断使用了uni-ai,详细使用方法查看这两个文档:

uni-ai 开发文档:https://en.uniapp.dcloud.io/uniCloud/uni-ai.html uni-ai计费网关开通流程 :https://en.uniapp.dcloud.io/uniCloud/uni-ai-buy.html#enable-uni-ai-service

我使用的是minimax,打开云函数 uniCloud/cloudfuncitons/garbage/index.js

image-20241115143433061

将上面的apiKey 和groupId替换成你自己的值。

如果没有的话,可以去注册一个。地址:https://platform.minimaxi.com/

注册好了之后,在账户管理页获得groupId:

image-20241115143650835

然后在接口密钥中创建一个密钥:

image-20241115143806412

有了密钥,就可以替换上面的apiKey 和groupId了。

4、配置微信AppId

如果要在微信小程序运行,一定要配置AppId。这个你需要自己去注册一个微信小程序账号,然后登陆微信小程序后台,在开发管理->开发设置 下找到AppID。

image-20241115145719057

复制这个AppID,回到Hbuilder,项目根目录找到manifest.json,打开这个文件,找到微信小程序配置:

image-20241115145949463

5、配置微信开发者工具

在Hbuilder中点击运行到微信开发者工具

image-20241115143957929

如果你运行不起来,可能是微信开发者工具没有安装,如果安装了可能是没有配置启动地址,点击 运行->运行到小程序模拟器->运行设置

image-20241115144134722

然后配置你的小程序开发工具地址:image-20241115144234269

之后再运行就会启动了。

如果依然启动不了,则需求在微信开发中工具中配置服务端口,启动微信开发者工具,设置,安全,服务端口,打开。

image-20241115144554597

6、服务器域名

启动成功之后,就可以看到如下页面了

image-20241115145422546

如果只是要在本地测试一下,建议先把不校验合法域名这一项打上勾。位置在右上角,详情->本地设置->不校验合法域名

如果要发布到小程序上,那么需要在小程序后台配置服务器域名:

微信图片_20241115125525

微信图片_20241115125528

具体域名列表如下:

https://aip.baidubce.com
https://api-cn.faceplusplus.com
https://api.next.bspapp.com
https://fc-mp-902d8637-0213-49b1-886c-f8c67ae1f3fa.next.bspapp.com
https://file-uniwkerxgq-mp-902d8637-0213-49b1-886c-f8c67ae1f3fa.oss-cn-zhangjiakou.aliyuncs.com

7、测试一下

点击 拍照识别按钮,会弹框让你选择一张图片,如果是在手机上测试,你可以使用手机摄像头拍照获取图片。

微信图片_20241115125517

图片选择完了,会将图片发送给百度识别,识别结果会传给大模型,判断是什么垃圾,最后将结果展示出来:

image-20241115150621968

也可以使用搜索功能,点击放大镜图标,在输入框中输入关键字,

image-20241115150658839

大模型会根据输入的内容判断垃圾类型:

image-20241115150752009

最下方是垃圾分类的知识测试题:

image-20241115150832097

一共10道题,每题四个选项,最后根据大题结果展示得分。

image-20241115150929429

还可以将结果分析给其他人,点击分享成绩,会使用画布生成一张带本小程序的二维码的图片,你可以将图片发朋友圈,实现裂变传播。

image-20241115151102185

隐私、权限声明

1. 本插件需要申请的系统权限列表:

1. 拍照或文件选择 2.开通uni-ai或者其他大模型接口

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

本项目会通过摄像头拍摄照片发送到百度AI平台,地址https://aip.baidubce.com进行图像识别,判断图像内容,用于垃圾识别分类

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问