remote-calibrator 0.3.0-rc.3 → 0.5.0-beta.10

package/CHANGELOG.md

@@ -9,11 +9,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Latency for gaze and viewing distance tracking. The latency is calculated by comparing the timestamps of the moment when the video stream is fed into the model for estimation and when the result is produced and recorded. You can access it by `data.value.latencyMs` where `data` is the argument passed into the callback function of `.trackGaze()` and `.trackDistance`.
+- Viewing distance monitoring. Three new options for `.trackDistance()` are added: `desiredDistanceCm` (default undefined), `desiredDistanceTolerance` (default 0.1), and `desiredDistanceMonitor` (default false). If a number is given for `desiredDistanceCm`, the program will check the viewing distance and call for "Move CLOSER." or "Move FURTHER." to the participants, until the participant moved to the desired distance and the experiment will resume. Setting `desiredDistanceMonitor` to true will repeat this process through the rest of the experiment.
+- `debug` and `i18n` options of `.panel()`. When set to `true`, The first one adds some useful options, e.g., to skip calibration, for you to use when debugging. The second one adds a language picker for participants to choose their own languages (the default choice is always the one set on initiation).
+- Update near point tracking to be more accurate. The webcam is assumed to be at the top middle of the screen.
+- "Redo last response" button for the blind spot test.
+- Measurement repeatability check for the blind spot test. The data will be accepted only if the right eye measurement and the left eye measurement are close enough, i.e. their averages disagree by less than 20%. If not, the measurement will repeat until the averages agree with each other. After that, the median of all measures will be chosen as the final result.
+- The raw data of the blind spot test is also saved now, the new data structure is `{ value, timestamp, method, raw }`. The raw data is an array of all kept measures (a measure is deleted after the participant chose to redo the last response).
+
+### Changed
+
+- Rename "Head Tracking" to "Distance Tracking" globally.
+- Polish translations.
+- Elements, like `.calibration-background`, have a higher `z-index` to avoid being covered by external elements.
+
+## [0.3.0] - 2021-10-16
+
+### Added
+
 **i18n!**
 
 - Internationalization! A full list of supported languages can be found at https://docs.google.com/spreadsheets/d/1UFfNikfLuo8bSromE34uWDuJrMPFiJG3VpoQKdCGkII/edit#gid=0.
 - A few new getters related to languages:
-  - `.userLanguage` (as a part of `.environment()`)
+  - `.userLanguage`
   - `.language` (e.g., `en-US`, `zh-CN`)
   - `.languageNameEnglish` (e.g., `English`, `Chinese (Simplified)`)
   - `.languageNameNative` (e.g., `简体中文`)
@@ -24,17 +42,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `.newLanguage(lang = 'en-US')` to set a new language for the calibrator.
 - Allows researchers to set language on initialization using the `language` option. Set to `AUTO` (default) will let the calibrator go with the user language.
 - `.isMobile` getter.
-- Call `.environment()` automatically when initializing the calibrator.
+- Call `._environment()` and `._displaySize()` automatically when initializing the calibrator.
 - Instructions in the viewing distance measurement (and head tracking setup) is scrollable to avoid overlapping with the canvas on small screen sizes.
 - Automatically minimize the mobile address bar when a calibration task starts.
+- Safer type check for callback functions to avoid fatal errors.
+- Version console log on loading.
 
 ### Changed
 
 - Improved UI and performance for small screens and mobile devices.
 - Take Return instead of Space for confirming screen size measurement.
