Build an AI-enabled closet organization app with Power Apps and AI Builder

Published Nov 03 2021 12:00 AM 1,987 Views
Microsoft

Earlier this year, I was moving to a new house and ran into a problem – how did I want to organize my closet? I love fashion, and love to have many options to wear each day, so it was important for me to be able to classify and categorize my items. I also wanted to be able to see all the items in a particular category quickly and easily, so that I could efficiently style my outfits every morning.

 

In this four-part series, I’ll show you how I built a closet organization app that uses Artificial Intelligence to classify my clothing into the correct category, and display all of the items in one place. If you don’t have any experience with coding or AI, don’t worry – we’ll be working with Power Apps and AI Builder, our low-code/no-code solutions for building apps and infusing them with AI. Let’s get started!

 

Part 1: Introduction to Power Apps

 

What is Power Apps?

Power Apps is a low-code/no-code app development platform that allows you to use data in fun and exciting ways. You can build apps on the web, then share them to other PCs, laptops, tablets, and mobile phones. If you’ve used Microsoft Excel, or another data organizing tool that lets you calculate formulas like SUM, you’ll be right at home in Power Apps.

 

There are three different types of Power Apps: canvas, model-driven, and portals. Canvas apps are great for when you want to build an app from a clean slate. You can customize the screen size and all the functionality for the components you drag and drop into to your app. Model-driven apps are a little more sophisticated, and they build from data stored in Microsoft Dataverse. Portals are for building externally facing websites. In this series, we’ll be working with canvas apps!

 

How do we add AI to Power Apps?

Power Apps gives you a wizard-based interface for building and training AI models, called AI Builder. In the background, Azure Machine Learning and Cognitive Services provide the tools, but all you have to do is take advantage of the ready to use AI components in Power Apps. You don’t need any code or prior knowledge to create your own Machine Learning models. In the next blog post in the series, we’ll train, test, and publish an object detector model that identifies objects from an uploaded image or taken photo, and then provides a count of the number of objects present.

 

How do we get started?

The first thing you’ll need to do to get started making Power Apps is to create a Power Apps Developer account. You can make a free account to create and test your Power Apps with a work or student email.

 

  1. Join the Microsoft 365 Developer Program with your student or work email address. Once you’ve entered your password and signed in, you’ll be prompted to enter your Country/Region, Company, and Language preference. If you’re a student, you can make up your own company, or just put student. You’ll be asked what your primary focus is as a developer, and choose which areas of Microsoft 365 development you’re interested in learning about.
  2. After you’ve joined the Microsoft 365 Developer Program, you’ll need to Set up your E5 subscription. Select Set up E5 subscription on the Microsoft 365 Developer Program home screen, and create a username, domain, and password.

ornelladotcom_0-1635878683936.pngBe sure to remember these credentials, since you’ll have to enter them later. You may be asked to verify your account using a code sent to your phone number. After you verify your account and are taken to a list of your Microsoft 365 developer subscriptions, Select Go to subscription, and sign in with the credentials you just created. If you’re taken to the Office 365 home screen, then your account is set up and ready to go.

ornelladotcom_1-1635878683951.png

 

  1. Next, you’ll need to add a Power Apps dev environment to your account. We’ll set up a Power Apps Developer Plan environment by selecting Existing user? Add a dev environment. Your account should be logged in automatically, and you will have to Choose your country to begin. After you select Accept, you will be taken to your Power Apps environment in the new Microsoft 365 account you’ve created.

ornelladotcom_2-1635878683987.png

 

Now that you’ve gotten your Power Apps account up and running, take some time to explore and get comfortable with the interface. Before we start working on our AI model in the next part of the series, it’s important for you to be able to understand the ins and outs of Power Apps. Get started by completing the Introduction to Power Apps Learn module, as well as the Create a canvas app in Power Apps Learning Path. This bit of homework will help you excel as you follow along with this project.

 

In part 2, we’ll train, test, and publish an AI model that will be able to categorize whether an article of clothing is a top, pants, or a dress. Looking forward to seeing you here next week!

