使用微信小程序调用飞桨PaddleX平台自行训练的模型——微信小程序用训练的牡丹花模型Demo测试

🎼个人主页：【Y小夜】

😎作者简介：一位双非学校的大二学生，编程爱好者，

专注于基础和实战分享，欢迎私信咨询！

🎆入门专栏：🎇【 MySQL，Java基础，Rust】

🎈热门专栏：🎊【 Python，Javaweb，Vue框架】

++感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️++

🎁找到平台自己中的token以及URL

🎈Token

访问请前往飞桨AI Studio星河社区-人工智能学习与实训社区 (baidu.com) 查看 访问令牌 并替换

🎈URL

查看自己部署的模型，里面的信息

🎁编写小程序

🎈index.wxml

<view class="container">
  <view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit' />
  </view>
  <button bindtap="uploads" class="up">拍照/选取图片识别</button>
  <view wx:if="{{result.length>0}}" class="table">
    <view wx:for="{{result}}" wx:key="key">
      <view wx:if="{{item.score>0.5}}">
        <view class="td">此花为"{{item.name}}"牡丹花</view>
        <view class="jieshao">
          <view wx:if="{{item.name==='莲鹤'}}">莲鹤牡丹，引进品种。花的颜色是白色的，花瓣宽大圆整，柱头、房衣、花丝均为白色。株型中高，直立晚花品种。看上去洁白无瑕，干净神圣，芍药属植物。名字的寓意也很吉利，有年年益寿的含义。</view>
          <view wx:elif="{{item.name==='海黄'}}">海黄牡丹多年生，植株较高，株形半开张，茎青绿色，小型长叶，叶边红，有锯齿，黄绿色泛红。花蔷薇型，黄色，外瓣大，向内渐小，排列紧密，雄蕊多，柱头黄，房衣浅包</view>
          <view wx:elif="{{item.name==='八千代椿'}}">八千代椿，菊花型。花胭脂红色。花瓣肥厚，鲜艳，硕大，色彩艳丽。雄蕊多，花丝外围短，近花心处长，黑紫色，花蕾长圆尖形，花径16厘米，花态直上，花开高出叶面，开花量大，中花偏晚。大型长叶，小叶瘦长尖，绿色有红晕，叶背有毛。新枝及叶柄青绿色，柄凹紫红色，小叶柄长，枝叶较稀。植株直立型。此品于80年代日本国与洛阳牡丹交流时引入。经多年的培育，如今不但在洛阳等地大量繁殖，在其他地区也广泛栽植。</view>
          <view wx:elif="{{item.name==='赵紫'}}">它是一种毛茛科、芍药属植物。形态特征抗逆、优质；皇冠型花蕾扁圆形；花紫色；外瓣2轮；形大；质硬；基部有紫色晕。生长环境亚热带；温带。分布范围山东省。</view>
          <view wx:elif="{{item.name==='长寿乐'}}">
          长寿乐，是一种毛茛科、芍药属植物。形态特征抗病、抗虫、抗逆、优质；花紫色略带蓝色；蔷薇型；花瓣质硬；宽大平展；基部墨紫色斑雌雄蕊正常；房衣紫红色。生长环境亚热带。
          </view>
          <view wx:elif="{{item.name==='花竞'}}">花竞，它是日本品种，菊花型。形态特征花蕾圆形。花粉红色，花径23cm×9cm。花瓣多轮，排列整齐，雌雄蕊正常，房衣、柱头均为白色。花梗长，花朵直上。花期中。植株高大，直立。</view>
          <view wx:elif="{{item.name==='镰田锦'}}">镰田锦，是一种毛茛科、芍药属植物。形态特征抗逆、优质；菊花型；花浅粉色；花瓣形状相似；排列整齐；层次分明；自外向内逐渐变小。生长环境亚热带；温带。分布范围山东省</view>
          <view wx:elif="{{item.name==='新日月锦'}}">新日月锦，牡丹花的一种，产于山东菏泽。科名：芍药科科拉丁名：Paeoniaceae属拉丁名：Paeonia属名：芍药属种名或亚种名：牡丹种拉丁名：P.suffruticosa原产地：菏泽来源地：山东菏泽百花园归类编码：资源类型：选育品种主要特性：高产，抗逆主要用途：药用，生态，观赏气候带：暖温带，温带生长习性：晚花，中度喜光稍耐半阴，喜温和，具有一定耐寒性</view>
          <view wx:elif="{{item.name==='中国龙'}}">美国品种: 花深红色(185B)，单瓣型。花径15cmx6cm，侧开。花瓣2轮，质软，基部具大紫黑色斑。雌雄蕊正常，花丝浅红紫色。柱头红色。房衣红紫色。植株半开张。新枝稍长(35cm)。叶狭长深裂，质厚，叶面有红晕。叶柄斜伸，柄凹紫红色。生长势中，分枝力强，萌蘖枝多，花期晚。美桑德斯1948年育出。(摘自《中国牡丹》)。江南红豆園 2021年引进品种，具有狭叶滇牡丹基因，丰花品种，当年枝条就能开花。</view>
          <view wx:elif="{{item.name==='新七福神'}}">牡丹-新七福神是一种毛茛科、芍药属植物。七福神是日本神话中主持人间福德的七位神。由于这种牡丹的枝条较多，且高低错落，花朵凸显富贵之态，便取名为"新七福神"。</view>
          <view wx:elif="{{item.name==='旭港'}}">旭港，牡丹花品种。花火红色，蔷薇型。花色为大红色，花大色艳，但花期较晚，容易养活，适合家庭及新手种植。"旭港"牡丹：属于日本牡丹，花期晚，花火红色，花朵蔷薇型，花朵侧开，花瓣多轮，较圆整，雌雄蕊正常。</view>
          <view wx:elif="{{item.name==='岛大臣'}}">岛大臣, 国外牡丹交流品种，菊花型，花紫红色，花瓣6轮以上，花瓣形状相似，层次分明，自外向内逐渐变小，雄蕊正常或减少变小，中花，中度喜光稍耐半阴，喜温和，具有一定耐寒性，忌酷热，适宜高燥，惧湿涝。</view>
          <view wx:elif="{{item.name==='白王狮子'}}">白王狮子，花白色，菊花型。花梗硬，花态直上。晚开品种。株型直立，中型长叶，叶尖，稍黄绿，稍有红晕，叶柄上凹紫红色，花无莲鹤质感厚，房衣、柱头、花丝、乳黄色，花药黄色，花期晚于莲鹤，花药长。</view>
          <view wx:elif="{{item.name==='花王'}}">"花王"牡丹：属于日本牡丹，花期中晚，花紫红色，花朵蔷薇型，花茎粗，花朵直上，花瓣排列紧密，由外至内逐轮缩小，雄蕊稍有瓣化，雌蕊变小。株型高大直立，枝粗壮，一年生枝较长，叶片大型长叶，生长势强，分枝力强，成花率高，萌蘖枝少，不耐早春寒，抗病性弱。</view>
          <view wx:elif="{{item.name==='芳纪'}}">芳纪牡丹株型较高大，直立，枝条粗壮。叶子为中型长叶，叶面黄绿色，边缘微下卷，叶柄红色。成花率较高，萌蘖枝较少，根部比较稀疏。 芳纪性喜温暖、凉爽、干燥、阳光充足的环境。喜阳光，也耐半阴，耐寒，耐干旱，耐弱碱，忌积水，怕热，怕烈日直射。</view>
          <view wx:else="{{item.name==='寒樱狮子'}}">寒樱狮子，花粉色，盛开后端部变白，菊花型。花径23cm×8cm。花瓣形大，端部有齿裂，基部具红晕；雌雄蕊正常或稍有瓣化，房衣柱头紫红色。植株高大直立。大型长叶，叶尖下垂，幼叶颜色深绿；分枝能力、生长势强，萌蘖枝多，成花率高。花朵硕大。有清香，花期中。有秋冬季二次开花现象。</view>
        </view>
      </view>
    </view>
  </view>
