Stable Diffusion image metadata viewer

Show Stable Diffusion generated image's metadata

目前為 2023-02-11 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Stable Diffusion image metadata viewer
  3. // @namespace https://github.com/himuro-majika
  4. // @version 0.1.1
  5. // @description Show Stable Diffusion generated image's metadata
  6. // @author himuro_majika
  7. // @match http://*/*.png
  8. // @match http://*/*.jpg
  9. // @match http://*/*.jpeg
  10. // @match https://*/*.png
  11. // @match https://*/*.jpg
  12. // @match https://*/*.jpeg
  13. // @match file:///*.png
  14. // @match file:///*.jpg
  15. // @match file:///*.jpeg
  16. // @require https://cdn.jsdelivr.net/npm/exif-js@2.3.0/exif.min.js
  17. // @license MIT
  18. // @grant none
  19. // ==/UserScript==
  20.  
  21. (function() {
  22. 'use strict';
  23.  
  24. const img = document.images[0];
  25.  
  26. if (!getImgData(img)) getExif(img);
  27.  
  28. async function getImgData(img) {
  29. const imgtext = (await(await fetch(img.src)).text());
  30. // console.log(imgtext);
  31. const text = imgtext.match(/(?<=Xt(?:parameters|Description|Comment)\0*)([^\0]+)/ug);
  32. if (!text) return;
  33. // console.log(text);
  34. makeButton();
  35. makeData(text.join(""));
  36. }
  37.  
  38. function getExif(img) {
  39. EXIF.getData(img, function() {
  40. const comment = EXIF.getTag(this, "UserComment");
  41. if (!comment) return;
  42.  
  43. const decode = decodeUnicode(comment);
  44. if (!decode) return;
  45.  
  46. makeButton();
  47. makeData(decode);
  48. });
  49. }
  50.  
  51. function decodeUnicode(array) {
  52. const plain = array.map(t => t.toString(16).padStart(2, "0")).join("");
  53. if (!plain.match(/^554e49434f44450/)) {
  54. // console.log(array);
  55. return;
  56. }
  57. const hex = plain.replace(/^554e49434f44450[0-9]/, "").replace(/[0-9a-f]{4}/g, ",0x$&").replace(/^,/, "");
  58. const arhex = hex.split(",");
  59. let decode = "";
  60. arhex.forEach(v => {
  61. decode += String.fromCodePoint(v);
  62. })
  63. return decode;
  64. }
  65.  
  66. function makeButton() {
  67. const button = document.createElement("button");
  68. button.innerHTML = "Show SD metadata";
  69. button.addEventListener("click", showModal);
  70. document.body.insertBefore(button, img);
  71. }
  72.  
  73. function makeData(text) {
  74. const positive = extractPositivePrompt(text);
  75. const negative = extractNegativePrompt(text);
  76. const others = extractOthers(text);
  77. const container = document.createElement("div");
  78. container.id ="_gm_sipv_container";
  79. container.style.display = "none";
  80. container.style.width = "100%";
  81. const copybutton = location.protocol == "http:" ? "" : `<button class="_gm_sipv_copybutton" type="button" style="cursor: pointer; opacity: 0.5;">copy</button>`;
  82. container.innerHTML = `
  83. <div style="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;">
  84. <div style="display:flex; justify-content: space-between; padding: 0px 10px;">
  85. <h5>Stable Diffusion image metadata</h5>
  86. <button id="_gm_sipv_closebutton" type="button" style="cursor: pointer; height: 4em; opacity: 0.5; padding: 1em; background: #0000; border: 0; width: 3em;">❎</button>
  87. </div>
  88. <div style="padding: 10px;">
  89. <div>
  90. <div style="display:flex; justify-content: space-between;">
  91. <label>Positive Prompt</label>
  92. ${copybutton}
  93. </div>
  94. <textarea rows="6" style="display: block; width: 774px; max-width: 100%; background: #aaaa; border: 0px none; margin: 10px 0;">${positive}</textarea>
  95. </div>
  96. <div>
  97. <div style="display:flex; justify-content: space-between;">
  98. <label>Negative Prompt</label>
  99. ${copybutton}
  100. </div>
  101. <textarea rows="6" style="display: block; width: 774px; max-width: 100%; background: #aaaa; border: 0px none; margin: 10px 0;">${negative}</textarea>
  102. </div>
  103. <div>
  104. <div style="display:flex; justify-content: space-between;">
  105. <label>Other info</label>
  106. ${copybutton}
  107. </div>
  108. <textarea rows="3" style="display: block; width: 774px; max-width: 100%;background: #aaaa; border: 0px none; margin: 10px 0;">${others}</textarea>
  109. </div>
  110. </div>
  111. </div>`;
  112. document.body.insertBefore(container, img);
  113. document.getElementById("_gm_sipv_closebutton").addEventListener("click", closeModal);
  114. document.querySelectorAll("._gm_sipv_copybutton").forEach(item => {
  115. item.addEventListener("click", copyText);
  116. });
  117. }
  118.  
  119. function extractPositivePrompt(text) {
  120. try {
  121. let matchtext = text.match(/([^]+)Negative prompt: /) || text.match(/([^]+)Steps: /) || text.match(/([^]+){"steps"/);
  122. return matchtext[1];
  123. } catch (e) {
  124. // console.log(text);
  125. return "";
  126. }
  127. }
  128.  
  129. function extractNegativePrompt(text) {
  130. try {
  131. let matchtext = text.match(/Negative prompt: ([^]+)Steps: /) || text.match(/"uc": "([^]+)"}/);
  132. return matchtext[1];
  133. } catch (e) {
  134. // console.log(text);
  135. return "";
  136. }
  137. }
  138.  
  139. function extractOthers(text) {
  140. try {
  141. let matchtext = text.match(/(Steps: [^]+)/) || text.match(/{("steps"[^]+)"uc": /);
  142. return matchtext[1];
  143. } catch (e) {
  144. // console.log(text);
  145. return "";
  146. }
  147. }
  148.  
  149. function showModal() {
  150. document.getElementById("_gm_sipv_container").style.display = "block";
  151. }
  152.  
  153. function closeModal() {
  154. document.getElementById("_gm_sipv_container").style.display = "none";
  155. }
  156.  
  157. function copyText() {
  158. const value = this.parentNode.parentNode.querySelector("textarea").value;
  159. navigator.clipboard.writeText(value);
  160. }
  161.  
  162. })();