Bing Translator Api Javascript Example

Bing Translator Api Javascript Example – When we present shows – whether online or in person – there will always be people in the audience who don’t like the language we speak or have hearing difficulties. Microsoft created Presentation Translator to solve this problem in PowerPoint, delivering translated subtitles to viewers’ devices in real time. In this article, we’ll see how (without too many lines of code) to create a similar application that runs in a browser. It records and interprets speech using the monitor’s microphone and broadcasts the results to other monitors in real time. And because we use an off-server and fully managed service, we can scale to support thousands of audience members. Best of all, all of these services have a free tier, so we don’t have to pay anything to get started! Overview The application has two cores: The Vue.js application is our main interface. It uses the Microsoft Azure Cognitive Services Speech SDK to listen to the device’s microphone and perform text-to-text speech and translation. Azure Function apps provide serverless HTTP APIs that the user interface calls to broadcast translation labels to connected devices using Azure SignalR Service. SDK Speech for Cognitive Services Most of the heavy lifting involves listening to the microphone through the browser and calling Cognitive Speech services to retrieve text and translations in real time, which is actually done by the service’s JavaScript SDK. The SDK requires an Information Services key. You can create a free account (up to 5 hours of text-to-text and translation per month) and view its keys by running the following Azure CLI command: az Cognitive Services Account Creation

You can also use this link to create a free Information Services account using the Azure portal (select F0 for a free tier). Azure SignalR Service Azure SignalR Service is a web-enabled real-time communication platform. We use it with Azure Functions to broadcast the translated subtitles from the presenter’s browser to each viewer’s browser. SignalR Service can scale to support hundreds of thousands of simultaneous connections. SignalR Service has a free tier. To create an instance and get its connection string, use the following Azure CLI command: az signalr create

Bing Translator Api Javascript Example

Bing Translator Api Javascript Example

You can also create one using the Azure portal from this link. Speech-to-text and translation in Search Cognitive Service’s Speech SDK is very easy to use. First, we’ll go into our Vue app: npm

How To Translate Japanese Games Without Speaking A Word!

That’s it! When the text is recognized, the recognizeCallback method is called. We’ve sent an event parameter and a translation object containing all the translations we requested. For example, we can use e.translations.get(‘fr’) to get the French translation. Broadcasting Captions to Other Clients Now that we have captions and translations available through the Cognitive Services Speech SDK, we need to send that information to all viewers connected to SignalR Service via WebSocket so they can display the labels over time. First, we’ll create an Azure function that our UI can call whenever a new document is recognized. Basic HTTP process for sending messages using the Azure SignalR Service version. Output bindings are configured in function.json. It takes the SignalR message object returned by the function and sends it to all clients connected to a SignalR service instance called a tag.

The service simply takes the payment, which includes translations in all available languages, and sends it to the customer using SignalR Service. (Passing all voices to every client doesn’t work; this time we’ll improve with the SignalR group.)

@aspnet/signalr Note that although this package is under @aspnet org on npm, it is a JavaScript client for SignalR. In the future it may be moved to another organization to make it easier to find. When an audience member decides to join the tabs section and install our Vue component, it initiates a connection to the SignalR service.

The onNewCaption callback function is called whenever a NewCaption event is received. We select the label corresponding to the language selected by the viewer and add it to the view model. Vue does the rest and refreshes the screen with a new tab. We’ll add some code to disconnect from the SignalR service when the Vue component disappears (for example, when the user exits the view).

Improving Machine Translation With The Google Translation Api Advanced

This is the most important part of the whole app! It captures speech from a microphone, translates it into multiple languages, and broadcasts the translation to thousands of people in real time. Using SignalR Groups to Improve Efficiency So far, there’s been a bug in the app we’ve created: every viewer gets subtitles in the languages ​​available, except the one they choose. Subtitles are sometimes sent multiple times per second, so sending all the speech to each client consumes a lot of bandwidth. We can see this by inspecting the WebSocket traffic: To address such issues, SignalR Service has a concept called “groups”. Groups allow applications to add users to groups. Instead of broadcasting the message to all connected people, we can target the message to a specific group. In our case, we’ll refer to each instance of the Vue application as a “user”, and we’ll put each instance in the same group based on their language of choice. Instead of sending everyone a message in all languages, we send smaller, targeted messages in just one language. Each message is sent to a selected group of users to receive subtitles in that language. Adding a Unique Client ID We can generate a unique ID to identify the Vue instance when the app starts. The first step in using groups is to authenticate the application with SignalR Service using this identifier as the user ID. This is achieved by modifying our Azure role selection. SignalR clients call this function to retrieve an access token that will be used to connect to the service. Currently, we are using anonymous tags. It first changes the path of the negotiation process to include the user ID. We use the user ID passed in the path as the user ID in the SignalRConnectionInfo input binding. Binding generates a service token that authenticates against that user.

No changes are required in the ongoing process. Next, we need to change our Vue app to pass the ID in the path (clientId is the unique ID created by this instance of our app):

The SignalR client appends the / option to the end of the URL and calls our function with the user ID. Adding Clients to Groups Now that each client connects to SignalR Service with a unique user ID, there needs to be a way to add a user ID to a group representing the language selected by the client. This can be done by creating an Azure function that selects the language our application will call to add it to the group. Like the function that sends a message to the SignalR service, this function uses the SignalR output binding. Instead of sending SignalR messages to output bindings, we provide group action objects for adding and removing users to groups.

Bing Translator Api Javascript Example

The function is requested with the phonetic code and username in the body. We publish a SignalR team job for each language our app supports – set up an additional job for the languages ​​we choose to subscribe to, and download it for all remaining languages. This will cancel any previous subscriptions. Finally, we need to modify our Vue application to call the selectLanguage function when the component is created. We do this by creating a watch in the language code that calls this function every time the user updates its value. Additionally, we set the watch’s nearby property to true so that the function is called when the watch is first created.

Translation Api · Github Topics · Github

Send a message to the group The last thing we need to do is modify the Azure function that broadcasts the label so that each message is split into one message per voice and sent to the appropriate group. To send a message to a group of clients instead of broadcasting to all clients, add the groupName property (set to the language code) to the SignalR message:

Now, when we run the application, it works the same way as before, but if we inspect the SignalR traffic over the WebSocket connection, there is only one voice per tab. Next Steps View the source code on GitHub Deploy the application – More details in the SignalR Service Lay Design Guide See Azure Information Services and Signal Service Limitations Azure Services Comments? question? Find me on Twitter. ← old new →

I’m a product manager at Microsoft, responsible for Azure Container Apps, Azure Static Web Apps, and Azure Functions.

Previously, I was a cloud development consultant at Microsoft. Before that, I was a software developer and designer in Vancouver, BC, Canada.

Microsoft Text Translator Api Tutorial: Build A Translation App [javascript Example]

Bing maps api javascript example, bing translator api, google places api example javascript, bing map api example, weather api javascript example, google maps api javascript example, power bi javascript api example, javascript api example, microsoft translator api javascript example, bing search api example, google calendar api example javascript, bing maps api javascript