diffusers img2img and inpaint

javascript/imageViewer.js

@@ -54,6 +54,8 @@ function modalKeyHandler(event) {
 }
 
 function showModal(event) {
+  // console.log('showModal', event);
+  // const source = gradioApp().querySelectorAll('.gradio-gallery > div > img')[0];
   const source = event.target || event.srcElement;
   const modalImage = gradioApp().getElementById('modalImage');
   const lb = gradioApp().getElementById('lightboxModal');
@@ -85,14 +87,17 @@ function modalZoomSet(modalImage, enable) {
 
 function setupImageForLightbox(e) {
   if (e.dataset.modded) return;
+  console.log('setupImageForLightbox', e);
   e.dataset.modded = true;
   e.style.cursor = 'pointer';
   e.style.userSelect = 'none';
-  e.addEventListener('click', (evt) => {
+  const event = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? 'mousedown' : 'click'; // silly firefox workaround since it triggers events in wrong order
+  e.addEventListener(event, (evt) => {
     if (evt.button !== 0) return;
     const initialZoom = (localStorage.getItem('modalZoom') || true) === 'yes';
     modalZoomSet(gradioApp().getElementById('modalImage'), initialZoom);
     evt.preventDefault();
+    evt.stopPropagation();
     showModal(evt);
   }, true);
 }

javascript/setHints.js

@@ -1,4 +1,4 @@
-const locale = {
+const localeData = {
   data: [],
   timeout: null,
   finished: false,
@@ -7,25 +7,25 @@ const locale = {
 };
 
 function tooltipCreate() {
-  locale.el = document.createElement('div');
-  locale.el.className = 'tooltip';
-  locale.el.id = 'tooltip-container';
-  locale.el.innerText = 'this is a hint';
-  gradioApp().appendChild(locale.el);
-  if (window.opts.tooltips === 'None') locale.type = 0;
-  if (window.opts.tooltips === 'Browser default') locale.type = 1;
-  if (window.opts.tooltips === 'UI tooltips') locale.type = 2;
+  localeData.el = document.createElement('div');
+  localeData.el.className = 'tooltip';
+  localeData.el.id = 'tooltip-container';
+  localeData.el.innerText = 'this is a hint';
+  gradioApp().appendChild(localeData.el);
+  if (window.opts.tooltips === 'None') localeData.type = 0;
+  if (window.opts.tooltips === 'Browser default') localeData.type = 1;
+  if (window.opts.tooltips === 'UI tooltips') localeData.type = 2;
 }
 
 async function tooltipShow(e) {
   if (e.target.dataset.hint) {
-    locale.el.classList.add('tooltip-show');
-    locale.el.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
+    localeData.el.classList.add('tooltip-show');
+    localeData.el.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
   }
 }
 
 async function tooltipHide(e) {
-  locale.el.classList.remove('tooltip-show');
+  localeData.el.classList.remove('tooltip-show');
 }
 
 async function validateHints(elements, data) {
@@ -47,11 +47,11 @@ async function validateHints(elements, data) {
 }
 
 async function setHints() {
-  if (locale.finished) return;
-  if (locale.data.length === 0) {
+  if (localeData.finished) return;
+  if (localeData.data.length === 0) {
     const res = await fetch('/file=html/locale_en.json');
     const json = await res.json();
-    locale.data = Object.values(json).flat();
+    localeData.data = Object.values(json).flat();
   }
   const elements = [
     ...Array.from(gradioApp().querySelectorAll('button')),
@@ -59,22 +59,22 @@ async function setHints() {
   ];
   if (elements.length === 0) return;
   if (Object.keys(opts).length === 0) return;
-  if (!locale.el) tooltipCreate();
+  if (!localeData.el) tooltipCreate();
   let localized = 0;
   let hints = 0;
-  locale.finished = true;
+  localeData.finished = true;
   const t0 = performance.now();
   for (const el of elements) {
-    const found = locale.data.find((l) => l.label === el.textContent.trim());
+    const found = localeData.data.find((l) => l.label === el.textContent.trim());
     if (found?.localized?.length > 0) {
       localized++;
       el.textContent = found.localized;
     }
     if (found?.hint?.length > 0) {
       hints++;
-      if (locale.type === 1) {
+      if (localeData.type === 1) {
         el.title = found.hint;
-      } else if (locale.type === 2) {
+      } else if (localeData.type === 2) {
         el.dataset.hint = found.hint;
         el.addEventListener('mouseover', tooltipShow);
         el.addEventListener('mouseout', tooltipHide);
@@ -84,12 +84,12 @@ async function setHints() {
     }
   }
   const t1 = performance.now();
-  console.log('setHints', { type: locale.type, elements: elements.length, localized, hints, data: locale.data.length, time: t1 - t0 });
+  console.log('setHints', { type: localeData.type, elements: elements.length, localized, hints, data: localeData.data.length, time: t1 - t0 });
   removeSplash();
-  // validateHints(elements, locale.data)
+  // validateHints(elements, localeData.data)
 }
 
 onAfterUiUpdate(async () => {
-  if (locale.timeout) clearTimeout(locale.timeout);
-  locale.timeout = setTimeout(setHints, 250);
+  if (localeData.timeout) clearTimeout(localeData.timeout);
+  localeData.timeout = setTimeout(setHints, 250);
 });

javascript/style.css

@@ -355,7 +355,7 @@ div#extras_scale_to_tab div.form{
     flex-direction: row;
 }
 
-.modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: -webkit-fill-available; z-index: 1; }
+.modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: 99%; z-index: 1; }
 .modalControls:hover { background-color: #50505050; }
 .modalControls span { color: white; font-size: 2em; font-weight: bold; cursor: pointer; filter: grayscale(100%); }
 .modalControls span:hover, .modalControls span:focus { color: var(--highlight-color); filter: none; }