DEV Community

ANIRUDDHA ADAK
ANIRUDDHA ADAK Subscriber

Posted on

AI Blood Journal

#deved #learngoogleaistudio #ai #gemini

Education Track: Build Apps with Google AI Studio

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built the AI Blood Journal, a modern web application designed to empower users to track, understand, and visualize their health data. The app allows users to log their blood test results (like glucose, cholesterol, and hemoglobin), view historical trends in charts, and most importantly, receive an AI-powered analysis of their latest entry.

To achieve this, I used two powerful Google AI models:

  1. Gemini (gemini-2.5-flash-preview-04-17): This model analyzes the numerical data from a blood test entry. I prompted it to provide an easy-to-understand summary, compare the values to typical ranges, and offer general wellness suggestions, all while including a crucial medical disclaimer.
  2. Imagen (imagen-3.0-generate-002): Taking the analysis a step further, I used Imagen to generate a unique, abstract, and artistic image that visually represents the user's health data. The prompt asks for a "hopeful, positive, and modern" digital painting based on the key health indicators.

The application also features a dark mode, a modern violet color scheme, and the ability to download the generated AI artwork as a PNG or JPEG, or share it using the native Web Share API.

Demo

Here is a look at the AI Blood Journal in action.

Main Interface:

Image den

AI Analysis & Generated Image:

Imaanns tion

You can try out the live application here:Visit

My Experience

Working on this project has been an incredibly insightful journey into the capabilities of Google's AI ecosystem. My key takeaway is how simple yet powerful it is to integrate sophisticated AI features into a practical application.

What I learned:

  • Multi-Modal AI Integration: I learned how to combine a text-based model (Gemini) with an image generation model (Imagen) to create a multi-faceted and engaging user experience. It's not just about data analysis; it's about data interpretation and representation.
  • API Handling: I got hands-on experience handling different types of API responses, from streaming text for the analysis to processing base64 image data from Imagen. I also implemented robust error handling for both services.
  • Frontend Craftsmanship: The project was a great opportunity to build a polished frontend with React and Tailwind CSS, focusing on a clean, responsive, and accessible UI. Implementing features like downloading different image formats and using the Web Share API were great learning experiences.

What was surprising?
I was genuinely surprised by the quality and artistic nature of the images generated by Imagen. Prompting it to create an "abstract, artistic, and vibrant digital painting" based on health data resulted in beautiful, unique visuals that add a deeply personal and encouraging touch to the user's health journey. I initially expected something more literal, but the abstract results were far more compelling. The ability to transform cold, hard numbers into something beautiful and hopeful is a powerful concept, and it was amazing to see it come to life so easily with the Google AI SDK.

Top comments (0)