AI Speech-to-Text

BptAISpeechToText

The BptAISpeechToText component lets you upload/process a sound file and extract speech from it as text using Whisper models.

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. In WebAssembly mode, models are automatically downloaded from Hugging Face to your browser. In Server mode, you must provide your own Whisper GGML model.

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 Speech-to-Text Parameters

Feedback window

Current Configuration

📋

<BptAISpeechToText @ref="BptAISpeechToTextComponent"
    Mode="BptAISpeechToTextMode.WebAssembly"
    Debug="true"
    HuggingFaceModelName="@SelectedHuggingFaceModel"
    HuggingFaceApiKey="@HuggingFaceApiKey"
    Language="@SelectedLanguageCode"
    OnModelLoaded="@HandleModelLoaded"
    OnStatusUpdate="@HandleStatusUpdate"
    OnResponseCompleted="TextResponseCompleted">
</BptAISpeechToText>

@code {
// Fields
private String AIResponseText { set; get; } = "";
private String StatusText { set; get; } = "";
private String SelectedLanguageCode { set; get; } = "auto";
private Boolean _isModelLoaded { set; get; } = false;
private Boolean _isProcessing { set; get; } = false;
private BptAISpeechToText? BptAISpeechToTextComponent;

// Event handlers
private async Task HandleStatusUpdate(string status)
{
    StatusText = status;
    await InvokeAsync(StateHasChanged);
}

private async Task HandleModelLoaded(bool success)
{
    _isModelLoaded = success;
    await InvokeAsync(StateHasChanged);
}

private async Task TextResponseCompleted(String complete_response)
{
    AIResponseText = complete_response;
    _isProcessing = false;
    await InvokeAsync(StateHasChanged);
}
}

Related learning

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