EcoWatch AI

Turn environmental images into insights, solutions, and action.

Comment

Inspiration

We walk past environmental issues every day—illegal waste dumps, polluted streams, excessive waste, or severe smog—but knowing that a problem exists doesn't always make it easy to act.

We asked ourselves: What exactly is happening? How serious is it? What could happen if nothing is done? And what can an ordinary person actually do about it?

A picture can capture a problem, but it doesn't automatically provide answers. EcoWatch AI was built to bridge that gap between observation and action.

Our goal is to let anyone upload a photo of an environmental issue and receive an AI-powered analysis, relevant research, potential future impacts, and practical actions they can take.

What it does

EcoWatch AI transforms a single environmental image into an actionable environmental report.

🔍 AI Environmental Analysis

Our multimodal AI analyzes an uploaded image to identify potential environmental issues and generate structured observations.

🤖 Multi-Agent Analysis

The platform uses multiple AI stages:

  • Vision AI — identifies the environmental issue.
  • Eco Research — analyzes the context, causes, and potential consequences.
  • Solution AI — generates practical recommendations and an action plan.

📈 Future Impact Simulator

EcoWatch AI estimates how the situation could evolve over different time periods, such as 1 month, 6 months, and 1 year, if the issue remains unresolved.

📍 Local Action Context

When location information is available, the platform can connect an environmental issue with relevant local authorities or civic departments, helping users understand where a complaint could potentially be directed.

💬 Ask the Expert

Users can ask follow-up questions about their report through an AI chat that already understands the generated analysis.

📄 Report Export

The complete analysis can be exported as a PDF, making it easier to save, share, or attach to an environmental complaint.

How we built it

  • Frontend: Next.js 15 (App Router), React, and Tailwind CSS v4
  • AI: Mistral AI API
  • Vision: pixtral-12b-2409 for multimodal image analysis
  • AI Chat: mistral-large-latest for contextual reasoning
  • Icons: lucide-react
  • PDF Export: html-to-image and jspdf
  • Deployment: Next.js/Vercel-compatible serverless API architecture

The application follows a pipeline:

Image Upload → Vision Analysis → Environmental Research → Solution Generation → Impact Analysis → Interactive Report

We designed the interface around a dark, emerald-accented environmental technology aesthetic with responsive layouts, glassmorphism, and subtle animations.

Challenges we ran into

1. Handling unpredictable AI output

The AI sometimes returned nested or differently structured JSON objects, which initially caused React rendering errors.

We solved this by creating a robust recursive rendering system that can safely handle nested objects and arrays while converting them into readable UI elements.

2. Generating PDFs from modern CSS

Our initial approach using html2canvas struggled with modern Tailwind CSS color functions such as oklch and lab.

We switched to html-to-image and added custom filtering logic to reliably capture the dashboard's modern UI and export it as a PDF.

3. Strict production builds

Integrating the Mistral SDK with Next.js's production build and TypeScript checks required careful handling of API responses and content structures.

We added appropriate type handling and validation to make the application reliable during deployment.

Accomplishments that we're proud of

🌱 Turning an image into an action plan

We're proud that EcoWatch AI goes beyond simply identifying an environmental problem. It attempts to connect what users see → what it means → what could happen → what they can do.

🎨 Building an engaging environmental dashboard

We wanted environmental intelligence to feel approachable rather than like a traditional technical report. The dark-mode, emerald-accented interface makes the generated information easier to explore.

🤖 Context-aware AI interaction

The Ask the Expert feature receives the generated environmental report as context, allowing users to ask follow-up questions without repeatedly explaining the situation.

📄 Making the results usable outside the app

The PDF export turns the AI analysis into a portable report that users can save, share, or potentially use when communicating with relevant authorities.

AI Usage

AI is the core of EcoWatch AI. We used Mistral's multimodal models to analyze uploaded environmental images, identify potential issues, research relevant context, generate solutions, and power the Ask the Expert chat.

We also used AI-assisted development during the project for debugging and improving the application's UI and code. The overall application architecture, integration, and implementation were developed and tested by me.

What we learned

  • How to design multi-stage AI workflows for real-world problems.
  • How to handle unpredictable LLM responses safely in a frontend application.
  • How to securely process image uploads and API requests through Next.js serverless functions.
  • How to work with multipart/form-data, ArrayBuffers, and Base64 image encoding.
  • How modern CSS and browser rendering can affect client-side PDF generation.
  • How important validation and fallback handling are when building applications around LLM-generated data.

What's next for EcoWatch AI

🏛️ Direct Civic Integration

Integrate with municipal complaint systems so users can potentially submit environmental reports directly to the appropriate authority.

🗺️ Crowdsourced Environmental Heatmaps

With appropriate privacy controls and user consent, aggregate verified reports to create maps showing recurring environmental issues.

📊 Community Sustainability

Allow neighborhoods and communities to track recurring issues, monitor improvements, and understand local environmental trends.

🌱 EcoPoints & Community Action

Introduce optional gamification where users can earn points for reporting issues and documenting positive environmental actions.

🔄 Continuous Monitoring

Allow users to upload follow-up images of the same location so EcoWatch can compare changes over time and track whether an issue is improving or worsening.

Built With

Share this project:

Updates

Submission history