297 lines
9.6 KiB
JavaScript
297 lines
9.6 KiB
JavaScript
;(function () {
|
|
if (typeof gradioApp == 'undefined') return;
|
|
function callGlobalGradioFunction(name) {
|
|
const button = document.getElementById(`sdppp_${name}`);
|
|
button.click();
|
|
}
|
|
|
|
class SDPPP {
|
|
constructor() {
|
|
this.insertedPop = false;
|
|
this.socketInited = false;
|
|
|
|
this.currentWidget = null;
|
|
this.socket = null;
|
|
this.pollInterval = null;
|
|
|
|
this.$el = null;
|
|
this.$inputLayer = null;
|
|
this.$inputBound = null;
|
|
this.$inputSendLayer = null;
|
|
this.$refreshLayer = null;
|
|
this.$refreshBound = null;
|
|
this.$refreshSendLayer = null;
|
|
this.$getterSaveAndClose = null;
|
|
this.$senderSaveAndClose = null;
|
|
}
|
|
|
|
initDOM() {
|
|
this.insertedPop = true;
|
|
this.$inputLayer = document
|
|
.getElementById("sdppp_layers")
|
|
.getElementsByTagName("input")[0];
|
|
this.$inputBound = document
|
|
.getElementById("sdppp_bounds")
|
|
.getElementsByTagName("input")[0];
|
|
this.$inputSendLayer = document
|
|
.getElementById("sdppp_send_layers")
|
|
.getElementsByTagName("input")[0];
|
|
|
|
this.$refreshLayer = document
|
|
.getElementById("refresh_sdppp_layers");
|
|
this.$refreshBound = document
|
|
.getElementById("refresh_sdppp_bounds");
|
|
this.$refreshSendLayer = document
|
|
.getElementById("refresh_sdppp_send_layers");
|
|
|
|
this.$getterSaveAndClose = document
|
|
.getElementById("sdppp_getter_dialog_close");
|
|
this.$senderSaveAndClose = document
|
|
.getElementById("sdppp_sender_dialog_close");
|
|
|
|
this.$getterSaveAndClose.addEventListener("click", () => {
|
|
this.currentWidget.layerValue = this.$inputLayer.value;
|
|
this.currentWidget.boundValue = this.$inputBound.value;
|
|
this.currentWidget.render();
|
|
this.currentWidget.action();
|
|
closePopup();
|
|
});
|
|
this.$senderSaveAndClose.addEventListener("click", () => {
|
|
this.currentWidget.sendLayerValue = this.$inputSendLayer.value;
|
|
this.currentWidget.render();
|
|
this.currentWidget.action();
|
|
closePopup();
|
|
});
|
|
}
|
|
|
|
getterConfig(widget) {
|
|
popupId("sdppp_getter_dialog")
|
|
callGlobalGradioFunction("show_getter_dialog")
|
|
if (!this.insertedPop) {
|
|
this.initDOM();
|
|
}
|
|
this.currentWidget = widget;
|
|
if (widget.layerValue) {
|
|
this.$inputLayer.value = widget.layerValue;
|
|
}
|
|
if (widget.boundValue) {
|
|
this.$inputBound.value = widget.boundValue;
|
|
}
|
|
this.$refreshLayer.click();
|
|
this.$refreshBound.click();
|
|
}
|
|
senderConfig(widget) {
|
|
popupId("sdppp_sender_dialog")
|
|
callGlobalGradioFunction("show_sender_dialog")
|
|
if (!this.insertedPop) {
|
|
this.initDOM();
|
|
}
|
|
this.currentWidget = widget;
|
|
if (widget.sendLayerValue) {
|
|
this.$inputSendLayer.value = widget.sendLayerValue;
|
|
}
|
|
this.$refreshSendLayer.click();
|
|
}
|
|
|
|
async initSocket() {
|
|
if (this.socketInited) return Promise.resolve();;
|
|
this.socket = io(location.origin, {
|
|
transports: ["websocket"],
|
|
path: '/sd-ppp/',
|
|
query: {
|
|
version: 1,
|
|
type: 'sd'
|
|
}
|
|
});
|
|
this.socketInited = true;
|
|
|
|
return new Promise((resolve, reject) => {
|
|
this.socket.on('connect', resolve);
|
|
this.socket.on('disconnect', () => {
|
|
this.socketInited = false;
|
|
});
|
|
});
|
|
}
|
|
|
|
async getImage(data) {
|
|
await this.initSocket();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
this.socket.emit('c_get_image', data, (data) => {
|
|
data && data.error ? reject(new Error(data.error)) : resolve(data);
|
|
});
|
|
});
|
|
}
|
|
|
|
async sendImage(data) {
|
|
await this.initSocket();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
this.socket.emit('c_send_image', data, (data) => {
|
|
data && data.error ? reject(new Error(data.error)) : resolve(data);
|
|
});
|
|
});
|
|
}
|
|
|
|
static instance = new SDPPP();
|
|
}
|
|
|
|
class SDPPPWidget {
|
|
constructor() {
|
|
const $widget = document.createElement("div");
|
|
this.$el = $widget;
|
|
|
|
const $settingButton = document.createElement("button");
|
|
this.$settingButton = $settingButton;
|
|
$widget.appendChild($settingButton);
|
|
|
|
$settingButton
|
|
.addEventListener('click', () => {
|
|
this.openConfig();
|
|
});
|
|
}
|
|
|
|
openConfig() {
|
|
throw new Error('not implemented');
|
|
}
|
|
|
|
render() {
|
|
this.$settingButton.className = "sdppp-setting-button";
|
|
this.$settingButton.textContent = "🔧";
|
|
this.$settingButton.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
class GetterWidget extends SDPPPWidget {
|
|
openConfig() {
|
|
SDPPP.instance.getterConfig(this);
|
|
}
|
|
|
|
constructor($gradioImage) {
|
|
super();
|
|
const $getButton = document.createElement("button");
|
|
this.$getButton = $getButton;
|
|
this.$gradioImage = $gradioImage;
|
|
this.$el.appendChild($getButton);
|
|
|
|
$getButton
|
|
.addEventListener('click', async () => {
|
|
if (!this.layerValue || !this.boundValue)
|
|
this.openConfig();
|
|
else {
|
|
this.action();
|
|
}
|
|
});
|
|
|
|
this.layerValue = '';
|
|
this.boundValue = '';
|
|
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
super.render();
|
|
this.$el.className = "sdppp-get-widget";
|
|
this.$getButton.className = "sdppp-get-button";
|
|
if (this.layerValue && this.boundValue) {
|
|
this.$settingButton.style.display = 'flex';
|
|
this.$getButton.textContent = "SDPPP get";
|
|
|
|
} else {
|
|
this.$settingButton.style.display = 'none';
|
|
this.$getButton.textContent = "SDPPP init";
|
|
|
|
}
|
|
}
|
|
|
|
async action() {
|
|
await SDPPP.instance.getImage({
|
|
'layer_id': this.layerValue,
|
|
'use_layer_bounds': this.boundValue,
|
|
'sd': {
|
|
elem_id: this.$gradioImage.id
|
|
}
|
|
})
|
|
|
|
callGlobalGradioFunction('get_image_' + this.$gradioImage.id)
|
|
}
|
|
}
|
|
|
|
class SenderWidget extends SDPPPWidget{
|
|
openConfig() {
|
|
SDPPP.instance.senderConfig(this);
|
|
}
|
|
|
|
constructor($gradioGallery) {
|
|
super();
|
|
const $sendButton = document.createElement("button");
|
|
this.$sendButton = $sendButton;
|
|
this.$gradioGallery = $gradioGallery;
|
|
this.$el.appendChild($sendButton);
|
|
|
|
$sendButton
|
|
.addEventListener('click', () => {
|
|
if (!this.sendLayerValue)
|
|
this.openConfig();
|
|
else
|
|
this.action();
|
|
});
|
|
|
|
this.sendLayerValue = '';
|
|
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
super.render();
|
|
this.$el.className = "sdppp-send-widget";
|
|
this.$sendButton.className = "sdppp-send-button";
|
|
|
|
if (this.sendLayerValue) {
|
|
this.$settingButton.style.display = 'flex';
|
|
this.$sendButton.textContent = "SDPPP send";
|
|
|
|
} else {
|
|
this.$settingButton.style.display = 'none';
|
|
this.$sendButton.textContent = "SDPPP init";
|
|
|
|
}
|
|
}
|
|
|
|
async action() {
|
|
let selections = [...this.$gradioGallery.querySelector('.grid-wrap').querySelectorAll('button')];
|
|
const selectionsWithSelected = selections
|
|
.filter((button) => button.classList.contains('selected'));
|
|
selections = selectionsWithSelected.length ? selectionsWithSelected : selections;
|
|
const selected_image = selections
|
|
.map((button) => {
|
|
return button.querySelector('img').src
|
|
});
|
|
await SDPPP.instance.sendImage({
|
|
'layer': this.sendLayerValue,
|
|
'sd': {
|
|
image_urls: selected_image
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
const insertedGetWidget = new WeakMap();
|
|
const insertedSendWidget = new WeakMap();
|
|
|
|
onUiUpdate(() => {
|
|
gradioApp().querySelectorAll(".gradio-image").forEach((el) => {
|
|
if (insertedGetWidget.has(el)) return;
|
|
const widget = new GetterWidget(el);
|
|
el.appendChild(widget.$el);
|
|
insertedGetWidget.set(el, widget);
|
|
})
|
|
gradioApp().querySelectorAll(".gradio-gallery").forEach((el) => {
|
|
if (insertedSendWidget.has(el)) return;
|
|
const widget = new SenderWidget(el);
|
|
el.appendChild(widget.$el);
|
|
insertedSendWidget.set(el, widget);
|
|
})
|
|
})
|
|
})(); |