[Feature Request] - Presets (or cycle button?) to snap to the 9 resolutions SDXL was trained on

[CCpt5]

Hello!

Per the Stability AI, SDXL was trained on images with the resolutions listed below (1024x1024 , 1152x96, 896x1152, 1216x832, 832x1216, 1344x768, 768x1344, 1536x640, 640x1536). I was wondering if there could be a way to make those resolutions easier to "snap to"? Either an option to provide presets, or maybe a button that would cycle through them? I'm not exactly sure how it'd work best, but I find myself struggling to try and remember "896x1152" et al cause they're non-standard, but meanwhile they're probably the best resolutions to generate at since the model knows them best.

Anyway, just an idea. I use your extension any time I use A1111 - so thanks again for building it!

[thomasasfk]

Hey - thanks for the suggestion, I've not worked on this project in a long time but happy to hear it still works.

I'm thinking of re-writing it soon as I've been getting back into stable diffusion and stuff, so I'll consider this when I do that, although life gets in the way so no idea when or if I'll have time to re-write it and add features like this!

[goodlux]

I was wondering if there could be a way to make those resolutions easier to "snap to"?

UPDATE: Actually, I was wrong after testing, adding the ratios in the settings doesn't help because as the OP noted, you still have to remember the base sizes

---

Came to ask for the same ... but just realized this is adjustable in the settings.

I added the following ratios:

5:12, 4:7, 13:19, 7:9

to these settings, in Settings -> Aspect Ratio Helper:

• JavaScript aspect ratio buttons
• Pre-defined aspect ratio buttons

and it works great now. These ratios match the ratios that SDXL was trained on, as follows

• 640 x 1536: 10:24 or 5:12
• 768 x 1344: 16:28 or 4:7
• 832 x 1216: 13:19
• 896 x 1152: 14:18 or 7:9
• 1024 x 1024: 1:1
• 1152 x 896: 18:14 or 9:7
• 1216 x 832: 19:13
• 1344 x 768: 21:12 or 7:4
• 1536 x 640: 24:10 or 12:5

[CCpt5]

Would you accept a small donation to add these resolutions? Honestly it's reminding me how sh!t my memory is that I have to pull up that cheat sheet every time I use stable diffusion these days :)

I know life is busy though so if you ever get time it would be much appreciated!

[Nobrumski]

I was looking for much the same thing. It looks like there is a new one that does it. Personally not as big of a fan compared to this model, but I also got tired of the cheat sheet. It is in the default available extensions under sd-webui-ar_xhox and just a newer fork of the AR button.

[CCpt5]

I was wondering if there could be a way to make those resolutions easier to "snap to"?

UPDATE: Actually, I was wrong after testing, adding the ratios in the settings doesn't help because as the OP noted, you still have to remember the base sizes

So I had Chatgpt-4 walk me through a way to make the AR settings in the java pull down bar start at the resolutions that work best for SDXL (as listed above). Works great for me on Forge/A1111.

Use at your own risk (can always just reclone it) - but the only file that needed editing was aspectRatioController.js in the javascript folder. Here's the replacement ChatGPT4 walked me through - the ARs are added at the top in case you want to change any of them. Also you can add/remove ARs from the java pulldown in settings.

Replacement/Modified aspectRatioController.js file:
https://drive.google.com/file/d/1j0C0luvNFmnrlV1MbGViBGvpumNMeoh7/view?usp=sharing

ChatGPT4 (Won't let me get a sharable link since I'd uploaded files/images, but this is a copy/paste in case you care to verify the changes in the above file) 

----
Absolutely! Here's the extended JavaScript code snippet with a complete mapping of aspect ratios to their recommended resolutions based on the initial list you provided. I'm also including the modified setAspectRatio method within the AspectRatioController class in the aspectRatioController.js file.

Firstly, create a mapping for all the aspect ratios and their resolutions:

javascript
Copy code
// Recommended resolutions based on aspect ratios
const recommendedResolutions = {
  "1:1": { width: 1024, height: 1024 },
  "8:5": { width: 1216, height: 768 },
  "4:3": { width: 1152, height: 896 },
  "3:2": { width: 1216, height: 832 },
  "7:5": { width: 1176, height: 840 },
  "16:9": { width: 1344, height: 768 },
  "21:9": { width: 1536, height: 640 },
  "19:9": { width: 1472, height: 704 },
  "3:4": { width: 896, height: 1152 },
  "2:3": { width: 832, height: 1216 },
  "5:7": { width: 840, height: 1176 },
  "9:16": { width: 768, height: 1344 },
  "9:21": { width: 640, height: 1536 },
  "5:8": { width: 768, height: 1216 },
  "9:5": { width: 1216, height: 768 }
  // Add any additional aspect ratios and resolutions as needed
};
Next, integrate the setAspectRatio method:

javascript
Copy code
setAspectRatio(aspectRatio) {
  this.aspectRatio = aspectRatio;
  
  // Check if the selected aspect ratio is in the recommendedResolutions map
  if (recommendedResolutions.hasOwnProperty(aspectRatio)) {
    const resolution = recommendedResolutions[aspectRatio];
    this.widthContainer.setVal(resolution.width);
    this.heightContainer.setVal(resolution.height);
  } else if (aspectRatio === _OFF) {
    this.disable();
  } else if (aspectRatio === _IMAGE) {
    const img = getCurrentImage();
    this.widthContainer.setVal(img && img.naturalWidth || 1);
    this.heightContainer.setVal(img && img.naturalHeight || 1);
  } else if (aspectRatio === _LOCK) {
    // if aspect ratio is locked, keep current values
  } else {
    // Parse the aspect ratio
    [this.widthRatio, this.heightRatio] = aspectRatioFromStr(aspectRatio);
    [this.widthRatio, this.heightRatio] = clampToBoundaries(this.widthRatio, this.heightRatio);
    this.updateInputStates();
    this.maintainAspectRatio();
  }
}
Make sure that you handle the aspect ratios like "19:9" which may not be exactly the ones listed in the mapping. You might need to adjust the function to match these more generic aspect ratios.

Again, please remember that these changes assume a specific structure of the existing aspectRatioController.js that might not match the current state of your file. You might need to adapt these snippets into the context of your existing code. Always back up your files before making such changes, and if possible, test the functionality in a development environment before applying it to a live system.