Integrate Machine Learning into Websites and Web Pages

By Stephen Garside on 9/18/2017

I have recently started to learn about and write simple c# neural networks to expand my knowledge of Artificial Intelligence (AI) and machine learning. My aim has been to have a re-usable method to train, store and utilise neural networks for business logic within websites and web pages. The project took a little longer than anticipated as I underestimated the level of mathematics required!  Having finally produced a working neural network, the project stimulated my interest in AI and machine learning for business, leading me to look at off the shelf packages, in-particular Azure Machine Learning from Microsoft.

The great thing about Azure Machine Learning is that the barrier to entry is much lower than writing your own AI neural network.  Don't get me wrong, you still need to understand the key concepts of machine learning such as the different types and uses of neural networks, data normalization, testing and training methods etc, but you don't need to understand the maths!

My particular use-case was to create some reusable 'machine learned logic' that could be incorporated into a real-time business website page. Azure allows users to upload data, which can then be cleaned and transformed if required. This data can then be used to create, train and test a logic model that can then be reused via a public API endpoint - perfect!

To better explain how you can incorporate machine learning into a business website lets use an example.  Below is a set of questions that we will use to determine which out of 5 kitchen designs might best suit a customer's circumstances. The questions are:-

  1. Do you enjoy cooking?
  2. Do you enjoy entertaining?
  3. Do you like to sit down as a family to eat?


The answers to these questions are passed (in Json format) to our pre-trained Azure machine learning API endpoint to get it's recommendation on which of our 5 kitchen designs will best suit our customer.  The designs we can recommend are are follows:-

  1. Basic kitchen
  2. Entertaining kitchen / diner
  3. Cooks kitchen
  4. Family friendly kitchen / diner
  5. General design with multiple features


The result we receive back from the API endpoint is also in Json format, and clearly states which of the designs is most relevant based on the training data used to train the initial model. 

Why not give it a try yourself below:-

Linking a Website to an Azure Trained Neural Network

The following is a very high-level overview of the steps taken to create a basic trained neural network in Azure for use real-time in a web page.


Step 1 - Create the Training Data Set

The data required to train the Azure neural network is shown in the table below - 0 is used to indicate 'no / false', and 1 indicates 'yes / true'. Essentially, this data is just a list of all the potential answer combinations and then the design we would recommend - in an ideal world this would be a much larger set of data possibly based on say a set of survey answers etc, but it will suffice for the demo:-

EnjCook EnjEnt Family SugDesign
0 0 0 1
0 0 1 4
0 1 1 5
1 1 1 5
0 1 0 2
1 0 0 3
1 0 1 5
1 1 0 5

Step 2 - Create an Azure Machine Learning Experiment

The data created in the previous step is then used within an Azure machine learning experiment.  The diagram below is pretty self explanatory as to the steps required in the experiment. In summary:-

  1. The data is 'Normalised' (basically converted to number ranges where required)
  2. The data is split into 2 sets (generally 80 / 20). 80% is used to train the neural network and 20% is used to test it.
  3. The neural network (model) is trained with 80% of the data set.
  4. The trained model is scored using the remaining 20% of data, resulting in a score that gives an indication of how reliable the trained model will be.



Step 3 - Publish Trained Azure 'Model' to API Endpoint

Once the experiment has been created and run through, the resulting 'trained' neural network model can easily be published to an API endpoint on the web, which can then be consumed by your web page.  Due to issues with CORS, I have been unable to call the endpoint directly from javascript, so have had to resort to making an ajax call back to my server-side code which in turn calls the API and proxies the result back to the browser in Json format.

In Summary

The aim of this article is to show how easy it now is for business to incorporate powerful machine learning neural networks into websites and business applications. I would recommend reading up on the basics of neural networks first, this has definitely helped me on my learning journey (I started by reading Make Your Own Neural Network by Tariq Rashid). The great thing is that to harness the power of machine learning you don't need to understand all the maths, which is great - trust me! 

As a developer I can really see the power of the Azure Machine Learning platform. Where once I might have coded complex, inflexible business logic, now I can just create a neural network model, trained with actual business data and then just plug it it.  Existing models can also be re-trained to improve their accuracy as customer interactions take place - another bonus!.  

The easy to use Azure UI means you don't necessarily need development resource to build and train your logic models. With basic training, this task can be passed to business users who have a much greater understanding of the data.

The example used in this article is deliberately simplified to illustrate a concept - Azure Machine Learning is capable of much, much more. Hopefully reading this article has stimulated your interest to go and take a look!