https://github.com/toreaurstadboss/MultiLingual.Translator
The following Nuget packages are used in the Lib project csproj file :
<ItemGroup>
<PackageReference Include="Azure.AI.Translation.Text" Version="1.0.0-beta.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.19" />
<PackageReference Include="Azure.AI.TextAnalytics" Version="5.3.0" />
</ItemGroup>
We are going to build a .NET 6 cross platform MAUI Blazor app. First off, we focus on the Razor Library project called 'Lib'. This
project contains the library util code to detect language and translate into other language.
Let us first look at creating the clients needed to detect language and to translate text.
TextAnalyticsFactory.cs
using Azure;
using Azure.AI.TextAnalytics;
using Azure.AI.Translation.Text;
using System;
namespace MultiLingual.Translator.Lib
{
public static class TextAnalyticsClientFactory
{
public static TextAnalyticsClient CreateClient()
{
string? uri = Environment.GetEnvironmentVariable("AZURE_COGNITIVE_SERVICE_ENDPOINT", EnvironmentVariableTarget.Machine);
string? key = Environment.GetEnvironmentVariable("AZURE_COGNITIVE_SERVICE_KEY", EnvironmentVariableTarget.Machine);
if (uri == null)
{
throw new ArgumentNullException(nameof(uri), "Could not get system environment variable named 'AZURE_COGNITIVE_SERVICE_ENDPOINT' Set this variable first.");
}
if (key == null)
{
throw new ArgumentNullException(nameof(uri), "Could not get system environment variable named 'AZURE_COGNITIVE_SERVICE_KEY' Set this variable first.");
}
var client = new TextAnalyticsClient(new Uri(uri!), new AzureKeyCredential(key!));
return client;
}
public static TextTranslationClient CreateTranslateClient()
{
string? keyTranslate = Environment.GetEnvironmentVariable("AZURE_TRANSLATION_SERVICE_KEY", EnvironmentVariableTarget.Machine);
string? regionForTranslationService = Environment.GetEnvironmentVariable("AZURE_TRANSLATION_SERVICE_REGION", EnvironmentVariableTarget.Machine);
if (keyTranslate == null)
{
throw new ArgumentNullException(nameof(keyTranslate), "Could not get system environment variable named 'AZURE_TRANSLATION_SERVICE_KEY' Set this variable first.");
}
if (keyTranslate == null)
{
throw new ArgumentNullException(nameof(keyTranslate), "Could not get system environment variable named 'AZURE_TRANSLATION_SERVICE_REGION' Set this variable first.");
}
var client = new TextTranslationClient(new AzureKeyCredential(keyTranslate!), region: regionForTranslationService);
return client;
}
}
}
The code assumes that there is four environment variables at the SYSTEM level of your OS.
Further on, let us now look at the code to detect language. This uses a TextAnalyticsClient detect the language an input text is written in, using this client.
IDetectLanguageUtil.cs
using Azure.AI.TextAnalytics;
namespace MultiLingual.Translator.Lib
{
public interface IDetectLanguageUtil
{
Task<DetectedLanguage> DetectLanguage(string inputText);
Task<double> DetectLanguageConfidenceScore(string inputText);
Task<string> DetectLanguageIso6391(string inputText);
Task<string> DetectLanguageName(string inputText);
}
}
DetectLanguageUtil.cs
using Azure.AI.TextAnalytics;
namespace MultiLingual.Translator.Lib
{
public class DetectLanguageUtil : IDetectLanguageUtil
{
private TextAnalyticsClient _client;
public DetectLanguageUtil()
{
_client = TextAnalyticsClientFactory.CreateClient();
}
/// <summary>
/// Detects language of the <paramref name="inputText"/>.
/// </summary>
/// <param name="inputText"></param>
/// <remarks> <see cref="Models.LanguageCode" /> contains the language code list of languages supported</remarks>
public async Task<DetectedLanguage> DetectLanguage(string inputText)
{
DetectedLanguage detectedLanguage = await _client.DetectLanguageAsync(inputText);
return detectedLanguage;
}
/// <summary>
/// Detects language of the <paramref name="inputText"/>. Returns the language name.
/// </summary>
/// <param name="inputText"></param>
/// <remarks> <see cref="Models.LanguageCode" /> contains the language code list of languages supported</remarks>
public async Task<string> DetectLanguageName(string inputText)
{
DetectedLanguage detectedLanguage = await DetectLanguage(inputText);
return detectedLanguage.Name;
}
/// <summary>
/// Detects language of the <paramref name="inputText"/>. Returns the language code.
/// </summary>
/// <param name="inputText"></param>
/// <remarks> <see cref="Models.LanguageCode" /> contains the language code list of languages supported</remarks>
public async Task<string> DetectLanguageIso6391(string inputText)
{
DetectedLanguage detectedLanguage = await DetectLanguage(inputText);
return detectedLanguage.Iso6391Name;
}
/// <summary>
/// Detects language of the <paramref name="inputText"/>. Returns the confidence score
/// </summary>
/// <param name="inputText"></param>
/// <remarks> <see cref="Models.LanguageCode" /> contains the language code list of languages supported</remarks>
public async Task<double> DetectLanguageConfidenceScore(string inputText)
{
DetectedLanguage detectedLanguage = await DetectLanguage(inputText);
return detectedLanguage.ConfidenceScore;
}
}
}
The Iso6391 code is important when it comes to translation, which will be shown soon. But first let us look at the supported languages of Azure AI Translation services.
LanguageCode.cs
namespace MultiLingual.Translator.Lib.Models
{
///
/// List of supported languages in Azure AI services
/// https://learn.microsoft.com/en-us/azure/ai-services/translator/language-support
///
public static class LanguageCode
{
public const string Afrikaans = "af";
public const string Albanian = "sq";
public const string Amharic = "am";
public const string Arabic = "ar";
public const string Armenian = "hy";
public const string Assamese = "as";
public const string AzerbaijaniLatin = "az";
public const string Bangla = "bn";
public const string Bashkir = "ba";
public const string Basque = "eu";
public const string BosnianLatin = "bs";
public const string Bulgarian = "bg";
public const string CantoneseTraditional = "yue";
public const string Catalan = "ca";
public const string ChineseLiterary = "lzh";
public const string ChineseSimplified = "zh-Hans";
public const string ChineseTraditional = "zh-Hant";
public const string chiShona = "sn";
public const string Croatian = "hr";
public const string Czech = "cs";
public const string Danish = "da";
public const string Dari = "prs";
public const string Divehi = "dv";
public const string Dutch = "nl";
public const string English = "en";
public const string Estonian = "et";
public const string Faroese = "fo";
public const string Fijian = "fj";
public const string Filipino = "fil";
public const string Finnish = "fi";
public const string French = "fr";
public const string FrenchCanada = "fr-ca";
public const string Galician = "gl";
public const string Georgian = "ka";
public const string German = "de";
public const string Greek = "el";
public const string Gujarati = "gu";
public const string HaitianCreole = "ht";
public const string Hausa = "ha";
public const string Hebrew = "he";
public const string Hindi = "hi";
public const string HmongDawLatin = "mww";
public const string Hungarian = "hu";
public const string Icelandic = "is";
public const string Igbo = "ig";
public const string Indonesian = "id";
public const string Inuinnaqtun = "ikt";
public const string Inuktitut = "iu";
public const string InuktitutLatin = "iu-Latn";
public const string Irish = "ga";
public const string Italian = "it";
public const string Japanese = "ja";
public const string Kannada = "kn";
public const string Kazakh = "kk";
public const string Khmer = "km";
public const string Kinyarwanda = "rw";
///
/// Fear my Bak'leth !
///
public const string Klingon = "tlh-Latn";
public const string KlingonplqaD = "tlh-Piqd";
public const string Konkani = "gom";
public const string Korean = "ko";
public const string KurdishCentral = "ku";
public const string KurdishNorthern = "kmr";
public const string KyrgyzCyrillic = "ky";
public const string Lao = "lo";
public const string Latvian = "lv";
public const string Lithuanian = "lt";
public const string Lingala = "ln";
public const string LowerSorbian = "dsb";
public const string Luganda = "lug";
public const string Macedonian = "mk";
public const string Maithili = "mai";
public const string Malagasy = "mg";
public const string MalayLatin = "ms";
public const string Malayalam = "ml";
public const string Maltese = "mt";
public const string Maori = "mi";
public const string Marathi = "mr";
public const string MongolianCyrillic = "mn-Cyrl";
public const string MongolianTraditional = "mn-Mong";
public const string Myanmar = "my";
public const string Nepali = "ne";
public const string Norwegian = "nb";
public const string Nyanja = "nya";
public const string Odia = "or";
public const string Pashto = "ps";
public const string Persian = "fa";
public const string Polish = "pl";
public const string PortugueseBrazil = "pt";
public const string PortuguesePortugal = "pt-pt";
public const string Punjabi = "pa";
public const string QueretaroOtomi = "otq";
public const string Romanian = "ro";
public const string Rundi = "run";
public const string Russian = "ru";
public const string SamoanLatin = "sm";
public const string SerbianCyrillic = "sr-Cyrl";
public const string SerbianLatin = "sr-Latn";
public const string Sesotho = "st";
public const string SesothosaLeboa = "nso";
public const string Setswana = "tn";
public const string Sindhi = "sd";
public const string Sinhala = "si";
public const string Slovak = "sk";
public const string Slovenian = "sl";
public const string SomaliArabic = "so";
public const string Spanish = "es";
public const string SwahiliLatin = "sw";
public const string Swedish = "sv";
public const string Tahitian = "ty";
public const string Tamil = "ta";
public const string TatarLatin = "tt";
public const string Telugu = "te";
public const string Thai = "th";
public const string Tibetan = "bo";
public const string Tigrinya = "ti";
public const string Tongan = "to";
public const string Turkish = "tr";
public const string TurkmenLatin = "tk";
public const string Ukrainian = "uk";
public const string UpperSorbian = "hsb";
public const string Urdu = "ur";
public const string UyghurArabic = "ug";
public const string UzbekLatin = "uz";
public const string Vietnamese = "vi";
public const string Welsh = "cy";
public const string Xhosa = "xh";
public const string Yoruba = "yo";
public const string YucatecMaya = "yua";
public const string Zulu = "zu";
}
}
As there are about 5-10 000 languages in the World, the list above shows that Azure AI translation services supports about 130 of these, which is 1-2 % of the total amount of languages. Of course, the languages supported by Azure AI are also including the most spoken languages in the World.
Let us look at the translation util code next.
ITranslateUtil.cs
namespace MultiLingual.Translator.Lib
{
public interface ITranslateUtil
{
Task<string?> Translate(string targetLanguage, string inputText, string? sourceLanguage = null);
}
}
TranslateUtil.cs
using Azure.AI.Translation.Text;
using MultiLingual.Translator.Lib.Models;
namespace MultiLingual.Translator.Lib
{
public class TranslateUtil : ITranslateUtil
{
private TextTranslationClient _client;
public TranslateUtil()
{
_client = TextAnalyticsClientFactory.CreateTranslateClient();
}
/// <summary>
/// Translates text using Azure AI Translate services.
/// </summary>
/// <param name="targetLanguage"><see cref="LanguageCode" for a list of supported languages/></param>
/// <param name="inputText"></param>
/// <param name="sourceLanguage">Pass in null here to auto detect the source language</param>
/// <returns></returns>
public async Task<string?> Translate(string targetLanguage, string inputText, string? sourceLanguage = null)
{
var translationOfText = await _client.TranslateAsync(targetLanguage, inputText, sourceLanguage);
if (translationOfText?.Value == null)
{
return null;
}
var translation = translationOfText.Value.SelectMany(l => l.Translations).Select(l => l.Text)?.ToList();
string? translationText = translation?.FlattenString();
return translationText;
}
}
}
We use a little helper extension method here too :
StringExtensions.cs
using System.Text;
namespace MultiLingual.Translator.Lib
{
public static class StringExtensions
{
/// <summary>
/// Merges a collection of lines into a flattened string separating each line by a specified line separator.
/// Newline is deafult
/// </summary>
/// <param name="inputLines"></param>
/// <param name="lineSeparator"></param>
/// <returns></returns>
public static string? FlattenString(this IEnumerable<string>? inputLines, string lineSeparator = "\n")
{
if (inputLines == null || !inputLines.Any())
{
return null;
}
var flattenedString = inputLines?.Aggregate(new StringBuilder(),
(sb, l) => sb.AppendLine(l + lineSeparator),
sb => sb.ToString().Trim());
return flattenedString;
}
}
}
Here are some tests for detecting language :
DetectLanguageUtilTests.cs
using Azure.AI.TextAnalytics;
using FluentAssertions;
namespace MultiLingual.Translator.Lib.Test
{
public class DetectLanguageUtilTests
{
private DetectLanguageUtil _detectLanguageUtil;
public DetectLanguageUtilTests()
{
_detectLanguageUtil = new DetectLanguageUtil();
}
[Theory]
[InlineData("Donde esta la playa", "es", "Spanish")]
[InlineData("Jeg er fra Trøndelag og jeg liker brunost", "no", "Norwegian")]
public async Task DetectLanguageDetailsSucceeds(string text, string expectedLanguageIso6391, string expectedLanguageName)
{
string? detectedLangIso6391 = await _detectLanguageUtil.DetectLanguageIso6391(text);
detectedLangIso6391.Should().Be(expectedLanguageIso6391);
string? detectedLangName = await _detectLanguageUtil.DetectLanguageName(text);
detectedLangName.Should().Be(expectedLanguageName);
}
[Theory]
[InlineData("Du hast mich", "de", "German")]
public async Task DetectLanguageSucceeds(string text, string expectedLanguageIso6391, string expectedLanguageName)
{
DetectedLanguage detectedLanguage = await _detectLanguageUtil.DetectLanguage(text);
detectedLanguage.Iso6391Name.Should().Be(expectedLanguageIso6391);
detectedLanguage.Name.Should().Be(expectedLanguageName);
}
}
}
And here are some translation util tests :
TranslateUtilTests.cs
using FluentAssertions;
using MultiLingual.Translator.Lib.Models;
namespace MultiLingual.Translator.Lib.Test
{
public class TranslateUtilTests
{
private TranslateUtil _translateUtil;
public TranslateUtilTests()
{
_translateUtil = new TranslateUtil();
}
[Theory]
[InlineData("Jeg er fra Norge og jeg liker brunost", "i'm from norway and i like brown cheese", LanguageCode.Norwegian, LanguageCode.English)]
[InlineData("Jeg er fra Norge og jeg liker brunost", "i'm from norway and i like brown cheese", null, LanguageCode.English)] //auto detect language is tested here
[InlineData("Ich bin aus Hamburg und ich liebe bier", "i'm from hamburg and i love beer", LanguageCode.German, LanguageCode.English)]
[InlineData("Ich bin aus Hamburg und ich liebe bier", "i'm from hamburg and i love beer", null, LanguageCode.English)] //Auto detect source language is tested here
[InlineData("tlhIngan maH", "we are klingons", LanguageCode.Klingon, LanguageCode.English)] //Klingon force !
public async Task TranslationReturnsExpected(string input, string expectedTranslation, string sourceLanguage, string targetLanguage)
{
string? translation = await _translateUtil.Translate(targetLanguage, input, sourceLanguage);
translation.Should().NotBeNull();
translation.Should().BeEquivalentTo(expectedTranslation);
}
}
}
Over to the UI. The app is made with MAUI Blazor.
Here are some models for the app :
LanguageInputModel.cs
namespace MultiLingual.Translator.Models
{
public class LanguageInputModel
{
public string InputText { get; set; }
public string DetectedLanguageInfo { get; set; }
public string DetectedLanguageIso6391 { get; set; }
public string TargetLanguage { get; set; }
public string TranslatedText { get; set; }
}
}
NameValue.cs
namespace MultiLingual.Translator.Models
{
public class NameValue
{
public string Name { get; set; }
public string Value { get; set; }
}
}
The UI consists of this razor code in, written for Blazor MAUI app.
Index.razor
@page "/"
@inject ITranslateUtil TransUtil
@inject IDetectLanguageUtil DetectLangUtil
@inject IJSRuntime JS
@using MultiLingual.Translator.Lib;
@using MultiLingual.Translator.Lib.Models;
@using MultiLingual.Translator.Models;
<h1>Azure AI Text Translation</h1>
<EditForm Model="@Model" OnValidSubmit="@Submit" class="form-group" style="background-color:aliceblue;">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group row">
<label for="Model.InputText">Text to translate</label>
<InputTextArea @bind-Value="Model!.InputText" placeholder="Enter text to translate" @ref="inputTextRef" id="textToTranslate" rows="5" />
</div>
<div class="form-group row">
<span>Detected language of text to translate</span>
<InputText class="languageLabelText" readonly="readonly" placeholder="The detected language of the text to translate" @bind-Value="Model!.DetectedLanguageInfo"></InputText>
@if (Model.DetectedLanguageInfo != null){
<img src="@FlagIcon" class="flagIcon" />
}
</div>
<br />
<div class="form-group row">
<span>Translate into language</span>
<InputSelect placeholder="Choose the target language" @bind-Value="Model!.TargetLanguage">
@foreach (var item in LanguageCodes){
<option value="@item.Value">@item.Name</option>
}
</InputSelect>
<br />
@if (Model.TargetLanguage != null){
<img src="@TargetFlagIcon" class="flagIcon" />
}
</div>
<br />
<div class="form-group row">
<span>Translation</span>
<InputTextArea readonly="readonly" placeholder="The translated text target language" @bind-Value="Model!.TranslatedText" rows="5"></InputTextArea>
</div>
<button type="submit" class="submitButton">Submit</button>
</EditForm>
@code {
private Azure.AI.TextAnalytics.TextAnalyticsClient _client;
private InputTextArea inputTextRef;
public LanguageInputModel Model { get; set; } = new();
private string FlagIcon {
get
{
return $"images/flags/png100px/{Model.DetectedLanguageIso6391}.png";
}
}
private string TargetFlagIcon {
get
{
return $"images/flags/png100px/{Model.TargetLanguage}.png";
}
}
private List<NameValue> LanguageCodes = typeof(LanguageCode).GetFields().Select(f => new NameValue {
Name = f.Name,
Value = f.GetValue(f)?.ToString(),
}).OrderBy(f => f.Name).ToList();
private async void Submit()
{
var detectedLanguage = await DetectLangUtil.DetectLanguage(Model.InputText);
Model.DetectedLanguageInfo = $"{detectedLanguage.Iso6391Name} {detectedLanguage.Name}";
Model.DetectedLanguageIso6391 = detectedLanguage.Iso6391Name;
if (_client == null)
{
_client = TextAnalyticsClientFactory.CreateClient();
}
Model.TranslatedText = await TransUtil.Translate(Model.TargetLanguage, Model.InputText, detectedLanguage.Iso6391Name);
StateHasChanged();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
Model.TargetLanguage = LanguageCode.English;
await JS.InvokeVoidAsync("exampleJsFunctions.focusElement", inputTextRef?.AdditionalAttributes.FirstOrDefault(a => a.Key?.ToLower() == "id").Value);
StateHasChanged();
}
}
}
Finally, a screenshot how the app looks like :
You enter the text to translate, then the detected language is shown after you hit Submit. You can select the target language to translate the text into. English is selected as default. The Iso6391 code of the selected language is shown as a flag icon, if there exists a 1:1 mapping between the Iso6391 code and
the flag icons available in the app. The top flag show the detected language via the Iso6391 code, IF there is a 1:1 mapping between this code and the available Flag icons.