Post Photo-Capture screen
Photo Capture screen
The inspiration is based on the observation that group-based clean-up efforts are more likely to have a greater turnout of participation than individual efforts. The issue, however, is the organization of such events is separated by large gaps in time so much so that the work done quickly becomes undone.
By organizing these efforts more often, we can break the social stigma attached to the proper disposal of waste in Jamaica and thus aim to create more environmentally conscious individuals.
What it does
The long term goal is to have the process of discovering and creating cleanup events to be completely automated and backed by partners who would provide us with equipment and other resources to tackle these cleanup activities. For the demo we have accomplished the auto-creation of cleanup events through taking a picture and having it appear in the feed of all users of the platform.
How we built it
We broke the application into two parts for the demo. A REST API and a mobile app. The mobile app is a Progressive Web App that users browser web apis to access a user's camera and geolocation data. When a picture of trash is taken and requested to be uploaded, we get the user's current coordinates and perform a reverse geocode query to translate the latitude and longitude coordinates into a plaintext street address. We use this street address and append 'cleanup' to create the title for the event and upload that to our REST API.
The REST API was built using flask and provided endpoints for creating and fetching events.
Challenges we ran into
Using the browser's fetch api led to some longstanding cors issues when fetching from both our REST API and the google service for doing the reverse geocode. It turned out that the issue was caused by not explicitly setting the mode to 'cors' in the fetch options. For the sake of the demo the app was to be deployed to a server with HTTPS enabled. This was to allow everyone to use the app on their phone because the browser APIs require HTTPS. However, getting the server configuration right proved to be a bit of a challenge in the time constraint. The application was deployed using docker-compose and so both could run on the same server with the PWA running on port 8080 and the API running on port 5000. When setting up the Nginx configuration, we forwarded all requests to port 80 to port 8080 and made sure to upgrade the connection to HTTPS. This was fine for the PWA, but the API was not being served over HTTPS and so all requests made to it were downgraded - which basically meant we were just running HTTP. The image taken by the camera stretches to match the size of the canvas even when the width and height were specified. The geolocation API can be innacurate sometimes.
Accomplishments that we're proud of
Automatic generation of events through photo capture which involves minimal user input was a pretty great feat for us. This was the basis of our idea of being able to create these events through automated processes.
What we learned
Ideation is an important step when creating a product and it can act as a strong guide in the development process. CORS can be very complicated and should be dealt with as soon as possible.
What's next for EcoYaad
The next step is to use image recognition technology to determine whether the image taken is of trash or not before uploading. To further that, in addition to using phones to capture these images, we would like to have drones being trained and deployed to sweep an area, recognize trash and create an event to clean it up.