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.
@* 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();
}
}