From d66c64b9d76553a9518ae6a3141714519d65d796 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Wed, 24 May 2023 20:19:16 +0300 Subject: Optimize tooltip checks * Instead of traversing tens of thousands of text nodes, only look at elements and their children * Debounce the checks to happen only every one second --- javascript/hints.js | 61 +++++++++++++++++++++++++++++------------------------ 1 file changed, 33 insertions(+), 28 deletions(-) (limited to 'javascript/hints.js') diff --git a/javascript/hints.js b/javascript/hints.js index 46f342cb..a8c72976 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -116,17 +116,17 @@ var titles = { "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction." }; -function updateTooltipForSpan(span) { - if (span.title) return; // already has a title +function updateTooltip(element) { + if (element.title) return; // already has a title - let tooltip = localization[titles[span.textContent]] || titles[span.textContent]; + let tooltip = localization[titles[element.textContent]] || titles[element.textContent]; if (!tooltip) { - tooltip = localization[titles[span.value]] || titles[span.value]; + tooltip = localization[titles[element.value]] || titles[element.value]; } if (!tooltip) { - for (const c of span.classList) { + for (const c of element.classList) { if (c in titles) { tooltip = localization[titles[c]] || titles[c]; break; @@ -135,34 +135,39 @@ function updateTooltipForSpan(span) { } if (tooltip) { - span.title = tooltip; + element.title = tooltip; } } -function updateTooltipForSelect(select) { - if (select.onchange != null) return; +// Nodes to check for adding tooltips. +const tooltipCheckNodes = new Set(); +// Timer for debouncing tooltip check. +let tooltipCheckTimer = null; - select.onchange = function() { - select.title = localization[titles[select.value]] || titles[select.value] || ""; - }; +function processTooltipCheckNodes() { + for (const node of tooltipCheckNodes) { + updateTooltip(node); + } + tooltipCheckNodes.clear(); } -var observedTooltipElements = {SPAN: 1, BUTTON: 1, SELECT: 1, P: 1}; - -onUiUpdate(function(m) { - m.forEach(function(record) { - record.addedNodes.forEach(function(node) { - if (observedTooltipElements[node.tagName]) { - updateTooltipForSpan(node); - } - if (node.tagName == "SELECT") { - updateTooltipForSelect(node); - } - - if (node.querySelectorAll) { - node.querySelectorAll('span, button, select, p').forEach(updateTooltipForSpan); - node.querySelectorAll('select').forEach(updateTooltipForSelect); +onUiUpdate(function(mutationRecords) { + for (const record of mutationRecords) { + for (const node of record.addedNodes) { + if (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains("hide")) { + if ( + node.tagName === "SPAN" || + node.tagName === "BUTTON" || + node.tagName === "P" + ) { + tooltipCheckNodes.add(node); + } + node.querySelectorAll('span, button, p').forEach(n => tooltipCheckNodes.add(n)); } - }); - }); + } + } + if (tooltipCheckNodes.size) { + clearTimeout(tooltipCheckTimer); + tooltipCheckTimer = setTimeout(processTooltipCheckNodes, 1000); + } }); -- cgit v1.2.3 From b82d4a65fe9b025e9da1b8c7a72ed9d56b96315d Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Wed, 24 May 2023 20:34:57 +0300 Subject: Restore support for dropdown tooltips --- javascript/hints.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) (limited to 'javascript/hints.js') diff --git a/javascript/hints.js b/javascript/hints.js index a8c72976..7f8885bc 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -153,14 +153,27 @@ function processTooltipCheckNodes() { onUiUpdate(function(mutationRecords) { for (const record of mutationRecords) { + if (record.type === "childList" && record.target.classList.contains("options")) { + // This smells like a Gradio dropdown menu having changed, + // so let's enqueue an update for the input element that shows the current value. + let wrap = record.target.parentNode; + let input = wrap?.querySelector("input"); + if (input) { + input.title = ""; // So we'll even have a chance to update it. + tooltipCheckNodes.add(input); + } + } for (const node of record.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains("hide")) { - if ( - node.tagName === "SPAN" || - node.tagName === "BUTTON" || - node.tagName === "P" - ) { - tooltipCheckNodes.add(node); + if (!node.title) { + if ( + node.tagName === "SPAN" || + node.tagName === "BUTTON" || + node.tagName === "P" || + node.tagName === "INPUT" + ) { + tooltipCheckNodes.add(node); + } } node.querySelectorAll('span, button, p').forEach(n => tooltipCheckNodes.add(n)); } -- cgit v1.2.3 From 32b0f7c9bbb908b870c2e0d488bd63a9c71ba078 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Wed, 24 May 2023 20:45:05 +0300 Subject: Add support for tooltips on dropdown options --- javascript/hints.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'javascript/hints.js') diff --git a/javascript/hints.js b/javascript/hints.js index 7f8885bc..05ae5f22 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -119,10 +119,18 @@ var titles = { function updateTooltip(element) { if (element.title) return; // already has a title - let tooltip = localization[titles[element.textContent]] || titles[element.textContent]; + let text = element.textContent; + let tooltip = localization[titles[text]] || titles[text]; if (!tooltip) { - tooltip = localization[titles[element.value]] || titles[element.value]; + let value = element.value; + if (value) tooltip = localization[titles[value]] || titles[value]; + } + + if (!tooltip) { + // Gradio dropdown options have `data-value`. + let dataValue = element.dataset.value; + if (dataValue) tooltip = localization[titles[dataValue]] || titles[dataValue]; } if (!tooltip) { @@ -170,7 +178,8 @@ onUiUpdate(function(mutationRecords) { node.tagName === "SPAN" || node.tagName === "BUTTON" || node.tagName === "P" || - node.tagName === "INPUT" + node.tagName === "INPUT" || + (node.tagName === "LI" && node.classList.contains("item")) // Gradio dropdown item ) { tooltipCheckNodes.add(node); } -- cgit v1.2.3 From f7ae0e68c9c91cd95e28552ef930299286026cd7 Mon Sep 17 00:00:00 2001 From: zhtttylz Date: Sun, 18 Jun 2023 15:46:08 +0800 Subject: Fix Typo of hints.js --- javascript/hints.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'javascript/hints.js') diff --git a/javascript/hints.js b/javascript/hints.js index 46f342cb..a2f222e5 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -15,7 +15,7 @@ var titles = { "CFG Scale": "Classifier Free Guidance Scale - how strongly the image should conform to prompt - lower values produce more creative results", "Seed": "A value that determines the output of random number generator - if you create an image with same parameters and seed as another image, you'll get the same result", "\u{1f3b2}\ufe0f": "Set seed to -1, which will cause a new random number to be used every time", - "\u267b\ufe0f": "Reuse seed from last generation, mostly useful if it was randomed", + "\u267b\ufe0f": "Reuse seed from last generation, mostly useful if it was randomized", "\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.", "\u{1f4c2}": "Open images output directory", "\u{1f4be}": "Save style", @@ -112,7 +112,7 @@ var titles = { "Resize height to": "Resizes image to this height. If 0, height is inferred from either of two nearby sliders.", "Multiplier for extra networks": "When adding extra network such as Hypernetwork or Lora to prompt, use this multiplier for it.", "Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.", - "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited.", + "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order listed.", "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction." }; -- cgit v1.2.3