Learning NFT Generation By Example: An Open-Source Success Story

Lately I've been heads down on a generative NFT PFP project and working heavily with a Node.js tool called sharp. sharp is a high-speed image processing library that's useful for image converting, resizing, extraction, etc.

GitHub - lovell/sharp: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library. - GitHub - lovell/sharp: High performance Node.js image proc...

The Problem

In my project I'm using sharp to composite multiple layers of randomly chosen png images into one output image. The png files that I'm starting with are first exported from a Photoshop file using the super handy Photoshop-Export-Layers-to-Files-Fast script. The problem is that I'm working with 500+ layers with a complicated directory structure and some inconsistent naming schemes. This made it easy to use an incorrect filename/filepath in my image generation code.

Whenever this happened, sharp would produce the following error message: Input file is missing

This error message is not helpful when dealing with 30+ layers, each in a different directory. I found myself spending a ton of time trying to manually hunt down missing image layers and fix their incorrect names.

Luckily, sharp is an open-source library. I decided to take matters into my own hands and try to implement a fix.

The Fix

Spoiler: The fix itself ended up being extremely simple. I only had to update one line of code and adjust a unit test. The harder part was navigating the unfamiliar code base. Although sharp is a Node.js tool at the surface, it actually uses C++ bindings under the hood for all the image manipulation work. I have little to no experience with C++, so it took me a minute to figure out where I needed to make the neccessary change.

The pull request can be seen here:

Add missing file name to ‘Input file is missing’ error message by Brodan · Pull Request #3178 · lovell/sharp
Fixes #2360This PR updates the error message ‘Input file is missing’ to include the file that is missing.

After I opened the pull request, the maintainer was very quick to review and merge it and schedule it for the next release. To my suprise and delight, the release is already live and my fix is now in production!

Release v0.30.4 · lovell/sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library. - Release v0.30.4 · lovell/sharp

The patch notes can also be found in the changelog here.

Testing the Fix

I first ran a quick npm update sharp to pull the latest release with my fix into my project. I then ran my image generation script again and for once I found myself overjoyed to see an error message:

Input file is missing: /images/layers/Texture/Texture.png

Holy shit. It works. I fixed it myself and it works.

Wrapping Up

I wrote this post not to brag, but because I'm just really proud of myself for diving in and fixing my problem myself, rather than simply submitting a feature request or continuing to waste my time manually searching for missing images. You can learn a lot by contributing to open-source and the satisfaction of seeing your pull request get merged is unparalleled.

I want to express my thanks to sharp's maintainer Lovell Fuller for not only maintaining this wonderful library but for also being so quick and responsive in his review and merging of my pull request.

sharp is available for download via npm and can be installed by running npm install sharp.

Thanks for reading.