March 2019 - Posts

If you have ever used Office Fabric with SPFx, you may have found yourselves struggling.  You quickly learned than previous version of SPFx did not work with version 6+ of Office.  Instead you had to use the LTS version of Office Fabric which varies significantly from version 6.  What make this such a pain point is that there isn't really any documentation on the Office Fabric site that tells you that.  Instead you just installed it, tried it out, and couldn't figure out why things weren't working until you did an Internet search.  In addition what made things even harder is that many of the parameter and function names have changed between version 5 and 6.  The documentation only covers what's in version 6.  Some functionality flat-out isn't there in version 5 and you had to find work-arounds.  This pain ends today with SPFx 1.8.

First, install the latest version of SharePoint Framework 1.8 by running the following:

npm install -g @microsoft/generator-sharepoint

Once it completes, start a new project or follow the instructions in the release notes on how to migrate your existing project.  Start a new branch if you are migrating an existing project.

Now install Office Fabric with the following command:

npm install office-ui-frabric-react

Now, add your favorite Office Fabric React code for buttons, pickers, command bars, etc.  Finally run gulp serve.  Unfortunately, you'll still see the errors in merge-styles that we have always gotten when trying to use v6 of Fabric React.  That's because Fabric React needs a newer version of TypeScript.  SPFx 1.8 now supports TypeScript 2.7.2 by default.  That's not good enough. Luckily, we can use other versions of TypeScript now.  I tried to use 3.3 but couldn't get it to work.  However, I could get it to work by using 3.0.  Here's how you do that.

In your package.json file, replace the @microsoft/rush-stack-compiler-2.7 dependency with 3.0 as follows:

"@microsoft/rush-stack-compiler-3.0": "0.5.9"

Now, update your tslint.config and change the extends line to the following:

"extends": "./node_modules/@microsoft/rush-stack-compiler-3.0/includes/tsconfig-web.json",

Now run the following command:

npm install

Your Fabric React 6 components should now be working when you run your project again.  Here's my example with a command bar and a button:

Screen Shot 2019-03-14 at 4.04.08 PM

If you want to look at my code changes, you can see them in this simple repo.

These are exciting times and this should make working with Office Fabric React much easier.

On any consumer-facing platform where users can submit content that will be seen by the public, it's a good idea to have some level of content moderation.  Manual content moderation using humans is tedious and labor-intensive.  Luckily, Azure Content Moderator, part of Azure Cognitive Services, provides us with some AI capability to potentially detect language that might be offensive.  It's actually quite easy to get started with as well.

First, you'll want to create a new Content Moderator in your Azure Portal.  The options are fairly straight forward based upon region, resource groups, and scale.  For this example, I used the F0 Plan which comes with 5000 moderation transactions a month (full pricing details).  This should be more than enough to prove out the concept.

Screen Shot 2019-03-04 at 2.35.21 PM

When your Content Moderator finishes provisioning, go to the Keys tab and make note of Key 1 and Key 2 here.  You'll use this later.  Keep these keys secure so that others don't use your API calls.

In this example, we are using Ionic Framework 4.0 which just hit general availability fairly recently.  We'll build on a simple out-of-the-box app.  Full source code is available at the link at the end of this post.  If you don't have Ionic Framework installed, you can install it from here.   To start a new project in Ionic Framework, issue the following command.

ionic start IonicAzureContentModerator

After the project has been created, you can see it in the browser by running the following command:

ionic serve

This will launch the app in a web browser with live reload.  Now let's add the components we need to test this out.  First, let's create a service to make our call to Azure.  Normally this service would call our own API or function which would proxy the call to Azure Content Moderator.  We do this so that our API key is not stored in the client application.  For simplicity though, we are going to call Azure directly because this is only an example.  To create the service issue the following command in the Ionic CLI.

ionic g service services/ContentModeratorService

This will create a stub for a service. We'll look at what goes in here shortly.  However, since we are going to be making an Http call, we need to add the angular HttpClientModule.  Open app.module.ts and add the following import:

import { HttpClientModule, HttpClient } from '@angular/common/http';

Next add HttpClientModule to the list of imports of @NgModule.

Now let's go back to our service and we'll start by adding our HttpClientModule reference.

import { HttpClient, HttpHeaders } from '@angular/common/http';

We also need to add the HttpClient to our constructor to create an instance.  Finally, we have a simple method called moderateContent which calls the Azure Endpoint for the Content Moderator.  The first step is to assemble a URL to that endpoint.  This URL varies by region so you will need to look up what the URL is based on where you deployed your Content Moderator.  The API has a few parameters including whether to scan for PII as well.  As a result, I've made that a parameter on my function.  Here is what my URL looks like for South Central US.

let apiUrl = `https://southcentralus.api.cognitive.microsoft.com/contentmoderator/moderate/v1.0/ProcessText/Screen?PII=${PII}&classify=true`;

Next, we construct an HttpOptions object to pass the API Key.  It goes in a header by the name of Ocp-Apim-Subscription-Key.  I store the API key in the value Constants.apiKey.  Again, we wouldn't normally store our API key in a client application like this.

const httpOptions = {

headers: new HttpHeaders({

'Ocp-Apim-Subscription-Key': Constants.apiKey

})

};

Finally we make the HTTP POST while passing the content that we want to moderate in the body.

Now, we can build a simple form to collect the user's input and make the call to our service.  I add an ion-textarea to collect the user's input and add a toggle to choose whether or not to scan for PII.  Then I just make use of some ion-badge components to display the results.  Here is what our interface looks like in the browser.

Screen Shot 2019-03-04 at 3.19.50 PM

Here is the HTML code.

Screen Shot 2019-03-04 at 3.20.58 PM

Clicking the button simply executes the moderateContent method in the service we created.  Let's look at the data that comes back when we execute a call. 

Screen Shot 2019-03-04 at 3.27.12 PM

In the Content Moderator response, we receive a Classification object and in that object there are three categories returned: Category1, Category2, and Category3 along with a boolean ReviewRecommended which will return true if the text is likely an issue.  The categories are defined as follows:

  • Catagory1 - refers to potential presence of language that may be considered sexually explicit or adult in certain situations.
  • Category2 - refers to potential presence of language that may be considered sexually suggestive or mature in certain situations.
  • Category3 - refers to potential presence of language that may be considered offensive in certain situations.

Each category contains a decimal value between 0 and 1.  The higher it is, the more likely the content applies to that category.  In this case, the phrase we sent is more of a general profanity as opposed to being sexual of nature. 

In our app, we simply bind these values using the ion-note so that you can easily see how the phrase was interpreted.

Screen Shot 2019-03-04 at 3.35.05 PM

If you use the toggle for PII, you can look for things such as national id numbers, phone numbers, addresses, and IP addresses.  Here is an example of the output.  You can find more information in the docs.

Screen Shot 2019-03-04 at 3.37.20 PM

You can observe the values of potential PII using the PII object.  You'll notice in this case as well that the Classification values were significantly lower because there wasn't any offensive text in the string we sent.

Azure Content Moderator part of Cognitive Services is a great way to test content to see if it's potentially offensive.  While you will still want to incorporate a human review element into any content moderation process. This should help automate some of the process for you.  In addition, Cognitive Services has Content Moderation for images which can identify potentially suggestive images.

If you want to dive deeper, you can take a look at my code sample in GitHub.



with no comments
Filed under: , ,