微信小程序前端如何調(diào)用python后端的模型詳解

更新時(shí)間：2022年04月21日 11:17:55 作者：慢慢來的小邵

近期需要開發(fā)一個(gè)打分的微信小程序,涉及到與后臺(tái)服務(wù)器的數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于微信小程序前端如何調(diào)用python后端模型的相關(guān)資料,需要的朋友可以參考下

需求：

小程序端拍照調(diào)用python訓(xùn)練好的圖片分類模型。實(shí)現(xiàn)圖片分類識(shí)別的功能。

微信小程序端：

重點(diǎn)在chooseImage函數(shù)中，根據(jù)圖片路徑獲取到圖片傳遞給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 //要求小程序返回分享目標(biāo)信息
        });
        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
            })
        };
    },
    },
    
 //頭像點(diǎn)擊處理事件，使用wx.showActionSheet()調(diào)用菜單欄
 buttonclick: function () {
    const that = this
    wx.showActionSheet({
      itemList: ['拍照', '相冊(cè)'],
      itemColor: '',
      //成功時(shí)回調(diào)
      success: function (res) {
        if (!res.cancel) {
          /*
           res.tapIndex返回用戶點(diǎn)擊的按鈕序號(hào)，從上到下的順序，從0開始
           比如用戶點(diǎn)擊本例中的拍照就返回0，相冊(cè)就返回1
           我們r(jià)es.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則調(diào)用攝像頭，為album時(shí)調(diào)用相冊(cè)
      sourceType: [that.data.sourceType[tapIndex]],
      success(res) {
        // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        console.log(res);
        const tempFilePaths = res.tempFilePaths
        //將選擇到的圖片緩存到本地storage中
        wx.setStorageSync('tempFilePaths', tempFilePaths)
        /*
		由于在我們選擇圖片后圖片只是保存到storage中，所以我們需要調(diào)用一次   	        setHeader()方法來使頁面上的頭像更新
		*/
        that.setHeader();
        // wx.showToast({
        //   title: '設(shè)置成功',
        //   icon: 'none',
        // //   duration: 2000
        // })
        wx.showLoading({
            title: '識(shí)別中...',
        })
        
        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},//將數(shù)據(jù)傳給后端
     
        success: function (res) {
            console.log(res.data);  //控制臺(tái)輸出返回?cái)?shù)據(jù)  
            wx.hideLoading()
            wx.showModal({

                title: '識(shí)別結(jié)果', 
                confirmText: "識(shí)別正確",
                cancelText:"識(shí)別錯(cuò)誤",
                content: res.data, 
                success: function(res) { 
                if (res.confirm) {
                console.log('識(shí)別正確')
                } else if (res.cancel) {
                console.log('重新識(shí)別')
                }
                }
                })     
          }
        })
      }
    })
  },
});

flask端：

將圖片裁剪，填充，調(diào)用自己訓(xùn)練保存最優(yōu)的模型，用softmax處理結(jié)果矩陣，最后得到預(yù)測(cè)種類

# 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!'

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

# 設(shè)置靜態(tài)文件緩存過期時(shí)間
app.send_file_max_age_default = timedelta(seconds=1)

# 添加路由
@app.route('/upload', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        # 通過file標(biāo)簽獲取文件
        team_image = base64.b64decode(request.form.get("image"))  # 隊(duì)base64進(jìn)行解碼還原。
        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()
        # 加載訓(xùn)練好的模型
        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('預(yù)測(cè)結(jié)果：', labels[pred_id][0])
        # return labels[pred_id][0];
        return json.dumps(labels[pred_id][0], ensure_ascii=False)//將預(yù)測(cè)結(jié)果傳回給前端
        # plt.show()
    #     return render_template('upload_ok.html')
    #     重新返回上傳界面
    # return render_template('upload.html')

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

大致的效果：