@lobehub/chat 1.114.6 → 1.116.0

package/packages/model-runtime/src/qwen/createImage.ts

@@ -19,39 +19,13 @@ interface QwenImageTaskResponse {
   request_id: string;
 }
 
-const QwenText2ImageModels = [
-  'wan2.2-t2i',
-  'wanx2.1-t2i',
-  'wanx2.0-t2i',
-  'wanx-v1',
-  'flux',
-  'stable-diffusion',
-];
-
-const getModelType = (model: string): string => {
-  // 可以添加其他模型类型的判断
-  // if (QwenImage2ImageModels.some(prefix => model.startsWith(prefix))) {
-  //   return 'image2image';
-  // }
-
-  if (QwenText2ImageModels.some((prefix) => model.startsWith(prefix))) {
-    return 'text2image';
-  }
-
-  throw new Error(`Unsupported model: ${model}`);
-};
-
 /**
  * Create an image generation task with Qwen API
  */
 async function createImageTask(payload: CreateImagePayload, apiKey: string): Promise<string> {
   const { model, params } = payload;
   // I can only say that the design of Alibaba Cloud's API is really bad; each model has a different endpoint path.
-  const modelType = getModelType(model);
-  const endpoint = `https://dashscope.aliyuncs.com/api/v1/services/aigc/${modelType}/image-synthesis`;
-  if (!endpoint) {
-    throw new Error(`No endpoint configured for model type: ${modelType}`);
-  }
+  const endpoint = `https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis`;
   log('Creating image task with model: %s, endpoint: %s', model, endpoint);
 
   const response = await fetch(endpoint, {

package/packages/model-runtime/src/utils/modelParse.ts

@@ -358,7 +358,7 @@ export const processMultiProviderModelList = async (
   let providerLocalConfig: any[] | null = null;
   if (providerid) {
     try {
-      const moduleImport = await import(`@/config/aiModels/${providerid}`);
+      const moduleImport = await import(`@/config/aiModels/${providerid}.ts`);
       providerLocalConfig = moduleImport.default;
     } catch {
       // 如果配置文件不存在或导入失败，保持为 null

package/packages/model-runtime/src/utils/streams/google-ai.ts

@@ -139,6 +139,31 @@ const transformGoogleGenerativeAIStream = (
       ];
     }
 
+    // Check for image data before handling finishReason
+    if (Array.isArray(candidate.content?.parts) && candidate.content.parts.length > 0) {
+      const part = candidate.content.parts[0];
+
+      if (part && part.inlineData && part.inlineData.data && part.inlineData.mimeType) {
+        const imageChunk = {
+          data: `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`,
+          id: context.id,
+          type: 'base64_image' as const,
+        };
+
+        // If also has finishReason, combine image with finish chunks
+        if (candidate.finishReason) {
+          const chunks: StreamProtocolChunk[] = [imageChunk];
+          if (chunk.usageMetadata) {
+            chunks.push(...usageChunks);
+          }
+          chunks.push({ data: candidate.finishReason, id: context?.id, type: 'stop' });
+          return chunks;
+        }
+
+        return imageChunk;
+      }
+    }
+
     if (candidate.finishReason) {
       if (chunk.usageMetadata) {
         return [
@@ -150,23 +175,10 @@ const transformGoogleGenerativeAIStream = (
     }
 
     if (!!text?.trim()) return { data: text, id: context?.id, type: 'text' };
-
-    // streaming the image
-    if (Array.isArray(candidate.content?.parts) && candidate.content.parts.length > 0) {
-      const part = candidate.content.parts[0];
-
-      if (part && part.inlineData && part.inlineData.data && part.inlineData.mimeType) {
-        return {
-          data: `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`,
-          id: context.id,
-          type: 'base64_image',
-        };
-      }
-    }
   }
 
   return {
-    data: text,
+    data: text || '',
     id: context?.id,
     type: 'text',
   };

package/packages/types/src/aiModel.ts

@@ -121,7 +121,8 @@ export type PricingUnitName =
   | 'audioInput_cacheRead' // corresponds to ChatModelPricing.cachedAudioInput
 
   // Image-based pricing units
-  | 'imageGeneration'; // for image generation models
+  | 'imageGeneration' // for image generation models
+  | 'imageOutput';
 
 export type PricingUnitType =
   | 'millionTokens' // per 1M tokens

package/packages/utils/src/client/imageDimensions.test.ts

@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getImageDimensions } from './imageDimensions';
+
+// Mock functions - need to be accessible in tests
+const mockAddEventListener = vi.fn();
+let mockImage: ReturnType<typeof vi.fn>;
+let mockCreateObjectURL: any;
+let mockRevokeObjectURL: any;
+
+// Store event handlers for manual triggering
+let loadHandler: (() => void) | null = null;
+let errorHandler: (() => void) | null = null;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  loadHandler = null;
+  errorHandler = null;
+
+  // Mock Image constructor using vi.stubGlobal (modern approach)
+  const mockImageInstance = {
+    addEventListener: mockAddEventListener.mockImplementation(
+      (event: string, handler: () => void) => {
+        if (event === 'load') loadHandler = handler;
+        if (event === 'error') errorHandler = handler;
+      },
+    ),
+    naturalHeight: 600,
+    naturalWidth: 800,
+    src: '',
+  };
+
+  mockImage = vi.fn().mockImplementation(() => mockImageInstance);
+  vi.stubGlobal('Image', mockImage);
+
+  // Mock URL methods using vi.spyOn (preserves other URL functionality)
+  mockCreateObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+  mockRevokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+});
+
+describe('getImageDimensions', () => {
+  it('should return correct dimensions for valid File object', async () => {
+    const imageFile = new File(['fake image data'], 'test.png', { type: 'image/png' });
+
+    const resultPromise = getImageDimensions(imageFile);
+    loadHandler?.();
+    const result = await resultPromise;
+
+    expect(result).toEqual({ height: 600, width: 800 });
+    expect(mockImage).toHaveBeenCalledTimes(1);
+    expect(mockCreateObjectURL).toHaveBeenCalledWith(imageFile);
+    expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:mock-url');
+  });
+
+  it('should return correct dimensions for valid data URI', async () => {
+    const dataUri =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+    const resultPromise = getImageDimensions(dataUri);
+    loadHandler?.();
+    const result = await resultPromise;
+
+    expect(result).toEqual({ height: 600, width: 800 });
+    expect(mockImage).toHaveBeenCalledTimes(1);
+    // Data URI should not use createObjectURL
+    expect(mockCreateObjectURL).not.toHaveBeenCalled();
+    expect(mockRevokeObjectURL).not.toHaveBeenCalled();
+  });
+
+  it('should return undefined for invalid inputs', async () => {
+    // Test non-image file
+    const textFile = new File(['content'], 'test.txt', { type: 'text/plain' });
+    const result1 = await getImageDimensions(textFile);
+    expect(result1).toBeUndefined();
+
+    // Test non-data URI string
+    const result2 = await getImageDimensions('https://example.com/image.jpg');
+    expect(result2).toBeUndefined();
+  });
+
+  it('should return undefined when image fails to load', async () => {
+    const imageFile = new File(['fake image data'], 'test.png', { type: 'image/png' });
+
+    const resultPromise = getImageDimensions(imageFile);
+    errorHandler?.(); // Simulate load error
+    const result = await resultPromise;
+
+    expect(result).toBeUndefined();
+    expect(mockCreateObjectURL).toHaveBeenCalledWith(imageFile);
+    expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:mock-url');
+  });
+});

package/packages/utils/src/client/imageDimensions.ts

@@ -0,0 +1,54 @@
+/**
+ * Helper function to extract image dimensions from File objects or base64 data URIs
+ * @param source The image source - either a File object or base64 data URI string
+ * @returns Promise resolving to dimensions or undefined if not an image or error occurs
+ */
+export const getImageDimensions = async (
+  source: File | string,
+): Promise<{ height: number; width: number } | undefined> => {
+  // Type guard and validation
+  if (typeof source === 'string') {
+    // Handle base64 data URI
+    if (!source.startsWith('data:image/')) return undefined;
+  } else {
+    // Handle File object
+    if (!source.type.startsWith('image/')) return undefined;
+  }
+
+  return new Promise((resolve) => {
+    const img = new Image();
+    let objectUrl: string | null = null;
+
+    const handleLoad = () => {
+      resolve({
+        height: img.naturalHeight,
+        width: img.naturalWidth,
+      });
+      // Clean up object URL if created
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+
+    const handleError = () => {
+      // Clean up object URL if created
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+      resolve(undefined);
+    };
+
+    img.addEventListener('load', handleLoad);
+    img.addEventListener('error', handleError);
+
+    // Set source based on input type
+    if (typeof source === 'string') {
+      // Base64 data URI - use directly
+      img.src = source;
+    } else {
+      // File object - create object URL
+      objectUrl = URL.createObjectURL(source);
+      img.src = objectUrl;
+    }
+  });
+};

package/packages/utils/src/number.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { MAX_SEED, calculateThumbnailDimensions, generateUniqueSeeds } from './number';
+import { MAX_SEED } from '@/const/image';
+
+import { calculateThumbnailDimensions, generateUniqueSeeds } from './number';
 
 describe('number utilities', () => {
   describe('MAX_SEED constant', () => {

package/packages/utils/src/number.ts

@@ -1,8 +1,7 @@
 import prand from 'pure-rand';
 
-import { IMAGE_GENERATION_CONFIG } from '@/const/imageGeneration';
+import { IMAGE_GENERATION_CONFIG, MAX_SEED } from '@/const/image';
 
-export const MAX_SEED = 2 ** 31 - 1;
 export function generateUniqueSeeds(seedCount: number): number[] {
   // Use current timestamp as the initial seed
   const initialSeed = Date.now();

package/src/app/[variants]/(main)/image/@menu/components/SeedNumberInput/index.tsx

@@ -6,7 +6,7 @@ import { CSSProperties, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { MAX_SEED } from '@/libs/standard-parameters/index';
+import { MAX_SEED } from '@/const/image';
 import { generateUniqueSeeds } from '@/utils/number';
 
 export interface SeedNumberInputProps {

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/DimensionControlGroup.tsx

@@ -15,7 +15,6 @@ const styles = {
     width: '100%',
   },
   label: {
-    fontSize: 12,
     fontWeight: 500,
   },
 } as const;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUpload.tsx

@@ -18,10 +18,14 @@ import { useConfigPanelStyles } from '../style';
 // ======== Business Types ======== //
 
 export interface ImageUploadProps {
-  // Callback when URL changes
+  // Callback when URL changes - supports both old API (string) and new API (object with dimensions)
   className?: string; // Image URL
   maxFileSize?: number;
-  onChange?: (url?: string) => void;
+  onChange?: (
+    data?:
+      | string // Old API: just URL
+      | { dimensions?: { height: number, width: number; }, url: string; }, // New API: URL with dimensions
+  ) => void;
   style?: React.CSSProperties;
   value?: string | null;
 }
@@ -483,8 +487,11 @@ const ImageUpload: FC<ImageUploadProps> = memo(
         });
 
         if (result?.url) {
-          // Upload successful
-          onChange?.(result.url);
+          // Upload successful - pass dimensions if available
+          const callbackData = result.dimensions
+            ? { dimensions: result.dimensions, url: result.url }
+            : result.url;
+          onChange?.(callbackData);
         }
       } catch {
         // Upload failed
@@ -563,8 +570,11 @@ const ImageUpload: FC<ImageUploadProps> = memo(
         });
 
         if (result?.url) {
-          // Upload successful
-          onChange?.(result.url);
+          // Upload successful - pass dimensions if available
+          const callbackData = result.dimensions
+            ? { dimensions: result.dimensions, url: result.url }
+            : result.url;
+          onChange?.(callbackData);
         }
       } catch {
         // Upload failed

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUrl.tsx

@@ -2,14 +2,26 @@ import { memo } from 'react';
 
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
 
+import { useAutoDimensions } from '../hooks/useAutoDimensions';
 import ImageUpload from './ImageUpload';
 
 const ImageUrl = memo(() => {
   const { value: imageUrl, setValue, maxFileSize } = useGenerationConfigParam('imageUrl');
+  const { autoSetDimensions, extractUrlAndDimensions } = useAutoDimensions();
+
+  const handleChange = (
+    data?:
+      | string // Old API: just URL
+      | { dimensions?: { height: number; width: number }; url: string }, // New API: URL with dimensions
+  ) => {
+    const { url, dimensions } = extractUrlAndDimensions(data);
 
-  // Extract the first URL from the array for single image display
-  const handleChange = (url?: string) => {
     setValue(url ?? null);
+
+    // Auto-set dimensions if available
+    if (dimensions) {
+      autoSetDimensions(dimensions);
+    }
   };
 
   return <ImageUpload maxFileSize={maxFileSize} onChange={handleChange} value={imageUrl} />;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUrlsUpload.tsx

@@ -2,16 +2,29 @@ import { memo } from 'react';
 
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
 
+import { useAutoDimensions } from '../hooks/useAutoDimensions';
 import ImageUpload from './ImageUpload';
 import MultiImagesUpload from './MultiImagesUpload';
 
 const ImageUrlsUpload = memo(() => {
   const { value, setValue, maxCount, maxFileSize } = useGenerationConfigParam('imageUrls');
+  const { autoSetDimensions, extractUrlAndDimensions } = useAutoDimensions();
 
   // When maxCount is 1, use ImageUpload for single image upload
   if (maxCount === 1) {
-    const handleSingleChange = (url?: string) => {
+    const handleSingleChange = (
+      data?:
+        | string // Old API: just URL
+        | { dimensions?: { height: number; width: number }; url: string }, // New API: URL with dimensions
+    ) => {
+      const { url, dimensions } = extractUrlAndDimensions(data);
+
       setValue(url ? [url] : []);
+
+      // Auto-set dimensions if available
+      if (dimensions) {
+        autoSetDimensions(dimensions);
+      }
     };
 
     return (
@@ -24,10 +37,22 @@ const ImageUrlsUpload = memo(() => {
   }
 
   // Otherwise use MultiImagesUpload for multiple images
-  const handleChange = (urls: string[]) => {
+  const handleChange = (
+    data:
+      | string[] // Old API: just URLs
+      | { dimensions?: { height: number; width: number }; urls: string[] }, // New API: URLs with first image dimensions
+  ) => {
+    const urls = Array.isArray(data) ? data : data.urls;
+    const dimensions = Array.isArray(data) ? undefined : data.dimensions;
+
     // Directly set the URLs to the store
     // The store will handle URL to path conversion when needed
     setValue(urls);
+
+    // Only auto-set dimensions if no existing images and only uploading one image
+    if (!value?.length && urls.length === 1 && dimensions) {
+      autoSetDimensions(dimensions);
+    }
   };
 
   return (

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/MultiImagesUpload/index.tsx

@@ -37,11 +37,15 @@ interface DisplayItem {
 }
 
 export interface MultiImagesUploadProps {
-  // Callback when URLs change
+  // Callback when URLs change - supports both old API (string[]) and new API (object with dimensions)
   className?: string; // Array of image URLs
   maxCount?: number;
   maxFileSize?: number;
-  onChange?: (urls: string[]) => void;
+  onChange?: (
+    data:
+      | string[] // Old API: just URLs
+      | { dimensions?: { height: number, width: number; }, urls: string[]; }, // New API: URLs with first image dimensions
+  ) => void;
   style?: React.CSSProperties;
   value?: string[];
 }
@@ -648,9 +652,10 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         }),
       );
 
-      // Wait for all uploads to complete and collect successful URLs
+      // Wait for all uploads to complete and collect successful URLs and dimensions
       const uploadResults = await Promise.allSettled(uploadPromises);
       const successfulUrls: string[] = [];
+      let firstImageDimensions: { height: number, width: number; } | undefined;
 
       uploadResults.forEach((result, index) => {
         const displayItem = newDisplayItems[index];
@@ -658,6 +663,11 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         if (result.status === 'fulfilled' && result.value) {
           successfulUrls.push(result.value.url);
 
+          // Collect the first image's dimensions for auto-setting parameters
+          if (index === 0 && result.value.dimensions) {
+            firstImageDimensions = result.value.dimensions;
+          }
+
           // Update display item with final URL and success status
           setDisplayItems((prev) =>
             prev.map((item) =>
@@ -694,10 +704,18 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
         }
       });
 
-      // Update parent component with new URLs
+      // Update parent component with new URLs and dimensions (if applicable)
       if (successfulUrls.length > 0) {
         const updatedUrls = [...currentUrls, ...successfulUrls];
-        onChange?.(updatedUrls);
+
+        // Pass dimensions if this is the first upload (no existing images) and only one image uploaded
+        const shouldPassDimensions = currentUrls.length === 0 && successfulUrls.length === 1;
+
+        if (shouldPassDimensions && firstImageDimensions) {
+          onChange?.({ dimensions: firstImageDimensions, urls: updatedUrls });
+        } else {
+          onChange?.(updatedUrls);
+        }
       }
 
       // Clear display items after all uploads complete

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/hooks/useAutoDimensions.ts

@@ -0,0 +1,56 @@
+import { DEFAULT_DIMENSION_CONSTRAINTS } from '@lobechat/const';
+
+import { constrainDimensions } from '@/app/[variants]/(main)/image/@menu/features/ConfigPanel/utils/dimensionConstraints';
+import { useImageStore } from '@/store/image';
+import { imageGenerationConfigSelectors } from '@/store/image/slices/generationConfig/selectors';
+
+/**
+ * Extract URL and dimensions from callback data (supports both old and new API)
+ */
+const extractUrlAndDimensions = (
+  data?: string | { dimensions?: { height: number; width: number }; url: string },
+) => {
+  const url = typeof data === 'string' ? data : data?.url;
+  const dimensions = typeof data === 'object' ? data?.dimensions : undefined;
+  return { dimensions, url };
+};
+
+/**
+ * Custom hook for automatically setting image dimensions with model constraints
+ * @returns Function to auto-set dimensions and type processing utilities
+ */
+export const useAutoDimensions = () => {
+  const paramsSchema = useImageStore(imageGenerationConfigSelectors.parametersSchema);
+  const isSupportWidth = useImageStore(imageGenerationConfigSelectors.isSupportedParam('width'));
+  const isSupportHeight = useImageStore(imageGenerationConfigSelectors.isSupportedParam('height'));
+  const setWidth = useImageStore((s) => s.setWidth);
+  const setHeight = useImageStore((s) => s.setHeight);
+
+  /**
+   * Auto-set dimensions with model constraints if parameters are supported
+   */
+  const autoSetDimensions = (dimensions: { height: number; width: number }) => {
+    if (!isSupportWidth || !isSupportHeight) return;
+
+    const constraints = {
+      height: {
+        max: paramsSchema.height?.max || DEFAULT_DIMENSION_CONSTRAINTS.MAX_SIZE,
+        min: paramsSchema.height?.min || DEFAULT_DIMENSION_CONSTRAINTS.MIN_SIZE,
+      },
+      width: {
+        max: paramsSchema.width?.max || DEFAULT_DIMENSION_CONSTRAINTS.MAX_SIZE,
+        min: paramsSchema.width?.min || DEFAULT_DIMENSION_CONSTRAINTS.MIN_SIZE,
+      },
+    };
+
+    const adjusted = constrainDimensions(dimensions.width, dimensions.height, constraints);
+    setWidth(adjusted.width);
+    setHeight(adjusted.height);
+  };
+
+  return {
+    autoSetDimensions,
+    canAutoSet: isSupportWidth && isSupportHeight,
+    extractUrlAndDimensions,
+  };
+};

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Text } from '@lobehub/ui';
-import { ReactNode, memo } from 'react';
+import { useTheme } from 'antd-style';
+import { ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -36,6 +37,9 @@ const isSupportedParamSelector = imageGenerationConfigSelectors.isSupportedParam
 
 const ConfigPanel = memo(() => {
   const { t } = useTranslation('image');
+  const theme = useTheme();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [isScrollable, setIsScrollable] = useState(false);
 
   const isSupportImageUrl = useImageStore(isSupportedParamSelector('imageUrl'));
   const isSupportSize = useImageStore(isSupportedParamSelector('size'));
@@ -45,8 +49,79 @@ const ConfigPanel = memo(() => {
 
   const { showDimensionControl } = useDimensionControl();
 
+  // Check if content exceeds container height and needs scrolling
+  const checkScrollable = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (container) {
+      const hasScrollbar = container.scrollHeight > container.clientHeight;
+      setIsScrollable(hasScrollbar);
+    }
+  }, []);
+
+  // Re-check when content changes
+  useEffect(() => {
+    checkScrollable();
+  }, [
+    checkScrollable,
+    isSupportImageUrl,
+    isSupportSize,
+    isSupportSeed,
+    isSupportSteps,
+    isSupportImageUrls,
+    showDimensionControl,
+  ]);
+
+  // Setup observers for container changes
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    // Initial check
+    checkScrollable();
+
+    // Use ResizeObserver for container size changes
+    const resizeObserver = new ResizeObserver(checkScrollable);
+    resizeObserver.observe(container);
+
+    // Use MutationObserver for content changes
+    const mutationObserver = new MutationObserver(checkScrollable);
+    mutationObserver.observe(container, { childList: true, subtree: true });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [checkScrollable]);
+
+  // Memoize sticky styles to prevent unnecessary re-renders
+  const stickyStyles = useMemo(
+    () => ({
+      bottom: 0,
+      position: 'sticky' as const,
+      zIndex: 1,
+      ...(isScrollable && {
+        backgroundColor: theme.colorBgContainer,
+        borderTop: `1px solid ${theme.colorBorder}`,
+        // Use negative margin to extend background to container edges
+marginLeft: -12,
+        
+        marginRight: -12,
+        marginTop: 20,
+        // Add back internal padding
+        paddingLeft: 12,
+        paddingRight: 12,
+      }),
+    }),
+    [isScrollable, theme.colorBgContainer, theme.colorBorder],
+  );
+
   return (
-    <Flexbox gap={32} padding={12} style={{ overflow: 'auto' }}>
+    <Flexbox
+      gap={32}
+      padding="12px 12px 0 12px"
+      ref={scrollContainerRef}
+      style={{ height: '100%', overflow: 'auto' }}
+    >
       <ConfigItemLayout>
         <ModelSelect />
       </ConfigItemLayout>
@@ -83,9 +158,11 @@ const ConfigPanel = memo(() => {
         </ConfigItemLayout>
       )}
 
-      <ConfigItemLayout label={t('config.imageNum.label')}>
-        <ImageNum />
-      </ConfigItemLayout>
+      <Flexbox padding="12px 0" style={stickyStyles}>
+        <ConfigItemLayout label={t('config.imageNum.label')}>
+          <ImageNum />
+        </ConfigItemLayout>
+      </Flexbox>
     </Flexbox>
   );
 });