HIPPO Gym

# ReactJS Front End

# What's behind our framework

This project is related to the research where a human can help teach a software agent to learn faster. For example, you have have someone play a game of Mario, and use this demonstration to help the agent learn. Or, you have have someone watch an agent playing Mario and interrupt to say "you should have jumped here". Or, you have someone watch an agent playing Mario and interrupt to say "you just messed up here". In the past, we've focused on doing things locally - building an interface for these kind of interactions isn't so bad when you just have someone sit down in front of a laptop. But, ideally, we'd be able to run these kinds of experiments over the web.

# What our framework can do

  • Interact with Turkers recruited via Amazon’s Mechanical Turk, as well as human subjects recruited from other venues
  • Support multiple forms of human guidance, including explicit reward, action advice, demonstrations, and shaping reward function construction.
  • Handle bi-directional requests, where guidance can be initiated by either the human teacher or the student agent.
  • Allow for real-time interaction with a live agent, as well as pre-recorded agent behaviors.
  • Allow a person to go forward and backward in time to provide human guidance at different points in previous trajectories
  • Be compatible with at least 3 tasks implemented in OpenAI gym.

# How it works

# Demo Video

In this demo video, we provided no other parameters in the original query. There are two pages before the game page and two pages after. The first page is a consent form that requires the user to agree the agreement before they move to the next step. In the second step, there is a qualification test to see if the user meet all the requirements for this project. The next page is the game page which is also the main page that used to play the game and train the agent. After the game ends, there is a survey page ask about the whole experience of this framework. The last page is a "thank you" page to thank the research participants.

# API

# 1.Get the first pre-game page through https://api.irll.net/next/ GET

params : {
    #Id assigned to different projects
    "projectId" : ,
    #Generated by uuidv4
    "userId" :
}

Response status code and body format:

200 OK

{
    # html content body
    "page" : ,
    # css content to apply on the page
    "css" :  ,
}

400 Bad Request

{
    "Project ID Not Found"
}

# 2.Submit a form and get the next pre-game page through https://api.irll.net/next POST

Request format

params : {
        #Id assigned to different projects
        "projectId" : ,
        #Generated by uuidv4
        "userId" :
    }
form content example
{
    "race" : "Asian",
    "country" : "Canada",
    "language" : "English"
}

Response status code and body format: 200 OK

{
    # html content body
    "page" : ,
    # available css styles that applies on the page
    "css" :  ,
}

# Query parameters

  • projectId(required) : projectId is assigned by each researcher, and it is uniquely identifiers a project
  • css(optional) : An url that points to a public css file on the internet. This field is used if you want to apply your own styles to this framework.
  • server(optional) : An url that points to a back end server. This field is used if you don't want to use the default back end server.
  • debug(optional) : This mode is used to display the incoming and outgoing messages on the page, it is not enabled by default. In most of the time, the researchers will not need to use this mode.
  • redirect(optional) : This field is used to set the redirect link after the game ends.
  • userId(optional) : Unique uuid used to uniquely identifiers an user.

# Getting started

The following instructions will get you a copy of this project and you can run the project on your local machine.

# Prerequisites

You need to install the following software:

  • Node

  • npm

# Clone

  • Clone this repo to your local machine using git clone https://github.com/IRLL/HIPPO_Gym_FrontEnd_React.git

# Structure

main.js (opens new window)

fetchFormData();

Function used to send GET requests to our api endpoint and receive the html contents of pre-game and post-game pages.

gameEndHandler();

Function used to set the game state to be end and request the content of next page.

handleSubmit(event);

Function used to handle the form data after the user click the "Submit" button. This function will send POST requests to the back end and set the response as the content of the next page.

Routes.js (opens new window) A router used to manage all the routes of our framework. Currently, we only have one route which is the root one("/"). In the future, we may introduce more routes to our framework.

forum.js (opens new window) Forum component, used to render the html contents that fetched from the back end and includes a "Submit" button to submit the form's data.

game.js (opens new window) Game component that include all the elements that needed to play the game on the web. In this component, we are using websocket to communicate with our back end server, which makes our framework real time. There are two main parts in this component, the first is the game window. We render every game frames that received from the web socket in this window. The second part is the game control panel, we have 4 directions button and buttons to start, stop and stop the game, etc.

handleOk();
handleCancel();

Functions used to handle the visibility of the confirmation model. By default, the model does not appear, it is visible to the user when the game ends.

sendMessage(data);

Function used to send data to the websocket server in JSON format.

handleCommand(status);

Function used to send essential game control commands to the websocket server. The commands we have are : start,pause,stop and reset, etc.

