Dammit I am reading colour histograms from ImageMagick like a daub

package-lock.json

@@ -7,6 +7,7 @@
       "dependencies": {
         "@observablehq/framework": "^1.13.0",
         "@resvg/resvg-js": "^2.6.2",
+        "await-spawn": "^4.0.2",
         "d3": "^7.9.0",
         "d3-color": "^3.1.0",
         "d3-color-difference": "^0.1.3",
@@ -79,6 +80,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1443,6 +1445,17 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/await-spawn": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/await-spawn/-/await-spawn-4.0.2.tgz",
+      "integrity": "sha512-GdADmeLJiMvGKJD3xWBcX40DMn07JNH1sqJYgYJZH7NTGJ3B1qDjKBKzxhhyR1hjIcnUGFUmE/+4D1HcHAJBAA==",
+      "dependencies": {
+        "bl": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -1459,6 +1472,25 @@
       "integrity": "sha512-Bw2PgKSrZ3uCuSV9WQ998c/GTJTd+9bWj97n7aDQMP8dP/exAZQlJeswPty0ISy+HZD+9Ex+C7CCnc9Q5QJFmQ==",
       "optional": true
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -1467,6 +1499,29 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1475,6 +1530,29 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -2572,6 +2650,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@observablehq/framework": "^1.13.0",
     "@resvg/resvg-js": "^2.6.2",
+    "await-spawn": "^4.0.2",
     "d3": "^7.9.0",
     "d3-color": "^3.1.0",
     "d3-color-difference": "^0.1.3",

poptimal.js

@@ -4,7 +4,7 @@ import { JSDOM } from "jsdom";
 import * as d3 from "d3";
 import yargs from "yargs/yargs";
 import { hideBin } from "yargs/helpers";
-
+import spawn from "await-spawn";
 import random from "random";
 
 const xmlns = "http://www.w3.org/2000/xmlns/";
@@ -39,6 +39,36 @@ function randomise_params() {
 }
 
 
+// lol the best way I found to to this was imagemagick!
+
+async function get_histogram(imgfile) {
+	try {
+		const bl = await spawn('convert', [ imgfile, '-format', '%c', 'histogram:info:' ]);
+		return parse_histogram(bl.toString());
+	} catch (e) {
+		console.log(e);
+	}
+}
+
+
+function parse_histogram(convert_out) {
+	const colour_re = /(\d+): \(\d+,\d+,\d+,\d+\) #([A-F0-9]+) /;
+	const colours = new Map();
+	convert_out.split("\n").forEach((l) => {
+		const m = l.match(colour_re);
+		if( m ) {
+			console.log(m[1], m[2]);
+			const colour = m[2].substring(0, 6);
+			colours.set(colour, Number(m[1]));
+		} else {
+			console.log(`no match ${l}`);
+		}
+	});
+	return new Map([...colours].sort((a, b) => b[1] - a[1]));
+}
+
+
+
 function image_description(namer, params) {
 	const bgc = namer.colour_to_text(params.background);
 	const dotc = params.patterns.map((p) => namer.colour_to_text(p.colour));
@@ -124,6 +154,22 @@ async function post_image(image, alt_text, cf) {
 
 }
 
+function survey_pixels(pngData) {
+	const pixbuf = pngData.pixels;
+	const pixels = Array.from(pixbuf);
+	const colours = {};
+	for( let i = 0; i += 3; i < pixels.length ) {
+		const hex = `${pixels[i]},${pixels[i + 1]},${pixels[i + 2]}`;
+		if( ! hex in colours ) {
+			colours[hex] = 0;
+		} 
+		colours[hex]++;
+	}
+	console.log(colours);
+
+}
+
+
 async function main() {
 	const argv = yargs(hideBin(process.argv))
 		.usage("Usage: -s SIZE -o output.png -c config.json")
@@ -146,7 +192,6 @@ async function main() {
 	const namer = new ColourNamer();
 	await namer.load_colours(colourf);
 
-	const alt_text = image_description(namer, params);
 
 	const svg = poptimal_svg(params);
 	const opts = {
@@ -161,7 +206,15 @@ async function main() {
  	const pngData = resvg.render();
   	const pngBuffer = pngData.asPng();
 
+
   	await promises.writeFile(imgfile, pngBuffer);
+
+  	// generate the alt_text last to check the image file histogram
+  	// so we don't include obscured colours
+  	const hist = await get_histogram(imgfile);
+  	console.log(hist);
+	const alt_text = image_description(namer, params, imgfile);
+
 	console.log(imgfile);
 	console.log(alt_text);
   	if( cf['base_url'] ) {