Experience >>> Pyrenote

Dylan Nelson: We want to detect bird calls

I made a react web tool

while working on a research team in undergrad

Robots:

Pyrenote

TLDR:

A large research project with a team of 10+ where I developed a react annotation tool for part of a massive ML pipeline to aid in bird song recognition in the wild

*missing image of prototype 1 Tool for annotating bird calls

Abstract

Pyrenote is a project in development by a growing group of student researchers here at UCSD. Its primary purpose is to allow anyone to contribute to research by labeling data in an intuitive and accessible way. Right now it is currently being used to develop a voice recognition tool for birds. The goal is to make an algorithm that can strongly label data (say where in the clip a bird is calling and what bird is making the call). To do this, a very vast dataset is needed to be labeled. I worked mostly on the user experience side. Allowing them to interact with their labeling in new ways, such as keeping tabs on their progress and reaching goals. Developing a User Profile page was the primary source for receiving this data and was developed iteratively as a whole new page for the site

Q1 Progress

Using Pyrenote

As a user of Pyrenote I came up with a few ideas and improvements I wanted to implement. One of the main issues we faced was needing to ask our team leader, who was the only one who could access the data of our project, for updates. Each time we did this he had to manually go through the data, parse it, and deliver it to us (manually). This is something that can clearly be automated and delivered directly to the user. In the end, my team and I decided to make a User Profile page. Engaging users is key to the Pyrenote workflow, and we need users to be content, because without good users, we don't have data.. We set out to incorporate a user page with a few goals in mind:

Through this process we assessed each of these, and strived for even greater.

Developing Ideas

*missing image of prototype 1 Different sets of functionality needed

This was the first set of users we identified and decided we needed to work for. There is different data for each and different ways to access the data so it will allow the development of each part to work fairly iteratively

Prototyping

*missing image of prototype 1 Prototype 1, made in figma

The first prototype I made and presented to the team. Developed in Figma and shared in our weekly meetings. I eventually got a lot of feedback that paved my direction for the following quarter. A lot more data was desired and organized in a different way

Demo Vid:

Q2 Progress

Backend Learning

I met with one of our lead programmers and designers for the site. Sean helped me throughout this entire quarter and taught me during each step of my journey. First we went over the old prototype and discussed the limitations of it with respect to the currently developed code. Some things were going to be a lot harder to develop than others. We knew we could develop everything we had pictured, but only with enough time. So we set priorities and I made a new prototype

Prototype 2

*missing image of prototype 2 Prototype 2, many more stats

New Insights

After this I drew up the changes and made that second demo above. Next was to get that working in the frontend code, which went smoothly given I already had a working demo from before

New Frontend

*missing image of front 2 Frontend Complete, working in react and docker

Works pretty similar to the previous demo and looks similar to the new prototype some adjustments need to be made but that can be done easily. Now we just need to hook it up to the backend

New Backend

The backend was able to be incorporated partially with ease. After a few meetings and much more learning. We were able to get some variables in that worked and delivered exactly what we wanted. Most of the other functionality is still a work in progress because it requires writing all new backend code, which I was not previously familiar or experienced with. The tables are a whole level of complexity harder than everything we've done so far, and certainly take time.
Sean taught me a lot and I got access to everything on the backend that I need. We successfully got the page setup to accept data and API calls and tested a few and they work. Everything else is diving into the massive data structures and coding them to search and display correctly (which has been easier said than done)

Technical Work Dump

This chunk is not meant to be report-like and is meant to be useful for someone (potentially my future self) trying to understand the proccess for setting up some of the code.

1. Creating New Page

  1. Add a item to the navbar in audino/frontend/src/containers/navbar.js
    • Add the new page as list element near the end of the Navbar script
    • NOTE: The directory (the “to = …”) of the file here matters, it must be the same as the JS file you will create
  2. Create a JS file with the same name in audino/frontend/src/pages. Mine will be titled “profilePage.js”
  3. In audino/frontend/src/pages/index.js, assign a name to the page in a new import line, and then add that name to the list of exports
    • The first highlighted line was added entirely, and the second line “Profile” was simply added to the set
  4. Establish a private route to the new JS script in audino/frontend/src/app.js, allowing it to be found by other files
    • Add “Profile” (or the name of the page) to the initial import of the same file
    • Add a private route as well. This should be in the render portion, near the end of the script
Contact: