AI時代的網站與手機App建置與開發Part9 - 建立支援影像分類功能的MVC網站
·
摘要
了解ML.NET程式庫如何對使用Visual Studio建立的專案加入圖形辨識功能之後, 在這一篇文章中, 我們將要探討ASP.NET Core MVC專案如何使用ML.NET程式庫建立的圖形辨識功能功能辨識圖片的內容.
·
為Controller加入新的Action函式
首先請為專案的HomeController控制器加入以下兩個名稱為ClassifyImage的函式, 其中第一個ClassifyImage函式的功用是用來生成View頁面, 第二個ClassifyImage函式的功用則是負責接收欲辨識的圖片參數, 讀取圖片的內容, 再呼叫MLModel類別的PredictAllLabels函式分類圖片的內容, 再將呼叫的結果轉換成JSON格式再傳回給呼叫者, 如下:
public IActionResult ClassifyImage()
{
return View();
}
[HttpPost]
public JsonResult ClassifyImage(IFormFile
ImageFile)
{
byte[] ImageBytes = null;
//利用BinaryReader類別讀取參數代表的檔案內容
using (BinaryReader br = new
BinaryReader(ImageFile.OpenReadStream()))
{
//將參數代表的檔案內容讀到ImageBytes陣列
ImageBytes =
br.ReadBytes((int)ImageFile.Length);
//建立ModelInput類別變數, 並設定妥ImageSource屬性的內容值
MLModel.ModelInput
sampleData = new MLModel.ModelInput()
{
ImageSource = ImageBytes,
};
//叫用ModelInput類別的PredictAllLabel函式進行圖片分類
var sortedScoresWithLabel =
MLModel.PredictAllLabels(sampleData);
//將圖片分類信心指數最高的結果建立成JSON格式的結果傳回給呼叫者
return Json(new
{
//將圖片分類的結果填入Label屬性
Label= sortedScoresWithLabel.First().Key,
//將圖片分類的信心指數填入Score屬性
Score=
sortedScoresWithLabel.First().Value,
});
}
}
做好之後請使用滑鼠右鍵點選專案中名稱為HomeController的控制器的第一個ClassifyImage函式, 執行[新增檢視]功能, 為ClassifyImage函式加入名稱為ClassifyImage的檢視, 並把ClassifyImage檢視編輯成以下的樣子, 支援使用者選擇欲分類的圖片檔案:
<div class="container">
<div class="form-group">
<label class="form-label">Picture:</label>
<img id="imgPreview" src="~/images/NoImage.jpg" class="form-control"
style="width:640px;height:480px" />
<input type="file" id="file" class="form-control" />
</div>
<div class="form-group">
<button id="classify" type="button" class="btn
btn-primary">分類</button>
</div>
</div>
@section Scripts
{
<script>
var file;
$("#file").on("change", function () { //預覽使用者選擇的圖片內容
file = this.files[0]; //取得使用者選擇的圖片
var allowFileType = "image.*";
if
(file.type.match(allowFileType)) { //弮斷使用者選擇的檔案是否為圖片
var reader = new FileReader(); //建立讀取圖片內容的FileReader
reader.onload = function (e) { //圖片讀取完成後顯示到<img>元素
$("#imgPreview").attr('src', e.target.result);
}
reader.readAsDataURL(file); //讀取使用者選擇的圖片
}
else { //如果使用者未選擇圖片則顯示錯誤訊息
alert("不支援的檔案類型!");
$('#btnAnalyze').prop('disabled', true); //禁用分類圖片的按鍵
}
});
$("#classify").on("click", function () { //分類使用者選擇的圖片內容
var formData = new FormData(); //建立FormData
formData.append("ImageFile", file); //填入使用者選擇的圖片到FormData
$.ajax({ //發送AJAX呼叫到ClassifyImage函式
url: "https://localhost:7094/Home/ClassifyImage",
type: "POST",
processData:
false,
contentType:
false,
data:
formData
}).done(function (data, textStatus,
jqXHR) { //顯示呼叫成功的結果
alert(`內容:${data["label"]},
信心指數:${(data["score"]*100).toFixed(2)}%`);
}).fail(function (jqXHR, textStatus,
errorThrown) {//顯示呼叫失敗的結果
alert(errorThrown);
});
});
</script>
·
顯示分類圖片的結果
呼叫HomeController的ClassifyImage函式會得到以下JSON格式的結果的結果, 其中的label屬性的內容值代表圖片的分類, score屬性的內容代表對判斷結果的信心指數:
{
"label":"Dog",
"score":0.99694294
}
所以我們只要顯示呼叫結果中的label屬性和score屬性的內容值即可.
·
於網站的導覽列加入分類別片的超連結
請開啟專案根目錄下, [Views | Shared]資料夾中的_Layout.cshtml, 於
<ul class="navbar-nav flex-grow-1">
元素中加入以下的超連結:
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="ClassifyImage">圖片分類</a>
</li>
做好之後執行ASP.NET Core MVC網站專案, 點選導覽列中剛加入的[圖片分類]連結, 選取欲分類的圖片, 按下[分類]鍵, 就會看類似圖1的結果:
圖1: 叫用ML.NET程式庫建立的機器學習模型分類選取的圖片的結果
 |
留言
張貼留言