One File. No Server. How I Built an Image That Talks Back.
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...

Source: DEV Community
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