华为主动找我合作,我放弃了!前端实现拍照识别垃圾分类最简单的方法!

简介: 2019年7月,上海作为第一个试运行垃圾分类的城市。当时的微信指数居高不下,引发了非常热烈的社会讨论,原因是上海当时执行得很坚决,社区垃圾桶旁都有带着红袖标的大爷大妈在看着,扔错了现场罚200元。当时人心惶惶,有很多人担心自己分类不准确被罚款。上海市政府在宣传垃圾分类的时候就在推一个垃圾分类查询的小程序。我当时捕捉到了这个热点,花了一天时间使用uni-app快速搭建了一个拍照识别垃圾所属分类的小程序《垃圾分类精灵》(现在还在线,大家可以搜来用)。在短短半个月里获取到了6w多用户。

前言


2019年7月,上海作为第一个试运行垃圾分类的城市。当时的微信指数居高不下,引发了非常热烈的社会讨论,原因是上海当时执行得很坚决,社区垃圾桶旁都有带着红袖标的大爷大妈在看着,扔错了现场罚200元。


image.png


当时人心惶惶,有很多人担心自己分类不准确被罚款。上海市政府在宣传垃圾分类的时候就在推一个垃圾分类查询的小程序。我当时捕捉到了这个热点,花了一天时间使用uni-app快速搭建了一个拍照识别垃圾所属分类的小程序《垃圾分类精灵》(现在还在线,大家可以搜来用)。在短短半个月里获取到了6w多用户。


截图展示


image.png


我在这个小程序里各种顽梗,比如生成的海报是一个考卷,既然可以拍照识别垃圾分类,那么我想一定有人去识别自己的照片或者给别人拍照,那么我干脆把人类识别出来,并升华一下主题


就是人类,创造了垃圾


由于是第一款可以拍照识别垃圾分类的小程序,在当时还是小小的火了一把,以至于华为手机都主动找上门,咨询我是如何做到的,AI训练集哪里来的。希望与我合作,把这个拍照识别植入到华为系统的负一屏以及系统相机中。还有智能音箱团队也希望可以和我们合作...


image.png


image.png


随着合作沟通越聊越深入,华为团队的伙伴们需要我提供的原理介绍越来越多,我发现我快忽悠不住了。哈哈哈😃~


然后我就拒绝并放弃了合作,因为这背后的原理几乎毫无难度,拿不出手啊~


image.png


核心魔法


因为核心的识别不过是使用百度AI接口通用物体和场景识别,识别出图片主体内容后再去请求垃圾分类关键词搜索接口...


const res = await uniCloud.httpclient.request("https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=clientID&client_secret=clientSecret",{
        dataType:"json"
})
const access_token = res.data.access_token;
const classify_res = await uniCloud.httpclient.request("https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general",{
        dataType:"json",
        method:"POST",
        data:{
                image:event.image,
                access_token:access_token
        },
        headers:{
                "Content-Type":"application/x-www-form-urlencoded"
        }
})
return classify_res.data;


是不是非常简单?


垃圾分类接口


垃圾分类接口是从上海政务服务平台抓取到的一个API


https://sffc.sh-service.com/wx_miniprogram/sites/feiguan/trashTypes_2/Handler/Handler.ashx?a=EXC_QUERY&kw=关键词


把图片的识别结果拿来请求这个接口就可以拿到分类查询结果了。大部分城市的垃圾分类都是分为四类,叫法上有两种区别,上海的湿垃圾 = 北京的厨余垃圾干垃圾 = 其它垃圾


针对用户选择的城市不同,转换一下分类查询结果即可


结语


这么简单的东西也拿出来分享让大家见笑了,不过我个人是很享受这样的技术微创新,换一个思路来解决问题或者提升用户体验。就像变魔术一样,只是当魔术被揭秘之后,大家可能就容易忽略掉这个魔术在原创时的闪光点了



相关文章
|
18天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
28 5
|
2月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
3月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
49 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
3月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
68 1
前端基础(十四)_隐藏元素的方法
|
2月前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
169 0
|
2月前
|
移动开发 算法 前端开发
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
27 0
|
2月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
105 0
|
3月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
88 3
|
2月前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
26 0