diff --git a/javascript/index.js b/javascript/index.js index 6493862..fffb815 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1 +1 @@ -(function(){"use strict";var it=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof{}<"u"?{}:typeof self<"u"?self:{},G={},rt={get exports(){return G},set exports(r){G=r}};(function(r,i){(function(c,f){r.exports=f()})(it,function(){var c=1e3,f=6e4,y=36e5,w="millisecond",$="second",S="minute",_="hour",v="day",O="week",M="month",A="quarter",h="year",Y="date",et="Invalid Date",ht=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,mt=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,pt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(s){var n=["th","st","nd","rd"],t=s%100;return"["+s+(n[(t-20)%10]||n[t]||n[0])+"]"}},V=function(s,n,t){var o=String(s);return!o||o.length>=n?s:""+Array(n+1-o.length).join(t)+s},$t={s:V,z:function(s){var n=-s.utcOffset(),t=Math.abs(n),o=Math.floor(t/60),e=t%60;return(n<=0?"+":"-")+V(o,2,"0")+":"+V(e,2,"0")},m:function s(n,t){if(n.date()1)return s(a[0])}else{var d=n.name;q[d]=n,e=d}return!o&&e&&(I=e),e||!o&&I},g=function(s,n){if(Z(s))return s.clone();var t=typeof n=="object"?n:{};return t.date=s,t.args=arguments,new U(t)},l=$t;l.l=P,l.i=Z,l.w=function(s,n){return g(s,{locale:n.$L,utc:n.$u,x:n.$x,$offset:n.$offset})};var U=function(){function s(t){this.$L=P(t.locale,null,!0),this.parse(t)}var n=s.prototype;return n.parse=function(t){this.$d=function(o){var e=o.date,u=o.utc;if(e===null)return new Date(NaN);if(l.u(e))return new Date;if(e instanceof Date)return new Date(e);if(typeof e=="string"&&!/Z$/i.test(e)){var a=e.match(ht);if(a){var d=a[2]-1||0,p=(a[7]||"0").substring(0,3);return u?new Date(Date.UTC(a[1],d,a[3]||1,a[4]||0,a[5]||0,a[6]||0,p)):new Date(a[1],d,a[3]||1,a[4]||0,a[5]||0,a[6]||0,p)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},n.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},n.$utils=function(){return l},n.isValid=function(){return this.$d.toString()!==et},n.isSame=function(t,o){var e=g(t);return this.startOf(o)<=e&&e<=this.endOf(o)},n.isAfter=function(t,o){return g(t)new Promise(f=>{const y=new MutationObserver(()=>{!!r.querySelector(i)==c&&(y.disconnect(),f(void 0))});y.observe(r,{childList:!0,subtree:!0}),!!r.querySelector(i)==c&&f(void 0)}),K=r=>new Promise(function(i,c){setTimeout(()=>c("Timeout"),r)}),X=(r,i)=>Promise.race([Q(r,i,!0),K(1e4)]),ut=(r,i)=>Promise.race([Q(r,i,!1),K(1e4)]),H=async(r,i,c)=>{const f=await(await fetch(i)).blob(),y=new File([f],c),w=new DataTransfer;w.items.add(y),r.querySelector("button[aria-label='Clear']")?.click(),await ut(r,"button[aria-label='Clear']");const $=r.querySelector("input[type='file']");$.value="",$.files=w.files,$.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),await X(r,"button[aria-label='Clear']")},L=(r,i)=>{r.querySelectorAll("button")[i].click()},ct=r=>{const i=r.querySelector(":scope > .label-wrap");i&&(i.classList.contains("open")||i.click())},dt=r=>{gradioApp().querySelector("#openpose3d_iframe").contentWindow.postMessage(r,"*")},z={},J={},lt=()=>{window.addEventListener("message",r=>{const{data:i}=r;if(i&&i.cmd&&i.cmd=="openpose-3d"&&i.method){const c=i.method;console.log("Method",c,r),i.type=="return"?z[c]?.(i.payload):i.type=="event"&&(console.log(J),J[c]?.(i.payload))}})},ft=r=>{Object.assign(J,r)};function W(r,...i){return new Promise((c,f)=>{const y=setTimeout(()=>{delete z[r],f({method:r,status:"Timeout"})},1e3),w=$=>{clearTimeout(y),c($)};z[r]=w,dt({cmd:"openpose-3d",method:r,type:"call",payload:i})})}const tt=()=>{const r=gradioApp().querySelector("#tab_threedopenpose");return r&&r.style.display!="none"};let R=!1,j=!1;onUiLoaded(async()=>{console.log("sd-webui-3d-open-pose-editor: onUiLoaded");const r=async(i,c,f,y,w,$,S,_,v)=>{let O=i.querySelector("#controlnet");if(O)ct(O);else{for(const h of i.querySelectorAll(".cursor-pointer > span"))h.textContent?.includes("ControlNet")&&(h.textContent?.includes("M2M")||(O=h.parentElement?.parentElement));if(!O){console.error("ControlNet element not found");return}}await X(O,'div[data-testid="image"]');const M=O.querySelectorAll('div[data-testid="image"]'),A=O.querySelector(".tab-nav");if(c&&f!=""&&f!="-"){const h=Number(f);A&&L(A,h),await H(M[h],c,"pose.png")}if(y&&w!=""&&w!="-"){const h=Number(w);A&&L(A,h),await H(M[h],y,"depth.png")}if($&&S!=""&&S!="-"){const h=Number(S);A&&L(A,h),await H(M[h],$,"normal.png")}if(_&&v!=""&&v!="-"){const h=Number(v);A&&L(A,h),await H(M[h],_,"canny.png")}};window.openpose3d={sendTxt2img:async(i,c,f,y,w,$,S,_)=>{const v=gradioApp().querySelector("#txt2img_script_container");switch_to_txt2img(),await r(v,i,c,f,y,w,$,S,_)},sendImg2img:async(i,c,f,y,w,$,S,_)=>{const v=gradioApp().querySelector("#img2img_script_container");switch_to_img2img(),await r(v,i,c,f,y,w,$,S,_)},downloadImage:(i,c)=>{if(!i)return;const f=c+"_"+ot()+".png";at(i,f)}},lt(),ft({MakeImages:async i=>{for(const[f,y]of Object.entries(i)){const w=gradioApp().querySelector(`#openpose3d_${f}_image`);await H(w,y,f+".png")}const c=gradioApp().querySelector("#openpose3d_main");L(c,1)}});for(let i=0;i<30;++i)try{await W("GetAppVersion"),R=!0;break}catch(c){if(c.status!="Timeout")throw c}if(!R){console.error("sd-webui-3d-open-pose-editor: Timeout");return}tt()||await W("Pause")}),onUiUpdate(async()=>{R&&(tt()?j&&(j=!1,await W("Resume")):j||(j=!0,await W("Pause")))})})(); +(function(){"use strict";var rt=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof{}<"u"?{}:typeof self<"u"?self:{},R={},st={get exports(){return R},set exports(r){R=r}};(function(r,i){(function(c,f){r.exports=f()})(rt,function(){var c=1e3,f=6e4,g=36e5,b="millisecond",w="second",h="minute",_="hour",v="day",O="week",S="month",A="quarter",$="year",m="date",nt="Invalid Date",ht=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,mt=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,pt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(s){var n=["th","st","nd","rd"],t=s%100;return"["+s+(n[(t-20)%10]||n[t]||n[0])+"]"}},Z=function(s,n,t){var o=String(s);return!o||o.length>=n?s:""+Array(n+1-o.length).join(t)+s},$t={s:Z,z:function(s){var n=-s.utcOffset(),t=Math.abs(n),o=Math.floor(t/60),e=t%60;return(n<=0?"+":"-")+Z(o,2,"0")+":"+Z(e,2,"0")},m:function s(n,t){if(n.date()1)return s(a[0])}else{var l=n.name;E[l]=n,e=l}return!o&&e&&(H=e),e||!o&&H},M=function(s,n){if(B(s))return s.clone();var t=typeof n=="object"?n:{};return t.date=s,t.args=arguments,new U(t)},d=$t;d.l=P,d.i=B,d.w=function(s,n){return M(s,{locale:n.$L,utc:n.$u,x:n.$x,$offset:n.$offset})};var U=function(){function s(t){this.$L=P(t.locale,null,!0),this.parse(t)}var n=s.prototype;return n.parse=function(t){this.$d=function(o){var e=o.date,u=o.utc;if(e===null)return new Date(NaN);if(d.u(e))return new Date;if(e instanceof Date)return new Date(e);if(typeof e=="string"&&!/Z$/i.test(e)){var a=e.match(ht);if(a){var l=a[2]-1||0,y=(a[7]||"0").substring(0,3);return u?new Date(Date.UTC(a[1],l,a[3]||1,a[4]||0,a[5]||0,a[6]||0,y)):new Date(a[1],l,a[3]||1,a[4]||0,a[5]||0,a[6]||0,y)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},n.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},n.$utils=function(){return d},n.isValid=function(){return this.$d.toString()!==nt},n.isSame=function(t,o){var e=M(t);return this.startOf(o)<=e&&e<=this.endOf(o)},n.isAfter=function(t,o){return M(t)new Promise(f=>{const g=new MutationObserver(()=>{!!r.querySelector(i)==c&&(g.disconnect(),f(void 0))});g.observe(r,{childList:!0,subtree:!0}),!!r.querySelector(i)==c&&f(void 0)}),X=r=>new Promise(function(i,c){setTimeout(()=>c("Timeout"),r)}),N=(r,i)=>Promise.race([K(r,i,!0),X(1e4)]),tt=(r,i)=>Promise.race([K(r,i,!1),X(1e4)]),W=async(r,i,c)=>{const f=await(await fetch(i)).blob(),g=new File([f],c),b=new DataTransfer;b.items.add(g);const w=r.querySelector("button[aria-label='Remove Image']");w&&(w?.click(),await tt(r,"button[aria-label='Clear']")),await N(r,"input[type='file']");const h=r.querySelector("input[type='file']");h.value="",h.files=b.files,h.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),await N(r,"button[aria-label='Clear']")},Y=(r,i)=>{r.querySelectorAll("button")[i].click()},ct=r=>{const i=r.querySelector(":scope > .label-wrap");i&&(i.classList.contains("open")||i.click())},lt=r=>{gradioApp().querySelector("#openpose3d_iframe").contentWindow.postMessage(r,"*")},z={},J={},dt=()=>{window.addEventListener("message",r=>{const{data:i}=r;if(i&&i.cmd&&i.cmd=="openpose-3d"&&i.method){const c=i.method;console.log("Method",c,r),i.type=="return"?z[c]?.(i.payload):i.type=="event"&&(console.log(J),J[c]?.(i.payload))}})},ft=r=>{Object.assign(J,r)};function j(r,...i){return new Promise((c,f)=>{const g=setTimeout(()=>{delete z[r],f({method:r,status:"Timeout"})},1e3),b=w=>{clearTimeout(g),c(w)};z[r]=b,lt({cmd:"openpose-3d",method:r,type:"call",payload:i})})}const et=()=>{const r=gradioApp().querySelector("#tab_threedopenpose");return r&&r.style.display!="none"};let V=!1,F=!1;onUiLoaded(async()=>{console.log("sd-webui-3d-open-pose-editor: onUiLoaded");const r=async(i,c,f,g,b,w,h,_,v)=>{let O=i.querySelector("#controlnet");if(O)ct(O);else{for(const m of i.querySelectorAll(".cursor-pointer > span"))m.textContent?.includes("ControlNet")&&(m.textContent?.includes("M2M")||(O=m.parentElement?.parentElement));if(!O){console.error("ControlNet element not found");return}}const S="#txt2img_controlnet_tabs > div.gradio-tabitem";await N(O,S);const A=O.querySelectorAll(S),$=O.querySelector(".tab-nav");if(c&&f!=""&&f!="-"){const m=Number(f);$&&Y($,m),await W(A[m],c,"pose.png")}if(g&&b!=""&&b!="-"){const m=Number(b);$&&Y($,m),await W(A[m],g,"depth.png")}if(w&&h!=""&&h!="-"){const m=Number(h);$&&Y($,m),await W(A[m],w,"normal.png")}if(_&&v!=""&&v!="-"){const m=Number(v);$&&Y($,m),await W(A[m],_,"canny.png")}};window.openpose3d={sendTxt2img:async(i,c,f,g,b,w,h,_)=>{const v=gradioApp().querySelector("#txt2img_script_container");switch_to_txt2img(),await r(v,i,c,f,g,b,w,h,_)},sendImg2img:async(i,c,f,g,b,w,h,_)=>{const v=gradioApp().querySelector("#img2img_script_container");switch_to_img2img(),await r(v,i,c,f,g,b,w,h,_)},downloadImage:(i,c)=>{if(!i)return;const f=c+"_"+at()+".png";ut(i,f)}},dt(),ft({MakeImages:async i=>{for(const[f,g]of Object.entries(i)){const b=gradioApp().querySelector(`#openpose3d_${f}_image`);await(async(h,_,v)=>{const O=await(await fetch(_)).blob(),S=new File([O],v),A=new DataTransfer;A.items.add(S),h.querySelector("button[aria-label='Clear']")?.click(),await tt(h,"button[aria-label='Clear']");const $=h.querySelector("input[type='file']");$.value="",$.files=A.files,$.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),await N(h,"button[aria-label='Clear']")})(b,g,f+".png")}const c=gradioApp().querySelector("#openpose3d_main");Y(c,1)}});for(let i=0;i<30;++i)try{await j("GetAppVersion"),V=!0;break}catch(c){if(c.status!="Timeout")throw c}if(!V){console.error("sd-webui-3d-open-pose-editor: Timeout");return}et()||await j("Pause")}),onUiUpdate(async()=>{V&&(et()?F&&(F=!1,await j("Resume")):F||(F=!0,await j("Pause")))})})(); diff --git a/src/environments/extension/entry.ts b/src/environments/extension/entry.ts index c6df09d..9be131f 100644 --- a/src/environments/extension/entry.ts +++ b/src/environments/extension/entry.ts @@ -5,6 +5,7 @@ import { switchGradioTab, updateGradioImage, waitForElementToBeInDocument, + waitForElementToBeRemoved, } from './internal/gradio' import { AddMessageEventListener, @@ -55,8 +56,9 @@ onUiLoaded(async () => { } else { openGradioAccordion(element) } - await waitForElementToBeInDocument(element, 'div[data-testid="image"]') - const imageElems = element.querySelectorAll('div[data-testid="image"]') + const tabSelector = '#txt2img_controlnet_tabs > div.gradio-tabitem' + await waitForElementToBeInDocument(element, tabSelector); + const imageElems = element.querySelectorAll(tabSelector); const tabsElem = element.querySelector('.tab-nav') if (poseImage && poseTarget != '' && poseTarget != '-') { const tabIndex = Number(poseTarget) @@ -169,7 +171,32 @@ onUiLoaded(async () => { const element = gradioApp().querySelector( `#openpose3d_${name}_image` )! - await updateGradioImage(element, url, name + '.png') + const updateImage = async ( + element: Element, + url: string, + name: string + ) => { + const blob = await (await fetch(url)).blob() + const file = new File([blob], name) + const dt = new DataTransfer() + dt.items.add(file) + + element + .querySelector("button[aria-label='Clear']") + ?.click() + await waitForElementToBeRemoved(element, "button[aria-label='Clear']") + const input = element.querySelector("input[type='file']")! + input.value = '' + input.files = dt.files + input.dispatchEvent( + new Event('change', { + bubbles: true, + composed: true, + }) + ) + await waitForElementToBeInDocument(element, "button[aria-label='Clear']") + } + await updateImage(element, url, name + '.png') } const tabs = gradioApp().querySelector('#openpose3d_main')! switchGradioTab(tabs, 1) diff --git a/src/environments/extension/internal/gradio.ts b/src/environments/extension/internal/gradio.ts index d740e7b..8f1a9cd 100644 --- a/src/environments/extension/internal/gradio.ts +++ b/src/environments/extension/internal/gradio.ts @@ -46,10 +46,13 @@ export const updateGradioImage = async ( const dt = new DataTransfer() dt.items.add(file) - element - .querySelector("button[aria-label='Clear']") - ?.click() - await waitForElementToBeRemoved(element, "button[aria-label='Clear']") + const removeImage = element + .querySelector("button[aria-label='Remove Image']") + if (removeImage) { + removeImage?.click() + await waitForElementToBeRemoved(element, "button[aria-label='Clear']") + } + await waitForElementToBeInDocument(element, "input[type='file']"); const input = element.querySelector("input[type='file']")! input.value = '' input.files = dt.files