8.1 人工智能概述

8.2 搭建“人工智能”開放平臺

8.2.1 人臉檢測后臺搭建

8.2.2 本地腳本測驗

8.2.3 前端說明頁面

8.3 在線人臉檢測

8.1 人工智能概述

人工智能出現至今已60余年，近幾年深度學習全面爆發推動其走向一個更為興盛的階段，尤其是2016年谷歌的AIphaGo橫掃棋壇，讓人工智能在普羅大眾中掀起一波關注熱潮，時至今日，人工智能依然是最熱門的研究領域之一，眾多巨頭企業、初創企業等紛紛入局人工智能領域，嘗試尋找全新突破口，而人工智能想要改變社會，不能僅停留于理論和概念層面，更重要的是要實作商業化、場景化落地，

目前，很多科技企業均提供基于AI的開放平臺，以Web的形式對外提供AI服務，例如人臉識別、OCR識別、語音識別等，以人臉檢測為例，用戶通過特定的api介面上傳需要檢測的照片，然后由Web服務器對照片進行人臉檢測，并將檢測結果回傳給用戶，實際的AI演算法往往需要復雜的配置、較高的服務器性能才能進行演算法推演，采用Web部署這種方式使得開發人員只需要配置和維護服務器環境即可，不需要再關注用戶PC的配置和性能，另外，AI演算法的更新也只需要在服務器上修改即可，使用Web架構適合生產環境下AI產品的快速部署和更新，

本節課程擬模仿上述流程，通過Django框架搭建一個人臉檢測Web平臺，以api介面形式提供對外服務，這里為了簡化演示效果，降低讀者的學習難度，只使用OpenCV提供的現成的人臉檢測演算法來進行檢測，實際情況下可以根據服務器的CPU或GPU性能，采用更高級的人臉檢測演算法來提高檢測精度，例如可以采用基于深度學習的人臉檢測演算法等，本節課程旨在為讀者提供一個結合人工智能的Web開發方向，有興趣轉向人工智能方向的讀者可以從本節內容出發，學習基本的AI演算法推理和部署技巧，而更復雜的人臉識別或者AI演算法研發則需要讀者參考其它人工智能書籍或論文，

8.2 搭建“人工智能”開放平臺

8.2.1 人臉檢測后臺搭建

本章采用OpenCV提供的人臉檢測演算法來搭建人臉檢測后臺，OpenCV是一個開放源代碼的計算機視覺應用庫，由英特爾企業下屬研發中心俄羅斯團隊發起該專案，開源免費，設計目標是實作實時高效的計算機視覺任務，是一個跨平臺的計算機視覺庫，從開發之日起就得到了迅猛發展，獲得了眾多企業和業界學者的鼎力支持與貢獻，因為是BSD開源，因此可以免費應用在科研和商業應用領域，OpenCV中多數模塊是基于C++實作，其中有少部分是基于C語言實作，演算法經過高度優化，實作效率高，非常適合生產環境使用，當前OpenCV提供的SDK已經支持C++、Java、Python等語言的應用開發，

首先，下載并安裝用于Python的OpenCV開發包：

pip install opencv_python

接下來開發后臺視圖處理函式，由于需要開發基于api的介面，因此大部分功能代碼都會在views.py檔案中撰寫，當后臺收到用戶的請求以后，由指定的視圖函式對用戶上傳的圖片進行讀取，然后呼叫OpenCV人臉檢測演算法進行檢測，最后將檢測結果以JSON字串形式回傳給用戶，

打開serviceApp應用下的views.py檔案，在頭部匯入一些Python庫：

import numpy as np        # 矩陣運算
import urllib              # url決議
import json                # json字串使用
import cv2                 # opencv包
import os                  # 執行作業系統命令
from django.views.decorators.csrf import csrf_exempt     # 跨站點驗證
from django.http import JsonResponse                     # json字串回應

