[智能小程序]-快速接入植物识别
756665228 发布于2018-11-27 09:49 浏览:2982 回复:9
3
收藏
最后编辑于2019-06-18

基于百度智能小程序做一个植物识别的小程序。

关于注册之类的步骤就不说明了。大家最好是用自己企业信息注册哦。百度智能小程序不支持个人哦。组件 API 结构就不说了。文档中心很详细的。

此文源代码地址 https://gitee.com/xshuai/smartprogram-bd

开发工具下载:

  • Windows开发工具下载 http://smartprogram.baidu.com/mappconsole/api/devDownload?system=windows&type=online
  • MacOS开发工具下载 http://smartprogram.baidu.com/mappconsole/api/devDownload?system=mac&type=online

既然是做一个植物识别的小程序。那是超级简单的。百度智能小程序已经默认接入了很多AI能力。具体功能如下:

文档中心 https://smartprogram.baidu.com/docs/develop/api/ai/

本文以植物识别为示例简单说明。文档地址 https://smartprogram.baidu.com/docs/develop/api/ai_classify/#plantClassify/ 自己一定要看一遍哦

示例代码很简单哦 很方便无需管理图片的base64转换问题。token也无需管理。接口次数不够如何增加暂时不太清楚

swan.chooseImage({
  success(res) {
    let image = res.tempFilePaths[0];
    swan.ai.plantClassify({
      image,
      success(res) {
        console.log(res.result);
      }
    });
  }
});

                                                                                                               接下来。直接上做好的示例代码

app.json 给一个页面路由

{
    "debug": false,
    "pages": [
        "pages/aiplant/aiplant"
    ],
    "window": {
        "navigationBarBackgroundColor": "#3366FF",
        "navigationBarTitleText": "花样识图",
        "navigationBarTextStyle": "white",
        "backgroundTextStyle": "black",
        "enablePullDownRefresh": false
    },
    "networkTimeout": {
        "request": 30000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
    }
}

pages/aiplat.swan 写页面的布局代码


  
    
  

拍照/选取图片
  

  
      
        植物名称
        可信度
      
    
     
        {{item.name}}
        {{item.score*100}}%
      
    
  

pages/aiplat.css写页面的样式代码

.image {
  width: 100%;
  height: 360rpx;
}
button{
  font-family: 微软雅黑;
}
text{
  font-family: 微软雅黑;
}
.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding:60rpx;
  height:840rpx;
  border-top: 2rpx solid #D9D9D9;
  border-bottom: 2rpx solid #D9D9D9;
  align-items: center;
  justify-content: center;
}

.faceInfo{
  font-size: 28rpx;
   display:block;
   margin:0 auto;
   margin-left: 33%;
}
.faceInfoValue{
  color: #1BA0E1;
  letter-spacing:0px;
}
.chooseImg {
  display:block;
  margin:0 auto;
  color: rgb(255, 255, 255);
  font-size: 40rpx;
  font-family: 微软雅黑;
  width: 400rpx;
  height: 100rpx;
  text-align: center;
  line-height: 90rpx;
  border-radius:50rpx;
  background-color:#3366FF;
  margin-top:10px;
}
.img_wrap {
    width: 750rpx;
    height: 620rpx;
    background: #ececec;
}

image {
    width: 100%;
    height: 100%;
    max-height: 1
}
.msg {
    margin: 20rpx 0;
    text-align: center;
}
.table {
 margin-top: 10rpx;
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80rpx;
  
}
.td {
    font-size: 28rpx;
    width:40%;
     display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.bg-w{

}
.bg-g{
  background: white;
}
.th {
  font-size: 28rpx;
  width: 48%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 80rpx;
  align-items: center;
}

页面效果如下:

接下来做业务处理的代码 在pages/aiplat.js中

会发现代码很少。就能实现植物识别小程序了。无需任何后台代码哦。

Page({
    data: {
        title: '植物识别',
        result:[],
        img:""
    },
//绑定事件 处理选图图片并进行植物识别api调用 并回显数据
uploads: function() {
        var that = this;
        swan.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            success: res => {
                let image =  res.tempFilePaths[0];
                swan.showLoading({
                    title: '努力分析中...',
                    mask: true
                }),
                that.setData({
                        img:image
                }),
                swan.ai.plantClassify({
                    image:image,
                    success(res){
                         swan.hideLoading();
                        that.setData({
                            result:res.result
                        })
                    }
                });
            }
        });
},
});

识别示例图:

 

收藏
点赞
3
个赞
共9条回复 最后由小雨青青润无声回复于2019-06-18 08:34
#10小雨青青润无声回复于2019-06-18 08:34:35

植物识别的小程序很多啊

0
#9风搅火回复于2019-06-16 08:58:48
#7 wangwei8638回复
百度智能小程序什么时候支持个人用户,微信小程序都支持

估计很快就开放了

0
#8756665228回复于2019-04-09 19:36:28
#7 wangwei8638回复
百度智能小程序什么时候支持个人用户,微信小程序都支持

性质不太一样。不见得百度智能小程序会支持个人。

0
#7wangwei8638回复于2019-04-09 19:31:37

百度智能小程序什么时候支持个人用户,微信小程序都支持

0
#6让天涯回复于2019-03-29 10:53:50

好方便!

0
#5756665228回复于2019-03-16 15:50:00
#4 132******69回复
您好有蔬菜水果识别开发么,我需要合作

果蔬就包含了水果和蔬菜哦

1
#4132******69回复于2019-03-15 07:06:01

您好有蔬菜水果识别开发么,我需要合作

0
#3756665228回复于2018-11-30 10:42:20
#2 鸿焘回复
你好,请问接私活吗?

做什么?

1
#2鸿焘回复于2018-11-29 18:04:33

你好,请问接私活吗?

0
TOP
切换版块