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

简介: 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=关键词


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


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


结语


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



相关文章
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
755 1
|
JSON 前端开发 JavaScript
前端工具方法整理
前端工具方法整理
292 8
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
866 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
333 2
前端基础(十四)_隐藏元素的方法
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
336 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1148 5
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
486 5
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
495 3
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
927 3

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1250
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    566
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    429
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    546
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    507