《深度學習技術應用》課件 項目四 基于Flask的模型應用與部署-貓狗識別

項目四基于Flask的模型應用與部署-貓狗識別深度學習應用技術項目引導案例

深度學習正迅速成為人工智能應用的關鍵工具。深度學習中最突出的問題之一是圖像分類,圖像分類就是根據(jù)各自在圖像信息中所反映的不同特征，把不同類別的目標區(qū)分開來的圖像處理方法。

要說到深度學習圖像分類的經(jīng)典案例之一，那就是貓狗大戰(zhàn)了。貓和狗在外觀上的差別還是挺明顯的，無論是體型、四肢、臉龐和毛發(fā)等等，都是能通過肉眼很容易區(qū)分的。項目引導案例模型訓練與評估01運用Flask將模型部署成網(wǎng)頁端應用02思考一下

如何讓機器來識別貓和狗呢？項目引導案例模型訓練與評估任務一職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估了解圖像分類的基本過程和特征處理了解ResNet殘差網(wǎng)絡產(chǎn)生的背景、結(jié)構(gòu)及網(wǎng)絡了解常用的模型訓練評估指標能夠搭建Tensorflow模型訓練環(huán)境能夠正確劃分訓練集與測試集能夠使用基于Tensorflow的Keras框架進行模型訓練能夠使用可視化工具對模型進行評估職業(yè)能力目標01知識目標技能目標職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估

首先進行環(huán)境、數(shù)據(jù)的準備，貓狗訓練集數(shù)據(jù)和驗證集數(shù)據(jù)的劃分，再搭建ResNet模型、模型編譯、之后進行模型訓練，最后對模型進行評估，展示可視化訓練結(jié)果。任務描述任務要求模型所需的環(huán)境、數(shù)據(jù)準備；數(shù)據(jù)集的劃分；模型編譯、訓練；模型評估，展示可視化結(jié)果。任務描述與要求02職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估任務分析圖像分類中提取的特征有哪些方法？如何查看模型的準確率？任務分析與計劃03任務計劃表通過上面的思考，你是否對本任務要完成的工作有所了解？讓我們一起來制訂完成本次任務的實施計劃吧！任務分析與計劃03項目名稱基于Flask的模型應用與部署-貓狗識別任務名稱模型訓練與評估計劃方式自主設計計劃要求請用8個計劃步驟來完整描述出如何完成本次任務序號任務計劃1

2

3

4

5

6

7

8職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估ResNet殘差網(wǎng)絡204知識儲備圖像分類1模型評估3圖像分類04

圖像分類，核心是從給定的分類集合中給圖像分配一個標簽的任務。實際上，這意味著我們的任務是分析一個輸入圖像并返回一個將圖像分類的標簽，標簽總是來自預定義的可能類別集。圖像分類的基本過程04

圖像分類的基本操作是建立圖像內(nèi)容的描述，然后利用機器學習方法學習圖像類別，最后利用學習得到的模型對未知圖像進行分類。一般來說，圖像分類性能主要與圖像特征提取和分類方法密切相關。04圖像特征處理

從圖像中提取有用的數(shù)據(jù)或信息，得到圖像的“非圖像”的表示或描述，如數(shù)值、向量和符號等。這一過程就是特征提取，而提取出來的這些“非圖像”的表示或描述就是特征。圖像分類中提取的特征主要有兩類：

底層視覺特征局部不變特征04顏色：常用的顏色空間包括：RGB、HSV空間、反顏色空間等。圖像特征處理形狀：描述形狀的方法通常分為基于區(qū)域的形狀描述方法和基于輪廓的形狀描述方法兩種。紋理：紋理特征是不依賴于顏色和亮度的反映圖像中同質(zhì)現(xiàn)象的視覺特征，其本質(zhì)是刻畫像素的鄰域灰度空間分布規(guī)律?；趨^(qū)域的形狀描述方法：注重集合形狀的全局特征，描述形狀局部特征的能力有限。基于輪廓的形狀描述方法又可以分為基于空間域的方法和基于變換域的方法：

