This project is a web-based real-time object detection and classification app built with React, ONNX Runtime Web, and YOLOv10 models (n, s, m variants). It captures webcam frames, processes them with a selected YOLO model in the browser, and displays detections with bounding boxes and labels.

This is a Next.js project bootstrapped with create-next-app.

• Real-time webcam inference using ONNX models
• Switchable YOLOv10 models (nano, small, medium)
• Adjustable confidence threshold
• Live performance metrics (inference time, FPS, detection count)
• Visual overlay of bounding boxes and labels on a canvas
• Classes: COCO dataset

• React + TypeScript + Tailwind CSS
• onnxruntime-web for client-side inference
• react-webcam for video input
• Yolo v10 ONNX models for face detection and classification (from https://huggingface.co/onnx-community/yolov10n)

Inference code is based on https://onnxruntime.ai/docs/tutorials/web/build-web-app.html

First, run the development server:

npm run dev

Open http://localhost:3000/nextjs-yolov10-onnx with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

npm run build

Builds a static export for production to the out directory. Preview the production build locally with npm run preview.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!