OceanAware

Our oceans are vast and beautiful, and sadly full of trash. So many people are unaware of the effects and scale of marine pollution, we aim to provide easy and accessible education on ocean pollution

Comment

Inspiration

We have all been living in Vancouver for around 2 years and have seen the changes in the ocean side and the effects on marine life like Orcas. As college students, we do not always have the time to dive deep into researching about issues like marine pollution and learn what we can do to help fight against it or what is happening with it currently. We wanted to remedy this and create a platform that strived to provide access to educational resources about marine pollution in a fun and interactive way. Through videos, custom built quizzes, and custom article search, we aim to provide a fun way to interact with and learn about marine pollution.

What it does

OceanAware is a web app that provides the user with resources to learn about marine pollution. The user is able to click through and view videos on the subject before testing their knowledge with an interactive quiz that is generated using facts and semantic analysis with the Cohere API. Also using this API, we allow the user to search for articles on marine topics to provide further resources for learning.

How we built it

The back-end was developed with Node.js libraries and APIs. Additionally, we created a relevancy model to detect the correctness of the users answers.

The keywords were extracted from the generative model for entity extraction from Co:here and fed into a model that generated question-answer pairs. Furthermore, the classify functionality from Co:here was used to conduct search on a user entered topic to give relevant articles and information.

The front-end was developed with React.js and UX designs from Figma. Express.js was used as middleware to connect the front-end to back-end.

Challenges we ran into

Connecting the front end to the backend was a struggle for us and we resolved this using Express.js as a simple, easy-to-use middleware. Our biggest challenge was figuring out how to generate the question-answer pairs from the retrieved articles and how to test for correctness from the user answer. This was resolved by creating additional models to generate the question answers as well as a model to give us a relevancy score and calculate a user score.

Similarly, there was trouble getting front-end elements to talk when developing the UI design. Online resources were useful in resolving this issue.

Accomplishments that we're proud of

We are proud of our backend and all of the elements that went into it to create our search feature and our quiz. We combined multiple different APIs and models to generate our quiz answers and retrieve the scores. We were excited to see the results of the generative model that we used to analyze our data from Co:here. We are also proud of our frontend as it came together seamlessly and felt reflective of our goals in design and what we set out to do

What we learned

We learnt to adapt and overcome challenges in difficult code quickly and resolve problems efficiently. The backend team learnt new technical skills in libraries like Node.js and Express.js and performing requests to the server as well as learning how to use new features within the Cohere API and train our models to detect correctness in user entered answers. We also learned some neat tricks in react to render different parts of our site

What's next for OceanAware

We would love to adapt the web app for more platforms like mobile and increase accessibility for the web page. We would also like to extend the quiz feature to have quizzes on more topics and different issues regarding marine pollution so the user can learn more.

Share this project:

Updates