handleFPS(speed);

Function used to control the FPS(frame per second) of the game. The default value is 30 and the increment or the decrement when each time the user press the button is 5. The allowed range of the FPS is between 5 - 90 for now.

handleAddPatch(patch, inversePatches);

Function used to push the the most recent changes onto the undo and redo stacks. This allows the stacks to track the changes in an array format which can then be used to undo or redo user actions.

handleImage(filterType, filterValue);

Function used to control the view of the fingerprint window image. In particular, it applies the filterType that is either "brightness", "contrast", "saturation", and "hue" to the image with the value of filterValue. Brightness, contrast, saturation, and hue have default values of 100, 100, 100, and 0, and ranges 0-200, 0-200, 0-100, and 0-100, respectively.

handleImageCommands(command);

Function that takes in a string command of value equal to "resetImage", "undo", "redo", "addMarker", or "submitImage", applies the change to the state, and sents messages to the websocket server as appropriate.

addMarker(x, y, orientation, size, color, type);

Function that adds a new marker to the markers array for the fingerprint window. It creates a new object with the attributes given as the parameters. This is meant for marking minutiae for the fingerprint window. The x and y refer to pixel coordinates, with x: 0, y: 0 beginning at the top left corner. The orientation is the clockwise angle in degrees from the positive x-axis -- eg. 0 points left, 90 points down, etc. The size is in pixels and the color varies between blue, green, yellow, red, and orange. The type of the minutiae are either ending, bifurcation, or unknown.

handleMarker(commandType, markerIndex, commandValue);

Function that edits a marker in the markers array at index markerIndex with given commandType being either: rotate which affects orientation, resize which affects size, recolor which affects color, move whcih affects x and y, changeType which affects type, and delete which removes that marker entirely. The function updates that marker in the array with given value and sends a websocket message with information about that change.

normalizeMarkers(markers);

Function that, given the markers array, maps through it to standardize the data points to actual pixels with respect to the image size, accounting for zooming and window resizing. It returns the normalized markers array.

gameWindow.js (opens new window) Game window component, a component used to render every frames from the server. Before the game starts, there is a loading component inside the window. After the game is ready to start, the first frame of the game will be rendered. This component is only visible if the fingerprint attribute is set to false.

fingerprintWindow.js (opens new window) The fingerprint window, a component used to render a fingerprint image and allows the user to manipulate and mark that image. This component is only visible if the fingerprint attribute is set to true. While the fingerprint image is fetched, there is a loading component inside the window. The window allows for zooming and panning, image filtering, and marker adding. More information about this feature can be found in the fingerprint page.

control.js (opens new window) ControlPanel component includes all the elements that needed to control the game. For example, we have direction control buttons and "start", "stop","reset", etc. We have introduced the selective UI to our ControlPanel to meet different requirements for each project. Researchers can select the control buttons they want for their project.

Control components we have right now:

  • Game control
    • Left
    • LeftUp
    • LeftDown
    • Right
    • RightUp
    • RightDown
    • Up
    • Down
    • Fire
  • Train Control
    • Start
    • Pause
    • Stop
    • Reset
    • Train Online
    • Train Offline
    • Good
    • Bad
    • Fps Up
    • Fps Down
    • Fps Set
  • Image Controls
    • Brightness
    • Contrast
    • Saturation
    • Hue
  • Image Commands
    • Undo
    • Redo
    • Add Marker
    • Reset Image
    • Submit Image
  • Game Instructions

budgetBar.js (opens new window) Budget Bar component, used to render the usedInputBudget and inputBudget. This component is visible if there are limits on the number of times that the user can give the feedback by clicking the "good" and "bad" buttons.

displayBar.js (opens new window) Display Bar component, used to render extra information that the researcher want to display on the game page. For example, the researcher can choose to display the score of the last game, the number of total episodes and the remaining episodes.

error.js (opens new window) Error component, this component is only visible to the user if there are errors in the query parameters.

MessageViewer.js (opens new window) Message viewer is used when debug mode is set to true in the query parameters. By enabling the debug mode, all incoming and outgoing messages will be showed on the page.

header.js (opens new window) Header component that will be rendered on every pages of our framework. We only have an IRLL logo and a step bar to indicate the current step for now.

footer.js (opens new window) Footer component that will be rendered on every pages of our framework. We have logos for the University of Alberta and amii.

# Setup

Install the packages required for frontend

$ npm install

# Run

Run frontend in the browser

$ npm start

# Build

Build the code for production

$ npm run build

# Dependencies

← AWS Setup →