基于AI分词模型,构建一个简陋的Web应用

news2025/1/22 22:02:11

文章目录

  • 前言
  • 1. 效果展示
  • 2. 应用设计
  • 3. 实现
    • 3.1. lac分词模型的服务化部署
    • 3.2 使用Flask构建app
  • 4. 小结


前言

内容纯属个人经验,若有不当或错误之处,还请见谅,欢迎指出

文中大致介绍了,如何快捷地使用PaddleHub服务化部署一个简单的AI模型,并简单包装成一个Web应用的过程。

主要工具

  • Flask(python的Web框架)
  • PaddleHub(飞桨的预训练模型库)

1. 效果展示

在这里插入图片描述

2. 应用设计

总体思路如下:

  • 使用PaddleHub部署对分词模型lac进行服务化部署
  • 用Flask框架构建app
    • app从前端获取请求,将请求转发给lac服务,将得到的响应再显示到前端
    • 使用了jinja2模板引擎(没有做前后端全分离,一是简陋的应用没必要,二是我还不会,哈哈)

3. 实现

3.1. lac分词模型的服务化部署

1、什么是服务化部署?

“部署”这个词我见到过很多次了,但总对它的意思有些模糊。有时,将一个AI模型训练好后,保存为本地文件,然后我们就可以在python脚本中加载模型以及使用模型进行预测,这样的过程也称为“部署”。

服务化部署,就是将模型部署为一个“Web服务”。这样部署的效果就是,你只需要对相应的端口发送合适的请求,就可以得到模型的预测结果,即响应。而使用该模型不再需要各种各样的环境依赖(部署的模型本身仍然是运行在其依赖的环境中的)。

感觉说得还是有点迷糊,先就这样叭。

2、lac分词模型的部署方法

lac是PaddleHub模型仓库中的一个“预训练模型”,即已经训练好的模型,部署非常简单(在此之前你需要在python环境中安装好PaddleHub的库,具体安装方法不再赘述,可自行去github上查看相应的文档:PaddleHub),只需要两步:

  • 下载lac模型
  • 一行命令部署

运行下面两行代码时,就会自动下载lac模型(通常会下载到C盘用户目录的.paddlehub文件夹中,通常还有一个README.md文件,里面是模型的介绍以及使用教程)

import paddlehub as hub
lac = hub.Module(name="lac")

用下面的代码对模型进行测试:

import paddlehub as hub
lac = hub.Module(name="lac")

test_text = ["今天是个好天气。"]
results = lac.cut(text=test_text, use_gpu=False, batch_size=1, return_tag=True)
print(results)
#{'word': ['今天', '是', '个', '好天气', '。'], 'tag': ['TIME', 'v', 'q', 'n', 'w']}

然后命令行启动服务完成部署(不执行上面的代码,直接运行命令,也可以自动下载模型),

hub serving start -m lac

启动成功时的终端输出:

 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8866
 * Running on http://192.168.43.166:8866
INFO 2023-03-17 00:12:29,487 _internal.py:224] Press CTRL+C to quit

3.2 使用Flask构建app

1、目录结构

- templates
	- index.html
- app.py
- forms.py

:templates这个文件夹是固定的,与flask框架的render_template搭配使用,html文件都放里面,不然找不到。

2、forms.py

定义了一个表单类TextForm,之后就从网页的表单中输入待分析的文本,将数据传到后端。

from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

class TextForm(FlaskForm):
    text = StringField('待分析的文本', validators=[DataRequired(message="不能为空")])

3、app.py

该脚本也会启动一个Web服务,直接在浏览器输入链接http://127.0.0.1:5000即可访问,其中5000app.run()中的port参数指定。

from flask import Flask, jsonify, render_template, request
import requests
from forms import TextForm


app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key_here'

