A browser-based object detection project built with React (Vite), TensorFlow.js, and Tailwind CSS.
This app runs inference directly on the frontend using a YOLOv7 model converted to TensorFlow.js format—no backend required.

• React (with Vite)
• TensorFlow.js
• Tailwind CSS
• TypeScript
• HTML5 Canvas

git clone https://github.com/yourusername/react-yolov7-tfjs.git cd react-yolov7-tfjs

You can use either npm or yarn:

# With npm npm install # With yarn yarn install

# With npm npm run dev # With yarn yarn dev

Then, open http://localhost:5173 in your browser.

Place your TensorFlow.js model files in the following directory:

public/tfjs_model/ 

Expected files:

• model.json
• *.bin (binary weight files)

This project uses a YOLOv7 model converted from PyTorch to TensorFlow.js via ONNX.
Here’s the full conversion pipeline:

Official Tutorial from WongKinYiu to Export Model

Google Collab Execution

This project uses the YOLOv7 implementation by WongKinYiu, which provides strong performance and a more flexible license than later versions (e.g. YOLOv8 by Ultralytics, which uses AGPLv3).

AGPLv3 may restrict commercial use, as it requires full source code disclosure for any publicly accessible app.

• YOLOv7 by WongKinYiu
• TensorFlow.js by Google
• UI powered by Tailwind CSS
• Project scaffolded with Vite

This project is part of my personal learning journey in combining frontend development with machine learning.

Feel free to fork, contribute, or reach out!