+- (Breaking) `.fullScreenData` getter is changed to `.fullscreenData`.
+- Viewing distance methods become `BlindSpot` or `FaceMesh`.
+
+### Fixed
+
+- Participants can now continue (restart) calibration tasks after quitting at the middle of the last one.
+- Various fixes and updates for the panel.
+- Gaze and head trackers stop working on Safari when the video preview is turned off. (#49)
+- Fatal error due to cannot detect devices for VR headsets.
+- Remove wrongly labelled camera icon for measuring viewing distance task in the panel.
 
 ### Removed
 
+- (Breaking) `.environment()` and `.displaySize()`. Values can be accessed directly throw the getters.
 - The responsive arrow in the screen size calibration with credit card.
 
 ## [0.2.3] - 2021-10-05
@@ -244,7 +275,8 @@ No new feature updates in this release. Updated dependency packages and the lice
 
 The framework and some basic functions, e.g., screen size calibration. Released for integration testing.
 
-[unreleased]: https://github.com/EasyEyes/remote-calibrator/compare/v0.2.3...develop
+[unreleased]: https://github.com/EasyEyes/remote-calibrator/compare/v0.3.0...develop
+[0.3.0]: https://github.com/EasyEyes/remote-calibrator/compare/v0.2.3...v0.3.0
 [0.2.3]: https://github.com/EasyEyes/remote-calibrator/compare/v0.2.2...v0.2.3
 [0.2.2]: https://github.com/EasyEyes/remote-calibrator/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/EasyEyes/remote-calibrator/compare/v0.2.0...v0.2.1

package/README.md

@@ -10,8 +10,6 @@
 
 Welcome to Remote Calibrator! This package contains several useful tools to calibrate and track for the remote psychophysics experiments, e.g., crowd-sourced through Amazon Mechanical Turk.
 
-The features/functions marked with 🚧 are still work-in-progress and not available yet.
-
 ## Demo
 
 Please visit https://calibrator.app for the demo. More information can be found at https://easyeyes.app/remote-calibrator/.
@@ -47,18 +45,18 @@ RemoteCalibrator.measureDistance({}, data => {
 
 ## Functions
 
-| Task                                      | Functions                                                                                                                                                                                        |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [🎬 Initialize](#-initialize)             | [`init()`](#-initialize) (always required)                                                                                                                                                       |
-| [🍱 Panel](#-panel)                       | [`async panel()`](#-panel) `removePanel()` `resetPanel()`                                                                                                                                        |
-| [🖥️ Screen](#️-screen)                    | [`displaySize()`](#measure-display-pixels) [`screenSize()`](#measure-screen-size)                                                                                                                |
-| [📏 Viewing Distance](#-viewing-distance) | [`measureDistance()`](#-viewing-distance)                                                                                                                                                        |
-| [🙂 Head Tracking](#-head-tracking)       | (viewing distance and [near point](#near-point)) [`trackDistance()`](#-head-tracking) [`async getDistanceNow()`](#async-get-distance-now) [Lifecycle](#lifecycle) [Others](#others)              |
-| [👀 Gaze](#-gaze)                         | [`trackGaze()`](#start-tracking) [`async getGazeNow()`](#async-get-gaze-now) [`calibrateGaze()`](#calibrate) [`getGazeAccuracy()`](#get-accuracy-) [Lifecycle](#lifecycle-1) [Others](#others-1) |
-| [💻 Environment](#-environment)           | [`environment()`](#-environment)                                                                                                                                                                 |
-| [💄 Customization](#-customization)       | `backgroundColor()` `videoOpacity()` `showCancelButton()`                                                                                                                                        |
-| [📔 Other Functions](#-other-functions)   | `checkInitialized()` `getFullscreen()` `newLanguage()`                                                                                                                                           |
-| [🎣 Getters](#-getters)                   | [Experiment](#experiment) [Environment](#environment) [i18n](#i18n) [All Data](#all-data) [Others](#others-2)                                                                                    |
+| Task                                        | Functions                                                                                                                                                                                                                    |
+| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [🎬 Initialize](#-initialize)               | [`init()`](#-initialize) (always required)                                                                                                                                                                                   |
+| [🍱 Panel](#-panel)                         | [`async panel()`](#-panel) `removePanel()` `resetPanel()`                                                                                                                                                                    |
+| [🖥️ Screen](#️-screen)                      | [Display Pixel Dimensions](#measure-display-pixels) [`screenSize()`](#measure-screen-size)                                                                                                                                   |
+| [📏 Viewing Distance](#-viewing-distance)   | [`measureDistance()`](#-viewing-distance)                                                                                                                                                                                    |
+| [🙂 Distance Tracking](#-distance-tracking) | (viewing distance and [near point](#near-point)) [`trackDistance()`](#-distance-tracking) [`async getDistanceNow()`](#async-get-distance-now) [`checkDistance()`](#check-distance) [Lifecycle](#lifecycle) [Others](#others) |
+| [👀 Gaze](#-gaze)                           | [`trackGaze()`](#start-tracking) [`async getGazeNow()`](#async-get-gaze-now) [`calibrateGaze()`](#calibrate) [`getGazeAccuracy()`](#get-accuracy-) [Lifecycle](#lifecycle-1) [Others](#others-1)                             |
+| [💻 Environment](#-environment)             | [System and Browser Environment](#-environment)                                                                                                                                                                              |
+| [💄 Customization](#-customization)         | `backgroundColor()` `videoOpacity()` `showCancelButton()`                                                                                                                                                                    |
+| [📔 Other Functions](#-other-functions)     | `checkInitialized()` `getFullscreen()` `newLanguage()`                                                                                                                                                                       |
+| [🎣 Getters](#-getters)                     | [Experiment](#experiment) [Environment](#environment) [i18n](#i18n) [All Data](#all-data) [Others](#others-2)                                                                                                                |
 
 Arguments in square brackets are optional, e.g. `init([options, [callback]])` means both `options` configuration and the `callback` function are optional, but you have to put `options`, e.g., `{}`, if you want to call the callback function. The default values of `options` are listed in each section with explanation.
 
@@ -118,15 +116,13 @@ The `data` passed into the callback function is an [object](https://www.w3school
 
 ### 🍱 Panel
 
-![Panel](./media/panel.png)
-
 ```js
 /* async */ .panel(tasks, parentQuery, [options, [callback, [resolveOnFinish]]])
 ```
 
 `.panel()` is a powerful tool to help you set up a graphical user interface for participants to go through step-by-step and calibrate or set up tracking. It is highly customizable: tasks, task order, title, description, and "Done" button can all be customized. It is appended to the parent HTML node as set by `parentQuery`, e.g., if the parent node has id `main-area`, put `#main-area` as the `parentQuery`. Can only run once. Return a JavaScript [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) that will resolve the `resolveOnFinish` once the "Done" button is pressed.
 
-`tasks` is an array of tasks which can be a string or an object. Valid names are `screenSize`, `displaySize`, `measureDistance`, `trackDistance`, `trackGaze`, `environment` (system information).
+`tasks` is an array of tasks which can be a string or an object. Valid names are `screenSize`, `measureDistance`, `trackDistance`, `trackGaze`.
 
 <!-- prettier-ignore -->
 ```js
@@ -174,18 +170,10 @@ You can also use `.removePanel()` to remove the panel element after the calibrat
 
 #### Measure Display Pixels
 
-```js
-.displaySize([callback])
-```
-
-Get the display width and height in pixels. This is just a wrapper of vanilla JavaScript's `window.innerWidth`, `window.screenWidth`, etc.
-
-Pass `{ value: { displayWidthPx, displayHeightPx, windowWidthPx, windowHeightPx }, timestamp }` to callback.
+Get the display width and height in pixels. You can use `.displayWidthPx` `.displayHeightPx` `.windowWidthPx` `.windowHeightPx` getters. For example, `RemoteCalibrator.windowWidthPx.value` will give you the inner width of the current browser window.
 
 #### Measure Screen Size
 
-![Screen Size](./media/screenSize.png)
-
 ```js
 .screenSize([options, [callback]])
 ```
@@ -200,8 +188,6 @@ Pass `{ value: { screenWidthCm, screenHeightCm, screenDiagonalCm, screenDiagonal
   // Enter fullscreen if set to true
   // Will be ignored if already in fullscreen mode
   fullscreen: false,
-  // Quit fullscreen when calibration finished
-  quitFullscreenOnFinished: false, 🚧
   // How many times the participant needs to calibrate
   repeatTesting: 1,
   // The length of decimal place of the returned value
@@ -219,8 +205,6 @@ Pass `{ value: { screenWidthCm, screenHeightCm, screenDiagonalCm, screenDiagonal
 
 #### Measure
 
-![Measure Viewing Distance](./media/measureDistance.png)
-
 ```js
 .measureDistance([options, [callback]])
 ```
@@ -233,7 +217,6 @@ Pass `{ value, timestamp, method }` (equivalent to `RemoteCalibrator.viewingDist
 /* [options] Default value */
 {
   fullscreen: false,
-  quitFullscreenOnFinished: false, 🚧
   // How many times each of the eye will be used to test
   // By default, right eye 2 times, then left eye 2 times
   repeatTesting: 2,
@@ -243,17 +226,17 @@ Pass `{ value, timestamp, method }` (equivalent to `RemoteCalibrator.viewingDist
 }
 ```
 
-### 🙂 Head Tracking
+### 🙂 Distance Tracking
 
 ```js
 .trackDistance([options, [callbackStatic, [callbackTrack]]])
 ```
 
-Measure the viewing distance and then predict the real-time distance based on the change of the interpupillary distance, measured by [face landmarks](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection). `callbackStatic` is called after getting the blind spot result and `callbackTrack` is called every time a new result from estimation is derived.
+Measure the viewing distance and then predict the real-time distance based on the change of the inter-pupillary distance, measured by [face landmarks](https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection). `callbackStatic` is called after getting the blind spot result and `callbackTrack` is called every time a new result from estimation is derived.
 
-Pass `{ value: { viewingDistanceCm, nearPointCm: { x, y } }, timestamp, method }` to callback.
+Pass `{ value: { viewingDistanceCm, nearPointCm: { x, y }, latencyMs }, timestamp, method }` to callback.
 
-`method` can be either `"Blind Spot"` (for measures from blind spot tests) or `"Facemesh Predict"` (for later dynamic estimates).
+`method` can be either `"BlindSpot"` (for measures from blind spot tests) or `"FaceMesh"` (for later dynamic estimates).
 
 ```js
 /* [options] Default value */
@@ -264,12 +247,14 @@ Pass `{ value: { viewingDistanceCm, nearPointCm: { x, y } }, timestamp, method }
   showVideo: true,
   showFaceOverlay: false,
   decimalPlace: 1,
-  // Measurement per second
-  framerate: 3,
+  framerate: 3, // Measurement per second
+  desiredDistanceCm: undefined,
+  desiredDistanceTolerance: 0.1, // Range [0.1, 1]
+  desiredDistanceMonitor: false,
   // Near point
   nearPoint: true,
   showNearPoint: false,
-  headline: "🙂 Set up for Head Tracking",
+  headline: "🙂 Set up for Distance Tracking",
   description: "...",
 }
 ```
@@ -282,6 +267,14 @@ Pass `{ value: { viewingDistanceCm, nearPointCm: { x, y } }, timestamp, method }
 
 You can pause active distance tracking, and use this function to get the latest distance at the moment when the user makes reactions. If no callback function is passed in, it will use the one from `.trackDistance()` as the default.
 
+#### Check Distance
+
+```js
+.checkDistance(desiredCm, errorTolerance)
+```
+
+Check the current viewing distance and compare it to the desired distance. Guide the participant to the target distance if needed.
+
 #### Near Point
 
 The observer's near point is the orthogonal nearest viewing point in the screen, or the plane containing the screen. To track the near point, we assume that the webcam view is orthogonal to the display, and it is placed around 0.5cm above the top center of the screen (e.g., the built-in webcam of a MacBook). Our method is based on the Facemesh model and can give you an approximate estimation of the near point.
@@ -304,8 +297,6 @@ The value returned are the horizontal and vertical offsets, in centimeters, comp
 
 #### Start Tracking
 
-![Start Gaze Tracking](./media/trackGaze.png)
-
 ```js
 .trackGaze([options, [callbackOnCalibrationEnd, [callbackTrack]]])
 ```
@@ -392,13 +383,7 @@ Pop an interface for participants to calibrate their gaze position on the screen
 
 ### 💻 Environment
 
-```js
-.environment([callback])
-```
-
-Get the setup information of the experiment, including browser type, device model, operating system family and version, etc. This function does not create its own timestamp, but use the one associated with `id`, i.e. the one created when `init()` is called.
-
-Pass `{ value: { browser, browserVersion, model, manufacturer, engine, system, systemFamily, description, fullDescription, userLanguage }, timestamp }` to callback.
+Get the setup information of the experiment, including browser type, device model, operating system family and version, etc. See the Getters section for more details.
 
 ### 💄 Customization
 
@@ -463,9 +448,9 @@ Use the following keywords to retrieve the whole dataset.
 - `.screenData`
 - `.viewingDistanceData`
 - `.nearPointData`
-- `.PDData` (Interpupillary distance data)
+- `.PDData` (Inter-pupillary distance data)
 - `.gazeData`
-- `.fullScreenData`
+- `.fullscreenData`
 - `.environmentData`
 - `.languageData`
 

package/homepage/example.css

@@ -42,6 +42,7 @@ body {
   border: 1px solid #ccc;
   border-radius: 7px;
   transition: opacity 600ms;
+  overflow-wrap: break-word;
 }
 
 #toolbox *,
@@ -109,9 +110,9 @@ code {
   display: block;
 }
 
-/* .getters button {
-  flex: 0 1 auto;
-} */
+.getters {
+  margin-bottom: 1rem;
+}
 
 .disabled {
   opacity: 0.5;

package/homepage/example.js

@@ -35,6 +35,7 @@ function printMessage(message) {
     p.innerHTML = 'No data can be found. Need measurement or calibration first.'
   else p.innerHTML = gotData(message)
   experimentElement.appendChild(p)
+  experimentElement.scrollTop = experimentElement.scrollHeight
   return p
 }
 
@@ -99,21 +100,33 @@ function makePanel(e) {
     [
       {
         name: 'screenSize',
+        callback: data => {
+          printMessage(
+            `[CALLBACK] Screen size calibration finished! This message is printed in the callback function. Only this task's callback is set up with a print function.`
+          )
+        },
       },
       {
         name: 'trackGaze',
+        callbackOnCalibrationEnd: data => {
+          console.log(data)
+        },
       },
+      'measureDistance',
       {
         name: 'trackDistance',
         options: {
           nearPoint: false,
         },
+        callbackStatic: data => {
+          console.log(data)
+        },
       },
     ],
     '#experiment',
     {},
-    () => {
-      printMessage('Panel finished!')
+    data => {
+      printMessage(`Panel finished at ${parseTimestamp(data.timestamp)}!`)
     }
   )
   changeClass(e.target, 'complete')
@@ -124,17 +137,17 @@ function makePanel(e) {
  * Measure the display size
  *
  */
-function measureDisplaySize(e) {
-  RemoteCalibrator.displaySize(displayData => {
-    printMessage(
-      `Display size is ${displayData.value.displayWidthPx} px in width and ${
-        displayData.value.displayHeightPx
-      } px in height, measured at ${parseTimestamp(displayData.timestamp)}.`
-    )
-
-    changeClass(e.target, 'complete')
-  })
-}
+// function measureDisplaySize(e) {
+//   RemoteCalibrator.displaySize(displayData => {
+//     printMessage(
+//       `Display size is ${displayData.value.displayWidthPx} px in width and ${
+//         displayData.value.displayHeightPx
+//       } px in height, measured at ${parseTimestamp(displayData.timestamp)}.`
+//     )
+
+//     changeClass(e.target, 'complete')
+//   })
+// }
 
 /**
  *
@@ -189,9 +202,12 @@ function trackViewingDistance(e) {
   let trackP
   RemoteCalibrator.trackDistance(
     {
-      showVideo: false,
+      showVideo: true,
       nearPoint: true,
       showNearPoint: true,
+      desiredDistanceCm: 60,
+      desiredDistanceMonitor: true,
+      desiredDistanceMonitorCancelable: false,
     },
     distanceData => {
       measureDistanceCallback(distanceData)
@@ -206,7 +222,9 @@ function trackViewingDistance(e) {
           data.method
         } method. The near point is at [${data.value.nearPointCm.x} cm, ${
           data.value.nearPointCm.y
-        } cm] compared to the center of the screen.`
+        } cm] compared to the center of the screen. Latency is ${
+          data.value.latencyMs
+        } ms.`
       )
     }
   )
@@ -304,7 +322,9 @@ function trackGaze(e) {
       gazeP.innerHTML = gotData(
         `The gaze position is [${data.value.x} px, ${
           data.value.y
-        } px] at ${parseTimestamp(data.timestamp)}.`
+        } px] at ${parseTimestamp(data.timestamp)}. Latency is ${
+          data.value.latencyMs
+        } ms.`
       )
     }
   )
@@ -398,10 +418,10 @@ function getGazeNow() {
  * Get environment info
  *
  */
-function getEnvironment(e) {
-  RemoteCalibrator.environment(data => {
-    printMessage('Environment: ' + data.value.description + '.')
+// function getEnvironment(e) {
+//   RemoteCalibrator.environment(data => {
+//     printMessage('Environment: ' + data.value.description + '.')
 
-    changeClass(e.target, 'complete')
-  })
-}
+//     changeClass(e.target, 'complete')
+//   })
+// }

package/homepage/index.html

@@ -61,6 +61,7 @@
 
       <div id="getters-exp" class="getters flex-wrapper"></div>
       <div id="getters-env" class="getters flex-wrapper"></div>
+      <div id="getters-data" class="getters flex-wrapper"></div>
     </div>
 
     <div id="experiment"></div>
@@ -93,7 +94,7 @@
         // [name, actual function name, function name used in this demo]
         ['Initialize', 'init', 'initialize'],
         ['Make a Panel', 'panel', 'makePanel'],
-        ['Measure Display Pixels Px', 'displaySize', 'measureDisplaySize'],
+        // ['Measure Display Pixels Px', 'displaySize', 'measureDisplaySize'],
         ['Measure Screen Size Cm', 'screenSize', 'measureScreenSize'],
         [
           'Measure Viewing Distance',
@@ -107,7 +108,7 @@
         ],
         ['Track Gaze', 'trackGaze', 'trackGaze'],
         // Environment
-        ['Get Environment', 'environment', 'getEnvironment'],
+        // ['Get Environment', 'environment', 'getEnvironment'],
       ]
 
       const functionsElement = document.getElementById('functions')
@@ -116,6 +117,7 @@
       })
 
       const gettersExp = [
+        'id',
         'displayWidthPx',
         'displayHeightPx',
         'windowWidthPx',
@@ -130,7 +132,6 @@
         'nearPointCm',
         'gazePositionPx',
         'isFullscreen',
-        'id',
         'language',
         'languageNameEnglish',
         'languageNameNative',
@@ -154,16 +155,29 @@
         'version',
       ]
 
+      const gettersData = [
+        'displayData',
+        'screenData',
+        'viewingDistanceData',
+        'nearPointData',
+        'PDData',
+        'gazeData',
+        'fullscreenData',
+        'environmentData',
+        'languageData',
+      ]
+
       function setGetters(gE, gS) {
         gS.forEach(getter => {
           let b = document.createElement('button')
           b.className = 'disabled'
-          b.onclick = () =>
+          b.onclick = () => {
             printMessage(
               RemoteCalibrator[getter]
                 ? `<code>${JSON.stringify(RemoteCalibrator[getter])}</code>`
                 : 'nodata'
             )
+          }
           b.innerHTML = `<code>.${getter}</code>`
           gE.appendChild(b)
         })
@@ -171,6 +185,7 @@
 
       setGetters(document.getElementById('getters-exp'), gettersExp)
       setGetters(document.getElementById('getters-env'), gettersEnv)
+      setGetters(document.getElementById('getters-data'), gettersData)
 
       // i18n
       const langPickerParent = document.getElementById('rc-language')

package/i18n/fetch-languages-sheets.js

@@ -14,7 +14,7 @@ async function processLanguageSheet() {
   const rows = await googleSheets.spreadsheets.values.get({
     auth,
     spreadsheetId,
-    range: 'Sheet1',
+    range: 'Translations',
   })
 
   const rowsJSON = XLSX.utils.sheet_to_json(
@@ -31,6 +31,16 @@ async function processLanguageSheet() {
       data[language] = translations
   }
 
+  for (let phrase in data) {
+    for (let lang in data[phrase]) {
+      if (data[phrase][lang].includes('XX'))
+        while (data[phrase][lang].includes('XX'))
+          data[phrase][lang] = data[phrase][lang]
+            .replace('XXX', 'xxx')
+            .replace('XX', 'xx')
+    }
+  }
+
   const exportWarning = `/*
   Do not modify this file! Run npm \`npm run phrases\` at ROOT of this project to fetch from the Google Sheets.
   https://docs.google.com/spreadsheets/d/1UFfNikfLuo8bSromE34uWDuJrMPFiJG3VpoQKdCGkII/edit#gid=0