Fermer

novembre 3, 2025

Premiers pas avec le composant Blazor SpeechToTextButton

Premiers pas avec le composant Blazor SpeechToTextButton


Ajoutez des fonctionnalités de synthèse vocale à votre application Blazor avec ce composant.

Dans cet article, nous explorerons la nouvelle interface utilisateur Progress Telerik pour Composant Blazor SpeechToTextButtonqui permet une intégration facile de la reconnaissance vocale dans les applications Blazor grâce à la mise en œuvre de l’API Web Speech. Commençons !

Qu’est-ce que l’API Web Speech ?

Le API vocale Web est une spécification créée par le W3C dans le but d’ajouter des fonctionnalités de reconnaissance vocale et de synthèse vocale aux applications Web. De nos jours, les navigateurs les plus couramment utilisés prennent entièrement en charge ces fonctionnalités, ce qui signifie qu’il est possible de créer des applications Blazor qui exploitent son potentiel.

Implémentation de la reconnaissance vocale dans les applications Blazor

Voyons comment implémenter le composant SpeechToTextButton dans une application Blazor entièrement fonctionnelle, en illustrant un cas d’utilisation réel où il serait pratique de l’intégrer.

Quelques cas d’utilisation du contrôle SpeechToTextButton

Il existe de nombreux scénarios dans lesquels la possibilité d’effectuer une reconnaissance vocale est vraiment utile, par exemple :

  • Assistants virtuels et chatbots
  • Prise de notes
  • Dictée de documents
  • Outils d’apprentissage des langues
  • Systèmes de recherche vocale
  • Accessibilité pour les personnes handicapées
  • Parmi tant d’autres

Par conséquent, disposer d’un contrôle Speech-To-Text dans Blazor qui implémente cette fonctionnalité sans avoir à gérer le traitement à l’aide de JavaScript ou à utiliser un service d’IA pour obtenir le texte peut vous aider à créer des solutions robustes basées sur la reconnaissance vocale.

Intégration du composant SpeechToTextButton dans une application Blazor

Pour utiliser le composant SpeechToTextButton dans vos applications Blazor, vous devez d’abord installer et configurer les composants Telerik selon les guide d’installation.

Supposons ensuite que nous ayons un composant de type page qui permet la traduction de langues à l’aide de l’IA, que j’ai rapidement créé à l’aide d’autres composants de la suite Telerik :

@page "https://www.telerik.com/"
@inject IChatClient ChatClient

<div class="translator-container">
    <h2>Language Translator with Speech-to-Text</h2>
    
    <div class="language-selection">
        <div class="language-group">
            <label for="source-language">Source language:</label>
            <TelerikDropDownList @bind-Value="@SourceLanguage" 
                                Data="@Languages" 
                                TextField="@nameof(LanguageOption.Name)"
                                ValueField="@nameof(LanguageOption.Code)"
                                Id="source-language">
            </TelerikDropDownList>
        </div>
        
        <div class="language-group">
            <label for="target-language">Target language:</label>
            <TelerikDropDownList @bind-Value="@TargetLanguage" 
                                Data="@Languages" 
                                TextField="@nameof(LanguageOption.Name)"
                                ValueField="@nameof(LanguageOption.Code)"
                                Id="target-language">
            </TelerikDropDownList>
        </div>
    </div>

    <div class="translation-area">
        <div class="input-section">
            <label for="source-text">Text to translate:</label>
            <div class="input-with-mic">
                <TelerikTextArea @bind-Value="@SourceText" 
                               Placeholder="Type here or use the microphone..."
                               Rows="4"
                               Id="source-text">
                </TelerikTextArea>
                <TelerikButton Icon="@SvgIcon.MicrophoneOutline"
                             ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                             Class="mic-button"
                             Title="Use microphone for speech-to-text">
                    🎤
                </TelerikButton>
            </div>
        </div>

        <div class="output-section">
            <label for="translated-text">Translated text:</label>
            <TelerikTextArea @bind-Value="@TranslatedText" 
                           ReadOnly="true"
                           Rows="4"
                           Id="translated-text"
                           Placeholder="The translation will appear here...">
            </TelerikTextArea>
        </div>
    </div>

    <div class="action-buttons">
        <TelerikButton OnClick="@TranslateText" 
                     ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                     Enabled="@(!string.IsNullOrWhiteSpace(SourceText))">
            Translate
        </TelerikButton>
        
        <TelerikButton OnClick="@ClearText" 
                     ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary">
            Clear
        </TelerikButton>
    </div>

    @if (IsTranslating)
    {
        <div class="loading-indicator">
            <TelerikLoader Visible="true"></TelerikLoader>
            <p>Translating...</p>
        </div>
    }