為了能夠進行人臉檢測，需要使用特定的人臉檢測器，一般情況下需要運用機器學習演算法進行訓練得到，而本書使用的OpenCV庫自帶高效的人臉檢測器，無需再訓練直接拿來使用即可，在OpenCV的安裝目錄中找到haarcascade_frontalface_default.xml檔案（路徑：Python安裝目錄+\Lib\site-packages\cv2\data），該xml檔案本質上是一個組態檔，用于保存訓練好的人臉特征檢測器模型引數，使用時只需要匯入該檔案即可進行人臉檢測，為了方便專案使用，將該xml檔案放置在專案serviceApp應用目錄下，

繼續編輯views.py檔案，添加facedetect函式如下：

@csrf_exempt  # 用于規避跨站點請求攻擊
def facedetect(request):
    result = {}

    if request.method == "POST":  # 規定客戶端使用POST上傳圖片
        if request.FILES.get("image", None) is not None:  # 讀取影像
            img = read_image(stream=request.FILES["image"])
        else:
            result.update({
                "#faceNum": -1,
            })
            return JsonResponse(result)

        if img.shape[2] == 3:
            img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)  # 彩色影像轉灰度

        #進行人臉檢測
        values = face_detector.detectMultiScale(img,
                                                scaleFactor=1.1,
                                                minNeighbors=5,
                                                minSize=(30, 30),
                                                flags=cv2.CASCADE_SCALE_IMAGE)

        # 將檢測得到的人臉檢測關鍵點坐標封裝
        values = [(int(a), int(b), int(a + c), int(b + d))
                  for (a, b, c, d) in values]
        result.update({
            "#faceNum": len(values),
            "faces": values,
        })
    return JsonResponse(result)

人臉檢測組態檔匯入：首先在外部引入組態檔路徑，將路徑存入變數face_detector_path中；然后使用cv2.CascadeClassifier創建人臉檢測器face_detector，人臉檢測器的創建需要通過傳入人臉檢測組態檔face_detector_path來實作；
人臉檢測視圖處理函式：首先在函式前匯入@csrf_exempt裝飾器，否則無法使用該api介面，result變數用于存放最終的回傳結果，api介面規定客戶端必須采用POST方式進行資訊提交，視圖處理函式從請求request的FILES中獲取影像資料；
讀取影像方式：該開放平臺將影像封裝于request.FILES中，并且以鍵“image”來標示；然后采用自定義的read_image函式進行影像讀取，該函式的定義和詳細代碼將在后面給出；讀取的影像資料存放于臨時變數img中；
影像轉化：由于OpenCV在檢測人臉的程序中需要先將RGB彩色影像轉化為灰度影像，因此使用OpenCV提供的cv2.cvtColor函式實作影像轉化；
人臉檢測：使用人臉檢測器并呼叫對應的detectMultiScale方法對影像執行人臉檢測，檢測結果values存放每個檢測到的人臉框的坐標值；
JSON封裝和回傳：由于每個人臉檢測回傳的結果以左上角橫、縱坐標以及檢測框長、寬回傳，為了能夠方便后期繪圖，將檢測結果轉換為左上角和右下角坐標；最終的檢測結果封裝成JSON字串并使用JsonResponse函式回傳結果；

下面給出自定義的影像讀取函式read_image：

def read_image(stream=None):
    if stream is not None:
        data_temp = stream.read()
    img = np.asarray(bytearray(data_temp), dtype="uint8")
    img = cv2.imdecode(img, cv2.IMREAD_COLOR)
    return img

read_image函式用于實作基于資料流的影像讀取，默認上傳影像為彩色影像，以二進制方式進行讀取，然后通過cv2.imdecode函式解碼為OpenCV的影像資料，

至此已在后端完成人臉檢測視圖處理函式，為了能夠使用該處理函式執行人臉檢測，需要為該函式定義對應的映射路由，打開serviceApp應用下的urls.py檔案，在urlpatterns欄位中添加路由：

path('facedetect/', views.facedetect, name='facedetect'),  # 人臉檢測api

保存所有修改后運行專案，至此，人臉識別后臺服務已經成功開啟，下一小節將闡述如何從本地執行Python腳本來呼叫該api介面，

