Integrating AI into the Front End
History of AI Tools
The topic of AI has arguably been around since we as humans first thought of automation. History is replete with early examples of quaint, gear-driven automatons able to awkwardly mimic the movement of an animal or hand a circus goer their fortune on a piece of card. While these automatons could complete impressive, albeit rudimentary, tasks in a very specific way they stood as quirky signposts for what was to come. This human need to bring forth AI from the ether has continued from those early days to the present in one long golden thread of human work.
Today AI pervades every nook and cranny of the modern world. A cursory search of jobs involving AI returns everything from “the automation of organisation” to helping startups create the perfect sandwich. Certainly, one of the reasons for this broad groundswell of industrial interest has to do with the proliferation of approachable tools available to engineers, researchers, and the budding sandwich maker alike. There has been a healthy upward trend of the development of tools and techniques in AI, and more pertinent to this article, of making these tools and techniques easy to use for the interested novice.
A few years ago Javascript engineers were left with the choice. They could either ignore the AI revolution like petulant school-kids or learn Python. Ladies and gentlemen, in case you missed the memo, I’m proud to announce that AI in all its glory has finally come to Javascript. The front end engineers can finally ride the 3rd wave along with all the cool Python people.
Tools and techniques
An industry standard in AI tools is the highly acclaimed, open source library Tensorflow developed by the crew at Google Brain. And as of February 11, 2017 Tensorflow is available for play in Javascript, and it’s awesome.
Tensorflow.js allows you to run nearly every method and technique available in the Tensorflow.py library in the browser — or more specifically anywhere that you can execute javascript. The quick among you will already have noticed the elephant in the computational room. Namely, deep learning and machine learning can be extremely computationally expensive. I said that nearly every method and techniques were available in the browser because of the process limitations of the modern browser. For example, you may find that if you create an application that performs intensive, multi-layer training of a deep-learning model in the browser what you are most likely to come out with is the browser freezing up to the sound of your laptop fans straining. What is a more realistic application of AI to the front end is implementing an existing model to, say, object identification or body pose recognition. While this limitation does exist there are still an ungodly amount of applications of AI and/or Tensorflow to the modern front end.
The second school is a great example of how to sidestep this computational limitation. Instead of running AI code in the browser we collect data on the front end and send it to an API which in turn returns it’s computed data. We might use this method to send off large data sets of a user’s behaviour on a site or collections of images selected by users. There is a mind-boggling profile of possible AI APIs out there that work out-of-the-box for all your coding needs. From the IBM Watson suite to the Google AI and Machine Learning suite.
Using these two methods the role of the front end developer with a penchant for AI has a lot of creative breadth. From emojifying your face in a Slack bot to tailoring a user’s fashion sense from their selection of interesting clothes. The only sensible thing to do at this point is to hack some interesting AI projects together!
For those interested in learning to build machine learning or deep learning code in the browser, I highly recommend the following Tensorflow.js tutorial by Sebastian Eschweiler https://medium.com/codingthesmartway-com-blog/tensorflow-js-crash-course-machine-learning-for-the-web-getting-started-50694a575238
Or, if you prefer to go the API route, you can find amazing tools at https://www.ibm.com/watson/products-services/ & https://cloud.google.com/products/ai/
Part 2 will include full code tutorials on how to implement these 2 methods and bring AI to your app, watch this space…
