Document Translation Solution Using Azure AI .NET and React

Introduction

Translating documents quickly and accurately is essential for businesses and individuals. Azure AI Translator provides a powerful solution for translating various file types while maintaining their structure and formatting. In this article, we will explore how to build a document translation solution using .NET for the backend and React for the front end.

Development

For this demo, we will use this GitHub repository where you can set the Azure credentials.

Prerequisites

• Azure subscription
• .NET SDK
• Node.js 18+

First, let’s create the Azure resources. Go to the Azure portal and create the Azure AI Translator resource.

Once the resource is created, go to Keys and Endpoint under Resource Management and copy the key and endpoint (Document Translation).

These credentials must be pasted into the appsettings.Development.json file in the API project.

{
   "AzureDocumentTranslation": {
      "Endpoint": "https://<YOUR_RESOURCE>.cognitiveservices.azure.com",
      "ApiKey": "YOUR_API_KEY"
   }
}

The Document translation API supports two translation processes.

• Asynchronous: Supports the processing of multiple documents and large files. The batch translation process requires an Azure Blob storage account with storage containers for your source and translated documents.
• Synchronous: Supports the processing of single file translations. The file translation process doesn't require an Azure Blob storage account. The final response contains the translated document and is returned directly to the calling client.

This article only focuses on the synchronous process. If you want to process PDF files, you must follow the asynchronous process.

The synchronous process supports the following file extensions.

• txt
• txv
• csv
• html
• mhtml
• pptx
• xlsx
• docx
• msg
• xlf

You can specify the source and target languages of the documents. For this demo, the source language is detected automatically.

For further details, check the documentation.

To test the demo, run the UI and API projects. Upload any of the allowed file types and choose the target language.

As you can see, the structure, font size, and color are the same in the translated document.

Conclusion

Using Azure AI Translator, .NET, and React, you can build a powerful document translation solution that supports multiple file formats. This setup ensures a smooth user experience while handling translations efficiently. By following these steps, you can enhance document accessibility for users worldwide.

Thanks for reading

Thank you very much for reading. I hope you found this article interesting and may be useful in the future. If you have any questions or ideas you need to discuss, it will be a pleasure to collaborate and exchange knowledge.