AI Realtime Transcriber

BptAIRealtimeTranscriber

The BptAIRealtimeTranscriber component enables real-time speech-to-text transcription from a microphone using various speech recognition backends with voice activity detection (VAD).

Note: AI models are not included with this component. The models available on this demo page are for testing purposes only. Feel free to use your own models. Browser mode uses the Web Speech API (no model needed). Server mode requires you to provide your own speech recognition models.

This AI component can run with or without its built-in UI. Set ShowBuiltInUI="false" to use it as a purely technical component — load the model, push data in, and receive results through events.

AI Realtime Transcriber Parameters

Feedback window

Current Configuration

📋

<BptAIRealtimeTranscriber @ref="BptAIRealtimeTranscriberComponent"
    Debug="true"
    Mode="BptAIRealtimeTranscriberMode.Browser"
    Language="@Language"
    OnModelLoaded="@HandleModelLoaded"
    OnStatusUpdate="@HandleStatusUpdate"
    OnRecordingStateChanged="@HandleRecordingStateChanged"
    OnResponseTokenPartComplete="@HandlePartialResponse"
    OnResponseCompleted="@HandleCompletedResponse">
</BptAIRealtimeTranscriber>

@code {
// Mode: Browser
private String Language { set; get; } = "en-US";
private BptAIRealtimeTranscriber? BptAIRealtimeTranscriberComponent;
private Boolean _isModelLoaded { set; get; } = false;
private Boolean _isRecording { set; get; } = false;

// Event handlers
private async Task HandleModelLoaded(Boolean isLoaded)
{
    _isModelLoaded = isLoaded;
    await InvokeAsync(StateHasChanged);
}

private async Task HandleRecordingStateChanged(Boolean isRecording)
{
    _isRecording = isRecording;
    await InvokeAsync(StateHasChanged);
}

private async Task HandleCompletedResponse(String completeText)
{
    AIResponseText += completeText.Trim();
    await InvokeAsync(StateHasChanged);
}
}

Related learning

See the Speech-to-Text tutorial for a step-by-step walkthrough.