diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 7807f7f6185..7cc5802206d 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -286,8 +286,9 @@ onUiLoaded(async() => {
 
         targetElement.style.transformOrigin = "0 0";
 
+        // initialize element state — use `zoomLevel` consistently across the file
         elemData[elemId] = {
-            zoom: 1,
+            zoomLevel: 1,
             panX: 0,
             panY: 0
         };
@@ -333,9 +334,8 @@ onUiLoaded(async() => {
             // Create hotkeys array with disabled property based on the config values
             const hotkeys = hotkeysInfo.map(info => {
                 const configValue = hotkeysConfig[info.configKey];
-                const key = info.keySuffix ?
-                    `${configValue}${info.keySuffix}` :
-                    configValue.charAt(configValue.length - 1);
+                const displayKey = formatHotkeyForDisplay(String(configValue || ""));
+                const key = info.keySuffix ? `${displayKey}${info.keySuffix}` : displayKey;
                 return {
                     key,
                     action: info.action,
@@ -371,7 +371,8 @@ onUiLoaded(async() => {
             const activeTab = getActiveTab(elements)?.textContent.trim();
 
             if (activeTab && activeTab !== "img2img") {
-                const img = targetElement.querySelector(`${elemId} img`);
+                // look for an actual <img> inside the target element
+                const img = targetElement.querySelector('img');
 
                 if (img && img.style.display !== "none") {
                     img.style.display = "none";
@@ -481,10 +482,13 @@ onUiLoaded(async() => {
         }
 
         // Reset zoom when uploading a new image
+        // file input may be absent or the class may vary — guard the listener
         const fileInput = gradioApp().querySelector(
-            `${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`
+            `${elemId} input[type="file"][accept="image/*"]`
         );
-        fileInput.addEventListener("click", resetZoom);
+        if (fileInput) {
+            fileInput.addEventListener("click", resetZoom);
+        }
 
         // Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables
         function updateZoom(newZoomLevel, mouseX, mouseY) {
@@ -718,8 +722,10 @@ onUiLoaded(async() => {
 
         // Get Mouse position
         function getMousePosition(e) {
-            mouseX = e.offsetX;
-            mouseY = e.offsetY;
+            // compute mouse position relative to the target element
+            const rect = targetElement.getBoundingClientRect();
+            mouseX = e.clientX - rect.left;
+            mouseY = e.clientY - rect.top;
         }
 
         // Simulation of the function to put a long image into the screen.
diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index c8751fe494f..d7e68cc899d 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -1,113 +1,78 @@
-
 let currentWidth = null;
 let currentHeight = null;
-let arFrameTimeout = setTimeout(function() {}, 0);
-
-function dimensionChange(e, is_width, is_height) {
-
-    if (is_width) {
-        currentWidth = e.target.value * 1.0;
-    }
-    if (is_height) {
-        currentHeight = e.target.value * 1.0;
-    }
-
-    var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
-
-    if (!inImg2img) {
-        return;
-    }
-
-    var targetElement = null;
-
-    var tabIndex = get_tab_index('mode_img2img');
-    if (tabIndex == 0) { // img2img
-        targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
-    } else if (tabIndex == 1) { //Sketch
-        targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
-    } else if (tabIndex == 2) { // Inpaint
-        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
-    } else if (tabIndex == 3) { // Inpaint sketch
-        targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
-    }
-
-
-    if (targetElement) {
+let arFrameTimeout = null;
+const gradio = gradioApp(); // cache gradioApp reference
+
+// Cache AR preview div globally
+let arPreviewRect = gradio.querySelector('#imageARPreview');
+if (!arPreviewRect) {
+    arPreviewRect = document.createElement('div');
+    arPreviewRect.id = "imageARPreview";
+    gradio.appendChild(arPreviewRect);
+}
 
-        var arPreviewRect = gradioApp().querySelector('#imageARPreview');
-        if (!arPreviewRect) {
-            arPreviewRect = document.createElement('div');
-            arPreviewRect.id = "imageARPreview";
-            gradioApp().appendChild(arPreviewRect);
-        }
+function dimensionChange(e, isWidth, isHeight) {
+    if (isWidth) currentWidth = +e.target.value;
+    if (isHeight) currentHeight = +e.target.value;
 
+    if (gradio.querySelector("#tab_img2img").style.display !== "block") return;
 
+    const tabIndex = get_tab_index('mode_img2img');
+    const tabSelectors = [
+        '#img2img_image div[data-testid=image] img',
+        '#img2img_sketch div[data-testid=image] img',
+        '#img2maskimg div[data-testid=image] img',
+        '#inpaint_sketch div[data-testid=image] img'
+    ];
 
-        var viewportOffset = targetElement.getBoundingClientRect();
+    const targetElement = gradio.querySelector(tabSelectors[tabIndex]);
+    if (!targetElement || !currentWidth || !currentHeight) return;
 
-        var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
+    const viewportRect = targetElement.getBoundingClientRect();
+    const viewportScale = Math.min(targetElement.clientWidth / targetElement.naturalWidth,
+                                   targetElement.clientHeight / targetElement.naturalHeight);
 
-        var scaledx = targetElement.naturalWidth * viewportscale;
-        var scaledy = targetElement.naturalHeight * viewportscale;
+    const scaledX = targetElement.naturalWidth * viewportScale;
+    const scaledY = targetElement.naturalHeight * viewportScale;
 
-        var clientRectTop = (viewportOffset.top + window.scrollY);
-        var clientRectLeft = (viewportOffset.left + window.scrollX);
-        var clientRectCentreY = clientRectTop + (targetElement.clientHeight / 2);
-        var clientRectCentreX = clientRectLeft + (targetElement.clientWidth / 2);
+    const centreX = viewportRect.left + window.scrollX + targetElement.clientWidth / 2;
+    const centreY = viewportRect.top + window.scrollY + targetElement.clientHeight / 2;
 
-        var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
-        var arscaledx = currentWidth * arscale;
-        var arscaledy = currentHeight * arscale;
+    const arScale = Math.min(scaledX / currentWidth, scaledY / currentHeight);
 
-        var arRectTop = clientRectCentreY - (arscaledy / 2);
-        var arRectLeft = clientRectCentreX - (arscaledx / 2);
-        var arRectWidth = arscaledx;
-        var arRectHeight = arscaledy;
+    const arWidth = currentWidth * arScale;
+    const arHeight = currentHeight * arScale;
 
-        arPreviewRect.style.top = arRectTop + 'px';
-        arPreviewRect.style.left = arRectLeft + 'px';
-        arPreviewRect.style.width = arRectWidth + 'px';
-        arPreviewRect.style.height = arRectHeight + 'px';
+    arPreviewRect.style.top = (centreY - arHeight / 2) + 'px';
+    arPreviewRect.style.left = (centreX - arWidth / 2) + 'px';
+    arPreviewRect.style.width = arWidth + 'px';
+    arPreviewRect.style.height = arHeight + 'px';
+    arPreviewRect.style.display = 'block';
 
-        clearTimeout(arFrameTimeout);
-        arFrameTimeout = setTimeout(function() {
+    if (arFrameTimeout) cancelAnimationFrame(arFrameTimeout);
+    arFrameTimeout = requestAnimationFrame(() => {
+        setTimeout(() => {
             arPreviewRect.style.display = 'none';
         }, 2000);
-
-        arPreviewRect.style.display = 'block';
-
-    }
-
+    });
 }
 
-
 onAfterUiUpdate(function() {
-    var arPreviewRect = gradioApp().querySelector('#imageARPreview');
-    if (arPreviewRect) {
-        arPreviewRect.style.display = 'none';
-    }
-    var tabImg2img = gradioApp().querySelector("#tab_img2img");
-    if (tabImg2img) {
-        var inImg2img = tabImg2img.style.display == "block";
-        if (inImg2img) {
-            let inputs = gradioApp().querySelectorAll('input');
-            inputs.forEach(function(e) {
-                var is_width = e.parentElement.id == "img2img_width";
-                var is_height = e.parentElement.id == "img2img_height";
-
-                if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
-                    e.addEventListener('input', function(e) {
-                        dimensionChange(e, is_width, is_height);
-                    });
-                    e.classList.add('scrollwatch');
-                }
-                if (is_width) {
-                    currentWidth = e.value * 1.0;
-                }
-                if (is_height) {
-                    currentHeight = e.value * 1.0;
-                }
-            });
-        }
+    arPreviewRect.style.display = 'none';
+
+    const tabImg2img = gradio.querySelector("#tab_img2img");
+    if (tabImg2img && tabImg2img.style.display === "block") {
+        gradio.querySelectorAll('input').forEach(input => {
+            const isWidth = input.parentElement.id === "img2img_width";
+            const isHeight = input.parentElement.id === "img2img_height";
+
+            if ((isWidth || isHeight) && !input.classList.contains('scrollwatch')) {
+                input.addEventListener('input', e => dimensionChange(e, isWidth, isHeight));
+                input.classList.add('scrollwatch');
+            }
+
+            if (isWidth) currentWidth = +input.value;
+            if (isHeight) currentHeight = +input.value;
+        });
     }
 });