深度学习技术应用课件：运用Flask将模型部署成网页端应用_第1页
深度学习技术应用课件：运用Flask将模型部署成网页端应用_第2页
深度学习技术应用课件：运用Flask将模型部署成网页端应用_第3页
深度学习技术应用课件：运用Flask将模型部署成网页端应用_第4页
深度学习技术应用课件：运用Flask将模型部署成网页端应用_第5页
已阅读5页，还剩50页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

基于Flask的模型应用与部署-猫狗识别深度学习应用技术运用Flask将模型部署成网页端应用职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08

运用Flask将模型部署成网页端应用了解Flask框架概念和特点了解HTML的概念和特点了解CSS语音特点和应用能够使用Flask框架将模型部署为网页应用能够掌握html标签格式的使用能够使用html修改、添加网页端元素能够使用在网页应用上展示预测结果职业能力目标01知识目标技能目标职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08

运用Flask将模型部署成网页端应用

首先进行环境依赖包安装，网站初始代码的解析，添加html文件标签，再修改和添加网页端元素，将训练好的模型部署到网页端，编写好预测函数，在网页端展示预测结果。任务描述任务要求模型所需的依赖包安装；初始代码解析；修改、添加网页端元素；网页端部署模型，并展示预测结果。任务描述与要求02职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08

运用Flask将模型部署成网页端应用任务分析如何构建一个网页并修改网页板式？如何将模型部署至网页端？任务分析与计划03任务计划表通过上面的思考，你是否对本任务要完成的工作有所了解？让我们一起来制订完成本次任务的实施计划吧！任务分析与计划03项目名称基于Flask的模型应用与部署-猫狗识别任务名称运用Flask将模型部署成网页端应用计划方式自主设计计划要求请用8个计划步骤来完整描述出如何完成本次任务序号任务计划1

2

3

4

5

6

7

8职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08

运用Flask将模型部署成网页端应用HTML介绍204知识储备Flask框架1CSS简述3Flask框架简述04Flask框架，是用Python语言编写轻量级的web开发框架。主要包括Werkzeug和Jinja2两个核心函数库，它们分别负责业务处理和安全方面的功能。支持URL路由请求集成，一次可以响应多个用户的访问请求；支持Cookie和会话管理，通过身份缓存数据建立长久连接关系，并提高用户访问速度；支持交互式Javascript调试，提高用户体验；可以处理HTTP基本事务，快速响应客户端推送过来的访问请求。Werkzeug库支持自动HTML转移功能，能够很好控制外部黑客的脚本攻击。系统运行速度快，页面加载过程会将源码进行编译形成python字节码，从而实现模板的高效运行；模板继承机制可以对模板内容进行修改和维护，为不同需求的用户提供相应的模板。Jinja2库选择Flask框架的原因04便于学习掌握提高开发效率统一开发语言Flask中拥有灵活的Jinja2模板引擎，提高了前端代码的复用率。在现有标准中，Flask算是微小型框架。开发者可以根据项目的需求进行相应的扩展，或者自行开发。后续的基于机器学习的车辆检测与属性识别算法研究，主要开发语言也是应用Python，整个系统统一开发语言，便于开发和后期维护。Flask拥有基于Werkzeug、Jinja2等一些开源库，拥有内置服务器和单元测试，适配RESTful，支持安全的cookies，而且官方文档完整，便于学习掌握。ACB选择Flask框架原因HTML介绍204知识储备Flask框架1CSS简述304HTML解释

HTML：全称为超文本标记语言，是一种用于创建网页的标记语言。可以使用HTML来建立自己的WEB站点，HTML运行在浏览器上，由浏览器来解析。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML文本：由HTML命令组成的描述性文本。

HTML标签：HTML标签是由尖括号包围的关键词，比如<html>，通常是成对出现的，比如<b>和</b>。04HTML特点可扩展性通用性简易性HTML是网络的通用语言，一种简单、通用的全置标记语言。允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。超文本标记语言版本升级采用超集方式，从而更加灵活方便。超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。ACBHTML特点04HTML页面<!DOCTYPEhtml>声明为HTML5文档<html>元素是HTML页面的根元素<head>元素包含了文档的元（meta）数据，如<metacharset="utf-8">定义网页编码格式为utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落04HTML网页结构只有<body>区域(白色部分)才会在浏览器中显示。HTML介绍204知识储备Flask框架1CSS简述304CSS与HTML就像建造房子,如果把HTML比喻为骨架,那么CSS就是油漆和装饰。HTMLCSS04什么是CSSCSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。04CSS实例无样式样式一一个HTML文档可以显示不同的样式04CSS实例样式二样式二CSS文档HTML标签原本被设计为用于定义文档内容，样式表定义如何显示HTML元素，就像HTML中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css文件中。我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。04CSS语言特点页面压缩层叠丰富的样式定义易于使用和修改多页面应用提供了丰富的文档样式外观，设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与元素内容间、其他元素间的距离；允许改变大小写方式、修饰方式以及其他页面效果。可将样式定义在HTML元素的style属性中，也可将其定义在HTML的header，还可将样式声明在一个专门的CSS文件中，以供HTML页面引用。CSS样式表可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表。简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。04CSS语言基础属性值选择器属性CSS的选择器有类型选择器和简单属性选择器，比如CLASS属性、ID属性、STYLE属性等。可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。属性的名字是一个合法的标识符，它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。要掌握一个属性的用法，需要了解该属性的合法属性值、默认值、所适用的元素、该属性值是否被下一级继承、属性性能百分值及所属媒介类型组等。属性值包括整数和实数、长度量、百分数量等。ACBCSS语言基础职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08

