When doing technical work, names are important. Technical work frequently requires creating objects that are variations on a theme, over and over again. For example, when fine-tuning language models, I find myself quickly iterating through many fine-tuned models in pursuit of the performance I am looking for. Keeping track of all of the models and datasets created can be a challenge. To make that challenge easier, I've taken to given my models codenames based on "mixmojis". This post introduces mixmoji codenames and shows how we can create a React component to include them on webpages.

Mixmoji are emoji images created by Google that are formed from the combination of two emojis. Each mixmoji has elements from its constituent emojis, making them often quite whimsical and interesting looking. For example, look at the following mixmoji:

Each combines two existing emoji to create a cute and memorable image.

But before explaining mixmoji further, it may help to step back and consider why we want to use codenames. When naming things, it is tempting to give names that are related to something distinctive about the particular object in question. If you have data on cats, you might call something "cat data". But then, what if you create a second one about siamese cats? Well maybe now you have "cat data 2" or "siamese cat data". But then further, what if you create a third one about Siamese Cats in Miami? Perhaps you now have "cat data 3" or "Miami siamese cat data". I think you see where this is going. Attempting to create distinctive names, you can easily end up with names that are unmanageably long, or have dissipated any distinctiveness away.

It is better then to use arbitrary names. Arbitrary names may seem less intuitive than descriptive ones, but they have a distinct advantage: they're less likely to lead to confusion. When you're working with many objects that share similar characteristics, it's easy to mix them up if their names are too similar. By using arbitrary names, you can ensure that each name is distinctive and memorable, reducing the risk of confusion.

In short, I think good codenames have the following properties:

1. They are distinctive, meaning that it should be hard to confuse two names. (This generally eliminates numbered names).
2. They are short enough to be memorable.
3. As a consequence of 1 and 2, it is best if the names are relatively arbitrary and not an attempt to be descriptive (except perhaps in broad strokes).

Mixmoji's match these properties well. As combinations of emojis, they can be very distinctive. It may be hard to distinguish between the "grinning face"😀 and "grinning squinting face"😆 face emojis, but "grinning face panda" and "grinning squinting goat" are very distinguishable. Regarding the second property, such names can also be short enough to be memorable, and become even easier to remember when paired with the mixmoji image (which can often be quite humorous). The distinctiveness of the image is why I feel that mixmoji are superior to other codename generators. Finally, since we are using emojis, the mixmoji names we get are completely arbitrary, and are therefore more likely to be distinctive and memorable.

To help us look at Mixmoji codenames, I've created a Mixmoji applet below.

The mixmoji applet allows you to search through mixmojis using a flexible rule-based system. You can add multiple search rules, each specifying a field (such as name, shortname, or category), a search term, and whether to include or exclude results matching that term. The applet displays search results in a scrollable list, with each mixmoji rendered using the EmojiCodeName component that we are going to create below. When you click on a mixmoji in the results, it displays detailed information about the selected mixmoji, including its constituent emojis, their names, and categories.

So, let's look at an example. Suppose that for some fine-tuning work, I want to assign codenames to training sets, test sets and fine-tuned models. My goal is to choose mixmoji for each that are somewhat memorable. So, for training sets, I choose the combination of foods and plants. Foods could represent data, while plants represent growth and nuturing of training. For test sets, I swap out plants for activities, which implies action, using, or testing. Finally, for models I choose animals + objects which can be thought to represent a tool (object) plus some form of intelligence (animal). Examples of each category are shown below. I think these are fun, useful codenames that can avoid monotonous, hard-to-remember names.

Training Sets (food + plant)	Test Sets (food + activities)	Models (animal + object)
bread rose	watermelon jack-o-lantern	light bulb wolf
tulip potato	fireworks melon	unicorn gem stone
lemon cactus	tangerine balloon	bear crown
tangerine cherry blossom	wrapped gift grapes	fox headphone
cherries blossom	basketball mushroom	pager wolf

Exploring and Using Mixmoji Codenames

For the rest of the post, I'd like to show how to use python to explore the available mixmojis, give each mixmoji a relevant color, and to create a react component for embedding mixmoji in react apps. This work builds on Emoji Kitchen. I have pre-processed some (but not quite all) of the mixmojis for use as codenames. You can download the codenames file.

First, let's read in the emoji codenames:

Copycopy code to clipboard
mixmojis = []
# Reading from file
with open('./codenames.jsonl', 'r') as file:
    for line in file:
        example = json.loads(line.strip())
        mixmojis.append(example)

Each mixmoji has information defining the mixmoji:

Copycopy code to clipboard
{'c': ['1f988', '1f33c'],
 'r': 20230418,
 'name': 'shark blossom',
 'url': 'https://www.gstatic.com/android/keyboard/emojikitchen/20230418/u1f988/u1f988_u1f33c.png',
 'emoji1': {'emoji': '🦈',
  'name': 'shark',
  'shortname': ':shark:',
  'unicode': '1F988',
  'html': '🦈',
  'category': 'Animals & Nature (animal-marine)',
  'order': ''},
 'emoji2': {'emoji': '🌼',
  'name': 'blossom',
  'shortname': ':blossom:',
  'unicode': '1f33c',
  'html': '🌼',
  'category': 'Animals & Nature (plant-flower)',
  'order': '1435'},
 'fullname': 'shark blossom 🦈🌼'}

