fix: improve image dataset handling

docusaurus.config.js

@@ -53,6 +53,15 @@ async function createConfig() {
     baseUrl: '/',
 
     plugins: [
+      function generateImagesPlugin() {
+        return {
+          name: 'generate-images-plugin',
+          async loadContent() {
+            const { imageLoader } = await import('./imageLoader.mjs');
+            await imageLoader();
+          },
+        };
+      },
       demoLoaderPlugin,
       [
         '@dipakparmar/docusaurus-plugin-umami',

imageDataset.mjs

@@ -0,0 +1,109 @@
+const standardUrl = 'https://demo-dataset.image-js.org/standard';
+const standardMaskUrl = 'https://demo-dataset.image-js.org/standard_mask';
+const morphologyMaskUrl = 'https://demo-dataset.image-js.org/morphology_mask';
+
+export const defaultImages = [
+  {
+    value: `${standardUrl}/jellybeans.png`,
+    label: 'Jelly beans ',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/female.png`,
+    label: 'Female',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/femaleBellLabs.png`,
+    label: 'Female from Bell Labs ',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/house.png`,
+    label: 'House',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/mandrill.png`,
+    label: 'Mandrill',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/peppers.png`,
+    label: 'Peppers',
+    imageType: 'image',
+  },
+
+  {
+    value: `${standardUrl}/barbara.jpg`,
+    label: 'Barbara',
+    imageType: 'image',
+  },
+
+  {
+    value: `${standardUrl}/boat.png`,
+    label: 'Standard boat',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/male.png`,
+    label: 'Male',
+    imageType: 'image',
+  },
+  {
+    value: `${standardUrl}/airport.png`,
+    label: 'Airport',
+    imageType: 'image',
+  },
+];
+
+export const defaultMasks = [
+  {
+    type: 'url',
+    value: `${morphologyMaskUrl}/circles.png`,
+    label: 'Circles',
+    imageType: 'mask',
+  },
+  {
+    value: `${morphologyMaskUrl}/shapes.png`,
+    label: 'Shapes',
+    imageType: 'mask',
+  },
+  {
+    value: `${morphologyMaskUrl}/star.png`,
+    label: 'Star',
+    imageType: 'mask',
+  },
+  {
+    value: `${standardMaskUrl}/house.png`,
+    label: 'House',
+    imageType: 'mask',
+  },
+  {
+    value: `${standardMaskUrl}/mandrill.png`,
+    label: 'Mandrill',
+    imageType: 'mask',
+  },
+  {
+    value: `${standardMaskUrl}/peppers.png`,
+    label: 'Peppers',
+    imageType: 'mask',
+  },
+
+  {
+    value: `${standardMaskUrl}/barbara.png`,
+    label: 'Barbara',
+    imageType: 'mask',
+  },
+  {
+    value: `${standardMaskUrl}/boat.png`,
+    label: 'Standard boat',
+    imageType: 'mask',
+  },
+
+  {
+    value: `${standardMaskUrl}/male.png`,
+    label: 'Male',
+    imageType: 'mask',
+  },
+];

imageLoader.mjs

@@ -0,0 +1,70 @@
+import fs from 'fs';
+
+import { fetchURL, write } from 'image-js';
+
+import { defaultImages, defaultMasks } from './imageDataset.mjs';
+
+export async function imageLoader() {
+  const demoImagesDir = 'demoImages';
+  const staticDir = 'static';
+
+  const imageData = { masks: [], images: [] };
+  try {
+    // Create static directory if it doesn't exist
+    if (!fs.existsSync(`./${staticDir}/${demoImagesDir}`)) {
+      fs.mkdirSync(`./${staticDir}/${demoImagesDir}`, { recursive: true });
+    }
+
+    const images = await Promise.all(
+      defaultImages.map((imageDataUrl) => fetchURL(imageDataUrl.value)),
+    );
+
+    for (let i = 0; i < images.length; i++) {
+      const image = images[i];
+      const imageDataUrl = defaultImages[i];
+      const imageTitle = getFilename(imageDataUrl.value);
+      write(`./${staticDir}/${demoImagesDir}/images/${imageTitle}`, image, {
+        recursive: true,
+      });
+      // Keeping object structure for compatibility
+      imageData.images.push({
+        type: 'url',
+        imageType: 'image',
+        label: `${imageDataUrl.label} (${image.width}x${image.height})`,
+        value: `/${demoImagesDir}/images/${imageTitle}`,
+      });
+    }
+
+    const masks = await Promise.all(
+      defaultMasks.map((maskDataUrl) => fetchURL(maskDataUrl.value)),
+    );
+
+    for (let i = 0; i < masks.length; i++) {
+      const mask = masks[i];
+      const maskDataUrl = defaultMasks[i];
+      const maskTitle = getFilename(maskDataUrl.value);
+      write(`./${staticDir}/${demoImagesDir}/masks/${maskTitle}`, mask, {
+        recursive: true,
+      });
+      // Keeping object structure for compatibility
+      imageData.masks.push({
+        type: 'url',
+        imageType: 'mask',
+        label: `${maskDataUrl.label} (${mask.width}x${mask.height})`,
+        value: `/${demoImagesDir}/masks/${maskTitle}`,
+      });
+    }
+    // Write data about newly created files.
+    const outputPath = `./${staticDir}/${demoImagesDir}/imageData.json`;
+
+    fs.writeFileSync(outputPath, JSON.stringify(imageData, null, 2));
+  } catch (error) {
+    throw new Error(`Error in imageLoader: ${error.message}`);
+  }
+
+  return imageData;
+}
+// Returns only filename with extension.
+function getFilename(filepath) {
+  return filepath.replace(/^.*[\\/]/, '');
+}