运用Flask将模型部署成网页端应用添加html文件标签205初始代码解析1网页端元素修改、添加3网页端部署5任务实施判断语句和额外界面405安装模型所需要的依赖包，并加载导入。1、依赖包安装及加载初始代码解析flask-ngrok包用于云平台的内网穿透，本地部署时候可以直接使用flask部署05使用终端命令进入对应的文件夹。2、主体代码解析初始代码解析05将代码完整复制到文件夹下的app.py文件当中。3、新建终端初始代码解析05运行app.py文件，并等待页面跳转。4、运行app.py初始代码解析如果出现端口被占用错误，可以用ps查看进程，并用kill关掉多余的sudopythonapp.py进程。#查看进程，并杀死ps-efsudokill-9{PID}05在浏览器中查看效果。5、网页运行初始代码解析若浏览器中输出“HelloWorld”，标志运行正确。添加html文件标签205

初始代码解析1网页端元素修改、添加3网页端部署5任务实施判断语句和额外界面405以editor模式打开index.html，将代码复制到index.html文件当中，并修改对应代码。1、编辑index.html文件添加html文件标签05校验html内容后重新使用终端指令运行app。2、运行app.py添加html文件标签若网站的内容根据index.html改变，则标志操作正确。添加html文件标签205

初始代码解析1网页端元素修改、添加3网页端部署5任务实施判断语句和额外界面405在index.html文件中，导入css格式文件并添加标题。1、添加css样式文件地址、标题网页端元素修改、添加在<head><head/>标签中添加css文件地址。使用<h1></h1>标签和css资源当中的jumbotron来创建标题。校验html内容后重新使用终端指令运行app。05在以上修改的index.html文件内，继续添加上传指示和按钮。2、添加上传指示和按钮网页端元素修改、添加使用<label><label/>标签,添加上传指示。使用<button></button>标签,添加上传按钮。校验html内容后重新使用终端指令运行app。05在以上修改的index.html文件内，继续添加图片和换行指令。3、添加图片和换行命令网页端元素修改、添加使用<img>标签,添加图片使用<br>标签,添加换行指示，来修改格式校验html内容后重新使用终端指令运行app。添加html文件标签205

初始代码解析1网页端元素修改、添加3网页端部署5任务实施判断语句和额外界面405添加主页面、次页面，并使用判断语句，从my_image中获取文件，将传输文件储存在本地路径，并返回图片路径，用于网页展示图片。1、在app.py中添加额外代码添加判断语句和额外界面05在该文件中，使用容器组合元素、可转入submit、可使用方法post等。如果执行了函数后传入img_path,就会展示图片。2、在app.py中添加额外代码添加判断语句和额外界面添加html文件标签205

初始代码解析1网页端元素修改、添加3网页端部署5任务实施判断语句和额外界面405添加预测指示和预测结果，如果有返回预测值，就展示图片和预测结果。1、修改index.html文件网页端部署模型05添加额外的依赖包，载入训练好的模型，创建字典，并返回元素。2、app.py中添加额外代码网页端部署模型05输入项目中h5模型的图片单个大小为(224,244)。变量dic的类型为字典，可以使用键来提取里面的信息3、编写预测函数网页端部署模型05在app.py中添加predict_label()预测函数，添加展示图片代码。4、修改app.py文件网页端部署模型05校验html内容后重新使用终端指令运行app。5、运行app.py文件网页端部署模型职业能力目标01任务描述与要求02任务分析与计划03知识储备04任务实施05任务检查与评价06任务小结07任务拓展08

运用Flask将模型部署成网页端应用任务检查与评价061、请参照评价标准完成自评和对其他小组的互评。2、各组请代表分析本组任务实施经验。项目名称基于Flask的模型应用与部署-猫狗识别任务名称运用Flask将模型部署成网页端应用评价方式可采用自评、互评、老师评价等方式说明主要评价学生在项目学习过程中的操作技能、理论知识、学习态度、课堂表现、学习能力等

评价内容与评价标准序号评价内容评价标准分值得分1理论知识（20%）了解HTML和CSS的基本概念知识、在网页端的index.html和app.py的编辑和修改添加的方法，了解lask框架的运用、模型在网页端的部署。（20分）20分

2专业技能（40%）环境、数据准备（5分）正确的安装及加载依赖包（1分）5分

正确的解析主体代码（2分）正确的打开云桌面（2分）3编辑网页元素（25分）正确的调用html文件（2分）25分

正确的添加css样式文件（3分）正确的添加上传指示和按钮（5分）4正确的添加判断语句（5分）

正确的展示图片（5分）正

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论