Merge pull request #328 from zanllp/adjust-css-visual-area-no-double-scrollbar
Adjust CSS styles to optimize visual area and prevent double scrollbarpull/329/head
zanllp
GitHub
commit
d3b3599b73
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
Promise.resolve().then(async () => {
|
||||
/**
|
||||
* This is a file generated using `yarn build`.
|
||||
|
|
@ -13,7 +12,7 @@ Promise.resolve().then(async () => {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Infinite Image Browsing</title>
|
||||
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-1da1c976.js"></script>
|
||||
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-23e5bc7c.js"></script>
|
||||
<link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-618900f2.css">
|
||||
</head>
|
||||
|
||||
|
|
@ -25,18 +24,26 @@ Promise.resolve().then(async () => {
|
|||
</body>
|
||||
</html>
|
||||
`
|
||||
const delay = (timeout = 0) => new Promise(resolve => setTimeout(resolve, timeout))
|
||||
let containerSelector = '#infinite_image_browsing_container_wrapper'
|
||||
let shouldMaximize = true
|
||||
|
||||
try {
|
||||
containerSelector = __iib_root_container__
|
||||
shouldMaximize = __iib_should_maximize__
|
||||
} catch (e) {}
|
||||
|
||||
const delay = (timeout = 0) => new Promise((resolve) => setTimeout(resolve, timeout))
|
||||
const asyncCheck = async (getter, checkSize = 100, timeout = 1000) => {
|
||||
let target = getter()
|
||||
let num = 0
|
||||
while ((checkSize * num < timeout) && (target === undefined || target === null)) {
|
||||
while (checkSize * num < timeout && (target === undefined || target === null)) {
|
||||
await delay(checkSize)
|
||||
target = getter()
|
||||
num++
|
||||
}
|
||||
return target
|
||||
}
|
||||
const getTabIdxById = (id) => {
|
||||
const getTabIdxById = (id) => {
|
||||
const tabList = gradioApp().querySelectorAll('#tabs > .tabitem[id^=tab_]')
|
||||
return Array.from(tabList).findIndex((v) => v.id.includes(id))
|
||||
}
|
||||
|
|
@ -50,22 +57,37 @@ Promise.resolve().then(async () => {
|
|||
}
|
||||
|
||||
/**
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
const wrap = await asyncCheck(
|
||||
() => gradioApp().querySelector('#infinite_image_browsing_container_wrapper'),
|
||||
500,
|
||||
Infinity
|
||||
)
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
const wrap = await asyncCheck(() => gradioApp().querySelector(containerSelector), 500, Infinity)
|
||||
wrap.childNodes.forEach((v) => wrap.removeChild(v))
|
||||
const iframe = document.createElement('iframe')
|
||||
iframe.srcdoc = html
|
||||
iframe.style = `width: 100%;height:100vh`
|
||||
wrap.appendChild(iframe)
|
||||
|
||||
const imgTransferBus = new BroadcastChannel("iib-image-transfer-bus");
|
||||
imgTransferBus.addEventListener("message", async (ev) => {
|
||||
const data = JSON.parse(ev.data);
|
||||
if (shouldMaximize) {
|
||||
onUiTabChange(() => {
|
||||
const el = get_uiCurrentTabContent()
|
||||
if (el?.id.includes('infinite-image-browsing')) {
|
||||
const topRect = gradioApp().querySelector('#iib_top').getBoundingClientRect()
|
||||
wrap.style = `
|
||||
top:${Math.max(48, topRect.top) - 10}px;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
width: unset;
|
||||
bottom: 10px;`
|
||||
}
|
||||
})
|
||||
|
||||
iframe.style = `width: 100%;height:100%`
|
||||
}
|
||||
|
||||
const imgTransferBus = new BroadcastChannel('iib-image-transfer-bus')
|
||||
imgTransferBus.addEventListener('message', async (ev) => {
|
||||
const data = JSON.parse(ev.data)
|
||||
if (typeof data !== 'object') {
|
||||
return
|
||||
}
|
||||
|
|
@ -73,12 +95,11 @@ Promise.resolve().then(async () => {
|
|||
const appDoc = gradioApp()
|
||||
switch (data.event) {
|
||||
case 'click_hidden_button': {
|
||||
const btn = gradioApp().querySelector(`#${data.btnEleId}`);
|
||||
const btn = gradioApp().querySelector(`#${data.btnEleId}`)
|
||||
btn.click()
|
||||
break
|
||||
}
|
||||
case 'send_to_control_net':
|
||||
{
|
||||
case 'send_to_control_net': {
|
||||
data.type === 'img2img' ? window.switch_to_img2img() : window.switch_to_txt2img()
|
||||
await delay(100)
|
||||
const cn = appDoc.querySelector(`#${data.type}_controlnet`)
|
||||
|
|
@ -92,34 +113,34 @@ Promise.resolve().then(async () => {
|
|||
break
|
||||
}
|
||||
case 'send_to_outpaint': {
|
||||
switch2targetTab(getTabIdxById("openOutpaint"))
|
||||
switch2targetTab(getTabIdxById('openOutpaint'))
|
||||
await delay(100)
|
||||
const iframe = appDoc.querySelector('#openoutpaint-iframe')
|
||||
openoutpaint_send_image(await imgUrl2DataUrl(data.url))
|
||||
iframe.contentWindow.postMessage({
|
||||
key: appDoc.querySelector('#openoutpaint-key').value,
|
||||
type: "openoutpaint/set-prompt",
|
||||
prompt: data.prompt,
|
||||
negPrompt: data.negPrompt,
|
||||
})
|
||||
break;
|
||||
key: appDoc.querySelector('#openoutpaint-key').value,
|
||||
type: 'openoutpaint/set-prompt',
|
||||
prompt: data.prompt,
|
||||
negPrompt: data.negPrompt
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function imgUrl2DataUrl(imgUrl) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch(imgUrl)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = function() {
|
||||
const dataURL = reader.result;
|
||||
resolve(dataURL);
|
||||
};
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onloadend = function () {
|
||||
const dataURL = reader.result
|
||||
resolve(dataURL)
|
||||
}
|
||||
})
|
||||
.catch(error => reject(error));
|
||||
});
|
||||
.catch((error) => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
async function createPasteEvent(imgUrl) {
|
||||
|
|
@ -138,4 +159,4 @@ Promise.resolve().then(async () => {
|
|||
return pasteEvent
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ def on_ui_tabs():
|
|||
with gr.Blocks(analytics_enabled=False) as view:
|
||||
with gr.Row():
|
||||
with gr.Column():
|
||||
gr.HTML("", elem_id="iib_top")
|
||||
gr.HTML("error", elem_id="infinite_image_browsing_container_wrapper")
|
||||
# 以下是使用2个组件模拟粘贴过程
|
||||
img = gr.Image(
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
import{d as t,o as a,m as r,cI as n}from"./index-1da1c976.js";const p=t({__name:"ImgSliPagePane",props:{paneIdx:{},tabIdx:{},left:{},right:{}},setup(o){return(e,s)=>(a(),r(n,{left:e.left,right:e.right},null,8,["left","right"]))}});export{p as default};
|
||||
import{d as t,o as a,m as r,cI as n}from"./index-23e5bc7c.js";const p=t({__name:"ImgSliPagePane",props:{paneIdx:{},tabIdx:{},left:{},right:{}},setup(o){return(e,s)=>(a(),r(n,{left:e.left,right:e.right},null,8,["left","right"]))}});export{p as default};
|
||||
|
|
@ -1 +1 @@
|
|||
import{d as q,l as Q,ax as j,o as r,y as _,c as s,n as a,r as e,s as h,p as y,t as W,v as b,x as X,m as M,L as H,E as u,N as S,Q as J,R as K,X as Y}from"./index-1da1c976.js";import{h as Z,i as ee,L as te,R as ie,j as le,S as se}from"./fullScreenContextMenu-f340ec82.js";import{g as ne}from"./db-b7b49f28.js";import{u as ae}from"./hook-414c2f48.js";import"./shortcut-18b0b3db.js";const oe={class:"hint"},re={key:1,class:"preview-switch"},de=q({__name:"MatchedImageGrid",props:{tabIdx:{},paneIdx:{},selectedTagIds:{},id:{}},setup(T){const m=T,{queue:p,images:i,onContextMenuClickU:g,stackViewEl:V,previewIdx:n,previewing:v,onPreviewVisibleChange:D,previewImgMove:f,canPreview:w,itemSize:I,gridItems:z,showGenInfo:o,imageGenInfo:k,q:F,multiSelectedIdxs:$,onFileItemClick:B,scroller:x,showMenuIdx:d,onFileDragStart:E,onFileDragEnd:G,cellWidth:N,onScroll:R,updateImageTag:A}=ae();return Q(()=>m.selectedTagIds,async()=>{const{res:c}=p.pushAction(()=>ne(m.selectedTagIds));i.value=await c,await j(),A(),x.value.scrollToItem(0)},{immediate:!0}),(c,t)=>{const P=J,U=K,L=se;return r(),_("div",{class:"container",ref_key:"stackViewEl",ref:V},[s(L,{size:"large",spinning:!e(p).isIdle},{default:a(()=>[s(U,{visible:e(o),"onUpdate:visible":t[1]||(t[1]=l=>h(o)?o.value=l:null),width:"70vw","mask-closable":"",onOk:t[2]||(t[2]=l=>o.value=!1)},{cancelText:a(()=>[]),default:a(()=>[s(P,{active:"",loading:!e(F).isIdle},{default:a(()=>[y("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:t[0]||(t[0]=l=>e(W)(e(k)))},[y("div",oe,b(c.$t("doubleClickToCopy")),1),X(" "+b(e(k)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),e(i)?(r(),M(e(Z),{key:0,ref_key:"scroller",ref:x,class:"file-list",items:e(i),"item-size":e(I).first,"key-field":"fullpath","item-secondary-size":e(I).second,gridItems:e(z),onScroll:e(R)},{default:a(({item:l,index:C})=>[s(ee,{idx:C,file:l,"cell-width":e(N),"show-menu-idx":e(d),"onUpdate:showMenuIdx":t[3]||(t[3]=O=>h(d)?d.value=O:null),onDragstart:e(E),onDragend:e(G),onFileItemClick:e(B),"full-screen-preview-image-url":e(i)[e(n)]?e(H)(e(i)[e(n)]):"",selected:e($).includes(C),onContextMenuClick:e(g),onPreviewVisibleChange:e(D)},null,8,["idx","file","cell-width","show-menu-idx","onDragstart","onDragend","onFileItemClick","full-screen-preview-image-url","selected","onContextMenuClick","onPreviewVisibleChange"])]),_:1},8,["items","item-size","item-secondary-size","gridItems","onScroll"])):u("",!0),e(v)?(r(),_("div",re,[s(e(te),{onClick:t[4]||(t[4]=l=>e(f)("prev")),class:S({disable:!e(w)("prev")})},null,8,["class"]),s(e(ie),{onClick:t[5]||(t[5]=l=>e(f)("next")),class:S({disable:!e(w)("next")})},null,8,["class"])])):u("",!0)]),_:1},8,["spinning"]),e(v)&&e(i)&&e(i)[e(n)]?(r(),M(le,{key:0,file:e(i)[e(n)],idx:e(n),onContextMenuClick:e(g)},null,8,["file","idx","onContextMenuClick"])):u("",!0)],512)}}});const ve=Y(de,[["__scopeId","data-v-3c251729"]]);export{ve as default};
|
||||
import{d as q,l as Q,ax as j,o as r,y as _,c as s,n as a,r as e,s as h,p as y,t as W,v as b,x as X,m as M,L as H,E as u,N as S,Q as J,R as K,X as Y}from"./index-23e5bc7c.js";import{h as Z,i as ee,L as te,R as ie,j as le,S as se}from"./fullScreenContextMenu-c5f9ce74.js";import{g as ne}from"./db-52d8ead8.js";import{u as ae}from"./hook-13bccbae.js";import"./shortcut-98354a10.js";const oe={class:"hint"},re={key:1,class:"preview-switch"},de=q({__name:"MatchedImageGrid",props:{tabIdx:{},paneIdx:{},selectedTagIds:{},id:{}},setup(T){const m=T,{queue:p,images:i,onContextMenuClickU:g,stackViewEl:V,previewIdx:n,previewing:v,onPreviewVisibleChange:D,previewImgMove:f,canPreview:w,itemSize:I,gridItems:z,showGenInfo:o,imageGenInfo:k,q:F,multiSelectedIdxs:$,onFileItemClick:B,scroller:x,showMenuIdx:d,onFileDragStart:E,onFileDragEnd:G,cellWidth:N,onScroll:R,updateImageTag:A}=ae();return Q(()=>m.selectedTagIds,async()=>{const{res:c}=p.pushAction(()=>ne(m.selectedTagIds));i.value=await c,await j(),A(),x.value.scrollToItem(0)},{immediate:!0}),(c,t)=>{const P=J,U=K,L=se;return r(),_("div",{class:"container",ref_key:"stackViewEl",ref:V},[s(L,{size:"large",spinning:!e(p).isIdle},{default:a(()=>[s(U,{visible:e(o),"onUpdate:visible":t[1]||(t[1]=l=>h(o)?o.value=l:null),width:"70vw","mask-closable":"",onOk:t[2]||(t[2]=l=>o.value=!1)},{cancelText:a(()=>[]),default:a(()=>[s(P,{active:"",loading:!e(F).isIdle},{default:a(()=>[y("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:t[0]||(t[0]=l=>e(W)(e(k)))},[y("div",oe,b(c.$t("doubleClickToCopy")),1),X(" "+b(e(k)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),e(i)?(r(),M(e(Z),{key:0,ref_key:"scroller",ref:x,class:"file-list",items:e(i),"item-size":e(I).first,"key-field":"fullpath","item-secondary-size":e(I).second,gridItems:e(z),onScroll:e(R)},{default:a(({item:l,index:C})=>[s(ee,{idx:C,file:l,"cell-width":e(N),"show-menu-idx":e(d),"onUpdate:showMenuIdx":t[3]||(t[3]=O=>h(d)?d.value=O:null),onDragstart:e(E),onDragend:e(G),onFileItemClick:e(B),"full-screen-preview-image-url":e(i)[e(n)]?e(H)(e(i)[e(n)]):"",selected:e($).includes(C),onContextMenuClick:e(g),onPreviewVisibleChange:e(D)},null,8,["idx","file","cell-width","show-menu-idx","onDragstart","onDragend","onFileItemClick","full-screen-preview-image-url","selected","onContextMenuClick","onPreviewVisibleChange"])]),_:1},8,["items","item-size","item-secondary-size","gridItems","onScroll"])):u("",!0),e(v)?(r(),_("div",re,[s(e(te),{onClick:t[4]||(t[4]=l=>e(f)("prev")),class:S({disable:!e(w)("prev")})},null,8,["class"]),s(e(ie),{onClick:t[5]||(t[5]=l=>e(f)("next")),class:S({disable:!e(w)("next")})},null,8,["class"])])):u("",!0)]),_:1},8,["spinning"]),e(v)&&e(i)&&e(i)[e(n)]?(r(),M(le,{key:0,file:e(i)[e(n)],idx:e(n),onContextMenuClick:e(g)},null,8,["file","idx","onContextMenuClick"])):u("",!0)],512)}}});const ve=Y(de,[["__scopeId","data-v-3c251729"]]);export{ve as default};
|
||||
|
|
@ -1 +1 @@
|
|||
import{d as Y,$,aw as Z,bQ as ee,bP as B,o,y as k,c as r,r as e,bT as ae,m,n as d,x as w,v,E as f,s as V,p as A,t as ne,L as te,N as E,ax as le,ar as se,ai as ie,U as oe,V as re,Q as de,R as ue,X as ce}from"./index-1da1c976.js";import{h as pe,i as me,L as ve,R as fe,j as ge,S as ke}from"./fullScreenContextMenu-f340ec82.js";/* empty css */import{b as T,c as we,e as ye,u as Ie}from"./db-b7b49f28.js";import{u as xe}from"./hook-414c2f48.js";import"./shortcut-18b0b3db.js";const be={key:0,class:"search-bar"},Ce={class:"hint"},he={key:1,class:"preview-switch"},_e=Y({__name:"SubstrSearch",setup(Se){const{queue:s,images:t,onContextMenuClickU:y,stackViewEl:U,previewIdx:u,previewing:I,onPreviewVisibleChange:F,previewImgMove:x,canPreview:b,itemSize:C,gridItems:R,showGenInfo:c,imageGenInfo:h,q:N,multiSelectedIdxs:P,onFileItemClick:L,scroller:_,showMenuIdx:g,onFileDragStart:q,onFileDragEnd:G,cellWidth:K,onScroll:O,updateImageTag:Q}=xe(),p=$(""),n=$();Z(async()=>{n.value=await T(),n.value.img_count&&n.value.expired&&S()});const S=ee(()=>s.pushAction(async()=>(await Ie(),n.value=await T(),n.value)).res),M=async()=>{t.value=await s.pushAction(()=>ye(p.value)).res,await le(),Q(),_.value.scrollToItem(0),t.value.length||se.info(ie("fuzzy-search-noResults"))};return B("returnToIIB",async()=>{const i=await s.pushAction(we).res;n.value.expired=i.expired}),B("searchIndexExpired",()=>n.value&&(n.value.expired=!0)),(i,a)=>{const j=oe,z=re,H=de,W=ue,X=ke;return o(),k("div",{class:"container",ref_key:"stackViewEl",ref:U},[n.value?(o(),k("div",be,[r(j,{value:p.value,"onUpdate:value":a[0]||(a[0]=l=>p.value=l),placeholder:i.$t("fuzzy-search-placeholder"),disabled:!e(s).isIdle,onKeydown:ae(M,["enter"])},null,8,["value","placeholder","disabled","onKeydown"]),n.value.expired||!n.value.img_count?(o(),m(z,{key:0,onClick:e(S),loading:!e(s).isIdle,type:"primary"},{default:d(()=>[w(v(n.value.img_count===0?i.$t("generateIndexHint"):i.$t("UpdateIndex")),1)]),_:1},8,["onClick","loading"])):(o(),m(z,{key:1,type:"primary",onClick:M,loading:!e(s).isIdle,disabled:!p.value},{default:d(()=>[w(v(i.$t("search")),1)]),_:1},8,["loading","disabled"]))])):f("",!0),r(X,{size:"large",spinning:!e(s).isIdle},{default:d(()=>[r(W,{visible:e(c),"onUpdate:visible":a[2]||(a[2]=l=>V(c)?c.value=l:null),width:"70vw","mask-closable":"",onOk:a[3]||(a[3]=l=>c.value=!1)},{cancelText:d(()=>[]),default:d(()=>[r(H,{active:"",loading:!e(N).isIdle},{default:d(()=>[A("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:a[1]||(a[1]=l=>e(ne)(e(h)))},[A("div",Ce,v(i.$t("doubleClickToCopy")),1),w(" "+v(e(h)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),e(t)?(o(),m(e(pe),{key:0,ref_key:"scroller",ref:_,class:"file-list",items:e(t),"item-size":e(C).first,"key-field":"fullpath","item-secondary-size":e(C).second,gridItems:e(R),onScroll:e(O)},{default:d(({item:l,index:D})=>[r(me,{idx:D,file:l,"show-menu-idx":e(g),"onUpdate:showMenuIdx":a[4]||(a[4]=J=>V(g)?g.value=J:null),onFileItemClick:e(L),"full-screen-preview-image-url":e(t)[e(u)]?e(te)(e(t)[e(u)]):"","cell-width":e(K),selected:e(P).includes(D),onContextMenuClick:e(y),onDragstart:e(q),onDragend:e(G),onPreviewVisibleChange:e(F)},null,8,["idx","file","show-menu-idx","onFileItemClick","full-screen-preview-image-url","cell-width","selected","onContextMenuClick","onDragstart","onDragend","onPreviewVisibleChange"])]),_:1},8,["items","item-size","item-secondary-size","gridItems","onScroll"])):f("",!0),e(I)?(o(),k("div",he,[r(e(ve),{onClick:a[5]||(a[5]=l=>e(x)("prev")),class:E({disable:!e(b)("prev")})},null,8,["class"]),r(e(fe),{onClick:a[6]||(a[6]=l=>e(x)("next")),class:E({disable:!e(b)("next")})},null,8,["class"])])):f("",!0)]),_:1},8,["spinning"]),e(I)&&e(t)&&e(t)[e(u)]?(o(),m(ge,{key:1,file:e(t)[e(u)],idx:e(u),onContextMenuClick:e(y)},null,8,["file","idx","onContextMenuClick"])):f("",!0)],512)}}});const Ae=ce(_e,[["__scopeId","data-v-905bf6da"]]);export{Ae as default};
|
||||
import{d as Y,$,aw as Z,bQ as ee,bP as B,o,y as k,c as r,r as e,bT as ae,m,n as d,x as w,v,E as f,s as V,p as A,t as ne,L as te,N as E,ax as le,ar as se,ai as ie,U as oe,V as re,Q as de,R as ue,X as ce}from"./index-23e5bc7c.js";import{h as pe,i as me,L as ve,R as fe,j as ge,S as ke}from"./fullScreenContextMenu-c5f9ce74.js";/* empty css */import{b as T,c as we,e as ye,u as Ie}from"./db-52d8ead8.js";import{u as xe}from"./hook-13bccbae.js";import"./shortcut-98354a10.js";const be={key:0,class:"search-bar"},Ce={class:"hint"},he={key:1,class:"preview-switch"},_e=Y({__name:"SubstrSearch",setup(Se){const{queue:s,images:t,onContextMenuClickU:y,stackViewEl:U,previewIdx:u,previewing:I,onPreviewVisibleChange:F,previewImgMove:x,canPreview:b,itemSize:C,gridItems:R,showGenInfo:c,imageGenInfo:h,q:N,multiSelectedIdxs:P,onFileItemClick:L,scroller:_,showMenuIdx:g,onFileDragStart:q,onFileDragEnd:G,cellWidth:K,onScroll:O,updateImageTag:Q}=xe(),p=$(""),n=$();Z(async()=>{n.value=await T(),n.value.img_count&&n.value.expired&&S()});const S=ee(()=>s.pushAction(async()=>(await Ie(),n.value=await T(),n.value)).res),M=async()=>{t.value=await s.pushAction(()=>ye(p.value)).res,await le(),Q(),_.value.scrollToItem(0),t.value.length||se.info(ie("fuzzy-search-noResults"))};return B("returnToIIB",async()=>{const i=await s.pushAction(we).res;n.value.expired=i.expired}),B("searchIndexExpired",()=>n.value&&(n.value.expired=!0)),(i,a)=>{const j=oe,z=re,H=de,W=ue,X=ke;return o(),k("div",{class:"container",ref_key:"stackViewEl",ref:U},[n.value?(o(),k("div",be,[r(j,{value:p.value,"onUpdate:value":a[0]||(a[0]=l=>p.value=l),placeholder:i.$t("fuzzy-search-placeholder"),disabled:!e(s).isIdle,onKeydown:ae(M,["enter"])},null,8,["value","placeholder","disabled","onKeydown"]),n.value.expired||!n.value.img_count?(o(),m(z,{key:0,onClick:e(S),loading:!e(s).isIdle,type:"primary"},{default:d(()=>[w(v(n.value.img_count===0?i.$t("generateIndexHint"):i.$t("UpdateIndex")),1)]),_:1},8,["onClick","loading"])):(o(),m(z,{key:1,type:"primary",onClick:M,loading:!e(s).isIdle,disabled:!p.value},{default:d(()=>[w(v(i.$t("search")),1)]),_:1},8,["loading","disabled"]))])):f("",!0),r(X,{size:"large",spinning:!e(s).isIdle},{default:d(()=>[r(W,{visible:e(c),"onUpdate:visible":a[2]||(a[2]=l=>V(c)?c.value=l:null),width:"70vw","mask-closable":"",onOk:a[3]||(a[3]=l=>c.value=!1)},{cancelText:d(()=>[]),default:d(()=>[r(H,{active:"",loading:!e(N).isIdle},{default:d(()=>[A("div",{style:{width:"100%","word-break":"break-all","white-space":"pre-line","max-height":"70vh",overflow:"auto"},onDblclick:a[1]||(a[1]=l=>e(ne)(e(h)))},[A("div",Ce,v(i.$t("doubleClickToCopy")),1),w(" "+v(e(h)),1)],32)]),_:1},8,["loading"])]),_:1},8,["visible"]),e(t)?(o(),m(e(pe),{key:0,ref_key:"scroller",ref:_,class:"file-list",items:e(t),"item-size":e(C).first,"key-field":"fullpath","item-secondary-size":e(C).second,gridItems:e(R),onScroll:e(O)},{default:d(({item:l,index:D})=>[r(me,{idx:D,file:l,"show-menu-idx":e(g),"onUpdate:showMenuIdx":a[4]||(a[4]=J=>V(g)?g.value=J:null),onFileItemClick:e(L),"full-screen-preview-image-url":e(t)[e(u)]?e(te)(e(t)[e(u)]):"","cell-width":e(K),selected:e(P).includes(D),onContextMenuClick:e(y),onDragstart:e(q),onDragend:e(G),onPreviewVisibleChange:e(F)},null,8,["idx","file","show-menu-idx","onFileItemClick","full-screen-preview-image-url","cell-width","selected","onContextMenuClick","onDragstart","onDragend","onPreviewVisibleChange"])]),_:1},8,["items","item-size","item-secondary-size","gridItems","onScroll"])):f("",!0),e(I)?(o(),k("div",he,[r(e(ve),{onClick:a[5]||(a[5]=l=>e(x)("prev")),class:E({disable:!e(b)("prev")})},null,8,["class"]),r(e(fe),{onClick:a[6]||(a[6]=l=>e(x)("next")),class:E({disable:!e(b)("next")})},null,8,["class"])])):f("",!0)]),_:1},8,["spinning"]),e(I)&&e(t)&&e(t)[e(u)]?(o(),m(ge,{key:1,file:e(t)[e(u)],idx:e(u),onContextMenuClick:e(y)},null,8,["file","idx","onContextMenuClick"])):f("",!0)],512)}}});const Ae=ce(_e,[["__scopeId","data-v-905bf6da"]]);export{Ae as default};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
import{c6 as t}from"./index-1da1c976.js";const o=async()=>(await t.value.get("/db/basic_info")).data,c=async()=>(await t.value.get("/db/expired_dirs")).data,r=async()=>{await t.value.post("/db/update_image_data",{},{timeout:1/0})},d=async a=>(await t.value.post("/db/match_images_by_tags",a)).data,g=async a=>(await t.value.post("/db/add_custom_tag",a)).data,u=async a=>(await t.value.post("/db/toggle_custom_tag_to_img",a)).data,p=async a=>{await t.value.post("/db/remove_custom_tag",a)},i=async a=>(await t.value.get("/db/search_by_substr",{params:{substr:a}})).data,e="/db/scanned_paths",m=async a=>{await t.value.post(e,{path:a})},_=async a=>{await t.value.delete(e,{data:{path:a}})},b=async a=>(await t.value.post("/db/get_image_tags",{paths:a})).data;export{m as a,o as b,c,g as d,i as e,b as f,d as g,_ as h,p as r,u as t,r as u};
|
||||
import{c6 as t}from"./index-23e5bc7c.js";const o=async()=>(await t.value.get("/db/basic_info")).data,c=async()=>(await t.value.get("/db/expired_dirs")).data,r=async()=>{await t.value.post("/db/update_image_data",{},{timeout:1/0})},d=async a=>(await t.value.post("/db/match_images_by_tags",a)).data,g=async a=>(await t.value.post("/db/add_custom_tag",a)).data,u=async a=>(await t.value.post("/db/toggle_custom_tag_to_img",a)).data,p=async a=>{await t.value.post("/db/remove_custom_tag",a)},i=async a=>(await t.value.get("/db/search_by_substr",{params:{substr:a}})).data,e="/db/scanned_paths",m=async a=>{await t.value.post(e,{path:a})},_=async a=>{await t.value.delete(e,{data:{path:a}})},b=async a=>(await t.value.post("/db/get_image_tags",{paths:a})).data;export{m as a,o as b,c,g as d,i as e,b as f,d as g,_ as h,p as r,u as t,r as u};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
import{$ as D,bO as E,bd as P,aC as $}from"./index-1da1c976.js";import{k as z,u as G,b as L,f as O,a as Q,c as R,d as V,e as _,l as A}from"./fullScreenContextMenu-f340ec82.js";const U=()=>{const e=D(),c=E(),u=z(),n={tabIdx:-1,target:"local",paneIdx:-1,walkMode:!1},{stackViewEl:r,multiSelectedIdxs:d,stack:m,scroller:o}=G({images:e}).toRefs(),{itemSize:g,gridItems:p,cellWidth:v}=L(n),{showMenuIdx:I}=O();Q(n);const{onFileDragStart:f,onFileDragEnd:x}=R(),{showGenInfo:h,imageGenInfo:w,q:k,onContextMenuClick:i,onFileItemClick:S}=V(n,{openNext:P}),{previewIdx:M,previewing:b,onPreviewVisibleChange:C,previewImgMove:F,canPreview:y}=_(n),T=async(s,a,t)=>{m.value=[{curr:"",files:e.value}],await i(s,a,t)};A("removeFiles",async({paths:s})=>{var a;e.value=(a=e.value)==null?void 0:a.filter(t=>!s.includes(t.fullpath))});const l=()=>{const s=o.value;if(s&&e.value){const a=e.value.slice(Math.max(s.$_startIndex-10,0),s.$_endIndex+10).map(t=>t.fullpath);u.fetchImageTags(a)}},q=$(l,300);return{scroller:o,queue:c,images:e,onContextMenuClickU:T,stackViewEl:r,previewIdx:M,previewing:b,onPreviewVisibleChange:C,previewImgMove:F,canPreview:y,itemSize:g,gridItems:p,showGenInfo:h,imageGenInfo:w,q:k,onContextMenuClick:i,onFileItemClick:S,showMenuIdx:I,multiSelectedIdxs:d,onFileDragStart:f,onFileDragEnd:x,cellWidth:v,onScroll:q,updateImageTag:l}};export{U as u};
|
||||
import{$ as D,bO as E,bd as P,aC as $}from"./index-23e5bc7c.js";import{k as z,u as G,b as L,f as O,a as Q,c as R,d as V,e as _,l as A}from"./fullScreenContextMenu-c5f9ce74.js";const U=()=>{const e=D(),c=E(),u=z(),n={tabIdx:-1,target:"local",paneIdx:-1,walkMode:!1},{stackViewEl:r,multiSelectedIdxs:d,stack:m,scroller:o}=G({images:e}).toRefs(),{itemSize:g,gridItems:p,cellWidth:v}=L(n),{showMenuIdx:I}=O();Q(n);const{onFileDragStart:f,onFileDragEnd:x}=R(),{showGenInfo:h,imageGenInfo:w,q:k,onContextMenuClick:i,onFileItemClick:S}=V(n,{openNext:P}),{previewIdx:M,previewing:b,onPreviewVisibleChange:C,previewImgMove:F,canPreview:y}=_(n),T=async(s,a,t)=>{m.value=[{curr:"",files:e.value}],await i(s,a,t)};A("removeFiles",async({paths:s})=>{var a;e.value=(a=e.value)==null?void 0:a.filter(t=>!s.includes(t.fullpath))});const l=()=>{const s=o.value;if(s&&e.value){const a=e.value.slice(Math.max(s.$_startIndex-10,0),s.$_endIndex+10).map(t=>t.fullpath);u.fetchImageTags(a)}},q=$(l,300);return{scroller:o,queue:c,images:e,onContextMenuClickU:T,stackViewEl:r,previewIdx:M,previewing:b,onPreviewVisibleChange:C,previewImgMove:F,canPreview:y,itemSize:g,gridItems:p,showGenInfo:h,imageGenInfo:w,q:k,onContextMenuClick:i,onFileItemClick:S,showMenuIdx:I,multiSelectedIdxs:d,onFileDragStart:f,onFileDragEnd:x,cellWidth:v,onScroll:q,updateImageTag:l}};export{U as u};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
import{cH as s}from"./index-1da1c976.js";var r=1/0,i=17976931348623157e292;function e(t){if(!t)return t===0?t:0;if(t=s(t),t===r||t===-r){var n=t<0?-1:1;return n*i}return t===t?t:0}function f(t){var n=t==null?0:t.length;return n?t[n-1]:void 0}const h=t=>{const n=[];return t.shiftKey&&n.push("Shift"),t.ctrlKey&&n.push("Ctrl"),t.metaKey&&n.push("Cmd"),(t.code.startsWith("Key")||t.code.startsWith("Digit"))&&n.push(t.code),n.join(" + ")};export{h as g,f as l,e as t};
|
||||
import{cH as s}from"./index-23e5bc7c.js";var r=1/0,i=17976931348623157e292;function e(t){if(!t)return t===0?t:0;if(t=s(t),t===r||t===-r){var n=t<0?-1:1;return n*i}return t===t?t:0}function f(t){var n=t==null?0:t.length;return n?t[n-1]:void 0}const h=t=>{const n=[];return t.shiftKey&&n.push("Shift"),t.ctrlKey&&n.push("Ctrl"),t.metaKey&&n.push("Cmd"),(t.code.startsWith("Key")||t.code.startsWith("Digit"))&&n.push(t.code),n.join(" + ")};export{h as g,f as l,e as t};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Infinite Image Browsing</title>
|
||||
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-1da1c976.js"></script>
|
||||
<script type="module" crossorigin src="/infinite_image_browsing/fe-static/assets/index-23e5bc7c.js"></script>
|
||||
<link rel="stylesheet" href="/infinite_image_browsing/fe-static/assets/index-618900f2.css">
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,29 @@
|
|||
|
||||
Promise.resolve().then(async () => {
|
||||
/**
|
||||
* This is a file generated using `yarn build`.
|
||||
* If you want to make changes, please modify `index.tpl.js` and run the command to generate it again.
|
||||
*/
|
||||
const html = `__built_html__`
|
||||
const delay = (timeout = 0) => new Promise(resolve => setTimeout(resolve, timeout))
|
||||
let containerSelector = '#infinite_image_browsing_container_wrapper'
|
||||
let shouldMaximize = true
|
||||
|
||||
try {
|
||||
containerSelector = __iib_root_container__
|
||||
shouldMaximize = __iib_should_maximize__
|
||||
} catch (e) {}
|
||||
|
||||
const delay = (timeout = 0) => new Promise((resolve) => setTimeout(resolve, timeout))
|
||||
const asyncCheck = async (getter, checkSize = 100, timeout = 1000) => {
|
||||
let target = getter()
|
||||
let num = 0
|
||||
while ((checkSize * num < timeout) && (target === undefined || target === null)) {
|
||||
while (checkSize * num < timeout && (target === undefined || target === null)) {
|
||||
await delay(checkSize)
|
||||
target = getter()
|
||||
num++
|
||||
}
|
||||
return target
|
||||
}
|
||||
const getTabIdxById = (id) => {
|
||||
const getTabIdxById = (id) => {
|
||||
const tabList = gradioApp().querySelectorAll('#tabs > .tabitem[id^=tab_]')
|
||||
return Array.from(tabList).findIndex((v) => v.id.includes(id))
|
||||
}
|
||||
|
|
@ -30,22 +37,37 @@ Promise.resolve().then(async () => {
|
|||
}
|
||||
|
||||
/**
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
const wrap = await asyncCheck(
|
||||
() => gradioApp().querySelector('#infinite_image_browsing_container_wrapper'),
|
||||
500,
|
||||
Infinity
|
||||
)
|
||||
* @type {HTMLDivElement}
|
||||
*/
|
||||
const wrap = await asyncCheck(() => gradioApp().querySelector(containerSelector), 500, Infinity)
|
||||
wrap.childNodes.forEach((v) => wrap.removeChild(v))
|
||||
const iframe = document.createElement('iframe')
|
||||
iframe.srcdoc = html
|
||||
iframe.style = `width: 100%;height:100vh`
|
||||
wrap.appendChild(iframe)
|
||||
|
||||
const imgTransferBus = new BroadcastChannel("iib-image-transfer-bus");
|
||||
imgTransferBus.addEventListener("message", async (ev) => {
|
||||
const data = JSON.parse(ev.data);
|
||||
if (shouldMaximize) {
|
||||
onUiTabChange(() => {
|
||||
const el = get_uiCurrentTabContent()
|
||||
if (el?.id.includes('infinite-image-browsing')) {
|
||||
const topRect = gradioApp().querySelector('#iib_top').getBoundingClientRect()
|
||||
wrap.style = `
|
||||
top:${Math.max(48, topRect.top) - 10}px;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
width: unset;
|
||||
bottom: 10px;`
|
||||
}
|
||||
})
|
||||
|
||||
iframe.style = `width: 100%;height:100%`
|
||||
}
|
||||
|
||||
const imgTransferBus = new BroadcastChannel('iib-image-transfer-bus')
|
||||
imgTransferBus.addEventListener('message', async (ev) => {
|
||||
const data = JSON.parse(ev.data)
|
||||
if (typeof data !== 'object') {
|
||||
return
|
||||
}
|
||||
|
|
@ -53,12 +75,11 @@ Promise.resolve().then(async () => {
|
|||
const appDoc = gradioApp()
|
||||
switch (data.event) {
|
||||
case 'click_hidden_button': {
|
||||
const btn = gradioApp().querySelector(`#${data.btnEleId}`);
|
||||
const btn = gradioApp().querySelector(`#${data.btnEleId}`)
|
||||
btn.click()
|
||||
break
|
||||
}
|
||||
case 'send_to_control_net':
|
||||
{
|
||||
case 'send_to_control_net': {
|
||||
data.type === 'img2img' ? window.switch_to_img2img() : window.switch_to_txt2img()
|
||||
await delay(100)
|
||||
const cn = appDoc.querySelector(`#${data.type}_controlnet`)
|
||||
|
|
@ -72,34 +93,34 @@ Promise.resolve().then(async () => {
|
|||
break
|
||||
}
|
||||
case 'send_to_outpaint': {
|
||||
switch2targetTab(getTabIdxById("openOutpaint"))
|
||||
switch2targetTab(getTabIdxById('openOutpaint'))
|
||||
await delay(100)
|
||||
const iframe = appDoc.querySelector('#openoutpaint-iframe')
|
||||
openoutpaint_send_image(await imgUrl2DataUrl(data.url))
|
||||
iframe.contentWindow.postMessage({
|
||||
key: appDoc.querySelector('#openoutpaint-key').value,
|
||||
type: "openoutpaint/set-prompt",
|
||||
prompt: data.prompt,
|
||||
negPrompt: data.negPrompt,
|
||||
})
|
||||
break;
|
||||
key: appDoc.querySelector('#openoutpaint-key').value,
|
||||
type: 'openoutpaint/set-prompt',
|
||||
prompt: data.prompt,
|
||||
negPrompt: data.negPrompt
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function imgUrl2DataUrl(imgUrl) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch(imgUrl)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = function() {
|
||||
const dataURL = reader.result;
|
||||
resolve(dataURL);
|
||||
};
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onloadend = function () {
|
||||
const dataURL = reader.result
|
||||
resolve(dataURL)
|
||||
}
|
||||
})
|
||||
.catch(error => reject(error));
|
||||
});
|
||||
.catch((error) => reject(error))
|
||||
})
|
||||
}
|
||||
|
||||
async function createPasteEvent(imgUrl) {
|
||||
|
|
@ -118,4 +139,4 @@ Promise.resolve().then(async () => {
|
|||
return pasteEvent
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const tags = computed(() => {
|
|||
<a-sub-menu key="sendToThirdPartyExtension" :title="$t('sendToThirdPartyExtension')">
|
||||
<a-menu-item key="send2controlnet-txt2img">ControlNet - {{ $t('t2i') }}</a-menu-item>
|
||||
<a-menu-item key="send2controlnet-img2img">ControlNet - {{ $t('i2i') }}</a-menu-item>
|
||||
<a-menu-item key="send2outpaint">Outpaint</a-menu-item>
|
||||
<a-menu-item key="send2outpaint">openOutpaint</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</template>
|
||||
<a-menu-item key="send2savedDir">{{ $t('send2savedDir') }}</a-menu-item>
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ const baseInfoTags = computed(() => {
|
|||
<a-sub-menu key="sendToThirdPartyExtension" :title="$t('sendToThirdPartyExtension')">
|
||||
<a-menu-item key="send2controlnet-txt2img">ControlNet - {{ $t('t2i') }}</a-menu-item>
|
||||
<a-menu-item key="send2controlnet-img2img">ControlNet - {{ $t('i2i') }}</a-menu-item>
|
||||
<a-menu-item key="send2outpaint">Outpaint</a-menu-item>
|
||||
<a-menu-item key="send2outpaint">openOutpaint</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</template>
|
||||
<a-menu-item key="send2savedDir">{{ $t('send2savedDir') }}</a-menu-item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue