Learn how to do Image Recognition with Cognitive Services and ASP.NET
With all the talk about artificial intelligence (AI) and machine learning (ML) doing crazy things, it’s easy to be left wondering, “what are practical ways I can use this today?” It turns out there are some extremely easy ways to try this today. In this post, I’ll walk through how to detect faces, gender, ages, and hair color in photos, by adding only a few lines of code to an ASP.NET app. Images will be uploaded and shown in an image gallery built with ASP.NET, images will be hosted in Azure Storage, and Azure Cognitive Services will be used to analyze the images. The full application is available on GitHub. To begin, clone the repository on your machine.
What we’ll build Here’s what the recognized photos can look like when displayed in a web browser. Note how the image and metadata generated by Azure Cognitive Services is displayed alongside it.
Set up prerequisites with Visual Studio and Azure To begin, make sure you’ve installed Visual Studio 2017 with the ASP.NET and web workload. This will provide everything you need to build and run the app yourself. Next, set up the Azure prerequisites. First, ensure you have an Azure account. If not, you can sign up for an
Azure free account, which will give you a $200 credit towards anything. Next, create a Storage account, through the Azure Portal: You’ll need to create the Storage resource: 
After creating the resource, you’ll need to create the storage account for your resource with the default settings: 
Finally, create a Cognitive Services resource through the Azure portal: 
Once you’ve set that up, you’re ready to start hacking away at the sample app!
Explore the codebase Open the project in Visual Studio 2017 if you haven’t already. The application is an ASP.NET MVC app. It does three major things: The first major operation is uploading an image to Azure Blob storage, analyzing the image using Azure Cognitive Services, and uploading image metadata generated from Cognitive Services back to Blob Storage.
The second major operation is to snag images and their associated metadata from Blob Storage. The UI simply wires up these images to a page with an upload button.
Add your API keys Modify the Web.config file to include your Cognitive Services URL and Cognitive Services API key. Look for this file:
Your Cognitive Services URL and API keys can be found in the dashboard for your Cognitive Services resource in the Azure Portal here: 
The connection strings for your Azure Storage resource can be found in the Azure Portal under Access Keys: 
Once you have entered your information in your Web.Config file, you’ll be good to go! To learn more about how to best work with keys and other information in a development, see Best Practices for Deploying Passwords and other Sensitive Data to ASP.NET and Azure.
Run the application and add some images Now that everything is set up and configuration has been set up locally, you can run the application on your machine! Press
F5 to debug and see how everything works. I recommend that you set a breakpoint in the Upload controller action (HomeController.cs, line 32), so that you can step through each operation as you upload a new image. In the opened browser, upload an image to see what happens! If you want to see images show up in Azure blobs when running the app, you can do so with Cloud Explorer (View -> Cloud Explorer). You may need to log in first, but after that, you can navigate to your created Storage Account and see all of your Blobs under Blob Containers: 
In this example, I’ve uploaded three images to my container called “images”. The web app also uploaded a json file with image metadata for each image.
Publish to Azure and impress your friends with your use of AI You can publish the entire application to Azure App Service. Right-click on your project and select “Publish”. Next, select App Service and continue. You can create one right in the Visual Studio UI:
Finally, click “Create” and it will create all the Azure resources you need and publish your app! After that process completes (it should take a minute or two), your browser will open with your application running entirely in Azure.
Next steps And that’s it! Try exploring other, interesting things you can do with Cognitive services. Some fun things to try, without needing to add support for any services or read other tutorials:
- Modify the web app to replace someone’s face with an emoji that matches their measured emotion (try the System.Drawing API!)
- Group faces by similarity, age, or if they have makeup on
-
Try it out on pictures of animals instead of humans Additionally, check out these tutorials to learn more about what you can do with .NET and Cognitive Services:
-
Analyze images and do classification on built-in or custom models in C#
- Check out the “cat moderator” sample app that uses .NET and Azure Functions
- Moderate content input on your ASP.NET site Cheers, and happy coding!
Light
Dark
0 comments