脚本之家，脚本语言编程技术及教程分享平台！
分类导航

Python|VBS|Ruby|Lua|perl|VBA|Golang|PowerShell|Erlang|autoit|Dos|bat|shell|

服务器之家 - 脚本之家 - Python - 微信小程序前端如何调用python后端的模型详解

微信小程序前端如何调用python后端的模型详解

2022-12-05 10:15慢慢来的小邵 Python

近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,这篇文章主要给大家介绍了关于微信小程序前端如何调用python后端模型的相关资料,需要的朋友可以参考下

需求：

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

微信小程序端：

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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处理结果矩阵，最后得到预测种类

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# 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后端模型的文章就介绍到这了,更多相关小程序调用python后端模型内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://blog.csdn.net/m0_44946030/article/details/115557881

  • 后端
  • Python
  • 前端
  • 微信小程序

    • 延伸 · 阅读

    精彩推荐
    • Python对numpy中向量式三目运算符详解

      对numpy中向量式三目运算符详解

      今天小编就为大家分享一篇对numpy中向量式三目运算符详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      grey_csdn9482021-04-15
    • PythonPyQt5实现用户登录GUI界面及登录后跳转

      PyQt5实现用户登录GUI界面及登录后跳转

      PyQt5是强大的GUI工具之一，通过其可以实现优秀的桌面应用程序。本文主要介绍了PyQt5实现用户登录GUI界面及登录后跳转，具有一定的参考价值，感兴趣的可...

      Python集中营4872022-03-06
    • PythonTensorflow加载预训练模型和保存模型的实例

      Tensorflow加载预训练模型和保存模型的实例

      今天小编就为大家分享一篇Tensorflow加载预训练模型和保存模型的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      huachao100114122021-03-23
    • Pythonpython实现简单温度转换的方法

      python实现简单温度转换的方法

      这篇文章主要介绍了python实现简单温度转换的方法,涉及Python操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 ...

      niuniu24352019-11-28
    • Python最简单的matplotlib安装教程(小白)

      最简单的matplotlib安装教程(小白)

      这篇文章主要介绍了最简单的matplotlib安装教程(小白)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们...

      猪猪侠喜欢躲猫猫11532020-07-29
    • PythonPython实现将多个空格换为一个空格.md的方法

      Python实现将多个空格换为一个空格.md的方法

      今天小编就为大家分享一篇Python实现将多个空格换为一个空格.md的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...

      横行小道5912021-05-05
    • PythonPython多线程与多进程相关知识总结

      Python多线程与多进程相关知识总结

      进程(process)和线程(thread)是操作系统的基本概念,是操作系统程序运行的基本单元,本文简要介绍进程和线程的概念以及Python中的多进程和多线程.需要的朋友...

      测试开发小记6472021-11-14
    • Pythonpython中封包建立过程实例

      python中封包建立过程实例

      在本篇文章里小编给大家分享的是一篇关于python中封包建立过程实例内容，有兴趣的朋友们可以学习参考下。...

      小妮浅浅7122021-09-05
    最近更新
    编辑推荐
    阅读排行
    热门标签
    2048 　 6006 　 contextlib 　 SLOTS 　 MELIAE 　 FEEDPARSER 　 暂存 　 持久性管理 　 pickle模块 　 THREADING 　 reduce 　 nignx 　 装饰器 　 函数式编程 　 兔子毒药 　 监控文件 　 流量监控 　 Web框架 　 定价 　 PIL库 　 高斯模糊 　 wxPython 　 import 　 自定义模块 　 Python开发 　 元类 　 metaclass 　 魔术方法 　 DNSPod 　 动态解析域名 　
    © 2019-2022 脚本之家 | 服务器之家(www.tuohang.net)旗下站点 版权所有关于我们联系我们版权申明网站地图