Building intelligent applications with Blazor and Open AI Service | .NET Conf 2023 Student Zone

[Music] hello everyone welcome to my session today I'm going to run this session about building an intelligent application with blaza and as well open AI service my name is Justin from Microsoft as a senior Cloud Advocate these are my social media handles so you can visit my GitHub profile to get my uh many simple code right because this session is all about Blazer some of you have already get familiar with what the Blazer is but the rest of you might not be familiar with blazer so what is bler it's basically a feature of asp.net web framework so with this bler we buil a web UI application the most important thing is that is written in C so bler we use bler in C instead of JavaScript that sounds very interesting doesn't it because we mostly use JavaScript for the front end application development but now we can use C for both front end and back end because of this Blazer so why should we consider Blazer for our web application development as I just mentioned earlier there has already been JavaScript ecosystem for the front-end application development however what if your organization has only theet developers and you are asked to build a new web application but has limited resources like time or um the people to learn a new language such as JavaScript because of the Blazer you are now able to do the full St development in C right um Blazer started in D core 3 and we are going to release theet 8 and we are going to use theet 8 in this session so Blazer has some remarkable changes in D 8 until d 7 we have two mode which is sub mode and client mode client mode is also known as web assembly now in datet 8 we have introduced a new one which is called streaming mode it's a similar to SSR which stand for sub side lendering therefore developers have more choices than before right I have talked too much let's build the um this application I'm going to use Blazer server mode because it's the default option but the basic idea is the same for the other mode as well like client mode or streaming mode so you can choose either options and this is the sample code repository you can start from here which is aka.ms NETCOM 23/ student repo SL Blazer or take this QR code this is the basic application architecture we are building a Blazer web application to summarize a YouTube video using a open AI service first of all we get the subtype from a YouTube video link then ask as open AI service to summarize it okay so are you ready let's do it now we have we done conference students Z repo so I'm going to start from here by clicking creating the code keub code space instance here like that so you can simply create the plus button to create a new one or I just um created a new one uh so I'm going to use this one so which is this one right so we have um get the code space I'm here with the p space now we have um the the director name named 2023 on the here we have web track directory on the bler directory So within bler directory I'm going to create a new directory called live here and uh move on to the live now so in here nothing see here now what we are going to do now is to create um the Blazer application but because before doing so we need to like um the uh the put strap um the like tid up a few things so let's create that net new oops no now we have created kit ignore file in here okay now uh net new um editor config which is like uh uh like a sty cup kind of things it um gives us like the a lot a lot of The Styling stuff and also uh net new Global Json file so what the global Json file does is that it actually shows like this so we are using ISS we are using datet 8 So currently um I'm using datet 8 rc2 so we it um shows it says okay this application will be using tet 8 rc2 right but once you it is GA then it will be using like a version. net uh version 8.0 or something like that okay now so we have all the old the things ready now we are going to create a solution file that net new solution name uh you YouTube summarizer and it will create YouTube summarizer okay so we have YouTube summarizer solution file now I'm going to create uh the Blazer application project net new um before starting like um let's take out check out the um the list of um what we can do here so there are bunch of um the Blazer related the project here uh so when you see that bler server and bler wasm these are from the Tet 7 stage but from tet 8 we are using this Blazer this Blazer has the Consolidated all sub mode and client mode and the streaming mode as well so so how can we choose um soet new laser then let's see I'm the what the options what the other options are available so when we choose and the new bler then we can choose like an interactivity mode which is called sub mode or web assembly mode or auto mode right so auto mode is basically what we are going to use um no I mean what the the streaming stream stream rendering mode so we are as a default sub mode is a default one so uh we are going to use sub for now and also this one is um the the one so this is um the interactive we are setting the interactive mode right so that can be applied to individual the pages or component or is a globally applied so we are going to globally apply this interactive mode for now so I'm going to um use this command um theet new blazer with uh the application name and sub mode is interactive mode sub mode and um the all the globally um the enable the all interactive mode now this then if I create this then we have um this the uh Blazer sub application here now I'm going to add this uh the Blazer application project into the solution now so all done so the net restore the net build so let's add um let's build this application which is good now application is all build now and let's open the solution Explorer and here we we have the solution file now so we we open the solution file here and click click the debug button then we can see um the application on uh the how it is running as a debug mode here so let's click the start new instance and it will start um the running on get the code space and it will open a new tab with um the Blazer application see how it's going now application is running so which is great right so this is some what we are expecting right so what we are expecting so now we have um this one now what we are going to do application is basically up and running we are going to add a new component uh which is dealing with uh the Youtube uh your YouTube link and summarize with open API open AI right so I'm going to stop it now so where is it okay so we have uh when you see here and you see here component so at um the previously by seven the BL application structure is slightly different from the a as well right so it we everything is in under the component nowaday now in within standard a So within the data ww root file there is only CSS file there only CS CSS file and JavaScript files now what we are going to see here is this one f. razor file so so it is basically the placeholder of the entire HTML um the document so it start from the HTML and it has the head uh sector and it has body sector right and this is one this is the one so route we use it has the random mode it has the random mode of interactive server because we chose server server mode right if it is chosen as web assembly mode client mode and it will be saying like a interactive web assembly or something like that okay and another one is that blazer. web.js file we used to have blazer. server.js or blazer. web assembly. JS file now we have blazer. web.js file because everything is Consolidated Consolidated in one file okay so this is the one and everything in is under the pages so counter which is the counter page and home is the the hom page and the weather is the weather page right so everything is there now we are going to use home page here and here what we are going to do for now is that instead of directly um directly putting everything in this page we we are not doing that we are uh instead that building a component UI component and putting the component here so let's say um YouTube summarizer component so we are going to add this YouTube summarized component but we don't have it yet right so let's create another one so under the component side we create let's create a new directory called the UI and under the UI let's create the razor component and say YouTube summarizer component then it create something like this okay so we have component and it says okay so we use okay now this so now it is using component and this component coming from this one okay so ready comp we are ready to use component but inside here so this part is the HTML which is UI part and this part the code block which is I'm using C code here so within the razor component within the within the razor page we can use both HTML UI part and code part as well now what we can do is here let's um remove everything and then um yeah so when it says it's say Okay use GitHub copilot chck to um the ask what uh the copil G copilot helps me okay so I'm going to add um the the prompt here so what we are going to add here is I'm going to put and the one text input and one drop- down list for the video language and one another uh drop- down list for the summary language and two buttons and finally the one text area to show the result summary result okay so uh it's a RoR component at the following um input controls so I'm just putting the all the The Prompt here to the GitHub compiler to generate the code in uh on my behalf so one uh text input control for YouTube uh link URL one drop down list for video language C selection of English or Korean because I can speak Korean one drop down list for summary uh langage code selection of English or Korean and two buttons for sub summary and C here then one text area for summary result um also add the corresponding code block so this is the prompt that I am asking the GitHub copilot to generate um some code for me cool let's take um enter and wait a few second and we'll see how it's going so let's try so it's I'm the waiting for fetching the response okay something happened and this is the one oh yeah okay so it uses it generate um the HTML Tex for me as well as um the code block as well so I'm going to accept it looks great okay so but the problem here is that okay before going there I'm going to put um the additional container um for the HTML part give plus oops container then put this um all HTML bits into here the reason why I'm doing here is that because um I want to like the give some distinguish uh distinction from other component right basically uh this is some kind of container stuff okay so this is done and the interesting thing is is that it says it's the kopilot assumes that I'm going to use um the service name space and I think um it assumes that in within the service has I YouTube summarizer service interface okay so that's kind of a smart enough so I'm going to use this one so instead of doing I YouTube summarizer service too too long so I'm going to use like this I YouTube service so uh the I YouTube Service uh interface and it is on the I'm going to use YouTube okay here and in the code part here so it has YouTube link video Language summary language oh that's interesting it's already on default value has some the English and summary result as well and it says summarize and it says clear okay and YouTube so I just change the name of the instance to YouTube and it going to summarize okay so it only runs summarize um the method and it passes YouTube link video language and summary language as well okay which is good now the clear means that we are going to um the like the initiate the clear the all the existing values already put in the um controls so um YouTube link uh empty and video language can be English and summary language can be English so even if it's Chang to Korean then it if we click the clear button then it will be returned to the default button a default value as in English now which is good seems to be okay not really okay still have some sort of nothing so okay so we are changing value from the bind value bind value to and bind so that uh the the red underscore it's going away so which is good now everything looks okay except these two thing okay now I'm going to create a folder services here then in here under here going to uh create class called YouTube service then it says YouTube service and we are going to use name use the name space services so which is good now I need help from the pilot as well to create create interface so uh create a new interface of I you to service that has a method of Summer rise okay then it will create something for me okay looks okay okay oh oh oh class has been destroyed okay that's fine um the interface YouTube uh the service and it here has I service and it has where is it where is summarize method so we have already defined interface of summarize but uh this one is different so let's say um string video link string um video language string some other language and this value as a default English and English like this so we have built interface now now let's create another the class for now create a new class of YouTube so this then Implement I you service oops I YouTube service then it will generate the a new class for me okay so it's gone so it's gone interesting it keeps some okay I will copy this file this data and this card and put in here okay so I think that's that's much better so format document now uh so there's not no implementation yet so um throw new not implemented exception like this okay so I'm going to use I'm going to create this one so it has so basically I created um the interface using the copilot and I use I created on YouTube service using G copilot and it actually the the actual implementation has not been started yet but basically this um the razor component can use it right can use um the old the logic here now how can we let this component know um this YouTube service instance because it inject our YouTube service from IOS container but we haven't done yet right so how can we do this so open the program that um the Cs file and we are adding um so we are adding this um the YouTube service um the as a dependency so oh it's already there okay so add scope ibe service okay done so by doing so we are adding YouTube service instance as I YouTube service interface so by doing so it actually knows everything for me now I think it's done okay let's build application and see how it's going now build should be okay okay build is okay now run this application again run debug and start new instance now what we are going to do is that just waiting a few second and it will show like this um the UI that we just created okay so um we change the video language Korean or summary language Korean if I say h uh then let's um the put the um simple YouTube video of the water Blazer inet eight is about and then just put the thing in here then if I CLE click the clear button then then it doesn't work oh interesting okay ah ah here oh okay so there is a break point here so I'm going to um put the then it's gone Okay so something like this okay so everything looks okay now I'm going to put the breakpoint in the summarize button summarize method button then here put everything like this and click the summary button then see how it's going then if I click the summary button it stops into this break point and obviously it will throw an errow because I haven't um the because I haven't implemented anything in here okay okay so and says it says error happens yeah that's what we expected now so looks good so far looks good so far now we need to put them the B logic in here to um get the YouTube uh YouTube the cap subtitles or captions and summarize it through you uh the a openi service now what we are going to do is that um the the first one is that okay first one is oh what is it something like this it it gives me um the the idea for me okay but we don't need um I don't think we don't need um the uh okay wait for this wait for this we have no idea what uh what it does okay but before doing so we need to add two new Gap packages one is one is responsible for taking the subtitles from YouTube video and the other one is for summarizing this and the subtitles in um into the through the AO open AI service so the first one is AO open AI the newa package that's responsible for um the summarizing thing and the other one is um the YouTube subtitles extractor you get package which is third party one so we are if we use um these two thing then we can do of things okay so I'm going to copy um this one and add oops uh okay so where should I go there where should I go where should I go here CD YouTube YouTube web summarizer uh okay now copy so I'm going to add YouTube summarize the YouTube sub subtitles extractor then uh where is it yeah so if I if I open this one the project file and it will add this one YouTube subtitles extractor and another one is um the open AI now I'm going to add open AI but it is currently in preview so I'm going to add another tag pre really pre okay so that it adds um the another one so it adds the but one beta 8 so we use these two um the external nuga packages to handle our the YouTube video and summarize summarization okay so what we are going to do here is that okay it wants um the uh it wants video ID it wants um the video actually it is not video it's not uh it doesn't say instead of saying video it says can get um subtitle okay say get subtitle and get summary so say so let's change this part like this and this is all of uh these are all about um the method so I'm going to create another one another method uh private uh ass sync task string get subtitle and string video ID and string video language say this so in here um what we are going to use here because we have already um the imported two external Yuga packages which is using the open AI as open Ai and um the YouTube subtitles extractor so they are using their own the um implementation so let's create a Constructor uh taking YouTube video and open AI client as paret okay then it will create a Constructor for me okay something like this so it creates a Constructor like this for me okay let's accept it then it has YouTube video it has um open client but instead of using YouTube video I just use I YouTube video I YouTube video and it has YouTube sub subtitles extractor it comes from here and open AI client comes from as open AI so we have um the added these two name spaces to use Okay so in here um it gets YouTube video and it open a client and let's change it to be more um safe like if it's null and it should throw an exception like this and if it is null again then it throws an exception again like this okay so which is great and we are going to use this one so get subtitles so uh by subtitles something like this but doesn't have it why is that so if I click the button and then it says instead of using get subtitles I Sy it uses extract subtitle sing okay and this method Tes the video URL and language code not video ID okay interesting so video URL and video language look like this so that's we are expecting to use this method so instead of using video ID we just simply use video your right and this method actually we don't need a video ID method so inad using this a video link and video language then we are going to return subtitle okay done but it returns it doesn't return string so it says it returns subtitles object so it's subtitle object so so let's see what's in there um okay so subtitle dot says okay content uhuh okay so content is basically content is oh content seems to be the collection of subtitle text right so we are going to choose select in here P text part we are going to choose and this one so we are the method of Select method is um the making this text value is a is an array right so it still has some sort of array meth array value but we want to one string one big string so how can we do this and then aggregate um okay like this what is then in here like this then what does that mean so aggregate means um add like the this B part is appended to the a part right so by doing so so every single um the captions is added up to the previous string with um the Line Feed right so aggregate as a result aggregate value is a string now [Music] Barre is so this is the the extracted all the whole the subtitles so so we are returning aggregated value to the get subtitles okay which is great now we have subtitles now we need to send this subtitle to get summary method okay so let's create another one private a sync pass string get summary string sub Ty string uh summary language okay so this part is um the one this part is the one like this one so it's it's it the G copilot um Su and they suggest me to use this code but within the open AI client it doesn't have summarize of Sy it has get completions of sy so we are going to use the get completion of Sy method and in here uh it Ires deployment ID and check completions options let's say deployment ID and chat compation options look like this all right and then it Returns the summary so we need to identify deployment ID and chat completion options so let's get the deployment Tye so it suggest the G compiler suggest me to get this deployment ID from the environment variable and we'll see how it's going and by chck completion options it says nothing okay new chck completion options okay so what it does is these check completion options comes from the uh SDK of AO open AI now what it does what it the suggest is like this so but we don't know what the because as you can see the red um the underline here so we don't need this part at all we don't need this part at all temperatures and returns U the tokens should be like um because we are summarizing the long text so let's say it number of tokens maximum token is 3,000 now so we have chat completions options and we have deployment ID so what it what it does see deployment ID is that it read from the environment variable so that gives an idea how we can add this deployment ID so we are going to add this um deployment ID in this app. settings file Json okay but doing so we let's add another um the thing in here like let's create uh let's create another folder called configurations and within the configurations let's add uh let's add class of open AI settings and it open AI settings that um add Properties or uh deploy mon ID um as open AI service end point and API key then it will add the properties for me okay like this so it has um open settings deployment ID end point and API API key like this okay so which is great and this is a little bit different so con then we don't need this part at all only we need this part so everything in here and document so we have open AI settings class with deployment ID end point and API key so we are going to use this um the one from the app settings right so we are converting the app settings data into this um this strong typed um the configuration settings and I will add another one um add a new class of PR settings that has properties of um system temperat and um max tokens so it will create um the new class for me like this okay it has system and temperature value which is a float value now so and using next tokens here so we are going to use this open AI settings and prompt settings class to convert existing app settings file into a strongly type one right and this one will be used in here okay so instead of us here so I'm going to put um the open AI settings settings and prompt settings promp settings wow it has everything for me it does everything for me okay interesting so we have Constructors like this so I'm going to create uh private open settings and private property settings okay and it uh open a settings okay settings wow the pilot helps me a lot so we have everything ready now let's change this part so it comes from open AI setting oops open AI settings deployment ID right and it comes from prompt settings next TOS it comes from prompt settings the temperature right now with so this check completion options we need to send some sort of instruction to the um as open AI Service as a prompt right but it doesn't have it yet so let's add uh messages that um new chat message [Music] of chat R of system that prompt from settings system right so we are going to get the system um the system prpt from uh the app settings file and I'm going to add new chat message another one chat oops R system then um I will add um I will additional additional um the system PRP like this so I will add another system Pro like this so this what it does is that this is a transcript to summarize the transcript in five plpoint items in a given language code or language code so in here so I'm going to use summary language like this right so this is the these are two system prompt then finally I'm going to add new chat message Chat Ro of user then subtitles from here so we set the prompt message system prompt message into then finally we ask to something typle okay we ask um the the open a we pass the open AI service with the subtitles to summarize okay so everything looks okay and then once it's done um so summary is basically another string it's um it's basically chck completions type so summary do value do um choices we get the First Choice then message then content that's the word okay the content is the string value of the summary actually the summary result so this is the one so we already add the get summary we we have implemented gu summary we have implemented get subtitles and within the summarize button we call um subtitles first then then we call the GU summary using this subtitle okay and as a return result okay now so we have we have um YouTube video open AI client open AI settings and prompt settings as dependencies we haven't add these dependencies at all yet okay so let's add um this dependencies now so we have YouTube service but this YouTube service instance need four additional dependencies so how can how can we do this okay now uh add a scope instance of YouTube video s i YouTube video Let's see then it as okay it be video which is good then add one add another name space okay so which is good now we need to add open AI client but before doing so let's add two settings um add a single tone instance of open AI settings uh generated from my configuration let's check this okay it will add the single ton instance as a dependency using open AI settings and the type okay it add something very scary one but I don't need um other other things only I I need this part so I'm going to copy this line and just I'm remove it and here add this so what it does is that it add single instance but it doesn't have anything yet so I'm going to um let this um the the application know what the instance is about type what the instance types about so open AI settings then um CP uh provider get service I I configuration then we need to get the section from open AI settings name but I don't think we have a name on in here configuration where is configuration where is my configuration okay so there is no name so uh public okay it has already there so pilot helps me a lot okay like this so we are going to get um this one we say where is it okay so settings name then it has configurations then open settings I think that's it for me so let's build a little bit let's make a little bit the readable here so now we have we have added the singl ton instance of open AI settings right by getting the getting um this open a settings from the I configuration okay now we are going to add another one [Music] to PR settings then and here like this okay so we added two open AI settings and both open AI settings and prompt settings and with this value um we need to add another one open AI client okay so how can we add this one we we can still um add another one like add all C instance or open AI Cent okay let's see what's see how can it does how it does okay so it will add another one okay but it has okay so I think we only need this line okay we only need this line so discard it and add it and actually we don't need this part as well okay so uh open AI client we are going to add open AI client but it doesn't say anything like this it doesn't Okay so let's do a little bit a different trick here let's add this one now so new open AI client uh client is Cent and this view open AI view open AI client actually ask me to um use uh okay okay uh I don't have an idea it want um open client need API key and endpoint ahuh here we go so endo and endo and credential like this but we don't have end point so bar end point is new Ur or uh open AI settings. end point something like this but we don't have open AI settings yet so open AI settings equals P open a settings because we have already um add a single ton instance before um before this open a client so I add I get the open a settings and with this open a settings I get the end point here okay and then by we need credentials then we need as a open AI cred as a key credential is using API key so open AI client is actually requiring this end U endpoint and key credential so we got these two thing right so we have now we can add open AI client so basically we within the YouTube service instance we have YouTube with I YouTube video instance we have have open AI settings instance we have prompt settings instance and we have open AI client settings instance we have everything we need in here right these four things we have already done so we already added all the instances and inside open AI client we also need um the HTTP client so add HTP client as well so everything is injected so this is an iOS container so all required dependencies are ready to use now let's build this application then see how it's going application is been built successfully built now let's run this application see how it's going so it seems to be working fine and looks okay now application is running is it running now oh ah that's right so everything looks okay but we the the last thing we I Haven to addit is here there is no application settings in here yet so open AI we haven't added this one yet prompt we haven't added yet okay so within the prompt uh system Pro we need to put here and uh temperature then we we says 7.3 uh no no no 0.7 and maximum tokens of 3,000 like this okay and open AI in here deployment ID we need and end point we need and API key okay so everything looks okay now so I'm going to put um the the system uh The Prompt here is that okay so I'm going to use this prompt um of I put some here I have already prepared um the thing uh let's let's see let's see oops so it says like this so you are the expert of summarizing long content you are going to summarize the following YouTube uh video transcript in a given language code that means we are kind of setting up the expectation to the other open a service you are going to do this right and this is the first system prompt and the second prompt is make sure that you are summarizing um that transcript into five blue coint or something like that okay so this is the one and we are using um the temperature and Max tokens and also so um I have already created as open AI service instance so I have I have endpoint I have API key and I have deployment ID so I'm going to just copy and paste here but if you don't have it you need to create it first okay so I'm going to use this one so everything looks okay now let's run this application again we'll see how soon because um the after that we have the values we have all the values requir the values okay so let's devop and start new instance again then it will start and application is up and running okay so which is great now I'm going to copy this YouTube url to in here and set the video language and summary language in both um the English and click the summary button here then it will hit the Su this the summarize method button and just push uh the button then it will return something so let's wait a few second then now what we have done is that we create this UI component and we put the um oops uh we put um the business logic here and as a result we get the summarize like this okay so everything works perfectly fine so let's change a little bit so I'm going to change this summary language into Korean so um some so some of you might um understand Korean so let's see um how it's going so if I click the summary button then it should um the summarize this English content into to create so wait um a few seconds now once it is done then um the our expectation is met okay all good so what I've done as I said what I've done is I created the component which is reusable so we can use this component for every other depler one okay oops so dropped ah here okay now we need to wait a few more seconds here then so we created the reusable content reusable component and within there we use GitHub copilot so many times to create um the set um the UI like buttons and text input controls or something like that then after that um we use um okay I'm not sure this is working fine or not okay um oh oh you see it takes more time so it Returns the Korean thing okay so which is great so that's something what we expected right so uh let sum again so we built the reusable component and within the within the razor component we use GitHub copilot a lot to set up the old the UI bits and pieces and including the texting puts and drop down list and text areas whatsoever and we used the profiler chat again A lot of times to um set up the classes and interfaces and all the dependencies right and implementing the business Logics as well something like this so as a result we can um the build this kind of intelligent T using Blazer and as open AI service okay so so this is the end of my demo this is a quick sum up we scaffolded a Blazer web application then we created a reusable razor component then we created a few classes and interfaces for dependency injection and finally we implemented bus logic in there as you saw while we are building this application we used the kab co-pilot a lot quite a lot and it reduces the huge amount of time for writing codes so you can do it by yourself so how can you do it by yourself I'm not the only one running these sessions today because um there are many other sessions available as well as sample code so this is the sample code repository so this is the sample code repos and this is the free cop fundamental certification so you can visit there and you can get the free certification for cop and there are manyet beginner video series here so you can visit there and you will be able to learn a lot of D beginner serieses and most importantly we have D conference this is a student zone for D conference and as well as um the main D conference is happening but most importantly I'd like you to try D A on your machine so you can download.net 8 from this URL a. mset net8 right this is it thanks for watching I'm [Music] Justin

Channel: dotnet

Views: 4,001

Keywords: .NET

Id: AYjDz_SyaFA

Length: 61min 54sec (3714 seconds)

Published: Wed Dec 13 2023