EcoLens Web

EcoLens Web UI — Client-side AI Waste Classifier & Impact Dashboard

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for EcoLens Web

Inspiration

Improper waste sorting leads to tons of recyclable materials ending up in landfills and contaminates processing facilities. Most people want to recycle correctly, but sorting guidelines can be confusing or inconsistent. We were inspired to create EcoLens Web to bridge this gap by bringing instant, intelligent waste classification straight to anyone's web browser—making sustainable choices fast, effortless, and accessible.

What it does

EcoLens Web is a 100% client-side sustainability app and visualizer.

In-Browser Machine Learning: Users upload or capture an image of an item, and our client-side AI model classifies it in real time into recyclable, compostable, or landfill categories.
Impact Tracking: Interactive dashboards display simulated personal carbon footprint reductions and waste saved over time.
Local Drop-Off Locator: An interactive map helps users find nearby community recycling centers and compost hubs.
Privacy & Speed: Because everything runs inside the browser, no images or user data leave the device, ensuring total privacy and near-instant processing.

How we built it

We built EcoLens Web using a modern front-end tech stack without relying on any backend infrastructure:

UI & Components: Built with React and styled using Tailwind CSS for a responsive, modern interface.
In-Browser AI Inference: Integrated TensorFlow.js with a pre-trained MobileNet model to execute image classification directly on the user's browser using WebGL hardware acceleration.
Data Visualization: Utilized Recharts to render interactive real-time impact metrics and trends.
Maps & Geo-data: Integrated Leaflet.js with OpenStreetMap for location-based recycling hub discovery.
Local Persistence: Used browser localStorage and IndexedDB to log user streaks and track saved carbon stats offline.

Challenges we faced

Optimizing Browser Machine Learning: Running computer vision models locally can be resource-intensive. Fine-tuning model initialization and ensuring smooth frame rates without blocking the browser thread required careful performance optimization.
Mapping Unstructured Inputs: Translating broad object recognition outputs (e.g., "plastic bottle") into clear, actionable waste-sorting rules purely on the front end required mapping datasets directly into client-side JSON lookups.
Offline-First State Management: Ensuring user achievements, historical logs, and settings persisted smoothly using local storage required careful state synchronization.

What we learned

The Power of Edge AI: Running AI models on the client side via TensorFlow.js significantly reduces latency, eliminates backend hosting costs, and provides complete privacy for user data.
Front-End Versatility: Modern client-side tools and browser APIs allow developers to build rich, feature-complete applications without needing complex server architectures. *