-
-
Earth is asking: What challenges do you see around you due to climate change?
-
A striking visualization of the Global Warming Crisis, prompting immediate engagement with the "Take Action Now" button.
-
acking Global Temperature Anomalies and calculating Impact Reduction with sustainable choices like a Vegetable Diet
-
Visualize your contribution to saving the planet! Choose to Switch Energy, Take Public Transport, or Plant Trees to make a difference.
-
Advanced Climate Visualizations": Tracking personal progress with the Personal Carbon Footprint Tracker, showing a steady decline in monthly
-
Climate AI in action: An interface where the user asks about Faridabad's pollution and receives an in-depth breakdown of the root causes.
-
A striking visualization of the Global Warming Crisis, prompting immediate engagement with the "Take Action Now" button.
Climate change affects 8 billion people, yet most feel overwhelmed and don't know where to start. During DevFest preparation, I realized three critical gaps:
- Information Gap: People don't understand the local impact of climate
change - Action Gap: Even aware individuals lack personalized, actionable solutions - Motivation Gap: Individual actions feel insignificant without visible collective impact
I built Climate Action AI to bridge these gaps using Google Gemini's intelligence to make climate action accessible, personalized, and impactful for everyoneβregardless of language, location, or lifestyle.
π οΈ What it doe
Climate Action AI is an intelligent platform that empowers individuals to combat climate change through:
π€ AI Climate Assistant (Google Gemini 2.0 Flash)
- Answers climate questions in English, Hindi, and Hinglish
- Provides location-aware recommendations
- Offers 3 actionable steps you can take TODAY
- Maintains conversation context for follow-ups
π Real-Time Climate Dashboard
- Global temperature anomaly tracker
- COβ concentration visualization (420+ ppm)
- Arctic ice decline simulation
- Sea level rise monitoring
- Extreme weather event tracker
π Interactive 3D Earth Experience
- Beautiful Three.js rotating globe
- Floating AI assistant - Earth speaks about climate struggles
- Creates emotional connection through storytelling
π― Personalized 30-Day Action Plans
- Customized based on location, lifestyle, and concerns
- Daily challenges with carbon reduction estimates
- Cost savings calculations
- Tree equivalent conversions
- Community progress tracking
π Impact Visualization
- Personal carbon footprint tracker
- Community leaderboard (gamification)
- Before/after predictions
- Measurable COβ reduction metrics
π¨ How we built it
Frontend Stack:
- HTML5/CSS3 - Modern, responsive UI with gradient animations
- JavaScript ES6+ - Interactive features and dynamic content
- Three.js - 3D Earth visualization with realistic textures
- Chart.js - Beautiful climate data visualizations
- CSS Grid/Flexbox - Mobile-first responsive design
Backend Stack:
- Node.js - Runtime environment
- Express.js - RESTful API server
- Google Generative AI SDK - Gemini integration
- Node-Cache - Response caching for performance
- Axios - HTTP client for API calls
AI Integration:
- Google Gemini 2.0 Flash - Primary AI model
- Custom prompt engineering for climate expertise
- Multi-language detection algorithm
- Context-aware conversation handling
- Fallback system for API reliability
Development Process:
- Research Phase: Studied IPCC reports, UN climate data, and user needs
- Design Phase: Created wireframes focusing on accessibility
- AI Integration: Implemented Gemini with custom climate prompts
- Visualization: Built interactive charts and 3D Earth
- Testing: Tested with English, Hindi, Hinglish queries
- Deployment: Deployed to VPS with Nginx reverse proxy
πͺ Challenges we ran into
- Gemini API Model Compatibility
- Challenge: Multiple model versions (gemini-pro, gemini-1.5-flash)
returned 404 errors - Solution: Implemented fallback system with gemini-2.0-flash-exp and robust error handling
- Multi-Language Support
- Challenge: Automatically detecting and responding in user's language
(English/Hindi/Hinglish) - Solution: Created intelligent prompt engineering that instructs Gemini to match user's language
- Real-Time Data Integration
- Challenge: Integrating live climate data from multiple sources
- Solution: Built simulation layer with realistic data patterns; ready for
API integration
- Performance Optimization
- Challenge: Gemini API calls were slow for repeated queries
- Solution: Implemented node-cache with 1-hour TTL for frequently asked
questions
- Mobile Responsiveness
- Challenge: Complex charts and 3D Earth broke on mobile devices
- Solution: Implemented responsive CSS Grid, touch controls, and adaptive
chart sizing
- Context Preservation
- Challenge: Maintaining conversation context across multiple AI queries
- Solution: Implemented session-based conversation history (ready for user
authentication)
π Accomplishments that we're proud of
β Successfully integrated Google Gemini 2.0 Flash with custom climate expertise prompts β Multi-language AI support - Seamless English/Hindi/Hinglish detection β Beautiful 3D Earth visualization using Three.js with realistic climate overlays β Interactive climate data dashboard with real-time animations β Personalized action plan generator with measurable impact metrics β Fully responsive design - Works perfectly on mobile, tablet, and desktop β Deployed live at https://www.surajrana.dev/climateai/ ( https://www.surajrana.dev/climateai/) β Open-source on GitHub with comprehensive documentation β Zero dependencies on paid services - Completely free to use and deploy
Most Proud Moment: When the AI assistant correctly answered a Hinglish query about Delhi pollution with localized, actionable advice! π
π What we learned
Technical Skills:
- Advanced Google Gemini API integration and prompt engineering
- Building intelligent fallback systems for API reliability
- Three.js for 3D web visualizations
- Real-time data visualization with Chart.js
- Node.js performance optimization with caching
- Responsive design for complex interactive elements
AI/ML Insights:
- How to craft effective prompts for domain-specific knowledge
- Multi-language handling in AI applications
- Context management in conversational AI
- Balancing response quality with API costs
Climate Science:
- IPCC climate data interpretation
- Carbon footprint calculation methodologies
- Regional climate impact variations
- Effective climate communication strategies
Product Design:
- Making complex scientific data accessible
- Gamification for behavior change
- Emotional storytelling in tech products
- Balancing urgency with hope in climate messaging
π What's next for Climate Action AI
Phase 1: Enhanced AI (Next 3 Months)
- [ ] Voice Interaction - Speak to Gemini for accessibility
- [ ] Image Analysis - Upload receipts for automatic carbon tracking
- [ ] Multi-modal Responses - Text + images + charts in AI responses
- [ ] More Languages - Spanish, French, Arabic support
Phase 2: Community Features (3-6 Months)
- [ ] User Authentication - Firebase Auth for progress tracking
- [ ] Social Leaderboards - City-wise and global rankings
- [ ] Team Challenges - Group climate competitions
- [ ] Achievement Badges - Gamification rewards
- [ ] Social Sharing - Share impact on social media
Phase 3: Advanced Analytics (6-9 Months)
- [ ] ML Carbon Prediction - Vertex AI for footprint forecasting
- [ ] Climate Risk Assessment - Location-based risk analysis
- [ ] Personalized Impact Reports - Monthly PDF reports
- [ ] Integration APIs - Connect with smart home devices
Phase 4: Scale & Impact (9-12 Months)
- [ ] Mobile Apps - React Native iOS/Android apps
- [ ] Chrome Extension - Browser-based carbon tracking
- [ ] Enterprise Partnerships - Corporate sustainability programs
- [ ] NGO Collaborations - Partner with climate organizations
- [ ] API Marketplace - Third-party integrations
- [ ] Offline Mode - PWA for areas with poor connectivity
Dream Goals:
- Reach 1 million users globally
- Collectively reduce 10,000 tons of COβ
- Partner with 100 schools for climate education
- Win Google AI Impact Challenge funding


Log in or sign up for Devpost to join the conversation.