基于空間域：即集合特征描述方法。

基于變換域：主要將目標輪廓的邊緣點數(shù)據(jù)變換到頻率域中。

局部不變特征也稱為局部特征，首要任務是要提取出更加穩(wěn)定的圖像特征來描述圖像。提取分為兩個部分：特征點（或區(qū)域）探測和特征描述。

特征點探測：采用一定的規(guī)則或者策略從圖像中選取一些有代表性的特征點或特征區(qū)域；

特征描述：根據(jù)特征點探測所得特征點或特征區(qū)域，提取出滿足一定不變性要求的特征向量。04圖像特征處理穩(wěn)定：希望該特征能對旋轉(zhuǎn)、尺度縮放、仿射變換、視角變化、光照變化等圖像變化因素保持一定的不變形，對運動、遮擋、噪聲等因素也保持較好的可匹配性。ResNet殘差網(wǎng)絡204知識儲備圖像分類1模型評估3204殘差網(wǎng)絡背景321計算資源的消耗模型容易過擬合梯度消失/梯度爆炸在深度學習中，網(wǎng)絡層數(shù)增多一般會伴著下面幾個問題：04殘差網(wǎng)絡背景

實驗中發(fā)現(xiàn)，隨著網(wǎng)絡層數(shù)的增加，網(wǎng)絡發(fā)生了退化的現(xiàn)象：隨著網(wǎng)絡層數(shù)的增多，訓練集loss逐漸下降，然后趨于飽和，當再增加網(wǎng)絡深度的話，訓練集loss反而會增大。

殘差網(wǎng)絡就應運而生，殘差網(wǎng)絡是由來自MicrosoftResearch的4位學者提出的卷積神經(jīng)網(wǎng)絡。特點：容易優(yōu)化，能通過增加相當?shù)纳疃葋硖岣邷蚀_率。其內(nèi)部的殘差塊使用了跳躍連接，緩解了在深度神經(jīng)網(wǎng)絡中增加深度帶來的梯度消失問題。04ResNet結(jié)構(gòu)

ResNet提出了兩種mapping：一種是identitymapping，左圖中“彎彎的曲線”，另一種residualmapping，指的就是除了“彎彎的曲線”的另外一部分，所以最后的輸出是y=F(x)+x。identitymapping指的恒等映射，也就是公式中的x，而residualmapping指的是“差”，也就是F(x)=y-x部分。04ResNet結(jié)構(gòu)

ResNet使用兩種殘差單元，如圖所示。左圖對應的是淺層網(wǎng)絡，而右圖對應的是深層網(wǎng)絡。一般稱整個結(jié)構(gòu)為一個”buildingblock“。使用殘差結(jié)構(gòu)的兩個好處：前向傳播時，淺層的特征可以在深層得到重用；反向傳播時，深層的梯度可以直接傳向淺層。ResNet50網(wǎng)絡04

ResNet網(wǎng)絡是參考了VGG19網(wǎng)絡，在其基礎上進行了修改，并通過短路機制加入了殘差單元，ResNet50首先對輸入做了卷積操作，之后包含4個殘差快（ResidualBlock),最后進行全連接操作以便于進行分類任務，網(wǎng)絡構(gòu)成示意圖,Resnet50則包含50個conv2d操作。ResNet殘差網(wǎng)絡204知識儲備圖像分類1模型評估32

模型的好壞是“相對”的，什么樣的模型好的，不僅取決于算法和數(shù)據(jù)，還決定于任務需求。因此，選取一個合理的模型評價指標是非常有必要的。

評估一般可以分為回歸、分類和聚類的評估。

