Flood Finder

Home page
Content page before interacting with anything
Content page interactions
Content page interaction 2
Actual AI-generated text being output from our Flask API and displayed on the site
Early UI/UX designs
Example of folium coordinate-->html map embedding, not integrated in final site

Inspiration

Based on the prompt of "Social Good", we wanted to build something around the idea of a disaster (flood) detection system and disaster safety recommendation system all in one place. We started developing it to work specifically on floods but did see the opportunity for integrating more types of disaster warnings in the future.

What it does

We converged on this idea of giving it the capability to detect nearby danger warnings or signs of a flood, then relay a response recommendation using AI generated text. We also wanted to display an embedded map of the nearest flood point to the user to help them gauge their reaction to it.

How we built it

The frontend uses pure HTML, CSS, JS, and used created a custom Python Flask API that used the OpenAI Function-Calling API to implement Retrieval-Augmented Generation system that ensures the coordinates of the given city are accurate, which is then passed to the Google Earth Engine to obtain flood data. The flood data is displayed in a user-friendly manner via the embedded map and AI-generated disaster-response recommendation.

Challenges we ran into

We got really close to fully implementing the full site but fell behind on finding out how to host our Flask API, ran into issues with animating the site out of a lack of experience, and began running into issues with using the Google Earth Engine to obtain flood probability to coordinate pairings.

Accomplishments that we're proud of

We are proud of the Retrieval-Augmented Generation system that we developed and the UI/UX design that we went with for the site. Even though we did not get it working the way we wanted, are proud of everything we accomplished as far are web design and access to both internal and external APIs. We used a lot of new techniques and elements to piece what we could together and was a first-time experience working with APIs and open-source plugins for some of our team's members.

What we learned

We learned a lot about how difficult it can be to work with so many technologies, especially across three different computers with varying environments. We also found out what we did not know when building something of this scale, as we were unable to host the site anywhere out of an inability to host the Flask API, the backbone of being able to host the site online, among other issues.