Merge pull request #1247 from facebookresearch/add-video-annotator

Add Video Annotator feature

.gitignore

@@ -38,6 +38,13 @@ mephisto/generators/form_composer/data/*
 mephisto/generators/form_composer/hydra_configs/conf/*.yaml
 !mephisto/generators/form_composer/hydra_configs/conf/default.yaml
 
+# Video Annotator
+mephisto/generators/video_annotator/data/*
+!mephisto/generators/video_annotator/data/insertions/custom_validators.js
+!mephisto/generators/video_annotator/data/insertions/custom_triggers.js
+mephisto/generators/video_annotator/hydra_configs/conf/*.yaml
+!mephisto/generators/video_annotator/hydra_configs/conf/default.yaml
+
 # PyCharm
 .idea
 

docs/web/docs/explanations/architecture_overview.md

@@ -54,6 +54,6 @@ This is a quick guide over file directories in Mephisto project. Note that some
     - `review_app` - builds React app for TaskReview, and launches a server to display TaskReview in a browser
 - `outputs` - exhaust produced by running the code (logs, database dumps, etc)
 - `packages` - npm packages (can be used locally, and some are also in npm repo)
-    - `react-form-composer` - package for FC React component
+    - `mephisto-task-addons` - package for FC React component
 - `scripts` - command-line utilities for code upkeep
 - `test` - All tests (Back-end and Front-end, Unittests and Integration tests)

docs/web/docs/guides/how_to_use/data_porter/_category_.yml

@@ -4,4 +4,4 @@
 
 label: "Move data around"
 collapsed: false
-position: 9
+position: 10

docs/web/docs/guides/how_to_use/form_composer/configuration/config_files.md

@@ -13,19 +13,19 @@ This section is a reference on FormComposer's standard configuration files and o
 ## Config files structure
 
 You will need to provide FormComposer with a JSON configuration of your form fields,
-and place it in `generators/form-composer/data` directory.
+and place it in `generators/form_composer/data` directory.
 
 - The task config file should be named `task_data.json`, and contain a list of JSON objects, each one with one key `form`.
 - If you want to slightly vary your form within a Task (by inserting different values into its text), you need to add two files (that will be used to auto-generate `task_data.json` file):
     - `token_sets_values_config.json` containing a JSON array of objects (each with one key `tokens_values` and value representing name-value pairs for a set of text tokens to be used in one form version).
-    - `form_config.json` containing a single JSON object with one key `form`.
+    - `unit_config.json` containing a single JSON object with one key `form`.
     - For more details, read on about dynamic form configs.
 - If you want to insert code (HTML or JS) into your form config, you need to create `insertions` directory in the form config directory, and place these files there
     - For more details, read on about insertions.
 
 Working config examples are provided in `examples/form_composer_demo/data` directory:
 - task data config: `simple/task_data.json`
-- form config: `dynamic/form_config.json`
+- form config: `dynamic/unit_config.json`
 - token sets values config: `dynamic/token_sets_values_config.json`
 - separate tokens values: `dynamic/separate_token_values_config.json` to create `token_sets_values_config.json`
 - resulting extrapolated config: `dynamic/task_data.json`
@@ -124,7 +124,7 @@ Task data config file `task_data.json` specifies layout of all form versions tha
 ]
 ```
 
-### Form config levels
+### Unit config levels
 
 Form UI layout consists of the following layers of UI object hierarchy:
 
@@ -147,7 +147,7 @@ While attributes values are limited to numbers and text, these fields (at any hi
 _Note that, due to limitations of JSON format, HTML content needs to be converted into a single long string of text._
 
 You can style fields with HTML-classes in `classes` attribute. You can use any bootstrap classes or our built-in classes:
-- `hidden` - if you need to hide element and show it later with custom triggerm, but you do not need it be a fully hidden field (`"type": "hidden"`)
+- `hidden` - if you need to hide element and show it later with custom trigger, but you do not need it be a fully hidden field (`"type": "hidden"`)
 - `centered` - centered horizontally
 
 TBD: Other classes and styles insertions
@@ -298,9 +298,9 @@ The most important attributes are: `label`, `name`, `type`, `validators`
     - `checked`: initial state of selection (Boolean, default: false)
 
 
-## Config file: `form_config.json`
+## Config file: `unit_config.json`
 
-Form config file `form_config.json` specifies layout of a form in the same way as `task_data.json`, but with a few notable differences:
+Unit config file `unit_config.json` specifies layout of a form in the same way as `task_data.json`, but with a few notable differences:
 - It contains a single JSON object (not a JSON array of objects)
 - Some of its form attributes definitions must contain dynamic tokens (whose values will be extrapolated, i.e. substituted with variable chunks of text) - see further below.
 

docs/web/docs/guides/how_to_use/form_composer/configuration/form_composer_config_command.md

@@ -29,7 +29,7 @@ where
 - `-v/--verify` - if truthy, validates all JSON configs currently present in the form builder config directory
 - `-p/--permutate-sepatate-tokens` - if truthy, generates token sets values as all possible combinations of values of individual tokens
 - `-f/--update-file-location-values S3_FOLDER_URL` - generates token values based on file names found within the specified S3 folder (see a separate section about this mode of running FormComposer)
-- `-e/--extrapolate-token-sets` - if truthy, generates Task data config based on provided form config and takon sets values
+- `-e/--extrapolate-token-sets` - if truthy, generates Task data config based on provided form config and token sets values
 - `-u/--use-presigned-urls` - a **modifier** for `--update-file-location-values` command that converts S3 URLs into short-lived rtemporary ones (for more detailes see "Presigned URLs" section)
 
 ## Shortcut commands

docs/web/docs/guides/how_to_use/form_composer/configuration/insertions.md

@@ -21,7 +21,7 @@ The inserted code must reside in separate files (called "insertion files") locat
 
 ## HTML content insertion
 
-An HTML insertion file is specified as a file path that's relative to the form config. It can be inserted directly into `form_config.json` config, or via a token.
+An HTML insertion file is specified as a file path that's relative to the form config. It can be inserted directly into `unit_config.json` config, or via a token.
 
 #### Insertion without token
 
@@ -30,7 +30,7 @@ This is equivalent to setting value of that attribute to content of the HTML fil
 
 Attributes that support HTML insertions are the same ones that support tokens
 
-Example in `form_config.json`:
+Example in `unit_config.json`:
 ```json
 {
   ...
@@ -55,7 +55,7 @@ Example in `token_sets_values_config.json`:
 ]
 ```
 
-Then embed this token into `form_config.json`:
+Then embed this token into `unit_config.json`:
 ```json
 {
   ...
@@ -107,7 +107,7 @@ export function fieldContainsWord(field, value, word) {
 export { phoneValidatorFunction } from "./phone_validator_code.js";
 ```
 
-...and its usage in `form_config.json`:
+...and its usage in `unit_config.json`:
 ```json
 {
   ...
@@ -132,13 +132,14 @@ In form config, the trigger function is associated with an element by adding thi
 ```
 
 In your custom code, each trigger function must have the following signature:
-- Accept 4 required arguments `formData`, `updateFormData`, `element`, `fieldValue`, and extra arguments as needed
+- Accept 4 required arguments `formData`, `updateFormData`, `element`, `fieldValue`, `formFields`, and extra arguments as needed
     - `formData` is a React state with form data (`{<fieldName>: <fieldValue>, ...}`)
         - This allows to lookup values of any form field by its `"name"` attribute
     - `updateFormData` is a callback that sets value of any form field in the React state
         - This allows to change values of any form field by its `"name"` attribute, e.g. `updateFormData("name_first", "Austin")`. Note that you will need change HTML-field value as well.
     - `element` is the form object that fired the trigger (i.e. "field", "section" or "submit button" object defined in form config)
     - `fieldValue` is the value of an element that fired the trigger, if it's a form field (otherwise it's null)
+    - `formFields` is an object containing all form fields as defined in 'unit_config.json' (otherwise it's null)
     - Extra arguments will be passed after the `fieldValue` argument (they come from the `myTriggerArgument` value you specified in the form config under `"myTrigger"` key) :
         - If the value is a non-Array (Boolean, String, Number, or non-array Object), it will be passed as-is
         - If the value is an Array, the content of Array will be decostructed and passed as separate positional arguments.
@@ -180,13 +181,14 @@ export function onClickSectionHeader(
   updateFormData, // callback to set the React state
   element, // "field", "section", or "submit button" element that invoked this trigger
   fieldValue, // (optional) current field value, if the `element` is a form field
+  formFields, // (optional) Object containing all form fields as defined in 'unit_config.json'
   sectionName // Argument for this trigger (taken from form config)
 ) {
   alert(`${sectionName} section was clicked!`);
 }
 ```
 
-...and its usage in `form_config.json`:
+...and its usage in `unit_config.json`:
 ```json
 {
   ...,
@@ -210,29 +212,29 @@ During development of your form config, you can use a few available helper funct
 
   Example of use:
 
-  1. Add `react-form-composer` in webpack config
+  1. Add `mephisto-task-addons` in webpack config
 
   ```js
   resolve: {
     alias: {
       ...
-      "react-form-composer": path.resolve(
+      "mephisto-task-addons": path.resolve(
         __dirname,
-        "<relativePath>/packages/react-form-composer"
+        "<relativePath>/packages/mephisto-task-addons"
       ),
     },
   }
   ```
   2. Add import
   ```js
-  import { validateFieldValue } from "react-form-composer";
+  import { validateFieldValue } from "mephisto-task-addons";
   ```
   3. Validate a value before assigning it to form field
   ```js
   const valueIsValid = validateFieldValue(formFields.languageRadioSelector, {"en": true, "fr": false}, true);
   ```
 
-#### CSS styles insertions
+## CSS styles insertions
 
 To customize UI appearance, and separate CSS styles from your HTML insertions,
 you can create multiple CSS files in the `insertions` directory.

docs/web/docs/guides/how_to_use/form_composer/configuration/multiple_form_versions.md

@@ -35,7 +35,7 @@ _As a result, for each Task assignment Mephisto will automatically produce N uni
 If your form versions vary only slightly (e.g. same set of fields, but showing different images or different text), you should use a dynamic form config as follows:
 
 - Ensure you populate these files, and place them into your FormComposer config folder:
-    - `form_config.json`: tokenized form config - same as regular form config, except it will contain tokens within certain objects' attributes (see [Tokens extrapolation](#tokens-extrapolation))
+    - `unit_config.json`: tokenized form config - same as regular form config, except it will contain tokens within certain objects' attributes (see [Tokens extrapolation](#tokens-extrapolation))
     - `token_sets_values_config.json`: file containing sets of token values, where each set is used to generate one version of the form (and each form version will be completed by `units_per_assignment` different workers).
 - Optionally, verify your files: `mephisto form_composer config --verify`
 - Generate task data config: `mephisto form_composer config --extrapolate-token-sets`
@@ -116,7 +116,7 @@ Let's start with separate token values in `separate_token_values_config.json` fi
 
 #### Token values config
 
-Permutating these token values will produce this `form_config.json` file with token sets values:
+Permutating these token values will produce this `unit_config.json` file with token sets values:
 
 ```json
 [
@@ -151,9 +151,9 @@ Example of config after using `--update-file-location-values "https://s3.amazona
 ]
 ```
 
-#### Form config
+#### Unit config
 
-These tokens are placed into the `form_config.json` dynamic form config like so:
+These tokens are placed into the `unit_config.json` dynamic form config like so:
 
 ```json
 {
@@ -173,7 +173,7 @@ These tokens are placed into the `form_config.json` dynamic form config like so:
 
 #### Task data config
 
-After extrapolating attributes from `form_config.json` with token sets from `token_sets_values_config.json`, we get the resulting `task_data.json` file used for the task:
+After extrapolating attributes from `unit_config.json` with token sets from `token_sets_values_config.json`, we get the resulting `task_data.json` file used for the task:
 
 ```json
 // First extrapolated form version

docs/web/docs/guides/how_to_use/form_composer/embedding.md

@@ -10,33 +10,33 @@ sidebar_position: 4
 
 A few tips if you wish to embed FormComposer in your custom application:
 
-- To extrapolate form config (and generate the `task_data.json` file), call the extrapolator function `mephisto.generators.form_composer.configs_validation.extrapolated_config.create_extrapolated_config`
+- To extrapolate form config (and generate the `task_data.json` file), call the extrapolator function `mephisto.generators.generators_utils.config_validation.task_data_config.create_extrapolated_config`
     - For a live example, you can explore the source code of [run_task_dynamic.py](https://github.com/facebookresearch/Mephisto/blob/main/examples/form_composer_demo/run_task_dynamic.py) module
 - To use code insertions:
     - for custom validators:
-        - Point `WEBAPP__FORM_COMPOSER__CUSTOM_VALIDATORS` backend env variable to the location of `custom_validators.js` module (before building all webapp applications)
+        - Point `WEBAPP__GENERATOR__CUSTOM_VALIDATORS` backend env variable to the location of `custom_validators.js` module (before building all webapp applications)
         - When using `FormComposer` component, import validators with `import * as customValidators from "custom-validators";` and pass them to your `FormComposer` component as an argument: `customValidators={customValidators}`
         - Set this alias in your webpack config (to avoid build-time exception that `custom-validators` cannot be found):
         ```js
         resolve: {
           alias: {
             ...
             "custom-validators": path. resolve(
-              process.env.WEBAPP__FORM_COMPOSER__CUSTOM_VALIDATORS
+              process.env.WEBAPP__GENERATOR__CUSTOM_VALIDATORS
             ),
           },
         }
         ```
     - for custom triggers:
-        - Point `WEBAPP__FORM_COMPOSER__CUSTOM_TRIGGERS` backend env variable to the location of `custom_triggers.js` module (before building all webapp applications)
+        - Point `WEBAPP__GENERATOR__CUSTOM_TRIGGERS` backend env variable to the location of `custom_triggers.js` module (before building all webapp applications)
         - When using `FormComposer` component, import triggers with `import * as customTriggers from "custom-triggers";` and pass them to your `FormComposer` component as an argument: `customTriggers={customTriggers}`
         - Set this alias in your webpack config (to avoid build-time exception that `custom-triggers` cannot be found):
         ```js
         resolve: {
           alias: {
             ...
             "custom-triggers": path. resolve(
-              process.env.WEBAPP__FORM_COMPOSER__CUSTOM_TRIGGERS
+              process.env.WEBAPP__GENERATOR__CUSTOM_TRIGGERS
             ),
           },
         }

docs/web/docs/guides/how_to_use/form_composer/running.md

@@ -13,7 +13,7 @@ and then run the below commands.
 
 Once your Task launches, your console will display you URLs like this: `http://<YOUR_DOMAIN>/?worker_id=x&assignment_id=1`.
 
-- If you're doing local testing with `local` architect and `mock` provider, your URLs will start with `http://localhost:3000/`. To access your Task units as a worker, just paste one of these URLs into your browser.
+- If you're doing local testing with `local` architect and `inhouse` provider, your URLs will start with `http://localhost:3000/`. To access your Task units as a worker, just paste one of these URLs into your browser.
     - _If running with Docker, you will need to replace port `3000` in the console URLs with the remapped port (e.g. for `3001:3000` it will be `3001`)._
 - If you're running with a "real" provider, to access your Task units you will need to log into the provider's platform as a worker, and find them there.
 

docs/web/docs/guides/how_to_use/js_packages/_category_.yml

@@ -4,4 +4,4 @@
 
 label: "JS packages"
 collapsed: true
-position: 7
+position: 8

docs/web/docs/guides/how_to_use/providers/_category_.yml

@@ -4,4 +4,4 @@
 
 label: "Providers"
 collapsed: true
-position: 8
+position: 9

docs/web/docs/guides/how_to_use/review_app/running.md

@@ -35,7 +35,7 @@ where
 
 Command `mephisto review_app` supports the following options:
 
-- `-h/--host` - host where TaskReview app will be served
+- `-H/--host` - host where TaskReview app will be served
 - `-p/--port` - port where TaskReview app will be served
 - `-d/--debug` - run in debug mode (with extra logging)
 - `-f/--force-rebuild` - force rebuild React bundle (use if your Task client code has been updated)