EcoSortAI

• 

  Starting page

• 

  Uploaded image of styrofoam cup (trash)

• 

  Result of styrofoam

• 

  Uploaded image of phone (ewaste)

• 

  Result of phone

Inspiration

The idea came from a daily, universal annoyance: standing in front of colored disposal bins holding something weird and just guessing where it goes. I wanted to build something that removed the impatience of typing prompts into ChatGPT by creating a dedicated, drag-and-drop tool that instantly gives you the right answer.

What it does

EcoSortAI is a web application that takes a photo of an object and instantly tells you if it belongs in the recycling, trash, compost, or e-waste. Instead of returning a conversational paragraph, it provides a color-coded dashboard with the item's material, a confidence score, and specific disposal instructions (like "Rinse out food residue").

How I built it

I built the entire project full-stack.

• Frontend: Vanilla HTML, CSS, and JavaScript. I used the FileReader API to instantly preview images on the client side before packaging them into a FormData object to send to the server via the Fetch API.
• Backend: A REST API built with Python and FastAPI.
• AI Integration: I used the Google Gemini 3.5-Flash vision model. To make the AI act like a reliable software component, I used Pydantic to enforce a strict JSON schema on the LLM's output. This guaranteed my frontend always received predictable keys (like category and confidence) instead of random text.

Challenges I ran into

My biggest hurdle was taming the AI's output. Initially, Gemini returned long paragraphs that my JavaScript couldn't parse. I had to learn how to use "Structured Outputs" to force the AI to return a perfect JSON object. I also ran into server blocking issues, which I solved by updating my FastAPI endpoints and the Gemini SDK client to run asynchronously (client.aio), preventing the server from freezing during API calls.

Accomplishments that I'm proud of

I am incredibly proud of building a fully functional REST API from scratch and successfully connecting a frontend UI to a Python backend. Getting the CORS middleware configured and mapping the JSON response cleanly to my HTML dashboard was a massive "aha" moment for me as a developer.

What I learned

I learned how REST APIs actually work under the hood, how to handle asynchronous data fetching in JavaScript, and how to use data validation tools like Pydantic to make AI outputs deterministic.

What's next for EcoSortAI

For "EcoSort 2", I want to move away from static image uploads and implement a live webcam feed using client-side computer vision (like TensorFlow.js or MediaPipe) to draw real-time bounding boxes around trash items directly in the browser!

Built With

• css3
• fastapi
• google-gemini
• html5
• javascript
• pydantic
• python
• restapi