8.2.2 本地腳本測驗

本小節通過本地Python腳本呼叫，實作基于Web Api的人臉檢測功能，為了能夠在本地使用Python發送HTTP請求，需要下載requests庫并進行安裝：

pip install requests

這里為了專案集成方便將本地呼叫腳本放置在專案根目錄下的test檔案夾中，命名為faceDetectDemo.py，然后在檔案同目錄下放置一張測驗圖片face.jpg，用于進行人臉檢測，編輯faceDetectDemo.py檔案，添加代碼如下：

import cv2, requests
url = "http://localhost:8000/serviceApp/facedetect/" 

# 上傳影像并檢測
tracker = None
imgPath = "face.jpg"  #影像路徑
files = {
    "image": ("filename2", open(imgPath, "rb"), "image/jpeg"),
}

req = requests.post(url, data=tracker, files=files).json()
print("獲取資訊: {}".format(req))

# 將檢測結果框顯示在影像上
img = cv2.imread(imgPath)
for (w, x, y, z) in req["faces"]:
    cv2.rectangle(img, (w, x), (y, z), (0, 255, 0), 2)

cv2.imshow("face detection", img)
cv2.waitKey(0)

人臉檢測api介面：開發階段的后臺服務器開啟在http://localhost:8000,然后再根據url定義規則加上應用名serviceApp和對應的介面名facedetect即為最終的api介面；
發送資料：首先根據本地影像路徑使用open函式讀取圖片內容并封裝在files變數中，然后使用requests.post函式發送請求；回傳的請求資料轉化為JSON字串，通過print函式列印查看字串資訊；
結果顯示：為了顯式的查看人臉檢測效果，可以將獲取到的人臉檢測框輸出在原圖上，這里通過讀取每一個人臉檢測框然后使用OpenCV的rectangle函式在原圖上繪制矩形框實作；

最終檢測效果如下圖所示：

在開發人臉識別開放平臺時,有一點需要特別注意，由于每一個回應都需要主服務器進行人臉檢測操作，而本身人臉檢測演算法相對其它型別的常規操作會更加耗時并且耗資源，當并發訪問數過大時會導致網站奔潰，這也就是通常所說的訪問量過載，訪問量過載包含兩個方面:一是超負荷訪問，即后臺主機性能有限，無法抗住過大的訪問量；二是網站代碼存在性能問題，將系統拖慢，導致網站服務奔潰，針對上述問題，通常有兩種修復手段：
(1)為了快速訪問網站，讓用戶迅速正常訪問，最有效的手段就是限制訪問，比如限制訪問的頻率，這個調整應該是動態的，比如說使用驗證碼等技術，放緩用戶重繪次數，這樣做可以確保服務的可用性，但也會犧牲部分用戶的訪問，正常情況下，服務器能支撐多大的訪問量是需要技術人員在系統業務上線之前做好測驗，提前做好資料支撐的；
(2)在時間允許的情況下，如果后端服務具有擴容條件，則可以對奔潰期間的訪問資料進行分析，然后根據分析結果進行擴容服務，再逐步開放訪問限制；
本節開發的人臉識別開放平臺重點在于引導讀者熟悉搭建人工智能Web介面的基本步驟，在實際的操作程序中需要結合服務器性能、用戶群體、演算法效率等綜合考慮和設計Web架構，并且在上線前需要進行抗壓測驗，由于超出本課程內容，本節課不再對此進行深入闡述，有興趣的讀者可以自行查閱我的其他專欄中的博客，

8.2.3 前端說明頁面

本小節將完善人工智能開放平臺的前端頁面，主要為用戶提供一個說明頁面用于向用戶展示如何使用開放平臺介面，接下來我們編輯serviceApp應用中templates檔案夾下的platform.html檔案，在前面開發企業門戶網站時我們遺留了這部分內容沒有開發，下面我們就來完善它，

