BPT

Object detector

BptImageObjectDetector

The BptImageObjectDetector component uses ONNX Runtime to detect objects in images with support for multiple model architectures (RF-DETR, RTMDet, YOLOv8, and Conditional DETR). It downloads the selected model on first use, runs inference in pure C#, and renders annotated bounding boxes on a canvas overlay.

Object Detector Parameters
50%
0% 100%
Current Configuration
📋
@* Parent-driven model picker — the component no longer owns one *@
<BptDropdown Items="@modelNames"
             Value="@selectedModelName"
             OnSelectionChanged="OnModelSelected"
             Width="260px" />

@* Reload button cycles imageSrc to a new random picsum seed *@
<BptButton Text="Reload random image"
           Variant="BptButtonVariant.Outlined"
           OnClick="ReloadImage" />

@* The detector owns its own confidence slider + Detect/Clear/Download
   buttons when ShowControls is true (the default). *@
<BptImageObjectDetector Src="@imageSrc"
                        Model="@selectedModel"
                        ConfidenceThreshold="50"
                        MaxDetections="50"
                        ShowControls="true"
                        OnDetectionComplete="HandleDetection"
                        Width="100%" />

@* Optional: render a results table from the OnDetectionComplete callback *@
@if (detections is { Count: > 0 })
{
    <table class="table table-sm">
        <thead>
            <tr><th>#</th><th>Class</th><th>Confidence</th></tr>
        </thead>
        <tbody>
            @{ var i = 0; }
            @foreach (var d in detections)
            {
                i++;
                <tr>
                    <td>@i</td>
                    <td><code>@d.ClassName</code></td>
                    <td>@(d.Confidence.ToString("P1"))</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    // ===========================
    // State
    // ===========================
    private int _seedCounter = 1;
    private int confidenceThreshold = 50; // 0-100 percent
    private string imageSrc = "https://picsum.photos/seed/demo_1/800/600";
    private List<DetectionResult>? detections;

    // Model picker — parent owns the list and the current selection
    private readonly List<string> modelNames =
        DetectionModels.All.Select(m => m.Name).ToList();
    private string selectedModelName = DetectionModels.RfDetrLarge2026.Name;
    private DetectionModel selectedModel = DetectionModels.RfDetrLarge2026;

    // ===========================
    // Handlers
    // ===========================
    private void ReloadImage()
    {
        _seedCounter++;
        detections = null;
        imageSrc = $"https://picsum.photos/seed/demo_{_seedCounter}/800/600";
    }

    private void OnModelSelected(string name)
    {
        selectedModelName = name;
        var match = DetectionModels.All.FirstOrDefault(m => m.Name == name);
        if (match is not null)
        {
            selectedModel = match;
            detections = null;
        }
    }

    private void HandleDetection(List<DetectionResult> results)
    {
        detections = results;
        StateHasChanged();
    }
}
Related learning

See the Image Processing tutorial for a step-by-step walkthrough.

An unhandled error has occurred. Reload 🗙

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.