Microsoft 365 Community SharePoint, 21 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Machine Translation SharePoint Framework Extension for in-place translations

Description

In this 12-minute developer focused demo, Robin Agten shares his machine translation SPFx extension that translates content on SharePoint pages (specifically page title and content in the Text Control web part only) using a Bot and the Microsoft Translator text API. Plain text and HTML are translated. The translation is literal, not localized, as stated in the disclaimer banner on the page. The user selects language from a dropdown and in-place translation is executed in seconds. This is a great quick translation solution as opposed to the localized, but time intensive multilingual translation option. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 21, 2020.

Presenter: Robin Agten (Delaware Consulting) | @AgtenRobin

Supporting materials:
• Language and region support for Translator | https://docs.microsoft.com/en-us/azure/cognitive-services/translator/language-support
• Translator 3.0: BreakSentence | https://docs.microsoft.com/en-us/azure/cognitive-services/translator/reference/v3-0-break-sentence
• Creating a SharePoint page translation extension using Azure Cognitive Services | https://digitalworkplace365.wordpress.com/2020/05/05/creating-a-sharepoint-page-translation-extension-using-azure-cognitive-services/
• Machine Translations Extension | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-application-machine-translations

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

A

Right, hello, everybody, my name is Holman octa and I'm in office 365 and as you've developed at Delaware I will be giving a short demo on the machine, translation, SPX extension that I built, which basically lets you translate the content on your sharepoint pages and it uses the microsoft translated text api. Now the goal of this webpart still that your end-users translate your sharepoint pages, but it's not going to translate the entire UI or the entire web page, but only the actual text content on your page.

A

So it's only going to look at the text, control webparts and translate that so, let's dive right into the demo, so I have a basic SharePoint page in here with some content in English. There's also a people that balked and default comment section at the bottom and when the page is loaded, you will see at the top that the translation box is loaded in F, which is just basically a drop-down with available languages to which you can translate your content.

A

The available languages in you know configurable in the extension, but I will get to that later.

A

When you select a new language, you will see the page gets blocked for a couple of minutes and then the content on this page in this case is translated to French and, as you can see, the the ribbon- and here, for example, is still in the in English when the users language, with all the actual text content, is translated to French.

A

In this case, when we also display a small disclaimer saying that it's translated by an API and that maybe some of the translation may not be that accurate and then lastly, we also have this button to reload the original, which is just going to reload the original page back into its original language.

A

So that's basically how the extension works and now, let's see what be behind the scenes or what's on the roots in the application customize. So there are three main things that you can can configure in this extension. The first one is the supported languages which become available in that drop-down. You saw a minute ago and if you go to the documentation of the translated text API, then there is this language.

A

Support, page and you'll get a long list of all the available languages that are supported by the API and it's this language code that we will need in our configuration to make the languages available. Then we also, of course, need the API key. So when you create- and you actually search for the translated text API, you will get an API key, which you will need to make just goes to the API endpoint and then there's also an option to specify a region for the API. So that's also documented in the API documentation.

A

Some base URLs by default, is going to the global endpoint, but you can specify a specific region to talk at the endpoints or the URL for your specific region other than that. We're not doing that. Much in this base. Customized clause just initializing a translation to a couple of minutes, the same works and we're also passing some page context, properties like HIV and the list ID to our translation bar.

A

So if I go into this translation board component, which is the one that's actually found on the page- and there are two main things that we will be doing- that we are doing in the initialization, so the first thing we need to do is, of course, the tag. The language of the page.

A

We first go and fetch the page item using PJs, very simple, using the current list ID and hid, we can get the list item of the page and we get the title and the description. So if a description is available, then we use the page description to detect the language. That's not yet available. Then we'll be just using the title. So we have this method to detect the language which is actually going to the translation service.

A

When we have this method, which is, is calling the detect endpoint of the translated text, API very easy to use. You can just pass in the source text and the body and then make opposed to the detect, endpoint and you'll get the result of detected languages, so the API will probably detect multiple languages, but they will API will always give a score on how confident it is about the language that it's detected and a flag saying if it's supported by the API.

A

