微信小程序调用python模型


Posted in Python onApril 21, 2022

需求:

小程序端拍照调用python训练好的图片分类模型。实现图片分类识别的功能。

微信小程序端:

重点在chooseImage函数中,根据图片路径获取到图片传递给flask的url;

Page({
    data: {
        SHOW_TOP: true,
        canRecordStart: false,
    },
    data: {
        tempFilePaths:'',
        sourceType: ['camera', 'album']
      },
    isSpeaking: false,
    accessToken: "",
    onLoad: function (options) {
        
        console.log("onLoad!");
        this.setHeader();
        var that=this
        wx.showShareMenu({
            withShareTicket: true //要求小程序返回分享目标信息
        });
        var isShowed = wx.getStorageSync("tip");
        if (isShowed != 1) {
            setTimeout(() => {
                this.setData({
                    SHOW_TOP: false
                })
                wx.setStorageSync("tip", 1)
            }, 3 * 1000)
        } else {
            this.setData({
                SHOW_TOP: false
            })
        };
    },
    },
    
 //头像点击处理事件,使用wx.showActionSheet()调用菜单栏
 buttonclick: function () {
    const that = this
    wx.showActionSheet({
      itemList: ['拍照', '相册'],
      itemColor: '',
      //成功时回调
      success: function (res) {
        if (!res.cancel) {
          /*
           res.tapIndex返回用户点击的按钮序号,从上到下的顺序,从0开始
           比如用户点击本例中的拍照就返回0,相册就返回1
           我们res.tapIndex的值传给chooseImage()
          */
          that.chooseImage(res.tapIndex)
        }
      },
      
setHeader(){
    const tempFilePaths = wx.getStorageSync('tempFilePaths');
    if (tempFilePaths) {
      this.setData({
        tempFilePaths: tempFilePaths
      })
    } else {
      this.setData({
        tempFilePaths: '/images/camera.png'
      })
    }
  },

  chooseImage(tapIndex) {
    const checkeddata = true
    const that = this
    wx.chooseImage({
    //count表示一次可以选择多少照片
      count: 1,
      //sizeType所选的图片的尺寸,original原图,compressed压缩图
      sizeType: ['original', 'compressed'],
      //如果sourceType为camera则调用摄像头,为album时调用相册
      sourceType: [that.data.sourceType[tapIndex]],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        console.log(res);
        const tempFilePaths = res.tempFilePaths
        //将选择到的图片缓存到本地storage中
        wx.setStorageSync('tempFilePaths', tempFilePaths)
        /*
		由于在我们选择图片后图片只是保存到storage中,所以我们需要调用一次   	        setHeader()方法来使页面上的头像更新
		*/
        that.setHeader();
        // wx.showToast({
        //   title: '设置成功',
        //   icon: 'none',
        // //   duration: 2000
        // })
        wx.showLoading({
            title: '识别中...',
        })
        
        var team_image = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
        wx.request({
          url: 'http://127.0.0.1:5000/upload', //API地址,upload是我给路由起的名字,参照下面的python代码
                     method: "POST",
          header: {
                     'content-type': "application/x-www-form-urlencoded",
                    },
          data: {image: team_image},//将数据传给后端
     
        success: function (res) {
            console.log(res.data);  //控制台输出返回数据  
            wx.hideLoading()
            wx.showModal({

                title: '识别结果', 
                confirmText: "识别正确",
                cancelText:"识别错误",
                content: res.data, 
                success: function(res) { 
                if (res.confirm) {
                console.log('识别正确')
                } else if (res.cancel) {
                console.log('重新识别')
                }
                }
                })     
          }
        })
      }
    })
  },
});

flask端:

将图片裁剪,填充,调用自己训练保存最优的模型,用softmax处理结果矩阵,最后得到预测种类

# coding=utf-8
from flask import Flask, render_template, request, jsonify
from werkzeug.utils import secure_filename
from datetime import timedelta
from flask import Flask, render_template, request
import torchvision.transforms as transforms
from PIL import Image
from torchvision import models
import os
import torch
import json
import numpy as np
import torch.nn as nn
import matplotlib.pyplot as plt
import base64

app = Flask(__name__)

def softmax(x):
    exp_x = np.exp(x)
    softmax_x = exp_x / np.sum(exp_x, 0)
    return softmax_x

with open('dir_label.txt', 'r', encoding='utf-8') as f:
    labels = f.readlines()
    print("oldlabels:",labels)
    labels = list(map(lambda x: x.strip().split('\t'), labels))
    print("newlabels:",labels)

def padding_black(img):
    w, h = img.size

    scale = 224. / max(w, h)
    img_fg = img.resize([int(x) for x in [w * scale, h * scale]])

    size_fg = img_fg.size
    size_bg = 224

    img_bg = Image.new("RGB", (size_bg, size_bg))

    img_bg.paste(img_fg, ((size_bg - size_fg[0]) // 2,
                              (size_bg - size_fg[1]) // 2))

    img = img_bg
    return img
# 输出
@app.route('/')
def hello_world():
    return 'Hello World!'

# 设置允许的文件格式
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

# 设置静态文件缓存过期时间
app.send_file_max_age_default = timedelta(seconds=1)

# 添加路由
@app.route('/upload', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        # 通过file标签获取文件
        team_image = base64.b64decode(request.form.get("image"))  # 队base64进行解码还原。
        with open("static/111111.jpg", "wb") as f:
            f.write(team_image)
        image = Image.open("static/111111.jpg")
        # image = Image.open('laji.jpg')
        image = image.convert('RGB')
        image = padding_black(image)
        transform1 = transforms.Compose([
            transforms.Resize(224),
            transforms.ToTensor(),
        ])
        image = transform1(image)
        image = image.unsqueeze(0)
        # image = torch.unsqueeze(image, dim=0).float()
        print(image.shape)
        model = models.resnet50(pretrained=False)
        fc_inputs = model.fc.in_features
        model.fc = nn.Linear(fc_inputs, 214)
        # model = model.cuda()
        # 加载训练好的模型
        checkpoint = torch.load('model_best_checkpoint_resnet50.pth.tar')
        model.load_state_dict(checkpoint['state_dict'])
        model.eval()

        src = image.numpy()
        src = src.reshape(3, 224, 224)
        src = np.transpose(src, (1, 2, 0))
        # image = image.cuda()
        # label = label.cuda()
        pred = model(image)
        pred = pred.data.cpu().numpy()[0]

        score = softmax(pred)
        pred_id = np.argmax(score)

        plt.imshow(src)
        print('预测结果:', labels[pred_id][0])
        # return labels[pred_id][0];
        return json.dumps(labels[pred_id][0], ensure_ascii=False)//将预测结果传回给前端
        # plt.show()
    #     return render_template('upload_ok.html')
    #     重新返回上传界面
    # return render_template('upload.html')

if __name__ == '__main__':
    app.run(debug=False)

大致的效果:

微信小程序调用python模型

微信小程序调用python模型

但是在手机上测试的话,wx.request{}里的url的域名不规范,不能出现这种端口号,目前还在想解决办法,有知道的大佬还望告知。

总结

到此这篇关于微信小程序前端如何调用python后端模型的文章就介绍到这了!


Tags in this post...

Python 相关文章推荐
天翼开放平台免费短信验证码接口使用实例
Dec 18 Python
利用Python绘制MySQL数据图实现数据可视化
Mar 30 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
May 02 Python
python实现pdf转换成word/txt纯文本文件
Jun 07 Python
Python爬虫包BeautifulSoup异常处理(二)
Jun 17 Python
python装饰器简介---这一篇也许就够了(推荐)
Apr 01 Python
使用pygame写一个古诗词填空通关游戏
Dec 03 Python
Python关于__name__属性的含义和作用详解
Feb 19 Python
Python3 获取文件属性的方式(时间、大小等)
Mar 12 Python
Python 创建TCP服务器的方法
Jul 28 Python
用Python进行websocket接口测试
Oct 16 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
Nov 24 Python
使用python绘制分组对比柱状图
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
Apr 21 #Python
Python尝试实现蒙特卡罗模拟期权定价
Python matplotlib绘制条形统计图 处理多个实验多组观测值
python绘制简单直方图(质量分布图)的方法
Python绘制散乱的点构成的图的方法
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
You might like
PHP获取url的函数代码
2011/08/02 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
javaScript复制功能调用实现方案
2012/12/13 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
js验证上传图片的方法
2015/05/12 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
python调用win32接口进行截图的示例
2020/11/11 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
南京某公司笔试题
2013/01/27 面试题
《燕子》教学反思
2014/02/18 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
班风口号
2014/06/18 职场文书
铁路安全反思材料
2014/12/24 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库