AI時代的網站與手機App建置與開發Part6 - 建立支援貸款授信功能的ASP.NET Core MVC網站(續)
· 摘要
了解ML.NET程式庫如何對使用Visual Studio建立的專案加入機器學習支援之後, 在這一篇文章中, 我們將要探討ASP.NET Core MVC專案如何使用ML.NET程式庫建立的機器學習模型.
· 為Controller加入新的Action函式
請為專案加入新的控制器, 並把新的控制器命名成LoanController, 再為LoanController控制器加入名稱為predict的函式, 於predict函式呼叫MLModel類別的PredictAllLabels函式, 依據貸款申請人填寫的基本資料判斷貨款申請人的授信等級, 再將呼叫的結果轉換成JSON格式並傳回給呼叫者, 如下:
public JsonResult predict(MLModel.ModelInput
modelInput)
{
var sortedScoresWithLabel =
MLModel.PredictAllLabels(modelInput);
return Json(sortedScoresWithLabel);
}
做好之後請使用滑鼠右鍵點選專案中名稱為LoanController的控制器的Index函式, 執行[新增檢視]功能, 為Index函式加入名稱為Index的檢視, 並把Index檢視編輯成以下的樣子, 支援貨款申請人輸入貨款申請表格, 以便提交審核:
<h1>貸款申請表單</h1>
<hr />
<div class="container">
<div class="form-group">
<label class="form-label">Checking_status:</label>
<input id="Checking_status" class="form-control" value="0<=X<200" />
</div>
<div class="form-group">
<label class="form-label"> Duration:</label>
<input id="Duration" class="form-control" value="48" />
</div>
<div class="form-group">
<label class="form-label">Credit_history:</label>
<input id="Credit_history" class="form-control" value="existing paid" />
</div>
<div class="form-group">
<label class="form-label">Purpose:</label>
<input id="Purpose" class="form-control" value="radio/tv" />
</div>
<div class="form-group">
<label class="form-label">Credit_amount:</label>
<input id="Credit_amount" class="form-control" value="5951" />
</div>
<div class="form-group">
<label class="form-label">Savings_status:</label>
<input id="Savings_status" class="form-control" value="<100" />
</div>
<div class="form-group">
<label class="form-label">Employment:</label>
<input id="Employment" class="form-control" value="1<=X<4" />
</div>
<div class="form-group">
<label class="form-label">Installment_commitment:</label>
<input id="Installment_commitment" class="form-control" value="2" />
</div>
<div class="form-group">
<label class="form-label">Personal_status:</label>
<input id="Personal_status" class="form-control" value="female div/dep/mar" />
</div>
<div class="form-group">
<label class="form-label">Other_parties:</label>
<input id="Other_parties" class="form-control" value="none" />
</div>
<div class="form-group">
<label class="form-label">Residence_since:</label>
<input id="Residence_since" class="form-control" value="2" />
</div>
<div class="form-group">
<label class="form-label">Property_magnitude:</label>
<input id="Property_magnitude" class="form-control" value="real estate" />
</div>
<div class="form-group">
<label class="form-label">Age:</label>
<input id="Age" class="form-control" value="22" />
</div>
<div class="form-group">
<label class="form-label">Other_payment_plans:</label>
<input id="Other_payment_plans" class="form-control" value="none" />
</div>
<div class="form-group">
<label class="form-label">Housing:</label>
<input id="Housing" class="form-control" value="own" />
</div>
<div class="form-group">
<label class="form-label">Existing_credits:</label>
<input id="Existing_credits" class="form-control" value="1" />
</div>
<div class="form-group">
<label class="form-label">Job:</label>
<input id="Job" class="form-control" value="skilled" />
</div>
<div class="form-group">
<label class="form-label">Num_dependents:</label>
<input id="Num_dependents" class="form-control" value="1" />
</div>
<div class="form-group">
<label class="form-label">Own_telephone:</label>
<input id="Own_telephone" class="form-control" value="none" />
</div>
<div class="form-group">
<label class="form-label">Foreign_worker:</label>
<input type="checkbox" id="Foreign_worker"/>
</div>
<div class="form-group">
<input id="btnPredict" type="submit" value="申請" class="btn btn-primary" />
</div>
</div>
@section Scripts
{
<script>
var baseAddress = "https://localhost:7045"; // ASP.NET Core MVC網站網址
$("#btnPredict").on("click", function () {
var input = { // 準備貸款申請資料
Checking_status: $("#Checking_status").val(),
Duration: $("#Duration").val(),
Credit_history: $("#Credit_history").val(),
Purpose: $("#Purpose").val(),
Credit_amount: $("#Credit_amount").val(),
Savings_status: $("#Savings_status").val(),
Employment: $("#Employment").val(),
Installment_commitment: $("#Installment_commitment").val(),
Personal_status: $("#Personal_status").val(),
Other_parties: $("#Other_parties").val(),
Residence_since: $("#Residence_since").val(),
Property_magnitude: $("#Property_magnitude").val(),
Age: $("#Age").val(),
Other_payment_plans: $("#Other_payment_plans").val(),
Housing: $("#Housing").val(),
Existing_credits: $("#Existing_credits").val(),
Job: $("#Job").val(),
Num_dependents: $("#Num_dependents").val(),
Own_telephone: $("#Own_telephone").val(),
Foreign_worker: $("#Foreign_worker").is(":checked"),
};
$.ajax({ //叫用LoanController的predict函式, 並傳入貸款申請資料
type:"POST",
url: `${baseAddress}/Loan/predict`,
data: input,
}).done(function (data) { // 解析貸款授信結果
var key = data[0]['key']; // 讀取陣列第一個元素的key屬性的內容值
var value = data[0]['value'];// 讀取陣列第一個元素的value屬性的內容值
alert(`信用等級:${key}, 信心指數:${(value*100).toFixed(2)}%`);
}).fail(function (xhr, textStatus, errorThrown) { //處理呼叫錯誤
alert(xhr.responseText);
});
});
</script>
}
· 解析貸款授信結果
呼叫MLModel類別的PredictAllLabels函式會得到陣列格式的結果, 陣列中的每一個元素都包含key和value屬性, 其中的key屬性的內容值代表授信的結果, 而value屬性的內容值代表每一種授信結果的信心指數. 例如以下就是叫用MLModel類別的PredictAllLabels函式的範例結果:
[
{
"key":"bad",
"value":0.5027844
},
{
"key":"good",
"value":0.49721566
}
]
因為MLModel類別的PredictAllLabels函式會將授信判斷的結果依據信心指數的高低由大至小排序, 所以我們只要讀取陣列第一個元素的結果即可.
· 於網站的導覽列加入填寫貸款申請表的超連結
請開啟專案根目錄下, [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="Loan" asp-action="Index">貸款申請</a>
</li>
做好之後執行ASP.NET Core MVC網站專案, 點選導覽列中剛加入的[貸款申請]連結, 填寫貸款申請表單, 按下[申請]鍵, 就會看類似圖1的結果:
圖1: 叫用ML.NET程式庫建立的機器學習模型判斷貸款申請的授信結果
留言
張貼留言