常見的幾種評估模型的參數(shù)指標，如預測準確率（Accuracy）、精確率（Precision）、召回率（Recall）、F1值和ROC曲線模型常見評估指標04模型常見評估指標04真陽性（TP，TruePostive）：真實值是Positive，模型認為是Positive的數(shù)量；假陽性（FP，F(xiàn)alsePositive）：真實值是Negative，模型認為是Positive的數(shù)量。這就是統(tǒng)計學上的第二類錯誤（TypeIIError）。真陰性（TN，TrueNegative）：真實值是Negative，模型認為是Negative的數(shù)量；假陰性（FN，F(xiàn)alseNegative）：真實值是Positive，模型認為是Negative的數(shù)量。這就是統(tǒng)計學上的第一類錯誤（TypeIError）。模型常見評估指標04準確率（Accuracy）的定義是：對于給定的測試集，分類模型正確分類的樣本數(shù)與總樣本數(shù)之比，準確率的計算公式為：

Accuracy=(TP+TN)/(TP+TN+FP+FN)精確率（Precision）的定義是：分類模型預測的正樣本中有多少是真正的正樣本：

Precision=TP/(TP+FP)召回率（Recall）的定義是：對于給定測試集的某一個類別，樣本中的正類有多少被分類模型預測正確。Recall=TP/(TP+FN)模型常見評估指標04在現(xiàn)實情況下，精確率和召回率像是坐在蹺蹺板上一樣，往往出現(xiàn)一個值升高，另一個值降低，那么，需要一個指標來綜合考慮精確率和召回率，這個指標就是F值模型常見評估指標04

通過真正率和假正率來繪制ROC曲線來評估分類模型。ROC曲線橫縱坐標范圍在區(qū)間「0，1」之間，一般來說，ROC曲線與x軸形成的面積越大，模型的分類性能越好。IOU交并比04

對具體的某個物體來講，我們可以使用交并比，即模型所預測的檢測框和真實（GroundTruth）的檢測框的交集和并集之間的比例，來量化貼和程度。AP和mAP04常用的用于評價模型好壞的綜合指標：均值平均精度，即mAP(MeanAveragePrecision)。mAP用于反應模型在給定所有的類別上表現(xiàn)的好壞程度，其計算方法相對復雜?？梢院唵卫斫鉃橐韵鹿剑簃AP=所有類別的平均精度求和后除以所有類別，即數(shù)據(jù)集中所有類的平均精度的平均值。mAP總是在固定的數(shù)據(jù)集上計算，它不是量化模型輸出的絕對度量，但是是一個比較好的相對度量。職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估05任務實施訓練集、驗證集劃分21模型訓練3模型評估4訓練集、驗證集劃分環(huán)境、數(shù)據(jù)準備05數(shù)據(jù)集的文件名是以type.num.jpg這樣的方式命名的，比如cat.0.jpg。使用Keras的ImageDataGenerator要求將不同種類的圖片分在不同的文件夾中，整理后的數(shù)據(jù)集結(jié)構(gòu)如下所示。1、數(shù)據(jù)集介紹環(huán)境、數(shù)據(jù)準備05安裝模型所需要的依賴包，并加載導入。2、依賴包安裝及加載圖像數(shù)據(jù)處理053、路徑設置輸出項目所在的路徑：運用BASE_PATH的路徑，用于設置INPUT_DIR的值。圖像數(shù)據(jù)處理054、標簽設置與路徑添加本次任務要檢測類別只有貓與狗。要把所有的圖片的路徑放入paths列表中。訓練集和測試集劃分05任務實施訓練集、驗證集劃分2環(huán)境、數(shù)據(jù)準備1模型訓練3模型評估4051、數(shù)據(jù)集截取云平臺功能限制，為了減少訓練時間，只需要其中部分圖片用來訓練模型。本次訓練選取1000張圖像進行模型訓練。訓練集和測試集劃分052、數(shù)據(jù)集劃分讀取圖片數(shù)據(jù)生成數(shù)據(jù)集，X為訓練集，Y為標簽數(shù)組，貓的標簽設置為0，狗的標簽設置為1。訓練集和測試集劃分053、訓練集、驗證集劃分X為訓練集，Y為標簽數(shù)組，訓練集和驗證集的劃分比例為8:2。訓練集和測試集劃分sklearn.model_selection.train_test_split(*arrays,test_size,shuffle)arrays:數(shù)據(jù)集的數(shù)組test_size:0-1的浮點數(shù)，值為測試集的劃分比例shuffle：布爾值，是否在劃分前打亂數(shù)據(jù)集05任務實施訓練集、驗證集劃分2環(huán)境、數(shù)據(jù)準備1模型訓練3模型評估4051、基礎模型設置模型參數(shù)的介紹：模型訓練Flatten()展平層，將tensor展開，不做計算Dense()全連接層Dropout()丟棄法，用于防止過擬合052、延展模型為了使該模型更加契合我們的項目，需要在原有的基礎之上添加額外的層。模型訓練053、模型編譯tf.keras.Mpile(optimizer,loss,metrics)，參數(shù)介紹如下：

