From 513a032492084931c1eecfe4c3e8aaa6702e38b3 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Mon, 1 May 2023 21:30:18 +0300 Subject: [PATCH] fixes some issues with gradio 3.28.1 --- favicon.ico | Bin 0 -> 4286 bytes javascript/imageviewer.js | 33 +++++++++++++++++++-------------- javascript/ui.js | 10 ++++++---- style.css | 29 ++++++++++++++++++----------- 4 files changed, 43 insertions(+), 29 deletions(-) create mode 100644 favicon.ico diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..0bdafb82b16fb3baa0b55c7d1ecaefeaf68424d5 GIT binary patch literal 4286 zcmdUx+mBsS9LM*xTH?|fD!nN75Cjp4`z;*$Ag)EwQo=(;BqU8;(}+wPVGz3UfEPqG z)I%>qixj;KGcVP;mNy;q56pR+hm$!zpPjXKmgCGhqx!&}eCGGtzx7?ewSH@_wPv!c zhoAob%-`9DzAT%UW!afPD7zYrmk(|K$EVqBW`V=7CqWJFg@*(BH8>H}l=^>LYs`b4 z3(Mgn_#XDb4)`RXZ_G9|cf)aT(DMj=563QpA=m@Y!!@u7j)YkOePfGZ5Wa)muoTQO z?WIr~Sb%*C_QMmf5IWWq+k^H=tbN}Eb9LoJByXR#mJQdrqp5;S9tZy~>cEGVv4zCR?!+OTN zLt@Nx>>2+!*m&NjV`HDYl6>A>p3OUxm}AX^58%a?__@3v0Qb)$uyUHH-2%VEIS}j7 zz6|TZF=O1jV=r85%qMAk8s9Ti-e+ZF%dbRx1HOBw555N1yUdm3ypEV-Rr?$N3h?ec z8LI61;CUQ|RpGsAk4}hNgSzKH?YB_gJ1x4L_z!S7#5(=<-j_!ki%-&i55Ds|J#AN) zXr94;7QCO;x_7GD6YVj?zkzfQJjna!FdO3VrS%<-g3a(6%z(7bcJH|@kV66Pm%r4K zjPD)u1v~(8{@un`cNOf1E0cc4owN7KeNY3>_zI}%ivNqi`CyUS~sV9(AsNbr0dY7u*v$RQl904rhS6<>B32pMvM( zC2)SO|0}RJ_^sc|zisBY6k-hv@zq~%tlg7nAH#QV&jJ7KC?W&e1ho7h@gfa6Fn_usUk7kHZG|+n$Sg678$_??JgPN!+=+2D!0zkMV%o zpWrO;8~+T(%JvR@`_b%!+fr@t`>=jT&vCarN1(CZx8WW55RA1OI?h=;0NbG#Dy@Ft zR_w2ES&UVp;KVrg5*Q6!9OE7I?s0Q3X{QY__ln=g?_1u*##~iNk8AF| zwh-8I~fgC!{gZ4OXKmJ;fub}r^-3;zo?=0^(@0U}- zJ?x$rePgz%QEMOHr~KaOc_oXoO;Mm|xS7?{k*`KF_s?XhNaWH`%K z$hs_BRpbZiMZU9M6uauh;M#gI(o-*nvU>3cZR1cc>LU~Rn2a@QBcqMl;P~V~??kPU PH+siwj^SA4m<;_Vx=CC- literal 0 HcmV?d00001 diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index a9517294..5ba0d275 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -58,7 +58,7 @@ function modalImageSwitch(offset) { }) if (result != -1) { - var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] + nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] nextButton.click() const modalImage = gradioApp().getElementById("modalImage"); const modal = gradioApp().getElementById("lightboxModal"); @@ -145,11 +145,15 @@ function setupImageForLightbox(e) { } function modalZoomSet(modalImage, enable) { - if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable); + if (enable) { + modalImage.classList.add('modalImageFullscreen'); + } else { + modalImage.classList.remove('modalImageFullscreen'); + } } function modalZoomToggle(event) { - var modalImage = gradioApp().getElementById("modalImage"); + modalImage = gradioApp().getElementById("modalImage"); modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen')) event.stopPropagation() } @@ -176,7 +180,7 @@ function galleryImageHandler(e) { } onUiUpdate(function() { - var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img') + fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img') if (fullImg_preview != null) { fullImg_preview.forEach(setupImageForLightbox); } @@ -248,11 +252,8 @@ document.addEventListener("DOMContentLoaded", function() { modal.appendChild(modalNext) - try { - gradioApp().appendChild(modal); - } catch (e) { - gradioApp().body.appendChild(modal); - } + gradioApp().appendChild(modal) + document.body.appendChild(modal); @@ -361,10 +362,13 @@ function createGallerySpotlight() { //console.log("clicked"); slide = 0; gallery = []; - - gradioApp().querySelectorAll("#"+selectedTabItemId+' .grid-wrap img').forEach(function (elem, i){ + + + gradioApp().querySelectorAll("#"+selectedTabItemId+' .thumbnails img').forEach(function (elem, i){ elem.setAttribute("gal-id", i); - if(fullImg_src == elem.src) slide = (i+1); + //if(fullImg_src == elem.src) slide = parseInt(i+1); + if(elem.parentElement.className.indexOf("selected") != -1) slide = parseInt(i+1); + //console.log(slide); gallery[i] = { src: elem.src, title: "Seed:" + elem.src, @@ -406,7 +410,7 @@ function createGallerySpotlight() { }, onclose: function(index){ - gradioApp().querySelector("#"+selectedTabItemId+' .thumbnail-item:nth-child('+(slide+1)+')').click(); + gradioApp().querySelector("#"+selectedTabItemId+' .thumbnails .thumbnail-item:nth-child('+(slide+1)+')').click(); } }; @@ -431,13 +435,14 @@ function onUiHeaderTabUpdate(){ intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); } + let fullImg_preview; function onUiUpdateIViewer(){ clearInterval(intervalUiUpdateIViewer); //update_performant_inputs(selectedTabItemId); //fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain'); - fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' .preview img'); + fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' .preview > img'); if(opts.js_modal_lightbox && fullImg_preview ) { fullImg_src = fullImg_preview.src; diff --git a/javascript/ui.js b/javascript/ui.js index 648b4e47..dd1b0829 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -374,7 +374,7 @@ onUiUpdate(function(){ /* auto grow textarea */ function autoGrowPromptTextarea(){ gradioApp().querySelectorAll('[id$="_prompt"] textarea').forEach(function (elem) { - elem.focus(); + elem.parentElement.click(); }); } @@ -386,10 +386,12 @@ onUiUpdate(function(){ e.target.style.minHeight = e.target.scrollHeight + offset + 2 + 'px'; }); - elem.addEventListener('focus', function (e) { - e.target.style.minHeight = 'auto'; - e.target.style.minHeight = e.target.scrollHeight + offset + 2 + 'px'; + elem.parentElement.addEventListener('click', function (e) { + let textarea = e.currentTarget.querySelector('textarea'); + textarea.style.minHeight = 'auto'; + textarea.style.minHeight = textarea.scrollHeight + offset + 2 + 'px'; }); + }); diff --git a/style.css b/style.css index e0e16677..b4f837a9 100644 --- a/style.css +++ b/style.css @@ -62,13 +62,20 @@ body { display: none !important; } -.app.svelte-ac4rv4.svelte-ac4rv4 { +.app.svelte-1mya07g.svelte-1mya07g +{ + position: relative; + margin: auto; padding: var(--size-4); - max-width: unset !important; - background:transparent !important; - padding-top: 0; + padding-top: 0; + width: 100%; + min-height: 100vh !important; + min-width: unset !important; + max-width: unset !important; + background-color: var(--ae-main-bg-color); } + .block.svelte-mppz8v { line-height: 16px !important; } @@ -888,7 +895,7 @@ min-height: 34px; } -div.svelte-awbtu4, div.gradio-row>.form { +div.svelte-b6y5bg, div.gradio-row>.form { overflow: visible !important; } @@ -1060,7 +1067,7 @@ fieldset.block.padded border-radius: var(--ae-panel-border-radius) !important; } -div.svelte-awbtu4, +div.svelte-b6y5bg, div.gradio-row>.form{ /*box-shadow: var(--block-shadow);*/ border-width: var(--ae-border-width) !important; @@ -1297,7 +1304,7 @@ input.svelte-56zyyb{ flex-direction: column !important; min-width: unset !important; } -[id$="2img_tools"] > .form.svelte-awbtu4{ +[id$="2img_tools"] > .form.svelte-b6y5bg{ background:0 !important; border:0 !important; } @@ -1392,7 +1399,7 @@ div.svelte-15lo0d8>.form>* { } /* gradio preloader*/ -.svelte-gjihhp { +.svelte-j1gjts { pointer-events: none!important; width: 5px!important; height: 5px!important; @@ -1400,7 +1407,7 @@ div.svelte-15lo0d8>.form>* { top: 2px !important; left: 2px !important; } -.svelte-gjihhp > * { +.svelte-j1gjts > * { display:none !important; } @@ -1484,7 +1491,7 @@ display:none !important; [id*="_sub-group"] div.gradio-row:not(:first-child) { /*margin-top: -1px;*/ } -.script-group div.svelte-awbtu4, +.script-group div.svelte-b6y5bg, .script-group div.gradio-row>.form, [id*="_sub-group"] div.gradio-row>.form { border: 0; @@ -2948,7 +2955,7 @@ pre { /************/ /* Footer */ /************/ -.app.svelte-ac4rv4.svelte-ac4rv4 { +.gradio-container.app { min-height: 100vh !important; } .main > .wrap > .contain{