Fix the pagination buttons and the setPage method on the Artist Browser (closes #36)

.forgejo/workflows/draft-release.yaml

@@ -28,8 +28,11 @@ jobs:
           DOWNLOAD_URL: "${{forgejo.server_url}}/${{forgejo.repository}}/releases/download/v${{steps.version.outputs.version}}/release.zip"
           LATEST_URL: "${{forgejo.server_url}}/${{forgejo.repository}}/releases/download/latest/${{env.MANIFEST}}"
 
+      - name: Set up default storage
+        run: mkdir -p storage/db && mv importable/artists.json storage/db && mv importable/images.json storage/db
+
       - name: Compress files
-        run: zip -r release.zip langs module styles templates README.md assets LICENSE ${{env.MANIFEST}}
+        run: zip -r release.zip langs module styles storage templates README.md assets LICENSE ${{env.MANIFEST}}
 
       - name: Create forgejo release
         run: node scripts/src/createForgejoRelease.mjs

README.md

@@ -1,2 +1,27 @@
-# tokens
+# Image Tagger
+A Foundry VTT module to help you find images that fit what you're wanting faster!
 
+## How It Works
+When you upload a new image using the module, you can give it:
+- a name
+- any number of tags
+- any number of artists
+
+Then, when you are looking for an image for something, you can use the integrated
+Art Browser in order to search based on name, tags, and/or artists!
+
+## Image Optimization
+Included in the module is an automatic conversion of any static images (png, jpeg,
+etc.) into an optimized webp format! If you upload a webp or gif image, they will
+not be converted at all, they will stay how you have them.
+
+This optimization is done so that the storage on your server or computer is reduced,
+as well as making it so all of the images load faster on your player's computers.
+
+# Disclaimer:
+This module is currently in beta testing, as such there may be bugs and missing
+features. To report bugs or request features you can:
+- open an issue on the
+[primary issue tracker](https://git.varify.ca/Foundry/image-tagger/issues)
+- send an email to [hello@varify.ca](mailto:hello@varify.ca)
+- or, open an issue on [Github](https://github.com/Eldritch-Oliver/Foundry-Image-Tagger/issues/new)

dev/main.mjs

@@ -0,0 +1,5 @@
+import { __ID__ } from "../module/consts.mjs";
+
+Hooks.on(`ready`, () => {
+	globalThis.IT = game.modules.get(__ID__).api;
+});

importable/artists.json

@@ -0,0 +1,8 @@
+{
+	"FVTT": {
+		"name": "Foundry Defaults",
+		"links": [
+			{ "name": "FoundryVTT", "url": "https://foundryvtt.com" }
+		]
+	}
+}

importable/config.json

@@ -0,0 +1,150 @@
+{
+	"min_tag_frequency": 3,
+	"ignorePatterns": [
+		"**/svg/**",
+		"**/dice/**"
+	],
+	"skipFiles": [
+		"vtt.png",
+		"vtt-512.png",
+		"anvil.png",
+		"fvtt.icns",
+		"fvtt.ico",
+		"logo-scifi.png",
+		"logo-scifi-blank.png",
+		"LICENSE"
+	],
+	"replacements": {
+		"abilities": "ability",
+		"antlers": "antler",
+		"arrows": "arrow",
+		"barrels": "barrel",
+		"beams": "beam",
+		"birds": "bird",
+		"bolts": "bolt",
+		"books": "book",
+		"bows": "bow",
+		"boxes": "box",
+		"bubbles": "bubble",
+		"bullets": "bullet",
+		"cards": "card",
+		"chains": "chain",
+		"claws": "claw",
+		"clouds": "cloud",
+		"clubs": "club",
+		"coins": "coin",
+		"documents": "document",
+		"eggs": "egg",
+		"eyes": "eye",
+		"fangs": "fang",
+		"flags": "flag",
+		"flowers": "flower",
+		"grains": "grain",
+		"guns": "gun",
+		"hammers": "hammer",
+		"hands": "hand",
+		"herbs": "herb",
+		"horns": "horn",
+		"lights": "light",
+		"maces": "mace",
+		"magical": "magic",
+		"mushrooms": "mushroom",
+		"orbs": "orb",
+		"projectiles": "projectile",
+		"ribs": "rib",
+		"roots": "root",
+		"ropes": "rope",
+		"runes": "rune",
+		"scales": "scale",
+		"sickles": "sickle",
+		"slimes": "slime",
+		"spirits": "spirit",
+		"stems": "stem",
+		"stick": "stick",
+		"symbols": "symbol",
+		"tentacles": "tentacle",
+		"tips": "tip",
+		"traps": "trap",
+		"vines": "vine",
+		"waves": "wave",
+		"webs": "web",
+		"weapons": "weapon",
+		"wands": "wand",
+		"swords": "sword",
+		"cutlasses": "cutlass",
+		"tools": "tool",
+		"containers": "container",
+		"skills": "skill",
+		"creatures": "creature",
+		"sundries": "sundry",
+		"consumables": "consumable",
+		"gems": "gem",
+		"daggers": "dagger",
+		"commodities": "commodity",
+		"feathers": "feather",
+		"dynamite": "explosive",
+		"bomb": "explosive",
+		"bones": "bone",
+		"potions": "potion",
+		"bags": "bag",
+		"axes": "axe",
+		"scrolls": "scroll",
+		"glow": "glowing",
+		"materials": "material",
+		"plants": "plant",
+		"polearms": "polearm",
+		"staves": "stave",
+		"academics": "academic",
+		"aliens": "alien",
+		"amphibians": "amphibian",
+		"wings": "wing"
+	},
+	"removals": [
+		"",
+		"white",
+		"yellow",
+		"blue",
+		"red",
+		"green",
+		"black",
+		"brown",
+		"teal",
+		"silver",
+		"purple",
+		"gray",
+		"grey",
+		"orange",
+		"lime",
+		"crimson",
+		"magenta",
+		"gold",
+		"cyan",
+		"pink",
+		"tan",
+		"violet",
+		"beige",
+		"simple",
+		"ringed",
+		"hollow",
+		"guard",
+		"pressure",
+		"gas",
+		"fuse",
+		"cloth",
+		"sharp",
+		"worn",
+		"svg",
+		"rough",
+		"control",
+		"3d",
+		"admission",
+		"alient",
+		"alpha",
+		"and",
+		"token",
+		"assorted",
+		"ember",
+		"misc",
+		"mix"
+	]
+}

importable/findFoundryFiles.mjs

@@ -1,7 +1,9 @@
 import { globSync } from "glob";
 import crypto from "crypto";
 import { createReadStream } from "fs";
-import { writeFile } from "fs/promises";
+import { readFile, writeFile } from "fs/promises";
+
+const config = JSON.parse(await readFile(`importable/config.json`, `utf8`));
 
 async function hashFile(path) {
 	return new Promise((resolve) => {
@@ -18,82 +20,64 @@ async function hashFile(path) {
 	});
 };
 
-const skipFiles = [
-	`vtt.png`,
-	`vtt-512.png`,
-	`anvil.png`,
-	`fvtt.icns`,
-	`fvtt.ico`,
-	`logo-scifi.png`,
-	`logo-scifi-blank.png`,
-	`LICENSE`,
-];
-
-const tagRenames = {
-	weapons: `weapon`,
-	wands: `wand`,
-	swords: `sword`,
-	cutlasses: `cutlass`,
-	daggers: `dagger`,
-	commodities: `commodity`,
-	feathers: `feather`,
-	dynamite: `explosive`,
-	bomb: `explosive`,
-}
-
-const purgeTags = new Set([
-	// All of the colours
-	`white`, `yellow`, `blue`, `red`, `green`, `black`, `brown`, `teal`, `silver`, `purple`, `gray`, `grey`, `orange`, `lime`, `crimson`, `magenta`, `gold`, `cyan`, `pink`, `tan`, `violet`,
-
-	// Terms that just suck as tags
-	`simple`, `ringed`, `hollow`, `guard`, `pressure`, `gas`, `fuse`,
-	`cloth`, `sharp`, `worn`,
-]);
-
 async function main() {
-	const imageList = globSync(`foundry/public/icons/**/*`, { nodir: true });
+	const imageList = globSync(
+		`foundry/public/icons/**/*`,
+		{
+			nodir: true,
+			ignore: config.ignorePatterns,
+		});
 	const images = {};
+	const allTags = {};
 
 	for (const path of imageList) {
-		if (skipFiles.some(file => path.endsWith(file))) continue;
+		if (config.skipFiles.some(file => path.endsWith(file))) continue;
 
 		const hash = await hashFile(path);
 		const filename = path.split(`/`).at(-1);
 
-		const tags = new Set(
+		const tags = Array.from(new Set(
 			path
 			.replace(`foundry/public/icons/`, ``)
 			.replace(/\.[a-z]+$/i, ``)
 			.replaceAll(`-`, `/`)
 			.split(`/`)
-			.map(tag => tagRenames[tag] ?? tag)
-			.filter(tag => !purgeTags.has(tag))
-		);
+			.map(tag => config.replacements[tag] ?? tag)
+			.filter(tag => !config.removals.includes(tag))
+		));
+
+		tags.forEach(t => {
+			allTags[t] ??= 0;
+			allTags[t]++;
+		});
 
 		images[hash] = {
 			name: filename,
-			tags: Array.from(tags),
+			tags,
 			artists: [`FVTT`],
 			path: path.replace(`foundry/public/`, ``),
 			external: true
 		};
 	};
 
-	const data = {
-		images,
-		artists: {
-			FVTT: { // Using a custom artist ID since this is an import anyway
-				name: `Foundry Defaults`,
-				links: [
-					{ name: `FoundryVTT`, url: `https://foundryvtt.com` }
-				]
-			}
-		},
+	const sortedTags = Object.entries(allTags)
+		.sort((a,b) => a[0].localeCompare(b[0]))
+
+	// Remove all of the tags that have too low of frequency
+	const removeTags = new Set();
+	for (const [tag, count] of sortedTags) {
+		if (count <= config.min_tag_frequency) {
+			removeTags.add(tag);
+		};
 	};
+	for (const image of Object.values(images)) {
+		image.tags = image.tags.filter(t => !removeTags.has(t));
+	};
+	console.log(`Removed ${removeTags.size} tags from images due to frequency requirements.`);
 
 	await writeFile(
-		`importable/foundry.json`,
-		JSON.stringify(data),
+		`importable/images.json`,
+		JSON.stringify(images),
 	);
 };
 

langs/en-ca.json

@@ -1,11 +1,26 @@
 {
 	"IT": {
 		"common": {
-			"unsaved": "This change hasn't been saved, if you close without saving it will be undone."
+			"artists": "Artists",
+			"images": "Images",
+			"unsaved": "This change hasn't been saved, if you close without saving it will be undone.",
+			"page": {
+				"previous": "Prev",
+				"next": "Next"
+			},
+			"name": "Name",
+			"tags": "Tags",
+			"select": "Select",
+			"links": "Links",
+			"sort-by": "Sort By",
+			"page-reset-warning":"Changing any of these will reset your page to 1."
 		},
 		"apps": {
 			"ArtBrowser": {
-				"selected": "{current}/{required} Selected"
+				"selected": "{current}/{required} Selected",
+				"upload-image": "Upload Image",
+				"no-results": "No results were found for that search",
+				"select-image": "Select image"
 			},
 			"ArtistBrowser": {
 				"sort-options": {
@@ -13,7 +28,10 @@
 					"name-desc": "Name (Z -> A)",
 					"image-count-asc": "Image Count (0 -> 9)",
 					"image-count-desc": "Image Count (9 -> 0)"
-				}
+				},
+				"image-count": "{count} Images",
+				"common-tags": "Common Image Tags",
+				"create-artist": "Create New Artist"
 			},
 			"ArtistApp": {
 				"title": {
@@ -22,12 +40,22 @@
 				},
 				"add-link": "Add New Link"
 			},
+			"ArtSidebar": {
+				"view": "View All",
+				"add-new": "Add New",
+				"db-size": "Database Size: {size}"
+			},
 			"ImageApp": {
 				"title": {
 					"upload": "Upload New Image",
+					"register": "Register External Image",
 					"edit-named": "Editing Image: {name}",
 					"edit-generic": "Editing Image"
-				}
+				},
+				"toggle-upload-mode": "Toggle Upload Mode",
+				"image-label": "Image",
+				"clear": "Clear",
+				"preview-placeholder": "Select an image to see a preview"
 			}
 		},
 		"settings": {
@@ -47,7 +75,8 @@
 			"error": {
 				"db-out-of-date": "Database out of date, please try again.",
 				"document-ID-404": "Cannot find {dbType} with ID: {id}",
-				"no-upload-permission": "Cannot save due to missing the \"Upload Files\" permission."
+				"no-upload-permission": "Cannot save due to missing the \"Upload Files\" permission.",
+				"cant-find-image": "Cannot find image at location: {url}"
 			}
 		}
 	}

module.json

@@ -2,17 +2,22 @@
 	"id": "image-tagger",
 	"title": "Image Tagger",
 	"description": "A module that helps you tag tokens to find what you're looking for faster!",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"compatibility": {
 		"minimum": 13,
 		"verified": 13,
 		"maximum": 13
 	},
+	"authors": [
+		{ "name": "Oliver", "email": "hello@varify.ca" }
+	],
 	"url": "https://git.varify.ca/Foundry/image-tagger",
+	"bugs": "https://git.varify.ca/Foundry/image-tagger/issues",
 	"manifest": "",
 	"download": "",
 	"esmodules": [
-		"module/image-tagger.mjs"
+		"module/image-tagger.mjs",
+		"dev/main.mjs"
 	],
 	"styles": [
 		{

module/api.mjs

@@ -5,11 +5,9 @@ import { ArtistBrowser } from "./apps/ArtistBrowser.mjs";
 import { ImageApp } from "./apps/ImageApp.mjs";
 
 // Utils
-import { getFile, hashFile, lastModifiedAt, uploadJson } from "./utils/fs.mjs";
+import { convertToWebp, getFileSize, hashFile, lastModifiedAt } from "./utils/fs.mjs";
 
-const { deepFreeze } = foundry.utils;
-
-export const api = deepFreeze({
+export const api = foundry.utils.deepFreeze({
 	Apps: {
 		ArtBrowser,
 		ArtistBrowser,
@@ -18,10 +16,10 @@ export const api = deepFreeze({
 	},
 	utils: {
 		fs: {
+			convertToWebp,
 			hashFile,
 			lastModifiedAt,
-			getFile,
-			uploadJson,
+			getFileSize,
 		},
 	},
 });

module/apps/ArtBrowser.mjs

@@ -187,7 +187,7 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 				single: this.selectMode === `single`,
 			},
 			can: {
-				upload: true,
+				upload: game.user.can(`FILES_UPLOAD`),
 			},
 		};
 	};
@@ -272,6 +272,7 @@ export class ArtBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 		event.stopPropagation();
 		const data = (new FormDataExtended(event.currentTarget)).object;
 		this.filters = data;
+		this.#page = 1;
 		this.render({ parts: [`images`] });
 	};
 

module/apps/ArtSidebar.mjs

@@ -1,8 +1,10 @@
 import { api } from "../api.mjs";
 import { __ID__, filePath } from "../consts.mjs";
+import { getFileSize } from "../utils/fs.mjs";
 
 const { HandlebarsApplicationMixin } = foundry.applications.api;
 const { AbstractSidebarTab } = foundry.applications.sidebar;
+const { deepClone } = foundry.utils;
 
 export class ArtSidebar extends HandlebarsApplicationMixin(AbstractSidebarTab) {
 	// #region Options
@@ -30,16 +32,43 @@ export class ArtSidebar extends HandlebarsApplicationMixin(AbstractSidebarTab) {
 	// #endregion Options
 
 	// #region Data Prep
-	_preparePartContext(partID, ctx) {
+	_prepareContext() {
+		return {
+			meta: {
+				idp: this.id,
+			},
+			can: {
+				upload: game.user.can(`FILES_UPLOAD`),
+			},
+		};
+	};
+
+	async _preparePartContext(partID, ctx) {
+		ctx = deepClone(ctx);
+
 		switch (partID) {
+			case `tokens`: {
+				await this._prepareTokensContext(ctx);
+				break;
+			};
+			case `artists`: {
+				await this._prepareArtistsContext(ctx);
+				break;
+			};
 		};
 
 		return ctx;
 	};
 
-	_prepareTokensContext(ctx) {};
+	async _prepareTokensContext(ctx) {
+		const size = await getFileSize(filePath(`storage/db/images.json`));
+		ctx.size = size.friendly;
+	};
 
-	_prepareArtistsContext(ctx) {};
+	async _prepareArtistsContext(ctx) {
+		const size = await getFileSize(filePath(`storage/db/artists.json`));
+		ctx.size = size.friendly;
+	};
 	// #endregion Data Prep
 
 	// #region Actions

module/apps/ArtistBrowser.mjs

@@ -56,7 +56,7 @@ export class ArtistBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 		if (this.#page == page) { return };
 		this.#page = page;
 		if (this.rendered) {
-			await this.render({ parts: [`images`] });
+			await this.render({ parts: [`list`] });
 			return;
 		};
 		return;
@@ -117,7 +117,7 @@ export class ArtistBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 				idp: this.id,
 			},
 			can: {
-				upload: true,
+				upload: game.user.can(`FILES_UPLOAD`),
 			},
 		};
 	};
@@ -152,6 +152,24 @@ export class ArtistBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 		const allArtists = Object.entries(deepClone(this.#artistDB.data));
 		const allImages = Object.values(this.#imagesDB.data);
 
+		/*
+		This collates all of the image data into the required summary data for the
+		display of the artists. Because this does the collation all in one iteration
+		it is a more performant way of collecting all of the information once the
+		databases get larger
+		*/
+		const summary = {};
+		for (const image of allImages) {
+			for (const artistID of image.artists) {
+				summary[artistID] ??= { count: 0, tags: {} };
+				summary[artistID].count++;
+				for (const tag of image.tags) {
+					summary[artistID].tags[tag] ??= { name: tag, count: 0 };
+					summary[artistID].tags[tag].count++;
+				};
+			};
+		};
+
 		const artists = [];
 		for (const [id, artist] of allArtists) {
 			// Check if it matches the required filters
@@ -162,20 +180,8 @@ export class ArtistBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 			// Populate ephemeral data for rendering
 			artist.id = id;
 
-			let imageCount = 0;
-			let tags = {};
-
-			for (const image of allImages) {
-				if (!image.artists.includes(id)) continue;
-				imageCount++;
-				for (const tag of image.tags) {
-					tags[tag] ??= { name: tag, count: 0 };
-					tags[tag].count++;
-				};
-			};
-
-			artist.imageCount = imageCount;
-			artist.commonTags = Object.values(tags)
+			artist.imageCount = summary[id].count;
+			artist.commonTags = Object.values(summary[id].tags)
 				.sort((a, b) => b.count - a.count)
 				.slice(0, 5);
 
@@ -200,6 +206,7 @@ export class ArtistBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
 		event.preventDefault();
 		event.stopPropagation();
 		const data = (new FormDataExtended(event.currentTarget)).object;
+		this.#page = 1;
 		this.filters = data;
 		this.render({ parts: [`list`] });
 	};

module/apps/ImageApp.mjs

@@ -1,8 +1,10 @@
 import { __ID__, filePath } from "../consts.mjs";
-import { determineFileExtension, getFile, hashFile, lastModifiedAt, uploadFile, uploadJson } from "../utils/fs.mjs";
+import { convertToWebp, determineFileExtension, getFile, hashFile, lastModifiedAt, uploadFile, uploadJson } from "../utils/fs.mjs";
+import { imagePath } from "../utils/imagePath.mjs";
 import { DBConnectorMixin } from "./mixins/DBConnector.mjs";
 
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+const { fetchWithTimeout } = foundry.utils;
 
 export class ImageApp extends
 	DBConnectorMixin(
@@ -27,6 +29,13 @@ export class ImageApp extends
 			contentClasses: [
 				`standard-form`,
 			],
+			controls: [
+				{
+					icon: `fa-solid fa-arrow-up-right-from-square`,
+					label: `IT.apps.ImageApp.toggle-upload-mode`,
+					action: `toggleUploadMode`,
+				}
+			],
 		},
 		form: {
 			handler: this.#onSubmit,
@@ -34,6 +43,7 @@ export class ImageApp extends
 			closeOnSubmit: true,
 		},
 		actions: {
+			toggleUploadMode: this.#toggleUploadMode,
 			removeEditingImage: this.#removeEditingImage,
 		},
 	};
@@ -47,8 +57,10 @@ export class ImageApp extends
 	// #endregion Options
 
 	// #region Instance Data
+	#isExternal = false;
+
 	/** The artist that is being edited, or the default artist values */
-	_doc = { path: ``, tags: [], artists: [] };
+	_doc = { name: ``, path: ``, tags: [], artists: [] };
 
 	get title() {
 		if (this._docID) {
@@ -61,6 +73,9 @@ export class ImageApp extends
 				return _loc(`IT.apps.ImageApp.title.edit-generic`);
 			}
 		};
+		if (this.#isExternal) {
+			return _loc(`IT.apps.ImageApp.title.register`);
+		}
 		return _loc(`IT.apps.ImageApp.title.upload`);
 	};
 	// #endregion Instance Data
@@ -76,7 +91,11 @@ export class ImageApp extends
 		if (options.parts?.includes(`header`)) {
 			this.element.querySelector(`input[type="file"]`)?.addEventListener(
 				`change`,
-				this.#changeImage.bind(this),
+				this.#changeImageInput.bind(this),
+			);
+			this.element.querySelector(`file-picker`)?.addEventListener(
+				`change`,
+				this.#changeFilePickerInput.bind(this),
 			);
 		};
 	};
@@ -88,12 +107,38 @@ export class ImageApp extends
 		// Validate the DB hasn't been updated since opening
 		if (!(await this.isAbleToSave())) { return };
 
+		// Add the external image into the DB
+		if (this.#isExternal) {
+
+			const path = data.path;
+			const response = await fetchWithTimeout(path);
+
+			const type = response.headers.get(`Content-Type`)
+			if (!Object.values(CONST.IMAGE_FILE_EXTENSIONS).includes(type)) {
+				// TODO: error
+				return;
+			};
+
+			const blob = await response.blob();
+			const hash = await hashFile(blob);
+
+			const images = await getFile(`storage/db/images.json`);
+			images[hash] = {
+				name: data.name,
+				tags: data.tags,
+				artists: data.artists,
+				external: true,
+				path,
+			};
+			await uploadJson(`db`, `images.json`, images);
+
+			Hooks.callAll(`${__ID__}.imageUploaded`, hash, images[hash]);
+		}
 
 		// Upload new image to server
-		if (!this._docID) {
+		else if (!this._docID) {
 			const hash = this._doc.hash;
 			const extension = determineFileExtension(this.#file);
-			const path = `storage/tokens/${hash}.${extension}`;
 
 			if (!this.#file) {
 				// TODO: ERROR
@@ -106,12 +151,12 @@ export class ImageApp extends
 			);
 			await uploadFile(`tokens`, file);
 
-			const images = await getFile(this.constructor.dbPath);
+			const images = await getFile(`storage/db/images.json`);
 			images[hash] = {
 				name: data.name,
 				tags: data.tags,
 				artists: data.artists,
-				path: this.#file ? path : ``,
+				path: `storage/tokens/${hash}.${extension}`,
 			};
 			await uploadJson(`db`, `images.json`, images);
 
@@ -149,17 +194,21 @@ export class ImageApp extends
 			};
 		};
 
+		let path = imagePath(this._doc);
+		if (this.#isExternal || this._doc.path.startsWith(`blob`)) {
+			path = this._doc.path;
+		};
+
 		const ctx = {
 			meta: {
 				idp: this.id,
 			},
 			imageTypes: Object.values(CONST.IMAGE_FILE_EXTENSIONS).join(`,`),
-			imageURL: this._doc.path.startsWith(`blob`)
-				? this._doc.path
-				: filePath(this._doc.path),
+			imageURL: path,
 			docID: this._docID,
 			image: this._doc,
 			artists: this.#artistCache,
+			external: this.#isExternal,
 		};
 
 		return ctx;
@@ -169,9 +218,9 @@ export class ImageApp extends
 	// #region Actions
 	/** @type {File | null} */
 	#file = null;
-	async #changeImage(event) {
+	async #changeImageInput(event) {
 		/** @type {File} */
-		const file = this.#file = event.target.files[0];
+		let file = this.#file = event.target.files[0];
 
 		// Prevent memory leaks
 		URL.revokeObjectURL(this._doc.path);
@@ -179,14 +228,22 @@ export class ImageApp extends
 		if (!file) {
 			this.#file = null;
 			this._docID = null;
-			this._doc = { path: ``, artists: [], tags: [] };
+			this._doc = { path: ``, name: ``, artists: [], tags: [] };
 			this._updateFrame({ window: { title: this.title } });
 			await this.render({ parts: [`header`, `preview`, `form`] });
 			return;
 		};
 
 		// Ensure we don't already have the file uploaded
-		const extension = determineFileExtension(file);
+		const webp = await convertToWebp(file);
+		let extension;
+		if (webp) {
+			file = this.#file = webp;
+			extension = `webp`;
+		} else {
+			extension = determineFileExtension(file);
+		};
+
 		const hash = await hashFile(file);
 		const path = `storage/tokens/${hash}.${extension}`;
 		const lastModified = await lastModifiedAt(path);
@@ -201,9 +258,42 @@ export class ImageApp extends
 
 		// Temporarily blob the image so it can be displayed in-app
 		const url = URL.createObjectURL(file);
+		this._doc.name = file.name.replace(`.${extension}`, ``);
 		this._doc.path = url;
 		this._doc.hash = hash;
-		await this.render({ parts: [`preview`] });
+		await this.render({ parts: [`preview`, `form`] });
+	};
+
+	async #changeFilePickerInput(event) {
+		const picker = event.currentTarget;
+		const path = picker.value;
+
+		if (!path) {
+			this._docID = null;
+			this._doc = { path, name: ``, artists: [], tags: [] };
+			this.render({ parts: [ `preview`, `form` ] });
+			return;
+		};
+
+		let hash;
+		try {
+			const response = await fetchWithTimeout(path);
+			const blob = await response.blob();
+			hash = await hashFile(blob);
+		} catch {
+			ui.notifications.error(_loc(`IT.notifs.error.cant-find-image`, { url: path }));
+			picker.value = ``;
+			return;
+		};
+
+		this._docID = hash;
+		await this._fetchDocument(true);
+		if (this._doc.path !== path) {
+			this._docID = null;
+			this._doc = { path, name: ``, artists: [], tags: [] };
+		};
+
+		this.render({ parts: [ `preview`, `form` ] });
 	};
 
 	/** @this {ImageApp} */
@@ -214,5 +304,11 @@ export class ImageApp extends
 		this._updateFrame({ window: { title: this.title } });
 		await this.render({ parts: [`header`, `preview`, `form`] });
 	};
+
+	/** @this {ImageApp} */
+	static async #toggleUploadMode() {
+		this.#isExternal = !this.#isExternal;
+		ImageApp.#removeEditingImage.call(this);
+	};
 	// #endregion Actions
 };

module/apps/mixins/DBConnector.mjs

@@ -43,15 +43,17 @@ export function DBConnectorMixin(HandlebarsApp) {
 			return super.render(options, ...args);
 		};
 
-		async _fetchDocument() {
+		async _fetchDocument(silent = false) {
 			if (!this._docID) { return }
 			const documents = await getFile(this.dbPath);
 
 			if (documents[this._docID] == null) {
-				ui.notifications.error(_loc(
-					`IT.notifs.error.document-ID-404`,
-					{ id: this._docID, dbType: this.dbType },
-				));
+				if (!silent) {
+					ui.notifications.error(_loc(
+						`IT.notifs.error.document-ID-404`,
+						{ id: this._docID, dbType: this.dbType },
+					));
+				}
 				return false;
 			};
 

module/config.mjs

@@ -0,0 +1,4 @@
+export const config = CONFIG.ImageTagger = foundry.utils.deepSeal({
+	WEBP_QUALITY: 0.5,
+	WEBP_IGNORE: [`image/gif`],
+});

module/hooks/init.mjs

@@ -1,5 +1,7 @@
+import { api } from "../api.mjs";
 import { ArtSidebar } from "../apps/ArtSidebar.mjs";
 import { registerCustomComponents } from "../apps/elements/_index.mjs";
+import { __ID__ } from "../consts.mjs";
 import helpers from "../handlebarsHelpers/_index.mjs";
 import { registerUserSettings } from "../settings/user.mjs";
 
@@ -20,4 +22,6 @@ Hooks.on(`init`, () => {
 	const temp = CONFIG.ui.sidebar.TABS.settings;
 	delete CONFIG.ui.sidebar.TABS.settings;
 	CONFIG.ui.sidebar.TABS.settings = temp;
+
+	game.modules.get(__ID__).api = api;
 });

module/utils/fs.mjs

@@ -1,3 +1,4 @@
+import { config } from "../config.mjs";
 import { __ID__, devMode, filePath } from "../consts.mjs";
 
 const { fetchJsonWithTimeout } = foundry.utils;
@@ -28,6 +29,42 @@ export async function hashFile(file) {
 		.join(``);
 };
 
+/**
+ * Converts an image file into a webp file unless it is already a webp file or
+ * cannot be converted to a webp, in which case it doesn't modify the file at all.
+ *
+ * @param {File} file The file to convert
+ * @returns {Promise<File>}
+ */
+export async function convertToWebp(file) {
+	if (file.type === `image/webp`) { return null };
+	if (config.WEBP_IGNORE.includes(file.type)) { return null };
+
+	/** @type {HTMLImageElement} */
+	const image = document.createElement(`img`);
+	const url = URL.createObjectURL(file);
+	image.src = url;
+	await image.decode();
+
+	/** @type {HTMLCanvasElement} */
+	const canvas = document.createElement(`canvas`);
+	canvas.width = image.naturalWidth;
+	canvas.height = image.naturalHeight;
+	canvas.getContext(`2d`).drawImage(image, 0, 0);
+
+	return new Promise((resolve) => {
+		canvas.toBlob(
+			(blob) => {
+				const name = file.name.split(`.`).slice(0, -1).join(`.`);
+				const webp = new File([blob], `${name}.webp`, { type: blob.type });
+				resolve(webp);
+			},
+			`image/webp`,
+			config.WEBP_QUALITY,
+		);
+	});
+};
+
 export async function lastModifiedAt(path) {
 	try {
 		const response = await fetch(filePath(path), { method: `HEAD` });
@@ -37,6 +74,30 @@ export async function lastModifiedAt(path) {
 	};
 };
 
+export async function getFileSize(path) {
+	try {
+		const response = await fetch(filePath(path), { method: `HEAD` });
+		const bytes = response.headers.get(`Content-Length`);
+		if (!bytes) { return null }
+
+		// round the non-bytes to 2 decimal places
+		const kilobytes = Math.floor(bytes / 10) / 100;
+		const megabytes = Math.floor(bytes / 10_000) / 100;
+
+		// determine the most appropriate unit to use
+		let friendly = `${bytes} bytes`;
+		if (megabytes > 0.25) {
+			friendly = `${megabytes}MB`;
+		} else if (kilobytes > 0) {
+			friendly = `${kilobytes}KB`;
+		};
+
+		return { bytes, kilobytes, megabytes, friendly };
+	} catch {
+		return null;
+	};
+};
+
 export async function getFile(path) {
 	try {
 		return fetchJsonWithTimeout(filePath(path));
@@ -86,6 +147,7 @@ export async function uploadFile(path, file) {
 };
 
 export function determineFileExtension(file) {
+	if (!file) return null;
 	for (const [short, long] of Object.entries(CONST.IMAGE_FILE_EXTENSIONS)) {
 		if (long === file.type) {
 			return short;

scripts

@@ -1 +1 @@
-Subproject commit 06fb33b35ff446dee613afe271b6fe2ff976735a
+Subproject commit 0065967ad7f086c63c07d28d834bd7bdf31ccbd5

styles/apps/ArtSidebar.css

@@ -16,4 +16,11 @@
 	h4 {
 		margin: 0;
 	}
+
+	.subtitle {
+		margin: 0;
+		text-align: center;
+		font-size: 0.75rem;
+		color: var(--color-text-subtitle);
+	}
 }

styles/apps/ImageApp.css

@@ -5,6 +5,10 @@
 		grid-template-rows: auto auto;
 	}
 
+	file-picker {
+		flex-grow: 1;
+	}
+
 	header, footer {
 		grid-column: 1 / -1;
 	}

templates/ArtBrowser/image/grid.hbs

@@ -10,12 +10,12 @@
 		<button
 			data-action="select"
 		>
-			Select
+			{{localize "IT.common.select"}}
 		</button>
 	{{else if is.multi}}
 		<input
 			type="checkbox"
-			aria-label="Select image"
+			aria-label="IT.apps.ArtBrowser.select-image"
 			data-action="select"
 			{{checked image.selected}}
 		>

templates/ArtBrowser/images.hbs

@@ -1,7 +1,9 @@
 <div class="paginated">
 	<div class="row">
 		{{#if can.upload}}
-			<button data-action="uploadImage">Upload Image</button>
+			<button data-action="uploadImage">
+				{{localize "IT.apps.ArtBrowser.upload-image"}}
+			</button>
 		{{/if}}
 		{{#if is.multi}}
 			<div class="grow"></div>
@@ -20,7 +22,7 @@
 		</ul>
 	{{else}}
 		<span class="placeholder">
-			{{ localize "" }}
+			{{ localize "IT.apps.ArtBrowser.no-results" }}
 		</span>
 	{{/if}}
 	<div class="grow"></div>
@@ -29,14 +31,14 @@
 			data-action="prevPage"
 			{{disabled (not has.prev)}}
 		>
-			Prev
+			{{localize "IT.common.page.previous"}}
 		</button>
 		{{page}} / {{pages}}
 		<button
 			data-action="nextPage"
 			{{disabled (not has.next)}}
 		>
-			Next
+			{{localize "IT.common.page.next"}}
 		</button>
 	</div>
 </div>

templates/ArtBrowser/sidebar.hbs

@@ -1,6 +1,12 @@
 <form autocomplete="off" class="filters">
+	<p>
+		{{localize "IT.common.page-reset-warning"}}
+	</p>
+
+	<hr>
+
 	<label for="{{meta.idp}}-name">
-		Name
+		{{localize "IT.common.name"}}
 	</label>
 	<input
 		id="{{meta.idp}}-name"
@@ -12,7 +18,7 @@
 	<hr>
 
 	<label for="{{meta.idp}}-tags">
-		Tags
+		{{localize "IT.common.tags"}}
 	</label>
 	<string-tags
 		id="{{meta.idp}}-tags"
@@ -23,7 +29,7 @@
 	<hr>
 
 	<label for="{{meta.idp}}-artists">
-		Artists
+		{{localize "IT.common.artists"}}
 	</label>
 	<multi-select
 		id="{{meta.idp}}-artists"

templates/ArtSidebar/artists.hbs

@@ -1,17 +1,24 @@
 <section>
-	<h4 class="divider">Artists</h4>
+	<div>
+		<h4 class="divider">{{ localize "IT.common.artists" }}</h4>
+		<p class="subtitle">
+			{{ localize "IT.apps.ArtSidebar.db-size" size=size }}
+		</p>
+	</div>
 	<button
 		type="button"
 		data-action="openApp"
 		data-app="ArtistBrowser"
 	>
-		View All
-	</button>
-	<button
-		type="button"
-		data-action="openApp"
-		data-app="ArtistApp"
-	>
-		Add New
+		{{ localize "IT.apps.ArtSidebar.view" }}
 	</button>
+	{{#if can.upload}}
+		<button
+			type="button"
+			data-action="openApp"
+			data-app="ArtistApp"
+		>
+			{{ localize "IT.apps.ArtSidebar.add-new" }}
+		</button>
+	{{/if}}
 </section>

templates/ArtSidebar/tokens.hbs

@@ -1,17 +1,24 @@
 <section>
-	<h4 class="divider">Tokens</h4>
+	<div>
+		<h4 class="divider">{{ localize "IT.common.images" }}</h4>
+		<p class="subtitle">
+			{{ localize "IT.apps.ArtSidebar.db-size" size=size }}
+		</p>
+	</div>
 	<button
 		type="button"
 		data-action="openApp"
 		data-app="ArtBrowser"
 	>
-		View All
-	</button>
-	<button
-		type="button"
-		data-action="openApp"
-		data-app="ImageApp"
-	>
-		Add New
+		{{ localize "IT.apps.ArtSidebar.view" }}
 	</button>
+	{{#if can.upload}}
+		<button
+			type="button"
+			data-action="openApp"
+			data-app="ImageApp"
+		>
+			{{ localize "IT.apps.ArtSidebar.add-new" }}
+		</button>
+	{{/if}}
 </section>

templates/ArtistApp/form.hbs

@@ -1,7 +1,7 @@
 <div>
 	<div class="row">
 		<label for="{{meta.idp}}-name">
-			Name
+			{{localize "IT.common.name"}}
 		</label>
 		<div class="grow"></div>
 		<input

templates/ArtistApp/linkList.hbs

@@ -1,6 +1,8 @@
 <div>
 	<div class="row">
-		<span class="label">Links</span>
+		<span class="label">
+			{{localize "IT.common.links"}}
+		</span>
 		<div class="grow"></div>
 		<button
 			type="button"

templates/ArtistBrowser/artist.hbs

@@ -3,7 +3,7 @@
 		<h2>{{artist.name}}</h2>
 		<div class="grow"></div>
 		<div>
-			{{artist.imageCount}} Images
+			{{localize "IT.apps.ArtistBrowser.image-count" count=artist.imageCount}}
 		</div>
 	</div>
 	{{#if artist.links}}
@@ -17,7 +17,7 @@
 	{{/if}}
 	{{#if artist.commonTags}}
 		<section>
-			<h3>Common Image Tags</h3>
+			<h3>{{localize "IT.apps.ArtistBrowser.common-tags"}}</h3>
 			<ul class="chip-list">
 				{{#each artist.commonTags as |tag|}}
 					<li class="chip">{{tag.name}} ({{tag.count}})</li>

templates/ArtistBrowser/list.hbs

@@ -1,7 +1,9 @@
 <div class="paginated">
 	<div class="row">
 		{{#if can.upload}}
-			<button data-action="createArtist">Create New Artist</button>
+			<button data-action="createArtist">
+				{{localize "IT.apps.ArtistBrowser.create-artist"}}
+			</button>
 		{{/if}}
 	</div>
 	{{#if artists}}

templates/ArtistBrowser/sidebar.hbs

@@ -1,5 +1,13 @@
 <form autocomplete="off" class="filters">
-	<label for="{{meta.idp}}-name">Name</label>
+	<p>
+		{{localize "IT.common.page-reset-warning"}}
+	</p>
+
+	<hr>
+
+	<label for="{{meta.idp}}-name">
+		{{localize "IT.common.name"}}
+	</label>
 	<input
 		id="{{meta.idp}}-name"
 		type="text"
@@ -10,7 +18,7 @@
 	<hr>
 
 	<label for="{{meta.idp}}-sort">
-		Sort By
+		{{localize "IT.common.sort-by"}}
 	</label>
 	<select name="sortBy" id="{{meta.idp}}-sort">
 		{{it-options sortBy sortOptions localize=true}}

templates/ImageApp/form.hbs

@@ -1,6 +1,6 @@
 <div class="inputs">
 	<label for="{{meta.idp}}-name">
-		Name (Optional)
+		{{localize "IT.common.name"}}
 	</label>
 	<input
 		id="{{meta.idp}}-name"
@@ -10,7 +10,7 @@
 	>
 
 	<label for="{{meta.idp}}-tags">
-		Tags (Optional)
+		{{localize "IT.common.tags"}}
 	</label>
 	<string-tags
 		id="{{meta.idp}}-tags"
@@ -19,7 +19,7 @@
 	></string-tags>
 
 	<label for="{{meta.idp}}-artists">
-		Artists (Optional)
+		{{localize "IT.common.artists"}}
 	</label>
 	<multi-select
 		id="{{meta.idp}}-artists"

templates/ImageApp/header.hbs

@@ -1,29 +1,33 @@
-<header>
-	<div class="row">
-		<label for="{{meta.idp}}-image">
-			Image
-		</label>
-		{{#if docID}}
-			<input
-				type="text"
-				id="{{meta.idp}}-image"
-				value="{{imageURL}}"
-				disabled
-				readonly
-			>
-			<button
-				type="button"
-				data-action="removeEditingImage"
-			>
-				Clear
-			</button>
-		{{else}}
-			<input
-				type="file"
-				id="{{meta.idp}}-image"
-				accept="{{imageTypes}}"
-				name="file"
-			>
-		{{/if}}
-	</div>
+<header class="row">
+	<label for="{{meta.idp}}-image">
+		{{ localize "IT.apps.ImageApp.image-label" }}
+	</label>
+	{{#if external}}
+		<file-picker
+			id="{{meta.idp}}-image"
+			type="image"
+			name="path"
+		></file-picker>
+	{{else if docID}}
+		<input
+			type="text"
+			id="{{meta.idp}}-image"
+			value="{{imageURL}}"
+			disabled
+			readonly
+		>
+		<button
+			type="button"
+			data-action="removeEditingImage"
+		>
+			{{ localize "IT.apps.ImageApp.clear" }}
+		</button>
+	{{else}}
+		<input
+			type="file"
+			id="{{meta.idp}}-image"
+			accept="{{imageTypes}}"
+			name="file"
+		>
+	{{/if}}
 </header>

templates/ImageApp/preview.hbs

@@ -6,7 +6,7 @@
 		>
 	{{else}}
 		<span class="placeholder">
-			Select an image to see the preview
+			{{ localize "IT.apps.ImageApp.preview-placeholder" }}
 		</span>
 	{{/if}}
 </div>