模型訓練參數(shù)介紹如下：optimizer:模型訓練使用的優(yōu)化器，可以從tf.keras.optimizers中選擇。loss:模型優(yōu)化時使用的損失值類型，可以從tf.keras.losses中選擇，此次訓練只有兩個類別需要判別，所以使用二元交叉熵。metrics：訓練過程中返回的矩陣評估指標，可以從tf.keras.metrics中選擇054、模型開始訓練tf.keras.Model.fit(x,y,batch_size,epochs,validation_data)模型訓練參數(shù)介紹如下：x:訓練集數(shù)組。y:訓練集標簽batch_size：批處理數(shù)量。epochs:迭代次數(shù)。validation_data：驗證集的圖片和標簽數(shù)組。055、載入模型進行訓練tf.keras.models.load_model(filepath,compile,options)模型訓練參數(shù)介紹如下：filepath:模型文件路徑。compile:布爾值，確認在加載之后是否編譯模型，非必填項options：可選擇tf.saved_model.LoadOptions里的特殊選項值,非必填項。05任務實施訓練集、驗證集劃分2環(huán)境、數(shù)據(jù)準備1模型訓練3模型評估4模型評估051、查看模型的準確率與損失值#查看模型準確率print(history.history['accuracy'])print(history.history['val_accuracy'])print(history2.history['accuracy'])print(history2.history['val_accuracy'])#查看模型損失值print(history.history['loss'])print(history.history['val_loss'])print(history2.history['loss'])print(history2.history['val_loss'])05使用history的參數(shù)。模型準確率是逐步上升的；2、準確率可視化模型評估05使用history2的參數(shù)。模型準確率是趨于飽和的。2、準確率可視化模型評估05使用history的參數(shù)，模型損失是逐步下降的3、損失可視化模型評估05使用history2的參數(shù)，模型損失沒有太多變化。3、損失可視化模型評估職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估任務檢查與評價061、請參照評價標準完成自評和對其他小組的互評。2、各組請代表分析本組任務實施經(jīng)驗。項目名稱基于Flask的模型應用與部署-貓狗識別任務名稱模型訓練與評估評價方式可采用自評、互評、老師評價等方式說明主要評價學生在項目學習過程中的操作技能、理論知識、學習態(tài)度、課堂表現(xiàn)、學習能力等

評價內(nèi)容與評價標準序號評價內(nèi)容評價標準分值得分1理論知識（20%）了解圖像分類的基本過程和特征處理、ResNet殘差網(wǎng)絡產(chǎn)生的背景、結(jié)構(gòu)及網(wǎng)絡、以及常用的模型訓練評估指標。（20分）20分

2專業(yè)技能（40%）環(huán)境、數(shù)據(jù)準備（5%）正確的安裝及加載依賴包（1分）5分

正確的路徑設置（2分）正確的設置標簽與添加路徑（2分）3訓練集、驗證集劃分（10%）正確的截取數(shù)據(jù)集（2分）10分

正確的劃分數(shù)據(jù)集（3分）正確的劃分訓練集、驗證集（5分）4模型訓練（15%）正確的設置基礎模型與延展模型（5分）15分

正確的編譯模型（5分）正確的訓練模型（5分）模型評估（10分）正確的查看模型的準確率與損失值（5分）10分正確的可視化準確率與損失（5分）5核心素養(yǎng)（20%）具有良好的自主學習能力、分析解決問題的能力、整個任務過程中有指導他人（20分）20分

