1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
class AspectRatioSliderController {
constructor(widthSlider, heightSlider, ratioSource) {
this.widthSlider = new SliderComponentController(widthSlider);
this.heightSlider = new SliderComponentController(heightSlider);
this.ratioSource = new DropdownComponentController(ratioSource);
this.widthSlider.childRangeField.addEventListener("change", () => this.resize("width"));
this.widthSlider.childNumField.addEventListener("change", () => this.resize("width"));
this.heightSlider.childRangeField.addEventListener("change", () => this.resize("height"));
this.heightSlider.childNumField.addEventListener("change", () => this.resize("height"));
}
resize(dimension) {
let val = this.ratioSource.getVal();
if (!val.includes(":")) {
return;
}
let [width, height] = val.split(":").map(Number);
let ratio = width / height;
if (dimension == 'width') {
this.heightSlider.setVal(Math.round(parseFloat(this.widthSlider.getVal()) / ratio).toString());
}
else if (dimension == "height") {
this.widthSlider.setVal(Math.round(parseFloat(this.heightSlider.getVal()) * ratio).toString());
}
}
static observeStartup(widthSliderId, heightSliderId, ratioSourceId) {
let observer = new MutationObserver(() => {
let widthSlider = document.querySelector("gradio-app").shadowRoot.getElementById(widthSliderId);
let heightSlider = document.querySelector("gradio-app").shadowRoot.getElementById(heightSliderId);
let ratioSource = document.querySelector("gradio-app").shadowRoot.getElementById(ratioSourceId);
if (widthSlider && heightSlider && ratioSource) {
observer.disconnect();
new AspectRatioSliderController(widthSlider, heightSlider, ratioSource);
}
});
observer.observe(gradioApp(), { childList: true, subtree: true });
}
}
document.addEventListener("DOMContentLoaded", () => {
AspectRatioSliderController.observeStartup("txt2img_width", "txt2img_height", "txt2img_ratio");
AspectRatioSliderController.observeStartup("img2img_width", "img2img_height", "img2img_ratio");
});
|
