WEB DEVELOPMENT

Smart Select

ROLE

User Experience

Front-End Designer

Visual Design

Interactive Design

DURATION

2019.1- 2019.6

6 months

TECHNOLOGY

HTML/CSS/Javascript,

PHP, Figma, Zeplin, 

ACHIEVEMENT

Showcased at ICAM Senior Exhibit with 150+ guest participation

Overview

Purpose: This is my senior project, which was showcased on June 11-13, 2019 at "Silience", ICAM Senior Exhibition

Categories: Computer Vision Program, Facial Recognition, Interactive Design

Outcome: Create a web application in 2 quarters, portraying machine learning in an ironic way

Concept

"Smart Select" is an online music listening platform that recommends songs based on users' current moods. Once started, users can either manually press buttons to indicate their emotions on the left or initiate the live detector on the right. "Smart Select" will then redirect users to recommended YouTube music playlists.

Yet, the recommendation results from the above two approaches are various. If users manually choose their emotions by clicking emotion buttons, YouTube will generate a music playlist based on mood keyword searching, for example, happy, sad, neutral, etc. If users prefer to input their emotions using the facial recognition method, they will receive lists of animated memes deliberately chosen by me. Even worse, "Smart Select" will secretly spy on users' emotions and steal users' data by taking screenshots. 

Intuition

What makes my app unique is its ability to detect users’ real-time emotions ---- in a funny way. Nowadays, the majority of apps provide recommendations based on usage history. Although using past data to guess users’ needs seems somewhat plausible, this method can hardly predict the future precisely. Gathering the real-time data, and returning with an immediate output, will significantly help existing apps in order to provide a more personalized recommendation to users. In such a fast-moving world with the increasing influence of data, I firmly believe that technology that involves using real-time data will soon be commonplace in people’s daily lives. However, I doubt the accuracy of guessing people's emotions by just using the machine will guarantee internet privacy and safety. 

Therefore, "Smart Select" indicates my mixed feeling about machine learning. 

homepage for "Smart Select"

Technology

"Smart Select" is a completely hardcoded project using HTML/CSS/Javascript. It has been transferred to a PHP app and is currently hosted on Heroku.com. However, due to the slow speed of the internet, I projected my project in localhost. 

 

I use "Face-api.js", a javascript library for the facial API for two main reasons: first, this is the best API I could find so far which is compatible with Front-End programming languages. Second, it has already included a pre-trained face database, so I didn't need to train the facial data myself.  

I use "html2canvas" library for taking screenshots in the backend. 

I use "Youtube Music" as the song resource because its interface is clean and easy to navigate. 

facial recognition page

Timeline

Exhibiton Pictures

Took during the exhibit reception on June 11

Guests Interactions

Takeaways

1. Gain the experience of being involved in an Art Exhibition

2. Be more familiar to the front-end language, such as HTML/CSS/Javascript/PHP

3. Developed unique thoughts about Computing Vision Programming and API 

4. Always remember to ask for help when need   

Thanks for visiting! 

Contact: 

Email: yug068@ucsd.edu

Location: 

La Jolla CA, 92092

outline_email_white_18dp.png

© 2019 by Shirley Guo, Last update: 11/30/2019