= { 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 dropdown in the UI */ + getStableDiffusionAllowedResolutions?: ( + model?: ID + ) => { width: number; height: number }[] | undefined; + /** Determines the default count passed to `createStableDiffusionImages` */ getStableDiffusionDefaultCount?: () => number | undefined; diff --git a/packages/stablestudio-ui/src/Generation/Image/Size/Ratio/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Size/Ratio/index.tsx index 359c45d4..8729751c 100644 --- a/packages/stablestudio-ui/src/Generation/Image/Size/Ratio/index.tsx +++ b/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, From 0d55a99dd599d9e4ea9e0c101e4ac1ec9975992d Mon Sep 17 00:00:00 2001 From: kaj <40004347+KAJdev@users.noreply.github.com> Date: Tue, 19 Sep 2023 13:20:53 -0800 Subject: [PATCH 2/3] fix: comment --- packages/stablestudio-plugin/src/Plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stablestudio-plugin/src/Plugin.ts b/packages/stablestudio-plugin/src/Plugin.ts index f43c19f9..b148a81d 100644 --- a/packages/stablestudio-plugin/src/Plugin.ts +++ b/packages/stablestudio-plugin/src/Plugin.ts @@ -191,7 +191,7 @@ export type Plugin
= { 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 dropdown in the UI */ + /** 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 ) => { width: number; height: number }[] | undefined; From 2a4f81a5df6ecfc6119353e0d56a70ad122f5111 Mon Sep 17 00:00:00 2001 From: kaj <40004347+KAJdev@users.noreply.github.com> Date: Tue, 19 Sep 2023 13:29:06 -0800 Subject: [PATCH 3/3] fix: MaybePromise type --- packages/stablestudio-plugin/src/Plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stablestudio-plugin/src/Plugin.ts b/packages/stablestudio-plugin/src/Plugin.ts index b148a81d..5ba5419b 100644 --- a/packages/stablestudio-plugin/src/Plugin.ts +++ b/packages/stablestudio-plugin/src/Plugin.ts @@ -194,7 +194,7 @@ export type Plugin
= { /** 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 - ) => { width: number; height: number }[] | undefined; + ) => MaybePromise<{ width: number; height: number }[] | undefined>; /** Determines the default count passed to `createStableDiffusionImages` */ getStableDiffusionDefaultCount?: () => number | undefined;