Skip to main content

Customizing the app


The CamML app contains 4 tabs (including the optional Model tab that describes the model used). These four tabs are:

  • Cameras (home page): Displays webcam imagery, directions, buttons for labelling, and ML labels (optional).
  • About the project: Description of the project.
  • The model: Details regarding the training and performance of the model.
  • Contact us: Contact information, such as a project email or twitter handle.

The CamML app was built to be easily customizable with very little coding. We did this by creating a few .csv files and .md files that contain project info and text to be displayed in the app.

The files live in two folders within the CamML template directory: ui and text.


Below is a rough schematic of the CamML app that shows the location of some UI components. Both code templates use the same layout. In practice, the CamML app organizes pictures using two columns (rather than the one column shown for simplicity).


Picture of CamML app schematic


Picture of CamML app schematic

ui folder#

The /ui folder contains 3 .csv files control many aspects of the user interface for the the overall app. These files and descriptions of their contents are below.


There are two columns in this file, variable and value. The default file is available here.

The following table shows each variable and a description of what should go in the value column:

organizationName of organization that will display with the copyright statement at the bottom of the web app
titleText to be displayed in the top left of the header and in the browser tab
subtitleText to be displayed as heading directly above images
subtitle_descriptionDescriptive text below subtitle heading and above label badges
tzoneTime zone name (ex. America/New_York)
tzone_aliasText to be added after time rather than long time zone name (ex. EST/EDT)
logo_urlURL for logo. This is used as the favicon in the browser tab
descriptionHTML that renders as text to the right of the subtitle and subtitle_description that gives longform directions for the app. Check out the default value for an example
submit_successText in the final popup when responses are successfully written/saved
button_classesThe text for buttons used to label images, with each label separated by a comma (no spaces). Buttons are grouped below each image
use_modelWant to use an image classification model? TRUE or FALSE
modelName of model folder. ML model should be saved in the saved_model format
model_classesClasses of model output, in order, separated by commas, no spaces


This file contains information about the webcams that are supplying images for the app - the app will read in the file and use the info to download and display the images. The default file can be viewed here

Column nameDescription
camera_nameName of the camera site. If the name contains multiple words, remove the spaces and capitalize the first letter of each word. (ex. "Canal Zone" should be "CanalZone"). The name will be displayed with spaces between each word.
urlURL of the webcam to be used for downloading an image.
latCan leave blank for now. We hope to implement a map tab within the app in the future.
longCan leave blank for now. We hope to implement a map tab within the app in the future.
useShould the site be used and shown in the app? T or F. This allows users to add many sites, but only show a few


This file contains information for the badges that identify each label from the model. Badges will be listed in order (from top to bottom). The default file can be viewed here.

Column nameDescription
nameName of the label. Not currently used (I forgot to include it)
valueText to be displayed in the labelling badge
colorHex color for badge
descriptionText to be displayed as tooltip that describes the label

text folder#

The /text folder contains .md files that populate the more text-heavy parts of the app. The files are:

  • : Content for the About tab.
  • Content for the Model tab.
  • Sidebar content for the main Cameras tab.
  • Content for the Contact Us tab.
  • Text for the landing page popup that is shown on load.
  • Site description text that will show above the images.