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 

ACHIEVEMENT

Showcased at ICAM Senior Exhibit with 150+ guest participation

Overview

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

Categories: Computer Vision, Facial Recognition, Interactive Design

Outcome: Create a web application in two quarters, which portrays data privacy in an ironic way

Concept

"Smart Select" is an online music listening platform that recommends songs to users based on their current moods. Users can either manually indicate their emotions 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 often fails to precisely predict the future. Gathering the real-time data and returning with an immediate output will allow apps 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 involving real-time data will soon be commonplace in people's daily lives. However, I doubt this way of gathering data can guarantee internet privacy and safety. 

 

"Smart Select" indicates my mixed feeling about massive real-time data usage. 

 

Capture.PNG

homepage of "Smart Select"

Technology

Capture2.PNG

facial recognition page

"Smart Select" is a 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 on the local host for the showcase. 

 

I used "Face-api.js", a JavaScript library for the facial recognition part. This library was the best solution I could find, which is compatible with Front-End programming languages. It has already included a pre-trained face database, so I didn't need to train the facial data myself.   

I used the "html2canvas" library to take screenshots in the backend. 

I used "Youtube Music" as the song resource, because its interface was clean and easy to navigate. 

Exhibiton Pictures

WeChat Image_20190617010457.jpg
WeChat Image_20190617010508.jpg
WeChat Image_20190617010505.jpg

Guests Interactions