@app.route('/', methods=['GET', 'POST'])
def predict():
	# 实例化一个表单对象
    form = TextForm()

    if form.validate_on_submit():
        # 1. 将表单的文本数据转换为字典 --> lac服务的输入要求是字典
        data = {"text": form.text.data}
        
        # 2. 向paddlehub的lac服务发送请求 --> 链接是使用paddlehub部署时内部默认指定的
        response = requests.post("http://127.0.0.1:8866/predict/lac", json=data)
        result = response.json()
        results = result['results']

        return render_template('index.html', form=form, results=results)

    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run(debug=True, port=5000)  # port指定运行的端口

3、index.html

主页内容。

html文件中,使用了一些属于flask的jinja2(模板引擎,渲染html文件)的语法,即带{% %}{{ }}的内容。其中{% %}实现控制结构,{{ }}引用从render_template传过来的参数。
由于我前端了解较少,下面的页面显示起来是比较简陋的,但核心功能已经完成(能run就行)。

<h1>体验分词功能</h1>

<form action="" method="post" class="mt-4">
    <!-- csrf这一句好像可以删掉 -->
    {{ form.csrf_token }}
    {{ form.text(class='input', style='width:500px', placeholder='请输入待分析的文本') }}
    <input type="submit" value="Submit">
</form>

{% if results %}
    <p>分词结果如下:</p>
{% endif %}

<p>
{% for word in results %}
    {{ word }} 
{% endfor %}
</p>

4. 小结

  • 本次实现了一个简陋的网页应用,应用的核心功能——分词,是由另一个独立运行的服务lac提供的。将AI模型独立部署有一个好处,即它可以同时为多个网页应用提供服务。
  • 也是我自己是对之前学习的Flask知识的一次小的实践尝试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408341.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue 时间格式总结及转换

vue框架中我们常常用el-date-picker标签来显示和选择时间&#xff0c;那么&#xff0c;常见的时间的格式包含年-月-日&#xff08;yyyy-MM-dd&#xff09;、年-月-日 时-分-秒&#xff08;yyyy-MM-dd HH-mm-ss&#xff09;、标准时间格式以及时间戳。那么今天我们就来总结一下常…

Vue的开发常用的工具有哪些?

相比其他大型框架&#xff0c;Vue更加灵活&#xff0c;开发者既可以选择使用Vue来开发一个全新项目&#xff0c;也可以将Vue引入到一个现有的项目中。代码简洁、上手容易&#xff0c;深受开发者青睐。本节我们将对Vue的开发环境以及常用工具的使用进行讲解。 1.Visual Studio …

web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)

系列文章目录 内容参考链接JavaScript 面试高频考点HTML、CSS、JavaScript、ES6、AJAX、HTTP 面试考点 Vue2.x 面试高频考点Vue2.x 面试高频考点Vue3.x新增API生命周期&#xff0c;ref、toRef 和 toRefs 的理解和最佳使用方式Vue3.x升级的重要功能emits属性、生命周期、多事件…

React初体验-Hello React的组件化方式-React入门小案例

文章目录React初体验Hello React案例演练Hello React案例升级Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例React初体验 接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引…

〖大前端 - 基础入门三大核心之CSS篇⑲〗- CSS精灵的使用 与 background综合属性

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…

vue pc项目 router.js 配置详解 ,vue项目中路由懒加载的正确使用,vue实现动态路由一步到位

这个是我之前一个项目的router.js 文件 xmjd import Vue from vue import http from ./plugins/axios import Router from vue-router import { getChnPinyin } from "/utils/chnpinyin"; import { clearLoginInfo, handlerMenu } from /utilsVue.use(Router) // 解…

css清除浮动的四种方法(详细)

浮动带来的影响 清除浮动主要是为了解决&#xff0c;父元素因为子级元素浮动引起的内部高度为0的问题 看下面一段代码 <div class"fater"><div class"box1">one</div><div class"box2">two</div></div> …

VUE中调用高德地图获取当前位置(VUE2.0和3.0通用)

标签&#xff1a; Vue vue 定位 js javascript1、去高德开放平台获取高德地图KEY地址&#xff1a;https://lbs.amap.com/注意&#xff1a;这里一定要选择WEB端的KEY&#xff0c;不要选择WEB服务的KEY&#xff0c;否则拿不到数据2、去项目中引入KEY&#xff0c;也就是CDN&#x…

