Microsoft 365 Community SharePoint, 15 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API

Description

📺 Integrate AI into your apps very easily. In this 13-minute developer-focused demo, Anoop Tatti suggests you add this Summarize web part (to webpage) that requests summary (of text on page) in 4 languages from OpenAI, results are displayed on page. Code walkthrough - get page text using microsoft.graph.textWebPart, call Azure PS function, construct a prompt… Overview on OpenAI and Azure OpenAI, setting up the API, integrating with SPFx, and use cases. See webpart and Azure functions code, in sample.

This community call demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 15, 2023.

✨ Demo Presenter
• Anoop Tatti (Content and Code) | @anooptells

📖 Supporting materials
• Policies – OpenAI - API data usage policies | https://openai.com/policies/api-data-usage-policies
• Documentation - Data, privacy, and security for Azure OpenAI Service | https://learn.microsoft.com/legal/cognitive-services/openai/data-privacy
• Sample - Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-summarise-page-content

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform Community - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

Foreign, so this presentation is about using opening AI API in spfx projects. My name is Sanuk I'm, an MVP developer at candidate cloud based in the UK, and those are my those are the links to my social profiles. So you can follow me on those platform. Safety right there right. So the agenda for today is start with an introduction. Then move on to the demo take a look at the overview of the openai API, how to set it up.

A

How we can integrate that with spfx a couple of use cases and then the core walkthrough and then we'll conclude so AI it has been. It is everywhere, so you open your Twitter feed or LinkedIn feed. You see a lot of posts about artificial intelligence these days. It is helpful to us in many ways take, for example, co-pilot that have been launched by Microsoft or or will be launched by Microsoft GitHub copilot, that's already there. We've got chat GPT. So these are the different examples which you have already heard of uh that use.

A

Ai and apis are provided uh for us in order to use AI in our applications, and we will use those apis in spfx projects and that's what we'll be looking at today.

A

um So, let's uh look at the demo first and then move on to the code. So if I just go into my Dev tenant, what we have here is a page in SharePoint which has got some text content, some images and some text content again. So it's just a normal news article. So what I'll do is I'll just go ahead and edit this page and add a web part which is called summarize and then republish that and basically what what this does is.

A

This web part gives us a multilingual summary, so in English, French, Spanish and Swedish of the text content that is present on the page. So, basically we use openai. We send the content text, content to open AI, ask it to give summary in four different languages, and this web part displays the summary in four different languages.

A

So now that we have had a look at the web part, let's take a look into the details of the web part itself, so uh you might have heard of openai and Azure open AI. uh There are some differences to it. So if you just go on the internet and search for differences between opening and Azure open AI, uh you will come to know what they are. The main thing is both open, Ai and Azure.

A

Open AI provide us apis, which we can use in our projects, so in in this particular demo, we'll be using the apis provided by openai. However, the same can be changed to use Azure openai apis instead, but whatever it is before working with production data, and these are open, AI or Azure open AI make sure you read the data policies that are given by opening and Azure open, Ai and then then decide on which one to use and whether they are okay with your company's data policies Etc.

A

So that's one important important thing to remember now: open AI API, so it's a tool provided by openai which gives access to the advanced AI models with a simple interface. It helps us integrate AI into our applications very easily. The the AI models use a deep learning algorithm to provide high quality responses to the queries uh and it can be accessed through variety of programming languages. So, in order to uh you know, look into this open, Ai and play with it.

A

uh What we can do is we can simply create an openai account by going into the open, AI site and we can obtain an API key and if they've got a playground on the website itself, with which we can look at the different uh API endpoints that are provided right now, let's look at how we integrate open, AI API with spfx. So what we do is uh we are. We have our svfx projects on the left side.

A

We use Azure function as the middleware which, which will communicate with openai, so request is sent from spfx to Azure function. Azure function, then sends that request to open AI using the opening, I key and then open AI Returns, the data which is then provided back to spfx.

A

So if we just take a look at the details, so on the spfx web part, what we do is we get the data, which is nothing but the content of the page, and that content is passed to the Azure function and the Azure function then constructs something called as a prompt which will have a look in a minute and that is sent to open AI by calling the openai API and then open AI uses that prompt provides us the high quality response, in this case the summary in different languages that is returned back to the Azure function.

A

The Azure function, then sends it back to uh or other uh yeah sends it back to a SharePoint framework part which then displays the formatted data in a nice way.

A

All right, some of the use cases uh of like using open, Ai and SharePoint are you know. One is the one that we saw summarizing, SharePoint, page content in multiple languages.

A

