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