yolov5部署+微信小程序前端展示

这篇具有很好参考价值的文章主要介绍了yolov5部署+微信小程序前端展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

分为yolov5项目部署和微信小程序两部分,先介绍微信小程序前端展示+flask后端,之后介绍项目部署这部分。

一、先上效果图

1. 点击选择图片,调用摄像头选择图片

yolov5 微信小程序,yolov5 flask 微信小程序,前端,python,flask,javascript

 

2.选择图片之后,点击开始检测,然后返回结果

 yolov5 微信小程序,yolov5 flask 微信小程序,前端,python,flask,javascript​​​​​​​

 

 二、前端代码

wxml文件:

view class="container">
    <view>
      <image src="{{avatarUrl}}" class=".img" bindtap="imgClick"></image>
      <button bindtap="chooseimg" class=".btn_select">选择图片</button>
      <button form-type="submit" class=".btn_submit" bindtap="submitimg">开始检测</button>
    </view>
    <view class="text-container">
      <view>{{name_and_nums}}</view>
      <view class="text" wx:for="{{names}}">{{item.name}}: {{item.value}} </view>
    </view>
  </view>

js文件,分为两部分,一部分是调用摄像头,另一部分是图片检测

1. 数据定义:

data: {
    avatarUrl: 'res.png',
    base64imgurl: null,
    name_num: '',
    names: [],
    name_and_nums: ''

  },

2. 调用摄像头,使用微信小程序中的wx.chooseImage接口,并使用wx.setStorage接口对图片路径进行保存。代码:

chooseimg: function() {
    var that = this
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为 img 标签的 src 属性显示图片
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        that.setData({avatarUrl:tempFilePaths[0]})
        console.log(tempFilePaths[0])
    wx.setStorage({key:'img_path', data: tempFilePaths[0]})
}

3. 先使用wx.getImageInfo获取上一步保存的图片格式(png/jpg等),然后调用wx.uploadFile接口,将图片上传到服务器,然后使用训练好的权重参数对图片进行检测,然后返回结果,因为返回的结果是一种图像流。为了在前端对图片进行展示,需要在图片编码前加字段:‘data:image/png;base64’,将图片格式转换为base64格式。代码:

submitimg: function(){
    var img_path
    var that
    wx.getImageInfo({
          src: img_path,
          success(res){
          imgtype = res.type
          console.log(imgtype)
      }
    })
    wx.uploadFile({
          filePath: img_path,
          name: 'image',
          url: '服务器地址',
          // 上传成功!
          success(res){
            console.log(res)
            var img_data =  JSON.parse(res.data).data.image
            var base64str_img = 'data:image/' + imgtype + ';base64,' + img_data
            that.setData({avatarUrl: base64str_img})
            
          // 上传失败
          fail(){
          console.log('--failed--')
    
          }
        })
      }
}

(PS:在前端定义了传入的数据名为image,所以,flask后端接收数据名也同样为image)

//前端:

wx.uploadFile({
      filePath: img_path,
      name: 'image',
      url: 服务器地址
})

//后端
img_file = request.files["image"]

三、后端代码

后端这里使用的是flask,这部分的使用相对比较简单

1. 因为model返回的结果是一个list,里面有dict组成,主要就是框的左上角、右下角左边、类别以及类别名。之后对这个result进行处理,写一个画图的py文件,根据输入的图像和得到result画框,将画框后的结果保存到save_path中,然后再将图像格式进行转换为base64(返回的数据格式:(这里的img_res已经是经过画框之后的结果))

2. 然后因为前端的要求,返回的形式需要用json格式,同时也需要将返回结果放在data里面,方便前端读取后端返回的数据。

@app.route(DETECTION_URL, methods=["POST"])
def predict():
    if request.method != "POST":
        return jsonify({"code": 2, "msg": "the request method is error!", "data": {"isSecret": "null"}})
    if request.files.get("image"):
        # 将读取的图片流转换为图片格式
        im_file = request.files["image"]
        im_bytes = im_file.read()
        im = Image.open(io.BytesIO(im_bytes))
        #将图片输入到模型中,输出的结果是一个list,带有坐标类别等信息
        results = model(im, size=640)  # reduce size=320 for faster inference
        # 预测的结果(坐标 种类 置信度)
        result = results.pandas().xyxy[0].to_json(orient="records")

        img_res = ''
        with open(save_path, 'rb') as f:
            img_res = f.read()
            img_res = base64.b64encode(img_res)
        
        return jsonify({ "data": {"detect_res": "yes", "image": str(img_res, 'utf-8')}})

