DEV Community: Nafkha-Med Amine

Integration Azure Speech Recongition with Blazor and .NET 8

Nafkha-Med Amine — Wed, 10 Jan 2024 12:53:55 +0000

Introduction

Welcome to an in-depth guide on integrating Azure Speech-to-Text into your Blazor applications. This article aims to provide a comprehensive walkthrough, allowing you to harness the power of speech recognition technology seamlessly within the dynamic Blazor framework.

Prerequisites

List the prerequisites, including:

Azure subscription with Speech resource
Visual Studio or Visual Studio Code installed
Basic knowledge of Blazor and C#

Step 1: Set Up Azure Resources

1.1 Create an Azure Speech Resource:

1.2 Retrieve Subscription Key and Region:

Steps to find the subscription key and region in the Azure Portal.

Step 2: Create a .NET Blazor App

2.1 Create a New Blazor WebAssembly Or Server App:



dotnet new blazorwasm -n YourBlazorWasmApp
cd YourBlazorWasmApp

2.2 Install Azure Speech SDK:
Install-Package Microsoft.CognitiveServices.Speech

Step 3: Implement Speech-to-Text && Text-to-Speech

3.1 Configure Speech Service in Program.cs:

Code snippet for configuring the Speech service in the Blazor app.

3.2 Create a Speech-to-Text && Text-to-Speech Components :



 @using Microsoft.CognitiveServices.Speech
@using Microsoft.CognitiveServices.Speech.Audio
@using Radzen.Blazor
 <RadzenRow>

    <RadzenColumn Size="6">
        <RadzenSpeechToTextButton Change="OnSpeechCaptured"  />
        <RadzenTextArea @bind-Value=@Inputvalue   Style="margin-top:15px"   />
    </RadzenColumn>
</RadzenRow>

@code {
    string? Inputvalue; 



    async void OnSpeechCaptured( string text )
    { 
        var config = SpeechConfig.FromSubscription("YourSpeechSubscriptionKey", "YourSpeechRegion");
        config.SpeechSynthesisLanguage = "en-US";

        using var audioConfig = AudioConfig.FromDefaultMicrophoneInput();
        using var speechRecognizer = new SpeechRecognizer(config, audioConfig);
        var speechRecongResult = await speechRecognizer.RecognizeOnceAsync();
        OutputSpeechRecognitionResult(speechRecongResult); 
    }

    public void OutputSpeechRecognitionResult(SpeechRecognitionResult speechRecognitionResult)
    {
        switch (speechRecognitionResult.Reason)
        {
            case ResultReason.RecognizedSpeech:
                Inputvalue = speechRecognitionResult.Text;
                break;
            case ResultReason.NoMatch:
                Inputvalue = "NOMATCH: Speech could not be recognized.";

                break;
            case ResultReason.Canceled:
                var cancellation = CancellationDetails.FromResult(speechRecognitionResult);
                 Inputvalue = $"CANCELED: Reason={cancellation.Reason}";

                if (cancellation.Reason == CancellationReason.Error)
                {
                    Console.WriteLine($"CANCELED: ErrorCode={cancellation.ErrorCode}");
                    Console.WriteLine($"CANCELED: ErrorDetails={cancellation.ErrorDetails}");
                    Console.WriteLine($"CANCELED: Did you set the speech resource key and region values?");
                }
                break;
        }
    }
}



@using Microsoft.CognitiveServices.Speech
@using Microsoft.CognitiveServices.Speech.Audio
@using Radzen.Blazor
 <RadzenRow>

    <RadzenColumn Size="6">
        <RadzenSpeechToTextButton Change="OnSpeechCaptured"  />
        <RadzenTextArea @bind-Value=@Inputvalue   Style="margin-top:15px"   />
    </RadzenColumn>
</RadzenRow>

@code {
    string? Inputvalue; 



    async void OnSpeechCaptured( string text )
    { 
        var config = SpeechConfig.FromSubscription("YourSpeechSubscriptionKey", "YourSpeechRegion");
        config.SpeechSynthesisLanguage = "en-US";

        using var audioConfig = AudioConfig.FromDefaultMicrophoneInput();
        using var speechRecognizer = new SpeechRecognizer(config, audioConfig);
        var speechRecongResult = await speechRecognizer.RecognizeOnceAsync();
        OutputSpeechRecognitionResult(speechRecongResult); 
    }

    public void OutputSpeechRecognitionResult(SpeechRecognitionResult speechRecognitionResult)
    {
        switch (speechRecognitionResult.Reason)
        {
            case ResultReason.RecognizedSpeech:
                Inputvalue = speechRecognitionResult.Text;
                break;
            case ResultReason.NoMatch:
                Inputvalue = "NOMATCH: Speech could not be recognized.";

                break;
            case ResultReason.Canceled:
                var cancellation = CancellationDetails.FromResult(speechRecognitionResult);
                 Inputvalue = $"CANCELED: Reason={cancellation.Reason}";

                if (cancellation.Reason == CancellationReason.Error)
                {
                    Console.WriteLine($"CANCELED: ErrorCode={cancellation.ErrorCode}");
                    Console.WriteLine($"CANCELED: ErrorDetails={cancellation.ErrorDetails}");
                    Console.WriteLine($"CANCELED: Did you set the speech resource key and region values?");
                }
                break;
        }
    }
}

3.3 Handle Configuration:
In the last provided code snippet , you will notice two placeholders: "YourSpeechSubscriptionKey" and "YourSpeechRegion". These placeholders act as placeholders for your actual Azure Speech resource information.

