Frontend Documentation

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 without Bootstrap (emphasis added as adding Bootstrap will force us to change many style elements). For architecture design, the user may read Architecture.md located in the repo.

General Navigation

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
• 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.