ovidoo/image-description

React (create-react-app) to analyze visual assets (images) with Azure Cognitive services.

page_type	languages	products	name	description
sample	javascript	azure azure-computer-vision azure-app-service-static vs-code	JavaScript end-to-end client analyze image with Cognitive Services	Locally build and deploy a client application to an Azure Static Web App with a GitHub action, analyze image with Cognitive Services Computer Vision.

Build and deploy a Static Web app to Azure

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

• Read Tutorial
• Create Azure resources
  • Static web app
  • Cognitive Services' Computer Vision

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

• Node.js and npm - installed to your local machine.

• Visual Studio Code - installed to your local machine.

  • Azure Static Web Apps (Preview) - used to deploy React app to Azure Static Web app.

• Git - used to push to GitHub - which activates the GitHub action.

• GitHub account - to fork and push to a repo

• Use Azure Cloud Shell using the bash environment.

  

• If you prefer, install the Azure CLI to run CLI reference commands.

  • If you're using a local install, sign in with Azure CLI by using the az login command. To finish the authentication process, follow the steps displayed in your terminal. See Sign in with Azure CLI for additional sign-in options.
  • When you're prompted, install Azure CLI extensions on first use. For more information about extensions, see Use extensions with Azure CLI.
  • Run az version to find the version and dependent libraries that are installed. To upgrade to the latest version, run az upgrade.