深度學習技術應用課件：運用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：全稱為超文本標記語言，是一種用于創建網頁的標記語言?？梢允褂肏TML來建立自己的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屬性等?？梢詫㈩愋瓦x擇器、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

提交評論