From 59b51cddf2265806bf7e0464952a983aefbbb91e Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Thu, 12 Oct 2023 09:44:45 -0400 Subject: [PATCH] update context menu --- .eslintrc.json | 5 ++++- CHANGELOG.md | 1 + javascript/contextMenus.js | 39 ++++++++++---------------------------- javascript/nvml.js | 36 ++++++++++++++++++++--------------- javascript/style.css | 10 +++++----- 5 files changed, 41 insertions(+), 50 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4f0cb228a..4e5d16a65 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -86,7 +86,10 @@ // logMonitor.js "jobStatusEl": "readonly", // loader.js - "removeSplash": "readonly" + "removeSplash": "readonly", + // nvml.js + "initNVML": "readonly", + "disableNVML": "readonly" }, "ignorePatterns": [ "node_modules", diff --git a/CHANGELOG.md b/CHANGELOG.md index e1d9950d7..84c5eb825 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -140,6 +140,7 @@ or even free speedups and quality improvements (regardless of which workflows yo - **CUDA**: - default updated to `torch` *2.1.0* with cuda *12.1* - testing moved to `torch` *2.2.0-dev/cu122* + - check out *generate context menu -> show nvml* - **Intel Arc/IPEX**: - tons of optimizations, built-in binary wheels for Windows i have to say, intel arc/ipex is getting to be quite a player, especially with openvino diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js index 5aaeba3cd..fab220da4 100644 --- a/javascript/contextMenus.js +++ b/javascript/contextMenus.js @@ -9,13 +9,8 @@ const contextMenuInit = () => { const posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; const oldMenu = gradioApp().querySelector('#context-menu'); if (oldMenu) oldMenu.remove(); - const tabButton = uiCurrentTab; - const baseStyle = window.getComputedStyle(tabButton); const contextMenu = document.createElement('nav'); contextMenu.id = 'context-menu'; - contextMenu.style.background = baseStyle.background; - contextMenu.style.color = baseStyle.color; - contextMenu.style.fontFamily = baseStyle.fontFamily; contextMenu.style.top = `${posy}px`; contextMenu.style.left = `${posx}px`; const contextMenuList = document.createElement('ul'); @@ -90,41 +85,27 @@ const appendContextMenuOption = initResponse[0]; const removeContextMenuOption = initResponse[1]; const addContextMenuEventListener = initResponse[2]; -(function () { // eslint-disable-line +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, - ); + 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')); - const cancelGenerateForever = () => clearInterval(window.generateOnRepeatInterval); - - appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever); appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever); - appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever); appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever); - appendContextMenuOption( - '#roll', - 'Roll three', - () => { - const rollbutton = getUICurrentTabContent().querySelector('#roll'); - setTimeout(() => { rollbutton.click(); }, 100); - setTimeout(() => { rollbutton.click(); }, 200); - setTimeout(() => { rollbutton.click(); }, 300); - }, - ); -}()); -// End example Context Menu Items + appendContextMenuOption('#txt2img_generate', 'Show NVML overlay', initNVML); + appendContextMenuOption('#txt2img_generate', 'Hide NVML overlay', disableNVML); +} +onUiLoaded(initContextMenu); onAfterUiUpdate(() => addContextMenuEventListener()); diff --git a/javascript/nvml.js b/javascript/nvml.js index 6f4dd2d56..63a5b5371 100644 --- a/javascript/nvml.js +++ b/javascript/nvml.js @@ -46,20 +46,26 @@ async function updateNVML() { } async function initNVML() { - nvmlEl = document.createElement('div'); - nvmlEl.className = 'nvml'; - nvmlEl.id = 'nvml'; - nvmlTable = document.createElement('table'); - nvmlTable.className = 'nvml-table'; - nvmlTable.id = 'nvml-table'; - nvmlTable.innerHTML = ` - - - `; - nvmlEl.appendChild(nvmlTable); - gradioApp().appendChild(nvmlEl); - log('initNVML'); - // nvmlInterval = setInterval(updateNVML, 1000); + nvmlEl = document.getElementById('nvml'); + if (!nvmlEl) { + nvmlEl = document.createElement('div'); + nvmlEl.className = 'nvml'; + nvmlEl.id = 'nvml'; + nvmlTable = document.createElement('table'); + nvmlTable.className = 'nvml-table'; + nvmlTable.id = 'nvml-table'; + nvmlTable.innerHTML = ` + + + `; + nvmlEl.appendChild(nvmlTable); + gradioApp().appendChild(nvmlEl); + log('initNVML'); + } + nvmlInterval = setInterval(updateNVML, 1000); } -onUiLoaded(initNVML); +async function disableNVML() { + clearInterval(nvmlInterval); + nvmlEl.style.display = 'none'; +} diff --git a/javascript/style.css b/javascript/style.css index 62bdde2e0..80c2e5471 100644 --- a/javascript/style.css +++ b/javascript/style.css @@ -155,10 +155,10 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt #imageARPreview { position: absolute; top: 0px; left: 0px; border: 2px solid red; background: rgba(255, 0, 0, 0.3); z-index: 900; pointer-events: none; display: none; } /* context menu (ie for the generate button) */ -#context-menu { z-index:9999; position:absolute; display:block; padding:0px 0; border:2px solid #a55000; box-shadow:1px 1px 2px #CE6400; width: 200px; } -.context-menu-items{ list-style: none; margin: 0; padding: 0; } -.context-menu-items a { display:block; padding:5px; cursor:pointer; } -.context-menu-items a:hover { background: #a55000; } +#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 a { display: block; padding: var(--spacing-md); cursor: pointer; font-weight: normal; } +.context-menu-items a:hover { background: var(--highlight-color) } /* extensions */ #tab_extensions table, #tab_config table{ border-collapse: collapse; } @@ -248,7 +248,7 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri /* custom component */ .folder-selector textarea { height: 2em !important; padding: 6px !important; } -.nvml { position: fixed; top: 100px; left: 100px; background: var(--background-fill-primary); border: 1px solid var(--button-primary-border-color); padding: 6px; color: var(--button-primary-text-color); +.nvml { position: fixed; bottom: 10px; right: 10px; background: var(--background-fill-primary); border: 1px solid var(--button-primary-border-color); padding: 6px; color: var(--button-primary-text-color); font-size: 0.7em; z-index: 50; font-family: monospace; display: none; } /* loader */