Paul Gudu

Image recognition Camera application For the experiment to I used IBM’s Watson specifically use Watson’s Visual Recognition to create a web camera that will identify an image then compose a photo that has a bold Helvetica text enclosed in “QUOTES” showing what the name of the object in the image. This is inspired by Virgil Abloh’s Off-White brand which tends to sell products in this manner. For example a white Off-White t-shirt would be labelled “T-SHIRT”. To use IBM’s services you need to create and IBMid and get provision for the services required. In my test case I only required the Visual Recognition service. You will be given an APIKEY that you can use immediately with curl to start classify images. Running this curl command will return: Using curl is great for testing the services that are offered and are simple way to use IBM’s AI services over the cloud. However, for this experiment we would want to create a web application which would use these AI services. Built the web application using NUXT, which is a framework used to develop Vue.js applications in fast and easy way. It allows developers to take advantage of Vue.js powerful services like Server-Side Rendering, Pre-Rendering and Automatic Code Splitting. NUXT also supports the Vue Router and Vuex and Vue Server Renderer. To use Watson’s services with our Nuxt application I had to use Watson’s node-sdk. This provides an easy to use client-side library make it easy to use Watson’s developer cloud services. The node sdk delivers high-level access to the Watson’s services without having to have a lot of knowledge in REST application development. This makes it easy to use Watson developer cloud in our node.js applications. We will also use Express, which is a light web application server framework and works well with node.js giving JavaScript some backend functionality. Used Express to create a route that will get an image in a POST request and pass to Watson Developer Cloud for classification and return Watson’s response as JSON. This can be done by running Nuxt from an express server but the simplest way to do this is to use the nuxt-express module. This provides express and express/routes directory to allow us to write routes within Nuxt. The module watches files within the express directory for changes and hot-reload without taking down the entire nuxt server. The following images are screen captures showing the code of the functionality Start camera method Take photo method Classifying the photo Composing the text on the photo Results as opened on a browser