AI Realtime Transcriber

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.

Recognition Engine

Mode

Settings

Language

Browser mode uses the Web Speech API — no model files or API keys needed. Requires an internet connection.

Transcription

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);
}
}