@lobehub/chat 1.98.1 → 1.99.0

package/src/store/image/slices/generationConfig/hooks.ts

@@ -0,0 +1,118 @@
+import { useCallback, useMemo } from 'react';
+
+import { DEFAULT_ASPECT_RATIO, PRESET_ASPECT_RATIOS } from '@/const/image';
+import {
+  RuntimeImageGenParams,
+  RuntimeImageGenParamsKeys,
+} from '@/libs/standard-parameters/meta-schema';
+
+import { useImageStore } from '../../store';
+import { imageGenerationConfigSelectors } from './selectors';
+
+export function useGenerationConfigParam<
+  N extends RuntimeImageGenParamsKeys,
+  V extends RuntimeImageGenParams[N],
+>(paramName: N) {
+  const parameters = useImageStore(imageGenerationConfigSelectors.parameters);
+  const parametersSchema = useImageStore(imageGenerationConfigSelectors.parametersSchema);
+
+  const paramValue = parameters?.[paramName] as V;
+  const setParamsValue = useImageStore((s) => s.setParamOnInput<N>);
+  const setValue = useCallback(
+    (value: V) => {
+      setParamsValue(paramName, value);
+    },
+    [paramName, setParamsValue],
+  );
+
+  const paramConfig = parametersSchema?.[paramName];
+  const paramConstraints = useMemo(() => {
+    const min =
+      paramConfig && typeof paramConfig === 'object' && 'min' in paramConfig
+        ? paramConfig.min
+        : undefined;
+    const max =
+      paramConfig && typeof paramConfig === 'object' && 'max' in paramConfig
+        ? paramConfig.max
+        : undefined;
+    const step =
+      paramConfig && typeof paramConfig === 'object' && 'step' in paramConfig
+        ? paramConfig.step
+        : undefined;
+    const description =
+      paramConfig && typeof paramConfig === 'object' && 'description' in paramConfig
+        ? paramConfig.description
+        : undefined;
+    const enumValues =
+      paramConfig && typeof paramConfig === 'object' && 'enum' in paramConfig
+        ? paramConfig.enum
+        : undefined;
+
+    return {
+      description,
+      max,
+      min,
+      step,
+      enumValues,
+    };
+  }, [paramConfig]);
+
+  return {
+    value: paramValue as V,
+    setValue,
+    ...paramConstraints,
+  };
+}
+
+export function useDimensionControl() {
+  const store = useImageStore();
+  const paramsSchema = useImageStore(imageGenerationConfigSelectors.parametersSchema);
+
+  const modelAspectRatio = useImageStore((s) => s.parameters?.aspectRatio);
+  const currentAspectRatio = store.activeAspectRatio ?? modelAspectRatio ?? DEFAULT_ASPECT_RATIO;
+
+  const isSupportWidth = useImageStore(imageGenerationConfigSelectors.isSupportedParam('width'));
+  const isSupportHeight = useImageStore(imageGenerationConfigSelectors.isSupportedParam('height'));
+  const isSupportAspectRatio = useImageStore(
+    imageGenerationConfigSelectors.isSupportedParam('aspectRatio'),
+  );
+
+  const aspectRatioOptions = useMemo(() => {
+    const modelOptions = paramsSchema?.aspectRatio?.enum || [];
+
+    // 合并选项，优先使用预设选项，然后添加模型特有的选项
+    const allOptions = [...PRESET_ASPECT_RATIOS];
+
+    // 添加模型选项中不在预设中的选项
+    modelOptions.forEach((option) => {
+      if (!allOptions.includes(option)) {
+        allOptions.push(option);
+      }
+    });
+
+    return allOptions;
+  }, [paramsSchema]);
+
+  // 只要不是所有维度相关的控件都不显示，那么这个容器就应该显示
+  const showDimensionControl = !(!isSupportAspectRatio && !isSupportWidth && !isSupportHeight);
+
+  return {
+    isLocked: store.isAspectRatioLocked,
+    toggleLock: store.toggleAspectRatioLock,
+
+    width: store.parameters?.width,
+    height: store.parameters?.height,
+    aspectRatio: currentAspectRatio,
+
+    setWidth: store.setWidth,
+    setHeight: store.setHeight,
+    setAspectRatio: store.setAspectRatio,
+
+    widthSchema: paramsSchema?.width,
+    heightSchema: paramsSchema?.height,
+
+    options: aspectRatioOptions,
+
+    showDimensionControl,
+  };
+}