if __name__ == "__main__":
    torch.hub._validate_not_a_forked_repo = lambda a, b, c: True

    model = torch.hub.load("path", "custom", path="./best.pt", source="local", force_reload=False)  # force_reload to recache

最后!总结一下,之前刚开始要做的时候,感觉还挺难的,真的开始做的时候,感觉还行(虽然做的比较简单,页面也不是很好看,css一生之敌!!!) 

之后,会学一下项目的部署,目前用的是别人部署好的,但是还是要自己学学的!!!

ps:为什么会写这个博客呢?因为在刚开始找资料的时候,找到一个博客,感觉和我的需求一样,于是就点进去看,结果是一个购买链接,还卖399!!!就这么个东西就399!!我表示很无语,就决定自己写好了之后一定要公开!!!如果大家有什么问题,可以留言,我们一起共同学习!!!文章来源地址https://www.toymoban.com/news/detail-781287.html

到了这里,关于yolov5部署+微信小程序前端展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • YOLOv5部署到web端(flask+js简单易懂)

    最近,老板让写一个程序把 yolov5检测模型部署到web端 ,在网页直接进行目标检测。经过1个星期的努力,终于实现基本功能👻(累晕了)。网上查阅了很多资料,发现很多的技术比较复杂,当然他们的页面都比较漂亮,然后我打算自己写一篇简单记录一下哈哈。进入正题,

    2024年02月01日
    浏览(51)
  • flask 后端 + 微信小程序和网页两种前端:调用硬件(相机和录音)和上传至服务器

    选择 flask 作为后端,因为后续还需要深度学习模型,python 语言最适配;而 flask 框架轻、学习成本低,所以选 flask 作为后端框架。 微信小程序封装了调用手机硬件的 api,通过它来调用手机的摄像头、录音机,非常方便。 网页端使用 JavaScript 调用则困难一些,走了很多弯路,

    2024年04月15日
    浏览(42)
  • 基于微信小程序的作品集展示的设计与开发(源码+lw+部署文档+讲解等)

    💗 博主介绍 :✌新人博主,工作经验两年+、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码+数据库🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人 基于微信小程序的作品集展示平

    2024年02月04日
    浏览(54)
  • 水球展示——微信小程序

    html   less js 获取数据赋值就行  

    2024年02月07日
    浏览(37)
  • 微信小程序--列表展示

    小知识: wx:for=\\\"{{list}}\\\"用来循环数组。 wx:for-item=‘变量名(随便起)’   它是指定循环数据当前的变量名,可以通过  {{变量名.属性}} 展示数组的元素。 wx:for-index=‘变量名(随便起)’,它是指向当前元素的下标名,可以在其他事件中定义自定义事件(data-xxx=\\\'{{变量名}}

    2024年02月15日
    浏览(38)
  • 微信小程序3D,使用Three.js在微信小程序中展示gltf模型,使用VisionKit展示AR能力

    本仓库只开源gltf模型展示技术,技术好的朋友有这些代码就能帮助你解决很多问题了 如需要完整项目(基于若依框架开发的后端,AR能力前端)需另外付费赞助, 联系方式:QQ 790002517 微信公众号:时不待我 https://github.com/zzy-life/Wechat3D Three.js Three.js is a JavaScript 3D library. thr

    2024年02月09日
    浏览(47)
  • 微信小程序展示倒计时

    html   ts  

    2024年04月25日
    浏览(37)
  • 微信小程序去除默认滚动条展示

    一、微信小程序改版框架升级后,滚动条默认展示了。 在实际应用中效果不好,如果想默认隐藏掉,代码段如下: 设置成全局样式,展示即可。 更多:

    2024年02月03日
    浏览(39)
  • uniapp微信小程序实现地图展示控件

    最终实现效果: 地图上展示控件,并可以点击。 目录 一、前言 二、在地图上展示控件信息 点击后可进行绘制面图形 1.使用cover-view将控件在地图上展示 2.设置控件样式,使用好看的图标 3.控件绑定点击事件 原本使用的是 controls ,但是我发现官方明确说明,这个功能即将废

    2024年02月04日
    浏览(107)
  • 微信小程序实现下拉简单展示接口数据

    在.js文件中这样写,代码如下: 在wxml文件中这样写,代码如下: 在.json文件中记得添加如下代码,打开下拉功能 \\\"window\\\":{     \\\"backgroundTextStyle\\\":\\\"light\\\",     \\\"navigationBarBackgroundColor\\\": \\\"#282A36\\\",     \\\"navigationBarTitleText\\\": \\\"Linux\\\",     \\\"navigationBarTextStyle\\\":\\\"white\\\",      \\\"enablePullDo

    2024年01月20日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包