Integracja Azure AI w ASP.NET Core Blazor

Chcesz zbudować aplikację, która rozumie klientów na całym świecie?

Przełam bariery językowe raz na zawsze, dodając do swojego systemu ticketów moc Azure AI! W tym wpisie pokażę Ci, jak w prosty sposób zintegrować wykrywanie języka i tłumaczenie w aplikacji Blazor, dzięki którym Twój zespół wsparcia zrozumie każdego klienta – bez względu na to, czy pisze po włosku, hiszpańsku czy francusku.

Dlaczego to jest ważne?

Wyobraź sobie sytuację: klient z Włoch wysyła zgłoszenie po włosku. Twój zespół wsparcia zna tylko polski. Co robisz?
Zazwyczaj – ból głowy i opóźnienie w obsłudze.
Ale nie z Azure AI!

W naszym demo w ASP.NET Core Blazor pokazuję, jak automatycznie wykrywać język wiadomości i natychmiast tłumaczyć ją na polski. Zero frustracji, zero zbędnych pytań do klienta.

Co już potrafimy?

W poprzednich odcinkach nauczyliśmy naszą aplikację:

• Generować głos (text-to-speech)
• Tworzyć teksty alternatywne do obrazków z AI Vision
• Analizować sentyment wiadomości klientów z Azure AI Language

Teraz czas na kolejny krok – wykrywanie języka i tłumaczenie.

Demo: Jak to działa?

Efekt końcowy

Na stronie tworzenia ticketa klient wpisuje zgłoszenie w swoim języku, np.:

“Ciao, il mio ordine non è ancora arrivato e sono preoccupato. Potresti controllare lo stato?”

Klikając „Wyślij”, uruchamia nasz AI, który:

• Rozpoznaje język (w tym wypadku włoski)
• Jeśli to nie jest polski, tłumaczy wiadomość na polski
• Zapisuje oryginalny tekst oraz tłumaczenie w bazie danych

Jak wygląda to dla zespołu wsparcia?

W panelu administracyjnym agent widzi:

• Informację o oryginalnym języku wiadomości
• Oryginalny tekst – bo może zna ten język
• Polskie tłumaczenie – które pozwala natychmiast odpowiedzieć

Prosto, praktycznie i efektywnie!

Krok po kroku: Kod i integracja

1. Rejestrujemy dwóch AI Agentów

• TextAnalyticsClient – do wykrywania języka (już masz go z poprzednich integracji)
• TextTranslationClient – nowość, do tłumaczenia, z pakietu Azure.AI.Translation.Text

<PackageReference Include="Azure.AI.TextAnalytics" Version="5.3.0" />
<PackageReference Include="Azure.AI.Translation.Text" Version="1.0.0" />

2. Konfiguracja w appsettings.json

{
  "TRANSLATION_KEY": "my-key",
  "TRANSLATION_ENDPOINT": "https://devhobby-ai-translator.cognitiveservices.azure.com/",
  "TRANSLATION_REGION": "westeurope"
}

3. Dodanie wpisów w ModelSettings

public class ModelSettings
{
    ...
    public string TRANSLATION_KEY { get; set; } = string.Empty;
    public string TRANSLATION_ENDPOINT { get; set; } = string.Empty;
    public string TRANSLATION_REGION { get; set; } = string.Empty;
}

4. Dodajemy ustawienia do modelu i rejestrujemy klienta w Program.cs

builder.Services.AddScoped(sp =>
{
    var modelSettings = sp.GetRequiredService<IOptions<ModelSettings>>();

    AzureKeyCredential credentials = new(modelSettings.Value.TRANSLATION_KEY);
    string translationRegion = modelSettings.Value.TRANSLATION_REGION;

    return new TextTranslationClient(credentials, translationRegion);
});

4. Logika w TicketDataService

• Detekcja języka: DetectLanguageAsync() z TextAnalyticsClient
• Tłumaczenie: TranslateAsync() z TextTranslationClient – tylko jeśli język nie jest polski
• Zapis: oryginalna wiadomość + tłumaczenie w bazie (MessageEn jako polskie tłumaczenie)

public class TicketDataService : ITicketDataService
{
    ...
    private readonly TextAnalyticsClient _textAnalyticsClient;
    private readonly TextTranslationClient _textTranslationClient;
    ...

    public TicketDataService(
        ...
        TextAnalyticsClient textAnalyticsClient,
        TextTranslationClient textTranslationClient)
    {
        ...
        _textAnalyticsClient = textAnalyticsClient;
        _textTranslationClient = textTranslationClient;
    }


 public async Task<Ticket> AddTicket(Ticket ticket)
 {
     ...
     await GetTicketLanguage(ticket.TicketMessages.First());

     return await _ticketRepository.AddTicket(ticket);
 }

...

 private async Task GetTicketLanguage(TicketMessage ticketMessage)
 {
    Azure.AI.TextAnalytics.DetectedLanguage detectedLanguage = _textAnalyticsClient.DetectLanguage(ticketMessage.Message);
    ticketMessage.Language = detectedLanguage.Iso6391Name;

    string targetLanguage = "pl";

    if (detectedLanguage.Iso6391Name != targetLanguage)
    {
        Response<IReadOnlyList<TranslatedTextItem>> response = await _textTranslationClient.TranslateAsync(targetLanguage, ticketMessage.Message);
        IReadOnlyList<TranslatedTextItem> translations = response.Value;
        TranslatedTextItem translation = translations.FirstOrDefault();
        ticketMessage.MessageEn = translation?.Translations?.FirstOrDefault()?.Text;
    }
  }
...
}

UI: Jak pokazujemy tłumaczenie w Blazor?

@if (message.Language != "pl")
{
    <div class="form-group row">
        <div>
            <img src="images/flags/pl.png" width="30" />
            <label class="col-sm-4 col-form-label">Przetłumaczona wiadomość</label>
        </div>
        <div class="col-sm-8">
            <label readonly class="form-control-plaintext">@message.MessageEn</label>
        </div>
    </div>
}

AI w .NET: Zostań Architektem Inteligentnych Aplikacji!

Jesli zainteresował Cię ten artykuł, pełna integracja, pełny kurs znajdziesz tutaj

Podsumowanie: Twórz aplikacje jak mistrz AI!

Dzięki temu demo Twoja aplikacja Blazor staje się globalna, inteligentna i praktyczna.
Z Azure AI Language i Translator budujesz rozwiązanie, które rozumie i tłumaczy, eliminując bariery językowe.

Nie trać czasu na manualne tłumaczenia czy frustrację zespołu. Wykorzystaj potęgę AI, by podbić międzynarodowy rynek!

---

Gotowy, by wprowadzić swoją aplikację na światowy poziom?
Zacznij od wykrywania języka i tłumaczenia — bo każdy klient zasługuje na zrozumienie.

---

Chcesz więcej takich praktycznych porad?
Zasubskrybuj mój kanał na YouTube i bądź na bieżąco z innowacyjnymi technikami .NET i Azure AI.