The mixmoji is the combination of "emoji1" and "emoji2". The "url" field points to the URL of the image of the mixmoji. The 'r' and 'c' fields are used in the construction of the url.

Codename color

To increase the distinctiveness of a codename, we can color the codename when we display it. This can make it very easy to distinguish codenames from surrounding text and from other codenames by using color as a shorthand for a codename. Except in cases where we have lots of codenames, it will also be possible for the eye to distinguish a codename on color alone, making recognition easy.

One good way to choose the color to associate with a codename is to look for a color that evokes the most common colors present in the mixmoji for the codename. This will make the codename and the mixmoji visually cohesive as they will share a common color theme.

We can find the most common color values by clustering pixels and then sorting the resulting clusters by frequency:

Copycopy code to clipboard
import requests
from PIL import Image
import numpy as np
from io import BytesIO
from scipy.cluster.vq import kmeans, vq
from IPython.display import HTML

def find_top_colors(image_url, num_clusters=5):
    # Download the image from the URL
    response = requests.get(image_url)
    image = Image.open(BytesIO(response.content))

    # Convert image to RGBA if it's not in RGBA format
    if image.mode != 'RGBA':
        image = image.convert('RGBA')

    image = image.resize((150, 150))  # Optional: Resize image to reduce computation

    # Convert image to numpy array
    image_np = np.asarray(image)

    # Filter out pixels with high transparency
    pixels = image_np.reshape((image_np.shape[0] * image_np.shape[1], 4))
    pixels = pixels[pixels[:, 3] > 128]  # Considering alpha value > 128 as opaque

    # Apply k-means clustering on RGB values only
    centroids, _ = kmeans(pixels[:, :3].astype(float), num_clusters)

    # Assign each pixel to the nearest centroid and count the number of pixels in each cluster
    clx, _ = vq(pixels[:, :3], centroids)

    # Sort the clusters by frequency
    cluster_counts = np.bincount(clx)
    top_clusters = cluster_counts.argsort()s[-num_clusters:][::-1]

    # Top colors
    top_colors = centroids[top_clusters].astype(int)
    return top_colors

def display_colors(colors):
    # Create an HTML representation of the colors with labels
    html = '<div style="display: flex; align-items: center; justify-content: center;">'
    for color in colors:
        color_hex = '#{:02x}{:02x}{:02x}'.format(*color)
        html += f'<div style="margin: 10px; text-align: center;">'
        html += f'<div style="width: 100px; height: 100px; background: {color_hex}; margin-bottom: 5px;"></div>'
        html += f'<span>{color_hex.upper()}</span>'
        html += '</div>'
    html += '</div>'
    return HTML(html)

# Example usage
image_url = 'https://www.gstatic.com/android/keyboard/emojikitchen/20230301/u1f62b/u1f62b_u1f9c1.png'
top_colors = find_top_colors(image_url)
display_colors(top_colors)

We can now get a color pallete for a chosen mixmoji:

By default we can just use the first color for coloring the codename.

React component

We can bring the codename and the chosen color together to create a React component to display the codename.

Copycopy code to clipboard
import React from 'react';

// Function to generate the mixmoji URL
const mixmojiUrl = (r, c) => {
  let padZeros = r < 20220500;
  c[0] = c[0].split(/-/g).map(s => padZeros ? s.padStart(4, "0") : s).join("-u");
  c[1] = c[1].split(/-/g).map(s => padZeros ? s.padStart(4, "0") : s).join("-u");
  return `https://www.gstatic.com/android/keyboard/emojikitchen/${r}/u${c[0]}/u${c[0]}_u${c[1]}.png`;
}

// EmojiCodeName component
const EmojiCodeName = ({ name, color, r, c }) => {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center' }}>
      <span style={{ color: color, marginRight: '2px' }}>{name}</span>
      <img src={mixmojiUrl(r, c)} alt={name} style={{ height: '1.5em' }} />
    </div>
  );
}

export default EmojiCodeName;

We can then use the react component in this way:

Copycopy code to clipboard
<EmojiCodeName name="cherry blossom exploding head" color="#f7c22b" r="20230127" c={['1f338', '1f92f']} />

Which looks like:

cherry blossom exploding head

Here's more fun examples:

spouting whale crown	wrapped gift Virgo	nerd face sparkling heart
raccoon ghost	hot dog	angry face with horns pile of poo
parachute skull	sloth avocado	woozy face pineapple

In conclusion, Emoji Codenames offer a fresh and effective approach to the challenge of naming and organizing technical assets. I encourage you to give this system a try in your next project. Thanks for checking out this post, good luck with your projects!