</div>

<style>
    .translator-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .language-selection {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .language-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 200px;
    }

    .translation-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .input-section, .output-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .input-with-mic {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .input-with-mic .k-textarea {
        flex: 1;
    }

    .mic-button {
        height: 40px;
        width: 40px;
        min-width: 40px;
        font-size: 16px;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .loading-indicator {
        text-align: center;
    }

    label {
        font-weight: bold;
        color: #333;
    }

    @@media (max-width: 768px) {
        .translation-area {
            grid-template-columns: 1fr;
        }
        
        .language-selection {
            flex-direction: column;
        }
    }
</style>

@code {
    private string SourceLanguage = "es";
    private string TargetLanguage = "en";
    private string SourceText = "";
    private string TranslatedText = "";
    private bool IsTranslating = false;

    private List<LanguageOption> Languages = new()
    {
        new LanguageOption { Code = "es", Name = "Spanish" },
        new LanguageOption { Code = "en", Name = "English" },
        new LanguageOption { Code = "fr", Name = "French" },
        new LanguageOption { Code = "de", Name = "German" },
        new LanguageOption { Code = "it", Name = "Italian" },
        new LanguageOption { Code = "pt", Name = "Portuguese" },
        new LanguageOption { Code = "ja", Name = "Japanese" },
        new LanguageOption { Code = "ko", Name = "Korean" },
        new LanguageOption { Code = "zh", Name = "Chinese" },
        new LanguageOption { Code = "ru", Name = "Russian" }
    };

    private async Task TranslateText()
    {
        if (string.IsNullOrWhiteSpace(SourceText))
            return;

        IsTranslating = true;
        StateHasChanged();

        try
        {            
            var sourceLanguageName = Languages.FirstOrDefault(l => l.Code == SourceLanguage)?.Name ?? "the source language";
            var targetLanguageName = Languages.FirstOrDefault(l => l.Code == TargetLanguage)?.Name ?? "the target language";
            
            var prompt = $"Translate the following text from {sourceLanguageName} to {targetLanguageName}. " +
                        $"Return only the translation without additional explanations:\n\n{SourceText}";
            
            var response = await ChatClient.GetResponseAsync(prompt);
            TranslatedText = response.Text ?? "Translation error";
        }
        catch (Exception ex)
        {
            TranslatedText = $"Error: {ex.Message}";
        }
        finally
        {
            IsTranslating = false;
            StateHasChanged();
        }
    }

    private void ClearText()
    {
        SourceText = "";
        TranslatedText = "";
        StateHasChanged();
    }

    public class LanguageOption
    {
        public string Code { get; set; } = "";
        public string Name { get; set; } = "";
    }
}

Comme vous pouvez le voir dans le code ci-dessus, j’ai ajouté un bouton avec l’icône du microphone. 🎤 Le but est de permettre la reconnaissance vocale. Maintenant, si nous voulions implémenter la fonctionnalité de reconnaissance de texte, nous devrions faire face à certains problèmes :

  • Capturer et traiter le flux de l’enregistrement
  • Implémentation du code JS pour obtenir le texte
  • Gestion des erreurs en cas d’exception

La liste ci-dessus ne représente que quelques-uns des défis qu’il nous faudrait beaucoup de temps pour résoudre. Heureusement, le composant SpeechToTextButton implémente tout cela de manière native, nous permettant de nous concentrer sur la résolution de problèmes commerciaux, comme dans ce cas, en permettant à l’utilisateur de traduire rapidement le texte.

Pour utiliser le contrôle, la première chose à faire est d’ajouter le composant à l’interface utilisateur. Dans mon cas, je remplacerai TelerikButton avec le code suivant :

<TelerikSpeechToTextButton Lang="en-US"/>

Dans le cadre de l’utilisation du composant, il est également conseillé d’utiliser le Lang paramètre avec une langue définie, car dans certains scénarios, une résolution automatique de la langue ne se produit pas, comme lors de l’utilisation d’un Bord navigateur ou un Blazor hybride application. L’exécution de l’application avec cette modification donne le résultat suivant :

Implémentation du composant SpeechToTextButton dans une application Blazor

Comme vous pouvez le voir sur l’image ci-dessus, le composant lui-même a une apparence professionnelle. Et, lorsqu’on appuie dessus, il lance le processus de demande d’accès au dispositif d’enregistrement. Vous pourrez également apprécier une gestion du design en fonction de l’état de l’enregistrement, incluant une jolie animation.

Obtention de texte à partir de la parole dans Blazor

Pour obtenir la transcription d’un discours, il faut s’inscrire à l’événement OnResultqui se déclenche lorsqu’une parole est détectée et qu’un résultat correct est obtenu. L’événement définit un argument de type SpeechToTextButtonResultEventArgs qui contient des phrases reconnues, des alternatives et des scores de confiance. Voici un exemple de son utilisation :

<TelerikSpeechToTextButton OnResult="OnSpeechResult" />

@code{
    private void OnSpeechResult(SpeechToTextButtonResultEventArgs args)
    {
        Debug.WriteLine($"Result: {args.Alternatives.FirstOrDefault().Transcript}");
        Debug.WriteLine($"IsFinal: {args.IsFinal}");
        Debug.WriteLine($"Confidence: {args.Alternatives.FirstOrDefault().Confidence}");
    }
    ...
}

Dans le code précédent, on peut voir l’utilisation des propriétés suivantes :

  • Alternatives: Une collection répertoriant des transcriptions alternatives pour l’opération parole-texte
  • IsFinal: Une valeur booléenne indiquant si le résultat est final (vrai) ou non (faux). Si c’est vrai, alors c’est la dernière fois que le résultat sera renvoyé ; sinon, le résultat pourra être mis à jour ultérieurement

Le résultat de l’exécution du code précédent produit la sortie suivante dans le Sortir fenêtre:

Result: How are you?
IsFinal: True
Confidence: 0

Liaison du résultat de synthèse vocale à un composant de texte

Pour afficher le résultat dans l’interface graphique, il suffit de disposer d’un composant de type texte lié à une propriété, dans le but de lui attribuer la valeur de Transcript à partir d’un élément du Alternatives collection. Dans notre exemple, nous avons un TelerikTextArea composant lié au SourceText propriété, nous pouvons donc faire quelque chose comme ce qui suit :

private void OnSpeechResult(SpeechToTextButtonResultEventArgs args)
{
    SourceText = args.Alternatives.FirstOrDefault()?.Transcript ?? "";
}

L’exécution précédente nous permet de saisir rapidement le texte à traduire, comme le montre l’image suivante :

Saisie rapide de texte à l'aide du composant SpeechToTextButton

Sans aucun doute, l’utilisation du composant fait une différence entre dicter une phrase et devoir écrire tout le texte, surtout dans les situations où une introduction rapide du texte est requise ou lorsque le texte est très long.

Modification de l’apparence d’un SpeechToTextButton

Il existe plusieurs paramètres du composant SpeechToTextButton qui permettent une personnalisation rapide si nécessaire.

Tout d’abord, nous pouvons utiliser le paramètre Size pour attribuer l’une des valeurs suivantes :

  • ThemeConstants.Button.Size.Small
  • ThemeConstants.Button.Size.Medium
  • ThemeConstants.Button.Size.Large

De même, il est possible de modifier le remplissage du composant via le paramètre FillMode et l’utilisation de l’une des valeurs suivantes :

  • ThemeConstants.Button.FillMode.Solid
  • ThemeConstants.Button.FillMode.Clear
  • ThemeConstants.Button.FillMode.Flat
  • ThemeConstants.Button.FillMode.Outline

Si vous souhaitez changer la couleur du bouton, vous devez utiliser le paramètre ThemeColor accompagné de l’une des valeurs suivantes :

  • ThemeConstants.Button.ThemeColor.Base
  • ThemeConstants.Button.ThemeColor.Primary
  • ThemeConstants.Button.ThemeColor.Secondary
  • ThemeConstants.Button.ThemeColor.Tertiary
  • ThemeConstants.Button.ThemeColor.Info
  • ThemeConstants.Button.ThemeColor.Success
  • ThemeConstants.Button.ThemeColor.Warning
  • ThemeConstants.Button.ThemeColor.Error
  • ThemeConstants.Button.ThemeColor.Dark
  • ThemeConstants.Button.ThemeColor.Light
  • ThemeConstants.Button.ThemeColor.Inverse

Un autre paramètre configurable est Roundedqui contrôle l’arrondi du composant, géré à travers les valeurs suivantes :

  • ThemeConstants.Button.Rounded.Small
  • ThemeConstants.Button.Rounded.Medium
  • ThemeConstants.Button.Rounded.Large
  • ThemeConstants.Button.Rounded.Full

Il est également possible de changer l’icône grâce au paramètre Iconauquel vous pouvez attribuer une icône Telerik ou une icône personnalisée. Enfin, vous pouvez également appliquer un style personnalisé à l’aide du Class paramètre, comme dans l’exemple suivant :

<TelerikSpeechToTextButton Class="custom-speech-btn" Title="Custom Style" Lang="en-US" />

<style>
    .custom-speech-btn {
        font-size: 1rem;
        background-color: #28a745;
        color: #fff;
        border-radius: 6px;
        transition: background 0.2s;
    }

        .custom-speech-btn:hover {
            background-color: #218838;
        }

</style>

Autres événements disponibles dans le contrôle SpeechToTextButton

Nous avons discuté précédemment de OnResult événement qui nous permet de récupérer le résultat de la reconnaissance vocale. Cependant, nous avons également ces autres événements :

  • OnStart et OnEnd: OnStart est déclenché lorsqu’un enregistrement démarre, tandis que OnEnd se déclenche lorsqu’une reconnaissance vocale se termine. Ils pourraient être utiles pour journaliser, mesurer la durée d’enregistrement, vérifier qu’un discours ne dépasse pas X secondes, etc.
  • OnError: Cet événement est déclenché s’il y a une erreur lors de la reconnaissance vocale.
  • OnClick: Il se déclenche lorsque l’utilisateur appuie sur le bouton.

Conclusion

Tout au long de cet article, vous avez découvert le composant SpeechToTextButton, qui permet une intégration facile de la reconnaissance vocale dans vos applications basées sur Blazor. Si vous souhaitez aider les utilisateurs à être plus efficaces en leur permettant de dicter, c’est certainement un composant que vous devriez essayer.

Vous n’utilisez pas encore l’interface utilisateur Telerik pour les composants Blazor ? La bibliothèque est livrée avec un essai gratuit de 30 jours, alors n’hésitez pas à y jeter un œil :

Essayez maintenant

Le meilleur outil 2023 pour ta croissance Instagram !



Source link