mirror of
https://github.com/thomasasfk/sd-webui-aspect-ratio-helper.git
synced 2026-01-26 11:09:55 +00:00
be365af8f9
* Implement JavaScript aspect ratios - Add options to enable and specify JavaScript aspect ratios - Add JavaScript to load when enabled, which adds dropdown & functionality - Update docs for JavaScript aspect ratios - Add video to README.md for JavaScript aspect ratios - Update options image on README.md
Aspect Ratio Helper 
Simple extension to easily maintain aspect ratio while changing dimensions.
Install via the extensions tab on the AUTOMATIC1111 webui.
Features
- JavaScript aspect ratio controls
- Adds a dropdown of configurable aspect ratios, to which the dimensions will auto-scale
- When selected, you will only be able to modify the higher dimension
- The smaller or equivalent dimension will scale accordingly
- If "Lock/🔒" is selected, the aspect ratio of the current dimensions will be kept
- If you click the "Swap/⇅" button, the current dimensions will swap
- Configurable aspect ratios will also flip, reducing the need for duplication of config
- Scale to maximum dimension
- Upon clicking, the width and height will scale according to the configured maximum value
- Aspect ratio will be retained, the smaller or equivalent dimension will be scaled to match
- Scale to aspect ratio
- Upon clicking, the current dimensions will be scaled to the given aspect ratio, using the highest width or height
- i.e
4:3 of 256x512 = 512x3849:16 of 512x256 = 288x5121:1 of 256x300 = 300x300
- i.e
- You can optionally toggle this to use the "Maximum dimension" slider value
- i.e
4:3 of 512 = 512x3849:16 of 512 = 288x5121:1 of 300 = 300x300
- i.e
- Upon clicking, the current dimensions will be scaled to the given aspect ratio, using the highest width or height
- Scale by percentage
- Upon clicking, the current dimensions will be multiplied by the given percentage, with aspect ratio maintained
- i.e
-25% of 512x256 = 384x192+50% of 512x512 = 768x768- You can also change the display of these if you find it more intuitive
- i.e
75% of 512x256 = 384x192150% of 512x512 = 768x768 - i.e
x0.75 of 512x256 = 384x192x1.5 of 512x512 = 768x768
Settings
- Expand by default (
False)- Determines whether the 'Aspect Ratio Helper' accordion expands by default
- UI Component order (
MaxDimensionScaler, PredefinedAspectRatioButtons, PredefinedPercentageButtons)- Determines the order in which the UI components will render
- Enable JavaScript aspect ratio controls
- JavaScript aspect ratio buttons
(Off, 🔓, 1:1, 4:3, 16:9, 9:16, 21:9)- i.e
Off, 🔓, 1:1, 4:3, 16:9, 9:16, 21:9,Off, 🔓, 9:2, 1:3
- i.e
- Show maximum dimension button (
True) - Maximum dimension default (
1024) - Show pre-defined aspect ratio buttons (
True) - Use "Maximum dimension" for aspect ratio buttons (
False) - Pre-defined aspect ratio buttons (
1:1, 4:3, 16:9, 9:16, 21:9)- i.e
1:1, 4:3, 16:9, 9:16, 21:92:3, 1:5, 3:5
- i.e
- Show pre-defined percentage buttons (
True) - Pre-defined percentage buttons (
25, 50, 75, 125, 150, 175, 200)- i.e
25, 50, 75, 125, 150, 175, 20050, 125, 300
- i.e
- Pre-defined percentage display format (
Incremental/decremental percentage (-50%, +50%))Incremental/decremental percentage (-50%, +50%)Raw percentage (50%, 150%)Multiplication (x0.5, x1.5)
Contributing
- Open an issue for suggestions
- Raise a pull request
Dependencies
Developed using existing AUTOMATIC1111 webui dependencies.
It's recommended to use the python version specified by A111 webui.
However - for running unit tests, we use pytest.
pip install pytest
Testing
From the root of the repository.
pytest