Add nsfw level filtering and view more previews/metadata

Author: pythongosssss

web/js/common/modelInfoDialog.css

@@ -94,6 +94,21 @@
 	bottom: 10px;
 	right: 10px;
 }
+.pysssss-preview button+button {
+	bottom: 34px;
+}
+
+.pysssss-preview button.pysssss-preview-nav {
+	bottom: unset;
+	right: 30px;
+	top: 10px;
+	font-size: 14px;
+	line-height: 14px;
+}
+
+.pysssss-preview button.pysssss-preview-nav+.pysssss-preview-nav {
+	right: 10px;
+}
 .pysssss-model-notes {
 	background-color: rgba(0, 0, 0, 0.25);
 	padding: 5px;

web/js/common/modelInfoDialog.js

@@ -15,7 +15,10 @@ class MetadataDialog extends ComfyDialog {
 			$el(
 				"div",
 				Object.keys(metadata).map((k) =>
-					$el("div", [$el("label", { textContent: k }), $el("span", { textContent: metadata[k] })])
+					$el("div", [
+						$el("label", { textContent: k }),
+						$el("span", { textContent: typeof metadata[k] === "object" ? JSON.stringify(metadata[k]) : metadata[k] }),
+					])
 				)
 			)
 		);
@@ -146,13 +149,10 @@ export class ModelInfoDialog extends ComfyDialog {
 				if (textarea) {
 					this.customNotes = textarea.value;
 
-					const resp = await api.fetchApi(
-						"/pysssss/metadata/notes/" + encodeURIComponent(`${this.type}/${this.name}`),
-						{
-							method: "POST",
-							body: this.customNotes,
-						}
-					);
+					const resp = await api.fetchApi("/pysssss/metadata/notes/" + encodeURIComponent(`${this.type}/${this.name}`), {
+						method: "POST",
+						body: this.customNotes,
+					});
 
 					if (resp.status !== 200) {
 						console.error(resp);
@@ -255,11 +255,24 @@ export class ModelInfoDialog extends ComfyDialog {
 					})
 				);
 
-				const preview = info.images.find((i) => i.type === "image");
-				if (preview) {
-					this.img.src = preview.url;
+				const allPreviews = info.images?.filter((i) => i.type === "image");
+				const previews = allPreviews?.filter((i) => i.nsfwLevel <= ModelInfoDialog.nsfwLevel);
+				if (previews?.length) {
+					let previewIndex = 0;
+					let preview;
+					const updatePreview = () => {
+						preview = previews[previewIndex];
+						this.img.src = preview.url;
+					};
+
+					updatePreview();
 					this.img.style.display = "";
 
+					this.img.title = `${previews.length} previews.`;
+					if (allPreviews.length !== previews.length) {
+						this.img.title += ` ${allPreviews.length - previews.length} images hidden due to NSFW level.`;
+					}
+
 					this.imgSave = $el("button", {
 						textContent: "Use as preview",
 						parent: this.imgWrapper,
@@ -299,6 +312,41 @@ export class ModelInfoDialog extends ComfyDialog {
 							app.refreshComboInNodes();
 						},
 					});
+
+					$el("button", {
+						textContent: "Show metadata",
+						parent: this.imgWrapper,
+						onclick: async () => {
+							if (preview.meta && Object.keys(preview.meta).length) {
+								new MetadataDialog().show(preview.meta);
+							} else {
+								alert("No image metadata found");
+							}
+						},
+					});
+
+					const addNavButton = (icon, direction) => {
+						$el("button.pysssss-preview-nav", {
+							textContent: icon,
+							parent: this.imgWrapper,
+							onclick: async () => {
+								previewIndex += direction;
+								if (previewIndex < 0) {
+									previewIndex = previews.length - 1;
+								} else if (previewIndex >= previews.length) {
+									previewIndex = 0;
+								}
+								updatePreview();
+							},
+						});
+					};
+
+					if (previews.length > 1) {
+						addNavButton("‹", -1);
+						addNavButton("›", 1);
+					}
+				} else if (info.images?.length) {
+					$el("span", { style: { opacity: 0.6 }, textContent: "⚠️ All images hidden due to NSFW level setting.", parent: this.imgWrapper });
 				}
 
 				return info;

web/js/modelInfo.js

@@ -4,6 +4,14 @@ import { $el } from "../../../scripts/ui.js";
 import { ModelInfoDialog } from "./common/modelInfoDialog.js";
 
 const MAX_TAGS = 500;
+const NsfwLevel = {
+	PG: 1,
+	PG13: 2,
+	R: 4,
+	X: 8,
+	XXX: 16,
+	Blocked: 32,
+};
 
 export class LoraInfoDialog extends ModelInfoDialog {
 	getTagFrequency() {
@@ -79,8 +87,8 @@ export class LoraInfoDialog extends ModelInfoDialog {
 
 	addTags() {
 		let tags = this.getTagFrequency();
-		if(!tags?.length) {
-			tags = this.metadata["modelspec.tags"]?.split(",").map(t => [t.trim(), 1]);
+		if (!tags?.length) {
+			tags = this.metadata["modelspec.tags"]?.split(",").map((t) => [t.trim(), 1]);
 		}
 		let hasMore;
 		if (tags?.length) {
@@ -376,6 +384,18 @@ app.registerExtension({
 			"Checkpoint",
 			["CheckpointLoader.ckpt_name", "CheckpointLoaderSimple", "CheckpointLoader|pysssss", "Efficient Loader", "Eff. Loader SDXL"].join(",")
 		);
+
+		app.ui.settings.addSetting({
+			id: `pysssss.ModelInfo.NsfwLevel`,
+			name: `🐍 Model Info - Image Preview Max NSFW Level`,
+			type: "combo",
+			defaultValue: "PG13",
+			options: Object.keys(NsfwLevel),
+			tooltip: `Hides preview images that are tagged as a higher NSFW level`,
+			onChange(value) {
+				ModelInfoDialog.nsfwLevel = NsfwLevel[value] ?? NsfwLevel.PG;
+			},
+		});
 	},
 	beforeRegisterNodeDef(nodeType) {
 		const getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;