uh The other use cases might be showing possible titles for a page so that the editors of the page can look at the possible titles and then decide which title to use if, if they are okay with the response, the other might be showing possible thumbnails for a page, so a few thumbnails can be shown and then the editors of the page can to choose a thumbnail and then set the thumbnail of the page right now, let's look at the core, so all this code is available on GitHub under the samples repository.

A

What I have done here is uh open the the web part and then highlighted uh the summarize.tsx component, which is a react component uh and uh I'll, be navigating through various files and then showing the important bits of the code. So in the web part we've got this main component called as summarize.tsx, which I've highlighted that particular component has a method uh in order to get page content using graph API. So for that we use the Microsoft graph Pages API, and then what we do is because we are interested only in the text content.

A

We filter the the content to Target. Only the text part so, as you can see over here, we are using microsoft.craft.txtepart, which gives us only the text webparts present on the page. So once we have that we get the content of that of the text web part, and then we need to pass that page content to open AI for that we use Azure function.

A

So there's there's a method called as get summary using open AI, uh and uh this ultimately calls an Azure function now in order to use Azure functions or call Azure functions, I'm using a react talk, but this is not a compulsory. This is just one of the ways of calling Azure function. We can call Azure function uh correctly from the you know, using other code, you will have a lot of samples which explain that, but in this particular case, I'm using react hooks, which is called use, Azure functions.

A

So what we do is we get the aad, HTTP client first and then this particular method that or this particular piece of code that I have highlighted over here. What that does is uh it checks whether it's a get request or a post request? If it's a get request, we append uh parameters to the query string. If it's a post request, we compose the the body and then what we do here is we call the Azure functions.

A

So we call the Azure function uh by passing in the headers and the body and then once we get the response from the Azure function, uh we just collect that in a variable.

A

Right now, with respect to the Azure function itself, uh we've got two Azure functions. uh One is called as summarize, which gets the data from openai API and there's other Azure function called as update page, which I'll come to in a minute. uh So, firstly, we'll look at this summarize function, so this particular Azure function gets the page content from the spfx web part. So what we do is we take that content into a variable called as content, and then we need to construct a prompt which needs to be sent to the open AI.

A

That prompt is nothing but a Json. So what we do is we have to construct that Json, so I have put that Json in a file called as data.json and in that particular Json file, which we'll look at in a minute, we'll replace uh the content with our with the content that we have received. So if we look at the Json file, as you can see over here, it says that we are using a particular model of uh of open AI. Then we have to send some messages and some other parameters to the open AI.

A

So the main thing is the message. So in this message we say: please give us a one short sentence, summary in in all the different languages that we need and then towards the end. We've got the content in curly braces and that content will be replaced by whatever content is passed to the Azure function. There are other parameters as well, which we can play with if needed.

A

Right, as you can see over here, we get the Json and then replace the content in that Json and then uh what we do here is uh from the app settings. We get a couple of couple of settings. One is the API endpoint and the other one is the API key. Once we have that record and call this invoke web request. I should have mentioned that this particular Azure function is a Powershell Azure function and all these are partial functions.

A

So we call the invoke web request function by using the endpoint uh that that that we get from the app settings so which then goes ahead and calls open. Ai API gets us the data, and then we just format it to get. uh You know that data will be nested, so we need to get a particular object from that next structure. That's what we do over here and then once we have that once we have the summary, we return the summary back to SharePoint.

A

Now we don't want to do this every time. Someone goes ahead and opens a page right. So that's why what we do is once we get the summary we store that summary against a a column of the page, so the metadata of the page is updated with this summary, and how do we do that? Of course we use PNP Power Cell to do that. So there's another Azure function called as update page. This. This function gets called once the summary is returned back to the spfx web part.

A

So what we do in this Azure function is uh simply go ahead and connect to the site.

A

So if, if we are debugging locally, we have to use client, 3D and client secret, but if, if your, uh if we have deployed this in the cloud, there are a few options we can use manage identity as well, which I quite like very much so yeah we connect to the site and then what we do is we use the uh we get the the page item and then call the set PNP list item function which goes ahead and updates the value of the of the column.

A

In this case the column is summary, and we update it with the summary that we have got from openai and once once we update the uh the metadata we go ahead and publish the page, so uh that's it from code side and in summary, uh open AI provides us with some apis. We'll provides us some apis. We use those apis in spfx projects. Azure, open AI provides us apis as well, which which can be used instead, and there are other scenarios to explore.

A

Here- are the resources that were used and with that I and it over to you. Thank you so much. This is a great example. um Definitely putting a lot of Cool Tools together. I'm gonna have to watch this demo again but slowed down a few times to make sure I understand everything.