使用微信小程序调用飞桨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函数:当用户滑动到页面底部时,显示一个提示框。

🎁效果演示

识别前:

传入图片后:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61152.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】基础篇二、引用详解

文章目录 1.引用的概念和定义2.引用的特性3.引用的使用3.1 做函数返回值3.2 传参 3.3 其他使用 4.const的运用引用的权限问题&#xff1b;const修饰引用&#xff1b; 5.指针和引用的对比 1.引用的概念和定义 在介绍概念之前先说一下引用的符号——“ & ”&#xff1b;对于这…

D3基础:绘制圆形、椭圆形、多边形、线、路径、矩形

在D3.js中&#xff0c;可以通过SVG元素来创建各种几何图形。以下是D3.js中常用的几何图形及其简单的创建方法&#xff1a; 1. 圆形 (Circle) 圆形是最基本的形状之一&#xff0c;可以通过<circle>标签来创建。 <!DOCTYPE html> <html> <head><met…

前端监控之sourcemap精准定位和还原错误源码

一、概述 在前端开发中&#xff0c;监控和错误追踪是确保应用稳定性和用户体验的重要环节。 随着前端应用的复杂性增加&#xff0c;JavaScript错误监控变得尤为重要。在生产环境中&#xff0c;为了优化加载速度和性能&#xff0c;前端代码通常会被压缩和混淆。这虽然提升了性…

MySQL的表的约束以及查询

本篇文章继续给大家梳理MySQL的操作 目录 表的约束 空属性 默认值 列描述 0填充 主键 主键常识 添加主键 删除主键 复合主键 自增长 唯一键 外键 单/多行输入与全/指定列的插入 全列输入 单行输入 多行插入 指定列插入 单行输入 多行插入 插入否则更新 替换…

MySQL 日志 主从复制

1. 日志 学习链接&#xff0c;click mysql中有4种日志&#xff1a; 错误日志二进制日志查询日志慢查询日志 1.1 错误日志 错误日志是MySQL中最重要的日志之一&#xff0c;它记录了当mysqld启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当…

自动驾驶系列—深入解析自动驾驶车联网技术及其应用场景

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

基于YOLOv8深度学习的公共卫生防护口罩佩戴检测系统(PyQt5界面+数据集+训练代码)

在全球公共卫生事件频发的背景下&#xff0c;防护口罩佩戴检测成为保障公众健康和控制病毒传播的重要手段之一。特别是在人员密集的公共场所&#xff0c;例如医院、学校、公共交通工具等地&#xff0c;口罩的正确佩戴对降低病毒传播风险、保护易感人群、遏制疫情扩散有着至关重…

vue使用List.reduce实现统计

需要对集合的某些元素的值进行计算时&#xff0c;可以在计算属性中使用forEach方法 1.语法&#xff1a;集合.reduce ( ( 定义阶段性累加后的结果 , 定义遍历的每一项 ) > 定义每一项求和逻辑执行后的返回结果 , 定义起始值 ) 2、简单使用场景&#xff1a;例如下面…

【Linux】进程的优先级

进程的优先级 一.概念二.修改优先级的方法三.进程切换的大致原理&#xff1a;四.上下文数据的保存位置&#xff1a; 一.概念 cpu资源分配的先后顺序&#xff0c;就是指进程的优先权&#xff08;priority&#xff09;。 优先权高的进程有优先执行权利。配置进程优先权对多任务环…

【软件工程】一篇入门UML建模图(类图)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必练内功_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…

AWTK-WIDGET-WEB-VIEW 实现笔记 (3) - MacOS

MacOS 上实现 AWTK-WIDGET-WEB-VIEW 有点麻烦&#xff0c;主要原因是没有一个简单的办法将一个 WebView 嵌入到一个窗口中。所以&#xff0c;我们只能通过创建一个独立的窗口来实现。 1. 创建窗口 我对 Object-C 不熟悉&#xff0c;也不熟悉 Cocoa 框架&#xff0c;在 ChatGPT…

