Show Stable Diffusion generated image's metadata
// ==UserScript== // @name Stable Diffusion image metadata viewer // @namespace https://github.com/himuro-majika // @version 0.2.5 // @description Show Stable Diffusion generated image's metadata // @description:ja Stable Diffusionで生成された画像の埋め込みメタデータを表示します // @description:ko 표시 Stable Diffusion 생성된 이미지의 메타데이터 // @description:de Metadaten des durch Stabile Diffusion erzeugten Bildes anzeigen // @description:es Mostrar los metadatos de la imagen generada por Stable Diffusion // @description:fr Afficher les métadonnées de l'image générée par la Stable Diffusion // @description:it Mostrare i metadati dell'immagine generata da Stable Diffusion // @description:zh-CN 显示 Stable Diffusion 生成的图像的元数据 // @description:zh-SG 显示 Stable Diffusion 生成的图像的元数据 // @description:zh-TW 顯示 Stable Diffusion 生成圖像的元數據 // @description:zh-HK 顯示 Stable Diffusion 生成圖像的元數據 // @author himuro_majika // @match http://*/*.png // @match http://*/*.jpg // @match http://*/*.jpeg // @match http://*/*.webp // @match https://*/*.png // @match https://*/*.jpg // @match https://*/*.jpeg // @match https://*/*.webp // @match file:///*.png // @match file:///*.jpg // @match file:///*.jpeg // @match file:///*.webp // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/exif-reader.min.js // @license MIT // @grant GM_xmlhttpRequest // @grant GM_addElement // ==/UserScript== (function() { 'use strict'; const img = document.images[0]; if (!img) return; readExif(img.src); function readExif(url) { fetch(url).then((response) => response.arrayBuffer()) .then((fileBuffer) => loadTags(fileBuffer)) .catch(() => { GM_xmlhttpRequest({ method: "GET", url: url, responseType: "arraybuffer", onload: (res) => { loadTags(res.response); }, onerror: (e) => { console.log(e); return; } }); }); } function loadTags(fileBuffer) { if (!fileBuffer) return; try { const tags = ExifReader.load(fileBuffer, {expanded: true}); const prompt = getPrompt(tags); makeData(prompt); } catch(e) { console.log(e); } } function getPrompt(tags) { // console.dir(JSON.parse(JSON.stringify(tags))); let com = "" let prompt = { positive: "", negative: "", others: "" } // Exif if (tags.exif && tags.exif.UserComment) { com = decodeUnicode(tags.exif.UserComment.value); try { prompt.positive = com.match(/([^]+)Negative prompt: /)[1]; prompt.negative = com.match(/Negative prompt: ([^]+)Steps: /)[1]; prompt.others = com.match(/(Steps: [^]+)/)[1]; } catch (e) { console.log(com); prompt.others = com; } return prompt; } // iTXt if (!tags.pngText) return; // A1111 if (tags.pngText.parameters) { com = tags.pngText.parameters.description; try { prompt.positive = com.match(/([^]+)Negative prompt: /)[1]; prompt.negative = com.match(/Negative prompt: ([^]+)Steps: /)[1]; prompt.others = com.match(/(Steps: [^]+)/)[1]; } catch (e) { console.log(com); prompt.others = com; } return prompt; } // NMKD if (tags.pngText.Dream) { com = tags.pngText.Dream.description; com += tags.pngText["sd-metadata"] ? "\r\n" + tags.pngText["sd-metadata"].description : ""; try { prompt.positive = com.match(/([^]+?)\[[^[]+\]/)[1]; prompt.negative = com.match(/\[([^[]+?)(\]|Steps: )/)[1]; prompt.others = com.match(/\]([^]+)/)[1]; } catch (e) { console.log(com); prompt.others = com; } return prompt; } // NAI if (tags.pngText.Comment) { const comment = tags.pngText.Comment.description.replaceAll(/\\u00a0/g, " "); const positive = tags.pngText.Description ? tags.pngText.Description.description : JSON.parse(comment).prompt; const negative= JSON.parse(comment).uc; let others = comment + "\r\n"; others += tags.pngText.Software ? tags.pngText.Software.description + "\r\n" : ""; others += tags.pngText.Title ? tags.pngText.Title.description + "\r\n" : ""; others += tags.pngText.Source ? tags.pngText.Source.description : ""; others += tags.pngText["Generation time"] ? "\r\nGeneration time: " + tags.pngText["Generation time"].description : ""; prompt.positive = positive; prompt.negative = negative; prompt.others = others; return prompt; } Object.keys(tags.pngText).forEach(tag => { com += tags.pngText[tag].description; }); // console.log(com); prompt.others = com; return prompt; } function decodeUnicode(array) { const plain = array.map(t => t.toString(16).padStart(2, "0")).join(""); if (!plain.match(/^554e49434f44450/)) { // console.log(array); return; } const hex = plain.replace(/^554e49434f44450[0-9]/, "").replace(/[0-9a-f]{4}/g, ",0x$&").replace(/^,/, ""); const arhex = hex.split(","); let decode = ""; arhex.forEach(v => { decode += String.fromCodePoint(v); }) return decode; } function makeButton() { addStyle(); const button = document.createElement("button"); button.id = "_gm_simv_open_button"; button.innerHTML = "Show SD metadata"; button.addEventListener("click", showModal); document.body.insertBefore(button, img); } function makeData(prompt) { const positive = prompt.positive; const negative = prompt.negative; const others = prompt.others; if (!positive && !negative && !others) return; makeButton(); const container = document.createElement("div"); container.id ="_gm_simv_container"; const copybutton = location.protocol == "http:" ? "" : `<button class="_gm_simv_copybutton" type="button">copy</button>`; container.innerHTML = ` <div class="_gm_simv_modal"> <div class="_gm_simv_modal_title"> <h5>Stable Diffusion image metadata</h5> <button id="_gm_simv_closebutton" type="button">❎</button> </div> <div class="_gm_simv_modal_body"> <div> <div class="_gm_simv_section"> <label>Prompt</label> ${copybutton} </div> <textarea rows="6">${positive}</textarea> </div> <div> <div class="_gm_simv_section"> <label>Negative Prompt</label> ${copybutton} </div> <textarea rows="6">${negative}</textarea> </div> <div> <div class="_gm_simv_section"> <label>Other info</label> ${copybutton} </div> <textarea rows="6">${others}</textarea> </div> </div> </div>`; document.body.insertBefore(container, img); document.getElementById("_gm_simv_closebutton").addEventListener("click", closeModal); document.querySelectorAll("._gm_simv_copybutton").forEach(item => { item.addEventListener("click", copyText); }); } function addStyle() { GM_addElement("style", { textContent: ` img { display: block; margin: auto; } #_gm_simv_open_button { position: absolute; } #_gm_simv_container { display: none; width: 100%; } ._gm_simv_modal { color: #eee; width: 800px; max-width: 100%; margin-left: auto; margin-right: auto; z-index: 2; position: fixed; inset: auto 0; margin: auto; background: #000a; border-radius: 6px; box-shadow: #000 0px 0px 2px; } ._gm_simv_modal_title { display:flex; justify-content: space-between; padding: 0px 10px; } ._gm_simv_modal_body { padding: 10px; } #_gm_simv_closebutton { cursor: pointer; height: 4em; opacity: 0.5; padding: 1em; background: #0000; border: 0; width: 3em; } ._gm_simv_section { display:flex; justify-content: space-between; } ._gm_simv_modal textarea { display: block; width: 774px; max-width: 100%; background: #cccc; border: 0px none; margin: 10px 0; } ._gm_simv_copybutton { cursor: pointer; opacity: 0.5; }`}); } function showModal() { document.getElementById("_gm_simv_container").style.display = "block"; } function closeModal() { document.getElementById("_gm_simv_container").style.display = "none"; } function copyText() { const value = this.parentNode.parentNode.querySelector("textarea").value; navigator.clipboard.writeText(value); } })();
