Fix: Add image generation UI hint & date storage

ShenKSPZ · ShenKSPZ · commit 850b981eb379 · 2025-05-14T18:20:01.000+08:00
diff --git a/src/components/image/ImageGenerateHistoryItem.tsx b/src/components/image/ImageGenerateHistoryItem.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { ImageGenerationResult } from '../../types/image';
 import { MessageContent } from '../../types/chat';
+import { Loader } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 interface ImageGenerateHistoryItemProps {
   imageResult: ImageGenerationResult;
@@ -9,10 +11,13 @@ interface ImageGenerateHistoryItemProps {
 const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({ 
   imageResult,
 }) => { 
+  const { t } = useTranslation();
+  const isGenerating = imageResult.status === 'generating';
+  const isFailed = imageResult.status === 'failed';
 
   // Function to render image grid based on number of images and aspect ratio
   const renderImageGrid = (images: MessageContent[]) => {
-    if (images.length === 0) return null;
+    if (images.length === 0 && !isGenerating) return null;
 
     // Convert aspect ratio string (e.g. "16:9") to calculate best layout
     const [widthRatio, heightRatio] = imageResult.aspectRatio.split(':').map(Number);
@@ -29,6 +34,29 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
       gridClass = "grid-cols-2 grid-rows-2";
     }
     
+    // If still generating, show a loading indicator
+    if (isGenerating) {
+      return (
+        <div className="flex items-center justify-center h-64 bg-gray-50" style={{ aspectRatio: imageResult.aspectRatio.replace(':', '/') }}>
+          <div className="flex flex-col items-center">
+            <Loader size={40} className="text-primary-500 animate-spin" />
+            <p className="mt-4 text-sm text-gray-600">{t('imageGeneration.creatingImage')}</p>
+          </div>
+        </div>
+      );
+    }
+    
+    // Show error message if generation failed
+    if (isFailed) {
+      return (
+        <div className="flex items-center justify-center h-64 bg-red-50" style={{ aspectRatio: imageResult.aspectRatio.replace(':', '/') }}>
+          <div className="flex flex-col items-center">
+            <p className="text-red-600">{t('imageGeneration.generationFailed')}</p>
+          </div>
+        </div>
+      );
+    }
+    
     return (
       <div className={`grid gap-2 ${gridClass}`}>
         {images.map((image, index) => (
@@ -51,7 +79,7 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
   };
 
   return (
-    <div className="mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item">
+    <div className={`mb-6 overflow-hidden border rounded-lg shadow-sm image-result-item ${isGenerating ? 'border-primary-300' : ''}`}>
       <div className="image-result-container">
         {renderImageGrid(imageResult.images)}
       </div>
@@ -63,18 +91,23 @@ const ImageGenerateHistoryItem: React.FC<ImageGenerateHistoryItemProps> = ({
               <p className="mb-1 text-sm font-medium text-gray-900 truncate">{imageResult.prompt}</p>
               
               <div className="flex flex-wrap gap-2 mt-2">
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.model}
                 </span>
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.provider}
                 </span>
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   {imageResult.aspectRatio}
                 </span>
-                <span className="px-2 py-1 text-xs bg-gray-100 rounded-full">
+                <span className={`px-2 py-1 text-xs rounded-full ${isGenerating ? 'bg-primary-100 text-primary-800' : 'bg-gray-100'}`}>
                   Seed: {imageResult.seed}
                 </span>
+                {isGenerating && (
+                  <span className="px-2 py-1 text-xs text-white rounded-full bg-primary-500 animate-pulse">
+                    {t('imageGeneration.generating')}
+                  </span>
+                )}
               </div>
             </div>
           </div>
diff --git a/src/components/pages/ImageGenerationPage.tsx b/src/components/pages/ImageGenerationPage.tsx
@@ -43,11 +43,17 @@ export const ImageGenerationPage = () => {
       const dbService = DatabaseIntegrationService.getInstance();
       const results = await dbService.getImageGenerationResults();
       if (results && results.length > 0) {
-        // Sort by most recent first
-        const sortedResults = results.sort((a, b) => 
-          b.imageResultId.localeCompare(a.imageResultId)
-        );
+        // Sort by most recent first using updatedAt timestamp
+        const sortedResults = results.sort((a, b) => {
+          // Convert string dates to Date objects if necessary
+          const dateA = a.updatedAt instanceof Date ? a.updatedAt : new Date(a.updatedAt);
+          const dateB = b.updatedAt instanceof Date ? b.updatedAt : new Date(b.updatedAt);
+          // Sort newest first
+          return dateB.getTime() - dateA.getTime();
+        });
         setHistoryResults(sortedResults);
+      } else {
+        setHistoryResults([]);
       }
     } catch (error) {
       console.error('Error refreshing image history:', error);
@@ -142,6 +148,32 @@ export const ImageGenerationPage = () => {
     };
   }, []);
 
+  // Process and update the result after generation
+  const processGenerationResult = async (handler: ImageGenerationHandler, images: string[]) => {
+    // Convert image data to full URLs if needed
+    const processedImages = images.map(img => {
+      const base64Data = img as string;
+      if (base64Data.startsWith('data:image')) {
+        return base64Data;
+      } else {
+        return `data:image/png;base64,${base64Data}`;
+      }
+    });
+    
+    // Update the handler with successful results
+    await handler.setSuccess(processedImages);
+    
+    // Refresh history to include the new generation
+    await refreshImageHistory();
+    
+    // Remove the handler to prevent duplication with database results
+    const imageManager = ImageGenerationManager.getInstance();
+    imageManager.removeHandler(handler.getId());
+    
+    // Generate new seed for next generation
+    generateNewSeed();
+  };
+
   // Handle generating an image using selected provider
   const handleGenerateImage = async () => {
     if (!prompt.trim()) return;
@@ -195,24 +227,7 @@ export const ImageGenerationPage = () => {
       
       // Process the result
       if (images && images.length > 0) {
-        // Convert image data to full URLs if needed
-        const processedImages = images.map(img => {
-          const base64Data = img as string;
-          if (base64Data.startsWith('data:image')) {
-            return base64Data;
-          } else {
-            return `data:image/png;base64,${base64Data}`;
-          }
-        });
-        
-        // Update the handler with successful results
-        handler.setSuccess(processedImages);
-        
-        // Refresh history to include the new generation
-        refreshImageHistory();
-        
-        // Generate new seed for next generation
-        generateNewSeed();
+        await processGenerationResult(handler, images as string[]);
       } else {
         throw new Error("No images generated");
       }
@@ -239,11 +254,13 @@ export const ImageGenerationPage = () => {
         if (b.status === ImageGenerationStatus.GENERATING && a.status !== ImageGenerationStatus.GENERATING) {
           return 1;
         }
-        // Then sort by most recent first (assuming imageResultId is a UUID with timestamp components)
-        return b.imageResultId.localeCompare(a.imageResultId);
+        // Then sort by most recent first using updatedAt timestamp
+        const dateA = a.updatedAt instanceof Date ? a.updatedAt : new Date(a.updatedAt);
+        const dateB = b.updatedAt instanceof Date ? b.updatedAt : new Date(b.updatedAt);
+        return dateB.getTime() - dateA.getTime();
       });
     
-    // Combine with historical results
+    // Combine with historical results and ensure newest is first
     return [...handlerResults, ...historyResults];
   };
 
diff --git a/src/services/image-generation-handler.ts b/src/services/image-generation-handler.ts
@@ -28,6 +28,7 @@ export class ImageGenerationHandler {
   private errorMessage: string | null = null;
   private onStatusChangeCallback: (handler: ImageGenerationHandler) => void;
   private dbService: DatabaseIntegrationService;
+  private updatedAt: Date;
 
   constructor(
     options: ImageGenerationOptions,
@@ -38,6 +39,7 @@ export class ImageGenerationHandler {
     this.status = ImageGenerationStatus.PENDING;
     this.onStatusChangeCallback = onStatusChangeCallback;
     this.dbService = DatabaseIntegrationService.getInstance();
+    this.updatedAt = new Date();
   }
 
   public getId(): string {
@@ -71,30 +73,34 @@ export class ImageGenerationHandler {
       aspectRatio: this.options.aspectRatio,
       provider: this.options.provider,
       model: this.options.model,
-      images: this.images
+      images: this.images,
+      updatedAt: this.updatedAt
     };
   }
 
   public setGenerating(): void {
     this.status = ImageGenerationStatus.GENERATING;
+    this.updatedAt = new Date();
     this.notifyStatusChange();
   }
 
-  public setSuccess(imageUrls: string[]): void {
+  public async setSuccess(imageUrls: string[]): Promise<void> {
     this.status = ImageGenerationStatus.SUCCESS;
+    this.updatedAt = new Date();
     this.images = imageUrls.map(url => ({
       type: MessageContentType.Image,
       content: url,
       dataJson: ''
     }));
     
     // Save to database
-    this.saveToDatabase();
+    await this.saveToDatabase();
     this.notifyStatusChange();
   }
 
   public setFailed(error: Error): void {
     this.status = ImageGenerationStatus.FAILED;
+    this.updatedAt = new Date();
     this.errorMessage = error.message;
     this.notifyStatusChange();
   }
@@ -146,6 +152,13 @@ export class ImageGenerationManager {
     return this.handlers.get(id);
   }
 
+  public removeHandler(id: string): void {
+    if (this.handlers.has(id)) {
+      this.handlers.delete(id);
+      this.notifyUpdate();
+    }
+  }
+
   public getAllHandlers(): Map<string, ImageGenerationHandler> {
     return this.handlers;
   }
diff --git a/src/types/image.ts b/src/types/image.ts
@@ -11,4 +11,5 @@ export interface ImageGenerationResult {
     provider: string;
     model: string;
     images: MessageContent[];
+    updatedAt: Date;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,5 @@ export interface ImageGenerationResult {`
`11`	`11`	`provider: string;`
`12`	`12`	`model: string;`
`13`	`13`	`images: MessageContent[];`
	`14`	`+ updatedAt: Date;`
`14`	`15`	`}`