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