Skip to content

Frontend Documentation

Jump to bottom
Sebastian Jaskowski edited this page May 15, 2023 · 16 revisions

About

This page contains documentation for the files in the /frontend/playground-frontend directory of the Github repo. This page is regularly updated when new changes are added to these files.

The platform used to build the frontend is ReactJS with Bootstrap. Effort must be made to use common CSS classes and reusing React components for extendability.

For architecture design, the user may read Architecture.md located in the repo.

General Navigation

image The current UI has four main navbar items:

  • Home is the main and root page of this web application
  • About provides information on the motivation and technical stack used in this program
  • Wiki provides further information on the layers used and a demo video for new users
  • Feedback allows a user to send feedback to the DLP team via web form

Home

Where the magic happens. This page is rendered by Home.js which utilizes most of the components and hosts the primary function of the app.

High-level functionality

Given a set of possible layers and parameters in settings.json, the file generates the given UI that allows the user to drag and drop the intended layers, specify the arguments of the layers, and choose the additional parameters such as Epochs number. These parameters and layer information are then passed to the backend's Flask route at /run, waits for the backend to return a JSON message, successful or not, and then renders the results based on that JSON message.

In the good case scenario, all appropriate visualizations are rendered depending on the problem type. Some, like the following, are hidden in a Regression problem:

  • Confusion matrix
  • AUC/ROC plot
  • Accuracy/Loss results

On the other side, if the train session fails for whatever reason, e.g., inputting invalid Linear layer in and out arguments, a truncated stack of the error message raised by the backend will be caught and given to the frontend where that error message will be displayed in lieu of the results.

Saving Results

The user may opt to receive an email copy of the results before they train their data. Both the email and feedback functions are handled by the backend through the /send_email route.

While it is possible for the user to download their results through the web app, the accuracy/loss CSV and plots, AUC/ROC plot, and confusion matrix will be generated and downloaded by the frontend. This is slightly different than the model PT and ONNX files which will be downloaded directly from a directory backend_outputs updated by the backend and accessible by the frontend. However, the emailed results will all be from the backend. The backend does generate a copy of the plots and those copies will be emailed to the user. This is why saving the results via email and downloading them through the UI will produce aesthetically different files, but they will all reflect the same data.

Data passage

All visualizations are made on the frontend using Plotly and raw data passed from the backend. Essentially, the backend returns four items in a good case scenario:

  • success (bool) - whether a train session has been successful
  • message (string) - error message if training failed
  • dl_results (JSON) - main data dictating the train and test accuracy/loss results
  • auxiliary_outputs (JS object) - additional data such as AUC/ROC plot and confusion matrix raw data

The PT and ONNX files are created by the backend and placed in a directory backend_outputs accessible by the frontend.

How to Add New Layer Options

Currently, there are three layers implemented in this playgroud—Linear, ReLU, and Softmax. A developer can easily add in a new layer to be used by the user through:

  1. Go to settings.js
  2. Put in (* = required):
    • display_name*: Name of layer to be displayed to user
    • object_name*: Layer object to be passed into the backend, e.g., nn.linear(...)
    • parameters: An array of JS objects with at least the display name of the parameters for the layer object

Learning Modules

The Learning Modules page is designed to teach users the basics of deep learning so that they can use DLP without needing to know any heavy math. It is built in a typical, slightly-gamified khan-academy style, featuring multi-modal content such as photos, quizzes, exercises, and text.

Content is first organized into modules, and then each module is divided into sections. Each section then consists of multiple content blocks, which can be of many different types. The types of content currently supported are listed below.

  • text: This content type simply consists of a block of text.
  • heading1: This is a simple bolded heading
  • image: A png image
  • mcQuestion: A multiple-choice question, which can be answered by a user and marked correct or incorrect.
  • frQuestion: A free-response question, which can be answered by a user and marked correct or incorrect based on a case-insensitive exact text match.
  • exercise: A drag-and-drop environment similar to the primary DLP tool where users are presented with a simplified interface so that they can practice building models like they might build in the real DLP tool. Users can then be evaluated and given points based on the accuracy these models achieve.

Of the above components,

Table of Contents

Clone this wiki locally