Learn Azure OpenAI - Build a Simple AI powered App

hey everyone it's Alex here at the code wolf again and we've got a great topic for today we're actually going to take a look at how to build applications that connect to Azure open AI directly now this will be the first video in the open AI Series where we actually see how to write code that connects to this service rather than just using it through a UI or something like that so let's take a quick look at what we'll be building and discuss a few simple prerequisites and then Dive Right In and start coding [Music] thank you so let's take a really quick look at what we'll be building in this video and we're going to be looking more at this app later after we finish building it but just as a quick preview this is a story generator so you can enter in different values for different aspects of the story and it'll print out like an auto-generated or instantly created story using Azure open AI so if I were to call this the best story ever and it's about a character named Bob and the tone is happy and Bob is just a human for a person and the environment let's say that it takes place at an amusement park or something like that when I hit submit this is going to go out to Azure open AI service and it's actually going to generate a story for US based on this criteria and this can take a moment as it's thinking but that should pop in for a moment and you can see if you start to read through this it is relevant to the values we entered here and we're going to look at a couple more examples after we build this so let's jump right into it now as far as prerequisites go I'm going to be writing this app in.net so if you want to follow along from a coding perspective I would recommend having at least basic experience with that Tech stack if you'd prefer to use a different language open AI does support other languages like Python and most of the concepts here should carry over but you'll kind of be on your own with the actual coding I'd also recommend that you have at least very basic experience with Azure understanding how services are sort of structured and some general ideas about connecting to them but we will go through this step by step so you don't need to know too much has a couple quick side notes I've also time stamped the video so if you're just interested in the AI portion such as setting things up in Azure and connecting on the back end you can find those using the times below I'll also include a link to a GitHub repo in the description so you can just look at the completed code if you'd prefer to do that all right so let's start by creating our resources in Azure first now I'm going to go through this part a little bit quickly because I have a dedicated getting started video that goes through the open AI service pretty extensively here in the portal and in Azure AI studio so we're just going to focus on creating these resources and looking at a couple Concepts that will be important for wiring up our apps so you can either search for openai in the search bar at the top or you can click on the home page here if you have it listed and from here just like any other Azure resource I'm going to click create and on this next page if your subscription gives you this warning down at the bottom but currently at the time of this recording you actually have to request access to Azure open AI service so you can click that here I don't know the exact criteria to get approved but I was able to get approved so I'll choose the subscription that that's assigned to since it is on a per subscription basis and then we can create a new Resource Group let's call this code wolf AI demos and click ok and different regions support different models but I know East US is pretty good for the AI models pretty well supported so we'll leave that and I'll just call this code wolf AI demo and then down here right now there's only one pricing tier available so I'll choose that and click next and on the network tab or we can just leave this all as is we're not going to get too deep into networking right now and then we can just ignore the tags page since we don't need any tags Azure will take a moment to validate this and then just click create this actually runs fairly quickly but I'm just going to pause this while the deployment finishes and from here this should look pretty similar to any other Azure service so over here we've got some networking and identity settings and general configurations and further down we have monitoring the part that I want to focus on first is the keys and endpoint so these will be used to actually connect our app that will write to this Azure service we're just going to be using key authentication here and this will give you kind of an end point to hit that so we'll look at that more in a moment but the most important right part right now is this models deployment and this is the part that's managed over in Azure AI studio so let's click this button to jump over there and over here we're going to want to deploy a model so you can see that there's this deployments page and again I go over this more in my other video but this essentially allows you to deploy a trained AI model and it gives you different AI models to pick from so I'm just going to choose gpt35 and this one excels at sort of chat conversations or generative capabilities which is what we're going to need for our app so that'll work well and I'll just call this turbo wolf 35. and say create and that will finish pretty quickly in the portal here but if you actually go to use it you might get a warning if you try to access it right away that says you have to wait a while that's usually about five minutes so while we're setting up other things that'll be plenty of time for this to get going but just note that if you try to chat with it immediately or something you might get that message so that basically completes the setup for our Azure resources so now let's see how to get our project set up that we'll be coding with all right so with our Azure resources created next let's set up the coding project that we'll be working with and again we'll be using.net for this video but conceptually the same Concepts will apply to other languages so if you want to use python or something like that feel free there are SDK packages for the other languages as well so I'm going to switch over to visual studio for now and let's just go up to file new project and let's choose an asp.net core web app and click next and I'm just going to save this into an appropriate folder here but you can save it wherever you'd like and let's just call this story generator and click next and I'm going to be using.net 7 for this I would recommend being on.net 6 or higher for this video and seven if you can just to match what I'm doing and so let's click create and give Visual Studio a moment to generate that project for us and so once that's in place let's actually just run the app and make sure that this is working as expected and this will give us a sense of where we're going to be starting from and there's our default asp.net core app and we're ready to start building we're going to take a look at creating the UI first and then after that we'll see how to connect to Azure open Ai and start adding functionality okay so back in Visual Studio let's start building our UI and I actually want to start by creating the view model for our form page that we'll be filling out that we looked at in the beginning so let's start by adding a new folder and let's just name this folder models and then we can go ahead and add a new class and I'm just going to call this story details remember this is going to populate from our UI to show which options that the user plugged in or what values they typed in so let's go ahead and add that and once Visual Studio creates that I'll just zoom in a little bit here and let's start adding our properties so we can say public string title and let's also add a tone so this will be kind of the tone of the story whether it's excited or happy or sad or something like that then we can also add a name and this will be the name of our character and we could say creature so this will be kind of whatever the main character is whether that's an animal or a person or a monster or whatever you want and finally let's say environment which is where the story will take place so once that's in place if we expand our Pages directory this is where all of our Razer pages are and where we can start adding code and functionality in particular we are interested in this index page for right now so let's actually start by opening up the code behind file for it first and inside of here I just want to add a public property for our new story details because this is what's going to be bound to from our UI when we submit that form so we can call this details and to make sure this binds we're going to say bind property now there are other ways that you can bind and raise your pages but this is kind of one of the most straightforward so I'll just add that and then while we're here let's also add our on post method which is where our form will actually submit to and just so we have a line of code in here to put a breakpoint on or something I'll just say a test line of code there and then with all of that in place let's switch over to our index.cshml and this is where we can start building out our UI now UI is obviously not really the focus about this we're concerned with AI so I'm just going to create kind of the simplest UI possible here so we can just say welcome to the story generator and let's add a little more bootstrap structure around this so we can give this a row and a column and if you're not familiar with bootstrap don't worry it's included with the project template by default here so for example if we go into our layout you can see all this bootstrap stuff is included so as long as your code kind of lines up here that should all just work if you don't want to use bootstrap you can just kind of ignore this extra styling and markup here and we can also just get rid of this extra div so now we just have a very basic row and column and then let's add another row and this will be where the majority of our UI lives so we can say class equals column again and if you haven't used bootstrap in a while these classes have kind of changed over time but this is just kind of an easy setup so I'm trying to keep things simple here and now let's actually start creating the form that the user will submit and so we can create our form element and we can use the ASP page attribute to specify that this form will submit to the index page and I think you can actually leave this off I think it's optional if you're posting to the same page to the same code behind of the page that you're working in so like since we're in the index file that we'll just post to the index code behind but I like to add this to be detailed or obvious and then let's start building out our form here so let's create form group and this is also just bootstrap but it makes things look nicer and let's add a label and this is going to be for the title so we'll say title and then inside of here we can just say title this will be the title of the story and then let's create a text input and we can use the asp4 attribute and inside of here we can say model dot details dot title so remember this is that model that we just created remember we have a title property here and we added this as a property in our code behind so now we can access the properties of this to bind our form to them and we can also just optionally add a form control here as well and then we can just copy this and start adding in the rest of our properties so we can change this to name remember our character of a name and update these values of course we can also include the tone and make sure to update the label or both values on the label here of course and then we can say creature so remember this is the type of creature and finally the environment so where our story will take place so let's pop that in there and now we can add our submit button so that'll be down at the bottom and of course a couple more bootstrap classes for styling and there we have it we have our nice little form here but right now we only have one column so this will be the form itself but remember we also need a place to actually display the generated story so inside of this same row let's add another column and just give this an H2 and we'll say model dot details dot title so whatever they name the story that'll get submitted and bound to our model and then displayed here so this part won't really have anything to do with the AI generation but we still want to just display the title of the story above the content and then here we're actually going to have our story content but this doesn't exist yet we're going to add this later this should be good for now but just to make sure this is displaying correctly I'm just going to add a little paragraph tag so that when when we run it we can check that the formatting is correct so a couple things here inside of our on post let's set a breakpoint so that we'll be able to check that our details here are binding with our bind property and then let's run the app to make sure this is working now when we run the app you might actually get this error I missed something here so we're trying to access the title on the details model but this hasn't actually been created yet details is null so if you run into that you can just pause this and we can just set this to an empty object and that should eliminate the null we still won't have a title but the object itself will have a value and there's our UI so we've got a nice little form a submit button and then our temporary text over here on the right and so with all this in place now we can start actually building out the back end functionality of this and see how to start connecting this to Azure so back in Azure let's kind of recap what we're trying to accomplish here if you remember we created this open AI service earlier and then we deployed a model which we can view over in the AI Studio here so remember we created deployment using the gpt35 turbo model and what this deployment does is basically acts as like an interface or an API into that pre-trained model and we want to connect to it through the Azure openai service and the easiest way to do that is to just use these keys and endpoints so these are like secure access Keys combined with this endpoint our code can reach out to the service and connect to it now there are other ways of connecting to this service this is kind of the easiest most straightforward not necessarily the recommended way of doing it but for a demo like this it's a great option and remember this is all secure stuff so I'll be deleting this after the video and never share your keys with anyone but for now let's switch back over to visual studio and let's create a couple variables to handle these data points so we can say VAR key and set that as an empty string and our endpoint and finally our deployment and then if we switch back to Azure let's grab our key and put that here and then let's grab our endpoint and finally our deployment was called turbo wolf 35. let's grab that and remember do not share and then delete or reset them if you have shared them and so now that we have these values let's start to actually connect out to that service now if you've worked with Azure before most services in Azure use something called a service client to connect to them and a service client is basically just a c-sharp class that sort of like manages communication and manages uh trips back and forth to Azure so you might have a blob service client for blab storage or a secret client for key Vault things like that now for open AI of course there is an open AI client but right now Visual Studio doesn't recognize that and that's because we have to add a nuget package and this package is actually still in pre-release but it's going to be the dot net ad package azure.ai dot open AI package and you can just add the pre-release flag onto that to make sure that pulls through and it looks like I just need to go down into the right directory here and then run this command again and you'll see that gets added to our project and you can always verify that by looking at the dependencies here so there's our our open AI package and so now in our class we should be able to bring in the azure.ai dot open AI namespace and you can see now our class lights up correctly and we'll be able to work with it just like any other class or any other service client in azure so let's call this client or even better let's call this AI client and the Constructor for this there's actually six of them but let's use the one that accepts a endpoint and a key credential because you can see those are two values that we have up here so first let's pass in our endpoint but this actually wants it in URI format so we can just say new URI and then let's also create an Azure key credential and pass in our key and so that'll set up our AI client for us properly and now we can use this to talk to our service that we created and the next thing that we want to do is send a prompt to that service and a prompt will ask the open AI service for a completion so the way this works is we send over some sort of block of text and the open AI will interpret that as a series of tokens so that gets processed as either words or pieces of words that gets broken down into tokens and then it runs it through its pre-trained model and generates something that's called a completion which is essentially what it thinks is statistically the best response for that prompt or what it thinks that you would want back this is a huge oversimplification but we're not going to get too deep into how AI models work right now we're just trying to get connected to our service let's create a new variable called prompt and remember this is the prompt that will generate our story for us so we want part of this to be kind of pre-canned or kind of set up ahead of time and then plug in the variables from our UI to create kind of a hybrid response where the user is allowed to customize what comes back but it's still going to be generating a story every time so we can say something like write me a story uh called X so that'll be our title and we can actually just say details.title just add that right now and then we'll say in a details.tone tone this will tell it what kind of mood the story should have and that'll be about a preacher named and I'll just fix these quotes here who lives in a environment so obviously this is a little bit gnarly here in terms of formatting but this gets the idea across so we're essentially prompting the AI service to write a story and so every time it'll come up with a story but the values that the user is passing in from the UI that will determine the uniqueness of the story but this is different than like chat GPT where the user can just write anything and get any response back we're sort of making the app more specific by combining it with these UI parameters and our setup here where the prompt is sort of hard-coded now the way we send this out to our AI client is to use a chat or a chat completion rather so there's a class called chat completion options and I'll just call this chat options so let's create that and then we have this property called messages and it's here that we want to set up our messages that we'll send to the prompt now if you've worked with the AI service at all in AI Studio this might look familiar we essentially want to send messages with a role attached to them and usually the first one that you would send is a system role that kind of tells the AI what type of Bot it is or information about itself almost so that it can generate a better response so we can say chat message and the role will be system so this is the system side of the chat or the AI assistant cell and we can just say you are a helpful AI bot just something sort of neutral or generic since we're just you know writing a story and then we'll have our user message so this is the first message that the user will send to our AI service or essentially the first prompt so we'll create another message here and say user and this time we want to send over our prompt so I can spell this correctly so we're taking our prompt up here that was customized by the UI and sending that to our openai service using a chat message and it will know to respond to that and send us a response back which will be our short story so if we go further down here we can ask for a completion and remember this is the result of the request after the AI service processes it so I'll call this response completion or something similar and then we can use our client remember this is the class or service that talks directly to open Ai and say or AI client rather and say get chat completions and we're going to pass in our deployment so it knows which one to talk to remember you can deploy different models for the openai service and different models excel at different things so you might change which deployment or which model you want to talk to based on what type of prompt it is or what the user is doing but we'll just choose that gpd35 model and then pass in our chat options and then finally we want to take the response back from this and assign it to our UI so we can say chat completions or sorry response completion dot choices and we'll want the First Choice back and get the content off of that the response that comes back from this open AI model you can do a lot of things with it this is a really simple example but you can talk back and forth and kind of store choices or store various messages and options and so this object structure allows for a lot more than what we're doing here right now but this will just give us a good idea of how this works now right now we don't have any way to display our story in the UI you can see this is kind of just sitting here so let's go up here and below our details let's create another string property here called story content so this will actually be the story itself and then further down we can assign that story content to our response content so just to recap we're setting up some important data points we're creating our AI client that will actually go out and talk to Azure we wrote Our prompt that will tell it to generate a story but using the parameters passed in from the UI that the user provided and then we piece together some messages so we tell the chat AI assistant that they're a helpful AI bot so they're sort of a neutral bot and then we send our prompt that will be processed by the AI assistant and then we get our completion back from the service and finally assign that to a UI property to display now the last thing we need to do is actually display that in our UI so inside of our paragraph here instead of temporary text we can say model dot story content and that will print out the story in our UI so if we did everything correctly here this should just work so let's run the app and test this out so on our homepage let's try filling out this form and seeing what it gives us so if I were to give this a title of something like crazy Critters and say that this is about a character named Larry with an excited tone and maybe Larry is a squirrel and he lives in a Magic Forest well now when we hit submit this is going to make a request out to Azure open AI to actually write a story using these parameters since that's what we asked for in our completion now this can take a second because the AI is crunching but it's usually pretty quick and you can see that already came back so so it's already talking about Magic Forest a squirrel named Larry and all kinds of excitement and good things and what's great about this is that we can just change the values and instantly get a new story so I could call this a cold night and say that the character's name is Kevin and that it's a scary tone and he's a polar bear and he lives at the North Pole something like that I don't know but I just submitted another request and now Azure open AI is going to Crunch through this and come up with another story it's really that simple so let's see what it comes up with here after a moment and sure enough it was a cold Dark Night in the North Pole that was very eerie some of these stories aren't as bad as you might think they would be some of them are actually kind of good um but go ahead and play around with this now obviously you could add a lot of controls over this so you could add drop downs rather than free text you could add character limits or more data enforcement to make sure that they don't just enter anything in here but hopefully this gives a good idea of how you can use parameters from a UI combined with AI to produce a more deterministic result so you might build an app that generates cover letters or emails Azure open AI can do a lot more than what we've done here in terms of controlling what responses come back and forth for example you could have follow-up messages or full chat experiences you could even generate images with this which is something we might look at later but hopefully this gives you a good idea of all the things that openai can do and I encourage you to go further with this now of course in upcoming videos I'm going to start covering how to build more complex scenarios so looking at more realistic or additional things you can do with this service but hopefully this serves as a nice introduction to building a simple little app with Azure open AI thanks so much for watching I hope you enjoyed this please hit subscribe to support the channel and I'll see you next time right here at the code wolf

Channel: The Code Wolf

Views: 899

Keywords: Azure AI, Azure OpenAI, AI Powered App, Build Azure AI App, Build AI App, Build Azure OpenAI App

Id: HzgqgA2qv-I

Length: 29min 57sec (1797 seconds)

Published: Fri Aug 04 2023