Batched image frontend

frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

frontend/configs/webpack/common.js

@@ -58,19 +58,19 @@ module.exports = {
         {
           from: "src/assets",
           to: "assets",
-        }
-      ]
+        },
+      ],
     }),
     new HtmlWebpackPlugin({
       template: "./src/assets/index.html",
-      favicon: "./src/assets/favicon.png"
+      favicon: "./src/assets/favicon.png",
     }),
     new FriendlyErrorsWebpackPlugin(),
     new webpack.ProvidePlugin({
       process: "process/browser",
     }),
   ],
   experiments: {
-    topLevelAwait: true
-  }
+    topLevelAwait: true,
+  },
 };

frontend/configs/webpack/dev.js

@@ -10,8 +10,8 @@ module.exports = merge(commonConfig, {
     open: true,
     historyApiFallback: true,
     // These headers enable the cross origin isolation state
-    // needed to enable use of SharedArrayBuffer for ONNX 
-    // multithreading. 
+    // needed to enable use of SharedArrayBuffer for ONNX
+    // multithreading.
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
       "Cross-Origin-Embedder-Policy": "credentialless",

frontend/package.json

@@ -8,7 +8,8 @@
     "lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
     "start": "yarn run start-dev",
     "test": "yarn run start-model-test",
-    "start-dev": "webpack serve --config=configs/webpack/dev.js"
+    "start-dev": "webpack serve --config=configs/webpack/dev.js",
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -65,4 +66,4 @@
     "@types/react-dom": "18.2.0",
     "@types/react": "18.2.0"
   }
-}
+}

frontend/postcss.config.js

@@ -1,4 +1,4 @@
 const tailwindcss = require("tailwindcss");
 module.exports = {
-  plugins: ["postcss-preset-env", 'tailwindcss/nesting', tailwindcss],
+  plugins: ["postcss-preset-env", "tailwindcss/nesting", tailwindcss],
 };