Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Machine Learning

Azure Machine Learning - Iris Model Client Application

Today's article is the continuation of my post Azure Machine Learning: Classification Predictive Analysis using Iris Dataset. In this post, I shall be demonstrating the utilization of Azure Machine Learning model into a client application. I shall be making a web-based application.



What my web application does is that it consumes the Iris ML model which I have created in Azure Machine Learning Studio. The application will train and predict the provided values into Iris classified type i.e. Iris-setosa, Iris-versicolor, and Iris-virginica.

Prerequisites

Following are some prerequisites before you proceed further in this tutorial.

  1. Knowledge of my article Azure Machine Learning: Classification Predictive Analysis using Iris Dataset.
  2. Knowledge of Iris dataset.
  3. Basic understanding of machine learning concept.
  4. Knowledge of ASP.NET MVC5.
  5. Knowledge of HTML.
  6. Knowledge of JavaScript.
  7. Knowledge of Bootstrap.
  8. Knowledge of Jquery.
  9. Knowledge of C# Programming.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Let's begin now.

Step 1

First, we need to convert our Azure ML model to the web service. If you have not created the Iris Machine Learning model previously in Azure ML Studio, you can follow my article Azure Machine Learning: Classification Predictive Analysis using Iris Dataset otherwise open your Machine Learning Studio and click on the Iris dataset Machine Learning model and create a new copy of it. Name it as "Iris dataset Azure ML Web Service" as shown below.




Step 2

Now, remove the "Evaluate Model" module because we are now creating a web service and we need to remove the evaluation module, as shown below.

 

Step 3

Now, click "Run" as shown below to train your model.

Step 4

Click "Predictive Web Service [Recommended]" to create a web service for the machine learning model.


Do note that in the above snippet, our Iris Machine Learning Model is converted into a module under "Predictive Experiment" tab.

Step 5

Click "Run" button to train your model for the web service.


Step 6

Notice a small switch as shown below in the snippet. This switch toggles between your original Iris Machine Learning Model and the web service model.

 

Notice here that some modules are grayed out in training experiment and some are grayed out in the predictive experiment. This is because the grayed out modules tell us that they are not being used; for example, in case of training experiment web service input & web service output modules are not being used while our machine learning model is being evaluated via sample dataset that we have provided and in case of predictive experiment our sample dataset module is grayed out, this means that our web service is not using our sample dataset, we need to train our model with live values via client application.

Step 7

Now, right click "Score Model" module under Training Experiment and the click "Visualize". You will see result of our machine learning model according to our provided sample dataset.


Step 8

Let's deploy our web services, so, we can consume it in a client application. Click "Deploy Web Service" as shown below i.e.

 



In the above snippets, after deploying the web service, you will be navigated to web service section of azure machine learning studio, here you can see your web service API Key that you can consume in your client side application and a configuration tab where you can configure default values of the web service input & output.

Step 9

Now, click "New Web Services Experience" and then click "Consume" as shown below


 
 

In the above snippets, you will see different types of API Keys and code to be consumed in the target client application.

Step 10

Since, I will create web application as a sample application therefore, I will consume the sample consumption code in asp.net mvc5 web application. So for that, create a new asp.net mvc project in visual studio and name it "IrisMLClientApp".

Step 11

Replace "Views\Shared\_Layout.cshtml" file with following code i.e

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>@ViewBag.Title</title>  
  7.     @Styles.Render("~/Content/css")  
  8.     @Scripts.Render("~/bundles/modernizr")  
  9.   
  10.     <!-- Font Awesome -->  
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  
  12.   
  13. </head>  
  14. <body>  
  15.     <div class="navbar navbar-inverse navbar-fixed-top">  
  16.         <div class="container">  
  17.             <div class="navbar-header">  
  18.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  19.                     <span class="icon-bar"></span>  
  20.                     <span class="icon-bar"></span>  
  21.                     <span class="icon-bar"></span>  
  22.                 </button>  
  23.             </div>  
  24.         </div>  
  25.     </div>  
  26.     <div class="container body-content">  
  27.         @RenderBody()  
  28.         <hr />  
  29.         <footer>  
  30.             <center>  
  31.                 <p><strong>Copyright © @DateTime.Now.Year - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>  
  32.             </center>  
  33.         </footer>  
  34.     </div>  
  35.   
  36.     @Scripts.Render("~/bundles/jquery")  
  37.     @Scripts.Render("~/bundles/bootstrap")  
  38.   
  39.     @RenderSection("scripts", required: false)  
  40. </body>  
  41. </html> 

