## Inspiration

According to WebAim, in 2021, the top 1 million websites had an average of 51.4 accessibility errors on the homepage alone (<https://webaim.org/projects/million/>). After learning about the lack of website accessibility, we wanted to find a solution for improving the user experience for disabled individuals. Creating accessible websites ensures equal access for all, aligns with social responsibility and innovation, and benefits both users and businesses.

## What it does

The user first inputs the URL of a website and after the click of a button, our web application identifies and displays various accessibility issues it finds on the web page through visual graphical elements (i.e. pie charts and bar graphs).

## How we built it

We split up our project into frontend and backend tasks. The frontend was responsible for collecting a user-inputted website URL and displaying the accessibility data as graphical elements using Taipy’s chart GUI functionality. The backend consisted of a GET request to the WAVE API using the URL passed in from the data. Then, it returned the accessibility issues from the WAVE API, capturing the necessary data in JSON format. We captured the JSON data into arrays and fed the information to the Taipy chart functions to display the relevant fields to the user. Both the frontend and the backend leveraged Taipy’s full-stack development capabilities.

## Challenges we ran into

As a relatively new library, we didn’t have many resources to consult when building our Taipy application. The biggest challenge was navigating the functionalities present in the library and making sure that we could return the right data to the user. One challenge we had was taking the user-inputted URL and using that in our GET request to the WAVE API. This was difficult as we could not get the data to update in real-time when a new URL was inputted. In the end, we resolved this by adding the JSON parsing functionality in an `on_button_action` function and realized that we had to update the `state` variable in order to have the data refreshed to accurately reflect the user-inputted URL field.

## Accomplishments that we're proud of

We’re proud that we were able to debug our issues particularly since there was not a lot of support for using Taipy. We were also a new team and were quick to come up with an idea and start collaborating on the project. While we didn’t get as much sleep this weekend, we are proud that we were able to get some rest and participate in workshops alongside working on this project!

## What we learned

Here are a couple of things we learned:

* How to develop a multi-page web application from scratch using Python
* How to handle HTTP requests using the WAVE API in Python
* How to parse and collect necessary data from a JSON file
* How to display information and datasets through Taipy bar graphs and pie charts
* How to break down a project into manageable tasks
* How to create PR templates on Github

## What's next for AccChecky

As next steps, we would like to highlight areas of the website with colour contrasting issues through heatmaps so the user has more actionable items to work on to improve the accessibility. We would also look into storing previous accessibility checks to display gradual improvement over time through other graphical charts (i.e. line graphs). Lastly, to scale our app, we could compare inputted websites against large datasets to show severity of accessibility issues from the particular user-inputted URL to other websites that exist on the internet as a form of calibration.
## Inspiration

When thinking about how we could make a difference within local communities impacted by Covid-19, what came to mind are our frontline workers. Our doctors, nurses, grocery store workers, and Covid-19 testing volunteers, who have tirelessly been putting themselves and their families on the line. They are the backbone and heartbeat of our society during these past 10 months and counting. We want them to feel the appreciation and gratitude they deserve. With our app, we hope to bring moments of positivity and joy to those difficult and trying moments of our frontline workers. Thank you!

## What it does

Love 4 Heroes is a web app to support our frontline workers by expressing our gratitude for them. We want to let them know they are loved, cared for, and appreciated. In the app, a user can make a thank you card, save it, and share it with a frontline worker. A user's card is also posted to the "Warm Messages" board, a community space where you can see all the other thank-you-cards.

## How we built it

Our backend is built with Firebase. The front-end is built with Next.js, and our design framework is Tailwind CSS.

## Challenges we ran into

* Working with different time zones [12 hour time difference].
* We ran into trickiness figuring out how to save our thank you cards to a user's phone or laptop.
* Persisting likes with Firebase and Local Storage

## Accomplishments that we're proud of

* Our first Hackathon
	+ We're not in the same state, but came together to be here!
	+ Some of us used new technologies like Next.js, Tailwind.css, and Firebase for the first time!
	+ We're happy with how the app turned out from a user's experience
	+ We liked that we were able to create our own custom card designs and logos, utilizing custom made design-textiles

## What we learned

* New Technologies: Next.js, Firebase
* Managing time-zone differences
* How to convert a DOM element into a .jpeg file.
* How to make a Responsive Web App
* Coding endurance and mental focus
-Good Git workflow

## What's next for love4heroes

More cards, more love! Hopefully, we can share this with a wide community of frontline workers.
## Inspiration

COVID revolutionized the way we communicate and work by normalizing remoteness. **It also created a massive emotional drought -** we weren't made to empathize with each other through screens. As video conferencing turns into the new normal, marketers and managers continue to struggle with remote communication's lack of nuance and engagement, and those with sensory impairments likely have it even worse.

Given our team's experience with AI/ML, we wanted to leverage data to bridge this gap. Beginning with the idea to use computer vision to help sensory impaired users detect emotion, we generalized our use-case to emotional analytics and real-time emotion identification for video conferencing in general.

## What it does

In MVP form, empath.ly is a video conferencing web application with integrated emotional analytics and real-time emotion identification. During a video call, we analyze the emotions of each user sixty times a second through their camera feed.

After the call, a dashboard is available which displays emotional data and data-derived insights such as the most common emotions throughout the call, changes in emotions over time, and notable contrasts or sudden changes in emotion

**Update as of 7.15am: We've also implemented an accessibility feature which colors the screen based on the emotions detected, to aid people with learning disabilities/emotion recognition difficulties.**

**Update as of 7.36am: We've implemented another accessibility feature which uses text-to-speech to report emotions to users with visual impairments.**

## How we built it

Our backend is powered by Tensorflow, Keras and OpenCV. We use an ML model to detect the emotions of each user, sixty times a second. Each detection is stored in an array, and these are collectively stored in an array of arrays to be displayed later on the analytics dashboard. On the frontend, we built the video conferencing app using React and Agora SDK, and imported the ML model using Tensorflow.JS.

## Challenges we ran into

Initially, we attempted to train our own facial recognition model on 10-13k datapoints from Kaggle - the maximum load our laptops could handle. However, the results weren't too accurate, and we ran into issues integrating this with the frontend later on. The model's still available on our repository, and with access to a PC, we're confident we would have been able to use it.

## Accomplishments that we're proud of

We overcame our ML roadblock and managed to produce a fully-functioning, well-designed web app with a solid business case for B2B data analytics and B2C accessibility.

And our two last minute accessibility add-ons!

## What we learned

It's okay - and, in fact, in the spirit of hacking - to innovate and leverage on pre-existing builds. After our initial ML model failed, we found and utilized a pretrained model which proved to be more accurate and effective.

Inspiring users' trust and choosing a target market receptive to AI-based analytics is also important - that's why our go-to-market will focus on tech companies that rely on remote work and are staffed by younger employees.

## What's next for empath.ly

From short-term to long-term stretch goals:

* We want to add on AssemblyAI's NLP model to deliver better insights. For example, the dashboard could highlight times when a certain sentiment in speech triggered a visual emotional reaction from the audience.
* We want to port this to mobile and enable camera feed functionality, so those with visual impairments or other difficulties recognizing emotions can rely on our live detection for in-person interactions.
* We want to apply our project to the metaverse by allowing users' avatars to emote based on emotions detected from the user.