en load refiner, track server job state

javascript/extraNetworks.js

@@ -186,24 +186,31 @@ function setupExtraNetworksForTab(tabname) {
   gradioApp().querySelector(`#${tabname}_extra_tabs`).classList.add('extra-networks');
   const en = gradioApp().getElementById(`${tabname}_extra_networks`);
   const tabs = gradioApp().querySelector(`#${tabname}_extra_tabs > div`);
-  const txtSearch = gradioApp().querySelector(`#${tabname}_extra_search textarea`);
-  const txtDescription = gradioApp().getElementById(`${tabname}_description`);
+
+  // buttons
   const btnRefresh = gradioApp().getElementById(`${tabname}_extra_refresh`);
   const btnScan = gradioApp().getElementById(`${tabname}_extra_scan`);
   const btnSave = gradioApp().getElementById(`${tabname}_extra_save`);
   const btnClose = gradioApp().getElementById(`${tabname}_extra_close`);
-  txtSearch.classList.add('search');
-  txtDescription.classList.add('description');
+  const btnModel = gradioApp().getElementById(`${tabname}_extra_model`);
   const buttons = document.createElement('span');
   buttons.classList.add('buttons');
   if (btnRefresh) buttons.appendChild(btnRefresh);
+  if (btnModel) buttons.appendChild(btnModel);
   if (btnScan) buttons.appendChild(btnScan);
   if (btnSave) buttons.appendChild(btnSave);
   if (btnClose) buttons.appendChild(btnClose);
+  btnModel.onclick = () => btnModel.classList.toggle('toolbutton-selected');
   tabs.appendChild(buttons);
+
+  // search and description
   const div = document.createElement('div');
   div.classList.add('second-line');
   tabs.appendChild(div);
+  const txtSearch = gradioApp().querySelector(`#${tabname}_extra_search textarea`);
+  const txtDescription = gradioApp().getElementById(`${tabname}_description`);
+  txtSearch.classList.add('search');
+  txtDescription.classList.add('description');
   div.appendChild(txtSearch);
   div.appendChild(txtDescription);
   let searchTimer = null;
@@ -215,6 +222,7 @@ function setupExtraNetworksForTab(tabname) {
     }, 150);
   });
 
+  // card hover
   let hoverTimer = null;
   let previousCard = null;
   gradioApp().getElementById(`${tabname}_extra_tabs`).onmouseover = (e) => {
@@ -233,6 +241,7 @@ function setupExtraNetworksForTab(tabname) {
     };
   };
 
+  // en style
   const intersectionObserver = new IntersectionObserver((entries) => {
     if (!en) return;
     for (const el of Array.from(gradioApp().querySelectorAll('.extra-networks-page'))) {

javascript/logMonitor.js

@@ -1,5 +1,6 @@
 let logMonitorEl = null;
 let logMonitorStatus = true;
+let jobStatusEl = null;
 
 async function logMonitor() {
   if (logMonitorStatus) setTimeout(logMonitor, opts.logmonitor_refresh_period);
@@ -51,6 +52,9 @@ async function initLogMonitor() {
     </table>
   `;
   el.style.display = 'none';
+  jobStatusEl = document.createElement('div');
+  jobStatusEl.className = 'jobStatus';
+  gradioApp().appendChild(jobStatusEl);
   fetch(`/sdapi/v1/start?agent=${encodeURI(navigator.userAgent)}`);
   logMonitor();
   log('initLogMonitor');

javascript/progressBar.js

@@ -47,7 +47,7 @@ function setProgress(res) {
   let eta = '';
   if (res?.paused) eta = 'Paused';
   else if (res?.completed || (progress > 0.99)) eta = 'Finishing';
-  else if (sec === 0) eta = 'Starting';
+  else if (sec === 0) eta = `Init${res?.job?.length > 0 ? `: ${res.job}` : ''}`;
   else {
     const min = Math.floor(sec / 60);
     sec %= 60;
@@ -106,6 +106,7 @@ function requestProgress(id_task, progressEl, galleryEl, atEnd = null, onProgres
     debug('taskEnd:', id_task);
     localStorage.removeItem('task');
     setProgress();
+    if (jobStatusEl) jobStatusEl.style.display = 'none';
     if (parentGallery && livePreview) parentGallery.removeChild(livePreview);
     checkPaused(true);
     if (atEnd) atEnd();
@@ -113,6 +114,8 @@ function requestProgress(id_task, progressEl, galleryEl, atEnd = null, onProgres
 
   const start = (id_task, id_live_preview) => { // eslint-disable-line no-shadow
     request('./internal/progress', { id_task, id_live_preview }, (res) => {
+      if (jobStatusEl) jobStatusEl.innerText = (res?.job || '').trim().toUpperCase();
+      if (jobStatusEl) jobStatusEl.style.display = jobStatusEl.innerText.length > 0 ? 'block' : 'none';
       lastState = res;
       const elapsedFromStart = (new Date() - dateStart) / 1000;
       hasStarted |= res.active;
@@ -124,7 +127,7 @@ function requestProgress(id_task, progressEl, galleryEl, atEnd = null, onProgres
       if (res.live_preview && !livePreview) init();
       if (res.live_preview && galleryEl) img.src = res.live_preview;
       if (onProgress) onProgress(res);
-      setTimeout(() => start(id_task, id_live_preview), opts.live_preview_refresh_period || 250);
+      setTimeout(() => start(id_task, id_live_preview), opts.live_preview_refresh_period || 500);
     }, done);
   };
   start(id_task, 0);

javascript/style.css

@@ -120,6 +120,8 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
   z-index: var(--layer-2);
 }
 .tooltip-show { opacity: 0.9; }
+.toolbutton-selected { background: var(--background-fill-primary) !important; }
+.jobStatus { position: fixed; bottom: 1em; right: 1em; background: var(--input-background-fill); padding: 0.4em; font-size: 0.8em; color: var(--body-text-color-subdued); }
 
 /* settings */
 #si-sparkline-memo, #si-sparkline-load { background-color: #111; }

javascript/ui.js

@@ -336,13 +336,19 @@ function updateInput(target) {
 let desiredCheckpointName = null;
 function selectCheckpoint(name) {
   desiredCheckpointName = name;
-  gradioApp().getElementById('change_checkpoint').click();
+  const tabname = getENActiveTab();
+  const btnModel = gradioApp().getElementById(`${tabname}_extra_model`);
+  const isRefiner = btnModel && btnModel.classList.contains('toolbutton-selected');
+  if (isRefiner) gradioApp().getElementById('change_refiner').click();
+  else gradioApp().getElementById('change_checkpoint').click();
+  log(`Change ${isRefiner ? 'refiner' : 'model'}: ${desiredCheckpointName}`);
 }
 
 let desiredVAEName = null;
 function selectVAE(name) {
   desiredVAEName = name;
   gradioApp().getElementById('change_vae').click();
+  log(`Change VAE: ${desiredVAEName}`);
 }
 
 function currentImg2imgSourceResolution(_a, _b, scaleBy) {