In the above code we have simply created a simple layout for our application.

Step 12

Now, create new controller, name it "Home" and replace following code in "Controllers\HomeController.cs" i.e.

  1. using IrisMLClientApp.Models;  
  2. using Newtonsoft.Json;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Net.Http;  
  7. using System.Net.Http.Headers;  
  8. using System.Threading.Tasks;  
  9. using System.Web;  
  10. using System.Web.Mvc;  
  11.   
  12. namespace IrisMLClientApp.Controllers  
  13. {  
  14.     public class HomeController : Controller  
  15.     {  
  16.         #region Train ML  
  17.   
  18.         //  
  19.         // GET: /Home/TrainML  
  20.         [AllowAnonymous]  
  21.         public ActionResult TrainML()  
  22.         {  
  23.             return View();  
  24.         }  
  25.   
  26.         //  
  27.         // POST: /Home/TrainML  
  28.         [HttpPost]  
  29.         [AllowAnonymous]  
  30.         [ValidateAntiForgeryToken]  
  31.         public async Task<ActionResult> TrainML(IrisMLViewModel model)  
  32.         {  
  33.             if (ModelState.IsValid)  
  34.             {  
  35.                 // Info.  
  36.                 IrisMLResponseViewModel obj = await this.RequestMLModel(model);  
  37.             }  
  38.   
  39.             // If we got this far, something failed, redisplay form  
  40.             return this.RedirectToAction("TrainMLSuccess");  
  41.         }  
  42.   
  43.         //  
  44.         // GET: /Home/TrainMLSuccess  
  45.         [AllowAnonymous]  
  46.         public ActionResult TrainMLSuccess()  
  47.         {  
  48.             return View();  
  49.         }  
  50.  
  51.         #endregion  
  52.  
  53.         #region Predict  
  54.   
  55.         //  
  56.         // GET: /Home/Predict  
  57.         [AllowAnonymous]  
  58.         public ActionResult Predict()  
  59.         {  
  60.             return View();  
  61.         }  
  62.   
  63.         //  
  64.         // POST: /Home/Predict  
  65.         [HttpPost]  
  66.         [AllowAnonymous]  
  67.         [ValidateAntiForgeryToken]  
  68.         public async Task<ActionResult> Predict(IrisMLViewModel model)  
  69.         {  
  70.             // Initialization.  
  71.             IrisMLResponseViewModel obj = new IrisMLResponseViewModel();  
  72.   
  73.             if (ModelState.IsValid)  
  74.             {  
  75.                 // Info.  
  76.                 obj = await this.RequestMLModel(model);  
  77.             }  
  78.   
  79.             // If we got this far, something failed, redisplay form  
  80.             return this.RedirectToAction("PredictionResult", obj);  
  81.         }  
  82.   
  83.         //  
  84.         // GET: /Home/PredictionResult  
  85.         [AllowAnonymous]  
  86.         public ActionResult PredictionResult(IrisMLResponseViewModel input)  
  87.         {  
  88.             // Initialization  
  89.             PredictionResultViewModel result = new PredictionResultViewModel();  
  90.   
  91.             // Switch  
  92.             switch (input.Class_Type_Predicted)  
  93.             {  
  94.                 case "1": result.Class_Name = "Iris-setosa";  
  95.                     break;  
  96.   
  97.                 case "2":  
  98.                     result.Class_Name = "Iris-versicolor";  
  99.                     break;  
  100.   
  101.                 case "3":  
  102.                     result.Class_Name = "Iris-virginica";  
  103.                     break;  
  104.   
  105.                 default: result.Class_Name = "Iris-setosa";  
  106.                     break;  
  107.             }  
  108.   
  109.             return View(result);  
  110.         }  
  111.  
  112.         #endregion  
  113.  
  114.         #region Helpers  
  115.  
  116.         #region Request ML model method  
  117.   
  118.         public async Task<IrisMLResponseViewModel> RequestMLModel(IrisMLViewModel input)  
  119.         {  
  120.             // Initialization.  
  121.             IrisMLResponseViewModel obj = new IrisMLResponseViewModel();  
  122.   
  123.             try  
  124.             {  
  125.                 using (var client = new HttpClient())  
  126.                 {  
  127.                     var scoreRequest = new  
  128.                     {  
  129.                         Inputs = new Dictionary<string, List<Dictionary<string, string>>>() {  
  130.                         {  
  131.                             "input1",  
  132.                             new List<Dictionary<string, string>>(){new Dictionary<string, string>(){  
  133.                                             {  
  134.                                                 "Sepal-Length", input.Sepal_Length  
  135.                                             },  
  136.                                             {  
  137.                                                 "Sepal-Width", input.Sepal_Width  
  138.                                             },  
  139.                                             {  
  140.                                                 "Petal-Length", input.Petal_Length  
  141.                                             },  
  142.                                             {  
  143.                                                 "Petal-width", input.Petal_Width  
  144.                                             },  
  145.                                             {  
  146.                                                 "Class", input.Class_Name  
  147.                                             },  
  148.                                             {  
  149.                                                 "Class-Type", input.Class_Type  
  150.                                             },  
  151.                                 }  
  152.                             }  
  153.                         },  
  154.                     },  
  155.                         GlobalParameters = new Dictionary<string, string>()  
  156.                         {  
  157.                         }  
  158.                     };  
  159.   
  160.                     const string apiKey = "your-apikey"; // Replace this with the API key for the web service  
  161.                     client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);  
  162.                     client.BaseAddress = new Uri("your-uri");  
  163.   
  164.                     // WARNING: The 'await' statement below can result in a deadlock  
  165.                     // if you are calling this code from the UI thread of an ASP.Net application.  
  166.                     // One way to address this would be to call ConfigureAwait(false)  
  167.                     // so that the execution does not attempt to resume on the original context.  
  168.                     // For instance, replace code such as:  
  169.                     //      result = await DoSomeTask()  
  170.                     // with the following:  
  171.                     //      result = await DoSomeTask().ConfigureAwait(false)  
  172.   
  173.                     HttpResponseMessage response = await client.PostAsJsonAsync("", scoreRequest).ConfigureAwait(false);  
  174.   
  175.                     if (response.IsSuccessStatusCode)  
  176.                     {  
  177.                         string result = await response.Content.ReadAsStringAsync();  
  178.                         string[] data = result.Split(':');  
  179.                         obj.Class_Type_Predicted = data[12].Split('}')[0].Split('\"')[1];;  
  180.                         Console.WriteLine("Result: {0}", result);  
  181.                     }  
  182.                     else  
  183.                     {  
  184.                         Console.WriteLine(string.Format("The request failed with status code: {0}", response.StatusCode));  
  185.   
  186.                         // Print the headers - they include the requert ID and the timestamp,  
  187.                         // which are useful for debugging the failure  
  188.                         Console.WriteLine(response.Headers.ToString());  
  189.   
  190.                         string responseContent = await response.Content.ReadAsStringAsync();  
  191.                         Console.WriteLine(responseContent);  
  192.                     }  
  193.                 }  
  194.             }  
  195.             catch (Exception ex)  
  196.             {  
  197.                 // Info  
  198.                 Console.Write(ex);  
  199.             }  
  200.   
  201.             // Info.  
  202.             return obj;  
  203.         }  
  204.  
  205.         #endregion  
  206.  
  207.         #endregion  
  208.     }  
  209. } 

