微信小程序调用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 相关文章推荐
python基础教程之lambda表达式使用方法
Feb 12 Python
利用Python如何生成随机密码
Apr 20 Python
Python使用ntplib库同步校准当地时间的方法
Jul 02 Python
python通过zabbix api获取主机
Sep 17 Python
python实现批量注册网站用户的示例
Feb 22 Python
python支付宝支付示例详解
Aug 22 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
Sep 23 Python
python 实现从高分辨图像上抠取图像块
Jan 02 Python
pycharm激活码有效到2020年11月底
Sep 18 Python
使用matplotlib的pyplot模块绘图的实现示例
Jul 12 Python
python3实现无权最短路径的方法
May 12 Python
Python编写冷笑话生成器
Apr 20 Python
使用python绘制分组对比柱状图
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
Apr 21 #Python
Python尝试实现蒙特卡罗模拟期权定价
Python matplotlib绘制条形统计图 处理多个实验多组观测值
python绘制简单直方图(质量分布图)的方法
Python绘制散乱的点构成的图的方法
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
You might like
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
numpy.delete删除一列或多列的方法
2018/04/03 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
战友聚会邀请函
2014/01/18 职场文书
优秀经理事迹材料
2014/02/01 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
医院保洁服务方案
2014/06/11 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python