ai-bio-annotator

• 

  Diagram of a brain with accurate highlighting and titlecard descriptions

• 

  Brief overview

• 

  Quiz format

• 

  Quiz autograder

My goal was to create a tool that could intelligently analyze scientific diagrams. I built the application with a secure two-part architecture to make this possible.

The frontend, which is the website users see, was built with standard HTML, CSS, and JavaScript. I used the Anime.js library to add smooth, professional animations to the interface.

The backend is a server built on Node.js using the Express.js framework. This was a critical security measure to protect the API key. When a user uploads an image, the frontend sends it to this server. The server then securely communicates with the Google Gemini API, sending the image and a highly specific set of instructions.

The most challenging part was crafting the perfect "prompt" to command the AI. I had to instruct it to trace the precise anatomical boundaries of structures instead of just drawing lazy boxes. The AI sends back a structured JSON file with coordinates, descriptions, and quiz questions. My frontend JavaScript then parses this data to dynamically draw the SVG polygon highlights over the image and build the interactive quiz.

Built With

• anime.js
• cors
• css3
• css3-backend:-runtime:-node.js-framework:-express.js-middleware:-multer-(for-handling-image-file-uploads)
• express.js
• google-gemini-api
• html5
• javascript
• languages:-javascript-(es6+)
• multer
• node.js
• svg