Inspiration
The inspiration for the AI Waste Sorter stemmed directly from the "Future of AI x Work" category of the Abihack challenge. I recognised that while AI is often discussed in high-tech, complex applications, its most profound impact can be felt in simplifying everyday tasks and contributing to environmental sustainability.
Witnessing the challenges of waste disposal and the potential for valuable resources to be lost to landfills, I was motivated to create a practical, accessible tool that empowers individuals to make better sorting decisions. The idea was to transform the often tedious and confusing "work" of waste separation into an intuitive and engaging process, thereby fostering a culture of responsible waste management.
What it does
The AI Waste Sorter provides an immediate and intuitive solution for waste classification. Users interact with the system by uploading an image of a waste item through a simple web interface. The application then leverages the power of Google Cloud Vision AI to analyse the image. The AI identifies various labels and objects within the image, which are then mapped against a comprehensive internal wasteCategoryMap. Based on this analysis, the system instantly identifies the waste type, such as Plastic, Paper & Cardboard, Organic Waste, Glass, Metal, or E-waste, and displays the result clearly to the user, often accompanied by a relevant icon. This streamlined process guides individuals towards proper disposal methods, making the task of waste separation straightforward and accessible.
How the Project was Built
The AI Waste Sorter was built as a single-page web application using standard web technologies:
- Frontend (HTML & CSS):
I createdindex.htmlto structure the user interface, including:- An image upload input
- An image preview area
- An "Analyse Waste" button
- Sections for displaying results and error messages
- An image upload input
Tailwind CSS was used extensively for rapid and responsive styling, ensuring a clean and modern look.
JavaScript Logic (
script.js):
All the application's interactive logic resides inscript.js, including:- Handling image file selection and displaying a local preview.
- Converting the uploaded image into a Base64 encoded string (required format for Vision AI API).
- Making asynchronous
POSTrequests to the Google Cloud Vision AI API. - Processing the API's JSON response, specifically extracting
labelAnnotationsandlocalizedObjectAnnotations. - Implementing a
wasteCategoryMapto translate the diverse labels returned by Vision AI into actionable waste types: - Plastic
- Paper & Cardboard
- Organic Waste
- Glass
- Metal
- E-waste
- General Waste
- Dynamically updating the UI to show loading states, display the identified waste type with a corresponding Font Awesome icon, or present error messages.
Google Cloud Vision AI Integration:
The core AI functionality is powered by Google Cloud Vision AI. By leveraging its pre-trained models, I could quickly implement robust image recognition without needing to train a custom model from scratch within the hackathon's time constraints. I used an API key for authentication, simplifying the setup for this prototype.
Challenges I ran into
While building, I encountered a few challenges:
API Key Management:
Ensuring the Google Cloud Vision AI API was correctly enabled for the project and that the API key had the necessary permissions initially led to a403 Forbiddenerror. This was resolved by carefully following the Google Cloud Console's instructions to enable the API for the specific project.Typographical Errors:
A minor but impactful challenge was a typo in theOBJECT_LOCALIZATIONfeature type (OBJECT_LOCALISATION), which caused a400 Bad Requesterror. Debugging this required careful examination of the API error messages and cross-referencing with Google's API documentation.Mapping AI Labels to Waste Categories:
The Vision AI API returns a wide array of labels and object names — some very specific, others quite general.
The challenge was to create an effectivewasteCategoryMapthat could accurately translate these diverse outputs into clear, actionable waste categories relevant to recycling practices.
This required:- Iterative testing with various images
- Refining the mapping logic for reliable classification
For example, distinguishing between a general "bottle" (which could be plastic or glass) and a more specific "plastic bottle" or "glass bottle" required careful consideration of keyword inclusion.
- Time Constraints:
Balancing the desire for comprehensive features with the 24–48 hour hackathon timeframe meant prioritising core functionality and a clean, demonstrable prototype over extensive refinements.
Accomplishments
Functional Prototype in Record Time:
Successful development of a working AI-powered waste sorting prototype within the hackathon's timeframe, demonstrating rapid development and problem-solving.Seamless AI Integration:
Effective integration of the powerful Google Cloud Vision AI API, showcasing how advanced machine learning capabilities can be leveraged with relatively simple client-side code for practical applications.User-Centric Design:
Prioritising a clean, intuitive, and responsive user interface using Tailwind CSS, making the technology accessible and easy to use for a broad audience. The addition of visual cues like icons enhances the user experience significantly.Direct Impact Potential:
Creation of a solution with clear and immediate relevance to environmental sustainability and economic growth in Africa, aligning perfectly with the hackathon's theme of "Turning AI's Opportunity into Reality for Africa."Problem-Solving Agility:
The ability to quickly identify and resolve API-related errors and refine the AI's classification logic (via the wasteCategoryMap) demonstrates strong debugging and iterative development skills.
What I learned
Building this project provided invaluable learning experiences:
Google Cloud Vision AI:
I gained hands-on experience with the Google Cloud Vision AI API, understanding its capabilities inLABEL_DETECTIONandOBJECT_LOCALIZATION. This included learning how to integrate a powerful pre-trained machine learning model into a web application with minimal overhead.API Integration:
I deepened my understanding of asynchronous JavaScript, thefetchAPI for making HTTP requests, and handling API responses, including error management.Front-end Development with Tailwind CSS:
I honed my skills in rapidly prototyping a responsive and aesthetically pleasing user interface using Tailwind CSS, ensuring the application is user-friendly across various devices.Data Mapping and Logic:
I learned the importance of carefully mapping raw AI output (labels and objects) to specific, actionable categories relevant to the problem domain (waste types). This involved iterative refinement of thewasteCategoryMapbased on observed API responses.Project Scoping:
For a hackathon with a tight timeframe, I learned the importance of focusing on core functionality and delivering a clear, demonstrable prototype.
What's next for AI Waste Sorter?
The vision for the AI Waste Sorter extends far beyond this initial prototype. I believe it has the potential to become a truly impactful tool for sustainable waste management across Africa. The next steps include:
Mobile Application Development:
Transforming the web prototype into a native mobile application (iOS and Android) to enable on-the-go waste sorting and wider accessibility for individuals and small businesses.Enhanced Waste Category Mapping:
Integrating location-based data to provide users with specific recycling instructions and drop-off points relevant to their local municipality or region in Africa. This would involve partnerships with local waste management authorities.Educational Resources and Team Growth:
Developing accompanying educational content within the app to teach users about the importance of proper waste segregation and its environmental benefits. Also the expansion of the team to build a more comprehensive version of the application.Community Engagement Features:
Exploring features that allow communities to track their collective recycling efforts, participate in challenges, and share best practices, fostering a collaborative approach to waste management.Integration with Waste Collection Services:
Investigating potential integrations with local waste collection services to streamline the pick-up of sorted recyclable materials.
Built With
- css
- font-awesome
- google-cloud
- google-cloud-vision-api
- html
- javascript
- tailwind
Log in or sign up for Devpost to join the conversation.