feat: Enhance image handling in post generation and display logic

backend/api/posts.py

@@ -246,25 +246,36 @@ def get_job_status(job_id):
                 # Handle image_data which could be bytes or a URL string
                 image_data = job['result'].get('image_data')
                 if isinstance(image_data, bytes):
-                    # If it's bytes, we can't send it directly in JSON
-                    # For now, we'll set it to None and let the frontend know
-                    # In a future update, we might save it to storage and return a URL
-                    response_data['image_url'] = None
-                    response_data['has_image_data'] = True  # Flag to indicate image data exists
+                    # Convert bytes to base64 for sending in JSON
+                    try:
+                        # Encode bytes to base64 string
+                        base64_image = base64.b64encode(image_data).decode('utf-8')
+                        # Create a data URL for the image
+                        response_data['image_url'] = f"data:image/png;base64,{base64_image}"
+                        response_data['has_image_data'] = True
+                        # Also include the raw image_data for the frontend
+                        response_data['image_data'] = response_data['image_url']
+                    except Exception as e:
+                        current_app.logger.error(f"Error encoding image to base64: {str(e)}")
+                        response_data['image_url'] = None
+                        response_data['has_image_data'] = True
                 elif isinstance(image_data, dict):
                     # Handle the case where image_data is a dict from Gradio API
                     # The dict may contain 'path', 'url', or other keys
                     if image_data.get('url'):
                         response_data['image_url'] = image_data['url']
                         response_data['has_image_data'] = True
+                        response_data['image_data'] = image_data['url']
                     elif image_data.get('path'):
                         # If we have a path, we might need to serve it or convert it to a URL
                         # For now, we'll just indicate that image data exists
                         response_data['image_url'] = None
                         response_data['has_image_data'] = True
+                        response_data['image_data'] = image_data['path']
                     else:
                         response_data['image_url'] = None
                         response_data['has_image_data'] = image_data is not None
+                        response_data['image_data'] = image_data
                 elif isinstance(image_data, str):
                     # Check if it's a local file path
                     if os.path.exists(image_data):
@@ -272,14 +283,17 @@ def get_job_status(job_id):
                         job['image_file_path'] = image_data
                         response_data['image_url'] = f"/api/posts/image/{job_id}"  # API endpoint to serve the image
                         response_data['has_image_data'] = True
+                        response_data['image_data'] = image_data
                     else:
-                        # If it's a URL, use it directly
+                        # If it's a URL or base64 data, use it directly
                         response_data['image_url'] = image_data
                         response_data['has_image_data'] = True
+                        response_data['image_data'] = image_data
                 else:
                     # If it's None or other type
                     response_data['image_url'] = None
                     response_data['has_image_data'] = image_data is not None
+                    response_data['image_data'] = image_data
             else:
                 response_data['content'] = job['result']
                 response_data['image_url'] = None

frontend/src/pages/Posts.jsx

@@ -344,20 +344,40 @@ const Posts = () => {
               </div>
               
               {/* Image Preview */}
-              {postImage && postImage !== 'HAS_IMAGE_DATA_BUT_NOT_URL' && (
+              {postImage && (
                 <div className="space-y-3 sm:space-y-4">
                   <label className="block text-xs sm:text-sm font-semibold text-gray-700">Generated Image</label>
                   <div className="relative border border-gray-300 rounded-xl overflow-hidden bg-gray-50">
-                    <img 
-                      src={postImage} 
-                      alt="Generated post content" 
-                      className="w-full max-h-96 object-contain"
-                      onError={(e) => {
-                        // If image fails to load, remove it from state
-                        setPostImage(null);
-                        e.target.style.display = 'none';
-                      }}
-                    />
+                    {/* Check if postImage is a data URL (base64) or a regular URL */}
+                    {postImage.startsWith('data:image') ? (
+                      // Display base64 image directly
+                      <img 
+                        src={postImage} 
+                        alt="Generated post content" 
+                        className="w-full max-h-96 object-contain"
+                      />
+                    ) : postImage !== 'HAS_IMAGE_DATA_BUT_NOT_URL' ? (
+                      // Display regular URL image
+                      <img 
+                        src={postImage} 
+                        alt="Generated post content" 
+                        className="w-full max-h-96 object-contain"
+                        onError={(e) => {
+                          // If image fails to load, remove it from state
+                          setPostImage(null);
+                          e.target.style.display = 'none';
+                        }}
+                      />
+                    ) : (
+                      // Display message for image data that exists but can't be displayed directly
+                      <div className="text-center text-gray-500 p-4">
+                        <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <p className="text-sm">Image data exists but cannot be displayed directly</p>
+                        <p className="text-xs mt-1">The image will be included when you publish the post</p>
+                      </div>
+                    )}
                     <div className="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
                       AI Generated
                     </div>
@@ -365,22 +385,6 @@ const Posts = () => {
                 </div>
               )}
               
-              {/* Image Data Exists Message */}
-              {postImage === 'HAS_IMAGE_DATA_BUT_NOT_URL' && (
-                <div className="space-y-3 sm:space-y-4">
-                  <label className="block text-xs sm:text-sm font-semibold text-gray-700">Generated Image</label>
-                  <div className="relative border border-gray-300 rounded-xl overflow-hidden bg-gray-50 p-4">
-                    <div className="text-center text-gray-500">
-                      <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                      </svg>
-                      <p className="text-sm">Image data exists but cannot be displayed directly</p>
-                      <p className="text-xs mt-1">The image will be included when you publish the post</p>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
               {/* Create Post Form */}
               <form onSubmit={handleCreatePost} className="create-post-form grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                 <div className="form-field sm:col-span-2">

frontend/src/services/postService.js

@@ -94,7 +94,17 @@ class PostService {
               imageData = jobData.image_url;
             } else if (jobData.has_image_data) {
               // Special marker for image data that exists but can't be displayed directly
-              imageData = 'HAS_IMAGE_DATA_BUT_NOT_URL';
+              // If we have actual image data (possibly base64), we should handle it
+              if (jobData.image_data) {
+                // Check if it's base64 encoded data
+                if (typeof jobData.image_data === 'string' && jobData.image_data.startsWith('data:image')) {
+                  imageData = jobData.image_data; // Use the base64 data directly
+                } else {
+                  imageData = 'HAS_IMAGE_DATA_BUT_NOT_URL';
+                }
+              } else {
+                imageData = 'HAS_IMAGE_DATA_BUT_NOT_URL';
+              }
             }
             
             // If content is an array, take the first element