Add heading with background support: centered layout, heading BG, fact text outline/shadow

modules/fact_image/router.py

@@ -42,16 +42,30 @@ async def create_fact_image(
     
     - **model**: Image generation model (nvidia, cloudflare, pexels)
     - **image_prompt**: Prompt for background image
+    - **fact_heading**: Optional heading text (e.g., 'Psychological Hack')
+    - **heading_background**: Heading background style config
     - **fact_text**: The fact/quote to overlay on the image
     - **duration**: Video duration in seconds (4-7)
     """
-    logger.info(f"New fact-image request: model={request.model}, duration={request.duration}s")
+    logger.info(f"New fact-image request: model={request.model}, heading='{request.fact_heading}', duration={request.duration}s")
+    
+    # Convert heading_background to dict if present
+    heading_bg_dict = None
+    if request.heading_background:
+        heading_bg_dict = {
+            "enabled": request.heading_background.enabled,
+            "color": request.heading_background.color,
+            "padding": request.heading_background.padding,
+            "corner_radius": request.heading_background.corner_radius
+        }
     
     job_id = creator.add_to_queue(
         model=request.model,
         image_prompt=request.image_prompt,
         fact_text=request.fact_text,
-        duration=request.duration
+        duration=request.duration,
+        fact_heading=request.fact_heading,
+        heading_background=heading_bg_dict
     )
     
     return FactImageResponse(

modules/fact_image/schemas.py

@@ -24,6 +24,14 @@ class JobStatus(str, Enum):
     failed = "failed"
 
 
+class HeadingBackground(BaseModel):
+    """Heading background style configuration"""
+    enabled: bool = True
+    color: str = Field(default="rgba(0, 0, 0, 0.45)", description="Background color (rgba or hex)")
+    padding: int = Field(default=22, ge=5, le=50, description="Padding around text")
+    corner_radius: int = Field(default=28, ge=0, le=50, description="Corner radius for rounded edges")
+
+
 class FactImageRequest(BaseModel):
     """Request schema for creating a fact image video"""
     model: ImageModel = Field(
@@ -36,6 +44,15 @@ class FactImageRequest(BaseModel):
         max_length=500,
         description="Prompt for generating the background image"
     )
+    fact_heading: Optional[str] = Field(
+        default=None,
+        max_length=50,
+        description="Optional heading text (e.g., 'Psychological Hack')"
+    )
+    heading_background: Optional[HeadingBackground] = Field(
+        default=None,
+        description="Heading background style configuration"
+    )
     fact_text: str = Field(
         ...,
         min_length=5,

modules/fact_image/services/fact_creator.py

@@ -68,7 +68,9 @@ class FactCreator:
         model: ImageModel,
         image_prompt: str,
         fact_text: str,
-        duration: int = 5
+        duration: int = 5,
+        fact_heading: str = None,
+        heading_background: dict = None
     ) -> str:
         """
         Add fact-image job to queue.
@@ -82,6 +84,8 @@ class FactCreator:
             "id": job_id,
             "model": model,
             "image_prompt": image_prompt,
+            "fact_heading": fact_heading,
+            "heading_background": heading_background,
             "fact_text": fact_text,
             "duration": duration,
             "status": JobStatus.queued,
@@ -229,7 +233,9 @@ class FactCreator:
             self.text_overlay.add_text(
                 image_path=image_path,
                 text=job["fact_text"],
-                output_path=overlay_path
+                output_path=overlay_path,
+                heading=job.get("fact_heading"),
+                heading_background=job.get("heading_background")
             )
             
             job["progress"] = 60

modules/fact_image/services/text_overlay.py

@@ -1,11 +1,12 @@
 """
 Text Overlay Service
 Renders text on images using PIL/Pillow
+Supports heading with background + fact text with shadow
 """
 import logging
-import textwrap
+import re
 from pathlib import Path
-from typing import Tuple, Optional
+from typing import Tuple, Optional, Dict, Any
 from PIL import Image, ImageDraw, ImageFont
 
 logger = logging.getLogger(__name__)
@@ -15,15 +16,23 @@ class TextOverlay:
     """
     Service for adding text overlay to images.
     Optimized for fact/motivational content on vertical videos.
+    
+    Layout:
+    - Heading (bold, with background) - centered
+    - Fact text (with shadow/outline) - centered below heading
+    - All content vertically centered in middle of image
     """
     
     # Default settings
     TARGET_WIDTH = 1080
     TARGET_HEIGHT = 1920
-    TEXT_AREA_TOP = 0.55  # Text starts at 55% from top
-    TEXT_AREA_BOTTOM = 0.90  # Text ends at 90% from top
     PADDING_X = 60  # Horizontal padding
     
+    # Font sizes
+    HEADING_FONT_SIZE = 52
+    TEXT_FONT_SIZE = 42
+    LINE_SPACING = 1.3
+    
     def __init__(self, font_path: Optional[str] = None):
         """
         Initialize text overlay service.
@@ -34,28 +43,34 @@ class TextOverlay:
         self.font_path = font_path
         self._font_cache = {}
     
-    def _get_font(self, size: int) -> ImageFont.FreeTypeFont:
+    def _get_font(self, size: int, bold: bool = False) -> ImageFont.FreeTypeFont:
         """Get font at specified size (cached)"""
-        if size not in self._font_cache:
+        cache_key = (size, bold)
+        if cache_key not in self._font_cache:
             try:
                 if self.font_path and Path(self.font_path).exists():
-                    self._font_cache[size] = ImageFont.truetype(self.font_path, size)
+                    self._font_cache[cache_key] = ImageFont.truetype(self.font_path, size)
                 else:
                     # Try common system fonts
-                    for font_name in ['DejaVuSans-Bold.ttf', 'Arial.ttf', 'Roboto-Bold.ttf']:
+                    if bold:
+                        font_names = ['DejaVuSans-Bold.ttf', 'Arial-Bold.ttf', 'Roboto-Bold.ttf', 'FreeSansBold.ttf']
+                    else:
+                        font_names = ['DejaVuSans.ttf', 'Arial.ttf', 'Roboto-Regular.ttf', 'FreeSans.ttf']
+                    
+                    for font_name in font_names:
                         try:
-                            self._font_cache[size] = ImageFont.truetype(font_name, size)
+                            self._font_cache[cache_key] = ImageFont.truetype(font_name, size)
                             break
                         except:
                             continue
                     else:
                         # Fallback to default
-                        self._font_cache[size] = ImageFont.load_default()
+                        self._font_cache[cache_key] = ImageFont.load_default()
             except Exception as e:
                 logger.warning(f"Font loading failed: {e}, using default")
-                self._font_cache[size] = ImageFont.load_default()
+                self._font_cache[cache_key] = ImageFont.load_default()
         
-        return self._font_cache[size]
+        return self._font_cache[cache_key]
     
     def _wrap_text(self, text: str, max_words_per_line: int = 5) -> str:
         """
@@ -80,54 +95,71 @@ class TextOverlay:
         
         return '\n'.join(lines)
     
-    def _calculate_font_size(
+    def _parse_rgba(self, color_str: str) -> Tuple[int, int, int, int]:
+        """Parse rgba color string to tuple"""
+        if color_str.startswith('rgba'):
+            # Parse rgba(r, g, b, a)
+            match = re.match(r'rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)', color_str)
+            if match:
+                r, g, b = int(match.group(1)), int(match.group(2)), int(match.group(3))
+                a = int(float(match.group(4)) * 255)
+                return (r, g, b, a)
+        elif color_str.startswith('#'):
+            # Parse hex color
+            hex_color = color_str.lstrip('#')
+            if len(hex_color) == 6:
+                r = int(hex_color[0:2], 16)
+                g = int(hex_color[2:4], 16)
+                b = int(hex_color[4:6], 16)
+                return (r, g, b, 255)
+        
+        # Default: semi-transparent black
+        return (0, 0, 0, 115)
+    
+    def _draw_rounded_rect(
         self,
-        text: str,
         draw: ImageDraw.ImageDraw,
-        max_width: int,
-        max_height: int,
-        min_size: int = 40,
-        max_size: int = 80
-    ) -> int:
-        """Calculate optimal font size to fit text in given area"""
-        for size in range(max_size, min_size - 1, -2):
-            font = self._get_font(size)
-            wrapped = self._wrap_text(text)
-            
-            # Get text bounding box
-            bbox = draw.multiline_textbbox((0, 0), wrapped, font=font)
-            text_width = bbox[2] - bbox[0]
-            text_height = bbox[3] - bbox[1]
-            
-            if text_width <= max_width and text_height <= max_height:
-                return size
+        xy: Tuple[int, int, int, int],
+        radius: int,
+        fill: Tuple[int, int, int, int]
+    ):
+        """Draw a rounded rectangle"""
+        x1, y1, x2, y2 = xy
         
-        return min_size
+        # For RGBA support, we need to create a separate image
+        # and composite it
+        draw.rounded_rectangle(xy, radius=radius, fill=fill)
     
     def add_text(
         self,
         image_path: Path,
         text: str,
         output_path: Path,
+        heading: Optional[str] = None,
+        heading_background: Optional[Dict[str, Any]] = None,
         text_color: Tuple[int, int, int] = (255, 255, 255),
         shadow_color: Tuple[int, int, int] = (0, 0, 0),
-        shadow_offset: int = 3
+        shadow_offset: int = 3,
+        outline_width: int = 2
     ) -> Path:
         """
         Add text overlay to image.
         
         Args:
             image_path: Path to input image
-            text: Text to overlay
+            text: Fact text to overlay
             output_path: Path for output image
+            heading: Optional heading text
+            heading_background: Heading background config {enabled, color, padding, corner_radius}
             text_color: RGB color for text (default: white)
             shadow_color: RGB color for shadow (default: black)
             shadow_offset: Shadow offset in pixels
+            outline_width: Text outline width
             
         Returns:
             Path to output image
         """
-        logger.info(f"Adding text overlay: {text[:50]}...")
+        logger.info(f"Adding text overlay: heading='{heading}', text='{text[:30]}...'")
         
         # Load image
         img = Image.open(image_path).convert('RGBA')
@@ -136,51 +168,119 @@ class TextOverlay:
         if img.size != (self.TARGET_WIDTH, self.TARGET_HEIGHT):
             img = img.resize((self.TARGET_WIDTH, self.TARGET_HEIGHT), Image.LANCZOS)
         
-        # Create drawing context
-        draw = ImageDraw.Draw(img)
+        # Create overlay layer for transparency support
+        overlay = Image.new('RGBA', img.size, (0, 0, 0, 0))
+        draw = ImageDraw.Draw(overlay)
         
-        # Calculate text area
-        text_area_y_start = int(self.TARGET_HEIGHT * self.TEXT_AREA_TOP)
-        text_area_y_end = int(self.TARGET_HEIGHT * self.TEXT_AREA_BOTTOM)
-        max_width = self.TARGET_WIDTH - (2 * self.PADDING_X)
-        max_height = text_area_y_end - text_area_y_start
+        # Get fonts
+        heading_font = self._get_font(self.HEADING_FONT_SIZE, bold=True)
+        text_font = self._get_font(self.TEXT_FONT_SIZE, bold=False)
         
-        # Calculate optimal font size
-        font_size = self._calculate_font_size(text, draw, max_width, max_height)
-        font = self._get_font(font_size)
+        # Calculate max width
+        max_width = self.TARGET_WIDTH - (2 * self.PADDING_X)
         
-        # Wrap text
+        # Prepare wrapped text
         wrapped_text = self._wrap_text(text)
         
-        # Calculate text position (centered)
-        bbox = draw.multiline_textbbox((0, 0), wrapped_text, font=font)
-        text_width = bbox[2] - bbox[0]
-        text_height = bbox[3] - bbox[1]
+        # Calculate text dimensions
+        text_bbox = draw.multiline_textbbox((0, 0), wrapped_text, font=text_font)
+        text_width = text_bbox[2] - text_bbox[0]
+        text_height = text_bbox[3] - text_bbox[1]
+        
+        # Calculate heading dimensions if present
+        heading_height = 0
+        heading_width = 0
+        heading_bg_padding = 22
+        heading_bg_radius = 28
         
-        x = (self.TARGET_WIDTH - text_width) // 2
-        y = text_area_y_start + (max_height - text_height) // 2
+        if heading:
+            heading_bbox = draw.textbbox((0, 0), heading, font=heading_font)
+            heading_width = heading_bbox[2] - heading_bbox[0]
+            heading_height = heading_bbox[3] - heading_bbox[1]
+            
+            if heading_background and heading_background.get('enabled', True):
+                heading_bg_padding = heading_background.get('padding', 22)
+                heading_bg_radius = heading_background.get('corner_radius', 28)
+        
+        # Calculate total content height
+        gap_between = 40 if heading else 0  # Gap between heading and text
+        total_height = text_height + (heading_height + heading_bg_padding * 2 + gap_between if heading else 0)
+        
+        # Center everything vertically in the middle of the image
+        start_y = (self.TARGET_HEIGHT - total_height) // 2
+        
+        current_y = start_y
+        
+        # Draw heading with background
+        if heading:
+            heading_x = (self.TARGET_WIDTH - heading_width) // 2
+            
+            # Draw background if enabled
+            if heading_background and heading_background.get('enabled', True):
+                bg_color = self._parse_rgba(heading_background.get('color', 'rgba(0, 0, 0, 0.45)'))
+                
+                bg_x1 = heading_x - heading_bg_padding
+                bg_y1 = current_y - heading_bg_padding // 2
+                bg_x2 = heading_x + heading_width + heading_bg_padding
+                bg_y2 = current_y + heading_height + heading_bg_padding // 2
+                
+                self._draw_rounded_rect(
+                    draw,
+                    (bg_x1, bg_y1, bg_x2, bg_y2),
+                    heading_bg_radius,
+                    bg_color
+                )
+            
+            # Draw heading text (white)
+            draw.text(
+                (heading_x, current_y),
+                heading,
+                font=heading_font,
+                fill=(255, 255, 255, 255)
+            )
+            
+            current_y += heading_height + heading_bg_padding + gap_between
+        
+        # Draw fact text with shadow/outline
+        text_x = (self.TARGET_WIDTH - text_width) // 2
+        
+        # Draw outline (multiple directions for thickness)
+        for dx in range(-outline_width, outline_width + 1):
+            for dy in range(-outline_width, outline_width + 1):
+                if dx != 0 or dy != 0:
+                    draw.multiline_text(
+                        (text_x + dx, current_y + dy),
+                        wrapped_text,
+                        font=text_font,
+                        fill=(0, 0, 0, 200),
+                        align='center'
+                    )
         
         # Draw shadow
         draw.multiline_text(
-            (x + shadow_offset, y + shadow_offset),
+            (text_x + shadow_offset, current_y + shadow_offset),
             wrapped_text,
-            font=font,
-            fill=shadow_color,
+            font=text_font,
+            fill=(0, 0, 0, 150),
             align='center'
         )
         
         # Draw main text
         draw.multiline_text(
-            (x, y),
+            (text_x, current_y),
             wrapped_text,
-            font=font,
-            fill=text_color,
+            font=text_font,
+            fill=(255, 255, 255, 255),
             align='center'
         )
         
+        # Composite overlay onto image
+        img = Image.alpha_composite(img, overlay)
+        
         # Save output
         img = img.convert('RGB')
         img.save(output_path, 'PNG', quality=95)
         
         logger.info(f"Text overlay saved: {output_path}")
         return output_path
+

static/index.html

@@ -409,6 +409,34 @@
                             without text.</small>
                     </div>
 
+                    <div class="form-group">
+                        <label>Fact Heading (Optional)</label>
+                        <input type="text" id="factHeading" placeholder="e.g., Psychological Hack" maxlength="50">
+                        <small style="color: var(--text-secondary);">Bold heading with background - appears above fact
+                            text.</small>
+                    </div>
+
+                    <div class="form-row" id="headingStyleRow" style="display: none;">
+                        <div class="form-group">
+                            <label>Heading BG Color</label>
+                            <select id="headingBgColor">
+                                <option value="rgba(0, 0, 0, 0.45)">Black (45%)</option>
+                                <option value="rgba(0, 0, 0, 0.6)">Black (60%)</option>
+                                <option value="rgba(99, 102, 241, 0.7)">Purple</option>
+                                <option value="rgba(236, 72, 153, 0.7)">Pink</option>
+                                <option value="rgba(34, 197, 94, 0.7)">Green</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Corner Radius</label>
+                            <select id="headingBgRadius">
+                                <option value="15">Small (15px)</option>
+                                <option value="28" selected>Medium (28px)</option>
+                                <option value="40">Large (40px)</option>
+                            </select>
+                        </div>
+                    </div>
+
                     <div class="form-group">
                         <label>Fact Text *</label>
                         <textarea id="factText" rows="3"
@@ -518,6 +546,12 @@
             `;
         });
 
+        // Toggle heading style row when heading is entered
+        document.getElementById('factHeading').addEventListener('input', (e) => {
+            const styleRow = document.getElementById('headingStyleRow');
+            styleRow.style.display = e.target.value.trim() ? 'grid' : 'none';
+        });
+
         // Fact Image Form
         document.getElementById('factForm').addEventListener('submit', async (e) => {
             e.preventDefault();
@@ -526,6 +560,8 @@
             status.innerHTML = '⏳ Generating fact video...';
             status.classList.remove('hidden');
 
+            const heading = document.getElementById('factHeading').value.trim();
+
             const data = {
                 model: document.getElementById('factModel').value,
                 image_prompt: document.getElementById('factImagePrompt').value,
@@ -533,6 +569,17 @@
                 duration: parseInt(document.getElementById('factDuration').value)
             };
 
+            // Add heading if provided
+            if (heading) {
+                data.fact_heading = heading;
+                data.heading_background = {
+                    enabled: true,
+                    color: document.getElementById('headingBgColor').value,
+                    padding: 22,
+                    corner_radius: parseInt(document.getElementById('headingBgRadius').value)
+                };
+            }
+
             try {
                 const res = await fetch('/api/fact-image/', {
                     method: 'POST',