Add optimized image versions for social media posts

Update Cloudinary service to generate specific image transformations (Facebook Feed, Instagram Feed, Instagram Story) during upload using eager transformations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/g8ompNP

.replit

@@ -18,6 +18,10 @@ externalPort = 80
 localPort = 5555
 externalPort = 3002
 
+[[ports]]
+localPort = 39327
+externalPort = 3003
+
 [[ports]]
 localPort = 40537
 externalPort = 3000

server/services/cloudinary.ts

@@ -31,13 +31,22 @@ class CloudinaryService {
 
     const isVideo = mimeType.startsWith('video/');
 
-    // Upload to Cloudinary
+    // Define eager transformations for images (generated during upload)
+    const eagerTransformations = !isVideo ? [
+      { width: 1200, height: 630, crop: 'pad', background: 'auto' },      // Facebook Feed
+      { width: 1080, height: 1080, crop: 'pad', background: 'auto' },     // Instagram Feed
+      { width: 1080, height: 1920, crop: 'pad', background: 'auto' }      // Instagram Story
+    ] : undefined;
+
+    // Upload to Cloudinary with eager transformations
     const uploadResult = await new Promise<any>((resolve, reject) => {
       const uploadStream = cloudinary.uploader.upload_stream(
         {
           folder: 'social-flow',
           public_id: `${Date.now()}-${fileName.replace(/\.[^/.]+$/, '')}`,
           resource_type: isVideo ? 'video' : 'image',
+          eager: eagerTransformations,
+          eager_async: false, // Generate transformations immediately
         },
         (error, result) => {
           if (error) reject(error);
@@ -51,27 +60,15 @@ class CloudinaryService {
     const publicId = uploadResult.public_id;
     const originalUrl = uploadResult.secure_url;
 
-    // Generate transformation URLs only for images
+    // Extract eager transformation URLs (generated by Cloudinary during upload)
     let facebookFeedUrl = null;
     let instagramFeedUrl = null;
     let instagramStoryUrl = null;
 
-    if (!isVideo) {
-      facebookFeedUrl = cloudinary.url(publicId, {
-        transformation: [
-          { width: 1200, height: 630, crop: 'pad', background: 'black' }
-        ]
-      });
-      instagramFeedUrl = cloudinary.url(publicId, {
-        transformation: [
-          { width: 1080, height: 1080, crop: 'pad', background: 'black' }
-        ]
-      });
-      instagramStoryUrl = cloudinary.url(publicId, {
-        transformation: [
-          { width: 1080, height: 1920, crop: 'pad', background: 'black' }
-        ]
-      });
+    if (!isVideo && uploadResult.eager && uploadResult.eager.length === 3) {
+      facebookFeedUrl = uploadResult.eager[0].secure_url;      // Facebook Feed (1200x630)
+      instagramFeedUrl = uploadResult.eager[1].secure_url;     // Instagram Feed (1080x1080)
+      instagramStoryUrl = uploadResult.eager[2].secure_url;    // Instagram Story (1080x1920)
     }
 
     return {