new hints display

CHANGELOG.md

@@ -6,6 +6,7 @@
   this is 1st stage of the process, more to come...  
   if you want to join the effort, see <https://github.com/vladmandic/automatic/discussions/1246>
 - new localization and hints engine  
+  how hints are displayed can be selected in settings -> ui  
 - reworked **installer** sequence  
   as some extensions are loading packages directly from their preload sequence  
   which was preventing some optimizations to take effect  

installer.py

@@ -356,7 +356,7 @@ def check_modified_files():
     try:
         res = git('status --porcelain')
         files = [x[2:].strip() for x in res.split('\n')]
-        files = [x for x in files if len(x) > 0 and not x.startswith('extensions') and not x.startswith('wiki')]
+        files = [x for x in files if len(x) > 0 and not x.startswith('extensions') and not x.startswith('wiki') and not x.endswith('.json')]
         if len(files) > 0:
             log.warning(f'Modified files: {files}')
     except:

javascript/black-orange.css

@@ -1,7 +1,7 @@
 /* generic html tags */
 :root { --font: system-ui, "Segoe UI", "Roboto", "sans-serif"; }
 html { font-size: 16px; }
-body, button, input, select, textarea { font-family: var(--font); overflow-x: hidden; }
+body, button, input, select, textarea { font-family: var(--font);}
 button { font-size: 1.2rem; }
 img { background-color: black; }
 input[type=range] { height: 18px; appearance: none; margin-top: 0; min-width: 160px; background-color: black; width: 100%; background: transparent; }

javascript/set-hints.js

@@ -2,9 +2,33 @@ let locale = {
   data: [],
   timeout: null,
   finished: false,
+  type: 2,
+  el: null,
 }
 
-async function setLocale() {
+function tooltipCreate() {
+  locale.el = document.createElement('div');
+  locale.el.className = 'tooltip';
+  locale.el.id = 'tooltip-container';
+  locale.el.innerText = 'this is a hint'
+  gradioApp().appendChild(locale.el);
+  if (window.opts.tooltips === 'None') locale.type = 0;
+  if (window.opts.tooltips === 'Browser default') locale.type = 1;
+  if (window.opts.tooltips === 'UI tooltips') locale.type = 2;
+}
+
+async function tooltipShow(e) {
+  if (e.target.dataset.hint) {
+    locale.el.classList.add('tooltip-show');
+    locale.el.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
+  }
+}
+
+async function tooltipHide(e) {
+  locale.el.classList.remove('tooltip-show');
+}
+
+async function setHints() {
   if (locale.finished) return;
   if (locale.data.length === 0) {
     const res = await fetch('/file=html/locale_en.json');
@@ -16,6 +40,8 @@ async function setLocale() {
     ...Array.from(gradioApp().querySelectorAll('label > span')),
   ];
   if (elements.length === 0) return;
+  if (Object.keys(opts).length === 0) return;
+  if (!locale.el) tooltipCreate();
   let localized = 0;
   let hints = 0;
   for (el of elements) {
@@ -26,14 +52,22 @@ async function setLocale() {
     }
     if (found?.hint?.length > 0) {
       hints++;
-      el.title = found.hint;
+      if (locale.type === 1) {
+        el.title = found.hint;
+      } else if (locale.type === 2) {
+        el.dataset.hint = found.hint;
+        el.addEventListener('mouseover', tooltipShow);
+        el.addEventListener('mouseout', tooltipHide);
+      } else {
+        // tooltips disabled
+      }
     }
   }
-  console.log('setLocale', { elements: elements.length, localized, hints, data: locale.data });
+  console.log('set-hints', { type: locale.type, elements: elements.length, localized, hints, data: locale.data });
   locale.finished = true;
 }
 
 onAfterUiUpdate(async () => {
   if (locale.timeout) clearTimeout(locale.timeout);
-  locale.timeout = setTimeout(setLocale, 250)
+  locale.timeout = setTimeout(setHints, 250)
 });

javascript/style.css

@@ -199,6 +199,26 @@ div#extras_scale_to_tab div.form{
     overflow-wrap: break-word;
 }
 
+.tooltip {
+  display: block;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  padding: 0.5em;
+  background: var(--input-background-fill);
+  color: var(--body-text-color);
+  border: 1pt solid var(--button-primary-border-color);
+  width: 22em;
+  min-height: 1.3em;
+  font-size: 0.8em;
+  transition: opacity 0.2s ease-in;
+  opacity: 0;
+}
+
+.tooltip-show {
+  opacity: 1;
+}
+
 /* settings */
 #quicksettings {
     width: fit-content;
@@ -228,16 +248,16 @@ div#extras_scale_to_tab div.form{
     flex: 100000 0 75%;
 }
 
-#settings > div.tab-content > div{
+#settings > div.tab-content > div {
     border: none;
     padding: 0;
 }
 
-#settings > div.tab-nav{
+#settings > div.tab-nav {
     display: grid;
     grid-template-columns: repeat(auto-fill, .3em minmax(10em, 1fr));
     flex: 1 0 auto;
-    width: 11em;
+    width: 12em;
     align-self: flex-start;
     gap: var(--spacing-md);
 }

modules/shared.py

@@ -408,6 +408,7 @@ options_templates.update(options_section(('saving-paths', "Output Paths"), {
 options_templates.update(options_section(('ui', "User interface"), {
     "gradio_theme": OptionInfo("black-orange", "UI theme", gr.Dropdown, lambda: {"choices": list_themes()}, refresh=refresh_themes),
     "theme_style": OptionInfo("Auto", "Theme mode", gr.Radio, {"choices": ["Auto", "Dark", "Light"]}),
+    "tooltips": OptionInfo("UI Tooltips", "UI tooltips", gr.Radio, {"choices": ["None", "Browser default", "UI tooltips"]}),
     "return_grid": OptionInfo(True, "Show grid in results for web"),
     "return_mask": OptionInfo(False, "For inpainting, include the greyscale mask in results for web"),
     "return_mask_composite": OptionInfo(False, "For inpainting, include masked composite in results for web"),