Multi-image frontend + minor updates t owebsite

CITATION.cff

@@ -10,21 +10,21 @@ authors:
   - name: Samuel J. Cooper
     orcid: 0000-0003-4055-6903
 title: "Prediction of Microstructural Representativity from a Single Image"
-doi: arXiv:2410.19568v1 
-url: "https://arxiv.org/abs/2410.19568v1"
+doi: https://doi.org/10.1002/advs.202414149
+url: "https://advanced.onlinelibrary.wiley.com/doi/10.1002/advs.202414149"
 preferred-citation:
   type: article
   authors:
-  - name: Amir Dahari
-    orcid: 0000-0003-0142-8597
-  - name: Ronan Docherty
-    orcid: 0000-0002-7332-0924
-  - name: Steve Kench
-    orcid: 0000-0002-7263-6724
-  - name: Samuel J. Cooper
-    orcid: 0000-0003-4055-6903
-  doi: arXiv:2410.19568v1 
-  journal: "arXiV preprint"
-  month: 8
+    - name: Amir Dahari
+      orcid: 0000-0003-0142-8597
+    - name: Ronan Docherty
+      orcid: 0000-0002-7332-0924
+    - name: Steve Kench
+      orcid: 0000-0002-7263-6724
+    - name: Samuel J. Cooper
+      orcid: 0000-0003-4055-6903
+  doi: https://doi.org/10.1002/advs.202414149
+  journal: "Advanced Science"
+  month: 7
   title: "Prediction of Microstructural Representativity from a Single Image"
-  year: 2024
+  year: 2025

README.md

@@ -2,7 +2,7 @@
 
 [Try it out!](https://www.imagerep.io/)
 
-Here we introduce the 'ImageRep' method for fast phase fraction representativity estimation from a single microstructural image. This is achieved by calculating the Two-Point Correlation (TPC) function of the image, combined with a data-driven analysis of the [MicroLib](https://microlib.io/) dataset. By applying a statistical framework that utilizes both data sources, we can establish the uncertainty in the phase fraction in the image with a given confidence, **and** the image size that would be needed to meet a given target uncertainty. Further details are provided in our [preprint](https://arxiv.org/abs/2410.19568).
+Here we introduce the 'ImageRep' method for fast phase fraction representativity estimation from a single microstructural image. This is achieved by calculating the Two-Point Correlation (TPC) function of the image, combined with a data-driven analysis of the [MicroLib](https://microlib.io/) dataset. By applying a statistical framework that utilizes both data sources, we can establish the uncertainty in the phase fraction in the image with a given confidence, **and** the image size that would be needed to meet a given target uncertainty. Further details are provided in our [paper](https://advanced.onlinelibrary.wiley.com/doi/10.1002/advs.202414149).
 
 If you use this ImageRep in your research, [please cite us](CITATION.cff).
 
@@ -17,10 +17,11 @@ This method can be used via the [website (imagerep.io)](https://www.imagerep.io/
 NB: the website may run out of memory for large volumes (>1000x1000x1000) - if this happens run the method locally or contact us
 
 ## Limitations:
-- **This is not the only source of uncertainty!** Other sources *i.e,* segmentation uncertainty, also contribute and may be larger
-- For multi-phase materials, this method estimates the uncertainty in phase-fraction of a single (chosen) phase, counting all the others as a single phase (*i.e,* a binary microstructure)
+
+- **This is not the only source of uncertainty!** Other sources _i.e,_ segmentation uncertainty, also contribute and may be larger
+- For multi-phase materials, this method estimates the uncertainty in phase-fraction of a single (chosen) phase, counting all the others as a single phase (_i.e,_ a binary microstructure)
 - Not validated for for images smaller than 200x200 or 200x200x200
-- Not validated for large integral ranges/features sizes (>70 px) 
+- Not validated for large integral ranges/features sizes (>70 px)
 - Not designed for periodic structures
 - 'Length needed for target uncertainty' is an intentionally conservative estimate - retry when you have measured the larger sample to see a more accurate estimate of that uncertainty
 
@@ -31,11 +32,11 @@ These instructions are for installing and running the method locally. They assum
 ### Preliminaries
 
 Install [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) (ideally via a manager like [nvm](https://github.com/nvm-sh/nvm)) if you want to run the website. Clone this repo and change directory:
+
 ```
 git clone https://github.com/tldr-group/Representativity && cd Representativity
 ```
 
-
 ### Install & run the backend
 
 0. Setup a [virtual environment in Python](https://docs.python.org/3/library/venv.html) and activate it (not necessary but recommended)
@@ -55,13 +56,12 @@ python -m flask --app server run
 
 The server should now be running on `http://127.0.0.1:500` and listening for requests!
 
-
 3. If you want to reproduce (all) the figures, you'll need `pytorch` and some additional dependencies. It may be worth using [conda](https://www.anaconda.com/) to install `pytorch` as this will interact correctly with your GPU. Run
+
 ```
 pip install -r requirements_dev.txt
 ```
 
-
 ### Install & run the frontend
 
 0. Install the JS libraries needed to build and run the frontend. Install Yarn (and npm first if needed)
@@ -86,4 +86,4 @@ yarn && yarn start
 
 ```
 python tests/tests.py
-```
+```

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],
 };