honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated README and sample.json

This commit is contained in:
Hugo Bernier 2023-03-12 12:40:08 -04:00
parent 6e59ea5ad1
commit 7a5780a91c
2 changed files with 91 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
samples/react-openai-summarise-page-content/README.md
View File

@ -2,7 +2,7 @@
## Summary ## Summary
This sample contains a SharePoint Framework web part and an Azure function that uses the Open AI API to summarise a SharePoint page in multiple languages. The web part uses the Microsoft Graph Pages API to get the page content and the Azure function uses the Open AI API to summarise the page content. The web part then displays the summary in the selected language. This sample contains a SharePoint Framework web part and an Azure function that uses the Open AI API to summarize a SharePoint page in multiple languages. The web part uses the Microsoft Graph Pages API to get the page content and the Azure function uses the Open AI API to summarize the page content. The web part then displays the summary in the selected language.
![screenshot](./assets/page_summary.png) ![screenshot](./assets/page_summary.png)
@ -27,20 +27,18 @@ This sample is optimally compatible with the following environment configuration
## Applies to ## Applies to
- [SharePoint Framework](https://aka.ms/spfx) - [SharePoint Framework](https://aka.ms/spfx)
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) - [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram) > Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram)
## Prerequisites ## Prerequisites
> Open AI API key. You can get a key from <https://platform.openai.com/account/api-keys> > Open AI API key. You can get a key from <https://platform.openai.com/account/api-keys>
> See the [Minimal Path to Awesome section](#minimal-path-to-awesome) below for more details related app registration, Azure function and SharePoint site configuration. > See the [Minimal Path to Awesome section](#minimal-path-to-awesome) below for more details related app registration, Azure function and SharePoint site configuration.
## Solution ## Contributors
| Solution | Author(s) | - Anoop Tatti ( [anoopt](https://github.com/anoopt), [https://linktr.ee/anoopt](https://linktr.ee/anoopt) )
| ----------- | ------------------------------------------------------- |
| react-openai-summarise-page-content | Anoop Tatti ( [anoopt](https://github.com/anoopt), [https://linktr.ee/anoopt](https://linktr.ee/anoopt) )|
## Version history ## Version history
@ -48,12 +46,6 @@ This sample is optimally compatible with the following environment configuration
| ------- | ---------------- | --------------- | | ------- | ---------------- | --------------- |
| 1.0 | March 06, 2023 | Initial release | | 1.0 | March 06, 2023 | Initial release |
## Disclaimer
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome ## Minimal Path to Awesome
- Clone this repository - Clone this repository
@ -75,10 +67,10 @@ This sample is optimally compatible with the following environment configuration
- Add the following application settings to the Azure Function App - Add the following application settings to the Azure Function App
| Name | Value | | Name | Value |
| ------- | ---------------- | | ------- | ---------------- |
| API_Endpoint | https://api.openai.com/v1/chat/completions | | API_Endpoint | <https://api.openai.com/v1/chat/completions> |
| API_Key | Your Open AI API key | | API_Key | Your Open AI API key |
- Get the function URL of the functions in the Azure Function App - Get the function URL of the functions in the Azure Function App
- Go to the Azure Function in the portal and navigate to the "Functions" blade. - Go to the Azure Function in the portal and navigate to the "Functions" blade.
- Click on the function name - Summarise. Copy the "Function URL" from the "Overview" blade. - Click on the function name - Summarise. Copy the "Function URL" from the "Overview" blade.
- Replace the `AZURE_FUNCTION_SUMMARISE` in the `/webpart/src/constants/constants.ts` file with the function URL - Replace the `AZURE_FUNCTION_SUMMARISE` in the `/webpart/src/constants/constants.ts` file with the function URL
- Click on the function name - UpdatePage. Copy the "Function URL" from the "Overview" blade. - Click on the function name - UpdatePage. Copy the "Function URL" from the "Overview" blade.
@ -93,20 +85,22 @@ This sample is optimally compatible with the following environment configuration
- Note: `Sites.Selected` permission cab be used to if needed to restrict the access to the SharePoint site. - Note: `Sites.Selected` permission cab be used to if needed to restrict the access to the SharePoint site.
### Column in the Site Pages library ### Column in the Site Pages library
- Create a column in the Site Pages library - Create a column in the Site Pages library
- Go to the SharePoint site in the browser where you want to add the web part - Go to the SharePoint site in the browser where you want to add the web part
- Navigate to the Site Pages library - Navigate to the Site Pages library
- Create a new column called "Summary" of type "Multiple lines of text" - Create a new column called "Summary" of type "Multiple lines of text"
### SPFx web part ### SPFx web part
- Edit the `webpart/config/package-solution.json` file and replace the `APP_REG_NAME` with the app registration name created above - Edit the `webpart/config/package-solution.json` file and replace the `APP_REG_NAME` with the app registration name created above
- Open command prompt in the `webpart` folder - Open command prompt in the `webpart` folder
- in the command line run: - in the command line run:
* `npm install` - `npm install`
* `gulp build` - `gulp build`
* `gulp bundle --ship` - `gulp bundle --ship`
* `gulp package-solution --ship` - `gulp package-solution --ship`
* Add and Deploy Package to AppCatalog - Add and Deploy Package to AppCatalog
- In the API access page approve the following - In the API access page approve the following
- `user_impersonation` permission for the app registration created above - `user_impersonation` permission for the app registration created above
- `Sites.Read.All` permission for the Microsoft Graph API - `Sites.Read.All` permission for the Microsoft Graph API
@ -115,34 +109,38 @@ This sample is optimally compatible with the following environment configuration
### Running the Azure function and web part locally ### Running the Azure function and web part locally
#### App registration (if not done already) #### App registration (if not done already)
- Register an Azure AD application in your tenant - Register an Azure AD application in your tenant
- Get the client ID and client secret - Get the client ID and client secret
- Use [ACS approach](https://learn.microsoft.com/en-us/sharepoint/dev/solution-guidance/security-apponly-azureacs) to provide the write permissions to the SharePoint site where the web part needs to be added - Use [ACS approach](https://learn.microsoft.com/en-us/sharepoint/dev/solution-guidance/security-apponly-azureacs) to provide the write permissions to the SharePoint site where the web part needs to be added
- Replace the `APP_ID` in the `/webpart/src/constants/constants.ts` file with the client ID - Replace the `APP_ID` in the `/webpart/src/constants/constants.ts` file with the client ID
#### Azure Function #### Azure Function
- Make sure you have Azure functions core tools installed on your machine. You can install it from <https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=v4%2Clinux%2Ccsharp%2Cportal%2Cbash> - Make sure you have Azure functions core tools installed on your machine. You can install it from <https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=v4%2Clinux%2Ccsharp%2Cportal%2Cbash>
- In the file `./azure-functions/UpdatePage/run.ps1` Comment line number 20 and uncomment line number 23 - In the file `./azure-functions/UpdatePage/run.ps1` Comment line number 20 and uncomment line number 23
- Update the `./azure-functions/local.settings.json` file with the Open AI API key, client ID and client secret - Update the `./azure-functions/local.settings.json` file with the Open AI API key, client ID and client secret
- Open command prompt in the `azure-function` folder - Open command prompt in the `azure-function` folder
- in the command line run: - in the command line run:
* `func start` - `func start`
#### SPFx web part #### SPFx web part
- Edit the `webpart/config/package-solution.json` file and replace the `APP_REG_NAME` with the app registration name created above - Edit the `webpart/config/package-solution.json` file and replace the `APP_REG_NAME` with the app registration name created above
- Open command prompt in the `webpart` folder - Open command prompt in the `webpart` folder
- in the command line run: - in the command line run:
* `npm install` - `npm install`
* `gulp build` - `gulp build`
* `gulp bundle --ship` - `gulp bundle --ship`
* `gulp package-solution --ship` - `gulp package-solution --ship`
* Add and Deploy Package to AppCatalog - Add and Deploy Package to AppCatalog
- In the API access page approve the following - In the API access page approve the following
- `user_impersonation` permission for the app registration created above - `user_impersonation` permission for the app registration created above
- `Sites.Read.All` permission for the Microsoft Graph API - `Sites.Read.All` permission for the Microsoft Graph API
- Add the "Summarise" web part to a page in the SharePoint site - Add the "Summarise" web part to a page in the SharePoint site
- Open command prompt in the `webpart` folder - Open command prompt in the `webpart` folder
- in the command line run: - in the command line run:
* `gulp serve` - `gulp serve`
- Open a page in the SharePoint site which has some text content - Open a page in the SharePoint site which has some text content
- Append `?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js` to the URL - Append `?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js` to the URL
@ -152,20 +150,20 @@ This sample is optimally compatible with the following environment configuration
The code illustrates the following concepts: The code illustrates the following concepts:
* using React for building SharePoint Framework client-side web parts - using React for building SharePoint Framework client-side web parts
* using OpenAI API in Azure Function - using OpenAI API in Azure Function
* using Microsoft Graph API to get only the text content of the page - using Microsoft Graph API to get only the text content of the page
* using custom React Hooks - using custom React Hooks
* using Fluent UI FrameWork - using Fluent UI FrameWork
## References ## References
* [Getting started with SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) - [Getting started with SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
* [Building for Microsoft teams](https://learn.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview) - [Building for Microsoft teams](https://learn.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview)
* [Use Microsoft Graph in your solution](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis) - [Use Microsoft Graph in your solution](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
* [Publish SharePoint Framework applications to the Marketplace](https://learn.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview) - [Publish SharePoint Framework applications to the Marketplace](https://learn.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview)
* [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
* [Fluent UI version 9](https://github.com/microsoft/fluentui/tree/master/packages/react-components) - Converged Fluent UI components - [Fluent UI version 9](https://github.com/microsoft/fluentui/tree/master/packages/react-components) - Converged Fluent UI components
## Help ## Help
@ -179,4 +177,8 @@ For questions regarding this sample, [create a new question](https://github.com/
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-openai-summarise-page-content&template=question.yml&sample=react-openai-summarise-page-content&authors=@anoopt&title=react-openai-summarise-page-content%20-%20). Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-openai-summarise-page-content&template=question.yml&sample=react-openai-summarise-page-content&authors=@anoopt&title=react-openai-summarise-page-content%20-%20).
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-openai-summarise-page-content" /> ## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-openai-summarise-page-content" />

50
samples/react-openai-summarise-page-content/assets/sample.json Normal file
View File

@ -0,0 +1,50 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-openai-summarise-page-content",
"source": "pnp",
"title": "Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API",
"shortDescription": "This sample contains a SharePoint Framework web part and an Azure function that uses the Open AI API to summarize a SharePoint page in multiple languages.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-summarise-page-content",
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-summarise-page-content",
"longDescription": [
"This sample contains a SharePoint Framework web part and an Azure function that uses the Open AI API to summarize a SharePoint page in multiple languages."
],
"creationDateTime": "2023-03-12",
"updateDateTime": "2023-03-12",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-openai-summarise-page-content/assets/page_summary.png",
"alt": "Web Part Preview"
}
],
"authors": [
{
"gitHubAccount": "anoopt",
"pictureUrl": "https://github.com/anoopt.png",
"name": "Anoop Tatti"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]