Blog Post

Educator Developer Blog
3 MIN READ

Build an AI Powered Image App – Microsoft Learn Challenge

renee-noble's avatar
renee-noble
Icon for Microsoft rankMicrosoft
Dec 12, 2023

A new Microsoft Learn challenge module just dropped and it’s a perfect bite-sized project to get a taste for the latest AI technology and how you can start using it in fun and fast ways. Read on to find out what skills you’ll get to showcase and what you need to get started.

 

This module, Challenge project - Add image analysis and generation capabilities to your application, gives you the stepping stones to bring skills you’ve learn before together into one project. In this challenge you will combine different AI image technology while deploying it to a web app, resulting in a great demo project to show off your skills in an image analysing and image generating website.

 
 

 

The challenge lays out the steps you’ll need to work through to build a web app that has two different AI functions.

  1. Analyse existing images to describe what is shown in a picture, using computer vision with the Azure AI Vision Service.
  2. Use generative AI to create a new image from a user’s prompt with the Azure OpenAI Service using DALL-E.

I won’t give away too many tips for completing the challenge here (because our Learn Challenge modules are designed so you can put your skills to the test!), but if you do want more help, you can check out the video at the end of this blog that shows you how to do each step of the project. Read on to find out what skills you’ll get to build on and what you need to get started.

 

 

What skills will you flex with this Learn challenge?

 

1. Teach computers to see with Computer Vision

By leveraging the Analyze endpoint in the Computer Vision API you’ll be able to generate captions for images, based on Azure AI Services’ pre-trained models. Play around and tweak the query parameters too! For example, you can customize the descriptions you generate to be in your local language. Bring this AI image-describing technology to your web app by polling the API straight from the front end with JavaScript or the frontend framework of your choice.

 

2. Harness the power of Generative AI for image generation

Get familiar with the Azure AI Studio and learn how to utilise the DALL-E endpoint. See how you can easily test out the endpoint to create AI generated images from prompts, then add easy-to-use image generation capabilities to your web app, hitting the Azure OpenAI service endpoint with the user’s textual input and displaying the returned generated image.

 

3. Show it off with Azure Static Web Apps

Show off your multi-cloud project by leveraging Azure Static Web Apps and GitHub to deploy your AI-powered project together and share it with the world. This is also a great time to show some core development skills for the front end, as well as practice building safely by using Azure Key Vault to store your secret keys securely.

You’ll have a portfolio-worthy AI-powered web app that you can show of to your friends, or in your next job application!

 

What do I need to get started?

To do this module you’ll need access to a few things:

 

 

If you’ve got all of that set up, you’re ready to give Challenge project - Add image analysis and generation capabilities to your application a go!

 

Are you a student? Get access to an Azure subscription for free with Azure for Students!

 

Want a little more help?

If you’re new to AI, creating web apps, or using APIs and you want a little more help, watch this video where Ivana Tilca, Microsft MVP, and Rachel Irabor, Microsoft Learn Student Ambassador, show off all the steps and code needed to create a working web app.

 

 

Updated Dec 08, 2023
Version 1.0
No CommentsBe the first to comment