Malawige Inusha Thathsara Gunasekara

Posted on Aug 15

Production AI Dog Breed Identifier & Care Guide

#devchallenge #weekendchallenge

DEV Weekend Challenge: Dog Days Edition Submission 🐕

This is a submission for Weekend Challenge: Dog Days Edition

Have you ever looked at a dog at the park or in an adoption shelter and wondered: "What breed is that, and what kind of care does it need?"

Meet BreedSnap, a production-grade, full-stack canine intelligence web application powered by Google Gemini Multimodal Vision AI. With just a single photo, BreedSnap instantly identifies the dog breed, scores temperament and energy traits, generates a veterinary-grade care guide, and lets you download a verified PDF breeding report with one click.

What I Built

BreedSnap transforms any canine photo into an actionable, comprehensive genetic and breed profile.

Instead of returning a simple text label, BreedSnap delivers a complete companion intelligence profile:

Instant Canine Visual Recognition: Snap a live photo using your phone's camera, drag and drop files from desktop, or test instantly with one-click canine presets (Golden Retriever, Siberian Husky, Pembroke Welsh Corgi).
Deep Breed & Heritage Breakdown: Pinpoints official breed names, historical origins, and confidence ratings with ~99% match accuracy.
5-Factor Trait & Temperament Scoring: Visual 5-point rating bars for:
- Energy Level
- Trainability & Intelligence
- Family & Child Friendliness
- Grooming Demand
- Barking Tendency
Veterinary Care Guide & Health Watchlist: Provides tailored daily exercise routines, coat maintenance frequency, dietary guidelines, adult weight/size specs, life expectancy, and a genetic health watchlist (e.g., hip dysplasia, IVDD, cataracts).
Canine Trivia & Heritage: Uncovers historical folklore and behavioral facts.
Downloadable Official PDF Report: Compiles a print-ready, high-resolution PDF certificate containing the dog's photo, visual rating bars, care matrix, and verification seal.
Voice Pronunciation: Native audio synthesis of complex breed names using the Web Speech API.
Persistent Scan History: Local storage-backed scan drawer allowing users to browse, reload, and re-export past analyses offline.

Demo

Live Application: https://weekend-challenge-dog-days-edition-nine.vercel.app
Source Code Repository: https://github.com/inusha-thathsara/Weekend-Challenge-Dog-Days-Edition---Breed-Identifier

Code

The entire codebase is open-source and available on GitHub:

Repository Link: https://github.com/inusha-thathsara/Weekend-Challenge-Dog-Days-Edition---Breed-Identifier

How I Built It

1. Architecture & Tech Stack

BreedSnap was designed with speed, privacy, and visual excellence in mind:

Frontend: Lightweight Vanilla HTML5, modern CSS3 (custom glassmorphism design system, Outfit & Plus Jakarta Sans typography, smooth micro-animations), and modular ES6+ JavaScript.
Backend API: Node.js & Express with rate-limiting middleware (express-rate-limit) to prevent API abuse and securely isolate the Gemini API key from the browser.
Serverless Ready: Native Vercel Serverless Functions (/api/identify.js, /api/status.js) and vercel.json for 1-click zero-config cloud deployments.
AI Vision Engine: Google Generative Language API (Gemini 3.1 Flash / Gemini 3.7 Flash).
PDF Engine: Client-side document compilation with html2pdf.js and CSS print media stylesheets (@media print).

2. Prompt Engineering & Structured Gemini Vision

To ensure consistent veterinary outputs, Gemini is guided with structured system instructions and responseMimeType: "application/json":

const prompt = `You are a world-class veterinarian and canine genetics expert. Analyze this dog photo carefully.
Respond strictly with valid JSON only (no markdown fencing, no backticks, no explanatory comments).

If the image clearly contains a dog, return:
{
  "isDog": true,
  "breed": "Official breed name (e.g. Golden Retriever, French Bulldog)",
  "confidence": "High (98%) / Medium (85%) / Low (60%)",
  "origin": "Country / Region of origin",
  "summary": "Engaging 2-3 sentence overview of this breed's character and heritage.",
  "temperament": ["Trait 1", "Trait 2", "Trait 3", "Trait 4"],
  "size": "Size category and typical adult weight range (lbs & kg)",
  "lifespan": "Typical life expectancy in years",
  "ratings": {
    "energyLevel": 1-5,
    "groomingDemand": 1-5,
    "trainability": 1-5,
    "childFriendliness": 1-5,
    "barkingTendency": 1-5
  },
  "careGuide": {
    "exercise": "Recommended daily exercise schedule and activity types",
    "grooming": "Coat maintenance and grooming frequency",
    "nutrition": "Dietary requirements or sensitivities",
    "healthWatchlist": "Common genetic health conditions to monitor"
  },
  "funFacts": [
    "Fascinating historical or behavioral trivia item 1",
    "Fascinating historical or behavioral trivia item 2"
  ]
}

If the image does NOT contain a dog:
{
  "isDog": false,
  "message": "A friendly, witty description of what is actually visible in the image."
}`;

3. Resilient Multi-Model Fallback Cascade

To guard against high-demand traffic spikes and quota limits, the backend implements an automatic fallback cascade across Gemini models:

gemini-3.1-flash-lite (ultra-fast latency & high throughput)
gemini-3.7-flash (deep multimodal reasoning)
gemini-3.5-flash (high-capacity fallback)

If any model encounters high demand or temporary unavailability, the request seamlessly transitions to the next model without failing the user experience.

4. Official PDF Report Generation

Rather than a simple screenshot, clicking Download PDF Report dynamically constructs a high-resolution, branded certificate offscreen, formatting:

The analyzed dog's photo
Official breed title & match badge
Visual 5-star trait rating bars
3-column care guide matrix
Health watchlist alert box
Official diagnostic verification stamp

What's Next for BreedSnap?

Multi-Dog Detection: Identifying and segmenting multiple dogs in a single group photo.
Mixed Breed Percentage Estimator: Estimating heritage percentages for rescue and cross-breed dogs.
PWA Support: Full offline caching with installable mobile home-screen capabilities.

Thank you for reading! Feel free to check out the live demo and share your feedback in the comments.

DEV Community