具有較好的學習能力和分析解決問題的能力，任務過程中無指導他人（15分）能夠主動學習并收集信息，有請教他人進行解決問題的能力（10分）不主動學習（0分）6課堂紀律（20%）設備無損壞、設備擺放整齊、工位區(qū)域內(nèi)保持整潔、無干擾課堂秩序（20分）20分

設備無損壞、無干擾課堂秩序（15分）無干擾課堂秩序（10分）干擾課堂秩序（0分）總得分職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估任務小結(jié)07職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務一模型訓練與評估任務拓展08在模型訓練時，選擇不同的激活函數(shù)，再進行模型訓練，查看訓練結(jié)果及模型評估效果？激活函數(shù)有：Sigmoid函數(shù)、Tanh函數(shù)、Relu函數(shù)、ELU函數(shù)等，選擇不同激活函數(shù)進行模型訓練，并查看結(jié)果。解題

思路提示謝謝大家學習項目四基于Flask的模型應用與部署-貓狗識別深度學習應用技術運用Flask將模型部署成網(wǎng)頁端應用任務二職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務二運用Flask將模型部署成網(wǎng)頁端應用了解Flask框架概念和特點了解HTML的概念和特點了解CSS語音特點和應用能夠使用Flask框架將模型部署為網(wǎng)頁應用能夠掌握html標簽格式的使用能夠使用html修改、添加網(wǎng)頁端元素能夠使用在網(wǎng)頁應用上展示預測結(jié)果職業(yè)能力目標01知識目標技能目標職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務二運用Flask將模型部署成網(wǎng)頁端應用

首先進行環(huán)境依賴包安裝，網(wǎng)站初始代碼的解析，添加html文件標簽，再修改和添加網(wǎng)頁端元素，將任務一訓練好的模型部署到網(wǎng)頁端，編寫好預測函數(shù)，在網(wǎng)頁端展示預測結(jié)果。任務描述任務要求模型所需的依賴包安裝；初始代碼解析；修改、添加網(wǎng)頁端元素；網(wǎng)頁端部署模型，并展示預測結(jié)果。任務描述與要求02職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務二運用Flask將模型部署成網(wǎng)頁端應用任務分析如何構(gòu)建一個網(wǎng)頁并修改網(wǎng)頁板式？如何將模型部署至網(wǎng)頁端？任務分析與計劃03任務計劃表通過上面的思考，你是否對本任務要完成的工作有所了解？讓我們一起來制訂完成本次任務的實施計劃吧！任務分析與計劃03項目名稱基于Flask的模型應用與部署-貓狗識別任務名稱運用Flask將模型部署成網(wǎng)頁端應用計劃方式自主設計計劃要求請用8個計劃步驟來完整描述出如何完成本次任務序號任務計劃1

2

3

4

5

6

7

8職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務二運用Flask將模型部署成網(wǎng)頁端應用HTML介紹204知識儲備Flask框架1CSS簡述3Flask框架簡述04Flask框架，是用Python語言編寫輕量級的web開發(fā)框架。主要包括Werkzeug和Jinja2兩個核心函數(shù)庫，它們分別負責業(yè)務處理和安全方面的功能。支持URL路由請求集成，一次可以響應多個用戶的訪問請求；支持Cookie和會話管理，通過身份緩存數(shù)據(jù)建立長久連接關系，并提高用戶訪問速度；支持交互式Javascript調(diào)試，提高用戶體驗；可以處理HTTP基本事務，快速響應客戶端推送過來的訪問請求。Werkzeug庫支持自動HTML轉(zhuǎn)移功能，能夠很好控制外部黑客的腳本攻擊。系統(tǒng)運行速度快，頁面加載過程會將源碼進行編譯形成python字節(jié)碼，從而實現(xiàn)模板的高效運行；模板繼承機制可以對模板內(nèi)容進行修改和維護，為不同需求的用戶提供相應的模板。Jinja2庫選擇Flask框架的原因04便于學習掌握提高開發(fā)效率統(tǒng)一開發(fā)語言Flask中擁有靈活的Jinja2模板引擎，提高了前端代碼的復用率。在現(xiàn)有標準中，F(xiàn)lask算是微小型框架。開發(fā)者可以根據(jù)項目的需求進行相應的擴展，或者自行開發(fā)。后續(xù)的基于機器學習的車輛檢測與屬性識別算法研究，主要開發(fā)語言也是應用Python，整個系統(tǒng)統(tǒng)一開發(fā)語言，便于開發(fā)和后期維護。Flask擁有基于Werkzeug、Jinja2等一些開源庫，擁有內(nèi)置服務器和單元測試，適配RESTful，支持安全的cookies，而且官方文檔完整，便于學習掌握。ACB選擇Flask框架原因HTML介紹204知識儲備Flask框架1CSS簡述304HTML解釋

