Computer Vision

Inspiration

I was inspired by webcore and old windows. Moreover, the youtuber Shar's portfolio website also inspired me to create this project.

What it does

It's a website showcasing what I've learned over the years. My design skills weren't always the best, and I had no idea what computer vision even was a year ago, but this project shows my growth.

How I built it

I made it on codesandbox with Next.js and TailwindCSS. The computer vision aspect was handled by ultralytics YOLO model, and making it accessible via browser was completed by hours and hours of googling. It was incredibly fun!

Challenges I ran into

I had never had a model work on browser before, so it took quite a while for me to figure out how to configure it. The biggest problem was getting the bouding boxes to be visible, as there was a bug where it would keep re-rendering before showing it.

Accomplishments that I'm proud of

I'm so happy to have finally gotten the YOLO model working on the website. It uses a lot of resources, so I had to find ways so that it wouldn't explode. Luckily, "webgpu" came in handy. This aspect took me the longest to implement due to how complicated it was, so seeing it working gives me unparalleled joy.

What I learned

I learned how to use react-draggable and onnnxruntime-web in Next.js. I used the former to make my popups moveable and the latter for webgpu and the YOLO model.

What's next for Computer Vision

I plan on adding a music function and making the minimize button change the z-index of the websites. Moreover, I plan to add GroqAPI into the website for an extra touch.

Built With

• codesandbox
• next.js
• react-draggable
• tailwindcss
• ultralytics
• yolov8