QT仿QQ聊天项目,第三节,实现聊天界面

一&#xff0c;界面控件示意图 界面主要由按钮QPushButton,标签QLabel,列表QListWidget 要注意的是QListWidget既是实现好友列表的控件&#xff0c;也是实现聊天气泡的控件 二&#xff0c;控件样式 QPushButton#btn_name {border:none;}QPushButton#btn_close {border:1px;bac…

微信小程序自定义顶部导航栏(适配各种机型)

效果图 1.pages.js&#xff0c;需要自定义导航栏的页面设置"navigationStyle": "custom" 2.App.vue,获取设备高度及胶囊位置 onLaunch: function () {// 系统信息const systemInfo uni.getSystemInfoSync()// 胶囊按钮位置信息const menuButtonInfo uni.…

Android Studio开发学习(五)———LinearLayout(线性布局)

一、布局 认识了解一下Android中的布局&#xff0c;分别是: LinearLayout(线性布局)&#xff0c;RelativeLayout(相对布局)&#xff0c;TableLayout(表格布局)&#xff0c; FrameLayout(帧布局)&#xff0c;AbsoluteLayout(绝对布局)&#xff0c;GridLayout(网格布局) 等。 二、…

C++:哈希拓展-位图

目录 一.问题导入 二.什么是位图? 2.1如何确定目标数在哪个比特位? 2.2如何存放高低位 2.3位图模拟代码实现 2.3.1如何标记一个数 2.3.2如何重置标记 2.3.3如何检查一个数是否被标记 整体代码实现 标准库的Bitset 库中的bitset的缺陷 简单应用 一.问题导入 这道…

实用教程:如何无损修改MP4视频时长

如何在UltraEdit中搜索MP4文件中的“mvhd”关键字 引言 在视频编辑和分析领域&#xff0c;有时我们需要深入到视频文件的底层结构中去。UltraEdit&#xff08;UE&#xff09;和UEStudio作为强大的文本编辑器&#xff0c;允许我们以十六进制模式打开和搜索MP4文件。本文将指导…

Spring Boot 接口防重复提交解决方案

文章目录 前言使用Token机制实现步骤1.生成Token2.传递Token3.验证Token 使用Redis实现步骤1.引入Redis依赖2.生成Token3.传递Token4.验证Token 使用Spring AOP实现步骤1.定义注解2.创建切面3.使用注解 总结 前言 在Web开发中&#xff0c;防止用户重复提交表单是一个常见的需求…

Linux性能优化之火焰图简介

Linux 火焰图&#xff08;Flame Graph&#xff09;是一种可视化工具&#xff0c;用于分析程序性能问题&#xff0c;尤其是 CPU 使用情况。它展示了程序中函数调用的层次结构和各个调用栈占用的时间比例。 以下是详细介绍&#xff0c;包括火焰图的工作原理、生成步骤和实际使用中…

笔记|M芯片MAC (arm64) docker上使用 export / import / commit 构建amd64镜像

很简单的起因&#xff0c;我的东西最终需要跑在amd64上&#xff0c;但是因为mac的架构师arm64&#xff0c;所以直接构建好的代码是没办法跨平台运行的。直接在arm64上pull下来的docker镜像也都是arm64架构。 检查镜像架构&#xff1a; docker inspect 8135f475e221 | grep Arc…

【JavaWeb】JavaWeb入门之XML详解

目录 1.XML介绍 1.1.XML概述 1.1.1.什么是XML 1.1.2.XML的作用 1.1.3.XML与HTML的比较 1.1.4.XML和properties&#xff08;属性文件&#xff09;比较 1.1.5.W3C组织 1.2.XML语法概述 1.2.1.XML文档展示 1.2.2.XML文档的组成部分 1.3.XML文档声明 1.3.1.什么是XML文…