In the above code, I have created actions for the respective pages in which I have consumed our machine learning model web service. Following piece of code will train & predict results based on the iris machine learning model. The provided values are real time values. So, if the pattern value does not exist for a particular class the machine learning model will result in an output score that's the same as the input, but, if some values exist for a particular class, the machine learning model will try predicting the input result.

  1. #region Request ML model method  
  2.   
  3.         public async Task<IrisMLResponseViewModel> RequestMLModel(IrisMLViewModel input)  
  4.         {  
  5.             // Initialization.  
  6.             IrisMLResponseViewModel obj = new IrisMLResponseViewModel();  
  7.   
  8.             try  
  9.             {  
  10.                 using (var client = new HttpClient())  
  11.                 {  
  12.                     var scoreRequest = new  
  13.                     {  
  14.                         Inputs = new Dictionary<string, List<Dictionary<string, string>>>() {  
  15.                         {  
  16.                             "input1",  
  17.                             new List<Dictionary<string, string>>(){new Dictionary<string, string>(){  
  18.                                             {  
  19.                                                 "Sepal-Length", input.Sepal_Length  
  20.                                             },  
  21.                                             {  
  22.                                                 "Sepal-Width", input.Sepal_Width  
  23.                                             },  
  24.                                             {  
  25.                                                 "Petal-Length", input.Petal_Length  
  26.                                             },  
  27.                                             {  
  28.                                                 "Petal-width", input.Petal_Width  
  29.                                             },  
  30.                                             {  
  31.                                                 "Class", input.Class_Name  
  32.                                             },  
  33.                                             {  
  34.                                                 "Class-Type", input.Class_Type  
  35.                                             },  
  36.                                 }  
  37.                             }  
  38.                         },  
  39.                     },  
  40.                         GlobalParameters = new Dictionary<string, string>()  
  41.                         {  
  42.                         }  
  43.                     };  
  44.   
  45.                     const string apiKey = "your-apikey"; // Replace this with the API key for the web service  
  46.                     client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);  
  47.                     client.BaseAddress = new Uri("your-uri");  
  48.   
  49.                     // WARNING: The 'await' statement below can result in a deadlock  
  50.                     // if you are calling this code from the UI thread of an ASP.Net application.  
  51.                     // One way to address this would be to call ConfigureAwait(false)  
  52.                     // so that the execution does not attempt to resume on the original context.  
  53.                     // For instance, replace code such as:  
  54.                     //      result = await DoSomeTask()  
  55.                     // with the following:  
  56.                     //      result = await DoSomeTask().ConfigureAwait(false)  
  57.   
  58.                     HttpResponseMessage response = await client.PostAsJsonAsync("", scoreRequest).ConfigureAwait(false);  
  59.   
  60.                     if (response.IsSuccessStatusCode)  
  61.                     {  
  62.                         string result = await response.Content.ReadAsStringAsync();  
  63.                         string[] data = result.Split(':');  
  64.                         obj.Class_Type_Predicted = data[12].Split('}')[0].Split('\"')[1];;  
  65.                         Console.WriteLine("Result: {0}", result);  
  66.                     }  
  67.                     else  
  68.                     {  
  69.                         Console.WriteLine(string.Format("The request failed with status code: {0}", response.StatusCode));  
  70.   
  71.                         // Print the headers - they include the requert ID and the timestamp,  
  72.                         // which are useful for debugging the failure  
  73.                         Console.WriteLine(response.Headers.ToString());  
  74.   
  75.                         string responseContent = await response.Content.ReadAsStringAsync();  
  76.                         Console.WriteLine(responseContent);  
  77.                     }  
  78.                 }  
  79.             }  
  80.             catch (Exception ex)  
  81.             {  
  82.                 // Info  
  83.                 Console.Write(ex);  
  84.             }  
  85.   
  86.             // Info.  
  87.             return obj;  
  88.         }  
  89.  
  90.         #endregion 

