使用微信小程序调用飞桨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>
这段代码是一个微信小程序的页面结构，主要用于展示牡丹花的图片和信息。具体解释如下：
<view> 标签用于创建一个容器，类似于 HTML 中的 <div> 标签。<image> 标签用于显示图片，mode='aspectFit' 表示图片保持原始宽高比，缩放至完全显示。<button> 标签用于创建一个按钮，bindtap="uploads" 表示点击按钮时触发名为 uploads 的函数，class="up" 为按钮设置样式类。wx:if="{{result.length>0}}" 表示当 result 数组的长度大于 0 时，显示以下内容。wx:for="{{result}}" 表示遍历 result 数组，将每个元素赋值给 item。wx:if="{{item.name==='莲鹤'}}" 等条件判断语句，根据 item.name 的值显示不同的牡丹花信息。<view> 标签内部的内容是各个牡丹花的详细信息，包括形态特征、生长环境、分布范围等。wx:else="{{item.name==='寒樱狮子'}}" 表示当 item.name 不等于前面的任何一个值时，显示关于 "寒樱狮子" 的信息。index.wxss
.image {
width: 100%;
height: 360rpx;
}
.container {
margin-top: -110px;
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%;
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();
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) {
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进行图像识别。以下是代码的主要部分：
data对象：定义了页面的初始数据，包括motto、result（用于存储识别结果）、images（未使用）、img（图片路径）和base64img（图片的base64编码）。
onShareAppMessage函数：定义了小程序分享的功能，当用户分享时，会显示一个成功的提示框。
clear函数：清空本地存储的数据。
bindViewTap函数：跳转到日志页面。
uploads函数：选择一张图片，如果图片大小合适，将其路径设置为img，并读取图片的base64编码，然后调用sendToPaddle函数发送请求。
sendToPaddle函数：向指定的API_URL发送POST请求，携带图片的base64编码和其他必要的信息。请求成功后，处理返回的结果，将类别名称进行处理，移除数字和空格，并将结果存储到本地存储中。
onLoad函数：页面加载时执行的操作，这里没有具体实现。
onReachBottom函数：当用户滑动到页面底部时，显示一个提示框。
效果演示
识别前：
传入图片后：
相关知识
微信小程序之植物识别demo(百度开发接口）
【网站项目】鲜花销售微信小程序
【全网首发】基于微信小程序的网上花店系统 鲜花销售小程序
基于微信小程序的校园鲜花销售系统
微信小程序商城嫁接公众号的开通步骤是什么？
【源码+文档】基于微信小程序的网上花店系统
微信小程序识别花草方法步骤 微信小程序怎么识别花草
基于STM32和云平台的花卉养护系统设计(微信小程序)(209)
基于TensorFlow训练花朵识别模型的源码和Demo
基于uniapp微信小程序的摄影街拍圈子交流平台
网址: 使用微信小程序调用飞桨PaddleX平台自行训练的模型——微信小程序用训练的牡丹花模型Demo测试 https://m.huajiangbk.com/newsview600829.html
| 上一篇: 牡丹花品种大全，细数牡丹花最珍贵 |
下一篇: 牡丹花名称大全 牡丹花品种名称大 |
