WaniKani mnemonics in image-form done by AI

Hey there!
I absolutely adore the mnemonics and hints in Wanikani to remember meanings of Kanji. As I have access to midjourney AI, a tool that let’s you create images via AI by inserting prompts, I wanted to use it to bring WaniKani mnemonics to life.

This is what the AI made out of our fierce crocodile leader in 他.
As the radicals are leader + alligator, my prompt for the AI was: Human Leader of Crocodiles.
I tried to only do leader of crocodiles and it turned into a crocodile person :sweat_smile:

What do you think? It’s kinda cool and also very ominous.

Also I might add some more images to the thread. I feel like it helps me to remember the stories even better, thus it might help someone here as well. :slight_smile:

Feel free to request some kanji via comment for the AI and I’ll post the results :purple_heart:

105 Likes

That’s a really great idea. Making picture flash cards can be time consuming, but you solve that by using AI to come up with a memorable picture.

10 Likes

Thanks for the comment! :blush:
Absolutely, I feel like picture flashcards help a lot but creating them can take time and It’s just too much fun to play around mit midjourney to not use it for this ^^

6 Likes

I wonder if it’s feasible to feed all of the mnemonics into the AI and add the pictures as a script? That would be super useful.

7 Likes

Very true! They are currently in open Beta so i feel like it might be something they’ll be able to do in the future. :thinking: Very good thought!

8 Likes

Who owns the copyright to images generated by that AI?

2 Likes

woops, I accidently deleted my answer. Here’s there terms based on their own website. :slight_smile: As I’m a paid user and not using it to benefit any large cooperation, I’m good. :slight_smile:

9 Likes

That’s so cool… kinda creepy, but cool!

My biggest problem kanji right now is 画
The reading が uses a gargoyle in a rice paddy, behind a leaf… would be interesting to see what kind of image that produces!

7 Likes

That actually sounds SO fun!
Let me see what the AI comes up with.

6 Likes

I’m actually very much in love with what the AI created :flushed::pleading_face: This is much cuter than I expected

75 Likes

hahaha I never would of guessed it was this little guy that was giving me so much trouble, I can’t be mad when I when I get this wrong the next time now.
Hopefully this’ll help change that tho, thanks!

10 Likes

right? :joy: I’m not near as far as you are levelwise but as soon as I meet this little guy again I promise not to be mad at it, even though keeping this kanji in my head might be crazy difficult

5 Likes

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://aws1.discourse-cdn.com/wanikanicommunity/original/4X/5/f/0/5f0f3e0ccd402144921a045cbe8bd6d7ebb0bce5.jpeg", // Other                     (kanji)
		 629: "https://aws1.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:

20 Likes

This looks super cool!
What a fun idea. I wonder what other mnemonics would generate interesting results…

Agree on thinking a potential script would be pretty neat. I think the toughest part would be generating the concise summary that gets fed into the algorithm.

Please post more when you have some you really like, would love to see em!

6 Likes

Sure! I’ll update this thread with new ones - in the meantime, if you stumble across any word you’d like me to feed the AI with, let me know. :blush:

8 Likes

This would be interesting for the leeches :smiley:

8 Likes

I think I’m not far enough with WaniKani to know what you mean by leeches but I’m happy to try it. :smiley:

3 Likes

Leeches are cards that you just can’t seem to get right no matter how many times they come up.

8 Likes

oh god, I outed myself as such a wanikani beginner :cold_sweat: thanks for explaining - ! :smiley: and yes, absolutely.
In this sense - I wasn’t able to remember the reading きゅう for the kanji 休。So I wanted to see a hero resting under a tree eating a cucumber. It turned into the hero sitting on cucumbers… :woman_shrugging: :joy:

38 Likes

Well, I gotta see it . . . 魔 magic; witch; devil. Mnemonic is “demon under the influence of hemp.”

8 Likes