package/src/store/image/slices/generationConfig/index.ts

@@ -0,0 +1 @@
+export * from './action';

package/src/store/image/slices/generationConfig/initialState.ts

@@ -0,0 +1,37 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
+import { gptImage1ParamsSchema } from '@/config/paramsSchemas/openai/gpt-image-1';
+import { ModelProvider } from '@/libs/model-runtime/types/type';
+import {
+  ModelParamsSchema,
+  RuntimeImageGenParams,
+  extractDefaultValues,
+} from '@/libs/standard-parameters/meta-schema';
+
+export const DEFAULT_AI_IMAGE_PROVIDER = ModelProvider.OpenAI;
+export const DEFAULT_AI_IMAGE_MODEL = 'gpt-image-1';
+export const DEFAULT_IMAGE_NUM = 4;
+
+export interface GenerationConfigState {
+  parameters: RuntimeImageGenParams;
+  parametersSchema: ModelParamsSchema;
+
+  provider: string;
+  model: string;
+  imageNum: number;
+
+  isAspectRatioLocked: boolean;
+  activeAspectRatio: string | null; // string - 虚拟比例; null - 原生比例
+}
+
+export const DEFAULT_IMAGE_GENERATION_PARAMETERS: RuntimeImageGenParams =
+  extractDefaultValues(gptImage1ParamsSchema);
+
+export const initialGenerationConfigState: GenerationConfigState = {
+  model: DEFAULT_AI_IMAGE_MODEL,
+  provider: DEFAULT_AI_IMAGE_PROVIDER,
+  imageNum: DEFAULT_IMAGE_NUM,
+  parameters: DEFAULT_IMAGE_GENERATION_PARAMETERS,
+  parametersSchema: gptImage1ParamsSchema,
+  isAspectRatioLocked: false,
+  activeAspectRatio: null,
+};

package/src/store/image/slices/generationConfig/selectors.test.ts

