1 files changed, 41 insertions, 0 deletions
diff --git a/javascript/aspectRatioSliders.js b/javascript/aspectRatioSliders.js
new file mode 100644
index 00000000..f577750a
--- /dev/null
+++ b/javascript/aspectRatioSliders.js
@@ -0,0 +1,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");
+});