Skip to content

Optimize ar preview #17134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ProblemShooter wants to merge 2 commits into
base: master
Choose a base branch
from
+73 −102
Open

Optimize ar preview #17134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
806723a
feat: add zoom/pan, hotkeys, and red mask restore
ProblemShooter Sep 27, 2025
ecc9cec
Optimize AR preview rendering and input handling
ProblemShooter Sep 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 15 additions & 9 deletions extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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.
Expand Down
151 changes: 58 additions & 93 deletions javascript/aspectRatioOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Check failure on line 33 in javascript/aspectRatioOverlay.js

View workflow job for this annotation

GitHub Actions / eslint 

Expected indentation of 8 spaces but found 35

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;
});
}
});
Loading