AI時代的網站與手機App建置與開發Part10 - 建立支援影像分類功能的手機App

 

·       摘要

手機因為內建相機功能, 又是眾多使用者無時不刻隨身携帶的裝置, 如果能夠安裝一個支援辨識圖片內容的App, 就能夠隨手將相機拍到的相片傳送給具圖片分類功能的機器學習模型進行辨識與分類, 再將辨識的結果傳回到手機, 讓手機擁有人得知辨識的結果. 在這篇文章, 我們將建立基於Microsoft MAUI跨平台架構的手機App專案, 搭配[AI時代的網站與手機App建置與開發Part8 - 使用ML.NET執行影像分類]這篇文章建立的圖片分類模型與Web API專案, 製作具圖片辨識功能的手機App.

·       編輯使用圖片分類模型的ASP.NET Core Web API專案

使用Visual Studio 2022搭配ML.NET建立的使用圖片分類模型的ASP.NET Core Web API專案提供給用戶端呼叫的端點, 其接受的參數是字串型態的檔案名稱, 如Program.cs這個檔案中的程式碼所示:

// Define prediction route & handler

app.MapPost("/predict",

async (PredictionEnginePool<MLModel.ModelInput, MLModel.ModelOutput>

predictionEnginePool, string imagePath) =>

    var data = new MLModel.ModelInput()

    {

      ImageSource = System.IO.File.ReadAllBytes(imagePath)

    };

    return await Task.FromResult(predictionEnginePool.Predict(input));

});

如果用戶端只將欲辨識的圖片的檔案名稱從手機傳送到Web API專案, 而不是將欲辨識的圖片檔案包裝成IFormFile資料型態, 或是將圖片檔案的內容讀取到byte陣列, 再傳送到Web API專案, Web API專案將會面臨如何取得使用者欲分類的圖片的內容的難題, 所以我們要將上述提供給使用者使用的端點修改成以下的樣子, 支援使用者將欲分類的圖片準備成ModelInput類別的型態的參數, 再傳送到Web API專案供其分類使用::

// Define prediction route & handler

app.MapPost("/predict",

async (PredictionEnginePool<MLModel.ModelInput, MLModel.ModelOutput>

predictionEnginePool, [FromBody]MLModel.ModelInput input) =>

    return await Task.FromResult(predictionEnginePool.Predict(input));

});

·       建立基於MAUI跨平台架構的手機APP專案

請啟動Visual Studio 2022, 執行[檔案 | 新增 | 專案]功能, 選擇建立[.NET MAUI應用程式]型態的專案, 如圖1所示:

圖1: 使用Visual Studio 2022建立[.NET MAUI應用程式]型態的專案的畫面

·       信賴ASP.NET Core HTTPS development certificate

ASP.NET Core Web API專案會使用開發憑証(Development Certificate)讓Web API能夠支援用戶端使用HTTPS叫用Web API服務的功能, 但是開發憑証並未設定為被信任的憑証, 所以我們要先開啟[命令提示字元]程式, 執行下列的命令, 設定信任ASP.NET Core Web API專案使用的開發憑証:

dotnet dev-certs https --trust

·       建立HttpsClientHandlerService 類別

接下來請為專案加入以下名稱為HttpsClientHandlerService的類別, 負責設定執行在Android模擬器的MAUI手機程式和執行在iOS模擬器的MAUI手機程式信任本機電腦的自我簽署憑証:

public class HttpsClientHandlerService

{

    public HttpMessageHandler GetPlatformMessageHandler()

    {

#if ANDROID

        var handler = new Xamarin.Android.Net.AndroidMessageHandler();

        handler.ServerCertificateCustomValidationCallback =                                 (message, cert, chain, errors) =>

        {

            if (cert != null && cert.Issuer.Equals("CN=localhost"))

                return true;

            return errors == System.Net.Security.SslPolicyErrors.None;

        };

        return handler;

#elif IOS

        var handler = new NSUrlSessionHandler

        {

            TrustOverrideForUrl = IsHttpsLocalhost

        };

        return handler;

#else

     throw new PlatformNotSupportedException("Only Android and iOS supported.");

#endif

    }

#if IOS

