Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-07 13:30:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

update context menu

Browse Source
This commit is contained in:
Vladimir Mandic
2023-10-12 09:44:45 -04:00
parent f850247451
commit 59b51cddf2
5 changed files with 41 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/contextMenus.js
+10 -29
View File
@@ -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());
javascript/nvml.js
+21 -15
View File
@@ -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 = `
<thead><tr><th></th><th></th></tr></thead>
<tbody></tbody>
`;
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 = `
<thead><tr><th></th><th></th></tr></thead>
<tbody></tbody>
`;
nvmlEl.appendChild(nvmlTable);
gradioApp().appendChild(nvmlEl);
log('initNVML');
}
nvmlInterval = setInterval(updateNVML, 1000);
}
onUiLoaded(initNVML);
async function disableNVML() {
clearInterval(nvmlInterval);
nvmlEl.style.display = 'none';
}
javascript/style.css
+5 -5
View File
@@ -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 */