fix: improve image dataset handling (#162)

Author: EscapedGibbon

README.md

@@ -4,6 +4,20 @@ This is the source code repository for the documentation of [image-js](https://g
 
 The documentation is available on <https://docs.image-js.org/>.
 
+## Generating demo images
+
+To regenerate the demo images (only needed when adding/updating images):
+
+```bash
+npm run generate-images
+```
+
+This will:
+
+- Fetch images from the URLs defined in `defaultImageUrls.ts`
+- Save them to the `static/` folder
+- Generate `imageData.json` with metadata
+
 ## Create demos
 
 A demo is simply a function which takes an image or mask as input and returns an image or mask as output. When imported in `md` files, it will be transformed into a demo component which allows choosing from various image or video sources to showcase the image transformation.

generateImages.mjs

@@ -0,0 +1,91 @@
+import fs from 'fs';
+import path from 'path';
+
+import { fetchURL, write } from 'image-js';
+
+import { defaultImages, defaultMasks } from './imageDataset.mjs';
+
+const __dirname = import.meta.dirname;
+
+export async function imageLoader() {
+  const demoImagesDir = 'demoImages';
+  const staticDir = 'static';
+
+  const imageData = { masks: [], images: [] };
+  try {
+    // Create static directory if it doesn't exist
+    const staticPath = path.join(__dirname, staticDir, demoImagesDir);
+
+    if (!fs.existsSync(staticPath)) {
+      fs.mkdirSync(staticPath, { 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);
+      const imagePath = path.join(
+        __dirname,
+        staticDir,
+        demoImagesDir,
+        'images',
+        imageTitle,
+      );
+      write(imagePath, 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);
+      const maskPath = path.join(
+        __dirname,
+        staticDir,
+        demoImagesDir,
+        'masks',
+        maskTitle,
+      );
+      write(maskPath, 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 = path.join(__dirname, 'src/demo/contexts/demo/generated');
+    if (!fs.existsSync(outputPath)) {
+      fs.mkdirSync(outputPath, { recursive: true });
+    }
+    fs.writeFileSync(
+      `${outputPath}/imageData.json`,
+      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(/^.*[\\/]/, '');
+}
+await imageLoader();

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