參照示例網站所示效果可以看到，頁面主體部分以說明文字為主，采用常規的HTML標簽進行撰寫，主要對人臉檢測開放平臺的介面基本資訊進行闡述，同時給出了基于Python的介面呼叫示例，可以看到，在演示代碼部分，實作了適合Python格式的語法高亮功能，可以讓用戶方便的進行代碼瀏覽和拷貝，為了實作該功能，這里通過集成CodeMirror插件來開發，CodeMirror是一款十分強大的代碼編輯插件，提供了非常豐富的API，其核心基于JavaScript，可以實時在線代碼高亮顯示，值得指出的是該插件并不是某個富文本編輯器的附屬產品，它本質上是一個在線代碼編輯器的基礎庫，

本小節需要掌握在頁面中高亮顯示代碼的方法，首先下載CodeMirror插件包，下載地址：https://codemirror.net/，插件包中包含各種代碼的使用案例，由于本節課主要介紹基于Python語言的介面呼叫，因此介紹Python部分，用瀏覽器打開index.html檔案，然后單擊Python語言對應的示例即可跳轉到Python示例頁面，通過查看該頁面原始碼即可進行開發，實際使用時只需要匯入必要的js和css檔案即可，

接下來進入具體的開發環節，首先需要從CodeMirror插件包中引入必要的js和css檔案：

<link rel="stylesheet" href="{% static 'css/codemirror.css' %}">
<script src="{% static 'js/codemirror.js' %}"></script>
<script src="{% static 'js/python.js' %}"></script>
<style type="text/css">
    .CodeMirror {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }
</style>

其中codemirror.css、codemirror.js和python.js檔案可以從CodeMirror插件包中找到，將其拷貝到hengDaProject專案static檔案夾下的css和js子檔案夾中即可實作呼叫，

使用時通過HTML標簽<textarea>實作代碼的顯示和編輯：

<div><textarea id="code" name="code">
    在此處寫入Python代碼 
</textarea></div>

最后，添加js代碼：

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: {
            name: "python",
            version: 3,
            singleLineStringErrors: false
        },
        lineNumbers: true,
        indentUnit: 4,
        tabMode: "shift",
        matchBrackets: true
    });
</script>

通過上述簡單配置，可以使得頁面顯示的Python代碼能夠有效的進行高亮顯示，方便用戶瀏覽，效果如下圖所示，完整代碼請參考配套資源檔案，

8.3 在線人臉檢測

上一節闡述了人臉檢測開放平臺的搭建，通過服務器提供人臉檢測服務，然后使用本地Python腳本實作介面呼叫，為了能夠讓用戶更加方便的熟悉平臺功能同時體驗企業開發的AI產品特性，一種比較好的方式就是在上一節搭建的開放平臺基礎上提供一種在線檢測功能，本節將闡述一種在線Web呼叫的方式，即用戶在網頁上上傳一張照片，然后單擊檢測即可在網頁上實作人臉檢測并獲取檢測結果，這種方式可以方便的讓用戶無需撰寫任何腳本代碼即可體驗功能，下面闡述具體開發步驟，

首先來撰寫網頁端功能，為了能夠與當前的“人臉檢測開放平臺”說明頁面區分開來，將通過使用Bootstrap提供的模式對話框來實作圖片的在線檢測，打開serviceApp應用下的platform.html檔案，在主體部分<div class="model-details">中添加標題，并增加一個按鈕用來彈出模式對話框，效果如下圖所示：

當在頁面中單擊“人臉檢測”按鈕時，彈出右側所示對話框，此時背景頁面會呈現灰色，只有在模式對話框關閉時頁面才恢復正常，采用這種方式，可以方便的在頁面中進行額外的界面操作而不影響頁面原有布局，Bootstrap提供了現成的模式對話框組件，可以方便的直接使用，具體代碼如下：

<h3>一. 體驗產品</h3>
</br>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" 
data-target="#myModal">人臉檢測
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    在線人臉檢測
                </h4>
            </div>
            <div class="modal-body">
                <img id="photoIn" src="{% static 'img/sample.png' %}"
                  class="img-responsive" style="max-width:250px">
                <input type="file" id="photo" name="photo" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" 
