ui.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. // various functions for interaction with ui.py not large enough to warrant putting them in separate files
  2. function set_theme(theme) {
  3. var gradioURL = window.location.href;
  4. if (!gradioURL.includes('?__theme=')) {
  5. window.location.replace(gradioURL + '?__theme=' + theme);
  6. }
  7. }
  8. function all_gallery_buttons() {
  9. var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
  10. var visibleGalleryButtons = [];
  11. allGalleryButtons.forEach(function(elem) {
  12. if (elem.parentElement.offsetParent) {
  13. visibleGalleryButtons.push(elem);
  14. }
  15. });
  16. return visibleGalleryButtons;
  17. }
  18. function selected_gallery_button() {
  19. var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
  20. var visibleCurrentButton = null;
  21. allCurrentButtons.forEach(function(elem) {
  22. if (elem.parentElement.offsetParent) {
  23. visibleCurrentButton = elem;
  24. }
  25. });
  26. return visibleCurrentButton;
  27. }
  28. function selected_gallery_index() {
  29. var buttons = all_gallery_buttons();
  30. var button = selected_gallery_button();
  31. var result = -1;
  32. buttons.forEach(function(v, i) {
  33. if (v == button) {
  34. result = i;
  35. }
  36. });
  37. return result;
  38. }
  39. function extract_image_from_gallery(gallery) {
  40. if (gallery.length == 0) {
  41. return [null];
  42. }
  43. if (gallery.length == 1) {
  44. return [gallery[0]];
  45. }
  46. var index = selected_gallery_index();
  47. if (index < 0 || index >= gallery.length) {
  48. // Use the first image in the gallery as the default
  49. index = 0;
  50. }
  51. return [gallery[index]];
  52. }
  53. function args_to_array(args) {
  54. var res = [];
  55. for (var i = 0; i < args.length; i++) {
  56. res.push(args[i]);
  57. }
  58. return res;
  59. }
  60. function switch_to_txt2img() {
  61. gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
  62. return args_to_array(arguments);
  63. }
  64. function switch_to_img2img_tab(no) {
  65. gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
  66. gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
  67. }
  68. function switch_to_img2img() {
  69. switch_to_img2img_tab(0);
  70. return args_to_array(arguments);
  71. }
  72. function switch_to_sketch() {
  73. switch_to_img2img_tab(1);
  74. return args_to_array(arguments);
  75. }
  76. function switch_to_inpaint() {
  77. switch_to_img2img_tab(2);
  78. return args_to_array(arguments);
  79. }
  80. function switch_to_inpaint_sketch() {
  81. switch_to_img2img_tab(3);
  82. return args_to_array(arguments);
  83. }
  84. function switch_to_extras() {
  85. gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
  86. return args_to_array(arguments);
  87. }
  88. function get_tab_index(tabId) {
  89. var res = 0;
  90. gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i) {
  91. if (button.className.indexOf('selected') != -1) {
  92. res = i;
  93. }
  94. });
  95. return res;
  96. }
  97. function create_tab_index_args(tabId, args) {
  98. var res = [];
  99. for (var i = 0; i < args.length; i++) {
  100. res.push(args[i]);
  101. }
  102. res[0] = get_tab_index(tabId);
  103. return res;
  104. }
  105. function get_img2img_tab_index() {
  106. let res = args_to_array(arguments);
  107. res.splice(-2);
  108. res[0] = get_tab_index('mode_img2img');
  109. return res;
  110. }
  111. function create_submit_args(args) {
  112. var res = [];
  113. for (var i = 0; i < args.length; i++) {
  114. res.push(args[i]);
  115. }
  116. // As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
  117. // This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
  118. // I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
  119. // If gradio at some point stops sending outputs, this may break something
  120. if (Array.isArray(res[res.length - 3])) {
  121. res[res.length - 3] = null;
  122. }
  123. return res;
  124. }
  125. function showSubmitButtons(tabname, show) {
  126. gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
  127. gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
  128. }
  129. function showRestoreProgressButton(tabname, show) {
  130. var button = gradioApp().getElementById(tabname + "_restore_progress");
  131. if (!button) return;
  132. button.style.display = show ? "flex" : "none";
  133. }
  134. function submit() {
  135. showSubmitButtons('txt2img', false);
  136. var id = randomId();
  137. localStorage.setItem("txt2img_task_id", id);
  138. requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
  139. showSubmitButtons('txt2img', true);
  140. localStorage.removeItem("txt2img_task_id");
  141. showRestoreProgressButton('txt2img', false);
  142. });
  143. var res = create_submit_args(arguments);
  144. res[0] = id;
  145. return res;
  146. }
  147. function submit_img2img() {
  148. showSubmitButtons('img2img', false);
  149. var id = randomId();
  150. localStorage.setItem("img2img_task_id", id);
  151. requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
  152. showSubmitButtons('img2img', true);
  153. localStorage.removeItem("img2img_task_id");
  154. showRestoreProgressButton('img2img', false);
  155. });
  156. var res = create_submit_args(arguments);
  157. res[0] = id;
  158. res[1] = get_tab_index('mode_img2img');
  159. return res;
  160. }
  161. function restoreProgressTxt2img() {
  162. showRestoreProgressButton("txt2img", false);
  163. var id = localStorage.getItem("txt2img_task_id");
  164. id = localStorage.getItem("txt2img_task_id");
  165. if (id) {
  166. requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
  167. showSubmitButtons('txt2img', true);
  168. }, null, 0);
  169. }
  170. return id;
  171. }
  172. function restoreProgressImg2img() {
  173. showRestoreProgressButton("img2img", false);
  174. var id = localStorage.getItem("img2img_task_id");
  175. if (id) {
  176. requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
  177. showSubmitButtons('img2img', true);
  178. }, null, 0);
  179. }
  180. return id;
  181. }
  182. onUiLoaded(function() {
  183. showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
  184. showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
  185. });
  186. function modelmerger() {
  187. var id = randomId();
  188. requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
  189. var res = create_submit_args(arguments);
  190. res[0] = id;
  191. return res;
  192. }
  193. function ask_for_style_name(_, prompt_text, negative_prompt_text) {
  194. var name_ = prompt('Style name:');
  195. return [name_, prompt_text, negative_prompt_text];
  196. }
  197. function confirm_clear_prompt(prompt, negative_prompt) {
  198. if (confirm("Delete prompt?")) {
  199. prompt = "";
  200. negative_prompt = "";
  201. }
  202. return [prompt, negative_prompt];
  203. }
  204. var promptTokecountUpdateFuncs = {};
  205. function recalculatePromptTokens(name) {
  206. if (promptTokecountUpdateFuncs[name]) {
  207. promptTokecountUpdateFuncs[name]();
  208. }
  209. }
  210. function recalculate_prompts_txt2img() {
  211. recalculatePromptTokens('txt2img_prompt');
  212. recalculatePromptTokens('txt2img_neg_prompt');
  213. return args_to_array(arguments);
  214. }
  215. function recalculate_prompts_img2img() {
  216. recalculatePromptTokens('img2img_prompt');
  217. recalculatePromptTokens('img2img_neg_prompt');
  218. return args_to_array(arguments);
  219. }
  220. var opts = {};
  221. onUiUpdate(function() {
  222. if (Object.keys(opts).length != 0) return;
  223. var json_elem = gradioApp().getElementById('settings_json');
  224. if (json_elem == null) return;
  225. var textarea = json_elem.querySelector('textarea');
  226. var jsdata = textarea.value;
  227. opts = JSON.parse(jsdata);
  228. executeCallbacks(optionsChangedCallbacks); /*global optionsChangedCallbacks*/
  229. Object.defineProperty(textarea, 'value', {
  230. set: function(newValue) {
  231. var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
  232. var oldValue = valueProp.get.call(textarea);
  233. valueProp.set.call(textarea, newValue);
  234. if (oldValue != newValue) {
  235. opts = JSON.parse(textarea.value);
  236. }
  237. executeCallbacks(optionsChangedCallbacks);
  238. },
  239. get: function() {
  240. var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
  241. return valueProp.get.call(textarea);
  242. }
  243. });
  244. json_elem.parentElement.style.display = "none";
  245. function registerTextarea(id, id_counter, id_button) {
  246. var prompt = gradioApp().getElementById(id);
  247. var counter = gradioApp().getElementById(id_counter);
  248. var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
  249. if (counter.parentElement == prompt.parentElement) {
  250. return;
  251. }
  252. prompt.parentElement.insertBefore(counter, prompt);
  253. prompt.parentElement.style.position = "relative";
  254. promptTokecountUpdateFuncs[id] = function() {
  255. update_token_counter(id_button);
  256. };
  257. textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
  258. }
  259. registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
  260. registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
  261. registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
  262. registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
  263. var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
  264. var settings_tabs = gradioApp().querySelector('#settings div');
  265. if (show_all_pages && settings_tabs) {
  266. settings_tabs.appendChild(show_all_pages);
  267. show_all_pages.onclick = function() {
  268. gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
  269. if (elem.id == "settings_tab_licenses") {
  270. return;
  271. }
  272. elem.style.display = "block";
  273. });
  274. };
  275. }
  276. });
  277. onOptionsChanged(function() {
  278. var elem = gradioApp().getElementById('sd_checkpoint_hash');
  279. var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
  280. var shorthash = sd_checkpoint_hash.substring(0, 10);
  281. if (elem && elem.textContent != shorthash) {
  282. elem.textContent = shorthash;
  283. elem.title = sd_checkpoint_hash;
  284. elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
  285. }
  286. });
  287. let txt2img_textarea, img2img_textarea = undefined;
  288. let wait_time = 800;
  289. let token_timeouts = {};
  290. function update_txt2img_tokens(...args) {
  291. update_token_counter("txt2img_token_button");
  292. if (args.length == 2) {
  293. return args[0];
  294. }
  295. return args;
  296. }
  297. function update_img2img_tokens(...args) {
  298. update_token_counter(
  299. "img2img_token_button"
  300. );
  301. if (args.length == 2) {
  302. return args[0];
  303. }
  304. return args;
  305. }
  306. function update_token_counter(button_id) {
  307. if (token_timeouts[button_id]) {
  308. clearTimeout(token_timeouts[button_id]);
  309. }
  310. token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
  311. }
  312. function restart_reload() {
  313. document.body.innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
  314. var requestPing = function() {
  315. requestGet("./internal/ping", {}, function(data) {
  316. location.reload();
  317. }, function() {
  318. setTimeout(requestPing, 500);
  319. });
  320. };
  321. setTimeout(requestPing, 2000);
  322. return [];
  323. }
  324. // Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
  325. // will only visible on web page and not sent to python.
  326. function updateInput(target) {
  327. let e = new Event("input", {bubbles: true});
  328. Object.defineProperty(e, "target", {value: target});
  329. target.dispatchEvent(e);
  330. }
  331. var desiredCheckpointName = null;
  332. function selectCheckpoint(name) {
  333. desiredCheckpointName = name;
  334. gradioApp().getElementById('change_checkpoint').click();
  335. }
  336. function currentImg2imgSourceResolution(w, h, scaleBy) {
  337. var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
  338. return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
  339. }
  340. function updateImg2imgResizeToTextAfterChangingImage() {
  341. // At the time this is called from gradio, the image has no yet been replaced.
  342. // There may be a better solution, but this is simple and straightforward so I'm going with it.
  343. setTimeout(function() {
  344. gradioApp().getElementById('img2img_update_resize_to').click();
  345. }, 500);
  346. return [];
  347. }
  348. function setRandomSeed(elem_id) {
  349. var input = gradioApp().querySelector("#" + elem_id + " input");
  350. if (!input) return [];
  351. input.value = "-1";
  352. updateInput(input);
  353. return [];
  354. }
  355. function switchWidthHeight(tabname) {
  356. var width = gradioApp().querySelector("#" + tabname + "_width input[type=number]");
  357. var height = gradioApp().querySelector("#" + tabname + "_height input[type=number]");
  358. if (!width || !height) return [];
  359. var tmp = width.value;
  360. width.value = height.value;
  361. height.value = tmp;
  362. updateInput(width);
  363. updateInput(height);
  364. return [];
  365. }