AI時代的網站與手機App建置與開發Part12 - 建立支援預測股票價格的ASP.NET Core MVC網站

 ·       摘要

在這一篇文章中, 我們將要使用ML.NET程式庫建立的機器學習模型, 建立預測股票價格的網站..

·       Controller加入新的Action函式

請編輯專案的HomeController控制器,HomeController控制器加入以下兩個PredictStockPrice函式, 第一個PredictStockPrice函式用來建立預測股價的資料輸入頁面, 第二個PredictStockPrice函式負責呼叫MLModel類別的Predict函式, 依據使用者輸入的股票價格相關資料預測股票價格, 再將呼叫的結果轉換成JSON格式並傳回給呼叫者, 如下:

public IActionResult PredictStockPrice()

{

return View();

}

[HttpPost]

public JsonResult PredictStockPrice(MLModel.ModelInput modelInput)

{

MLModel.ModelOutput predictionResult = MLModel.Predict(modelInput);

return Json(predictionResult);

}

做好之後請使用滑鼠右鍵點選專案中名稱為HomeController的控制器的第一個PredictStockPrice函式, 執行[新增檢視]功能, PredictStockPrice函式加入名稱為PredictStockPrice的檢視, 並把PredictStockPrice檢視編輯成以下的樣子, 支援使用者輸入股票的相關交易的相關資訊, 以便預測股票的價格:

<h3>股票交易資料</h3>

<br />

<div class="container">

    <div class="form-group">

        <label class="form-label">Date:</label>

        <input id="date" type="date" value="2018-09-27" class="form-control" />

    </div>

    <div class="form-group">

        <label class="form-label">Open:</label>

        <input id="open" value="234.55" class="form-control" />

    </div>

    <div class="form-group">

        <label class="form-label">High:</label>

        <input id="high" value="236.8" class="form-control" />

    </div>

    <div class="form-group">

        <label class="form-label">Low:</label>

        <input id="low" value="231.1" class="form-control" />

    </div>

    <div class="form-group">

        <label class="form-label">Last:</label>

        <input id="last" value="233.8" class="form-control" />

    </div>

    <div class="form-group">

        <label class="form-label">Total_Trade_Quantity:</label>

        <input id="totalTradeQuantity" value="5082859" class="form-control" />

    </div>

    <div class="form-group">

        <label class="form-label">Turnover__Lacs:</label>

        <input id="turnoverLacs" value="11859.95" class="form-control" />

    </div>

    <div class="form-group">

        <button id="predict" class="btn btn-success">預測</button>

    </div>

</div>

@section Scripts

{

    <script>

        var baseAddress = "https://localhost:7021";      //MVC網站的網址

        $("#predict").on("click", function () {//處理button被按下引發的click事件

            var input = {                   //準備股票相關的交易資料

                Date:$("#date").val(),

                Open:$("#open").val(),

                High:$("#high").val(),

                Low:$("#low").val(),

                Last:$("#last").val(),

                Close:0,

                Total_Trade_Quantity:$("#totalTradeQuantity").val(),

                Turnover__Lacs_:$("#turnoverLacs").val(),

            };

            $.ajax({                            //發送ajax呼叫

                type:"post",

                url: `${baseAddress}/Home/PredictStockPrice`,

                data: input,

            }).done(function (data) {           //處理呼叫成功收到的結果

                alert(`預測股價:${(data["score"]).toFixed(2)}`)

            }).fail(function (err) {            //處理呼叫發生的錯誤

                alert(err.statusText);

            });

        });

    </script>

}

·       }解析股價預測的結果

呼叫MLModel類別的Predict函式會得到MLModel.ModelOutput類別型態的結果的結果, 呼叫結果中名稱為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="PredictStockPrice">預測股票價格</a>

</li>

做好之後執行ASP.NET Core MVC網站專案, 點選導覽列中剛加入的[預測股票價格]連結, 填寫妥股票交易的相關資料, 按下[預測], 就會看類似圖1的結果:

1: 叫用ML.NET程式庫建立的機器學習模型預測股票價格的畫面

·       提醒

因為股票價格除了和公司本身的營運狀況有關以外, 也會受到外界因素的影響, 例如俄鳥戰爭, 美國升息, 台灣總統大選結果, 紅海戰雲密佈, 以及以色列和哈瑪斯的開戰有著緊密的關聯, 本篇文章使用機器學習的迴歸演算法模型預測股票的價格僅止於研究的參考, 無法保証股巿獲利, 慎記「投資一定有風險,股票投資有賺有賠,申購前應詳閱公開說明書」.

留言

這個網誌中的熱門文章

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

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

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