Step 4: Run and Test

4.1 Run the Blazor App:

dotnet run
4.2 Test Speech-to-Text && Text-to-Speech:

Sharing Data between Blazor and JavaScript ( JS interop )

Nafkha-Med Amine — Sat, 03 Jun 2023 13:45:16 +0000

Introduction:

**
In the ever-evolving landscape of web development, developers are constantly seeking ways to leverage the strengths of different technologies and frameworks. One powerful combination that has emerged is the integration of Blazor, a framework for building web applications using C#, with JavaScript, the ubiquitous language of the web. This integration opens up a world of possibilities, allowing developers to seamlessly share data between Blazor components and JavaScript code.

Sharing data between Blazor and JavaScript is not just a mere technicality; it represents a bridge that connects the robust, type-safe world of C# with the extensive JavaScript ecosystem. It enables developers to harness the power of existing JavaScript libraries, access browser APIs, and collaborate with JavaScript-only components, all while enjoying the declarative programming model and familiarity of C#.

In this article, we will dive deep into the realm of data sharing between Blazor and JavaScript. We will explore the what, why, and how of sharing data.

Steps :

we will walk through a series of use cases that demonstrate the seamless sharing of data between Blazor and JavaScript :

1. Setting up the Project

To set up JavaScript interop in your Blazor project, you need to follow a few steps. First, create a folder named js (or any other name you prefer) inside the wwwroot folder. This folder will store your JavaScript interop files.

Inside the js folder, create individual JavaScript files for each JavaScript interop functionality you want to include. For example, you can have myInterop.js, otherInterop.js, etc. These files will contain the JavaScript functions and event handlers you want to interact with from your Blazor components.

In your Blazor component, use the @inject directive to inject the IJSRuntime dependency. This allows you to interact with JavaScript code from your Blazor component. For example, you can call JavaScript functions, handle JavaScript events, and pass data between JavaScript and Blazor.

To include the JavaScript interop files in your Blazor application, add a reference to the JavaScript files in the _Host file located in the Pages folder. Use the script tag and provide the relative path to the JavaScript file. This ensures that the JavaScript code is loaded when the application starts.

2. Defining the JsonSerializable Class :

Provide the code for the "JsonSerializable" class, which facilitates serialization and deserialization of objects. Emphasize its role in converting objects to JSON format and vice versa.



public interface IJsonSerializable
    {
        string ToJson();
    }



public class JsonSerializable : IJsonSerializable
{
    public string ToJson()
    {
        return JsonConvert.SerializeObject(this, Formatting.Indented, new JsonSerializerSettings
        {
            NullValueHandling = NullValueHandling.Ignore
        });
    }
}

3. Creating the Employee Class :

Introduce the "Employee" class as an example data model that inherits from the "JsonSerializable" class. the class and its properties, such as "Name" and "Age," which will be used for data sharing.



public class Employee : JsonSerializable
{
    [JsonProperty("name")]
    public string Name { get; set; }

    [JsonProperty("age")]
    public int Age { get; set; }
}

4.Use Cases :

Here are the JavaScript interop cases with examples that you can include :

Handling JavaScript events in Blazor :



@inject IJSRuntime jsRuntime

<p>Received employee from JavaScript: <span>@employee.Name @employee.Age </span></p>

@code {

    [JSInvokable]
    public void ReceiveEmployeeFromJavaScript(string employeeJson)
    {
        var employee = JsonConvert.DeserializeObject<Employee>(employeeJson);

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await jsRuntime.InvokeVoidAsync("myJavaScriptFunctionWithCallback", DotNetObjectReference.Create(this));
        }
    }
}



function myJavaScriptFunctionWithCallback(dotnetReference) {
    const employee = {
        name: "Amine Nafkha",
        age: "2000-08-02"
    };
    const employeeJson = JSON.stringify(employee);
dotnetReference.invokeMethodAsync("ReceiveEmployeeFromJavaScript", employeeJson);
}

Calling JavaScript functions from Blazor



@inject IJSRuntime jsRuntime

<button @onclick="async () => await jsRuntime.InvokeVoidAsync("myJavaScriptFunction", employee.ToJson())">Call JavaScript Function</button>

@code {
    private Employee employee = new Employee
    {
        Name = "Amine Nafkha",
        Age = new DateTime(2000, 8, 2)
    };
}

Manipulating the DOM from Blazor Defining the ChangeButtonColor Method:



@inject IJSRuntime jsRuntime

<button @onclick="() => ChangeButtonColor()">Change Button Color</button>


@code {
    private async Task ChangeButtonColor()
    {
        await jsRuntime.InvokeVoidAsync("changeButtonColor");
    }
}



Implementing the changeButtonColor JavaScript Function: 
function changeButtonColor() {
    const button = document.querySelector('button');
    button.style.backgroundColor = 'red';
}

Interop with third-party JavaScript libraries

Blazor's JavaScript Interop feature opens up a world of possibilities for integrating various third-party JavaScript libraries into your applications. One popular library is ApexCharts, which provides feature-rich and interactive charting capabilities. With Blazor's Interop, you can seamlessly utilize ApexCharts within your Blazor components to create stunning visualizations. Here's an example code snippet showcasing the integration of ApexCharts in Blazor:

Create a new JavaScript file, for example, chartInterop.js, in your project's wwwroot/js folder. This file will contain the JavaScript code for rendering the ApexCharts. :

Open the _Host file located in the Pages folder, and add the following line to import the JavaScript file:

In your Blazor component, inject the IJSRuntime service and invoke the JavaScript function :

View :