机器学习模型部署--打通前后端任督二脉
bigegpt 2024-10-07 06:27 4 浏览
## 前言
### 学历与定位
近日在某论坛,有网友提问道:搞机器学习是不是要博士或是硕士学历,是不是要求很高,顶会论文?本科生或者更低学历的,是不是就没有机会了?从最近公司的招聘来看,算法工程师的 bar 确实有在提高。但在某些事业部,仍需要很大的人力来做落地场景。每个人都要找准自己的定位,公司也有它的部门定位。如果是发论文、要在学术界站稳脚跟,给投资人“我们很重视最新技术”的信心,那博士确实很重要。另一个角度,从实用角度来说,研究生和本科生可能性价比更高。当然,作为一个小本就工作的人,没有较为丰富的实战经验,有机会的话,还是拿到硕士及更高学历比较好。这里的实战经验就比如:搭建一个完整的、涉及算法模型、后端及前端的系统。
### 模型算法的实用主义
机器学习的实用主义,不是在论文多少,而是用正确的方法去解决正确的问题。而作为背后的工程师,除了调参、除了写 sql,做调包侠、做 sql boy、报表 boy 以外,在之前的文章也提到过,要学会做正确的展示,做全套的工程化实施。毕竟,等排期很难受;有些情况前后端资源不够,或者优先级很低,那就需要自己动手了。以下以上面的垃圾邮件分类为例子,说明该如何搭建一个前后端完整的机器学习系统。
关注微信公众号:谷粒先生,下载权重文件并第一时间获取更新。
这里将本次的任务拆解,分为三个部分来讲。后端 flask、前端 Vue、ML 模型采用 flair,项目地址 [kuhung/flask_vue_ML](https://github.com/kuhung/flask_vue_ML)
## 后端 flask
### 相关依赖的安装
pip install -r requirements.txt
### 核心函数
1. 导入函数包
from flask import Flask, jsonify, request from flask_cors import CORS # 做跨域的准备 from flask import session # 追踪客户端会话 from flair.models import TextClassifier # 模型导入,采用前不久开源的 flair 做文本分类 from flair.data import Sentence
2. 准备工作
app = Flask(__name__) # 声明准备 app.secret_key = "super_secret_key" CORS(app) classifier = TextClassifier.load_from_file('models/best-model.pt') # 模型加载
3. 配置 flask 的路由
# 根路由配置 @app.route('/', methods=['GET']) def index(): return jsonify("welcome to Kuhung API") # GET 方法,这里 session 的作用是追踪客户端会话,防止重复请求模型 @app.route('/api/tasks', methods=['GET']) def get_result(): result = [] try: data_result = session['my_result'] result.append ({'title': data_result['title'], 'tag': data_result['tag'] }) except: result.append ({'title': 'The txt you input', 'tag': 'spam or ham' }) return jsonify(result) # POST 方法 @app.route('/api/task', methods=['POST']) def input_predict_text(): title = request.get_json()['title'] # 解析请求 sentence = Sentence(title) # 对请求做数据预处理 classifier.predict(sentence) # 调用模型,做预测,返回带标签的数据 text = sentence.to_plain_string() # 解析出原始数据 label = sentence.labels[0] # 解析出标签 result = {'title' : text, 'tag' : label.value} # 拼接成字典格式 session['my_result'] = result # 存入 session ,以减少重复请求对模型的压力 return jsonify(result) # 返回 json 格式的数据 if __name__ == '__main__': app.run(debug=True) # 开发过程中开启 debug 调试模式
### 启动服务
python app.py
## 前端 vue
前端采用 Vue 框架,与后端分离。使用 Webpack 进行资源管理与打包。
### 相关依赖的安装
npm install -g vue-cli npm install
### 自定义组件
通过 `vue init webpack flask_vue_ML` 后,进入项目文件夹,增加自定义内容。
#### index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>exposemodel</title> </head> <body> <div id="app"></div> <!-- 其它文件会自动注入这里 --> </body> </html>
#### src 文件夹
- components
- Home.vue // 自定义组件,增加
- router
- index.js // 路由,修改
- App.vue // 主组件,修改
- main.js // 入口文件,修改
##### Home.vue
这里定义页面的基本样式,以及获取数据的逻辑。
<template> <div id="todo-list-example" class="container"> <!-- 我是进度条,最上方的 --> <vue-progress-bar></vue-progress-bar> <div class="row"> <div class="col-md-6 mx-auto"> <h1 class="text-center">Natural Language Processing (NLP)</h1> <form v-on:submit.prevent="addNewTask"> <label for="tasknameinput">Spam Classification</label> <input v-model="taskname" type="text" id="tasknameinput" class="form-control" placeholder="Enter Sentence"> <button type="submit" class="btn btn-success btn-block mt-3"> Submit </button> </form> <!-- 省略表格定义内容 --> <script> // 这里解决跨域请求问题,向后端发起请求 import axios from 'axios' export default { data () { return { textClassify: [], id: '', taskname: '', isEdit: false } }, mounted () { this.getTasks() }, // 省略进度条内容 // 请求任务相关操作 getTasks () { axios({ method: 'GET', url: '/api/tasks' }).then( result => { console.log(result.data) this.textClassify = result.data }, error => { console.error(error) } ) }, </script>
##### index.js
定义路由,设定访问路径,并将路径和组件关联
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] })
##### App.vue
主组件
<template> <div id="app"> <router-view/> <!-- 植入一波广告:微信搜索:谷粒先生,关注我的公众号 --> <img src="./assets/wechat.jpg"> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
##### main.js
初始化实例并加载必要插件
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import VueProgressBar from 'vue-progressbar' require('../node_modules/bootstrap/dist/css/bootstrap.css') Vue.config.productionTip = false // 这是进度条 Vue.use(VueProgressBar, { color: 'rgb(143, 255, 199)', failedColor: 'red', height: '10px' }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
### 启动服务
npm run dev
## 模型 flair
模型这里采用 fair 框架,该框架在 2018 年底发布,易用性和效果都较前方案有了较大提升。这里直接采用官方样例训练好的垃圾邮件分类模型的权重,也就是在上文后端所读取的文件。关注我的公众号:谷粒先生,回复**权重**,即可获得权重文件链接。
### 模型调用
from flair.models import TextClassifier # 模型导入,采用前不久开源的 flair 做文本分类 from flair.data import Sentence classifier = TextClassifier.load_from_file('models/best-model.pt') # 模型加载 sentence = Sentence(title) # 对请求做数据预处理 classifier.predict(sentence) # 调用模型,做预测,返回带标签的数据
## 效果展示
本教程针对文本分类这个场景,构建了一套前后端分离的“完整”框架,能够给到一个最直观的感受。当然,这里还有很多优化空间,还有后续部署等事宜没有详细展开,有心的同学可以自行检索学习。通过这套流程,可以在测试服搭建一套实用主义哲学的算法模型。给到领导做展示或是公司内部使用,已经足够。项目地址 [kuhung/flask_vue_ML](https://github.com/kuhung/flask_vue_ML)
### 终端端网站访问
关注微信公众号:谷粒先生,下载权重文件并第一时间获取更新。
喜欢我的朋友,别忘了点赞 、喜欢 ? +关注 哦,你的鼓励是对我最大的支持~
相关推荐
- 5分钟调色大片的方法(5分钟调色大片的方法有哪些)
-
哈喽大家好。在大家印象中一定觉得ps非常难学非常难。大家不要着急,小编的教学都是针对ps零基础的同学的,而且非常实用哦。只要大家跟着图文练习一两遍,保证大家立马学会~!好了,废话少说,下面开始我们今天...
- 闪白特效原来是这么用的(闪白特效怎么使用)
-
作者|高艳侠订阅|010-86092062闪白特效是影视作品中应用比较多的效果之一,那么具体该在哪些场景使用闪白特效?具体该如何操作?下面就以AdobePremiere(以下简称PR)为例,...
- ppt常用小图标去哪里找?3个矢量素材网站推荐!
-
ppt是一个注重可视化表达的演示载体,除了高清图片,ppt中另一类常用的素材是各种小图标,也叫矢量图标,巧妙运用小图标能提升整体美观度和表现力,那么ppt常用小图标去哪里找呢?为方便各位快速找到合适的...
- 有什么好用的截图录屏工具?试试这9款
-
经常有朋友反馈苦于缺乏截屏和录屏的趁手工具,本期我们分享几个相当好用的截屏和录屏工具,希望能帮到大家。ScreenToGifScreenToGif是一款免费且开源的录屏工具。此款工具最大的特点是可以...
- 配色苦手福音!专业快速色环配色PS插件
-
今天橘子老师给的大家介绍的是一款快速配色的插件,非常强大配色苦手福音来啦!(获取方式见文末)【插件介绍】配色在后期设计中占有主导地位,好的配色能让作品更加抢眼Coolorus这款专业的配色插件,能够...
- 如何用PS抠主体?(ps怎么抠主体)
-
1.主体法抠图-抠花苞和花梗导入一张荷花苞的照片,点击上图中顶部“选择”菜单栏,下拉单击“主体”。可以看到,只有花苞被选中,但是花梗并没有被选中。接下来单击上图中左侧工具栏的“快速选择工具”,上图中顶...
- 2799元的4K电视,有保障吗?(买4k电视机哪个品牌好)
-
在上一期《电脑报》的3·15专题报道中,我们揭露了一款不靠谱的42英寸4K智能电视——TCLD42A561U。这款售价2699元的4K智能电视不仅4K画质方面存在严重问题,而且各种功能和应用体验也不理...
- 苹果电脑的Touch Bar推出一段时间了 这款工具可以帮你开发适用于它的APP
-
距离苹果推出带有TouchBar的MacBookPro已经有一段时间了,除了那些像Adobe、Google和Microsoft大公司在开发适用于TouchBar的应用之外,其实还有很多独立的开...
- 如魔法般吸取颜色的桌灯(如魔法般吸取颜色的桌灯叫什么)
-
色彩为生活带来的感官刺激,逐渐被视为理所当然。一盏桌灯运用它的神奇力量,将隐藏于物件中的颜色逐一释放,成为装点环境的空间魔法师。ColorUp是一款可以改变颜色的吸色台灯,沿用传统灯泡的造型,融入了拾...
- 一篇文章带你用jquery mobile设计颜色拾取器
-
【一、项目背景】现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...
- ps拾色器快捷键是什么?(ps2019拾色器快捷键)
-
ps拾色器快捷键是什么?文章末尾有获取方式,按照以下步骤就能自动获得!学会制作PS特效需要一定程度的耐心和毅力。初学者可以从基本的工具和技术开始学习,逐渐提高他们的技能水平。同时,观看更多优秀的特效作...
- 免费开源的 Windows 截图录屏工具,支持 OCR 识别和滚动截图等
-
功能很强大、安装很小巧的免费截图、录屏工具,提供很多使用的工具来帮我么能解决问题,推荐给大家。关于ShareXShareX是一款免费的windows工具,起初是一个小巧的截图工具,经过多年的迭...
- 入门到精通系列PS教程:第13篇 · 拾色器、颜色问题说明及补充
-
入门到精通系列PS教程:第13篇·拾色器、颜色问题说明及补充作者|侯潇问题说明我的第12篇教程里,有个小问题没有说清楚。要说是错误,又不算是错误,只是没有说准确。写完那篇教程后,因为已经到了深...
- PS冷知识:用吸管工具吸取屏幕上的任意颜色
-
今天,我们给大家介绍PS中的一个冷知识:用吸管工具可以吸取屏幕上的任意颜色。其实,操作起来是非常简单的。大多数情况下,我们认为,PS的吸管工具只能吸取PS软件作图区域范围内的颜色,最多加上画布四周的...
- Windows 11 将提供内置颜色选择器工具
-
Windows11内置了颜色选择器,可以扫描并识别屏幕上的颜色并生成颜色代码。此外,微软还利用人工智能技术,让屏幕上的文本扫描和选择变得更加便捷。这两项功能均已在SnippingToolv1...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)