diff --git a/README.md b/README.md index 94f0edf..03293c9 100644 --- a/README.md +++ b/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 . +## 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. diff --git a/generateImages.mjs b/generateImages.mjs new file mode 100644 index 0000000..9df4154 --- /dev/null +++ b/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(); diff --git a/imageDataset.mjs b/imageDataset.mjs new file mode 100644 index 0000000..aa8a3fc --- /dev/null +++ b/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', + }, +]; diff --git a/package-lock.json b/package-lock.json index b12cce0..bb31659 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "eslint-config-zakodium": "^16.0.0", "prettier": "^3.6.2", "raw-loader": "^4.0.2", + "ts-node": "^10.9.2", "typescript": "^5.9.2" }, "engines": { @@ -2599,6 +2600,30 @@ "node": ">=20" } }, + "node_modules/@cspotcode/source-map-support": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", + "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "0.3.9" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "node_modules/@csstools/cascade-layer-name-parser": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.5.tgz", @@ -5755,6 +5780,34 @@ "node": ">=10.13.0" } }, + "node_modules/@tsconfig/node10": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", + "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tsconfig/node12": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", + "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tsconfig/node14": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", + "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", + "dev": true, + "license": "MIT" + }, + "node_modules/@tsconfig/node16": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", + "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/body-parser": { "version": "1.19.6", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz", @@ -8402,6 +8455,13 @@ } } }, + "node_modules/create-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", + "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", + "dev": true, + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -9356,6 +9416,16 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -13770,6 +13840,13 @@ "yallist": "^3.0.2" } }, + "node_modules/make-error": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", + "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", + "dev": true, + "license": "ISC" + }, "node_modules/markdown-extensions": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz", @@ -21584,6 +21661,57 @@ "typescript": ">=4.8.4" } }, + "node_modules/ts-node": { + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", + "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cspotcode/source-map-support": "^0.8.0", + "@tsconfig/node10": "^1.0.7", + "@tsconfig/node12": "^1.0.7", + "@tsconfig/node14": "^1.0.0", + "@tsconfig/node16": "^1.0.2", + "acorn": "^8.4.1", + "acorn-walk": "^8.1.1", + "arg": "^4.1.0", + "create-require": "^1.1.0", + "diff": "^4.0.1", + "make-error": "^1.1.1", + "v8-compile-cache-lib": "^3.0.1", + "yn": "3.1.1" + }, + "bin": { + "ts-node": "dist/bin.js", + "ts-node-cwd": "dist/bin-cwd.js", + "ts-node-esm": "dist/bin-esm.js", + "ts-node-script": "dist/bin-script.js", + "ts-node-transpile-only": "dist/bin-transpile.js", + "ts-script": "dist/bin-script-deprecated.js" + }, + "peerDependencies": { + "@swc/core": ">=1.2.50", + "@swc/wasm": ">=1.2.50", + "@types/node": "*", + "typescript": ">=2.7" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "@swc/wasm": { + "optional": true + } + } + }, + "node_modules/ts-node/node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true, + "license": "MIT" + }, "node_modules/ts-pattern": { "version": "5.8.0", "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.8.0.tgz", @@ -22308,6 +22436,13 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/v8-compile-cache-lib": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", + "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", + "dev": true, + "license": "MIT" + }, "node_modules/value-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", @@ -23068,6 +23203,16 @@ "node": ">= 14.6" } }, + "node_modules/yn": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", + "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 488237f..f5ba513 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "build": "docusaurus build", "clear": "docusaurus clear", "deploy": "docusaurus deploy", + "generate-images": "node generateImages.mjs", "cspell": "cspell lint \"**/*.md\"", "eslint": "eslint --cache ./src ./docs", "eslint-fix": "npm run eslint -- --fix", @@ -49,6 +50,7 @@ "eslint-config-zakodium": "^16.0.0", "prettier": "^3.6.2", "raw-loader": "^4.0.2", + "ts-node": "^10.9.2", "typescript": "^5.9.2" }, "browserslist": { diff --git a/src/demo/contexts/demo/defaultImages.ts b/src/demo/contexts/demo/defaultImages.ts index 4f7ad07..89c46cd 100644 --- a/src/demo/contexts/demo/defaultImages.ts +++ b/src/demo/contexts/demo/defaultImages.ts @@ -1,129 +1,8 @@ import type { UrlOption } from '../importImage/importImageContext'; -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'; +import dataset from './generated/imageData.json'; -export const defaultImages: UrlOption[] = [ - { - type: 'url', - value: `${standardUrl}/jellybeans.png`, - label: 'Jelly beans ', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/female.png`, - label: 'Female', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/femaleBellLabs.png`, - label: 'Female from Bell Labs ', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/house.png`, - label: 'House', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/mandrill.png`, - label: 'Mandrill', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/peppers.png`, - label: 'Peppers', - imageType: 'image', - }, +const defaultImages = dataset.images as UrlOption[]; +const defaultMasks = dataset.masks as UrlOption[]; - { - type: 'url', - value: `${standardUrl}/barbara.jpg`, - label: 'Barbara', - imageType: 'image', - }, - - { - type: 'url', - value: `${standardUrl}/boat.png`, - label: 'Standard boat', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/male.png`, - label: 'Male', - imageType: 'image', - }, - { - type: 'url', - value: `${standardUrl}/airport.png`, - label: 'Airport', - imageType: 'image', - }, -]; - -export const defaultMasks: UrlOption[] = [ - { - type: 'url', - value: `${morphologyMaskUrl}/circles.png`, - label: 'Circles', - imageType: 'mask', - }, - { - type: 'url', - value: `${morphologyMaskUrl}/shapes.png`, - label: 'Shapes', - imageType: 'mask', - }, - { - type: 'url', - value: `${morphologyMaskUrl}/star.png`, - label: 'Star', - imageType: 'mask', - }, - { - type: 'url', - value: `${standardMaskUrl}/house.png`, - label: 'House', - imageType: 'mask', - }, - { - type: 'url', - value: `${standardMaskUrl}/mandrill.png`, - label: 'Mandrill', - imageType: 'mask', - }, - { - type: 'url', - value: `${standardMaskUrl}/peppers.png`, - label: 'Peppers', - imageType: 'mask', - }, - - { - type: 'url', - value: `${standardMaskUrl}/barbara.png`, - label: 'Barbara', - imageType: 'mask', - }, - { - type: 'url', - value: `${standardMaskUrl}/boat.png`, - label: 'Standard boat)', - imageType: 'mask', - }, - - { - type: 'url', - value: `${standardMaskUrl}/male.png`, - label: 'Male', - imageType: 'mask', - }, -]; +export { defaultImages, defaultMasks }; diff --git a/src/demo/contexts/demo/generated/imageData.json b/src/demo/contexts/demo/generated/imageData.json new file mode 100644 index 0000000..d05d063 --- /dev/null +++ b/src/demo/contexts/demo/generated/imageData.json @@ -0,0 +1,120 @@ +{ + "masks": [ + { + "type": "url", + "imageType": "mask", + "label": "Circles (512x512)", + "value": "/demoImages/masks/circles.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Shapes (512x512)", + "value": "/demoImages/masks/shapes.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Star (512x512)", + "value": "/demoImages/masks/star.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "House (256x256)", + "value": "/demoImages/masks/house.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Mandrill (512x512)", + "value": "/demoImages/masks/mandrill.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Peppers (512x512)", + "value": "/demoImages/masks/peppers.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Barbara (512x512)", + "value": "/demoImages/masks/barbara.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Standard boat (512x512)", + "value": "/demoImages/masks/boat.png" + }, + { + "type": "url", + "imageType": "mask", + "label": "Male (1024x1024)", + "value": "/demoImages/masks/male.png" + } + ], + "images": [ + { + "type": "url", + "imageType": "image", + "label": "Jelly beans (256x256)", + "value": "/demoImages/images/jellybeans.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Female (256x256)", + "value": "/demoImages/images/female.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Female from Bell Labs (256x256)", + "value": "/demoImages/images/femaleBellLabs.png" + }, + { + "type": "url", + "imageType": "image", + "label": "House (256x256)", + "value": "/demoImages/images/house.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Mandrill (512x512)", + "value": "/demoImages/images/mandrill.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Peppers (512x512)", + "value": "/demoImages/images/peppers.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Barbara (512x512)", + "value": "/demoImages/images/barbara.jpg" + }, + { + "type": "url", + "imageType": "image", + "label": "Standard boat (512x512)", + "value": "/demoImages/images/boat.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Male (1024x1024)", + "value": "/demoImages/images/male.png" + }, + { + "type": "url", + "imageType": "image", + "label": "Airport (1024x1024)", + "value": "/demoImages/images/airport.png" + } + ] +} diff --git a/static/demoImages/images/airport.png b/static/demoImages/images/airport.png new file mode 100644 index 0000000..fda037f Binary files /dev/null and b/static/demoImages/images/airport.png differ diff --git a/static/demoImages/images/barbara.jpg b/static/demoImages/images/barbara.jpg new file mode 100644 index 0000000..814c5aa Binary files /dev/null and b/static/demoImages/images/barbara.jpg differ diff --git a/static/demoImages/images/boat.png b/static/demoImages/images/boat.png new file mode 100644 index 0000000..0450370 Binary files /dev/null and b/static/demoImages/images/boat.png differ diff --git a/static/demoImages/images/female.png b/static/demoImages/images/female.png new file mode 100644 index 0000000..d0e2feb Binary files /dev/null and b/static/demoImages/images/female.png differ diff --git a/static/demoImages/images/femaleBellLabs.png b/static/demoImages/images/femaleBellLabs.png new file mode 100644 index 0000000..4c2074e Binary files /dev/null and b/static/demoImages/images/femaleBellLabs.png differ diff --git a/static/demoImages/images/house.png b/static/demoImages/images/house.png new file mode 100644 index 0000000..d307be3 Binary files /dev/null and b/static/demoImages/images/house.png differ diff --git a/static/demoImages/images/jellybeans.png b/static/demoImages/images/jellybeans.png new file mode 100644 index 0000000..88d8597 Binary files /dev/null and b/static/demoImages/images/jellybeans.png differ diff --git a/static/demoImages/images/male.png b/static/demoImages/images/male.png new file mode 100644 index 0000000..8f33c75 Binary files /dev/null and b/static/demoImages/images/male.png differ diff --git a/static/demoImages/images/mandrill.png b/static/demoImages/images/mandrill.png new file mode 100644 index 0000000..0b707d3 Binary files /dev/null and b/static/demoImages/images/mandrill.png differ diff --git a/static/demoImages/images/peppers.png b/static/demoImages/images/peppers.png new file mode 100644 index 0000000..4d52559 Binary files /dev/null and b/static/demoImages/images/peppers.png differ diff --git a/static/demoImages/masks/barbara.png b/static/demoImages/masks/barbara.png new file mode 100644 index 0000000..e0b28b1 Binary files /dev/null and b/static/demoImages/masks/barbara.png differ diff --git a/static/demoImages/masks/boat.png b/static/demoImages/masks/boat.png new file mode 100644 index 0000000..cffbf91 Binary files /dev/null and b/static/demoImages/masks/boat.png differ diff --git a/static/demoImages/masks/circles.png b/static/demoImages/masks/circles.png new file mode 100644 index 0000000..e9f55f6 Binary files /dev/null and b/static/demoImages/masks/circles.png differ diff --git a/static/demoImages/masks/house.png b/static/demoImages/masks/house.png new file mode 100644 index 0000000..3c09e16 Binary files /dev/null and b/static/demoImages/masks/house.png differ diff --git a/static/demoImages/masks/male.png b/static/demoImages/masks/male.png new file mode 100644 index 0000000..ab287aa Binary files /dev/null and b/static/demoImages/masks/male.png differ diff --git a/static/demoImages/masks/mandrill.png b/static/demoImages/masks/mandrill.png new file mode 100644 index 0000000..1cbd4a0 Binary files /dev/null and b/static/demoImages/masks/mandrill.png differ diff --git a/static/demoImages/masks/peppers.png b/static/demoImages/masks/peppers.png new file mode 100644 index 0000000..2949dfc Binary files /dev/null and b/static/demoImages/masks/peppers.png differ diff --git a/static/demoImages/masks/shapes.png b/static/demoImages/masks/shapes.png new file mode 100644 index 0000000..f03c0d7 Binary files /dev/null and b/static/demoImages/masks/shapes.png differ diff --git a/static/demoImages/masks/star.png b/static/demoImages/masks/star.png new file mode 100644 index 0000000..82a4621 Binary files /dev/null and b/static/demoImages/masks/star.png differ