☰

dA_showAIOnThumb

Display on thumbnail that art was generated using AI!

// ==UserScript==
// @name         dA_showAIOnThumb
// @namespace    http://phi.pf-control.de
// @version      2024-05-10_2
// @description  Display on thumbnail that art was generated using AI!
// @author       Dediggefedde
// @match        *://*.deviantart.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=deviantart.com
// @grant        GM_addStyle
// @grant   	 GM.setValue
// @grant   	 GM.getValue
// @license      MIT; http://opensource.org/licenses/MIT
// @sandbox      DOM
// @noframes
// ==/UserScript==

(function() {
	'use strict';

	let settings = { //default setting values
			onlyOnHover:  false,                    //bool, true: check all thumbs for AI automatically; false: check only on hover
			AITags:       ["ai","aiart","dreamup","ai_generated","stable_diffusion"], //tags that will mark an art as AI in addition to dA's own "created with AI tools" marker
			hideAIThumbs: false,                    //remove AI thumbs instead of marking them
			// moveOtherThumbs:false, //not implemented
			autoIgnore:false,
			matureHandling:1 //{0:ignore, 1:blurr, 2:remove}
	};

	let bounceInterval =100; //int [ms], avoid multiple activation at once, minimum time before activating script again

	//helper variables
	let fetchedIDs={};
	let fetchedMatures={};
	let debounceTimeout = null; // Debounce-Timer

	//style for isAIgenerated!
	//checked items have the attribute. The value is "1" if they are AI generated, otherwise "0"
	//here: AI text with white background and blue circle over the thumbnail with 70% transparency
	GM_addStyle(`
	[isAIGenerated="1"] {
		/*thumbnail-link detected as AI*/
		position: relative;
	}

	[isAIGenerated="1"]::after {
		/* AI tag image above thumbnail*/
		content: "AI" !important;
		position: relative !important;
		left: 50% !important;
		top: -95% !important;
		padding: 5px !important;
		background: radial-gradient(ellipse at center, rgb(var(--g-bg-primary-rgb, 255, 255, 255)) 0%, rgb(var(--g-bg-primary-rgb, 255, 255, 255)) 60%, rgb(var(--green4-rgb, 0, 230, 150)) 65%, rgb(var(--green4-rgb, 0, 230, 150)) 70%, rgba(0, 0, 0, 0) 75%) !important;
		color: var(--g-typography-primary, black) !important;
		width: 15px !important;
		height: 15px !important;
		line-height: 15px !important;
		display: block !important;
		filter: opacity(70%) !important;
		transform: translateX(-50%) !important;
	}
	
	[isMature="2"] {
		visibility:hidden;
	}
	[isMature="1"]>* {
		filter: blur(10px);
	}
	[isMature="1"]:hover>* {
		filter: none;
	}
	[isMature="1"]::after {
		content: "M" !important;
		position: relative !important;
		left: 50% !important;
		top: -95% !important;
		padding: 5px !important;
		width: 15px !important;
		height: 15px !important;
		line-height: 15px !important;
		display: block !important;
		filter: opacity(70%) !important;
		transform: translateX(-50%) !important;
		background: radial-gradient(ellipse at center, rgb(var(--g-bg-primary-rgb, 255, 255, 255)) 0%, rgb(var(--g-bg-primary-rgb, 255, 255, 255)) 60%, red 65%, red 70%, rgba(0, 0, 0, 0) 75%) !important;
		color: var(--g-typography-primary, black) !important;
	}
	[isMature="1"]:hover::after{
		content: none!important;
	}
	
	.dA_saiot_oldwatch [isAIGenerated="1"] {
		/*thumbnail link in /notifications/watch*/
		position: absolute;
	}

	.dA_saiot_oldwatch [isAIGenerated="1"]::after {
		/* AI tag in /notifications/watch*/
		top: 5% !important;
		visibility: visible;
	}

	#dA_saiot_notify p {
		/* Notification text*/
		font-weight: bold;
		text-align: center;
		margin: 0;
		color: var(--g-typography-secondary, black);
	}

	#dA_saiot_notify {
		/* Notification Container*/
		position: fixed;
		width: 400px;
		display: block;
		top: 0%;
		background-color: var(--g-bg-tertiary, white);
		padding: 10px;
		border-radius: 0 10px 10px 0;
		border: 1px solid var(--g-divider1, black);
		box-shadow: 1px 1px 2px var(--g-bg-primary, black);
		transition: left;
		transition-duration: 0.5s;
		transform: translateY(100%) translateY(10px);
		color: var(--g-typography-primary, black);
	}

	div.settings_form label {
		cursor: pointer;
	}
		
	.da_saiot_radiogroup {
    display: flex;
    gap: 10px; /* Abstand zwischen den Radio-Buttons */
    align-items: center; /* Vertikale Zentrierung */
	}

	.da_saiot_radiogroup input {
			margin-right: 5px; /* Abstand zwischen Radio-Button und Label */
	}

	.da_saiot_radiogroup label {
			margin-right: 20px; /* Abstand zwischen den Labeln */
	}

	/*Settings form headings*/
`);

	let msgbox,viewtimer;
	let thumbs;

	function notify(text){
			msgbox.innerHTML="<p>dA_showAiOnThumb</p>"+text;
			msgbox.style.left="0px";
			if(viewtimer!=null)clearTimeout(viewtimer);
			viewtimer=setTimeout(()=>{msgbox.style.left="-450px";},2000);
	}

	//request deviation data. deviation id, username and type ("art") is in the url.
	//include_session=false necessary
	function requestDevData(devID, username,type){
			let token=document.querySelector("input[name=validate_token]").value;

			return fetch(`https://www.deviantart.com/_puppy/dadeviation/init?deviationid=${devID}&username=${username}&type=${type}&include_session=false&csrf_token=${token}`, {
					method: "GET",
					headers: {
							"accept": 'application/json, text/plain, */*',
							"content-type": 'application/json;charset=UTF-8'
					},
					credentials: 'include' // Cookies!
			}).then(async (response) => {
					if (!response.ok) {
							throw response; // HTTP-Statuscode
					}
					try{
							const result = await response.json(); // JSON parsen
							if (result.deviation === undefined || result.error !== undefined) {
									throw result;
							}
							return result; // Erfolgreiche Antwort
					}catch(ex){
							console.log("dA_showAiOnThumb error: parsing resonce",response);
							throw response;
					}
			});
	}

	//uses the da_ignore script (v2.2) to add AI making usernames automatically to an ignore list
	function autoignoreNam(el){
			if(!settings.autoIgnore)return;
			let nam=el.parentNode.querySelector("[data-username]").dataset.username;
			let ignoreEl=document.createElement("div");
			ignoreEl.classList.add("dA_ignore_externalAddName");
			ignoreEl.innerHTML=nam;
			document.body.appendChild(ignoreEl);
	}

	//takes a thumbnail link element, extracts information, triggers request and adds isAIGenerated attribute
	function checkAIGenerated(el){
			if(el.hasAttribute("isAIGenerated"))return; //skip for items already checked

			let handled=false;

			let url=el.href;
			let dats=/deviantart.com\/(.*?)\/(.*?)\/.*?-(\d+)$/gi.exec(url); //[match, artis, type, id] extracted from URL
			if(!dats)return;

			if(fetchedIDs[dats[3]]!==undefined){ //cached results for dev ID
				el.setAttribute("isAIGenerated",fetchedIDs[dats[3]]);
				handled=true;
			}
			if( settings.matureHandling>0 && fetchedMatures[dats[3]]!==undefined){
					el.setAttribute("isMature",fetchedMatures[dats[3]]);
					handled=true;
			}
			
			if(handled>0)return;

			requestDevData(dats[3],dats[1],dats[2]).then((res)=>{ //request of extented data from PUPPY-API
					try{ //responce might be successfull but have other object members

							if(res.deviation.isAiGenerated){ //extract and add information
									el.setAttribute("isAIGenerated","1"); //set element information
									fetchedIDs[dats[3]]="1"; //cache result for deviation id.
									autoignoreNam(el);
							}else{
									el.setAttribute("isAIGenerated","0");
									fetchedIDs[dats[3]]="0";
							}

							if(res.deviation.isMature){
									el.setAttribute("isMature",settings.matureHandling);
									fetchedMatures[dats[3]]=settings.matureHandling;
							}else{
									fetchedMatures[dats[3]]="0";
							}

							if(res.deviation.extended.tags!=null){
									res.deviation.extended.tags.forEach(tg=>{
											if(settings.AITags.includes(tg.name)){
													el.setAttribute("isAIGenerated","1"); //set element information
													fetchedIDs[dats[3]]="1"; //cache result for deviation id.
													autoignoreNam(el);
													//  moveAIImgs(el);
											}});
							}

					}catch(ex){
							console.log("dA_showAIOnThumb Error 2",ex,res); //error code 2, exception and return from server
					}
			})
					.catch(err=>{
					console.log("dA_showAIOnThumb Error 3",err); //error code 3, error code from promise call
			});
	}

	function init(){ //called on DOM change

			if(window.location.href.indexOf("/notifications/watch") > -1) document.body.classList.add("dA_saiot_oldwatch");
			else document.body.classList.remove("dA_saiot_oldwatch");

			if (location.href.indexOf('https://www.deviantart.com/settings') == 0 && document.getElementById("dA_showAiOnThumb_Options")==null) {

					if(!document.querySelector("#dA_saiot_notify")){
							msgbox=document.createElement("div");
							msgbox.id="dA_saiot_notify";
							msgbox.style.left="-450px";
							document.body.append(msgbox);
					}

					let menuPoint = document.createElement("li");
					menuPoint.innerHTML='<a href="#">AI Thumbnail</a>';
					menuPoint.id="dA_showAiOnThumb_Options";

					document.getElementById("settings_public").parentNode.after(menuPoint);

					menuPoint.firstChild.addEventListener("click",(ev)=>{
							document.querySelector("a.active").classList.remove("active");
							ev.target.classList.add("active");
							document.querySelector('div.settings_form').innerHTML=`
		<div class="fooview ch">
		<div class="fooview-inner">
			<h3>dA_showAIOnThumb Settings</h3>
			<div class="altaltview altaltview-wider">

				<div class="row">
				<input ${ settings.onlyOnHover ? 'checked="checked"' : '' } type="checkbox" id="da_saiot_checkhover" class="icheckbox">
				<label for="da_saiot_checkhover" class="l">Mark AI thumbs only on hover</label>
				<br><small>Check and mark AI images only when moving the cursor over the Thumbnail. Can improve performance on slower computers/connections. Otherwise all thumbnail are checked and marked when the appear.</small>
				</div>

				<div class="row">
				<input value='${ settings.AITags?settings.AITags.join(","):'' }' type="text" id="da_saiot_AITags" class="itext_uplifted" />
				<label for="da_saiot_AITags" class="l">Tags that mark deviations as AI</label>
				<br><small>Comma-separated. Deviations with tags in this list will be marked as AI-generated. If Deviantart marks a submission as AI-generated/assisted on its own, it will be marked in any case.</small>
				</div>

				<div class="row">
				<input ${ settings.hideAIThumbs ? 'checked="checked"' : '' } type="checkbox" id="da_saiot_removeAI" class="icheckbox">
				<label for="da_saiot_removeAI" class="l">Remove AI thumbs instead of marking them</label>
				<br><small>Instead of marking AI thumbnails, this will remove them and leave an empty space in place.</small>
				</div>

				<div class="row">
					<label class="l">Handle Mature Submissions</label>
					<div class='da_saiot_radiogroup'>
						<input type="radio" id="mature_ignore" name="matureSetting" value="0" 
								${settings.matureHandling === 0 ? 'checked="checked"' : ''}>
						<label for="mature_ignore">Ignore</label><br>
						<input type="radio" id="mature_blur" name="matureSetting" value="1" 
								${settings.matureHandling === 1 ? 'checked="checked"' : ''}>
						<label for="mature_blur">Blur</label><br>
						<input type="radio" id="mature_hide" name="matureSetting" value="2" 
								${settings.matureHandling === 2 ? 'checked="checked"' : ''}>
						<label for="mature_hide">Hide</label>
					</div>
					<small>Choose how to handle mature submissions: Ignore, blur them, or hide them completely.</small>
				</div>

				<div class="row">
				<input ${ settings.autoIgnore ? 'checked="checked"' : '' } type="checkbox" id="da_saiot_autoIgnore" class="icheckbox">
				<label for="da_saiot_removeAI" class="l">Automatically ignore users that post AI images</label>
				<br><small>This requires the userscript <a href='https://www.deviantart.com/dediggefedde/art/dA-Ignore-455554874'>dA_ignore</a>! It will add users that have posted AI art automatically to the ignore-list of dA_ignore.</small>
				</div>

			</div>

			<div class=" buttons ch hh " id="submit">
				<div style="text-align:right" class="rr">
					<a class="smbutton smbutton-green" href="javascript:void(0)"><span id="da_saiot_saveSettings">Save</span></a>
				</div>
			</div>

		</div>
		</div>
		`;
							document.getElementById('da_saiot_saveSettings').addEventListener("click",(ev)=> {
									settings.onlyOnHover = document.getElementById("da_saiot_checkhover").checked;
									settings.hideAIThumbs = document.getElementById("da_saiot_removeAI").checked;
									settings.autoIgnore = document.getElementById("da_saiot_autoIgnore").checked;
									settings.AITags = document.getElementById("da_saiot_AITags").value.split(',').map((el)=>{return el.trim();});
									settings.matureHandling = parseInt(document.querySelector('input[name="matureSetting"]:checked')?.value??1);
									setTimeout(() => {
											GM.setValue('settings',JSON.stringify(settings));
											notify("Settings saved!");
									}, 0);
							},false);

					},false);
			}


			//check all thumbs which were not already checked
			thumbs=[...document.querySelectorAll(`[data-testid="thumb"]:not([da_showaionthumb])`)];
			thumbs.forEach(el=>{
					let thmb=el.querySelector("a:not([data-username])");
					if(!thmb && el.tagName=="A")thmb=el;
					if(!thmb && el.parentNode.tagName=="A")thmb=el.parentNode;
					if(!thmb)thmb=el.parentNode.querySelector("a");
					if(!thmb)thmb=el.parentNode.parentNode.querySelector("a");
					if(!thmb)thmb=el.parentNode.parentNode.parentNode.querySelector("a");
					if(!thmb)return;

					if(!thmb.style.height)thmb.style.height=thmb.offsetHeight+"px"; //workaround for using "position:relative;top:-95%;"

					el.setAttribute("da_showaionthumb",""); //mark thumb as checked
					if(!settings.onlyOnHover){ //check all immediatelly
							checkAIGenerated(thmb); //function will cancel if already checked
					}else{ //check on mouseover
							thmb.addEventListener("mouseenter",(ev=>{
									checkAIGenerated(ev.target);
							}),false); //no bubbling
					}
			});

	}

	//delayed debounce to avoid calling it multiple times at once
	function debouncer(){
			if (debounceTimeout) { //within bounce interval
					clearTimeout(debounceTimeout);
			}
			debounceTimeout = setTimeout(() => {
					init();
					debounceTimeout = null;
			}, bounceInterval);
	}

	//loading settings
	GM.getValue("settings").then((res)=>{
			if(res==null)return;
			try{
					let savedSettings=JSON.parse(res);
					Object.entries(savedSettings).forEach(([key,val])=>{settings[key]=val});
			}catch(ex){
					console.log("dA_showAiOnThumb Error: loading settings",ex);
			}
			if(settings.hideAIThumbs){
					GM_addStyle("div:has(>[isAIGenerated='1']){display:none!important;}");
			}
	}).finally(()=>{
			const observer = new MutationObserver(debouncer);
			observer.observe(document.body,{ childList: true, subtree: true });
			debouncer();
	});

})();