Replace your target model "API Key" & "URI" path in the above code.

Step 13

Now create "Models\HomeViewModels.cs" file and replace following code in it i.e.

  1. using System.Collections.Generic;  
  2. using System.ComponentModel.DataAnnotations;  
  3. namespace IrisMLClientApp.Models  
  4. {  
  5.     public class IrisMLViewModel  
  6.     {  
  7.         [Required]  
  8.         [Display(Name = "Sepal-Length")]  
  9.         public string Sepal_Length { get; set; }  
  10.   
  11.         [Required]  
  12.         [Display(Name = "Sepal-Width")]  
  13.         public string Sepal_Width { get; set; }  
  14.   
  15.         [Required]  
  16.         [Display(Name = "Petal-Length")]  
  17.         public string Petal_Length { get; set; }  
  18.   
  19.         [Required]  
  20.         [Display(Name = "Petal-Width")]  
  21.         public string Petal_Width { get; set; }  
  22.   
  23.         [Required]  
  24.         [Display(Name = "Class Name")]  
  25.         public string Class_Name { get; set; }  
  26.   
  27.         [Required]  
  28.         [Display(Name = "Class-Type")]  
  29.         public string Class_Type { get; set; }  
  30.     }  
  31.   
  32.     public class IrisMLResponseViewModel  
  33.     {  
  34.         [Display(Name = "Class-Type")]  
  35.         public string Class_Type_Predicted { get; set; }  
  36.     }  
  37.   
  38.     public class PredictionResultViewModel  
  39.     {  
  40.         [Display(Name = "Class Name")]  
  41.         public string Class_Name { get; set; }  
  42.     }  
  43. } 

