DEV Community: David Ruiz

Face recognition app with Azure

David Ruiz — Mon, 18 Nov 2019 17:21:15 +0000

App overview

We will be creating a face recognition app. It will have both server (Node.js) and client-side (react.js) components.

The server is responsible for registering the faces with Microsoft Cognitive Services’ Face API.

On the other hand, the app is responsible for the following:

Upload a URL from an image on JPG format.
Show the attributes of the image, in this case: gender and age.

Here is the link of the code

Here’s what the app will look like:

What is Cognitive Services?

Before we proceed, let's first quickly go over what Cognitive Services is. Cognitive Services is a collection of services that allow developers to easily implement machine learning features to their applications. These services are available via an API which is grouped under the following categories:

Vision - for analyzing images and videos.
Speech - for converting speech to text and vise-versa.
Language - for processing natural language.
Decision - for content moderation.
Search - for implementing search algorithms that are used on Bing.

Today we're only concerned about Vision, more specifically the Face API. This API is used for identifying and finding similarities of faces in an image.

Setting up Cognitive Services

In this section, we’ll be setting up Cognitive services in the Azure portal. This section assumes that you already have an Azure account.

First, go to the Azure portal and search for “Cognitive services”. Click on the first result under the Services:

Next, search for “face” and click on the first result:

On the page that follows, click on the Create button to add the service:

After that, it will ask for the details of the service you want to create.

Enter the details of the resource group you want to add the service too. In this case, I simply put in the name then click OK:

Once the resource group is created, you can now add the cognitive service. Here’s what it looks like as it’s deploying:

Once it’s created, you’ll find it listed under the Cognitive Services:

If you click on it, you’ll see the overview page. Click on the Show access keys link to see the API keys that you can use to make requests to the API. At the bottom, you can also see the number of API calls that you have made and the total allotted to the pricing tier you chose:

Build the app

Now we’re ready to start building the app. We’ll first start with the server component.

Server

The server is where we are going to do all the connections with the Face API.

Note: This is going to be an easy example of getting all the information. You can scale the API as you wish.

Start by importing all the modules we need:


const express = require('express')
const axios = require('axios')
const bodyParser = require('body-parser')

const app = express()

Next, create the base variable to be used for initializing an Axios instance. We will use this, later on, to make a request to the API. You need to supply a different URL based on your location. You can find the list of locations here. The API key (Ocp-Apim-Subscription-Key) is passed as a header value along with the Content-Type:

// API key from Azure
const ApiKey = `YOUR COGNITIVE SERVICES API KEY`
// Azure endpoint URL - Face API
const AzureEndpoint = `https://westus.api.cognitive.microsoft.com/face/v1.0` // replace with the server nearest to you

// Base instance for axios request
const baseInstanceOptions = {
  baseURL: AzureEndpoint,
  timeout: 50000,
  headers: {
    'Content-Type': 'application/json',
    'Ocp-Apim-Subscription-Key': ApiKey
  }
}

Next, add the route for creating a face list. This requires the URL of the image that is going to be passed from the request body. This URL must have a JPG format.

app.post('/create-facelist', async (req, res) => {
  try {
    const instanceOptions = {...baseInstanceOptions}
    const instance = axios.create(instanceOptions)
    const body = req.body

    // URL with all the params for Azure
    const response = await instance.post(
      `/detect?returnFaceId=true&returnFaceLandmarks=false&recognitionModel=recognition_01&returnRecognitionModel=false&detectionModel=detection_01&returnFaceAttributes=age,gender`,
      {
        url: body.image
      }
    )

    // send the response of the fetch
    res.send({
      response: 'ok',
      data: response.data
    })
  } catch (err) {
    console.log("error :c : ", err)
    res.send({response: 'not ok'})
  }
})

Web app

Now we can proceed to code the app. Start by creating the project with npx: npx create-react-app face-recognition-app

Let's get an overview of the frontend. As I mentioned before it's a very simple example so it will consist of just an input that sends the data to the API.

Now we can proceed to define the states of the app like this:

// Api endpoint
const URLAPI = `http://localhost:5000`

// hook state to get the data from the API 
const [data, setData] = useState([])
// Hook state to get the info from the input
const [image, setImage] = useState('https://www.kienyke.com/wp-content/uploads/2018/10/selfie.jpg')

When the user enters a value in the input is going to be set on the state:

// Set the state with the input value
const handleOnChange = event => {
  setImage(event.target.value)
}

Next, with the value of the input let proceed to fetch the data:

