IssueId #217903 feat: Implementing New Mechanics with Image Game

.github/workflows/all-app-sandbox.yml

@@ -74,7 +74,10 @@ jobs:
           REACT_APP_POST_LEARNER_PROGRESS: ${{ vars.REACT_APP_POST_LEARNER_PROGRESS }}
           REACT_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
           REACT_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
-          REACT_APP_IS_APP_LANGUAGES: ${{ vars.REACT_APP_IS_APP_LANGUAGES }}
+          REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
+          REACT_APP_ASR_OFFLINE_LANGUAGUAGES:  ${{ vars.REACT_APP_ASR_OFFLINE_LANGUAGUAGES }}
+          REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
+          REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
           CI: false  # Disabling CI to not treat warnings as errors
         run: npm run build
 

.github/workflows/all-dev-rig.yml

@@ -3,7 +3,7 @@ name: ALL rig dev Deployment
 on:
   push:
     branches:
-      - all-1.2
+      - all-2.0-offline
 
 jobs:
   deploy:
@@ -74,7 +74,10 @@ jobs:
           REACT_APP_POST_LEARNER_PROGRESS: ${{ vars.REACT_APP_POST_LEARNER_PROGRESS }}
           REACT_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
           REACT_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
-          REACT_APP_IS_APP_LANGUAGES: ${{ vars.REACT_APP_IS_APP_LANGUAGES }}
+          REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
+          REACT_APP_ASR_OFFLINE_LANGUAGUAGES:  ${{ vars.REACT_APP_ASR_OFFLINE_LANGUAGUAGES }}
+          REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
+          REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
           CI: false  # Disabling CI to not treat warnings as errors
         run: npm run build
 

.github/workflows/all-prod-rig.yml

@@ -74,7 +74,10 @@ jobs:
           REACT_APP_POST_LEARNER_PROGRESS: ${{ vars.REACT_APP_POST_LEARNER_PROGRESS }}
           REACT_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
           REACT_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
-          REACT_APP_IS_APP_LANGUAGES: ${{ vars.REACT_APP_IS_APP_LANGUAGES }}
+          REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
+          REACT_APP_ASR_OFFLINE_LANGUAGUAGES:  ${{ vars.REACT_APP_ASR_OFFLINE_LANGUAGUAGES }}
+          REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
+          REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
           CI: false  # Disabling CI to not treat warnings as errors
         run: npm run build
 

package.json

@@ -7,6 +7,7 @@
     "@aws-sdk/client-s3": "^3.388.0",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
+    "@ffmpeg/ffmpeg": "^0.9.8",
     "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.2",
@@ -21,7 +22,13 @@
     "canvas-confetti": "^1.9.2",
     "character-error-rate": "^1.1.4",
     "classnames": "^2.3.1",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.1",
     "faker": "^5.5.3",
+    "ffmpeg": "^0.0.4",
+    "fuzzball": "^2.1.2",
     "homophones": "^1.0.1",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
@@ -43,10 +50,7 @@
     "sass": "^1.44.0",
     "split-graphemes": "^0.5.0",
     "use-sound": "^4.0.1",
-    "web-vitals": "^2.1.4",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -87,16 +91,16 @@
     ]
   },
   "devDependencies": {
+    "@mui/styles": "^5.15.10",
     "eslint": "^7.32.0",
-    "prettier": "^2.3.2",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "husky": "^9.0.11",
     "lint-staged": "^11.0.0",
-    "react": "^18.2.0",
-    "@mui/styles": "^5.15.10"
+    "prettier": "^2.3.2",
+    "react": "^18.2.0"
   },
-  "lint-staged": { 
+  "lint-staged": {
     "src/**/*.{js,jsx}": [
       "npx eslint --fix",
       "npx prettier --write"

public/index.html

@@ -21,6 +21,8 @@
       rel="stylesheet"
     />
     <link href="https://fonts.cdnfonts.com/css/bad-comic" rel="stylesheet" />
+    <script type="text/javascript" src="./whisper.wasm/stream.js" defer></script>
+    <script type="text/javascript" src="./whisper.wasm/initWhisper.js" defer></script>
     <script src="./js/jquery-3.7.0.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
     <title>EkStep</title>

public/whisper.wasm/initWhisper.js

@@ -0,0 +1,12 @@
+const loadWhisperModule = async () => {
+    try {
+      if (typeof Module === 'undefined') {
+        throw new Error('Module is not defined');
+      }
+      window.whisperModule = Module;
+    } catch (error) {
+      console.error('Failed to load WASM module', error);
+    }
+  };
+
+  loadWhisperModule();