PawsitiveAI 🐾 - AI Dog Breed Classifier & Voice Companion

Rafia Minhaj — Sat, 15 Aug 2026 18:26:10 +0000

Introducing PawsitiveAI 🐾

For the DEV Weekend Challenge (Dog Days Edition), I built PawsitiveAI—a sleek, dark-themed, glassmorphic web application that serves as an AI-powered dog breed classifier and interactive voice companion.

It helps dog owners, prospective adopters, and dog lovers identify breeds from photos, discover traits, and listen to a custom voice-generated care guide!

🔗 Project Links

GitHub Repository: github.com/Rafiaminhaj/pawsitive-ai
API Technologies Used: Google Gemini API & ElevenLabs API

🚀 How It Works

Upload & Analyze: Drag and drop or browse any dog image.
Google AI Reasoning: The backend FastAPI server sends the image to Google's Gemini 1.5 Flash model, which classifies the breed and generates structured metadata (traits, care tips, fun facts, exercise requirements, and health indices).
ElevenLabs Voice Synthesis: Clicking the "Listen to Care Guide" button triggers the ElevenLabs API to speak the personalized care guide in a clean, natural voice.
Smart Fallback: If API keys are absent, the application gracefully activates Simulation Mode (mapping popular breeds) and leverages the browser's native Web Speech API for offline speech generation, ensuring a seamless, zero-cost UX for everyone.

🛠️ The Tech Stack

Backend Framework: FastAPI / Uvicorn (Python)
Frontend Design: Glassmorphic HTML5, CSS3 Variables, ES6 JavaScript (No heavy frameworks for maximum load speed).
AI Processing: Deprecating traditional vision APIs for Google AI Generative Models (google-generativeai).
Audio Synthesis: ElevenLabs TTS REST API + Browser SpeechSynthesis.

📸 Interface Preview

Here is how the PawsitiveAI dashboard looks after classifying a Golden Retriever:

Accurate Match Confidence Indicators
Dynamic Telemetry Dial Meters (Exercise & Health Indices)
Interactive Play/Pause Voice Controllers

(Check out the repository for screenshots and codebase structure!)

💡 What I Learned

During this weekend build, I learned how to handle unstructured image inputs to return strict JSON structures from LLMs (Gemini) and parse them safely on the client side. I also enjoyed designing a premium glassmorphic UI using pure CSS variables and radial gradient light sources.

Thank you to the DEV Community and the sponsors (Google AI & ElevenLabs) for organizing this challenge! 🐾

The Jharkhand Kitchen — A Heritage Culinary Landing Page

Rafia Minhaj — Sun, 09 Aug 2026 19:18:10 +0000

What I Built

I built The Jharkhand Kitchen, a premium, highly interactive frontend landing page celebrating the rich culinary heritage of Jharkhand, India. The page highlights two legendary regional comfort foods: Dhuska (a crispy, golden deep-fried rice & lentil savory bread) and Litti Chokha (rustic charcoal-baked whole wheat balls stuffed with spiced sattu, glazed with ghee).

The highlight of the project is a detailed concentric bronze plate containing the dishes, crafted entirely using pure CSS Art (gradients, box-shadows, and keyframe animations for steam).

Link to Source Code

👉 GitHub Repository: Rafiaminhaj/jharkhand-comfort-food

Key Features & Tech Stack

Pure CSS Art: No external images or SVGs were used to render the bronze plate, Dhuskas, Litti, clay bowls, or steam. Everything is styled using layered gradients, border-radius manipulation, and CSS animations.
3D Parallax Tilt Effect: Mouse movement over the food platter and cards calculates the cursor offset in JavaScript to trigger smooth 3D tilting.
The Culinary Duel: An interactive voting system that lets users vote for Team Dhuska or Team Litti Chokha, complete with LocalStorage persistence and coordinate-based custom particle confetti explosions.
Web Accessibility: Focus rings, skip-to-content links, semantic HTML, and an ARIA live region announcer for screen readers to hear vote updates.

Journey & What I Learned

Through this challenge, I pushed my CSS styling skills to the absolute limit. Designing the organic texture of fried Dhuskas and the smoky, charcoal-burned details on the Litti using only CSS gradients and box-shadows was a huge learning experience. Implementing coordinate-based particle math in vanilla JavaScript to make confetti explode from the exact button click location was highly rewarding!

DEV Community: Rafia Minhaj