    public bool IsHttpsLocalhost(NSUrlSessionHandler sender, string url, Security.SecTrust trust)

    {

        if (url.StartsWith("https://localhost"))

            return true;

        return false;

    }

#endif

}

·       附予MAUI手機App專案讀取Android裝置外部儲存體的權限

因為手機App的使用者需要選擇手機裝置中的欲分類的圖片, 所以我們必須附予手機App讀取Android裝置外部記憶體的權限.

請開啟MAUI專案, [Platforms | Android]資料夾下的AndroidManifest.xml檔案, 勾選[READ_EXTERNAL_STORAGE], 如圖2所示:

圖2: 附予MAUI手機App專案讀取Android裝置外部儲存體的權限

·       定義描述呼叫部署機器學習模型的Web API服務傳入的參數的類別

請參考[AI時代的網站與手機App建置與開發Part8 - 使用ML.NET執行影像分類]這篇文件提到由ML.NET程式庫產生的MLModel.consumption.cs檔案中的ModelInput類別, 為專案加入以下的ModelInput類別:

public class ModelInput

{

    public string Label { get; set; }

    public byte[] ImageSource { get; set; }

}

·       定義描述呼叫部署機器學習模型的Web API服務傳回的執行結果的類別

請參考[AI時代的網站與手機App建置與開發Part8 - 使用ML.NET執行影像分類]這篇文件提到由ML.NET程式庫產生的MLModel.consumption.cs檔案中的ModelOutput類別, 為專案加入以下的ModelOutput類別:

public class ModelOutput

{

    public uint label { get; set; }

    public byte[] imageSource { get; set; }

    public string predictedLabel { get; set; }

    public float[] score { get; set; }

}

·       製作手機App貸款申請表單使用者介面

編輯MAUI手機App專案根目錄下的MainPage.xaml檔案, 將<ScrollView>的內容編輯成以下的樣子, 負責選擇欲分類的圖片的使用者介面:

<ScrollView>

    <VerticalStackLayout Padding="30,0"Spacing="25">

        <Label Text="Picture:" />

        <Image x:Name="imgSelected" HeightRequest="200" WidthRequest="200" Aspect="AspectFit" />

        <HorizontalStackLayout HorizontalOptions="FillAndExpand">

            <Button x:Name="btnSelect" Text="選取檔案" Clicked="OnSelectClicked"

                HorizontalOptions="Start" />

            <Button x:Name="btnAnalyze" Text="分類圖片" Clicked="OnAnalyzeClicked"

                HorizontalOptions="End" />              

        </HorizontalStackLayout>

    </VerticalStackLayout>

</ScrollView>

·       處理手機App使用者按下[選取檔案]按鍵的事件

請為MainPage.xaml.cs類別加入以下的OnSelectClicked函式, 負責使用FilePicker協助使用者選取欲分類的圖片, 並顯示到MainPage畫面供使用者預覽:

string imageSource = "";

private async void OnSelectClicked(object sender, EventArgs e)

{

    var images = await FilePicker.Default.PickAsync(new PickOptions

    {

       PickerTitle = "選取欲分析的檔案",

       FileTypes = FilePickerFileType.Images         //協助使用者選取圖形檔案

    });

    imageSource=images.FullPath.ToString();//將使用者選取的檔名存到imageSource變數

    imgSelected.Source = imageSource;       //顯示到Image控制項供使用者預覽:

}

·       處理手機App使用者按下[分類圖片]按鍵的事件

請為MainPage.xaml.cs類別加入以下的OnAnalyzeClicked函式, 負責發送HTTP呼叫至Web API提供的機器學習服務(請注意在Android模擬器執行的手機程式必須使用10.0.2.2 IP位址呼叫佈署在本機電腦的Web API服務), 傳入欲分類的圖片的相關資料, 並顯示分類結果:

