context menus

javascript/contextMenus.js

@@ -86,25 +86,33 @@ const removeContextMenuOption = initResponse[1];
 const addContextMenuEventListener = initResponse[2];
 
 function initContextMenu() {
-  // Start example Context Menu Items
-  const generateOnRepeat = (genbuttonid, interruptbuttonid) => {
-    const genbutton = gradioApp().querySelector(genbuttonid);
-    const busy = document.getElementById('progressbar')?.style.display === 'block';
-    if (!busy) genbutton.click();
-    clearInterval(window.generateOnRepeatInterval);
-    window.generateOnRepeatInterval = setInterval(() => {
-      const pbBusy = document.getElementById('progressbar')?.style.display === 'block';
-      if (!pbBusy) genbutton.click();
-    }, 500);
+  const generateForever = (genbuttonid, interruptbuttonid) => {
+    if (window.generateOnRepeatInterval) {
+      log('generateForever: cancel');
+      clearInterval(window.generateOnRepeatInterval);
+      window.generateOnRepeatInterval = null;
+    } else {
+      log('generateForever: start');
+      const genbutton = gradioApp().querySelector(genbuttonid);
+      const busy = document.getElementById('progressbar')?.style.display === 'block';
+      if (!busy) genbutton.click();
+      window.generateOnRepeatInterval = setInterval(() => {
+        const pbBusy = document.getElementById('progressbar')?.style.display === 'block';
+        if (!pbBusy) genbutton.click();
+      }, 500);
+    }
   };
-  const cancelGenerateForever = () => clearInterval(window.generateOnRepeatInterval);
 
-  appendContextMenuOption('#txt2img_generate', 'Generate forever', () => generateOnRepeat('#txt2img_generate', '#txt2img_interrupt'));
-  appendContextMenuOption('#img2img_generate', 'Generate forever', () => generateOnRepeat('#img2img_generate', '#img2img_interrupt'));
-  appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever);
-  appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever);
-  appendContextMenuOption('#txt2img_generate', 'Show NVML overlay', initNVML);
-  appendContextMenuOption('#txt2img_generate', 'Hide NVML overlay', disableNVML);
+  for (const tab of ['txt2img', 'img2img']) {
+    for (const el of ['prompt > label > textarea', 'generate']) {
+      const id = `#${tab}_${el}`;
+      appendContextMenuOption(id, 'Copy to clipboard', () => navigator.clipboard.writeText(document.querySelector(`#${tab}_prompt > label > textarea`).value));
+      appendContextMenuOption(id, 'Generate forever', () => generateForever(`#${tab}_generate`));
+      appendContextMenuOption(id, 'Apply selected style', quickApplyStyle);
+      appendContextMenuOption(id, 'Quick save style', quickSaveStyle);
+      appendContextMenuOption(id, 'nVidia overlay', initNVML);
+    }
+  }
 }
 
 onUiLoaded(initContextMenu);

javascript/extraNetworks.js

@@ -216,6 +216,18 @@ function applyStyles(styles) {
   return newStyles.join('|');
 }
 
+function quickApplyStyle() {
+  const tabname = getENActiveTab();
+  const btnApply = gradioApp().getElementById(`${tabname}_extra_apply`);
+  if (btnApply) btnApply.click();
+}
+
+function quickSaveStyle() {
+  const tabname = getENActiveTab();
+  const btnSave = gradioApp().getElementById(`${tabname}_extra_quicksave`);
+  if (btnSave) btnSave.click();
+}
+
 // init
 
 function setupExtraNetworksForTab(tabname) {
@@ -243,6 +255,14 @@ function setupExtraNetworksForTab(tabname) {
   btnModel.onclick = () => btnModel.classList.toggle('toolbutton-selected');
   tabs.appendChild(buttons);
 
+  // details
+  const detailsImg = gradioApp().getElementById(`${tabname}_extra_details_img`);
+  const detailsClose = gradioApp().getElementById(`${tabname}_extra_details_close`);
+  if (detailsImg && detailsClose) {
+    detailsImg.title = 'Close details';
+    detailsImg.onclick = () => detailsClose.click();
+  }
+
   // search and description
   const div = document.createElement('div');
   div.classList.add('second-line');

javascript/nvml.js

@@ -1,4 +1,4 @@
-let nvmlInterval = true; // eslint-disable-line prefer-const
+let nvmlInterval = null; // eslint-disable-line prefer-const
 let nvmlEl = null;
 let nvmlTable = null;
 
@@ -60,7 +60,13 @@ async function initNVML() {
     gradioApp().appendChild(nvmlEl);
     log('initNVML');
   }
-  nvmlInterval = setInterval(updateNVML, 1000);
+  if (nvmlInterval) {
+    clearInterval(nvmlInterval);
+    nvmlInterval = null;
+    nvmlEl.style.display = 'none';
+  } else {
+    nvmlInterval = setInterval(updateNVML, 1000);
+  }
 }
 
 async function disableNVML() {

javascript/sdnext.css

@@ -157,7 +157,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 
 /* context menu (ie for the generate button) */
 #context-menu { z-index: 9999; position: absolute; display: block; padding: var(--spacing-md); border: 2px solid var(--highlight-color); background: var(--background-fill-primary); color: var(--body-text-color); }
-.context-menu-items { list-style: none; margin: 0; padding: 0; }
+.context-menu-items { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
 .context-menu-items a { display: block; padding: var(--spacing-md); cursor: pointer; font-weight: normal; }
 .context-menu-items a:hover { background: var(--highlight-color) }
 
@@ -204,6 +204,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 .extra-network-cards .card:hover .actions { display: block; }
 .extra-network-cards .card:hover .overlay .tags { display: block; }
 .extra-network-cards .card .actions { font-size: 3em; display: none; text-align-last: right; cursor: pointer; font-variant: unicase; position: absolute; z-index: 100; right: 0; height: 0.7em; width: 100%; background: rgba(0, 0, 0, 0.40); }
+.extra-details-close { position: fixed; top: 0.2em; right: 0.2em; z-index: 99; background: var(--button-secondary-background-fill) !important; }
 #txt2img_description, #img2img_description { max-height: 63px; overflow-y: auto !important; }
 #txt2img_description > label > textarea, #img2img_description > label > textarea { font-size: 0.9em }