AI時代的網站與手機App建置與開發Part16 - 建立具推薦功能的手機App

 ·       摘要

在上一篇文章中, 我們利用ML.NET建立了一個預測使用者對電影的評論分數預測的機器學習模型, 並利用建立妥的機器學習模型製作了一個支援使用者對電影的評論分數預測的Core MVC網站. 這篇文章中, 我們將要利用支援預測電影評論分數的機器學習模型建立能夠預測電影評論分數的手機App.

·       處理CORS安全保護問題

部署機器學習模型的Web API專案預設會啟用跨來源資源分享(Cross Origin Resource Sharing – CORS), 禁止和Web API專案不同來源的JavaScript程式呼叫, 如果要解除CORS安全保護, 可以編輯Web API專案根目錄的Program.cs, 於//Configure app註解下方定義CORS的開放策略:

// Configure app

string MyAllowSpecificOrigins = "AllowOrigin";

builder.Services.AddCors(options => {

    options.AddPolicy(

      name: MyAllowSpecificOrigins,

      policy => policy.WithOrigins("*").WithHeaders("*").WithMethods("*"));

});

請注意上述程式碼呼叫WithOrigins函式傳入*當做參數, 表示不限制任何JavaScript程式叫用Web API服務.

定義妥CORS開放策略後, 請於叫用app的Run函式前套用前述定妥的CORS開放策略, 就可以完成解除對JavaScript程式的CORS安全管制.

app.UseCors(MyAllowSpecificOrigins);

app.Run();

·       建立基於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

}

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

請參考[AI時代的網站與手機App建置與開發Part14 - 使用ML.NET建立推薦系統]這篇文件提到由ML.NET程式庫產生的MLModel.consumption.cs檔案中的ModelOutput類別, 為專案加入以下的ModelOutput類別, 請注意不可以直接使用ML.NET程式庫生成的ModelOutput類別, 您必須將原先ModelOutput類別中的所有的屬性的第一個英文字元由原先的大寫英文字變更成小寫的英文字元, 例如將原有名稱為UserId的屬性的名稱變更成userId, 將原有名稱為MovieId的屬性的名稱變更成movieId, 以此類推, 編輯妥的ModelOutput類別如下:

public class ModelOutput

{

    public float userId { get; set; }

    public float movieId { get; set; }

    public float rating { get; set; }

    public float score { get; set; }

}

·       製作手機App預測電影評論分數的使用者介面

編輯MAUI手機App專案根目錄下的MainPage.xaml檔案, 將<ScrollView>的內容編輯成以下的樣子, 負責定義預測電影評論分數的使用者介面:

<ScrollView>

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

         <Label Text="User Id:" />

            <Entry x:Name="UserId" Text="1"></Entry>

            <Label Text="Movie Id:" />

            <Entry x:Name="MovieId" Text="3"></Entry>

            <Button x:Name="BtnPredict" Text="預測" Clicked="OnPredictClicked" 

HorizontalOptions="Fill" />

    </VerticalStackLayout>

</ScrollView>

·       處理手機App使用者按下輸入電影評論相關資訊表單下方的[預測]按鍵的事件

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

private async void OnPredictClicked(object sender, EventArgs e)

{

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

    string BaseAddress = DeviceInfo.Platform == DevicePlatform.Android

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

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

#if DEBUG

    HttpsClientHandlerService handler = new HttpsClientHandlerService();

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

#else

    HttpClient Client = new HttpClient();

#endif

    object data = new  //建立描述欲預測電影評論分數的電影與使用者的相關資料

    {

        UserId = UserId.Text,

        MovieId = MovieId.Text,

    };

    string Uri = $"{BaseAddress}/predict";                  //欲呼叫的Web API的端點

    string strContent = JsonSerializer.Serialize(data);

    var content = new StringContent(strContent, Encoding.UTF8, "application/json");

    HttpResponseMessage Response = await Client.PostAsync(Uri, content);//發送呼叫

    Response.EnsureSuccessStatusCode();

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

    var Result = JsonSerializer.Deserialize<ModelOutput>(Json);

    float score = Result.score;                            //取得預測的電影評論分數

    await DisplayAlert(

"預測電影評論分數", $"{Score:N2}分", "關閉"); //顯示預測的電影評論分數

}

·       執行手機App並送出電影與使用者相關資料以獲取預測的電影評論分數

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

圖2: 使用手機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 資料夾中 , 並到 [ 屬性 ] 視窗將預訓練模型檔案的 [ 複製到輸出目錄...
閱讀完整內容