Front-End

Getting user input and handling media.

Overview

The front-end is a web application that allows the user to upload media or parameter sets. These are then submitted for analysis further down the pipeline. The user can also view analysis results.

Functionality

The website has three pages: one for image upload, one for video upload and one for parameter addition. The video upload page is currently not functional as this will not be implemented in the proof-of-concept.

Image Upload

The image upload page.

There are two types of images: posed and in-the-wild. These categories are self explanatory, but make a difference in the command run in the OpenFace service.

The user is prompted to choose an image file from their local computer. There is currently no limit on the file uploader (any file can be uploaded, even if it is not an image). Only .jpg, .jpeg and .png files will be analysed, however. Other file types will cause an error further down the line.

Once an image is submitted, it is uploaded and a placeholder success page is shown.

Parameter Addition

Parameter Addition Page

The other aspect of the web application is the ability to upload parameters. These are stored in sets and can be used later down the line for analysis. Each AU has a reference value, and the user can provide a maximum deviation from that value. More on this in the Analysis Module.

View Results

Each job has an associated ID. By selecting that ID from the drop-down menu, an overview is shown of the analysis results.

Technical Details & Implementation

As mentioned previously, the Avatar Web Application is a Django application. This makes it easy to store parameters as soon as they are entered using the Django ORM. It uses the standard Django templating and form systems to provide pages for user input.

Images are uploaded by the user and placed in a BLOB storage, allowing files to be shared between the different services. More on this in Azure Functions and Data Storage.

Parameters are stored using the Django ORM, similar to the C++ prototype. Models are created for both parameter and parameter_set (a collection of parameters). Users can choose a parameter_setwhen uploading media. This will then be taken into account by the Analysis Module.

TODO: Code block of models and parameter upload

class ParameterSet(models.Model):
    name = models.CharField(max_length=300, null=False)

    class Meta:
        db_table = "parameter_set"

class Parameter(models.Model):
    parameter_set = models.ForeignKey(ParameterSet, on_delete=models.CASCADE, null=False)
    action_unit = models.CharField(max_length=50, null=False)
    reference_value = models.DecimalField(max_digits=5, decimal_places=2, null=False)
    maximum_deviation = models.DecimalField(max_digits=5, decimal_places=2, null=False)

    class Meta:
        db_table = "parameter"

def store_set(self, name, au_values, dev_values):
    counter = 0

    set = ParameterSet(name=name)
    set.save()

    for value in au_values:
        if value:
            print(f"Value: {value[1]} for {value[0]} with ref value {dev_values[counter]}")
            parameter = Parameter(parameter_set=set, action_unit=value[0], reference_value = value[1], maximum_deviation=dev_values[counter])
            parameter.save()
            counter += 1

These sets are stored in a PostGreSQL database on Azure. More info here.