%3CLINGO-SUB%20id%3D%22lingo-sub-2917481%22%20slang%3D%22en-US%22%3EBuild%20an%20AI-enabled%20closet%20organization%20app%20with%20Power%20Apps%20and%20AI%20Builder%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2917481%22%20slang%3D%22en-US%22%3E%3CP%3EEarlier%20this%20year%2C%20I%20was%20moving%20to%20a%20new%20house%20and%20ran%20into%20a%20problem%20%E2%80%93%20how%20did%20I%20want%20to%20organize%20my%20closet%3F%20I%20love%20fashion%2C%20and%20love%20to%20have%20many%20options%20to%20wear%20each%20day%2C%20so%20it%20was%20important%20for%20me%20to%20be%20able%20to%20classify%20and%20categorize%20my%20items.%20I%20also%20wanted%20to%20be%20able%20to%20see%20all%20the%20items%20in%20a%20particular%20category%20quickly%20and%20easily%2C%20so%20that%20I%20could%20efficiently%20style%20my%20outfits%20every%20morning.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20this%20four-part%20series%2C%20I%E2%80%99ll%20show%20you%20how%20I%20built%20a%20closet%20organization%20app%20that%20uses%20Artificial%20Intelligence%20to%20classify%20my%20clothing%20into%20the%20correct%20category%2C%20and%20display%20all%20of%20the%20items%20in%20one%20place.%20If%20you%20don%E2%80%99t%20have%20any%20experience%20with%20coding%20or%20AI%2C%20don%E2%80%99t%20worry%20%E2%80%93%20we%E2%80%99ll%20be%20working%20with%20Power%20Apps%20and%20AI%20Builder%2C%20our%20low-code%2Fno-code%20solutions%20for%20building%20apps%20and%20infusing%20them%20with%20AI.%20Let%E2%80%99s%20get%20started!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EPart%201%3A%20Introduction%20to%20Power%20Apps%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EWhat%20is%20Power%20Apps%3F%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fpowerapps.microsoft.com%2F%3FWT.mc_id%3Dacademic-47125-ornella%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EPower%20Apps%3C%2FA%3E%20is%20a%20low-code%2Fno-code%20app%20development%20platform%20that%20allows%20you%20to%20use%20data%20in%20fun%20and%20exciting%20ways.%20You%20can%20build%20apps%20on%20the%20web%2C%20then%20share%20them%20to%20other%20PCs%2C%20laptops%2C%20tablets%2C%20and%20mobile%20phones.%20If%20you%E2%80%99ve%20used%20Microsoft%20Excel%2C%20or%20another%20data%20organizing%20tool%20that%20lets%20you%20calculate%20formulas%20like%20SUM%2C%20you%E2%80%99ll%20be%20right%20at%20home%20in%20Power%20Apps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThere%20are%20three%20different%20types%20of%20Power%20Apps%3A%20canvas%2C%20model-driven%2C%20and%20portals.%20%3CSTRONG%3ECanvas%20%3C%2FSTRONG%3Eapps%20are%20great%20for%20when%20you%20want%20to%20build%20an%20app%20from%20a%20clean%20slate.%20You%20can%20customize%20the%20screen%20size%20and%20all%20the%20functionality%20for%20the%20components%20you%20drag%20and%20drop%20into%20to%20your%20app.%20%3CSTRONG%3EModel-driven%3C%2FSTRONG%3E%20apps%20are%20a%20little%20more%20sophisticated%2C%20and%20they%20build%20from%20data%20stored%20in%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fpowerapps%2Fmaker%2Fdata-platform%2Fdata-platform-intro%3FWT.mc_id%3Dacademic-47125-ornella%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20Dataverse%3C%2FA%3E.%20%3CSTRONG%3EPortals%3C%2FSTRONG%3E%20are%20for%20building%20externally%20facing%20websites.%20In%20this%20series%2C%20we%E2%80%99ll%20be%20working%20with%20canvas%20apps!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EHow%20do%20we%20add%20AI%20to%20Power%20Apps%3F%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EPower%20Apps%20gives%20you%20a%20wizard-based%20interface%20for%20building%20and%20training%20AI%20models%2C%20called%20AI%20Builder.%20In%20the%20background%2C%20Azure%20Machine%20Learning%20and%20Cognitive%20Services%20provide%20the%20tools%2C%20but%20all%20you%20have%20to%20do%20is%20take%20advantage%20of%20the%20ready%20to%20use%20AI%20components%20in%20Power%20Apps.%20You%20don%E2%80%99t%20need%20any%20code%20or%20prior%20knowledge%20to%20create%20your%20own%20Machine%20Learning%20models.%20In%20the%20next%20blog%20post%20in%20the%20series%2C%20we%E2%80%99ll%20train%2C%20test%2C%20and%20publish%20an%20object%20detector%20model%20that%20identifies%20objects%20from%20an%20uploaded%20image%20or%20taken%20photo%2C%20and%20then%20provides%20a%20count%20of%20the%20number%20of%20objects%20present.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EHow%20do%20we%20get%20started%3F%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3EThe%20first%20thing%20you%E2%80%99ll%20need%20to%20do%20to%20get%20started%20making%20Power%20Apps%20is%20to%20create%20a%20Power%20Apps%20Developer%20account.%20You%20can%20make%20a%20free%20account%20to%20create%20and%20test%20your%20Power%20Apps%20with%20a%20work%20or%20student%20email.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EJoin%20the%20%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Fmicrosoft-365%2Fdev-program%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20365%20Developer%20Program%3C%2FA%3E%20with%20your%20student%20or%20work%20email%20address.%20Once%20you%E2%80%99ve%20entered%20your%20password%20and%20signed%20in%2C%20you%E2%80%99ll%20be%20prompted%20to%20enter%20your%20%3CSTRONG%3ECountry%2FRegion%3C%2FSTRONG%3E%2C%20%3CSTRONG%3ECompany%3C%2FSTRONG%3E%2C%20and%20%3CSTRONG%3ELanguage%20preference%3C%2FSTRONG%3E.%20If%20you%E2%80%99re%20a%20student%2C%20you%20can%20make%20up%20your%20own%20company%2C%20or%20just%20put%20student.%20You%E2%80%99ll%20be%20asked%20what%20your%20primary%20focus%20is%20as%20a%20developer%2C%20and%20choose%20which%20areas%20of%20Microsoft%20365%20development%20you%E2%80%99re%20interested%20in%20learning%20about.%3C%2FLI%3E%0A%3CLI%3EAfter%20you%E2%80%99ve%20joined%20the%20Microsoft%20365%20Developer%20Program%2C%20you%E2%80%99ll%20need%20to%20%3CSTRONG%3ESet%20up%20your%20E5%20subscription%3C%2FSTRONG%3E.%20Select%20%3CSTRONG%3ESet%20up%20E5%20subscription%3C%2FSTRONG%3E%20on%20the%20Microsoft%20365%20Developer%20Program%20home%20screen%2C%20and%20create%20a%20username%2C%20domain%2C%20and%20password.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22ornelladotcom_0-1635878683936.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F323401i89BEB38B38B4482D%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22ornelladotcom_0-1635878683936.png%22%20alt%3D%22ornelladotcom_0-1635878683936.png%22%20%2F%3E%3C%2FSPAN%3EBe%20sure%20to%20remember%20these%20credentials%2C%20since%20you%E2%80%99ll%20have%20to%20enter%20them%20later.%20You%20may%20be%20asked%20to%20verify%20your%20account%20using%20a%20code%20sent%20to%20your%20phone%20number.%20After%20you%20verify%20your%20account%20and%20are%20taken%20to%20a%20list%20of%20your%20Microsoft%20365%20developer%20subscriptions%2C%20Select%20%3CSTRONG%3EGo%20to%20subscription%3C%2FSTRONG%3E%2C%20and%20sign%20in%20with%20the%20credentials%20you%20just%20created.%20If%20you%E2%80%99re%20taken%20to%20the%20Office%20365%20home%20screen%2C%20then%20your%20account%20is%20set%20up%20and%20ready%20to%20go.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22ornelladotcom_1-1635878683951.png%22%20style%3D%22width%3A%20917px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F323402iC6DFF1F81F4F329D%2Fimage-dimensions%2F917x419%3Fv%3Dv2%22%20width%3D%22917%22%20height%3D%22419%22%20role%3D%22button%22%20title%3D%22ornelladotcom_1-1635878683951.png%22%20alt%3D%22ornelladotcom_1-1635878683951.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%20start%3D%223%22%3E%0A%3CLI%3ENext%2C%20you%E2%80%99ll%20need%20to%20add%20a%20Power%20Apps%20dev%20environment%20to%20your%20account.%20We%E2%80%99ll%20set%20up%20a%20%3CA%20href%3D%22https%3A%2F%2Fpowerapps.microsoft.com%2Fdeveloperplan%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPower%20Apps%20Developer%20Plan%3C%2FA%3E%20environment%20by%20selecting%20%3CSTRONG%3EExisting%20user%3F%20Add%20a%20dev%20environment%3C%2FSTRONG%3E.%20Your%20account%20should%20be%20logged%20in%20automatically%2C%20and%20you%20will%20have%20to%20%3CSTRONG%3EChoose%20your%20country%20to%20begin%3C%2FSTRONG%3E.%20After%20you%20select%20%3CSTRONG%3EAccept%3C%2FSTRONG%3E%2C%20you%20will%20be%20taken%20to%20your%20Power%20Apps%20environment%20in%20the%20new%20Microsoft%20365%20account%20you%E2%80%99ve%20created.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22ornelladotcom_2-1635878683987.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F323403iDF6B79392C91FE7B%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22ornelladotcom_2-1635878683987.png%22%20alt%3D%22ornelladotcom_2-1635878683987.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20that%20you%E2%80%99ve%20gotten%20your%20Power%20Apps%20account%20up%20and%20running%2C%20take%20some%20time%20to%20explore%20and%20get%20comfortable%20with%20the%20interface.%20Before%20we%20start%20working%20on%20our%20AI%20model%20in%20the%20next%20part%20of%20the%20series%2C%20it%E2%80%99s%20important%20for%20you%20to%20be%20able%20to%20understand%20the%20ins%20and%20outs%20of%20Power%20Apps.%20Get%20started%20by%20completing%20the%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fintroduction-power-apps%2F%3FWT.mc_id%3Dacademic-47125-ornella%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EIntroduction%20to%20Power%20Apps%20Learn%20module%3C%2FA%3E%2C%20as%20well%20as%20the%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fpaths%2Fcreate-powerapps%2F%3FWT.mc_id%3Dacademic-47125-ornella%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ECreate%20a%20canvas%20app%20in%20Power%20Apps%20Learning%20Path%3C%2FA%3E.%20This%20bit%20of%20homework%20will%20help%20you%20excel%20as%20you%20follow%20along%20with%20this%20project.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20part%202%2C%20we%E2%80%99ll%20train%2C%20test%2C%20and%20publish%20an%20AI%20model%20that%20will%20be%20able%20to%20categorize%20whether%20an%20article%20of%20clothing%20is%20a%20top%2C%20pants%2C%20or%20a%20dress.%20Looking%20forward%20to%20seeing%20you%20here%20next%20week!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2917481%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20four-part%20series%2C%20I%E2%80%99ll%20show%20you%20how%20I%20built%20a%20closet%20organization%20app%20that%20uses%20Artificial%20Intelligence%20to%20classify%20my%20clothing%20into%20the%20correct%20category%2C%20and%20display%20all%20of%20the%20items%20in%20one%20place.%20If%20you%20don%E2%80%99t%20have%20any%20experience%20with%20coding%20or%20AI%2C%20don%E2%80%99t%20worry%20%E2%80%93%20we%E2%80%99ll%20be%20working%20with%20Power%20Apps%20and%20AI%20Builder%2C%20our%20low-code%2Fno-code%20solutions%20for%20building%20apps%20and%20infusing%20them%20with%20AI.%20Let%E2%80%99s%20get%20started!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Organize%20your%20closet%20with%20AI.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F323400i98AF70AE3CDE93BC%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Organize%20your%20closet%20with%20AI.png%22%20alt%3D%22Organize%20your%20closet%20with%20AI.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2917481%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eartificial%20intelligence%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Ebeginner%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPower%20Apps%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ETutorial%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Nov 02 2021 12:21 PM
Updated by: