update app.py - add pattern preview

app.py

@@ -3,6 +3,8 @@ import requests
 from PIL import Image, ImageDraw, ImageFont
 import io
 import openai
+import base64
+from io import BytesIO
 
 # Image Generation Functions
 def generate_ideogram_image(api_key, prompt, aspect_ratio="ASPECT_1_1"):
@@ -315,6 +317,81 @@ def test_text_overlay():
         print(f"Test failed completely: {e}")
         return None, f"Test failed: {e}", None
 
+# Function to create template images
+def create_pattern_template(pattern, width=200, height=120):
+    """Create a visual template showing text placement for each pattern"""
+    # Create black background
+    img = Image.new('RGB', (width, height), color='black')
+    draw = ImageDraw.Draw(img)
+    
+    # Define positions based on pattern
+    positions = []
+    if pattern == "2-lines-top":
+        positions = [(width // 2, int(height * 0.15)), (width // 2, int(height * 0.35))]
+    elif pattern == "2-lines-center":
+        positions = [(width // 2, int(height * 0.35)), (width // 2, int(height * 0.65))]
+    elif pattern == "2-lines-bottom":
+        positions = [(width // 2, int(height * 0.65)), (width // 2, int(height * 0.85))]
+    elif pattern == "3-lines-top":
+        positions = [(width // 2, int(height * 0.15)), (width // 2, int(height * 0.35)), (width // 2, int(height * 0.55))]
+    elif pattern == "3-lines-center":
+        positions = [(width // 2, int(height * 0.25)), (width // 2, int(height * 0.50)), (width // 2, int(height * 0.75))]
+    elif pattern == "3-lines-bottom":
+        positions = [(width // 2, int(height * 0.45)), (width // 2, int(height * 0.65)), (width // 2, int(height * 0.85))]
+    
+    # Draw white rectangles to represent text boxes
+    try:
+        font = ImageFont.load_default()
+    except:
+        font = None
+    
+    for i, (x, y) in enumerate(positions):
+        # Draw white rectangle as text placeholder
+        box_width = 60
+        box_height = 12
+        left = x - box_width // 2
+        top = y - box_height // 2
+        right = x + box_width // 2
+        bottom = y + box_height // 2
+        
+        draw.rectangle([left, top, right, bottom], fill='white', outline='white')
+        
+        # Add small text label
+        if font:
+            try:
+                label = f"Line {i+1}"
+                draw.text((x, y), label, fill='black', font=font, anchor="mm")
+            except TypeError:
+                # Fallback for older PIL
+                draw.text((x-15, y-5), f"L{i+1}", fill='black', font=font)
+    
+    return img
+
+# Function to convert PIL image to base64 for Gradio
+def pil_to_base64(img):
+    """Convert PIL image to base64 string for Gradio"""
+    buffer = BytesIO()
+    img.save(buffer, format='PNG')
+    img_str = base64.b64encode(buffer.getvalue()).decode()
+    return f"data:image/png;base64,{img_str}"
+
+# Create all template images
+pattern_templates = {}
+pattern_names = ["2-lines-top", "2-lines-center", "2-lines-bottom", "3-lines-top", "3-lines-center", "3-lines-bottom"]
+
+for pattern in pattern_names:
+    template_img = create_pattern_template(pattern)
+    pattern_templates[pattern] = template_img
+
+# Function to update template display
+def update_pattern_template(selected_pattern):
+    """Return the template image for the selected pattern"""
+    if selected_pattern in pattern_templates:
+        return pattern_templates[selected_pattern]
+    else:
+        # Return default template
+        return create_pattern_template("2-lines-top")
+
 # Create the Gradio Interface
 with gr.Blocks(title="AI Image Generator & Text Overlay") as demo:
     gr.Markdown("# 🎨 AI Image Generator & Text Overlay")
@@ -402,19 +479,32 @@ with gr.Blocks(title="AI Image Generator & Text Overlay") as demo:
         
         with gr.Row():
             with gr.Column():
-                # Text pattern selection
-                pattern = gr.Dropdown(
-                    choices=[
-                        "2-lines-top",
-                        "2-lines-center", 
-                        "2-lines-bottom",
-                        "3-lines-top",
-                        "3-lines-center",
-                        "3-lines-bottom"
-                    ],
-                    value="2-lines-top",
-                    label="Layout Pattern"
-                )
+                # Text pattern selection with template preview
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        pattern = gr.Dropdown(
+                            choices=[
+                                ("2-lines-top", "📄 2 Lines - Top (Header style)"),
+                                ("2-lines-center", "📄 2 Lines - Center (Title style)"), 
+                                ("2-lines-bottom", "📄 2 Lines - Bottom (Caption style)"),
+                                ("3-lines-top", "📋 3 Lines - Top (Header + subtitle)"),
+                                ("3-lines-center", "📋 3 Lines - Center (Full title)"),
+                                ("3-lines-bottom", "📋 3 Lines - Bottom (Credits style)")
+                            ],
+                            value="2-lines-top",
+                            label="Layout Pattern"
+                        )
+                    
+                    with gr.Column(scale=1):
+                        # Template preview image
+                        template_preview = gr.Image(
+                            label="Template Preview",
+                            value=pattern_templates["2-lines-top"],
+                            show_label=True,
+                            interactive=False,
+                            width=200,
+                            height=120
+                        )
                 
                 # Text input fields
                 line1_inp = gr.Textbox(
@@ -444,7 +534,7 @@ with gr.Blocks(title="AI Image Generator & Text Overlay") as demo:
                         value="#FFFFFF"
                     )
                 
-                # NEW: Add outline option
+                # Add outline option
                 add_outline = gr.Checkbox(
                     label="Add black outline",
                     value=True,
@@ -457,7 +547,16 @@ with gr.Blocks(title="AI Image Generator & Text Overlay") as demo:
                 # Output
                 text_image = gr.Image(label="Image with Text Overlay")
         
-        # Event handler for Tab 2
+        # Event handlers for Tab 2
+        
+        # Update template when pattern changes
+        pattern.change(
+            update_pattern_template,
+            inputs=[pattern],
+            outputs=[template_preview]
+        )
+        
+        # Add text to image
         add_text_btn.click(
             add_text_to_image,
             inputs=[current_image, pattern, line1_inp, line2_inp, line3_inp, font_size, color, add_outline],