Merge pull request #90 from R0m1k3/dev

Dev

client/src/components/preview-modal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -16,7 +16,7 @@ interface PreviewModalProps {
   readOnly?: boolean;
 }
 
-type PreviewFormat = 'facebook-feed' | 'instagram-feed' | 'instagram-story';
+type PreviewFormat = 'facebook-feed' | 'facebook-story' | 'instagram-feed' | 'instagram-story';
 
 export function PreviewModal({
   open,
@@ -222,13 +222,104 @@ export function PreviewModal({
     </div>
   );
 
-  const renderInstagramStory = () => (
-    <div className="bg-black rounded-lg overflow-hidden max-w-sm mx-auto" style={{ aspectRatio: '9/16' }}>
+  const wrapText = (text: string, maxWidth: number, fontSize: number): string[] => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return [text];
+
+    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+    const words = text.split(' ');
+    const lines: string[] = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const metrics = ctx.measureText(testLine);
+      
+      if (metrics.width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+    
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  };
+
+  const calculateAdaptiveFontSize = (text: string, containerWidth: number, containerHeight: number): { fontSize: number; lines: string[]; isTruncated: boolean } => {
+    const MIN_FONT_SIZE = 24;
+    const MAX_FONT_SIZE = 72;
+    const LINE_HEIGHT_MULTIPLIER = 1.2;
+    
+    let fontSize = MAX_FONT_SIZE;
+    let lines: string[] = [];
+    let totalTextHeight = 0;
+    
+    while (fontSize >= MIN_FONT_SIZE) {
+      lines = wrapText(text, containerWidth, fontSize);
+      const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
+      totalTextHeight = lines.length * lineHeight;
+      
+      if (totalTextHeight <= containerHeight) {
+        break;
+      }
+      
+      fontSize -= 2;
+    }
+
+    let isTruncated = false;
+    
+    if (fontSize < MIN_FONT_SIZE) {
+      fontSize = MIN_FONT_SIZE;
+      lines = wrapText(text, containerWidth, fontSize);
+      const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
+      totalTextHeight = lines.length * lineHeight;
+      
+      const maxLines = Math.floor(containerHeight / lineHeight);
+      if (lines.length > maxLines) {
+        lines = lines.slice(0, maxLines);
+        if (lines[maxLines - 1]) {
+          lines[maxLines - 1] = lines[maxLines - 1].substring(0, lines[maxLines - 1].length - 3) + '...';
+        }
+        isTruncated = true;
+      }
+    }
+
+    return { fontSize, lines, isTruncated };
+  };
+
+  const renderStory = (platform: 'facebook' | 'instagram') => {
+    const STORY_WIDTH = 360;
+    const STORY_HEIGHT = 640;
+    const TEXT_BOX_HEIGHT_RATIO = 0.25;
+    const PADDING = 16;
+    
+    const textBoxHeight = STORY_HEIGHT * TEXT_BOX_HEIGHT_RATIO;
+    const maxTextWidth = STORY_WIDTH - (PADDING * 2);
+    const maxTextHeight = textBoxHeight - (PADDING * 2);
+
+    const { fontSize, lines } = postText 
+      ? calculateAdaptiveFontSize(postText, maxTextWidth, maxTextHeight)
+      : { fontSize: 24, lines: [] };
+
+    return (
+      <div className="bg-black rounded-lg overflow-hidden mx-auto relative" style={{ width: `${STORY_WIDTH}px`, height: `${STORY_HEIGHT}px` }}>
         {/* Header */}
-      <div className="absolute top-0 left-0 right-0 p-3 flex items-center gap-3 z-10">
+        <div className="absolute top-0 left-0 right-0 p-3 flex items-center gap-3 z-20">
+          {platform === 'instagram' ? (
             <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 flex items-center justify-center">
               <Instagram className="w-5 h-5 text-white" />
             </div>
+          ) : (
+            <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+              <Facebook className="w-5 h-5 text-white" />
+            </div>
+          )}
           <div className="flex-1">
             <div className="font-semibold text-sm text-white drop-shadow-lg">votre_page</div>
           </div>
@@ -236,11 +327,11 @@ export function PreviewModal({
 
         {/* Media */}
         {orderedMedia.length > 0 && (
-        <div className="relative h-full">
+          <div className="relative w-full h-full">
             {renderMedia(orderedMedia[currentPhotoIndex], "w-full h-full object-cover")}
             {orderedMedia.length > 1 && (
               <>
-              <div className="absolute top-3 left-3 right-3 flex gap-1">
+                <div className="absolute top-3 left-3 right-3 flex gap-1 z-20">
                   {orderedMedia.map((_, idx) => (
                     <button
                       key={idx}
@@ -254,25 +345,39 @@ export function PreviewModal({
                 </div>
                 <button
                   onClick={prevPhoto}
-                className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/30 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors"
+                  className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/30 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors z-20"
                   data-testid="button-prev-photo"
                 >
                   <ChevronLeft className="w-6 h-6 text-white" />
                 </button>
                 <button
                   onClick={nextPhoto}
-                className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/30 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/30 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors z-20"
                   data-testid="button-next-photo"
                 >
                   <ChevronRight className="w-6 h-6 text-white" />
                 </button>
               </>
             )}
-          {/* Text overlay */}
+            
+            {/* Text overlay box - matching exact server rendering */}
             {postText && (
-            <div className="absolute bottom-20 left-0 right-0 p-4">
-              <div className="bg-black/50 backdrop-blur-sm rounded-lg p-3">
-                <p className="text-white text-sm text-center">{postText}</p>
+              <div 
+                className="absolute bottom-0 left-0 right-0 flex items-center justify-center z-10"
+                style={{ height: `${TEXT_BOX_HEIGHT_RATIO * 100}%` }}
+              >
+                <div className="absolute inset-0 bg-black/60" />
+                <div 
+                  className="relative text-white text-center font-bold leading-tight"
+                  style={{ 
+                    fontSize: `${fontSize}px`,
+                    padding: `${PADDING}px`,
+                    lineHeight: '1.2'
+                  }}
+                >
+                  {lines.map((line, idx) => (
+                    <div key={idx}>{line}</div>
+                  ))}
                 </div>
               </div>
             )}
@@ -280,6 +385,10 @@ export function PreviewModal({
         )}
       </div>
     );
+  };
+
+  const renderFacebookStory = () => renderStory('facebook');
+  const renderInstagramStory = () => renderStory('instagram');
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -306,6 +415,9 @@ export function PreviewModal({
                 <SelectItem value="facebook-feed" data-testid="option-facebook-feed">
                   Feed Facebook (1200x630)
                 </SelectItem>
+                <SelectItem value="facebook-story" data-testid="option-facebook-story">
+                  Story Facebook (1080x1920)
+                </SelectItem>
                 <SelectItem value="instagram-feed" data-testid="option-instagram-feed">
                   Feed Instagram (1080x1080)
                 </SelectItem>
@@ -319,6 +431,7 @@ export function PreviewModal({
           {/* Preview */}
           <div className="border rounded-lg p-6 bg-gray-50">
             {previewFormat === 'facebook-feed' && renderFacebookFeed()}
+            {previewFormat === 'facebook-story' && renderFacebookStory()}
             {previewFormat === 'instagram-feed' && renderInstagramFeed()}
             {previewFormat === 'instagram-story' && renderInstagramStory()}
           </div>

replit.md

@@ -11,6 +11,7 @@ Preferred communication style: Simple, everyday language.
 ## Recent Changes
 
 ### November 17, 2025
+- **Story Text Overlay with Adaptive Sizing**: Implemented automatic text overlay on Instagram and Facebook stories with intelligent font size adaptation. When publishing a story with text content, the system now generates a composite image with the text burned into the bottom 25% of the image. Features: (1) Adaptive font sizing (24-72px) that automatically adjusts based on text length to fit within the text box, (2) Aspect ratio preservation for source images (centered with black letterboxing if needed to maintain 9:16 story format), (3) Automatic text wrapping with line breaks on word boundaries, (4) Ellipsis truncation for extremely long text that exceeds available space, (5) Semi-transparent black background (60% opacity) behind text for readability. Implementation uses Canvas (node-canvas) for image composition in `imageProcessor.addTextToStoryImage()`, with the generated image uploaded to Cloudinary in a dedicated `social-flow/stories` folder before publication. This ensures text appears correctly on published stories since Facebook/Instagram APIs don't support text overlays natively. The text box reserves 25% of the image height with 40px padding, and font size reduces in 2px increments until text fits or reaches the 24px minimum.
 - **AI Assistant Model Loading Fix**: Fixed bug preventing non-admin users from accessing the AI assistant feature. Problem: The AI chat component (`ai-chat.tsx`) was querying `/api/ai/models` which requires admin privileges (`requireAdmin`), causing model list to fail loading for regular users. Solution: Changed the component to use `/api/openrouter/models` endpoint instead, which only requires authentication (`requireAuth`). Updated data structure access from `modelsData?.models` to `modelsData?.data` to match the OpenRouter API response format `{ data: OpenRouterModel[] }`. This fix enables all authenticated users to load the model list and use the AI assistant feature. The endpoint `/api/openrouter/models` was already being used in Settings page for the same purpose, ensuring consistency across the application.
 
 ### November 5, 2025

server/services/cloudinary.ts

@@ -99,6 +99,39 @@ class CloudinaryService {
       resource_type: mediaType,
     });
   }
+
+  async uploadStoryImageWithText(buffer: Buffer, originalFileName: string): Promise<string> {
+    const config = await storage.getAnyCloudinaryConfig();
+    
+    if (!config) {
+      throw new Error('Cloudinary configuration not found. Please ask an administrator to configure Cloudinary in Settings first.');
+    }
+
+    cloudinary.config({
+      cloud_name: config.cloudName,
+      api_key: config.apiKey,
+      api_secret: config.apiSecret,
+      secure: true,
+    });
+
+    const uploadResult = await new Promise<any>((resolve, reject) => {
+      const uploadStream = cloudinary.uploader.upload_stream(
+        {
+          folder: 'social-flow/stories',
+          public_id: `story-${Date.now()}-${originalFileName.replace(/\.[^/.]+$/, '')}`,
+          resource_type: 'image',
+        },
+        (error, result) => {
+          if (error) reject(error);
+          else resolve(result);
+        }
+      );
+
+      uploadStream.end(buffer);
+    });
+
+    return uploadResult.secure_url;
+  }
 }
 
 export const cloudinaryService = new CloudinaryService();

server/services/facebook.ts

@@ -1,5 +1,7 @@
 import { storage } from '../storage';
 import type { Post, SocialPage, Media } from '@shared/schema';
+import { imageProcessor } from './imageProcessor';
+import { cloudinaryService } from './cloudinary';
 
 interface FacebookPhotoResponse {
   id: string;
@@ -316,7 +318,17 @@ export class FacebookService {
     // Step 1: Upload photo as unpublished to get photo_id
     // Step 2: Publish the photo as a story using the photo_id
 
-    const photoUrl = media.originalUrl;
+    let photoUrl = media.originalUrl;
+
+    if (post.content && post.content.trim().length > 0) {
+      try {
+        const imageWithText = await imageProcessor.addTextToStoryImage(media.originalUrl, post.content);
+        photoUrl = await cloudinaryService.uploadStoryImageWithText(imageWithText, `story-${media.id}.png`);
+        console.log('Story image with text generated:', photoUrl);
+      } catch (error) {
+        console.error('Error generating story image with text, using original:', error);
+      }
+    }
 
     // Step 1: Upload photo as unpublished
     const uploadParams = new URLSearchParams({

server/services/imageProcessor.ts

@@ -2,6 +2,7 @@ import sharp from "sharp";
 import { randomUUID } from "crypto";
 import path from "path";
 import fs from "fs/promises";
+import { createCanvas, loadImage, registerFont } from "canvas";
 
 interface CropDimensions {
   width: number;
@@ -97,6 +98,126 @@ export class ImageProcessor {
       console.error("Error deleting file:", error);
     }
   }
+
+  async addTextToStoryImage(imageUrl: string, text: string): Promise<Buffer> {
+    const STORY_WIDTH = 1080;
+    const STORY_HEIGHT = 1920;
+    const TEXT_BOX_HEIGHT_RATIO = 0.25;
+    const MIN_FONT_SIZE = 24;
+    const MAX_FONT_SIZE = 72;
+    const PADDING = 40;
+    const LINE_HEIGHT_MULTIPLIER = 1.3;
+
+    const canvas = createCanvas(STORY_WIDTH, STORY_HEIGHT);
+    const ctx = canvas.getContext('2d');
+
+    const image = await loadImage(imageUrl);
+    
+    const imgWidth = image.width;
+    const imgHeight = image.height;
+    const targetRatio = STORY_WIDTH / STORY_HEIGHT;
+    const imgRatio = imgWidth / imgHeight;
+
+    let drawWidth, drawHeight, offsetX, offsetY;
+
+    if (imgRatio > targetRatio) {
+      drawHeight = STORY_HEIGHT;
+      drawWidth = imgWidth * (STORY_HEIGHT / imgHeight);
+      offsetX = (STORY_WIDTH - drawWidth) / 2;
+      offsetY = 0;
+    } else {
+      drawWidth = STORY_WIDTH;
+      drawHeight = imgHeight * (STORY_WIDTH / imgWidth);
+      offsetX = 0;
+      offsetY = (STORY_HEIGHT - drawHeight) / 2;
+    }
+
+    ctx.fillStyle = 'black';
+    ctx.fillRect(0, 0, STORY_WIDTH, STORY_HEIGHT);
+    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);
+
+    const textBoxHeight = STORY_HEIGHT * TEXT_BOX_HEIGHT_RATIO;
+    const textBoxY = STORY_HEIGHT - textBoxHeight;
+
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
+    ctx.fillRect(0, textBoxY, STORY_WIDTH, textBoxHeight);
+
+    const maxTextWidth = STORY_WIDTH - (PADDING * 2);
+    const maxTextHeight = textBoxHeight - (PADDING * 2);
+
+    let fontSize = MAX_FONT_SIZE;
+    let lines: string[] = [];
+    let totalTextHeight = 0;
+
+    while (fontSize >= MIN_FONT_SIZE) {
+      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      
+      lines = this.wrapText(ctx, text, maxTextWidth);
+      const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
+      totalTextHeight = lines.length * lineHeight;
+
+      if (totalTextHeight <= maxTextHeight) {
+        break;
+      }
+
+      fontSize -= 2;
+    }
+
+    if (fontSize < MIN_FONT_SIZE) {
+      fontSize = MIN_FONT_SIZE;
+      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      lines = this.wrapText(ctx, text, maxTextWidth);
+      const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
+      totalTextHeight = lines.length * lineHeight;
+      
+      const maxLines = Math.floor(maxTextHeight / lineHeight);
+      if (lines.length > maxLines) {
+        lines = lines.slice(0, maxLines);
+        if (lines[maxLines - 1]) {
+          lines[maxLines - 1] = lines[maxLines - 1].substring(0, lines[maxLines - 1].length - 3) + '...';
+        }
+        totalTextHeight = maxLines * lineHeight;
+      }
+    }
+
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
+    const startY = textBoxY + (textBoxHeight - totalTextHeight) / 2 + lineHeight / 2;
+
+    lines.forEach((line, index) => {
+      const y = startY + (index * lineHeight);
+      ctx.fillText(line, STORY_WIDTH / 2, y);
+    });
+
+    return canvas.toBuffer('image/png');
+  }
+
+  private wrapText(ctx: any, text: string, maxWidth: number): string[] {
+    const words = text.split(' ');
+    const lines: string[] = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const metrics = ctx.measureText(testLine);
+      
+      if (metrics.width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+    
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  }
 }
 
 export const imageProcessor = new ImageProcessor();