jumbo commit see changelog for details

javascript/contextMenus.js

@@ -85,7 +85,7 @@ const appendContextMenuOption = initResponse[0];
 const removeContextMenuOption = initResponse[1];
 const addContextMenuEventListener = initResponse[2];
 
-function initContextMenu() {
+async function initContextMenu() {
   const generateForever = (genbuttonid, interruptbuttonid) => {
     if (window.generateOnRepeatInterval) {
       log('generateForever: cancel');

javascript/control.js

@@ -10,7 +10,7 @@ function controlInputMode(inputMode, ...args) {
   return [inputMode, ...args];
 }
 
-function setupControlUI() {
+async function setupControlUI() {
   const tabs = ['input', 'output', 'preview'];
   for (const tab of tabs) {
     const btn = gradioApp().getElementById(`control-${tab}-button`);

javascript/extraNetworks.js

@@ -119,8 +119,12 @@ async function filterExtraNetworksForTab(searchTerm) {
       if (searchTerm === '') {
         elem.style.display = '';
       } else {
-        let text = elem.dataset.search.toLowerCase();
-        text = text.toLowerCase().replace('models--', 'Diffusers').replace('\\', '/');
+        let text = '';
+        if (elem.dataset.filename) text += `${elem.dataset.filename} `;
+        if (elem.dataset.name) text += `${elem.dataset.name} `;
+        if (elem.dataset.title) text += `${elem.dataset.title} `;
+        if (elem.dataset.tags) text += `${elem.dataset.title} `;
+        text = text.toLowerCase().replace('models--', 'diffusers').replace('\\', '/');
         if (text.indexOf(searchTerm) === -1) {
           elem.style.display = 'none';
         } else {
@@ -180,8 +184,8 @@ function sortExtraNetworks() {
     if (num === 0) return 'sort: no cards';
     cards.sort((a, b) => { // eslint-disable-line no-loop-func
       switch (sortVal) {
-        case 0: return a.dataset.search ? a.dataset.search.localeCompare(b.dataset.search) : 0;
-        case 1: return b.dataset.search ? b.dataset.search.localeCompare(a.dataset.search) : 0;
+        case 0: return a.dataset.name ? a.dataset.name.localeCompare(b.dataset.name) : 0;
+        case 1: return b.dataset.name ? b.dataset.name.localeCompare(a.dataset.name) : 0;
         case 2: return a.dataset.mtime && !isNaN(a.dataset.mtime) ? parseFloat(b.dataset.mtime) - parseFloat(a.dataset.mtime) : 0;
         case 3: return b.dataset.mtime && !isNaN(b.dataset.mtime) ? parseFloat(a.dataset.mtime) - parseFloat(b.dataset.mtime) : 0;
         case 4: return a.dataset.size && !isNaN(a.dataset.size) ? parseFloat(b.dataset.size) - parseFloat(a.dataset.size) : 0;
@@ -398,7 +402,7 @@ function setupExtraNetworksForTab(tabname) {
   intersectionObserver.observe(en); // monitor visibility of
 }
 
-function setupExtraNetworks() {
+async function setupExtraNetworks() {
   setupExtraNetworksForTab('txt2img');
   setupExtraNetworksForTab('img2img');
   setupExtraNetworksForTab('control');

javascript/generationParams.js

@@ -18,7 +18,7 @@ let img2img_gallery;
 let modal;
 let generationParamsInitialized = false;
 
-function initiGenerationParams() {
+async function initiGenerationParams() {
   if (generationParamsInitialized) return;
   if (!modal) modal = gradioApp().getElementById('lightboxModal');
   if (!modal) return;

javascript/sdnext.css

@@ -202,13 +202,12 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 .extra-networks-page { display: flex }
 .extra-network-cards { display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden; align-content: flex-start; width: -moz-available; width: -webkit-fill-available; }
 .extra-network-cards .card { height: fit-content; margin: 0 0 0.5em 0.5em; position: relative; scroll-snap-align: start; scroll-margin-top: 0; }
-.extra-network-cards .card .overlay { position: absolute; bottom: 0; padding: 0.2em; z-index: 10; width: 100%; background: none; }
-.extra-network-cards .card .overlay .name { font-size: var(--text-lg); font-weight: bold; text-shadow: 1px 1px black; color: white; overflow-wrap: break-word; }
+.extra-network-cards .card .overlay { z-index: 10; width: 100%; background: none; }
+.extra-network-cards .card .overlay .name { font-size: var(--text-lg); font-weight: bold; text-shadow: 1px 1px black; color: white; overflow-wrap: break-word; position: absolute; bottom: 0; padding: 0.2em; z-index: 10; }
 .extra-network-cards .card .preview { box-shadow: var(--button-shadow); min-height: 30px; }
-.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); }
+.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.70); }
 .extra-network-cards .card:hover .preview { box-shadow: none; filter: grayscale(100%); }
-.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); }
-.extra-network-cards .card .overlay .tags { display: none; overflow-wrap: break-word; }
+.extra-network-cards .card .overlay .tags { display: none; overflow-wrap: anywhere; position: absolute; top: 100%; z-index: 20; background: var(--body-background-fill); }
 .extra-network-cards .card .overlay .tag { padding: 2px; margin: 2px; background: rgba(70, 70, 70, 0.60); font-size: var(--text-md); cursor: pointer; display: inline-block; }
 .extra-network-cards .card .actions>span { padding: 4px; font-size: 34px !important; }
 .extra-network-cards .card .actions>span:hover { color: var(--highlight-color); }

javascript/setHints.js

@@ -6,7 +6,7 @@ const localeData = {
   el: null,
 };
 
-function tooltipCreate() {
+async function tooltipCreate() {
   localeData.el = document.createElement('div');
   localeData.el.className = 'tooltip';
   localeData.el.id = 'tooltip-container';
@@ -83,7 +83,7 @@ async function setHints() {
   log('setHints', { type: localeData.type, elements: elements.length, localized, hints, data: localeData.data.length, time: t1 - t0 });
   // sortUIElements();
   removeSplash();
-  // validateHints(elements, localeData.data);
+  validateHints(elements, localeData.data);
 }
 
 onAfterUiUpdate(async () => {