基于RuoYi框架自动生成后端代码及前端界面

&#x1f3c0;&#xff08;1&#xff09;序言 &#x1f438;近来工作临近项目周期尾声&#xff0c;基本都是每天加班到晚上8到9点的节奏&#xff0c;似乎每年到10月份之际都是一个忙碌月&#xff0c;不知道这是一个&#x1f436;行业规律&#x1f436;还是仅仅对我而言的一个&a…

在vue中使用FullCanlendar实现日历预约会议室功能

最近接到任务,让实现一个预约功能,让我找找插件,需求是这个样子滴 明白任务以后,那咱就开抄呗~(bushi 开找 经过一番寻找,最后我决定使用FullCalendar,为啥用这个呢,你看它样子长的像不像我的需求,虽然说不上是有一些像吧,但简直就是一模一样. 更关键的是这玩意有很全的文档(但…

H5移动端适配方案rem/vw

前言 在讲解适配方案之前&#xff0c;我们聊聊为什么要做适配&#xff1f; 因为视口、逻辑像素、分辨率这些变量的不同&#xff0c;在每个设备展示都不一样&#xff0c;需要一种方案来统一。 物理像素&#xff1a;也就是分辨率&#xff0c;一个物理像素是显示器上的最小的物…

项目无法识别 ?. 语法,导致报错Module parse failed: Unexpected token

一、第一种情况是如果你需要引入的组件库源码的过程中&#xff0c;比如你要import一个封装好的组件这种场景&#xff1a; 首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包&#xff0c;然后在导入的时候报这个语法错&#xff0c;那你可以接着往下…

【前端趋势】Vue、Vite作者尤雨溪前端趋势2022主题演讲

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f308;博客主页&#x1f449;codeMak1r.的博客 最新专栏【React–从基础到实战】…

Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项

问题重现 最近在做项目时&#xff0c;有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态&#xff1b;我使用到了 Vant UI 组件&#xff0c;首先按照官网文档的写法直接引入&#xff1a; <!--下拉折叠面板--><van-collapse class"collapse" …

vue路由的安装和使用

TOCVue 路由 vue-router 1 安装vue-router npm i vue-router -s 2 创建路由模块 // src/router/index.js就是当前项目的路由模块 // 1 导入Vue 和VueRouter的包 import Vue from vue import VueRouter from vue-router // 导入路由要用到的组件 import Home from ../component…

【TypeScript介绍】一文带你初步了解TypeScript

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 今天开始学习学习TypeScript这门语言&#xff01; 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录TypeScript介绍1. TypeScript是什么2. TypeScript为什么要…

大文件上传

大文件上传原理 当我们在做文件上传的功能时&#xff0c;如果上传的文件过大&#xff0c;可能会导致长传时间特别长&#xff0c;且上传失败后需要整个文件全部重新上传。因此&#xff0c;我们需要前后端配合来解决这个问题。 最常用的解决方案就是 —— 切片上传。 这次我们…

图文详解uni-app PC端宽屏适配方案

图文详解uni-app PC端宽屏适配方案 随着互联网的发展&#xff0c;iOS、Android、H5以及各种小程序快应用层出不穷&#xff0c;随之而来的问题就是如何用一套代码&#xff0c;适配多个平台&#xff0c;其中uni-app表现优异&#xff0c;已经实现了手机端全覆盖&#xff0c;支持i…

【JavaScript速成之路】JavaScript对象

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言1&#xff0c;初识对象1.1&#xff0c;对象概念1.2&#xff0c;对象创建1.2.…

手撕前端面试题【JavaScript】

前端的那些基本标签&#x1f353;&#x1f353; 浅拷贝&#x1f353;&#x1f353;简易深拷贝&#x1f353;&#x1f353;深拷贝&#x1f353;&#x1f353;什么是深拷贝&#xff0c;什么是浅拷贝&#xff0c;二者有什么区别&#xff0c;平时改怎么区分呢&#xff1f;&#x1f…