data-dismiss="modal">關閉
                </button>
                <button type="button" id="compute" class="btn btn-primary">
                    開始檢測
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    $(function () {
        $('#photo').on('change', function () {
            var r = new FileReader();
            f = document.getElementById('photo').files[0];
            r.readAsDataURL(f);
            r.onload = function (e) {
                document.getElementById('photoIn').src = this.result;
            };
        });
    });
</script>

模式對話框觸發：本節使用按鈕來呼叫模式對話框，通過設定按鈕的data-toggle引數為"modal"來申明當前按鈕的觸發方式為模式對話框，同時需要通過設定data-target 引數來具體確定當前哪個模式對話框需要被觸發彈出，其屬性值設定為模式對話框的id號；
Bootstrap提供的模式對話框由三部分構成：頭部(modal-header)、主體(modal-body)、尾部(modal-footer)，每部分之間以一根灰色線進行分隔；
影像顯示邏輯：模式對話框主體部分放置了兩個組件，其中1個圖片組件用于顯示當前上傳的圖片，另1個檔案上傳組件用于選擇本地圖片進行上傳，用戶單擊瀏覽按鈕，選擇1張影像，此時觸發輸入圖片的change屬性，根據撰寫的JS代碼，當圖片改變的時候，通過檔案流讀取當前上傳的圖片，并將圖片內容賦值給圖片組件的src屬性用于顯示圖片；

接下來需要使用Ajax技術實作圖片發送功能，將圖片發送至服務器并且進行人臉檢測，回傳的結果也以影像的形式進行接收并顯示，具體代碼如下：

<script>
    $('#compute').click(function () {
        formdata = new FormData();
        var file = $("#photo")[0].files[0];
        formdata.append("image", file);
        $.ajax({
            url: '/serviceApp/facedetectDemo/', // 呼叫django服務器計算函式
            type: 'POST',          // 請求型別
            data: formdata,
            dataType: 'json',     // 期望獲得的回應型別為json
            processData: false,
            contentType: false,
            success: ShowResult  // 在請求成功之后呼叫該回呼函式輸出結果
        })
    })
</script>
<script>
    function ShowResult(data) {
        var v = data['img64'];
        document.getElementById('photoIn').src = "data:image/jpeg;base64, " + v;
    }
</script>

基于Ajax的影像發送：發送影像資料需要采用一種FormData格式，即將上傳的圖片檔案用formdata.append方式完成封裝，最后只需要在Ajax的data屬性中嵌入formdata變數即可；
Ajax回傳結果處理：Ajax回傳結果使用額外的函式ShowResult進行實作，主要用于處理回傳的影像資料，將影像進行顯示，為了與本地呼叫介面區分，需要在后臺額外的添加人臉處理函式，將檢測框直接顯示在影像上并將影像回傳，此處定義新的url，其訪問網址為'/serviceApp/facedetectDemo/'，具體的后臺實作后續會給出詳細代碼；
影像的base64顯示：base64是網路上最常見的用于傳輸8Bit位元組碼的編碼方式之一，base64就是一種基于64個可列印字符來表示二進制資料的方法，base64編碼是從二進制轉成字符的程序，可用于在HTTP環境下傳遞較長的標識資訊，為了能夠在網路上正常傳輸影像資料，這里采用base64進行影像的編解碼，當前Ajax接收到的影像資料是由后臺按照base64編碼完成的，因此，需要將獲取到的base64字串按照特定格式傳遞給img組件并顯示；

接下來開始開發后臺視圖處理程式，前面一節中開發的人臉視圖處理函式回傳了當前檢測人臉的矩形框坐標值，此時可以繼續使用該處理函式，但是需要在前端頁面中根據回傳的坐標值在畫布Canvas中進行坐標換算和畫框，頁面邏輯較為復雜，為了簡化實作程序，我們在后端檢測完成后直接將顯示框繪制在原圖上，
具體的在views.py檔案中添加facedetectDemo函式，詳細代碼如下：

