DAT602 – Face Login – Profile Image/Amazon S3

As part of the Face Login system, I have access to a number of images of faces that were used to train the face recognition system. It would make sense to be able to display a profile image of the logged-in user using one of these photographs.

The plan is to upload all the images of users to Amazon S3, make each image publicly accessible, and then display the relevant image by linking to the image from the profile page of the Face Login system

Uploading Images to Amazon S3

The first step is to upload the images to Amazon’s S3 service. To replicate the local folder structure on S3 , I can iterate through each image within each of the folders of face images that I created and upload them. In the below image can be seen folders for the four test users: Cass, Donald, Matthew, and Sam.

I developed a simple Python script, which made use of some of the code from the addPeople.py script previously developed.

import os
import boto3

bucketName = 'dat-602-users'
s3=boto3.resource('s3')
people = ['Cass','Donald','Matthew','Sam']

for name in people:
    directory = '/home/pi/DAT602/face_login/images/'+name
    for filename in os.listdir(directory):
        if filename.endswith('.jpg'): # .jpg images only
            filePath = os.path.join(directory, filename) # creates full file path
            data = open(filePath, 'rb')
            s3.Bucket(bucketName).put_object(Key=(name+'/'+filename), Body=data, ContentType='image/jpeg')
            object_acl = s3.ObjectAcl(bucketName, (name+'/'+filename))
            response = object_acl.put(ACL='public-read') # makes link public
            link = 'https://s3-eu-west-1.amazonaws.com/'+bucketName+'/'+name+'/'+filename # links in s3 follow this pattern
            print(link)

 

The script iterates through each face image in each user folder, uploads the images to an S3 bucket, makes them publicly accessible, and maintains the folder structure as can be seen in the following screenshots:

Amazon S3

The script outputs the full URL for each image. This will be useful when I come to rebuild this dynamically from the logged-in users name

Displaying the Profile Images

Now that I have publicly accessible links for each image, I can include one image on the profile page of the logged-in user. This is how it will look:

I have intentionally maintained naming consistency of the username, image folder names, and the image names so that I can create a link between them. 

Once a user has successfully logged in, I have access to their username in a Handlebars view via {{user.local.username}}. To create an image link is relatively simple:

<img src="https://s3-eu-west-1.amazonaws.com/dat-602-users/{{user.local.username}}/{{toLowerCase user.local.username}}_01.jpg">

Note: I’ve added another Handlebars helper function to the server.js file to convert a string to lower case:

// handlebars helper (lower case)
hbs.registerHelper('toLowerCase', function(str) {
  return str.toLowerCase();
});

When this page is served, the above code is rendered as:

<img src="https://s3-eu-west-1.amazonaws.com/dat-602-users/Matthew/matthew_01.jpg">

As you can see, the folder name and image filename prefix have been retrieved from the user’s username as stored in MongoDB.

Improvements

Although the above process works and the result is satisfactory, there are number of improvements that I would like to make:

  • When the Python scripts iterates through the images in the each folder, I would like to be able just to point it at the /home/pi/DAT602/face_login/images/ folder and programmatically upload all the images in all the subfolders it finds. This would be more maintainable than providing an array of folder names.
  • The upload to S3 uses the face images at their original size (which is unnecessarily large). I would like to generate thumbnails and upload these instead.
  • I’m not happy with the partly hard-coded nature of the image link in the Handlebars view file. Each image URL could be stored in MongoDB and retrieved along with other data when a user logs in.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.