fix: MaybePromise type

packages/stablestudio-plugin/src/Plugin.ts

@@ -191,6 +191,11 @@ export type Plugin<P extends PluginTypeHelper = PluginTypeHelperDefault> = {
     StableDiffusionStyle[] | undefined
   >;
 
+  /** If you want to provide a list of resolutions in pixels to choose from, you can return them via this function and they will be presented as a slider in the UI */
+  getStableDiffusionAllowedResolutions?: (
+    model?: ID
+  ) => MaybePromise<{ width: number; height: number }[] | undefined>;
+
   /** Determines the default count passed to `createStableDiffusionImages` */
   getStableDiffusionDefaultCount?: () => number | undefined;
 

packages/stablestudio-ui/package.json

@@ -82,7 +82,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.21",
     "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.1",
     "rimraf": "^4.1.1",

packages/stablestudio-ui/src/Generation/Image/Size/Ratio/index.tsx

@@ -1,5 +1,8 @@
+import * as ReactQuery from "@tanstack/react-query";
+
 import { Generation } from "~/Generation";
 import { Size } from "~/Geometry";
+import { Plugin } from "~/Plugin";
 import { Theme } from "~/Theme";
 
 export type Ratio = Size & { label?: string };
@@ -151,8 +154,30 @@ export namespace Ratios {
     { width: 4, height: 1 },
   ] as const;
 
+  const gcd = (a: number, b: number): number => (b ? gcd(b, a % b) : a);
+  const simplifyAspectRatio = (width: number, height: number) => {
+    const divisor = gcd(width, height);
+    return { width: width / divisor, height: height / divisor } as Ratio;
+  };
+
+  export const usePluginResolutions = (model?: ID) => {
+    const getStableDiffusionAllowedResolutions = Plugin.use(
+      ({ getStableDiffusionAllowedResolutions }) =>
+        getStableDiffusionAllowedResolutions
+    );
+
+    return ReactQuery.useQuery({
+      enabled: !!getStableDiffusionAllowedResolutions,
+
+      queryKey: ["Generation.Image.Ratio.PluginResolutions.use"],
+      queryFn: async () =>
+        (await getStableDiffusionAllowedResolutions?.(model)) ?? [],
+    });
+  };
+
   export const use = (id?: ID, fullControl = false) => {
     const { input } = Generation.Image.Input.use(id);
+    const { data: pluginResolutions } = usePluginResolutions(input?.model);
     const bounds = Generation.Image.Size.Bounds.use(id);
     const ratios = useMemo(() => {
       if (!input?.width || !input?.height || !bounds) return [];
@@ -168,9 +193,19 @@ export namespace Ratios {
         };
       };
 
-      const ratios = (fullControl ? presets : presets.slice(0, -2))
-        .map(sizing)
-        .filter(({ input }) => input.width * input.height <= bounds.area.max);
+      const ratios = pluginResolutions
+        ? pluginResolutions.map(({ width, height }) => ({
+            ...simplifyAspectRatio(width, height),
+            input: {
+              width,
+              height,
+            },
+          }))
+        : (fullControl ? presets : presets.slice(0, -2))
+            .map(sizing)
+            .filter(
+              ({ input }) => input.width * input.height <= bounds.area.max
+            );
 
       const flipped = ratios.map(({ width, height, input }) => ({
         width: height,

yarn.lock

@@ -1310,7 +1310,7 @@ __metadata:
     lucide-react: ^0.105.0
     minisearch: ^6.0.0
     notistack: ^3.0.0-alpha.11
-    postcss: ^8.4.31
+    postcss: ^8.4.21
     prettier: ^2.8.3
     prettier-plugin-tailwindcss: ^0.2.1
     query-string: ^8.1.0
@@ -6153,7 +6153,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.23":
+"postcss@npm:^8.4.21, postcss@npm:^8.4.23":
   version: 8.4.23
   resolution: "postcss@npm:8.4.23"
   dependencies:
@@ -6164,17 +6164,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.31":
-  version: 8.4.31
-  resolution: "postcss@npm:8.4.31"
-  dependencies:
-    nanoid: ^3.3.6
-    picocolors: ^1.0.0
-    source-map-js: ^1.0.2
-  checksum: 1d8611341b073143ad90486fcdfeab49edd243377b1f51834dc4f6d028e82ce5190e4f11bb2633276864503654fb7cab28e67abdc0fbf9d1f88cad4a0ff0beea
-  languageName: node
-  linkType: hard
-
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"