import base64

@csrf_exempt
def facedetectDemo(request):
    result = {}

    if request.method == "POST":
        if request.FILES.get('image') is not None:  #
            img = read_image(stream=request.FILES["image"])
        else:
            result["#faceNum"] = -1
            return JsonResponse(result)

        if img.shape[2] == 3:
            imgGray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)  # 彩色影像轉灰度影像
        else:
            imgGray = img

        #進行人臉檢測
        values = face_detector.detectMultiScale(imgGray,
                                           scaleFactor=1.1,
                                           minNeighbors=5,
                                           minSize=(30, 30),
                                           flags=cv2.CASCADE_SCALE_IMAGE)

        #將檢測得到的人臉檢測關鍵點坐標封裝
        values = [(int(a), int(b), int(a + c), int(b + d))
                  for (a, b, c, d) in values]

        # 將檢測框顯示在原圖上
        for (w, x, y, z) in values:
            cv2.rectangle(img, (w, x), (y, z), (0, 255, 0), 2)

        retval, buffer_img = cv2.imencode('.jpg', img)  # 在記憶體中編碼為jpg格式
        img64 = base64.b64encode(buffer_img)  # base64編碼用于網路傳輸
        img64 = str(img64, encoding='utf-8')  # bytes轉換為str型別
        result["img64"] = img64  # json封裝
    return JsonResponse(result)

實作邏輯：處理函式從POST請求中通過request.FILES.get('image')獲取影像資料，然后根據定義的read_image函式讀取影像；接下來使用cv2.cvtColor函式將彩色影像轉灰度，然后呼叫OpenCV的人臉檢測函式進行檢測；接下來根據檢測得到的矩形框使用cv2.rectangle函式繪制到每一個人臉上；最后對影像進行jpg以及base64轉碼實作影像資料的回傳；
回傳影像資料的格式：首先使用OpenCV提供的imencode函式在記憶體中對影像進行壓縮編碼，壓縮格式為jpg格式；然后使用base64模塊提供的b64encode函式對資料進行base64轉碼以方便網路傳輸，最后將得到的bytes資料轉化為字串型別并按照json格式進行封裝；

最后為新添加的視圖處理函式添加對應的路由，打開urls.py檔案，添加路由如下：

urlpatterns = [
   ...其它路由...
    path('facedetectDemo/', views.facedetectDemo, name='facedetectDemo'),
]

保存所有修改后啟動專案，上傳照片并進行測驗，效果如下圖所示，

本節課通過搭建一個簡單的基于Web的人工智能開放平臺，利用Django框架在服務器端實作了人臉檢測功能，同時提供有效的API介面供本地腳本呼叫，通過該平臺的搭建旨在為讀者拓寬思路和學習方向，熟悉當前人工智能的一種常見Web部署方案，為今后進一步的深入學習打下良好的基礎，

到這里，本系列課程已全部結束，希望本課程能夠給您學習道路上一些啟發和幫助，

由于時間比較匆忙，這個系列博客教程還有很多需要完善的地方，我會盡可能的抽出時間不斷的對其進行優化，使之更簡潔、更實用，

本節課完整代碼和資料下載地址如下：

百度網盤：https://pan.baidu.com/s/1CNniT0VSEz-PxDiapYhb8g

提取碼：7tlr

課程介紹鏈接：Python Web企業門戶網站—系列博客教程介紹_冰海的博客-CSDN博客_python web開發從入門到實戰

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/303238.html

標籤：AI

上一篇：VulnHub-Momentum2

下一篇：Python計算樹模型（隨機森林、xgboost等）的特征重要度及其波動程度：基于熵減的特征重要度計算及可視化、基于特征排列的特征重要性（feature permutation）計算及可視化

第八課 Python Web企業門戶網站-人工智能拓展

8.1 人工智能概述

8.2 搭建“人工智能”開放平臺

8.2.1 人臉檢測后臺搭建

8.2.2 本地腳本測驗

8.2.3 前端說明頁面

8.3 在線人臉檢測