const handleClickImage = async event => {
  try {
    const fetchOptions = {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        image: image,
      })
   }

  // Fetch the data
  const resp = await fetch(`${URLAPI}/create-facelist`, fetchOptions)
    const people = await resp.json()
    console.log(people.data)
    // Set the state of the data
    setData(people.data)
  } catch (err) {
    console.error(err)
  }
}

Next, update the render content to look like the following:

return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <p>
          Upload a JPG image
        </p>
        <div className="containerFile">
          <input
            className="inputFile"
            placeholder="Upload image"
            onChange={handleOnChange}
            value={image}
          />
          <button
            className="buttonFile"
            onClick={handleClickImage}
          >
            Upload
          </button>
        </div>
        <h3 className="titleAtribute">Image attributes: </h3>
        <ul>
        {
          data.map(item => (
            <li key={item.faceId}>
              <span>
                Gender: {item.faceAttributes.gender}, age: {item.faceAttributes.age}
              </span>
            </li>
          ))
        }
        </ul>
        <img
          src={image}
          width={220}
          height={180}
          alt={image}
        />
        <a
          className="App-link"
          href={image}
          target="_blank"
          rel="noopener noreferrer"
        >
          Link of the image: {image}
        </a>
      </header>
    </div>
  );

In the code above, all we’re doing is adding the input and an unordered list that will render the attributes from the pictured analyzed.

Running the app

At this point you’re now ready to run the app:

# run API
npm run start

# run web app
cd web/face-detect-app
npm run start

Conclusion

In this tutorial, you learned how to use Microsoft Cognitive Services to create a face recognition app that uses facial recognition to identify people.

React Navigation - Getting started!

David Ruiz — Sun, 07 Jul 2019 21:44:40 +0000

In this article, we are going to understand the basic concepts of this popular library and how to make your React Native apps more scalable with navigation.

The resources of this tutorial are available on my GitHub repository. Feel free to fork it and try on your own.🚀

Index

What is React Navigation?
Hello World with React Navigation
Where go from here

What is React Navigation?

React Navigation is a library that was born from the need to creating navigations into our React Native apps. As we know in mobile environments there are a lot of ways to navigate into different views, and we can choose what kind of navigation or animation we are going to need. As native platforms do.

This JavaScript-based navigation library uses native drivers for fluid transitions. Also, React Navigation adopts this approach that avoids any required knowledge in Objective C, Swift, Java, Kotlin, allowing you to focus more on the app experience.

Hello World with React Navigation

In this section, we are going to create a very simple Hello World app on React Native with the purpose of learning how to use React Navigation in a simpler way.

Before to start let's init a React Native project using the React Native CLI.

react-native init easyReactNavigation

Inside of the project that was created it's time to install the React Navigation into our package.json file.

npm install -S react-navigation

# Then install the gesture handler.
npm install -S react-native-gesture-handler

# Link the native dependencies.
react-native link react-native-gesture-handler

Next, configure a basic root component using React Navigation. To make it real, you need to import the createStackNavigator which is a function that returns a React Component in this case, the class App, where is exported directly from the App.js.

import { createStackNavigator, createAppContainer } from 'react-navigation'

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Navigation!</Text>
      </View>
    )
  }
}
// Create Stack Navigator gets two props createStackNavigator(routes, config)
const AppNavigator = createStackNavigator({
  Home: App
})
// Container of the app
const AppContainer = createAppContainer(AppNavigator)
export default AppContainer

Run this code and you are going to get a very nice view with a greeting text in the middle of the screen. But, with a little difference, as you can see there is a header. This header is provided by default from the Stack Navigator.

Navigating through views

To create a new view in React Navigation is just that simple like create a new React component with the content. In this exercise, we create a class component with just a simple and flat text in the middle of the screen.

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!🤓</Text>
      </View>
    )
  }
}

In the Home view let's do a button which has an event that is going to redirect to a new view. For this, let's create a method for onPress event which is in charge to use the navigation props to go to the new view.

class App extends React.Component {
  // On Press event 
  onPress = () => {
    // Navigate to the HelloWorld view
    this.props.navigation.navigate('HelloWorld')
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Welcome to React Navigation!</Text>
        <Button 
          title="Tap me 😄"
          onPress={this.onPress}
        />
      </View>
    )
  }
}

Don't forget to import the new view into the Stack Navigator.

const AppNavigator = createStackNavigator({
  Home: App,
  HelloWorld
})

The Stack Navigator provides a transition between screens were each new screen is placed on the top of the stack and it works exactly like a call stack.

Finally, here's the final result! 🎉

Where go from here

This article was just a simple started into the huge library that is React Navigation. You can take a pretty cool look to the official documentation. Also, you can follow me here on dev.to as well as on Instagram and Twitter!