</view>

这段代码是一个微信小程序的页面结构，主要用于展示牡丹花的图片和信息。具体解释如下：

1. <view> 标签用于创建一个容器，类似于 HTML 中的 <div> 标签。
2. <image> 标签用于显示图片，mode='aspectFit' 表示图片保持原始宽高比，缩放至完全显示。
3. <button> 标签用于创建一个按钮，bindtap="uploads" 表示点击按钮时触发名为 uploads 的函数，class="up" 为按钮设置样式类。
4. wx:if="{``{result.length>0}}" 表示当 result 数组的长度大于 0 时，显示以下内容。
5. wx:for="{``{result}}" 表示遍历 result 数组，将每个元素赋值给 item。
6. wx:if="{``{item.name==='莲鹤'}}" 等条件判断语句，根据 item.name 的值显示不同的牡丹花信息。
7. <view> 标签内部的内容是各个牡丹花的详细信息，包括形态特征、生长环境、分布范围等。
8. wx:else="{``{item.name==='寒樱狮子'}}" 表示当 item.name 不等于前面的任何一个值时，显示关于 "寒樱狮子" 的信息。

🎈index.wxss

.image {
  width: 100%;
  height: 360rpx;
}
.container {
  margin-top: -110px;
  /* background-image: url("https://www.xsshome.cn/timg.jpg"); */
  background-repeat: no-repeat;
  background-size: auto;
  background-position: bottom;
  background-position-x: right;
}
button {
  font-family: 微软雅黑;
}
.page-body-info {
  display: flex;
  box-sizing: border-box;
  padding: 30rpx;
  height: 420rpx;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  align-items: center;
  justify-content: center;
}
.up {
  color: rgb(253, 253, 253);
  font-size: 20px;
  font-family: 微软雅黑;
  width: 200px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 45px;
  border-radius: 25px;
  background-color: #87c0f5;
}
.img_wrap {
    margin-bottom: 10px;
    width: 750rpx;
    height: 750rpx;
    background: #87c0f5;
}
image {
    width: 100%;
    height: 100%;
    max-height: 1
}
.msg {
    margin: 10px 0;
    text-align: center;
}
.table {
  margin-top: 10rpx;
  border: 0px solid darkgray;
  width: 100%;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80rpx;
  
}
.td {
  font-family: 微软雅黑;
    font-size: 35rpx;
    width:100%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.bg-g{
  background: white;
}
.baikeform{
  font-size: 20rpx;
  color: #c0c0c0;
  border-top: 1rpx solid #eeeeee;
  margin:30rpx 40rpx 0rpx 40rpx;
  padding: 20rpx;
}
.jieshao {
  color: #ffffff; /* 更亮的文字颜色，以便在深色背景下更容易阅读 */
  width: 90%; /* 宽度调整为屏幕宽度的90%，以适应不同屏幕大小 */
  max-width: 600rpx; /* 最大宽度限制，避免在宽屏幕上过宽 */
  height: auto;
  margin: 20rpx auto; /* 增加上下边距，并保持水平居中 */
  padding: 20rpx; /* 添加内边距，增加文本与边框的距离 */
  background-color: #4CAF50; /* 更好看的背景颜色 */
  border-radius: 15rpx; /* 稍微增大圆角 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果，增加层次感 */
  font-size: 28rpx; /* 增大字体大小，使内容更易读 */
  line-height: 1.6; /* 增大行高，使文本不那么紧凑 */
}
.i7{
  width: auto;
  height: 50rpx;
}
/* 优化其他相关样式 */
.table {
  width: 100%; /* 使表格宽度充满容器 */
  display: table; /* 使用表格布局 */
}

.table .td {
  font-size: 32rpx; /* 增大标题字体大小 */
  color: #333333; /* 更深的文字颜色 */
  padding: 10rpx 20rpx; /* 添加内边距 */
  background-color: #f8f8f8; /* 轻微的背景颜色 */
  border-radius: 10rpx; /* 添加圆角 */
  margin-bottom: 10rpx; /* 添加底部边距 */
}

🎈 index.json

{
  "navigationBarTitleText": "牡丹慧灵",
  "onReachBottomDistance": 200
}

🎈index.js

var app = getApp();
// var api = require('../../utils/baiduai.js'); // 假设这是之前用于调用百度AI的模块
Page({
  data: {
    motto: 'PaddleX',
    result: [],
    images: {},
    img: '/image/牡丹花识别2.jpg',
    base64img: ''
  },
  onShareAppMessage: function () {
    return {
      title: 'PaddleXDemo小程序',
      path: '/pages/index/index',
      success: function (res) {
        wx.showToast({
          title: '分享成功',
          icon: 'success',
          duration: 500
        });
      },
      fail: function (res) {
        wx.showToast({
          title: '分享取消',
          icon: 'loading',
          duration: 500
        });
      }
    }
  },
  clear: function (event) {
    wx.clearStorage();
  },
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  uploads: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        if (res.tempFiles[0].size > 4096 * 1024) {
          wx.showToast({
            title: '图片文件过大哦',
            icon: 'none',
            mask: true,
            duration: 1500
          });
        } else {
          that.setData({
            img: res.tempFilePaths[0]
          });
        }
        wx.showLoading({
          title: "分析中...",
          mask: true
        });
        var fs = wx.getFileSystemManager();
        fs.readFile({
          filePath: res.tempFilePaths[0].toString(),
          encoding: 'base64',
          success: function (res) {
            // 获取到图片的base64，准备发送请求
            that.sendToPaddle(res.data);
          }
        });
      },
    });
  },
  sendToPaddle: function (base64Img) {
    var that = this;
     const API_URL = "";  // 飞桨平台模型的服务地址
    const TOKEN = ""; // 飞桨平台的访问令牌

    const headers = {
      "Authorization": `token ${TOKEN}`,
      "Content-Type": "application/json"
    };

    const payload = {
      image: base64Img
    };

    wx.request({
      url: API_URL,
      method: 'POST',
      data: payload,
      header: headers,
      success: function (resp) {
        wx.hideLoading();
        if (resp.statusCode === 200) {
          const result = resp.data.result;
          // 处理类别名称，移除数字和空格
          const processedCategories = result.categories.map(category => {
            return {
              ...category,
              name: category.name.replace(/\s+/g, '').replace(/\d+/g, '')
            };
          });
          wx.setStorageSync('dataList', JSON.stringify(processedCategories));
          that.setData({
            result: processedCategories
          });
        }else {
          wx.showModal({
            showCancel: false,
            title: '错误',
            content: '服务器返回错误'
          });
        }
      },
      fail: function () {
        wx.hideLoading();
        wx.showModal({
          showCancel: false,
          title: '请求失败',
          content: '无法连接到服务器'
        });
      }
    });
  },
  onLoad: function () {
  },
  onReachBottom: function () {
    wx.showToast({
      title: '已经到最后了！！！',
      icon: "none"
    });
  }
});

这是一个微信小程序的代码，主要功能是上传图片并调用百度AI进行图像识别。以下是代码的主要部分：

1. data对象：定义了页面的初始数据，包括motto、result（用于存储识别结果）、images（未使用）、img（图片路径）和base64img（图片的base64编码）。

2. onShareAppMessage函数：定义了小程序分享的功能，当用户分享时，会显示一个成功的提示框。

3. clear函数：清空本地存储的数据。

4. bindViewTap函数：跳转到日志页面。

5. uploads函数：选择一张图片，如果图片大小合适，将其路径设置为img，并读取图片的base64编码，然后调用sendToPaddle函数发送请求。

6. sendToPaddle函数：向指定的API_URL发送POST请求，携带图片的base64编码和其他必要的信息。请求成功后，处理返回的结果，将类别名称进行处理，移除数字和空格，并将结果存储到本地存储中。

7. onLoad函数：页面加载时执行的操作，这里没有具体实现。

8. onReachBottom函数：当用户滑动到页面底部时，显示一个提示框。

🎁效果演示

识别前：

传入图片后：