The IsabyteImageObjectDetector 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.
Current Configuration
📋[+]
@* Parent-driven model picker — the component no longer owns one *@
<IsabyteDropdown Items="@modelNames"
Value="@selectedModelName"
OnSelectionChanged="OnModelSelected"
Width="260px" />
@* The button steps imageSrc through your own same-origin images *@
<IsabyteButton Text="Next gallery image"
Variant="IsabyteButtonVariant.Outlined"
OnClick="ReloadImage" />
@* The detector owns its own confidence slider + Detect/Clear/Download
buttons when ShowControls is true (the default). *@
<IsabyteImageObjectDetector 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
// ===========================
// Your own images, served from your app's wwwroot (same-origin: the
// detector draws the image onto a canvas)
private static readonly string[] images =
{ "/gallery/1200/lion.jpg", "/gallery/1200/red-fox.jpg", "/gallery/1200/city-skyline.jpg" };
private int imageIndex;
private int confidenceThreshold = 50; // 0-100 percent
private string imageSrc => images[imageIndex];
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()
{
imageIndex = (imageIndex + 1) % images.Length;
detections = null;
}
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();
}
}
