Fix: fix image generation method calling depth

Author: ShenKSPZ

src/components/image/ImageGenerateHistoryItem.tsx

@@ -3,6 +3,7 @@ import { ImageGenerationResult } from '../../types/image';
 import { MessageContent } from '../../types/chat';
 import { Loader } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { AIService } from '../../services/ai-service';
 
 interface ImageGenerateHistoryItemProps {
   imageResult: ImageGenerationResult;
@@ -78,6 +79,11 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
     );
   };
 
+  const getProviderName = (providerId: string, providerName: string) => {
+    const providerService = AIService.getInstance().getProvider(providerId);
+    return providerService?.name || providerName || providerId;
+  }
+
   return (
     <div className={`mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item ${isGenerating ? 'border-primary-300' : ''}`}>
       <div className="image-result-container">
@@ -95,7 +101,7 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
                   {imageResult.model}
                 </span>
                 <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
-                  {imageResult.provider}
+                  {getProviderName(imageResult.provider, imageResult.providerName)}
                 </span>
                 <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.aspectRatio}

src/components/pages/ImageGenerationPage.tsx

@@ -131,7 +131,7 @@ export const ImageGenerationPage = () => {
     };
 
     initialize();
-  }, [refreshImageHistory, loadImageGenerationProviders]);
+  }, [setSelectedProvider, setSelectedModel, refreshImageHistory, loadImageGenerationProviders]);
 
   // Listen for settings changes
   useEffect(() => {
@@ -242,6 +242,7 @@ export const ImageGenerationPage = () => {
         number: 1,
         aspectRatio: aspectRatio,
         provider: selectedProvider,
+        providerName: handleGetProviderNameById(selectedProvider),
         model: selectedModel,
       });
 

src/services/image-generation-handler.ts

@@ -16,6 +16,7 @@ export interface ImageGenerationOptions {
   seed: string;
   aspectRatio: string;
   provider: string;
+  providerName: string;
   model: string;
   number: number;
 }
@@ -72,6 +73,7 @@ export class ImageGenerationHandler {
       status: this.status,
       aspectRatio: this.options.aspectRatio,
       provider: this.options.provider,
+      providerName: this.options.providerName,
       model: this.options.model,
       images: this.images,
       updatedAt: this.updatedAt

src/types/image.ts

@@ -8,7 +8,8 @@ export interface ImageGenerationResult {
     number: number;
     status: string;
     aspectRatio: string;
-    provider: string;
+    provider: string; // provider id
+    providerName: string; // provider name
     model: string;
     images: MessageContent[];
     updatedAt: Date;