Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how WeChat Mini Programs front-end calls the python back-end model". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this "WeChat Mini Programs front-end how to call the python back-end model" article can help you solve the problem.

Demand:

Mini Program users take photos by calling the image classification model trained by python. Realize the function of picture classification and recognition.

Mini programs on Wechat:

The key point is that in the chooseImage function, the url that the picture is passed to flask is obtained according to the image path.

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 / / request Mini Program to return sharing target information}); 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})} },}, / / the avatar clicks to handle the event Use wx.showActionSheet () to call the menu bar buttonclick: function () {const that = this wx.showActionSheet ({itemList: ['photo', 'photo album'], itemColor:'', / / callback success: function (res) {if (! res.cancel) {/ * res.tapIndex returns the sequence number of the button clicked by the user, from top to bottom Starting from 0, for example, when the user clicks on the photo in this example, the photo album returns 0. The value of our res.tapIndex is passed to 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 indicates how many photos can be selected at a time count: 1, / / the size of the selected picture Original original image, compressed compressed image sizeType: ['original',' compressed'], / / call camera if sourceType is camera, call photo album sourceType when album: [that.data.sourceType [tapIndex]], success (res) {/ / tempFilePath can display picture console.log (res) as the src attribute of img tag Const tempFilePaths = res.tempFilePaths / / cache the selected image to the local storage wx.setStorageSync ('tempFilePaths', tempFilePaths) / * since the picture is only saved to storage after we select the picture, we need to call the setHeader () method to update the avatar on the page * / that.setHeader () / / wx.showToast ({/ / title: 'set successfully', / / icon: 'none', / duration: 2000 / /}) wx.showLoading ({title:' recognizing...',}) var team_image = wx.getFileSystemManager () .readFileSync (res.tempFilePaths [0] "base64") wx.request ({url: 'http://127.0.0.1:5000/upload', / / API address Upload is the name I gave to the route. Refer to the following python code method: "POST", header: {'content-type': "application/x-www-form-urlencoded",}, data: {image: team_image} / / transfer the data to the backend success: function (res) {console.log (res.data) / / console output returns data wx.hideLoading () wx.showModal ({title: 'recognition result', confirmText: "correct recognition", cancelText: "recognition error", content: res.data Success: function (res) {if (res.confirm) {console.log ('identify correct')} else if (res.cancel) {console.log ('re-identify')}) })})} }); Flask side:

Cut, fill and call the picture to train and save the best model, use softmax to process the result matrix, and finally get the kind of prediction.

# coding=utf-8from flask import Flask, render_template, request, jsonifyfrom werkzeug.utils import secure_filenamefrom datetime import timedeltafrom flask import Flask, render_template, requestimport torchvision.transforms as transformsfrom PIL import Imagefrom torchvision import modelsimport osimport torchimport jsonimport numpy as npimport torch.nn as nnimport matplotlib.pyplot as pltimport base64app = Flask (_ _ name__) def softmax (x): exp_x = np.exp (x) softmax_x = exp_x / np.sum (exp_x, 0) return softmax_xwith open ('dir_label.txt',' 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# output @ app.route ('/') def hello_world (): return 'Hello Worldword format # sets the allowed file format ALLOWED_EXTENSIONS = set ([' png', 'jpg',' JPG', 'PNG',' bmp']) def allowed_file (filename): return'. In filename and filename.rsplit ('.', 1) [1] in ALLOWED_EXTENSIONS# sets static file cache expiration time app.send_file_max_age_default = timedelta (seconds=1) # add route @ app.route ('/ upload', methods= ['POST') 'GET']) def upload (): if request.method = =' POST': # get the file team_image = base64.b64decode (request.form.get ("image")) through the file tag # team base64 to decode and restore. 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 Model = model.cuda () # load trained model 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) ) # 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 ('Forecast result:', labels [pred _ id] [0]) # return labels [pred _ id] [0] Return json.dumps (labels [pred _ id] [0], ensure_ascii=False) / / send the prediction result back to the front end # plt.show () # return render_template ('upload_ok.html') # return to the upload interface # return render_template (' upload.html') if _ _ name__ = ='_ main__': app.run (debug=False)

Approximate effect:

This is the end of the introduction on "how WeChat Mini Programs front-end calls the model of python back-end". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.