HTML：全稱為超文本標記語言，是一種用于創(chuàng)建網(wǎng)頁的標記語言。可以使用HTML來建立自己的WEB站點，HTML運行在瀏覽器上，由瀏覽器來解析。它包括一系列標簽，通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。

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

HTML標簽：HTML標簽是由尖括號包圍的關鍵詞，比如<html>，通常是成對出現(xiàn)的，比如<b>和</b>。04HTML特點可擴展性通用性簡易性HTML是網(wǎng)絡的通用語言，一種簡單、通用的全置標記語言。允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。超文本標記語言版本升級采用超集方式，從而更加靈活方便。超文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超文本標記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。ACBHTML特點04HTML頁面<!DOCTYPEhtml>聲明為HTML5文檔<html>元素是HTML頁面的根元素<head>元素包含了文檔的元（meta）數(shù)據(jù)，如<metacharset="utf-8">定義網(wǎng)頁編碼格式為utf-8。<title>元素描述了文檔的標題<body>元素包含了可見的頁面內(nèi)容<h1>元素定義一個大標題<p>元素定義一個段落04HTML網(wǎng)頁結(jié)構(gòu)只有<body>區(qū)域(白色部分)才會在瀏覽器中顯示。HTML介紹204知識儲備Flask框架1CSS簡述304CSS與HTML就像建造房子,如果把HTML比喻為骨架,那么CSS就是油漆和裝飾。HTMLCSS04什么是CSSCSS層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。04CSS實例無樣式樣式一一個HTML文檔可以顯示不同的樣式04CSS實例樣式二樣式二CSS文檔HTML標簽原本被設計為用于定義文檔內(nèi)容，樣式表定義如何顯示HTML元素，就像HTML中的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的.css文件中。我們只需要編輯一個簡單的CSS文檔就可以改變所有頁面的布局和外觀。04CSS語言特點頁面壓縮層疊豐富的樣式定義易于使用和修改多頁面應用提供了豐富的文檔樣式外觀，設置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與元素內(nèi)容間、其他元素間的距離；允許改變大小寫方式、修飾方式以及其他頁面效果?？蓪邮蕉x在HTML元素的style屬性中，也可將其定義在HTML的header，還可將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。CSS樣式表可以單獨存放在一個CSS文件中，這樣就可以在多個頁面中使用同一個CSS樣式表。簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程度的縮減了頁面的體積，減少下載的時間。04CSS語言基礎屬性值選擇器屬性CSS的選擇器有類型選擇器和簡單屬性選擇器，比如CLASS屬性、ID屬性、STYLE屬性等。可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構(gòu)成更復雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。屬性的名字是一個合法的標識符，它們是CSS語法中的關鍵字。一種屬性規(guī)定了格式修飾的一個方面。要掌握一個屬性的用法，需要了解該屬性的合法屬性值、默認值、所適用的元素、該屬性值是否被下一級繼承、屬性性能百分值及所屬媒介類型組等。屬性值包括整數(shù)和實數(shù)、長度量、百分數(shù)量等。ACBCSS語言基礎職業(yè)能力目標01任務描述與要求02任務分析與計劃03知識儲備04任務實施05任務檢查與評價06任務小結(jié)07任務拓展08任務二運用Flask將模型部署成網(wǎng)頁端應用添加html文件標簽205初始代碼解析1網(wǎng)頁端元素修改、添加3網(wǎng)頁端部署5任務實施判斷語句和額外界面405安裝模型所需要的依賴包，并加載導入。1、依賴包安裝及加載初始代碼解析flask-ngrok包用于云平臺的內(nèi)網(wǎng)穿透，本地部署時候可以直接使用flask部署05使用終端命令進入對應的文件夾。2、主體代碼解析初始代碼解析05將代碼完整復制到文件夾下的app.py文件當中。3、新建終端初始代碼解析05運行app.py文件，并等待頁面跳轉(zhuǎn)。4、運行app.py初始代碼解析如果出現(xiàn)端口被占用錯誤，可以用ps查看進程，并用kill關掉多余的sudopythonapp.py進程。#查看進程，并殺死ps-efsudokill-9{PID}05在瀏覽器中查看效果。5、網(wǎng)頁運行初始代碼解析若瀏覽器中輸出“HelloWorld”，標志運行正確。添加html文件標簽205

