From 5034f7d7597685aaa4779296983be0f49f4f991f Mon Sep 17 00:00:00 2001 From: Liam Date: Tue, 27 Sep 2022 15:56:18 -0400 Subject: added token counter next to txt2img and img2img prompts --- javascript/helpers.js | 13 +++++++++++++ javascript/ui.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 javascript/helpers.js (limited to 'javascript') diff --git a/javascript/helpers.js b/javascript/helpers.js new file mode 100644 index 00000000..1b26931f --- /dev/null +++ b/javascript/helpers.js @@ -0,0 +1,13 @@ +// helper functions + +function debounce(func, wait_time) { + let timeout; + return function wrapped(...args) { + let call_function = () => { + clearTimeout(timeout); + func(...args) + } + clearTimeout(timeout); + timeout = setTimeout(call_function, wait_time); + }; +} \ No newline at end of file diff --git a/javascript/ui.js b/javascript/ui.js index 076e9436..77e0f4c1 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -183,4 +183,51 @@ onUiUpdate(function(){ }); json_elem.parentElement.style.display="none" + + let debounce_time = 800 + if (!txt2img_textarea) { + txt2img_textarea = gradioApp().querySelector("#txt2img_prompt > label > textarea") + txt2img_textarea?.addEventListener("input", debounce(submit_prompt_text.bind(null, "txt2img"), debounce_time)) + } + if (!img2img_textarea) { + img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea") + img2img_textarea?.addEventListener("input", debounce(submit_prompt_text.bind(null, "img2img"), debounce_time)) + } }) + + +let txt2img_textarea, img2img_textarea = undefined; +function submit_prompt_text(source, e) { + let prompt_text; + if (source == "txt2img") + prompt_text = txt2img_textarea.value; + else if (source == "img2img") + prompt_text = img2img_textarea.value; + if (!prompt_text) + return; + params = { + method: "POST", + headers: { + "Accept": "application/json", + "Content-type": "application/json" + }, + body: JSON.stringify({data:[prompt_text]}) + } + fetch('http://127.0.0.1:7860/api/tokenize/', params) + .then((response) => response.json()) + .then((data) => { + if (data?.data.length) { + let response_json = data.data[0] + if (elem = gradioApp().getElementById(source+"_token_counter")) { + if (response_json.token_count > response_json.max_length) + elem.classList.add("red"); + else + elem.classList.remove("red"); + elem.innerText = response_json.token_count + "/" + response_json.max_length; + } + } + }) + .catch((error) => { + console.error('Error:', error); + }); +} \ No newline at end of file -- cgit v1.2.1 From e5707b66d6db2c019bfccf66f9ba53e3daaea40b Mon Sep 17 00:00:00 2001 From: Liam Date: Tue, 27 Sep 2022 19:29:53 -0400 Subject: switched the token counter to use hidden buttons instead of api call --- javascript/helpers.js | 13 ----------- javascript/ui.js | 60 +++++++++++++-------------------------------------- 2 files changed, 15 insertions(+), 58 deletions(-) delete mode 100644 javascript/helpers.js (limited to 'javascript') diff --git a/javascript/helpers.js b/javascript/helpers.js deleted file mode 100644 index 1b26931f..00000000 --- a/javascript/helpers.js +++ /dev/null @@ -1,13 +0,0 @@ -// helper functions - -function debounce(func, wait_time) { - let timeout; - return function wrapped(...args) { - let call_function = () => { - clearTimeout(timeout); - func(...args) - } - clearTimeout(timeout); - timeout = setTimeout(call_function, wait_time); - }; -} \ No newline at end of file diff --git a/javascript/ui.js b/javascript/ui.js index fbe5a11d..6cfa5c08 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -182,51 +182,21 @@ onUiUpdate(function(){ }); json_elem.parentElement.style.display="none" - - let debounce_time = 800 - if (!txt2img_textarea) { - txt2img_textarea = gradioApp().querySelector("#txt2img_prompt > label > textarea") - txt2img_textarea?.addEventListener("input", debounce(submit_prompt_text.bind(null, "txt2img"), debounce_time)) - } - if (!img2img_textarea) { - img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea") - img2img_textarea?.addEventListener("input", debounce(submit_prompt_text.bind(null, "img2img"), debounce_time)) - } }) +let wait_time = 800 +let token_timeout; +function txt2img_token_counter(text) { + return update_token_counter("txt2img_token_button", text); +} + +function img2img_token_counter(text) { + return update_token_counter("img2img_token_button", text); +} -let txt2img_textarea, img2img_textarea = undefined; -function submit_prompt_text(source, e) { - let prompt_text; - if (source == "txt2img") - prompt_text = txt2img_textarea.value; - else if (source == "img2img") - prompt_text = img2img_textarea.value; - if (!prompt_text) - return; - params = { - method: "POST", - headers: { - "Accept": "application/json", - "Content-type": "application/json" - }, - body: JSON.stringify({data:[prompt_text]}) - } - fetch('http://127.0.0.1:7860/api/tokenize/', params) - .then((response) => response.json()) - .then((data) => { - if (data?.data.length) { - let response_json = data.data[0] - if (elem = gradioApp().getElementById(source+"_token_counter")) { - if (response_json.token_count > response_json.max_length) - elem.classList.add("red"); - else - elem.classList.remove("red"); - elem.innerText = response_json.token_count + "/" + response_json.max_length; - } - } - }) - .catch((error) => { - console.error('Error:', error); - }); -} \ No newline at end of file +function update_token_counter(button_id, text) { + if (token_timeout) + clearTimeout(token_timeout); + token_timeout = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time); + return []; +} -- cgit v1.2.1 From 7ca9858c4c05b67089b095142ff792e07b5962a9 Mon Sep 17 00:00:00 2001 From: Liam Date: Wed, 28 Sep 2022 09:43:54 -0400 Subject: removed unused import; now using javascript to watch prompt textarea --- javascript/ui.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'javascript') diff --git a/javascript/ui.js b/javascript/ui.js index 6cfa5c08..562d2552 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -182,21 +182,23 @@ onUiUpdate(function(){ }); json_elem.parentElement.style.display="none" + + if (!txt2img_textarea) { + txt2img_textarea = gradioApp().querySelector("#txt2img_prompt > label > textarea"); + txt2img_textarea?.addEventListener("input", () => update_token_counter("txt2img_token_button")); + } + if (!img2img_textarea) { + img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea"); + img2img_textarea?.addEventListener("input", () => update_token_counter("img2img_token_button")); + } }) +let txt2img_textarea, img2img_textarea = undefined; let wait_time = 800 let token_timeout; -function txt2img_token_counter(text) { - return update_token_counter("txt2img_token_button", text); -} - -function img2img_token_counter(text) { - return update_token_counter("img2img_token_button", text); -} -function update_token_counter(button_id, text) { +function update_token_counter(button_id) { if (token_timeout) clearTimeout(token_timeout); token_timeout = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time); - return []; } -- cgit v1.2.1 From f8acbb8f880815facb5037efcd676f2f0d2b5bf4 Mon Sep 17 00:00:00 2001 From: Michoko Date: Tue, 27 Sep 2022 23:02:11 +0200 Subject: Add output folder icons Adds icons on the first 3 tabs to directly open the corresponding images output directory --- javascript/hints.js | 1 + 1 file changed, 1 insertion(+) (limited to 'javascript') diff --git a/javascript/hints.js b/javascript/hints.js index 59dd770c..96cd24d5 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -15,6 +15,7 @@ titles = { "\u267b\ufe0f": "Reuse seed from last generation, mostly useful if it was randomed", "\u{1f3a8}": "Add a random artist to the prompt.", "\u2199\ufe0f": "Read generation parameters from prompt into user interface.", + "\uD83D\uDCC2": "Open images output directory", "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt", "SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back", -- cgit v1.2.1