Inspiration

Cities across the developing world generate enormous volumes of household waste, but most of it never gets sorted correctly. In Vietnam alone, an estimated 64,000 tons of municipal solid waste are produced every day, yet only around 15% is sorted properly at the source. The problem usually isn't a lack of willingness — it's a lack of information. People don't know which bin a greasy pizza box belongs in, whether a used battery counts as hazardous waste, or where the nearest recycling drop-off point is, and sorting rules differ from city to city with no quick way to look them up. We wanted to remove that friction entirely: point your camera at an item and let AI handle the rest.

What it does

EcoLens turns a single photo into a complete waste-disposal action plan. A user snaps or uploads a picture of an item, and a pipeline of specialized AI agents takes over: it identifies the object, classifies the waste category, flags hazardous materials, looks up the correct local disposal rules, and generates a step-by-step disposal guide — all in a few seconds.

  • Photo-based waste classification into Recyclable / Organic / Hazardous / General, with a specific subcategory (e.g. "PET plastic bottle")
  • Live Skill Execution Trace — a real-time animated log of every agent call in the 7-step pipeline, with per-step latency and outputs
  • Localized disposal guidance — bin color, collection day, and a step-by-step guide tailored to the user's city
  • Hazard detection for batteries, chemicals, and electronics
  • Nearest collection points using geolocation + haversine distance
  • Environmental impact tracking — CO₂ saved per scan, converted into "equivalent km of motorbike travel," with cumulative green points, streaks, and badges
  • Conversational follow-up — an in-context chat panel grounded in the scan results
  • Full English/Vietnamese bilingual UI, including AI-generated content

How we built it

EcoLens is built around a Skill Harness: every AI capability is an independent, swappable "skill" with a defined input/output schema, routed through a central harness that handles validation, retries, and execution logging. A LangGraph orchestrator runs a 7-node pipeline (analyze image → classify → flag hazards → fetch local rules → generate guide → calculate CO₂ → award points) across 5 specialized agents — Vision, Classification, Localization, Advisory, and Scoring.

  • Frontend: React 19, Vite, Tailwind CSS, Framer Motion, lucide-react
  • Backend: FastAPI (Python)
  • LLM / Vision: Groq API — Llama 4 Scout for vision, Llama 3.3 70B for text generation
  • Database: SQLite for per-user environmental impact tracking
  • Geolocation: browser Geolocation API + haversine distance for nearest disposal points

The UI surfaces the Skill Harness directly as a live Skill Execution Trace, turning what's usually an opaque AI pipeline into something transparent and explainable — users (and judges) can see exactly which agent ran, what it produced, and how long it took.

Challenges we ran into

  • Structured, reliable vision output — getting a vision LLM to consistently return clean, schema-conformant JSON for downstream agents required careful prompt design and normalization in the harness layer.
  • Bilingual consistency — making sure both static UI strings and AI-generated content (descriptions, disposal steps, hazard warnings, chat answers) translate correctly between English and Vietnamese, while keeping real place names in their authentic local form.
  • Latency vs. transparency — a 7-step agent pipeline takes real time; we leaned into that by building the live Skill Execution Trace so the wait itself becomes part of the experience rather than a loading spinner.

Accomplishments that we're proud of

  • A genuinely modular Skill Harness architecture — 15 skills across 5 agents, each independently testable and swappable
  • A live, animated Skill Execution Trace that makes a multi-agent AI pipeline transparent end-to-end
  • Full English/Vietnamese bilingual support across both UI and AI-generated content
  • A complete loop from "photo" to "actionable disposal guide" to "gamified environmental impact"

What we learned

  • How to design clean input/output schemas so multiple LLM-backed agents can be composed into a reliable pipeline
  • Practical techniques for grounding LLM output in local, structured data (city-specific disposal rules) instead of relying purely on model knowledge
  • The UX value of showing your work — surfacing agent execution traces builds user trust in AI-driven results

What's next for EcoLens

  • Expand the local-rules database to more cities and countries
  • Add more waste categories and finer-grained subcategory detection
  • Ship an installable PWA / mobile app with offline-cached disposal guides
  • Community leaderboards and neighborhood-level recycling analytics for local governments and NGOs

Built With

Share this project:

Updates