初始代碼解析1網(wǎng)頁端元素修改、添加3網(wǎng)頁端部署5任務實施判斷語句和額外界面405以editor模式打開index.html，將代碼復制到index.html文件當中，并修改對應代碼。1、編輯index.html文件添加html文件標簽05校驗html內(nèi)容后重新使用終端指令運行app。2、運行app.py添加html文件標簽若網(wǎng)站的內(nèi)容根據(jù)index.html改變，則標志操作正確。添加html文件標簽205

初始代碼解析1網(wǎng)頁端元素修改、添加3網(wǎng)頁端部署5任務實施判斷語句和額外界面405在index.html文件中，導入css格式文件并添加標題。1、添加css樣式文件地址、標題網(wǎng)頁端元素修改、添加在<head><head/>標簽中添加css文件地址。使用<h1></h1>標簽和css資源當中的jumbotron來創(chuàng)建標題。校驗html內(nèi)容后重新使用終端指令運行app。05在以上修改的index.html文件內(nèi)，繼續(xù)添加上傳指示和按鈕。2、添加上傳指示和按鈕網(wǎng)頁端元素修改、添加使用<label><label/>標簽,添加上傳指示。使用<button></button>標簽,添加上傳按鈕。校驗html內(nèi)容后重新使用終端指令運行app。05在以上修改的index.html文件內(nèi)，繼續(xù)添加圖片和換行指令。3、添加圖片和換行命令網(wǎng)頁端元素修改、添加使用<img>標簽,添加圖片使用<br>標簽,添加換行指示，來修改格式校驗html內(nèi)容后重新使用終端指令運行app。添加html文件標簽205

初始代碼解析1網(wǎng)頁端元素修改、添加3網(wǎng)頁端部署5任務實施判斷語句和額外界面405添加主頁面、次頁面，并使用判斷語句，從my_image中獲取文件，將傳輸文件儲存在本地路徑，并返回圖片路徑，用于網(wǎng)頁展示圖片。1、在app.py中添加額外代碼添加判斷語句和額外界面05在該文件中，使用容器組合元素、可轉(zhuǎn)入submit、可使用方法post等。如果執(zhí)行了函數(shù)后傳入img_path,就會展示圖片。2、在app.py中添加額外代碼添加判斷語句和額外界面添加html文件標簽205

初始代碼解析1網(wǎng)頁端元素修改、添加3網(wǎng)頁端部署5任務實施判斷語句和額外界面405添加預測指示和預測結(jié)果，如果有返回預測值，就展示圖片和預測結(jié)果。1、修改index.html文件網(wǎng)頁端部署模型05添加額外的依賴包，載入訓練好的模型，創(chuàng)建字典，并返回元素。2、app.py中添加額外代碼網(wǎng)頁端部署模型05輸入項目中h5模型的圖片單個大小為(224,244)。變量dic的類型為字典，可以使用鍵來提取里面的信