Open Thinkering


Some thoughts on programmatic Open Badge image creation using AI models

Towards the end of yesterday’s meeting of the Open Recognition working group of the Open Skills Network we got on to talking about how it might be possible to programatically create the images for Open Badges when aligning with Rich Skill Descriptors (RSDs).

Creating lots of badges manually is quite the task, and gets in the way of Open Recognition and Keeping Badges Weird. So the first step would be to speed up the process by creating a style guide. Sharing SVG templates that are editable in a wide range of image-editing applications can speed up the process.

For example, for the upcoming Badge Summit, we’re issuing a badge which we want others to be able to issue for their own events. So we asked Bryan Mathers to create an image where the outside would remain the same, but the middle bit could be swapped out easily. Here’s the result:

I Kept Badge Weird at The Badge Summit 2022 badge

The next step would be to have a style guide which makes it faster to create unique badges. That involves a colour palette, font choices, shapes, etc. You can see this in action for our Keep Badges Weird community badges:

Selection of badges available to earn in the Keep Badges Weird community.

Lovely as they are, this is still labour-intensive and time-consuming. So how about we create them programatically? My former Mozilla colleague Andrew Hayward did a great job of this years ago, and the Badge Studio site (code) is still online at the time of posting.

The advantage of programmatically creating badge images is that it (helpfully) constrains what you can do to be in alignment with a style guide. Creating good looking badges can take seconds rather than hours!

An example of a badge image created using Badge Stuudio

However, what if we want to create badge images quickly, and programatically based on certain inputs? There are libraries that can create unique shapes and images based on email address and are used sometimes as the default avatar for platforms. Here, for example, is RoboHash which can be used to create good-looking unique ‘robots’:

Selection of unique robots created using RoboHash

It’s not a huge leap to think about how this could be used to create badge images based on a unique reference from an RSD.

But, if we’re getting a computer to generate something, why not something crazy and unique? Lately, there’s been a lot of noise about different AI models that can be used to generate images based on text input. One of the best-known of these, the images from which have been circulating my corner of social media quite frequently is Craiyon (formerly DALL-E mini). Here’s a really basic attempt:

Nine images created via the Craiyon AI model showing recognition badges

They’re quite… uninspiring and generic? However, they didn’t take any thought or effort on my part.

There are more advanced models than Craiyon, such as Midjourney. This can create stunning images, such as the one featured in Albert Wenger’s post about machine creativity. In fact, it was that post that got me thinking about all this!

You can create up to 25 images using the Midjourney Discord account before paying, so I created this one as quickly as possible using the same prompt as above. You can create variations and upscales, so I asked it to create variations of one of four images created, and the upscaled it to the max. I ended up with the following:

Round patch-style badge (black/yellow with orange shapes)

This is also quite boring, to be fair, but the awesome and weird thing about doing this in Discord is that you see the prompts that other people are entering to create image — e.g. ‘huge potato chip eating a bag of humans’ or ‘rainbow slushy trippy wallpaper’. I noticed that there were certain prompts that led to amazing outputs, so I tried ‘rainbow waterfall in a hexagon,bright,trippy’ and got these options:

rainbows and hexagons, AI created art

The bottom-left image looked potentially interesting, so I asked for variations and then upscaled one of them. I then just cropped it into a 12-sided shape and ended up with the following. I guarantee it’s one of the most unique badge images you’ll have seen recently!

12-sided rainbow hexagon images

The point is that there’s almost infinite variations here. And, as I found, getting the words right, and then doing variations and upscaling is actually quite a creative process!

As ever, I don’t have the technical skills to stitch all of this together, but I guess my job is to encourage those who do in particularly fruitful directions. The workflow would go something like:

  1. Community decides new RSDs
  2. Organisation or individual creates badge metadata aligning with one or more RSD
  3. AI model generates badge image

I should imagine a lot of this could be automated so that badges that align with a particular RSD could have visual similarity.

This could be amazing. Anyone want to give it a try? 🤩

Leave a Reply

Your email address will not be published. Required fields are marked *