Crear una Windows 10 UWP App y utilizar YoloV2 para reconocer objetos
- Introduccion a YoloV2 como modelo de reconocimiento de objetos
- Como crear una UWP App y analizar los frames de la webcam utilizando YoloV2
- Convirtiendo el resultado de YoloV2 a clases C# y mostrarlas en modo Frames
- Redimensionar el output para trabajar con diferentes resoluciones y mostrar los Frames procesados por segundo con YoloV2
Buenas!
Si retomamos el post anterior veremos que ya tenemos un proceso en tiempo real del video de la webcam analizado con Tiny-YoloV2. El modelo retorna resultados en una imagen de tamaño 416×416, y es por eso por lo que la imagen anterior el Frame de la persona se ve con un aspecto extraño.
El tratamiento para que el output se adapte al tamaño del control del WebCam puede solucionarse con 2 líneas de código.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private uint _overlayCanvasActualWidth; | |
| private uint _overlayCanvasActualHeight; | |
| private void DrawYoloBoundingBox(YoloBoundingBox box, Canvas overlayCanvas) | |
| { | |
| // get current webcam and canvas size | |
| _overlayCanvasActualWidth = (uint)YoloCanvas.ActualWidth; | |
| _overlayCanvasActualHeight = (uint)YoloCanvas.ActualHeight; | |
| // process output boxes | |
| var x = (uint)Math.Max(box.X, 0); | |
| var y = (uint)Math.Max(box.Y, 0); | |
| var w = (uint)Math.Min(overlayCanvas.ActualWidth – x, box.Width); | |
| var h = (uint)Math.Min(overlayCanvas.ActualHeight – y, box.Height); | |
| // fit to current canvas and webcam size | |
| x = _overlayCanvasActualWidth * x / 416; | |
| y = _overlayCanvasActualHeight * y / 416; | |
| w = _overlayCanvasActualWidth * w / 416; | |
| h = _overlayCanvasActualHeight * h / 416; | |
| … |
Y de esta forma, ya podemos dibujar los Frames con el aspecto correcto. En la siguiente imagen es posible ver como se detecta una persona, con un bajo score de precisión y como además uno de los cuadros de la pared se lo detecta como un monitor.
A partir de aquí se pueden optimizar muchas cosas, por ejemplo, solo tomar el valor del tamaño
del canvas en el Resize de la App.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| protected override async void OnNavigatedTo(NavigationEventArgs e) | |
| { | |
| LoadYoloOnnxModel(); | |
| Window.Current.SizeChanged += Current_SizeChanged; | |
| await CameraPreview.StartAsync(); | |
| CameraPreview.CameraHelper.FrameArrived += CameraHelper_FrameArrived; | |
| } | |
| private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e) | |
| { | |
| _yoloCanvasActualWidth = (uint)YoloCanvas.ActualWidth; | |
| _yoloCanvasActualHeight = (uint)YoloCanvas.ActualHeight; | |
| } |
En el ejemplo final, he agregado además un indicador visual que muestra la cantidad de frames procesados por segundo y el tamanio real con el que se esta trabajando.
El código completo del ejemplo se puede descargar desde
https://github.com/elbruno/Blog/tree/master/20180704%20UwpMLNet%20TinyYoloV2
Happy Coding!
Saludos @ Mississauga
El Bruno
References
- YOLO: Real-time object detection
- YOLO9000: Better, Faster, Stronger by Joseph Redmon and Ali Farhadi (2016)
- ONNX Tools
- Azure AI Gallery, Tiny YOLO V2
- El Bruno, Windows Community Toolkit V 3.0 makes life incredibly easy if you need working with the camera in a UWP App
- Visual Studio Marketplace, Visual Studio Tools for AI
- Real-time object detection with YOLO
- Rene Schulte GitHub
- Sevans4067 WinML-TinyYolo
El Bruno 
5 comments