ExtensionsExtension

What is it?

A Google Chrome extension that adds hair (facial included) extensions to images of faces on whatever web page you're browsing!

Inspiration

We wanted to create something fun and creative while utilizing technologies that we had never used before so that we could learn something new! We looked into using APIs to create a Google Chrome Extension because neither of us had any experience with either and it seemed like a great way to accomplish our goal. We found the Microsoft Azure Face API and decided it would be funny to create a (chrome) extension... that gives someone (hair) extensions!!

Challenges

As mentioned above, neither of us had any prior experience working with APIs or creating Chrome extensions, so we already had a big learning curve. The Microsoft Azure Face API provided a lot of helpful data, but it was written in JavaScript and output a JSON object, and we weren't familiar with these either. Nonetheless, we were determined to try to use this API for our project because it seemed promising. The mentors who helped us were extremely knowledgable, patient and overall wonderful to work with and learn from, and we couldn't have overcome our challenges without them!

How It Works

The Microsoft Azure Face API takes in an image URL and outputs a JSON object with attributes of a face (if found), such as gender, age, the position of facial features, and even whether the person is wearing accessories! We specifically used the position of the eyes, given to us from the API, to calculate our own data point: the position of the top of the head, where we wanted to overlay an image of hair. We scaled the hair image to best fit the face, and also implemented rotation of the hair to align with the tilt of the head.

Our Chrome extension has a clickable popup window that includes different options. Users can check off which features they want to add to faces, such as different hair colors, or even a mustache! Then, whatever facial image they clicked on will have the chosen features added to them. Alternatively, users can click the option "Apply All Extensions!", which will apply chosen features to all faces found on the current webpage.

Extra Bells and Whistles

We implemented logic that prevents adding a mustache to a face that already has a mustache, using the facial hair data from the API (I.e. if the 'mustache value' was greater than a certain threshold).

If a face already had one of our hair extensions, clicking on it again will not add additional extensions, to prevent our extension from calling the API too many times on the images we overlaid.

Future Improvements

In the future, we would like to include even more hair styles to choose from!

We'd also like to implement the ability to take off hair extensions with a second click.

Conclusion

Overall, we had a lot of fun creating Extensions Extension and definitely enjoyed our experience hacking with these new technologies. We hope that our hack makes you laugh! :D

Share this project:
×

Updates