private async void OnAnalyzeClicked(object sender, EventArgs e)

{

  //請注意下列的63201為佈署在本機電腦的Web API服務使用的連接埠

   string BaseAddress = DeviceInfo.Platform == DevicePlatform.Android

         ? "https://10.0.2.2:63201" : "https://localhost:63201";

//叫用佈署在本機電腦的Web API服務時請利用HttpsClientHandlerService建立HttpClient類別的物件

#if DEBUG

    HttpsClientHandlerService handler = new HttpsClientHandlerService();

    using (HttpClient Client = new HttpClient(handler.GetPlatformMessageHandler()))

#else

    using (HttpClient Client = new HttpClient())

#endif

    {

        string requestUri = $"{BaseAddress}/predict";    //欲呼叫的服端的端點

        byte[] ImageBytes = null;

        var stream = File.OpenRead(imageSource);         //讀取欲分類的圖片

        using BinaryReader br=new BinaryReader(stream);//建立BinaryReader類別的物件

        ImageBytes = br.ReadBytes((int)stream.Length);   //將圖片內容讀入到byte陣列

        ModelInput input = new ModelInput            //建立ModelInput類別的物件

        {

            Label = "",

            ImageSource = ImageBytes                 //填入byte陣列

        };

        string strContent=JsonSerializer.Serialize(input);//將資料序列化成JSON文件

        var content = new StringContent(strContent, Encoding.UTF8,

"application/json");//準備成StringContent

        HttpResponseMessage response =               //發送呼叫到Web API服務

await Client.PostAsync(requestUri, content);

        string Json = await response.Content.ReadAsStringAsync();//讀取呼叫結果

        ModelOutput Result =                //將結果還原成ModelOutput型態

JsonSerializer.Deserialize<ModelOutput>(Json);

        await DisplayAlert("分類結果",      //顯示結果                                    $"內容:{Result.predictedLabel},信心指數:{Result.score.Max():n2}", "關閉");

     }

}

·       執行手機App並送出欲分類的圖片

請於Visual Studio開發工具中使用F5功能鍵以DEBUG模式執行手機App專案, 因為我們的程式會於DEBUG模式利用HttpsClientHandlerService類別建立呼叫位於本機電腦的Web API服務的HttpClient類別物件, 請注意手機App欲呼叫的Web API服務必須預先啟動, 叫用Web API服務的功能才會成功. 圖3所示即為手機App呼叫佈署機器學習模型的Web API服務的畫面:

圖3: 使用手機App提交欲分類的圖片的畫面



留言

張貼留言

這個網誌中的熱門文章

AI時代的網站與手機App建置與開發Part27 - ML.NET與物件偵測

圖片
  ·        摘要 在自動駕駛的無人車和無人機風風火火出現在日常生活的應用的現今 , 物件偵測技術的應用也日益普及 , 例如自駕車必須要能夠偵測並判斷車輛前方的物體 , 當然最近眾人關注的人形機器人 , 也必須重度依賴物件偵測技術 . 圖 : 物件偵測示意圖 在本篇文章中 , 我們將使用 Visual Studio 2022, 搭配 Microsoft ML.NET 執行物件偵測 . ·        準備訓練資料 首先請參考 [ 使用 VoTT 為物件偵測標記影像 ] 這篇文件的說明 , 為欲偵測的圖片內容進行標示的動作 . 您可以標示多張內含欲辨識的內容 ( 例如 : 汽車 , 機車 , 狗 , 貓 , 紅綠燈 , 交通號誌等等 ) 的圖片 . 例如我們想辨識以下圖片中的停止號誌 : 圖: 內含停止號誌的圖片 就可以使用 Microsoft Visual Object Tagging Tool 標示出圖中 Stop 號誌的位置 , 得到內容位置資訊的 JSON 文件 , 如下所示 : {     "asset": {         "format": "jpg",         "id": "3a74b9294f2f787bf2abe678f6a43231",         "name": "untitled-photo-3d6zCZ4lpBE-unsplash.jpg",         "path": "file:E:/temp/Stop-Signs/untitled-photo-3d6zCZ4lpBE-unsplash.jpg",         "size": {  ...
閱讀完整內容

AI時代的網站與手機App建置與開發Part28 - 使用YOLO模型進行物件偵測

圖片
  l   摘要 應用程式要提供物件偵測功能 , 除了能夠使用 Microsoft ML.NET 本身的物件偵測模型 ( 請參考 : AI 時代的網站與手機 App 建置與開發 Part27 - ML.NET 與物件偵測 的說明 ) 以外 , 也可以利用 SSD(Single Shot MultiBox Detector) 或 YOLO(You Only Look Once) 等演算法提供即時的物件偵測功能 . 圖 : YOLO 梗圖 ·        認識 SSD 與 YOLO 演算法 SSD 和 YOLO 演算法都是用來執行物件偵測常用的做法 , 其主要特性比較如表 1 的說明 : Feature SSD YOLO 辨識效率 快 ( 較 R-NN 快 , 較 YOLO 慢 ) 非常快 , 適合即時 (real-time) 作業 準確度 辨識小型物件準確度佳 辨識大型物件準確度佳 複雜度 中等 相對簡單 辨識圖片大小 支援 版本越高支援越好 表 1: SSD 和 YOLO 演算法主要特性比較 SSD 與 YOLO 物件偵測演算法的適用場合 ·         YOLO 物件偵測演算法的適用場合 : ü   即時運算 (Real-time) 程式 , 例如監視器 , 自動駕駛交通工具 , 機器人 ü   辨識速度很關鍵的場合 ·         SSD 物件偵測演算法的適用場合 : ü   辨識小型物件準確度高的場合 , 例如文件分析或...
閱讀完整內容

AI時代的網站與手機App建置與開發Part24 - ML.NET與圖片異常偵測

圖片
  ·        摘要 將異常偵測應用在圖片資料能夠替代人工進行產品的瑕疵檢視 , 例如檢視食物是否腐敗 , 外型破裂 , 研判 X 光片的內容是否異常 , 或是判斷商品的包裝是否破損等等 , 對於 24 小時不間斷的生產線能夠提供重要的品管支援 . 圖 : 圖片異常偵測示意圖 在本篇文章中 , 我們將使用 Microsoft ML.NET 支援的 ResNet50 預訓練模型 (Pre-Trained Model) 執行圖片的異常偵測 , 期能利用 AI 模型支援 24 小時不間斷的自動化作業 . ·        準備訓練資料 首先請啟動瀏覽器 , 瀏覽至 Cloud and Non-Cloud Images(Anomaly Detection, 下載訓練圖片資料集 ( 下載網址 : https://www.kaggle.com/datasets/ashoksrinivas/cloud-anomaly-detection-images?resource=download ). 圖 1 所示即為下載得到的圖片資料集的部分內容 : 圖 1: 訓練圖片資料集的部分內容 請將訓練圖片加入到 Visual Studio 專案中名稱為 images 資料夾中 , 並到 [ 屬性 ] 視窗將所有的訓練圖片的 [ 複製到輸出目錄 ] 屬性的內容值設定為 : 有更新時才複製 . ·        準備預訓練模型 請啟動瀏覽器 , 瀏覽至 ONNX Model Zoo, 下載支援圖片辨識的預訓練模型 ( 下載網址 : GitHub - onnx/models: A collection of pre-trained, state-of-the-art models in the ONNX format ), 請下載名稱為 resnet50-v2-7.onnx 的預訓練模型 . 請將下載妥的預訓練模型加入到 Visual Studio 專案中名稱為 PreTrainedModel 資料夾中 , 並到 [ 屬性 ] 視窗將預訓練模型檔案的 [ 複製到輸出目錄...
閱讀完整內容