diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 00000000..0bdafb82 Binary files /dev/null and b/favicon.ico differ 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{