At least the userscript part would not be that difficult – you could just slightly modify the Mnemonic Artwork script by changing the array of image URLs at the bottom:
Result
// ==UserScript==
// @name WaniKani AI Mnemonic Images
// @namespace aiMnemonicImages
// @version 1.0
// @description Adds AI-generated images of the mnemonics.
// @author You
// @license MIT-0
// @match https://www.wanikani.com/radicals/*
// @match https://www.wanikani.com/kanji/*
// @match https://www.wanikani.com/lesson/session
// @match https://www.wanikani.com/review/session
// @match https://www.wanikani.com/extra_study/session*
// @match https://preview.wanikani.com/radicals/*
// @match https://preview.wanikani.com/kanji/*
// @match https://preview.wanikani.com/lesson/session
// @match https://preview.wanikani.com/review/session
// @match https://preview.wanikani.com/extra_study/session*
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1057854
// @homepageURL https://community.wanikani.com/t/57910
// @grant none
// ==/UserScript==
(function() {
"use strict";
/* global wkItemInfo */
/* eslint no-multi-spaces: "off" */
//////////////
// settings //
//////////////
const ENABLE_RESIZE_BY_DRAGGING = true;
//////////////
function init() {
wkItemInfo.forType("radical,kanji").under("meaning,reading").append("AI Image", ({id}) => artworkSection(id));
}
function artworkSection(subjectId) {
let artworkUrl = ARTWORK_URLS[subjectId];
if (!artworkUrl) return null;
let image = document.createElement("img");
image.src = artworkUrl;
if (ENABLE_RESIZE_BY_DRAGGING) {
let currentMax = parseInt(localStorage.getItem("aiImageMaxSize")) || 900;
makeMaxResizable(image, currentMax).afterResize(m => { localStorage.setItem("aiImageMaxSize", m); let e = new Event("storage"); e.key = "aiImageMaxSize"; e.newValue = m; dispatchEvent(e); });
addEventListener("storage", e => { if (e.key === "aiImageMaxSize") { image.style.maxWidth = `min(${e.newValue}px, 100%)`; image.style.maxHeight = e.newValue + "px"; } });
}
return image;
}
function makeMaxResizable(element, currentMax, lowerBound = 200) {
let size = 0;
let max = currentMax;
let oldMax = currentMax;
let callback = () => {};
let pointers = [{id: NaN, x: 0, y: 0}]; // image origin is always a pointer (scaling center)
function getDistanceSum(e) {
removePointer(e);
addPointer(e);
function length(p1, p2) { let d = [p1.x - p2.x, p1.y - p2.y]; return Math.sqrt(d[0] * d[0] + d[1] * d[1]); }
return pointers.reduce((total, p1) => pointers.reduce((l, p2) => l + length(p1, p2), total), 0);
//return pointers.reduce(([len, lastP], p) => [len + length(lastP, p), p], [0, pointers[pointers.length - 1]])[0]; // old version using circumference - order dependent! => not usable if pointers.length > 3
};
function removePointer(e) {
if (e) pointers = pointers.filter(p => p.id !== e.pointerId);
}
function addPointer(e) {
if (!e) return;
let rect = element.getBoundingClientRect();
pointers.push({id: e.pointerId, x: e.clientX - rect.left, y: e.clientY - rect.top});
}
function startResizing(e) {
if (e.button !== 0) return;
if (pointers.length < 2) {
max = parseFloat(element.style.maxHeight);
oldMax = max;
}
size = getDistanceSum(e);
element.addEventListener("pointermove", doResizing);
element.addEventListener("pointerup", endResizing);
element.addEventListener("pointercancel", cancelResizing);
element.setPointerCapture(e.pointerId);
e.preventDefault();
}
function doResizing(e) {
if (!(e.buttons & 1)) return;
let newSize = getDistanceSum(e);
max *= newSize / size;
size = newSize;
updateMax();
};
function endResizing(e) {
doResizing(e);
max = Math.min(max, element.parentElement.clientWidth, element.naturalWidth);
oldMax = Math.max(max, lowerBound);
cancelResizing(e);
callback(max);
}
function cancelResizing(e) {
removePointer(e);
size = getDistanceSum();
if (pointers.length > 1) return;
max = oldMax;
updateMax();
element.removeEventListener("pointermove", doResizing);
element.removeEventListener("pointerup", endResizing);
element.removeEventListener("pointercancel", cancelResizing);
element.releasePointerCapture(e.pointerId);
}
function updateMax() {
let m = Math.max(max, lowerBound);
element.style.maxWidth = `min(${m}px, 100%)`;
element.style.maxHeight = m + "px";
};
updateMax();
element.style.touchAction = "pan-x pan-y";
element.addEventListener("pointerdown", startResizing);
return {afterResize: f => { callback = f; }};
}
const ARTWORK_URLS = {
529: "https://global.discourse-cdn.com/wanikanicommunity/original/4X/5/f/0/5f0f3e0ccd402144921a045cbe8bd6d7ebb0bce5.jpeg", // Other (kanji)
629: "https://global.discourse-cdn.com/wanikanicommunity/original/4X/9/f/d/9fd594f07c80ec50ea2b86b5bf45274b90ac1832.jpeg", // Drawing (kanji)
};
init();
})();
EDIT: Here is a link to the AI Mnemonic Images script by @saraqael which adds the images from this thread to lessons, reviews, and item pages: