Image quantizer returns different results each time for the same image

[FluorescentHallucinogen]

Minimal repro:

import { sourceColorFromImage, Hct } from 'https://unpkg.com/@material/material-color-utilities';

const image = new Image();
image.src = './image.png';

for (let i = 0; i < 25; i += 1) {
  const source = await sourceColorFromImage(image);
  console.log('source', source);
  const color = Hct.fromInt(source);
  console.log('color', color);
  const rgbHexColor = color.argb.toString(16).slice(2);
  console.log('rgbHexColor', `#${rgbHexColor}`);
}

Live demo: https://material-color-utilities-bug.web.app (just open and check the browser console).

For the same https://material-color-utilities-bug.web.app/image.png image file, the sourceColorFromImage function returns each time either #d65a58, #c84c52, #d65a59 or #bb464b.

For the other image, the results differ more dramatically (e.g. #8d8862 and #e3dbaa).

Tested in Chrome and Firefox.

[FluorescentHallucinogen]

@rodydavis @guidezpl Could you please take a look? 😉

[observ33r]

It's actual designed that way and work as expected (k-means initialization). But in the end it has no (or very small) effect on generated theme.

edit:
Sample for reference (node/sharp):

import * as m3utils from '@material/material-color-utilities';
import sharp from 'sharp';

async function imagePixelsFromUrl(url) {
	const image = await sharp(url).removeAlpha().resize({
		width: 128,
		height: 128,
		fit: 'fill'
	}).raw().toBuffer({
		resolveWithObject: true
	});
	const bufferArray = new Uint8ClampedArray(image.data.buffer);
	const bufferLength = bufferArray.length; 
	// Convert Image data to Pixel Array
	const pixels = [];
	for (let i = 0; i < bufferLength; i += 3) {
		const r = bufferArray[i];
		const g = bufferArray[i + 1];
		const b = bufferArray[i + 2];
		const pixelArgb = m3utils.argbFromRgb(r, g, b);
		pixels.push(pixelArgb);
	}
	return pixels;
}

function themeFromSourceColor(sourceColorArgb, variant = 'SchemeTonalSpot', contrastLevel = 0.0) {
	const sourceColorHct = m3utils.Hct.fromInt(sourceColorArgb);
	const schemeVariant = (typeof m3utils[variant] === "undefined") ? 'SchemeTonalSpot' : variant;
	const schemeContrastLevel = m3utils.clampDouble(-1, 1, contrastLevel);
	const scheme = new m3utils[schemeVariant](sourceColorHct, false, schemeContrastLevel);
	const darkScheme = new m3utils[schemeVariant](sourceColorHct, true, schemeContrastLevel);
	const colorRoles = Object.keys(m3utils.MaterialDynamicColors).filter(key => 
			m3utils.MaterialDynamicColors[key] instanceof m3utils.DynamicColor);
	const getDynamicScheme = (scheme) => Object.fromEntries(colorRoles.map(role => 
			[role, m3utils.MaterialDynamicColors[role].getHct(scheme)]));
	return {
		source: sourceColorHct,
		schemes: {
			light: getDynamicScheme(scheme),
			dark: getDynamicScheme(darkScheme),
		},
		palettes: {
			primary: scheme.primaryPalette,
			secondary: scheme.secondaryPalette,
			tertiary: scheme.tertiaryPalette,
			neutral: scheme.neutralPalette,
			neutralVariant: scheme.neutralVariantPalette,
			error: scheme.errorPalette,
		},
	};
}

const imagePixels = await imagePixelsFromUrl('image.png');

for (let i = 0; i < 10; i++) {
	const quantizedPixels = m3utils.QuantizerCelebi.quantize(imagePixels, 128);
	const score = m3utils.Score.score(quantizedPixels);
	const theme = themeFromSourceColor(score[0]);
	console.log(JSON.stringify({
		source: m3utils.hexFromArgb(theme.source.argb),
		theme: {
			primaryPaletteKeyColor: m3utils.hexFromArgb(theme.schemes.light.primaryPaletteKeyColor.argb),
			primary: m3utils.hexFromArgb(theme.schemes.light.primary.argb) 
		}
	}));
}

{"source":"#c24a4f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4a"}}
{"source":"#c24a4f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4a"}}
{"source":"#c24a4f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4a"}}
{"source":"#c24a4f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4a"}}
{"source":"#c24a4f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4a"}}
{"source":"#cf5658","theme":{"primaryPaletteKeyColor":"#ad6261","primary":"#904a49"}}
{"source":"#cf5658","theme":{"primaryPaletteKeyColor":"#ad6261","primary":"#904a49"}}
{"source":"#cf5658","theme":{"primaryPaletteKeyColor":"#ad6261","primary":"#904a49"}}
{"source":"#c2494f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4b"}}
{"source":"#c24a4f","theme":{"primaryPaletteKeyColor":"#ad6262","primary":"#904a4a"}}

Delta-E for colors from generated scheme/theme will be always almost 100%.

[FluorescentHallucinogen]

E.g. the popular https://lokeshdhakar.com/projects/color-thief/ library gives consistent (every time identical results) for the same image. Even for different optional quality parameter values i.e. using not every pixel!

But in the end it has no (or very small) effect on generated theme.

Actually, it's the problem. And here's why:

The image quantizer module from this library could be useful itself.

1. As I showed above, sometimes the results for the same image can be visually very different. Just compare the e.g. #8d8862 and #e3dbaa.

2. Non-consistent results make writing tests more difficult, if not impossible.

[observ33r]

Yes, different initialization. If this is a problem for you, then simply use the quantizer that color thief uses.

import * as m3utils from '@material/material-color-utilities';
import quantize from '@lokesh.dhakar/quantize';
import sharp from 'sharp';

async function rawImagePixelsFromUrl(url) {
	const image = await sharp(url).removeAlpha().resize({
		width: 128,
		height: 128,
		fit: 'fill'
	}).raw().toBuffer({
		resolveWithObject: true
	});
	const bufferArray = new Uint8ClampedArray(image.data.buffer);
	const bufferLength = bufferArray.length; 
	// Convert Image data to Pixel Array
	const pixels = [];
	for (let i = 0; i < bufferLength; i += 3) {
		const r = bufferArray[i];
		const g = bufferArray[i + 1];
		const b = bufferArray[i + 2];
		pixels.push([r, g, b]);
	}
	return pixels;
}

const rawImagePixels = await rawImagePixelsFromUrl('image.png');

for (let i = 0; i < 10; i++) {

	const colorMap = quantize(rawImagePixels, 128);

	const quantizedPixels = new Map(colorMap.vboxes.map(
		({vbox: {_avg: [r, g, b], _count: population}}) => [m3utils.argbFromRgb(r, g, b), population]
	));

	const score = m3utils.Score.score(quantizedPixels);

	console.log(`source: ${m3utils.hexFromArgb(score[0])}`);

}

source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54
source: #dc4c54

[FluorescentHallucinogen]

Is this issue fixed in 193f145?

Oh, this is for Swift implementation only…