Hello folks 👋
We've had a bunch of discussions about AI and computer vision, right? Still, today I'm bringing you something else, a little break. I am not revealing a gizmo I wielded but a thing I erected.
PhotoContour began with one riddle: what if a picture could chat with you?
We are talking about a single.svg that you open in any browser, move your mouse pointer over an photo object to see a popup with a label, a short text, and a link. No JavaScript. No dependencies. Just pure CSS.
This is an introduction to the secret behind it:
🔵 First YOLOv8 identifies all objects and extracts their exact contours.
🔵 Then FastAPI transforms these contour points into pixel locations and assembles the SVG.
🔵 React Studio facilitates you to select the object, add annotation, assign a color, and save.
🔵 The end product file is fully self-sufficient can be embedded in email, Twitter, LinkedIn, Discord, or any platform that can render SVG.
Speaking of bugs yes, there were bugs scattered. One was so cleverly disguised in a single variable name that it cost me a couple of hours figuring it out. The solution was one word.
I have done the entire build story the architecture", decisions, the" coordinate system gotcha, the" "accuracy problem that was actually a UX problem", and what's coming next.
📖 Full post here 👇
https://vickkykruzprogramming.dev/blog/one-file-no-server-how-i-built-an-image-that-talks-back
If you have ever desired to animate your pictures, this one might really be a treat for you!
Top comments (0)