So if you detect the language with the score higher than 0.8 and that's translatable, then we use this language as the detected language and next to that in our initialization. We also have to get the available language or the available languages, and for that we are using the available languages and point this one. The languages end point sorry, which is just a get method, and this one will list all the available languages supported by the API. And then we map this list of available languages to all of configurable languages in the application customizing.

A

Each language then return the native name, which is provided by the API and also the language codes which we can then use later on in our translation box to actually do the translations. So once our translation bar is fully initialized, we can start our translation.

A

Like I said we have only translating actual text control on the SharePoint page. So again we are using. Mpj has two loads in the client-side page, based on the relative page around that we are constructing here and once we have that we have the page, the client-side page. Let's say we can use this, find control methods again from PJs and passing this predicate and we're only going to return the controls of the type lines I taste. So this will give us all our text controls on the SharePoint page, which we can then safely translate.

A

We are also translating the page title, which is just the title that you are getting from the client-side page. So for each types control. We have this method to translate it. We are actually going to vary the HTML Dom structure based on this data, as we feature instance ID, which always matches the ID of the of the laptop on the page. So, based on based on the text control that box ID, we can factually correct HTML element and we can and start translating this HTML element.

A

There are a couple of special things we do when he. If, if we look at the documentation of this translate end point you will see somewhere in here that the entire text included in your request cannot exceed 5000 characters, and now this is very possible that this is happening. So it's the first thing. We are checking that the inner HTML of our of our tags that we are trying to translate does not exist, exceed those 5000 characters. This is not the case.

A

We can just easily use the translate end point and passing the HTML, the language codes that we want to translate it to and also say that we are translating HTML. So the API supports plain text as well as HTML. So, if you put in HTML, you get the correct HTML structure back all your CSS classes, inline styling is still on. There is bigger than those 5,000 characters. We are going to fetch all the child I'm going to translate that one by one.

A

So we have this sort of recursive function here and so for each child element. We are again calling the same function and doing the same checks. So if it's still exceeding those 5,000 characters, then we are again putting it in the same function and so on and so on. Until all the chart elements are translated now, if the element is bigger than those five thousand characters, but it doesn't have any child elements anymore. So, let's say one big paragraph with more than five thousand characters, then we will run into an issue.

A

So we solve this using the break sentence, API endpoint and looking at the documentation for that one so to break sentence endpoint for a specific. Every element in could take up to ten thousand characters, which is already a lot more and hitting one paragraph or one element with no child and more than ten thousand characters seems pretty unlikely. But if it still hits that, then of course you would have an issue and this break sentence. Api endpoint will return to you an array but the length of each sentence that it has detected.

A

So once we have all those lines of all the sentences that were detected in full text, we are going to subtract on your first going to calculate the start index and the end index of each sentence and then fetch the substring of the full content of that HTML element. And then we can just pass in that specific sentence to the translate API endpoint and translated as plain text instead of HTML. And then we are just replacing the sentence that we are translating with the result of the translation.

A

So then everything on the page will be translated and we can release the overlay and of blocking overlay and the entire page will be translated. That's basically how this extension works. So thanks everybody for your attention.

B

Thanks before you actually flows that Kenny code one more time, can you go one more time to function and it just it just to say that in practice, because the UX, because it's so cool.

A

So you just want to see the trend nation again: yeah I mean yeah. So let's translated to dodge this time.

B

Because, no so just just as a Microsoft name boy, it's a noting here and saying that. Well obviously, we should have this feature natively within a product as an as an optional thing and sure you can translate the content using that the multilingual model which we have in the modern pages, which is basically copy of the same page.

B

But this is this- is pretty cool I, say if you don't have time to do a real translation for all at the beta, if you're a smaller company, this kind of a way of approaching the same problem is it's really really great, so really nice implementation? Indeed, you.

A

Can think it it will bridge the gap when you don't have all the translations create.

A

B

Exactly and having that warning there is it's really great, so I'm a thin. So as an example finish as in language, it's super complex and so therefore the time you can always see if people have you been using translation engines, but but still you understand it to text so sure it's not perfectly valid, but still so good. To have that that text there indicating that it has been machine translated as well so could I think that's it. That's it in broken, so really really really cool stuff. Absolutely brilliant demo.