added option to hide NSFW images

index.css

@@ -63,10 +63,6 @@ h4 {
 	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%);
 }
 
-#gutter:hover {
-	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 40%)
-}
-
 #gutter div {
 	position: relative;
 	width: 20px;
@@ -77,34 +73,34 @@ h4 {
 	cursor: col-resize;
 }
 
-#gutter:hover div {
+#gutter div:hover {
 	border-right: 1px solid rgba(255,255,255,0.4);
+	background-color: rgba(255, 255, 255, 0.1);
 }
 
 #gutter div[data-tooltip]::before {
-	content: attr(data-tooltip);
-	opacity: 0;
-	transition: opacity 0ms 0ms linear;
-}
-
-#gutter div[data-tooltip]:hover::before {
 	content: attr(data-tooltip);
 	position: absolute;
-	top: 20px;
+	bottom: 100px;
 	left: 50%;
-	transform: translateX(-40%);
-	background-color: #555;
+	transform: translateX(-25%);
+	background-color: #222;
 	padding: 4px 8px;
 	border-radius: 4px;
 	box-shadow: 0 5px 10px black;
 	white-space: nowrap;
 	font-size: 12px;
-	color: white;
+	color: #777;
 	opacity: 1;
-	transition: opacity 100ms 500ms linear;
+	transition: color 100ms linear, background-color 100ms linear;
 	pointer-events: none;  /* Make sure the tooltip doesn't interfere with other interactions */
 }
 
