JavaScript end-to-end client analyze image with Cognitive Services

In this tutorial, locally build and deploy a React/TypeScript client application to an Azure Static Web App with a GitHub action.

Features

The React (create-react-app) provides the following functionality:

  • Display message if Azure key and endpoint for Cognitive Services Computer Vision isn't found
  • Allows you to analyze an image with Cognitive Services Computer Vision
    • Enter a public image URL or analyze image from collection
    • When analysis is complete
      • Display image
      • Display Computer Vision JSON results

The GitHub action starts when a push to a specific branch happens:

  • Inserts GitHub secrets for Computer Vision key and endpoint into build
  • Builds the React (create-react-app) client
  • Moves the resulting files to your Azure Static Web app resource

Prerequisites