In the above code, I have created the target view models in order to map the input and output values.

Step 14

Create target page files for actions under "Views" i.e. "TrainML.cshtml, TrainMLSuccess.cshtml, Predict.cshtml & PredictionResult.cshtml" and replace the  following code in them; i.e."

TrainML.cshtml

  1. @model IrisMLClientApp.Models.IrisMLViewModel  
  2. @{  
  3.     ViewBag.Title = "Iris Machine Learning Model Client Application";  
  4. }  
  5.   
  6. <h2>@ViewBag.Title.</h2>  
  7.   
  8. @using (Html.BeginForm("TrainML", "Home", FormMethod.Post, new { @id = "trainMLFormId", @class = "form-horizontal", role = "form" }))  
  9. {  
  10.     @Html.AntiForgeryToken()  
  11.     HtmlHelper.UnobtrusiveJavaScriptEnabled = false;  
  12.   
  13.     <h4>Train Iris Machine Learning Model</h4>  
  14.     <hr />  
  15.   
  16.     <div class="form-group">  
  17.         @Html.LabelFor(m => m.Sepal_Length, new { @class = "col-md-2 control-label" })  
  18.         <div class="col-md-10">  
  19.             @Html.TextBoxFor(m => m.Sepal_Length, new { @class = "form-control" })  
  20.             @Html.ValidationMessageFor(m => m.Sepal_Length, "", new { @class = "text-danger  " })  
  21.         </div>  
  22.     </div>  
  23.   
  24.     <div class="form-group">  
  25.         @Html.LabelFor(m => m.Sepal_Width, new { @class = "col-md-2 control-label" })  
  26.         <div class="col-md-10">  
  27.             @Html.TextBoxFor(m => m.Sepal_Width, new { @class = "form-control" })  
  28.             @Html.ValidationMessageFor(m => m.Sepal_Width, "", new { @class = "text-danger  " })  
  29.         </div>  
  30.     </div>  
  31.   
  32.     <div class="form-group">  
  33.         @Html.LabelFor(m => m.Petal_Length, new { @class = "col-md-2 control-label" })  
  34.         <div class="col-md-10">  
  35.             @Html.TextBoxFor(m => m.Petal_Length, new { @class = "form-control" })  
  36.             @Html.ValidationMessageFor(m => m.Petal_Length, "", new { @class = "text-danger  " })  
  37.         </div>  
  38.     </div>  
  39.   
  40.     <div class="form-group">  
  41.         @Html.LabelFor(m => m.Petal_Width, new { @class = "col-md-2 control-label" })  
  42.         <div class="col-md-10">  
  43.             @Html.TextBoxFor(m => m.Petal_Width, new { @class = "form-control" })  
  44.             @Html.ValidationMessageFor(m => m.Petal_Width, "", new { @class = "text-danger  " })  
  45.         </div>  
  46.     </div>  
  47.   
  48.     <div class="form-group">  
  49.         @Html.LabelFor(m => m.Class_Name, new { @class = "col-md-2 control-label" })  
  50.         <div class="col-md-10">  
  51.             @Html.TextBoxFor(m => m.Class_Name, new { @class = "form-control" })  
  52.             @Html.ValidationMessageFor(m => m.Class_Name, "", new { @class = "text-danger  " })  
  53.         </div>  
  54.     </div>  
  55.   
  56.     <div class="form-group">  
  57.         @Html.LabelFor(m => m.Class_Type, new { @class = "col-md-2 control-label" })  
  58.         <div class="col-md-10">  
  59.             @Html.TextBoxFor(m => m.Class_Type, new { @class = "form-control" })  
  60.             @Html.ValidationMessageFor(m => m.Class_Type, "", new { @class = "text-danger  " })  
  61.         </div>  
  62.     </div>  
  63.   
  64.     <div class="form-group">  
  65.         <div class="col-md-offset-2 col-md-10">  
  66.             <input type="submit" class="btn btn-default" value="Train" />  
  67.             <a href="@Url.Action("Predict", "Home")" class="btn btn-default">Predict</a>  
  68.         </div>  
  69.     </div>  
  70. }  
  71.   
  72. @section Scripts {  
  73.     @Scripts.Render("~/bundles/jqueryval")  
  74.     @Scripts.Render("~/bundles/custom-validator") 

TrainMLSuccess.cshtml

  1. @{  
  2.     ViewBag.Title = "Iris Machine Learning Model Client Application";  
  3. }  
  4.   
  5. <h2>@ViewBag.Title.</h2>  
  6.   
  7. <br/>  
  8. <br />  
  9. <p class="alert-success"><b>Your machine learning model has been successfully trained.</b></p>  
  10.   
  11. <div class="col-md-10">  
  12.     <a href="@Url.Action("TrainML", "Home")" class="btn btn-default">Back</a>  
  13. </div>  
  14. <br />  
  15. <br /> 

Predict.cshtml

  1. @model IrisMLClientApp.Models.IrisMLViewModel  
  2. @{  
  3.     ViewBag.Title = "Iris Machine Learning Model Client Application";  
  4. }  
  5.   
  6. <h2>@ViewBag.Title.</h2>  
  7.   
  8. @using (Html.BeginForm("Predict", "Home", FormMethod.Post, new { @id = "trainMLFormId", @class = "form-horizontal", role = "form" }))  
  9. {  
  10.     @Html.AntiForgeryToken()  
  11.     HtmlHelper.UnobtrusiveJavaScriptEnabled = false;  
  12.   
  13.     <h4>Predict Iris Machine Learning Model</h4>  
  14.     <hr />  
  15.   
  16.     <div class="form-group">  
  17.         @Html.LabelFor(m => m.Sepal_Length, new { @class = "col-md-2 control-label" })  
  18.         <div class="col-md-10">  
  19.             @Html.TextBoxFor(m => m.Sepal_Length, new { @class = "form-control" })  
  20.             @Html.ValidationMessageFor(m => m.Sepal_Length, "", new { @class = "text-danger  " })  
  21.         </div>  
  22.     </div>  
  23.   
  24.     <div class="form-group">  
  25.         @Html.LabelFor(m => m.Sepal_Width, new { @class = "col-md-2 control-label" })  
  26.         <div class="col-md-10">  
  27.             @Html.TextBoxFor(m => m.Sepal_Width, new { @class = "form-control" })  
  28.             @Html.ValidationMessageFor(m => m.Sepal_Width, "", new { @class = "text-danger  " })  
  29.         </div>  
  30.     </div>  
  31.   
  32.     <div class="form-group">  
  33.         @Html.LabelFor(m => m.Petal_Length, new { @class = "col-md-2 control-label" })  
  34.         <div class="col-md-10">  
  35.             @Html.TextBoxFor(m => m.Petal_Length, new { @class = "form-control" })  
  36.             @Html.ValidationMessageFor(m => m.Petal_Length, "", new { @class = "text-danger  " })  
  37.         </div>  
  38.     </div>  
  39.   
  40.     <div class="form-group">  
  41.         @Html.LabelFor(m => m.Petal_Width, new { @class = "col-md-2 control-label" })  
  42.         <div class="col-md-10">  
  43.             @Html.TextBoxFor(m => m.Petal_Width, new { @class = "form-control" })  
  44.             @Html.ValidationMessageFor(m => m.Petal_Width, "", new { @class = "text-danger  " })  
  45.         </div>  
  46.     </div>  
  47.   
  48.     <div class="form-group">  
  49.         @Html.LabelFor(m => m.Class_Name, new { @class = "col-md-2 control-label" })  
  50.         <div class="col-md-10">  
  51.             @Html.TextBoxFor(m => m.Class_Name, new { @class = "form-control" })  
  52.             @Html.ValidationMessageFor(m => m.Class_Name, "", new { @class = "text-danger  " })  
  53.         </div>  
  54.     </div>  
  55.   
  56.     <div class="form-group">  
  57.         @Html.LabelFor(m => m.Class_Type, new { @class = "col-md-2 control-label" })  
  58.         <div class="col-md-10">  
  59.             @Html.TextBoxFor(m => m.Class_Type, new { @class = "form-control" })  
  60.             @Html.ValidationMessageFor(m => m.Class_Type, "", new { @class = "text-danger  " })  
  61.         </div>  
  62.     </div>  
  63.   
  64.     <div class="form-group">  
  65.         <div class="col-md-offset-2 col-md-10">  
  66.             <input type="submit" class="btn btn-default" value="Predict" />  
  67.             <a href="@Url.Action("TrainML", "Home")" class="btn btn-default">Train</a>  
  68.         </div>  
  69.     </div>  
  70. } 

PredictionResult.cshtml

  1. @model IrisMLClientApp.Models.PredictionResultViewModel  
  2. @{  
  3.     ViewBag.Title = "Iris Machine Learning Model Client Application";  
  4. }  
  5.   
  6. <h2>@ViewBag.Title.</h2>  
  7.   
  8. @using (Html.BeginForm("Predict", "Home", FormMethod.Post, new { @id = "trainMLFormId", @class = "form-horizontal", role = "form" }))  
  9. {  
  10.     @Html.AntiForgeryToken()  
  11.     HtmlHelper.UnobtrusiveJavaScriptEnabled = false;  
  12.   
  13.     <h4>Prediction Result</h4>  
  14.     <hr />  
  15.   
  16.     <div class="form-group">  
  17.         @Html.LabelFor(m => m.Class_Name, new { @class = "col-md-2 control-label" })  
  18.         <div class="col-md-10">  
  19.             @Html.TextBoxFor(m => m.Class_Name, new { @class = "form-control", @readonly = "readonly" })  
  20.         </div>  
  21.     </div>  
  22.   
  23.     <div class="form-group">  
  24.         <div class="col-md-offset-2 col-md-10">  
  25.             <a href="@Url.Action("Predict", "Home")" class="btn btn-default">Back</a>  
  26.         </div>  
  27.     </div>  
  28. }  
  29.   
  30. @section Scripts {  
  31.     @Scripts.Render("~/bundles/jqueryval")  
  32.     @Scripts.Render("~/bundles/custom-validator")  
  33. } 

Step 15

Now execute the project and train & predict the test values.

 
 

Conclusion

In this article, you learned how to convert your Iris Machine Learning Model  created in Microsoft Azure Machine Learning Studio to a predictive web service model. We also learned to deploy the web service from the Studio. Finally, we saw how to consume the deployed web service into our target application.

Up Next
    Ebook Download
    View all
    Learn
    View all