+#gutter div[data-tooltip]:hover::before {
+	background-color: #555;
+	color: #fff;
+}
+
 @keyframes gutter_tease {
 	0%   {
 		transform: translateX(-40px);
@@ -149,11 +145,18 @@ h4 {
 	box-sizing: border-box;
 	margin-left: calc(40% + 50px);
 	margin-top: 20px;
-	margin-bottom: 20px;
 	margin-right: 60px;
 	width: 100%;
 }
 
+#image-container::after {
+	/* makes space between the last item and the bottom of the container */
+	content: '';
+	display: block;
+	height: 40px;
+	width: 100%;
+}
+
 #alert {
 	position: fixed;
 	z-index: 1;
@@ -1130,6 +1133,10 @@ input[type="checkbox"]:checked::before {
 	font-size: 14px;
 }
 
+.image-item .img.censored {
+	filter: blur(20px);
+}
+
 .image-item .imgBox .img.hidden {
 	display: none;
 }

index.html

@@ -61,12 +61,15 @@
 				<label class="top_control">
 					<input type="checkbox" checked="checked" name="deprecated" value="deprecated" autocomplete="off"><span>hide unknown to SDXL</span><span class="count"></span>
 				</label>
+				<label class="top_control">
+					<input type="checkbox" checked="checked" name="nudity" value="nudity" autocomplete="off"><span>allow risqué</span><span class="count"></span>
+				</label>
 				<div class="divider"></div>
 				<span id="edit_most_used" class="hidden">edit these</span>
 				<!-- JS will insert checkboxes here -->
 			</div>
 			<div id="gutter">
-				<div data-tooltip="drag slowly"></div>
+				<div data-tooltip="← →"></div>
 			</div>
 			<div id="image-container">
 				<div id="filtersHidingAll">
@@ -230,6 +233,10 @@
 					<li>If you prompt with their names, the result will be unlike their actual style and generic, and you can achieve similar results by prompting "a painting", etc.</li>
 					<li>They're included in the database for the record of what SDXL doesn't know</li>
 				</ul>
+				<h3>Allow risqué</h3>
+				<ul>
+					<li>Unchecking blurs all images that don't meet extremely conservative, G-rated, 100% SFW criteria.  Note that the most risqué this site gets is boobies.  Even when allow risqué is checked, I've censored all below-the-waist nudity as liability protection.</li>
+				</ul>
 				<h3>Important tags</h3>
 				<ul>
 					<li>Tap <strong>edit</strong> under the important category to add or remove tags</li>
@@ -354,7 +361,7 @@
 					<li>Open source.  Creatives Commons license.  Download for free.</li>
 					<li>I don't get nor do I want compensation for this.  Getting thanks feels great!</li>
 					<li>I'm not affiliated with Stability AI</li>
-					<li>Use at your own risk.  Contains mild nudity 🧟</li>
+					<li>Use at your own risk.  You're responsible for your own actions.</li>
 				</ul>
 			</div>
 		</div>

index.js

@@ -65,6 +65,7 @@ async function startUp() {
 	showHideCategories();
 	await loadOptionsState();
 	await loadFavoritesState();
+	blurUnblurNudity();
 	hideAllArtists();
 	unhideBasedOnPermissiveSetting();
 	sortArtists();
@@ -72,7 +73,7 @@ async function startUp() {
 	updateArtistsImgSrc(false,false);
 	updateTags('start');
 	makeStyleRuleForDrag();
-	teasePartition();
+	// teasePartition();
 	promptBuilderAddArtist(true);
 	updatePromptBuilderParts();
 	addAllListeners();
@@ -250,7 +251,7 @@ async function loadEditedArtists() {
 					editedArtists.delete(artistFound);
 				} else {
 					if (!proto.startsWith('http')) {
-						// if this is a local file, then update artistData with the saved edits
+						// if this is a local file, then update artistsData with the saved edits
 						artistsData[i] = artistFound;
 					}
 				}
@@ -1114,8 +1115,78 @@ function checkAllInCategory(theCheckbox) {
 	}
 }
 
+function blurUnblurNudity() {
+	let nudity = document.querySelector('input[name="nudity"]');
+	if(nudity.checked) {
+		let images = document.querySelectorAll('.img');
+		images.forEach(function(img){
+			img.classList.remove('censored');
+		});
+	} else {
+		for (let i=0, il=artistsData.length; i<il; i++) {
+			let artist = artistsData[i];
+			for(j=0,jl=artist[4].length; j<jl; j++) {
+				let blurBox = 0;
+				let blurModel = artist[4][j][0];
+				if(blurModel > 0) { blurBox = 1; }
+				let blurImage = artist[4][j][1];
+				if(blurImage == 'a') { blurImage = '.img_artwork'; }
+				if(blurImage == 'p') { blurImage = '.img_portrait'; }
+				if(blurImage == 'l') { blurImage = '.img_landscape'; }
+				if(blurModel == secondModelSelected || blurModel == 0) {
+					let imageItems = document.querySelectorAll('.image-item');
+					for(k=0,kl=imageItems.length; k<kl; k++) {
+						// find match in artistsData if first and last names match
+						let imageItem = imageItems[k];
+						let firstN = imageItem.querySelector('.firstN').textContent;
+						let lastN = imageItem.querySelector('.lastN').textContent;
+						if(artist[0] == lastN && artist[1] == firstN) {
+							let box = imageItem.querySelector('.imgBox[data-model="' + blurBox + '"');
+							let image = box.querySelector(blurImage).classList.add('censored');
+							break;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+function toggleCensored(h4) {
+	let imageItem = h4.closest('.image-item');
+	let firstN = imageItem.querySelector('.firstN').textContent;
+	let lastN = imageItem.querySelector('.lastN').textContent;
+	for (let i=0, il=artistsData.length; i<il; i++) {
+		let artist = artistsData[i];
+		if(artist[0] == lastN && artist[1] == firstN) {
+			let blurModel = imageItem.querySelector('.imgBox:not(.hidden)').dataset.model;
+			if(blurModel == 1) { blurModel = secondModelSelected; }
+			let img = imageItem.querySelector('.imgBox:not(.hidden) .img:not(.hidden)');
+			let blurImage = '';
+			if(img.classList.contains('img_artwork')) { blurImage = 'a'; }
+			if(img.classList.contains('img_portrait')) { blurImage = 'p'; }
+			if(img.classList.contains('img_landscape')) { blurImage = 'l'; }
+			let blurNew = blurModel + blurImage;
+			let match = false;
+			for(j=0,jl=artist[4].length; j<jl; j++) {
+				let blurOld = artist[4][j]
+				if(blurNew == blurOld) {
+					match = true;
+					artist[4].splice(j,1);
+					img.classList.remove('censored');
+				}
+			}
+			if(!match) {
+				artist[4].push(blurNew);
+				img.classList.add('censored');
+			}
+			break;
+		}
+	}
+}
+
 function hideAllArtists() {
-	var imageItems = document.querySelectorAll('.image-item');
+	let imageItems = document.querySelectorAll('.image-item');
 	imageItems.forEach(function(imageItem) {
 		imageItem.classList.add('hidden');
 	});
@@ -1481,9 +1552,18 @@ function showExport() {
 			}
 		}
 		newTags.push(added);
-		// output updated artist
 		artist[2] = newTags.join('|');
-		value += '["'+artist[0]+'","'+artist[1]+'","'+artist[2]+'",'+artist[3]+'],\r\n';
+		// sort censored images array
+		artist[4] = artist[4].sort(function(a, b) {
+			return a.localeCompare(b);
+		});
+		let arrayStr = '';
+		for (let i=0, il=artist[4].length; i<il; i++) {
+			arrayStr += '"' + artist[4][i] + '",';
+		}
+		arrayStr = arrayStr.substring(0,arrayStr.length-1);
+		// output updated artist
+		value += '["'+artist[0]+'","'+artist[1]+'","'+artist[2]+'",'+artist[3]+',['+arrayStr+']],\r\n';
 	}
 	textareaA.value = value;
 }
@@ -3022,6 +3102,10 @@ function addAllListeners() {
 					unhideBasedOnPermissiveSetting();
 					updateTags('click');
 				});
+			} else if(checkbox.name == 'nudity') {
+				checkbox.addEventListener('change', function(e) {
+					blurUnblurNudity();
+				});
 			}
 		}
 		// all checkboxes
@@ -3029,7 +3113,9 @@ function addAllListeners() {
 			styleLabelToCheckbox(this);
 			clearSelection();
 			storeCheckboxState(e.target);
-			updateArtistsImgSrc(false,false);
+			window.setTimeout(function() {
+				updateArtistsImgSrc(false,false);
+			})
 		});
 	});
 	// information
@@ -3142,14 +3228,18 @@ function addAllListeners() {
 	var sortAA = document.getElementById('sortAA');
 	sortAA.addEventListener('click', function(e) {
 		sortArtistsByAlpha();
-		updateArtistsImgSrc(false,false);
+		window.setTimeout(function() {
+			updateArtistsImgSrc(false,false);
+		})
 		highlightSelectedOption('sortAA');
 		storeOptionsState();
 	});
 	var sortAR = document.getElementById('sortAR');
 	sortAR.addEventListener('click', function(e) {
 		sortArtistsByRandom();
-		updateArtistsImgSrc(false,false);
+		window.setTimeout(function() {
+			updateArtistsImgSrc(false,false);
+		})
 		highlightSelectedOption('sortAR');
 		storeOptionsState();
 	});
@@ -3157,6 +3247,7 @@ function addAllListeners() {
 	let secondModelSelector = document.querySelector('#second_model select');
 	secondModelSelector.addEventListener('change', function(e) {
 		setSecondModelSelected(this);
+		blurUnblurNudity();
 	});
 
 	// most used mode
@@ -3214,6 +3305,7 @@ function addAllListeners() {
 		});
 		imageItem.querySelector('.art_set').addEventListener('click', function() {
 			rotateModelsImages();
+			blurUnblurNudity();
 		});
 		imageItem.getElementsByTagName('h3')[0].addEventListener('click', function(e) {
 			copyStuffToClipboard(this,'name');
@@ -3222,6 +3314,7 @@ function addAllListeners() {
 		imageItem.getElementsByTagName('h4')[0].addEventListener('click', function(e) {
 			if(!this.classList.contains('edit_mode')) {
 				copyStuffToClipboard(this, 'tags')
+				// toggleCensored(this);
 				// toggleThisArtistsTags(this.textContent);
 			}
 		});