Implementation:AUTOMATIC1111 Stable diffusion webui Aspect Ratio Overlay
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Image_Preview, img2img |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Displays a visual aspect ratio preview overlay on the img2img input image when the user changes width or height dimensions.
Description
This JavaScript module provides real-time visual feedback in the img2img tab by rendering a semi-transparent rectangle overlay that represents the configured output aspect ratio on top of the source image. When the user modifies the width or height input fields, the dimensionChange function calculates the scaled aspect ratio rectangle relative to the displayed image, positions an absolutely-placed div element (#imageARPreview) over the source image, and shows it for 2 seconds before auto-hiding. The overlay accounts for the viewport scaling of the source image, computing the correct proportional dimensions. The module attaches input event listeners to width and height input elements within the img2img tab and supports all img2img sub-tabs (img2img, Sketch, Inpaint, Inpaint sketch). On UI updates, it re-binds listeners and hides stale overlays.
Usage
This module activates automatically in the img2img tab. When a user adjusts the width or height sliders/inputs, a rectangle overlay briefly appears on the source image showing the target output aspect ratio. No configuration or manual activation is required.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/aspectRatioOverlay.js
- Lines: 1-113
Signature
function dimensionChange(e, is_width, is_height)
// Callback: onAfterUiUpdate(function() { ... })
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// No explicit import required
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| e | Event | Yes | The input event from width or height field change |
| is_width | bool | Yes | Whether the changed input is the width field |
| is_height | bool | Yes | Whether the changed input is the height field |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Creates or updates the #imageARPreview div element with computed position and dimensions |
Usage Examples
// This module runs automatically. The overlay appears when:
// 1. User is on the img2img tab
// 2. User changes the width or height input
// The overlay rectangle shows the target aspect ratio on the source image
// and disappears after 2 seconds.
// Internal flow:
// dimensionChange(event, true, false) // width changed
// dimensionChange(event, false, true) // height changed