@@ -0,0 +1,204 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { gptImage1ParamsSchema } from '@/config/paramsSchemas/openai/gpt-image-1';
+import { ModelParamsSchema, RuntimeImageGenParams } from '@/libs/standard-parameters/meta-schema';
+import { ImageStore } from '@/store/image';
+import { initialState } from '@/store/image/initialState';
+import { AIImageModelCard } from '@/types/aiModel';
+import { merge } from '@/utils/merge';
+
+import { imageGenerationConfigSelectors } from './selectors';
+
+// Mock external dependencies
+vi.mock('@/store/aiInfra', () => ({
+  aiProviderSelectors: {
+    enabledImageModelList: vi.fn(() => [
+      {
+        id: 'openai',
+        name: 'OpenAI',
+        children: [
+          {
+            id: 'gpt-image-1',
+            displayName: 'GPT Image 1',
+            type: 'image',
+            parameters: gptImage1ParamsSchema,
+            releasedAt: '2024-12-01',
+          } as AIImageModelCard,
+        ],
+      },
+    ]),
+  },
+  getAiInfraStoreState: vi.fn(() => ({})),
+}));
+
+const initialStore = initialState as ImageStore;
+
+const testModelSchema: ModelParamsSchema = {
+  imageUrls: { default: [] },
+  prompt: { default: '' },
+  size: {
+    default: 'auto',
+    enum: ['auto', '1024x1024', '1536x1024', '1024x1536'],
+  },
+};
+
+const testParameters: RuntimeImageGenParams = {
+  imageUrls: [],
+  prompt: 'test prompt',
+  size: 'auto',
+};
+
+describe('imageGenerationConfigSelectors', () => {
+  describe('model', () => {
+    it('should return the current model', () => {
+      const state = merge(initialStore, { model: 'gpt-image-1' });
+      const result = imageGenerationConfigSelectors.model(state);
+      expect(result).toBe('gpt-image-1');
+    });
+
+    it('should return the default model from initial state', () => {
+      const result = imageGenerationConfigSelectors.model(initialStore);
+      expect(result).toBe('gpt-image-1'); // Default model from initialState
+    });
+  });
+
+  describe('provider', () => {
+    it('should return the current provider', () => {
+      const state = merge(initialStore, { provider: 'openai' });
+      const result = imageGenerationConfigSelectors.provider(state);
+      expect(result).toBe('openai');
+    });
+
+    it('should return the default provider from initial state', () => {
+      const result = imageGenerationConfigSelectors.provider(initialStore);
+      expect(result).toBe('openai'); // Default provider from initialState
+    });
+  });
+
+  describe('imageNum', () => {
+    it('should return the current imageNum', () => {
+      const state = merge(initialStore, { imageNum: 4 });
+      const result = imageGenerationConfigSelectors.imageNum(state);
+      expect(result).toBe(4);
+    });
+
+    it('should return default imageNum when not set', () => {
+      const state = merge(initialStore, { imageNum: 1 });
+      const result = imageGenerationConfigSelectors.imageNum(state);
+      expect(result).toBe(1);
+    });
+
+    it('should handle different imageNum values', () => {
+      const state = merge(initialStore, { imageNum: 8 });
+      const result = imageGenerationConfigSelectors.imageNum(state);
+      expect(result).toBe(8);
+    });
+  });
+
+  describe('parameters', () => {
+    it('should return the current parameters', () => {
+      const state = merge(initialStore, { parameters: testParameters });
+      const result = imageGenerationConfigSelectors.parameters(state);
+      expect(result).toEqual(testParameters);
+    });
+
+    it('should return the default parameters from initial state', () => {
+      const result = imageGenerationConfigSelectors.parameters(initialStore);
+      expect(result).toBeDefined();
+      expect(typeof result.prompt).toBe('string');
+    });
+
+    it('should handle custom parameters object', () => {
+      const customParams = { prompt: 'custom', width: 2048 } as RuntimeImageGenParams;
+      const state = merge(initialStore, { parameters: customParams });
+      const result = imageGenerationConfigSelectors.parameters(state);
+      expect(result.prompt).toBe('custom');
+      expect(result.width).toBe(2048);
+    });
+  });
+
+  describe('parametersSchema', () => {
+    it('should return the current parametersSchema', () => {
+      const state = merge(initialStore, { parametersSchema: testModelSchema });
+      const result = imageGenerationConfigSelectors.parametersSchema(state);
+      expect(result).toEqual(testModelSchema);
+    });
+
+    it('should return default parametersSchema when not explicitly overridden', () => {
+      // merge function doesn't override with undefined, so we get the default from initialState
+      const result = imageGenerationConfigSelectors.parametersSchema(initialStore);
+      expect(result).toBeDefined();
+      expect(result.prompt).toBeDefined();
+    });
+
+    it('should handle parametersSchema deep merge', () => {
+      const customSchema: ModelParamsSchema = {
+        prompt: { default: 'custom prompt' },
+        size: { default: '1024x1024', enum: ['1024x1024', '512x512'] },
+      };
+      const state = merge(initialStore, { parametersSchema: customSchema });
+      const result = imageGenerationConfigSelectors.parametersSchema(state);
+
+      // merge function does deep merge, so we should expect merged result
+      expect(result.prompt.default).toBe('custom prompt');
+      expect(result.size?.default).toBe('1024x1024');
+      expect(result.size?.enum).toEqual(['1024x1024', '512x512']);
+      // Original keys should still exist
+      expect(result.imageUrls).toBeDefined();
+      expect(result.prompt).toBeDefined();
+    });
+  });
+
+  describe('isSupportParam', () => {
+    it('should return true when parameter exists in parametersSchema', () => {
+      const state = merge(initialStore, { parametersSchema: testModelSchema });
+      const result = imageGenerationConfigSelectors.isSupportedParam('size')(state);
+      expect(result).toBe(true);
+    });
+
+    it('should return false when parameter does not exist in parametersSchema', () => {
+      const state = merge(initialStore, { parametersSchema: testModelSchema });
+      const result = imageGenerationConfigSelectors.isSupportedParam('nonexistent' as any)(state);
+      expect(result).toBe(false);
+    });
+
+    it('should return true for supported params in default parametersSchema', () => {
+      // Since merge doesn't override with undefined, we get the default parametersSchema from initialState
+      const result = imageGenerationConfigSelectors.isSupportedParam('prompt')(initialStore);
+      expect(result).toBe(true);
+    });
+
+    it('should return false when parameter does not exist in merged parametersSchema', () => {
+      // Since merge does deep merge, original params still exist, so test a param that truly doesn't exist
+      const result = imageGenerationConfigSelectors.isSupportedParam('nonExistentParam' as any)(
+        initialStore,
+      );
+      expect(result).toBe(false);
+    });
+
+    it('should handle various parameter types', () => {
+      const state = merge(initialStore, { parametersSchema: testModelSchema });
+
+      expect(imageGenerationConfigSelectors.isSupportedParam('prompt')(state)).toBe(true);
+      expect(imageGenerationConfigSelectors.isSupportedParam('size')(state)).toBe(true);
+      expect(imageGenerationConfigSelectors.isSupportedParam('imageUrls')(state)).toBe(true);
+      expect(
+        imageGenerationConfigSelectors.isSupportedParam('nonExistentParam' as any)(state),
+      ).toBe(false);
+    });
+
+    it('should work correctly with gpt-image-1 parameters', () => {
+      const state = merge(initialStore, { parametersSchema: gptImage1ParamsSchema });
+
+      // Test some known gpt-image-1 parameters
+      expect(imageGenerationConfigSelectors.isSupportedParam('prompt')(state)).toBe(true);
+      expect(imageGenerationConfigSelectors.isSupportedParam('size')(state)).toBe(true);
+      expect(imageGenerationConfigSelectors.isSupportedParam('imageUrls')(state)).toBe(true);
+
+      // Test parameter that doesn't exist
+      expect(imageGenerationConfigSelectors.isSupportedParam('nonexistent' as any)(state)).toBe(
+        false,
+      );
+    });
+  });
+});

package/src/store/image/slices/generationConfig/selectors.ts

@@ -0,0 +1,25 @@
+import { RuntimeImageGenParamsKeys } from '@/libs/standard-parameters/meta-schema';
+
+import { GenerationConfigState } from './initialState';
+
+export const model = (s: GenerationConfigState) => s.model;
+export const provider = (s: GenerationConfigState) => s.provider;
+export const imageNum = (s: GenerationConfigState) => s.imageNum;
+
+const parameters = (s: GenerationConfigState) => s.parameters;
+const parametersSchema = (s: GenerationConfigState) => s.parametersSchema;
+const isSupportedParam = (paramName: RuntimeImageGenParamsKeys) => {
+  return (s: GenerationConfigState) => {
+    const _parametersSchema = parametersSchema(s);
+    return Boolean(paramName in _parametersSchema);
+  };
+};
+
+export const imageGenerationConfigSelectors = {
+  model,
+  provider,
+  imageNum,
+  isSupportedParam,
+  parameters,
+  parametersSchema,
+};