What I Built
This project wrapped YOLO object detection in a small web app. I wanted the detection flow to feel usable without opening a notebook or running commands: choose an upload or webcam path, run detection, and see annotated output in the browser.
How It Worked
The app used Flask for the backend, OpenCV for frame handling, Ultralytics YOLOv8 for detection, and Tailwind, Flowbite, and WebcamJS for the browser side. It used a general-purpose model, so the interesting part was the web integration rather than model tuning.
I built Flask routes for the home page, webcam mode, upload mode, streamed detection, and webcam image detection. Uploads were saved under static/uploads, then passed into the detector. Webcam captures were posted as base64 data URIs, saved as an image, and routed through the same detection response.
The detector wrapper loaded the YOLO model and label file, opened the source with OpenCV VideoCapture, resized frames to bounded dimensions, ran streamed inference, and drew bounding boxes, class labels, and confidence values onto each frame. Flask returned the result as a multipart frame stream so the browser could display the annotated output.
What I Would Keep
I split the web route layer from ObjectDetector.py. Flask handled forms, sessions, uploads, webcam captures, and streaming responses; the detector module handled model loading, frame processing, resizing, and annotation.
That separation was small but useful. It meant the model path could change without rewriting the whole UI flow, which was the right level of modularity for a personal computer-vision web app.
Where It Sits Now
This belongs in the archive as earlier computer-vision and web-integration work. It shows the complete path from browser input to annotated detection output in a small, understandable app.