wami is an image manipulation demo application. wami is an installable Progressive Web App (PWA) to demonstrate that web technologies can be used to create desktop apps that feel like platform-specific apps.

To open this sample:

1. Go to the wami demo in a new window or tab.

2. In the Address bar, click the App available button.

3. Open the installed app in its own window.

wami is under development; expect bugs and cross-browser compatibility issues.

wami can apply a sequence of image manipulation steps such as cropping, resizing, rotating, or adding effects on batch of images.

Readme and source code, App.

wami uses the following features:

1. Open the app.

2. Click on one of the pre-defined flows in the left sidebar, or create a new one from scratch by clicking Create a flow.

3. When a flow is opened, you can:

   • Rename the flow by typing in the flow name textfield.
   • Delete the flow by clicking the delete icon next to the flow name.
   • Add new flow steps by clicking Add a step.
   • Re-order steps by dragging them in the list of steps.
   • Change the parameters of steps.
   • Delete a step by clicking on the delete icon while hovering on a step.

To run a flow:

1. Drag images from your computer and drop them in the drop area (or click browse to select them with the operating system file picker).

2. Click Run flow. The images are processed based on the defined steps and the resulting images appear in the bottom area.

To download processed images:

1. Click Download to save the images to your Downloads folder.

2. Click Save to save the images back to their original locations (this will override the files on disk).

To use other input images:

• Drag new images on the drop area at the top. Or, click Remove input.

• You can also click Use as input to use the processed images as input images.

The app uses the WASM-ImageMagick library to process images in a worker thread.

Possible enhancements for this demo:

• Add a file_handlers manifest member to handle images.
• Categorize steps and add a way to search through them.
• Share images.
• Export/import flows as JSON files.
• Submit this demo to the Microsoft store.

• Progressive Web Apps (PWAs) documentation