水果识别小程序

1、水果识别小程序核心内容

　　用户上传图片，小程序将图片数据返还回来，展示到前端。根据拍摄照片，识别图片中果蔬名称，可结合识别结果进一步为用户提供营养价值、搭配禁忌，果蔬推荐等相关信息，广泛应用于美食类APP中。
2、水果识别小程序模块的设计

• 　　调用百度AI水果识别接口
• 　　将图片装换成base64位并上传
• 　　处理请求回来的数据
• 　　将数据展示到前端

3、调用百度AI水果识别接口

使用NodeSDK文档
　　
安装依赖

4、 调用百度AI水果识别接口

设置APPID/AK/SK

aiFruit云函数

 前端解码图片并调用云函数

 

 

 4、效果展示

 

 5、部分核心代码

云函数的代码
// 云函数入口文件
const cloud = require('wx-server-sdk')
var AipImageClassifyClient = require("baidu-aip-sdk").imageClassify;

cloud.init()

// 设置APPID/AK/SK
var APP_ID = "22980729";
var API_KEY = "Fby7un15sxHnw01XTAi2SK5g";
var SECRET_KEY = "TV4kLgsOQUz0sw4trVIMKlgTF7SFNBdY";

// 新建一个对象，建议只保存一个对象调用服务接口
var client = new AipImageClassifyClient(APP_ID, API_KEY, SECRET_KEY);

// 如果有可选参数
var options = {};
options["baike_num"] = "5";

// 云函数入口函数
exports.main = async (event, context) => {
  let fruit = await aiFruit()
  console.log(fruit)
  return{
    fruit
  }

  // 调用函数
  // event.img的图片必须是base64编码的
  function aiFruit(){
    return new Promise((resolve,reject)=>{
      client.plantDetect(event.img, options)
        .then((res)=>{
          resolve(res)
        })
        .catch((error)=>{
          console.log(error)
        })
    })
  }
}

主页index的js代码

<!-- 图片展示区域 -->
<view class='pages'>
  <view class='face'>
    <image src='{{botany}}' mode='widthFix'></image>
  <view>
<view>

<!-- 识别结果展示 -->
<view wx:if="{{aibotany}}">
  <view class='result'>
      <text class='result-text'>识 别 结 果</text>
  <view>

  <!-- 属性展示 -->
    <view class='botany-view'>
      <view class='botany'>
        <view>名称<view>
        <view>可信度<view>
        <view>百度百科<view>
      <view>  

      <block wx:for="{{botanyimg}}" wx:for-item="item">
        <view class='botany botany-attr'>
        <view>{{vitem.name}}</view>
        <view>{{item.score}}<view>
        <view bindtap='baike' data-testid="{{item.baike.description}}">查看百科<view>
        <view>
      <vock>

    <view>
 <view> 

 <!-- 非水果展示 -->
 <view class='nobotany' wx:if="{{nohave}}">
  {{nofruit}}
 <view>

<!--选择图片 -->
<view class='btn' wx:if="{{aibtn}}">
  <button type='primary' bindtap='faceImage'>拍照<vtton>
<view>

<!-- 百度百科展示 -->
<view class='introd' wx:if="{{introd}}">
  <view class='introd-view'>
  {{baikedata}}
  <view>

  <!-- 取消按钮 -->
  <view class='introd-img' bindtap='introdbaike'>
  <image src='../../img/quxiao.png' mode='widthFix'></image>
  <view>
<view>
贾严博 0:20:24
// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    botany: '',
    botanyimg:[],
    introd:false,
    baikedata:'',
    animation:false,
    aibotany:false,
    aibtn:true,
    nohave:false,
    nofruit:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },


  // 选择本地图片
  faceImage() {
    console.log('111')
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        // console.log(res)
        var tempFilePaths = res.tempFilePaths[0]
        // 解码图片base64
        var imgbase = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")  
        console.log(imgbase)
        // 调用云函数
        this.fruitCloud(imgbase)
        this.setData({
          botany: tempFilePaths,
          animation:true,
          aibtn:false,
          aibotany:false,
          nohave:false
        })
      },

      fail: (err) => {
        console.log(err)
      }
    })
  },

  // 接收后端云函数
  fruitCloud(imgbase){
    wx.cloud.callFunction({
      name:'fruit',
      data:{
        img: imgbase
      }
    })
   .then((res)=>{
    //  console.log(res.result.fruit.result)
    let botanyimg = res.result.fruit.result
    //  map遍历
    let botanydata = botanyimg.map((item)=>{
    let name = item.name;
    let score = item.score.toFixed(3);
    let baike = item.baike_info
       return {
         name,
         score,
         baike
       }
     })

     console.log(botanydata)
    //  判断是不是水果
     if (botanydata[0].name == "非水果"){
       this.setData({
         aibotany: false,
         aibtn: true,
         animation:false,
         nohave:true,
         nofruit: '没有识别到水果'
       })
     }else{
       this.setData({
         botanyimg: botanydata,
         animation: false,
         aibotany: true,
         aibtn: true
       })
     }
     
   })
   .catch((Error)=>{
     console.log('出错啦')
    // 请求出现错误提示
     this.setData({
       aibotany: false,
       aibtn: true,
       animation: false,
       nohave: true,
       noflower: '网络错误请重新上传'
     })
   })
    
  },

  // 百度百科展示
  baike:function(event){
    console.log(event.currentTarget.dataset.testid)
    let baikedata = event.currentTarget.dataset.testid
    this.setData({
      introd:true,
      baikedata : baikedata
    })
  },

  // 取消百科内容
  introdbaike(){
    this.setData({
      introd: false
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "AI识别水果，快上车",
      imageUrl: "../../img/yingc.png",
      path: "/pages/index/index"
    }
  }
})

6、心得感受
　　本学期js的学习，重点还是在学习概念等一些常识性的东西，我们小组通过两周的不懈努力，做出了水果识小程序。遇到了很多自己感兴趣的问题，就会很有兴趣，当然学知识可不能凭自己的爱好和一时兴趣，不能遇到自己不敢兴趣的问题就把它抛给同学，要学会自己踏踏实实认真的去解决问题。要一步一个脚印，认认真真，踏踏实实，理论与实践相结合，在扎实掌握课本实例和内容之后，有一定的扩展阅读和课外学习，充分全面的了解 js、css、html的应用和扩展运用。本次我们小组所做的程序是“水果识别小程序"基本功能已经较好的完成，可是还是有一些不完善，比如我们的小程序没有能够做到把微信扫一扫来识别，所以还是有些不完善，我们的指导老师对我们的程序作出了大体评价，发现我们的思想还是处于一个比较简单的过程当中，老师的几句简单评价，就带给我们无与伦比的冲击性。希望以后可以做的更好。

 

演示视频连接：

打开百度网盘复链接：https://pan.baidu.com/s/1Z-XJgy2a4zPXS7Zsx0W95Q
提取码：i1l5

小组成员：贾严博、 陈凡、 银腾 、寇昱辰、杨雯静