fix: improve image dataset handling

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.

docusaurus.config.js

@@ -53,15 +53,6 @@ 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',

imageLoader.mjs

@@ -1,18 +1,25 @@
 import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
 import { fetchURL, write } from 'image-js';
 
 import { defaultImages, defaultMasks } from './imageDataset.mjs';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 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 staticPath = path.join(__dirname, staticDir, demoImagesDir);
+
+    if (!fs.existsSync(staticPath)) {
+      fs.mkdirSync(staticPath, { recursive: true });
     }
 
     const images = await Promise.all(
@@ -23,9 +30,14 @@ export async function imageLoader() {
       const image = images[i];
       const imageDataUrl = defaultImages[i];
       const imageTitle = getFilename(imageDataUrl.value);
-      write(`./${staticDir}/${demoImagesDir}/images/${imageTitle}`, image, {
-        recursive: true,
-      });
+      const imagePath = path.join(
+        __dirname,
+        staticDir,
+        demoImagesDir,
+        'images',
+        imageTitle,
+      );
+      write(imagePath, image, { recursive: true });
       // Keeping object structure for compatibility
       imageData.images.push({
         type: 'url',
@@ -43,9 +55,14 @@ export async function imageLoader() {
       const mask = masks[i];
       const maskDataUrl = defaultMasks[i];
       const maskTitle = getFilename(maskDataUrl.value);
-      write(`./${staticDir}/${demoImagesDir}/masks/${maskTitle}`, mask, {
-        recursive: true,
-      });
+      const maskPath = path.join(
+        __dirname,
+        staticDir,
+        demoImagesDir,
+        'masks',
+        maskTitle,
+      );
+      write(maskPath, mask, { recursive: true });
       // Keeping object structure for compatibility
       imageData.masks.push({
         type: 'url',
@@ -55,7 +72,10 @@ export async function imageLoader() {
       });
     }
     // Write data about newly created files.
-    const outputPath = `./${staticDir}/${demoImagesDir}/imageData.json`;
+    const outputPath = path.join(
+      __dirname,
+      'src/demo/contexts/demo/imageData.json',
+    );
 
     fs.writeFileSync(outputPath, JSON.stringify(imageData, null, 2));
   } catch (error) {
@@ -68,3 +88,4 @@ export async function imageLoader() {
 function getFilename(filepath) {
   return filepath.replace(/^.*[\\/]/, '');
 }
+await imageLoader();

package.json

@@ -6,6 +6,7 @@
     "build": "docusaurus build",
     "clear": "docusaurus clear",
     "deploy": "docusaurus deploy",
+    "generate-images": "node imageLoader.mjs",
     "cspell": "cspell lint \"**/*.md\"",
     "eslint": "eslint --cache ./src ./docs",
     "eslint-fix": "npm run eslint -- --fix",

src/demo/contexts/demo/defaultImages.ts

@@ -1,6 +1,7 @@
-import dataset from '../../../../static/demoImages/imageData.json';
 import type { UrlOption } from '../importImage/importImageContext';
 
+import dataset from './imageData.json';
+
 const defaultImages = dataset.images as UrlOption[];
 const defaultMasks = dataset.masks as UrlOption[];
 

static/demoImages/imageData.json → src/demo/contexts/demo/imageData.json

@@ -117,4 +117,4 @@
       "value": "/demoImages/images/airport.png"
     }
   ]
-}
+}