Add AI Drawing Animator with Groq + fallback templates, update UI

modules/art_reels/router.py

@@ -20,6 +20,7 @@ from .schemas import (
 )
 from .services.block_art import BlockArt
 from .services.drawing_animator import DrawingAnimator
+from .services.ai_drawing_animator import AIDrawingAnimator
 from .services.stick_figure import StickFigure
 from .services.video_composer import VideoComposer
 
@@ -102,18 +103,22 @@ async def generate_minecraft_video(job_id: str, description: str, blocks: int, s
 
 
 async def generate_drawing_video(job_id: str, subject: str, style: str, colors: bool):
-    """Background task to generate drawing animation video"""
+    """Background task to generate AI-powered drawing animation video"""
     temp_dir = f"temp/art_{job_id}"
     
     try:
         update_job(job_id, "processing", 10)
         
-        # Generate frames
-        logger.info(f"Generating drawing frames for job {job_id}")
-        frame_paths = drawing_animator.generate_drawing_animation(
-            subject=subject,
+        # Create AI Drawing Animator
+        ai_drawer = AIDrawingAnimator()
+        
+        # Generate frames using AI paths
+        logger.info(f"Generating AI drawing frames for job {job_id}: '{subject}'")
+        frame_paths = ai_drawer.generate_animation(
+            prompt=subject,
             output_dir=temp_dir,
-            with_colors=colors
+            frames_per_path=12,
+            fps=30
         )
         
         update_job(job_id, "processing", 60)
@@ -126,18 +131,38 @@ async def generate_drawing_video(job_id: str, subject: str, style: str, colors:
             fps=30
         )
         
-        update_job(job_id, "processing", 90)
+        update_job(job_id, "processing", 85)
+        
+        # Upload to HF Hub (if enabled)
+        from pathlib import Path
+        from modules.shared.services.hf_storage import get_hf_storage
+        
+        hf_storage = get_hf_storage()
+        cloud_url = None
+        
+        if hf_storage and hf_storage.enabled:
+            logger.info(f"Uploading to HF Hub for job {job_id}")
+            cloud_url = hf_storage.upload_video(
+                local_path=Path(video_path),
+                video_id=job_id,
+                folder="art_reels"
+            )
+            if cloud_url:
+                logger.info(f"Uploaded to cloud: {cloud_url}")
         
         # Cleanup
         video_composer.cleanup_frames(frame_paths)
         if os.path.exists(temp_dir):
             shutil.rmtree(temp_dir)
         
-        update_job(job_id, "ready", 100, video_url=f"/api/art/video/{job_id}")
-        logger.info(f"Drawing video ready: {job_id}")
+        video_url = cloud_url or f"/api/art/video/{job_id}"
+        update_job(job_id, "ready", 100, video_url=video_url)
+        logger.info(f"AI Drawing video ready: {job_id}")
         
     except Exception as e:
         logger.error(f"Error generating drawing video: {e}")
+        import traceback
+        logger.error(traceback.format_exc())
         update_job(job_id, "failed", error=str(e))
 
 

modules/art_reels/services/ai_drawing_animator.py

@@ -0,0 +1,535 @@
+"""
+AI Drawing Animator - Dynamic SVG Path Generation with AI
+Generates complex drawings from any prompt using AI-generated paths
+"""
+import logging
+import os
+import json
+import math
+import re
+from PIL import Image, ImageDraw, ImageFont
+from typing import List, Tuple, Dict, Optional
+from groq import Groq
+
+logger = logging.getLogger(__name__)
+
+
+# AI System Prompt for SVG path generation
+DRAWING_PROMPT = """You are an expert SVG artist. Generate detailed drawing paths for any subject.
+
+OUTPUT FORMAT (JSON):
+{
+  "title": "Drawing Name",
+  "paths": [
+    {
+      "type": "line",
+      "start": [x1, y1],
+      "end": [x2, y2],
+      "color": "#000000",
+      "width": 3,
+      "order": 1
+    },
+    {
+      "type": "circle",
+      "center": [cx, cy],
+      "radius": r,
+      "color": "#FF0000",
+      "fill": true,
+      "order": 2
+    },
+    {
+      "type": "polygon",
+      "points": [[x1,y1], [x2,y2], [x3,y3]...],
+      "color": "#00FF00",
+      "fill": true,
+      "order": 3
+    },
+    {
+      "type": "arc",
+      "center": [cx, cy],
+      "radius": r,
+      "start_angle": 0,
+      "end_angle": 180,
+      "color": "#0000FF",
+      "width": 2,
+      "order": 4
+    },
+    {
+      "type": "bezier",
+      "points": [[x1,y1], [x2,y2], [x3,y3], [x4,y4]],
+      "color": "#000000",
+      "width": 2,
+      "order": 5
+    }
+  ]
+}
+
+CANVAS SIZE: 1080 x 1920 (9:16 portrait)
+CENTER: (540, 960)
+DRAWING AREA: (100, 300) to (980, 1600)
+
+RULES:
+1. Create DETAILED paths - at least 15-30 elements for complex subjects
+2. Use logical drawing order (background → foreground)
+3. Include both outline (lines) and fill (polygons/circles)
+4. Use varied line widths (2-8) for depth
+5. Keep everything within the drawing area
+6. Use colors that make sense for the subject
+7. For complex shapes, break into multiple simple paths
+
+EXAMPLES:
+- "car" → wheels (circles), body (polygon), windows (rectangles), details (lines)
+- "face" → head (circle), eyes (circles), nose (lines), mouth (arc), hair (beziers)
+- "tree" → trunk (rectangle), branches (lines), leaves (many small circles/polygons)
+- "house" → walls (polygons), roof (polygon), windows (rectangles), door (rectangle)
+
+Return ONLY valid JSON, no other text."""
+
+
+class AIDrawingAnimator:
+    """
+    AI-powered drawing animator that generates complex SVG-like paths
+    from any text prompt and animates them line-by-line.
+    """
+    
+    # Canvas dimensions
+    WIDTH = 1080
+    HEIGHT = 1920
+    
+    # Default colors
+    BG_COLOR = (255, 255, 255)
+    LINE_COLOR = (30, 30, 30)
+    
+    def __init__(self, groq_api_key: str = None):
+        self.groq_api_key = groq_api_key or os.environ.get("GROQ_API") or os.environ.get("GROQ_API_KEY")
+        if self.groq_api_key:
+            self.groq = Groq(api_key=self.groq_api_key)
+            logger.info("AI Drawing Animator initialized with Groq")
+        else:
+            self.groq = None
+            logger.warning("Groq API key not found - using fallback templates")
+        
+        self._load_fonts()
+    
+    def _load_fonts(self):
+        """Load fonts with fallbacks"""
+        try:
+            self.font_title = ImageFont.truetype("arial.ttf", 48)
+            self.font_label = ImageFont.truetype("arial.ttf", 32)
+        except:
+            self.font_title = ImageFont.load_default()
+            self.font_label = ImageFont.load_default()
+    
+    def generate_paths_with_ai(self, prompt: str) -> Dict:
+        """Generate drawing paths using AI"""
+        if not self.groq:
+            return self._get_fallback_drawing(prompt)
+        
+        try:
+            user_prompt = f"""Create a detailed drawing of: "{prompt}"
+
+Generate all the paths needed to draw this from scratch, line by line.
+Make it detailed and professional-looking.
+Return ONLY valid JSON."""
+
+            response = self.groq.chat.completions.create(
+                model="llama-3.3-70b-versatile",
+                messages=[
+                    {"role": "system", "content": DRAWING_PROMPT},
+                    {"role": "user", "content": user_prompt}
+                ],
+                temperature=0.7,
+                max_tokens=4000
+            )
+            
+            content = response.choices[0].message.content.strip()
+            
+            # Parse JSON
+            if "```" in content:
+                content = content.split("```")[1]
+                if content.startswith("json"):
+                    content = content[4:]
+                content = content.strip()
+            
+            drawing = json.loads(content)
+            logger.info(f"AI generated {len(drawing.get('paths', []))} paths for '{prompt}'")
+            return drawing
+            
+        except Exception as e:
+            logger.error(f"AI path generation failed: {e}")
+            return self._get_fallback_drawing(prompt)
+    
+    def _get_fallback_drawing(self, prompt: str) -> Dict:
+        """Fallback templates for common subjects"""
+        prompt_lower = prompt.lower()
+        
+        # Detect subject and return appropriate template
+        if any(word in prompt_lower for word in ["car", "vehicle", "auto"]):
+            return self._car_template()
+        elif any(word in prompt_lower for word in ["face", "person", "human", "head"]):
+            return self._face_template()
+        elif any(word in prompt_lower for word in ["tree", "plant", "forest"]):
+            return self._tree_template()
+        elif any(word in prompt_lower for word in ["house", "home", "building"]):
+            return self._house_template()
+        elif any(word in prompt_lower for word in ["flower", "rose", "tulip"]):
+            return self._flower_template()
+        elif any(word in prompt_lower for word in ["star", "stars"]):
+            return self._star_template()
+        elif any(word in prompt_lower for word in ["heart", "love"]):
+            return self._heart_template()
+        elif any(word in prompt_lower for word in ["sun", "sunrise"]):
+            return self._sun_template()
+        else:
+            # Default to a simple abstract pattern
+            return self._abstract_template(prompt)
+    
+    def _car_template(self) -> Dict:
+        """Detailed car template"""
+        return {
+            "title": "Sports Car",
+            "paths": [
+                # Car body
+                {"type": "polygon", "points": [[200, 900], [880, 900], [880, 750], [720, 750], [650, 650], [350, 650], [280, 750], [200, 750]], "color": "#E74C3C", "fill": True, "order": 1},
+                # Windows
+                {"type": "polygon", "points": [[360, 740], [640, 740], [600, 660], [380, 660]], "color": "#AED6F1", "fill": True, "order": 2},
+                # Front wheel
+                {"type": "circle", "center": [300, 900], "radius": 60, "color": "#2C3E50", "fill": True, "order": 3},
+                {"type": "circle", "center": [300, 900], "radius": 35, "color": "#95A5A6", "fill": True, "order": 4},
+                # Back wheel
+                {"type": "circle", "center": [780, 900], "radius": 60, "color": "#2C3E50", "fill": True, "order": 5},
+                {"type": "circle", "center": [780, 900], "radius": 35, "color": "#95A5A6", "fill": True, "order": 6},
+                # Headlight
+                {"type": "circle", "center": [850, 800], "radius": 20, "color": "#F1C40F", "fill": True, "order": 7},
+                # Door line
+                {"type": "line", "start": [500, 750], "end": [500, 900], "color": "#C0392B", "width": 3, "order": 8},
+                # Door handle
+                {"type": "line", "start": [440, 800], "end": [480, 800], "color": "#2C3E50", "width": 4, "order": 9},
+                # Ground
+                {"type": "line", "start": [100, 960], "end": [980, 960], "color": "#7F8C8D", "width": 5, "order": 10},
+            ]
+        }
+    
+    def _face_template(self) -> Dict:
+        """Detailed face template"""
+        cx, cy = 540, 700
+        return {
+            "title": "Human Face",
+            "paths": [
+                # Head outline
+                {"type": "circle", "center": [cx, cy], "radius": 200, "color": "#FDEBD0", "fill": True, "order": 1},
+                {"type": "circle", "center": [cx, cy], "radius": 200, "color": "#2C3E50", "fill": False, "order": 2},
+                # Left eye
+                {"type": "circle", "center": [cx-60, cy-40], "radius": 35, "color": "#FFFFFF", "fill": True, "order": 3},
+                {"type": "circle", "center": [cx-60, cy-40], "radius": 35, "color": "#2C3E50", "fill": False, "order": 4},
+                {"type": "circle", "center": [cx-60, cy-40], "radius": 15, "color": "#2C3E50", "fill": True, "order": 5},
+                # Right eye
+                {"type": "circle", "center": [cx+60, cy-40], "radius": 35, "color": "#FFFFFF", "fill": True, "order": 6},
+                {"type": "circle", "center": [cx+60, cy-40], "radius": 35, "color": "#2C3E50", "fill": False, "order": 7},
+                {"type": "circle", "center": [cx+60, cy-40], "radius": 15, "color": "#2C3E50", "fill": True, "order": 8},
+                # Nose
+                {"type": "line", "start": [cx, cy-20], "end": [cx, cy+40], "color": "#D35400", "width": 3, "order": 9},
+                {"type": "line", "start": [cx, cy+40], "end": [cx-15, cy+50], "color": "#D35400", "width": 3, "order": 10},
+                # Smile
+                {"type": "arc", "center": [cx, cy+60], "radius": 60, "start_angle": 10, "end_angle": 170, "color": "#E74C3C", "width": 5, "order": 11},
+                # Eyebrows
+                {"type": "line", "start": [cx-90, cy-90], "end": [cx-30, cy-85], "color": "#2C3E50", "width": 4, "order": 12},
+                {"type": "line", "start": [cx+30, cy-85], "end": [cx+90, cy-90], "color": "#2C3E50", "width": 4, "order": 13},
+                # Hair
+                {"type": "arc", "center": [cx, cy-100], "radius": 180, "start_angle": 200, "end_angle": 340, "color": "#5D4037", "width": 40, "order": 14},
+            ]
+        }
+    
+    def _tree_template(self) -> Dict:
+        """Detailed tree template"""
+        return {
+            "title": "Tree",
+            "paths": [
+                # Trunk
+                {"type": "polygon", "points": [[500, 1200], [580, 1200], [570, 900], [510, 900]], "color": "#795548", "fill": True, "order": 1},
+                # Main branches
+                {"type": "line", "start": [540, 900], "end": [400, 700], "color": "#5D4037", "width": 15, "order": 2},
+                {"type": "line", "start": [540, 900], "end": [680, 700], "color": "#5D4037", "width": 15, "order": 3},
+                {"type": "line", "start": [540, 850], "end": [540, 600], "color": "#5D4037", "width": 12, "order": 4},
+                # Leaves (circles)
+                {"type": "circle", "center": [400, 650], "radius": 80, "color": "#27AE60", "fill": True, "order": 5},
+                {"type": "circle", "center": [540, 550], "radius": 90, "color": "#2ECC71", "fill": True, "order": 6},
+                {"type": "circle", "center": [680, 650], "radius": 80, "color": "#27AE60", "fill": True, "order": 7},
+                {"type": "circle", "center": [470, 580], "radius": 70, "color": "#1E8449", "fill": True, "order": 8},
+                {"type": "circle", "center": [610, 580], "radius": 70, "color": "#1E8449", "fill": True, "order": 9},
+                {"type": "circle", "center": [540, 450], "radius": 60, "color": "#2ECC71", "fill": True, "order": 10},
+                # Ground
+                {"type": "line", "start": [200, 1200], "end": [880, 1200], "color": "#7F8C8D", "width": 3, "order": 11},
+            ]
+        }
+    
+    def _house_template(self) -> Dict:
+        """Detailed house template"""
+        return {
+            "title": "House",
+            "paths": [
+                # Main wall
+                {"type": "polygon", "points": [[250, 1100], [830, 1100], [830, 650], [250, 650]], "color": "#F5DEB3", "fill": True, "order": 1},
+                # Roof
+                {"type": "polygon", "points": [[200, 650], [540, 400], [880, 650]], "color": "#8B4513", "fill": True, "order": 2},
+                # Door
+                {"type": "polygon", "points": [[480, 1100], [600, 1100], [600, 850], [480, 850]], "color": "#5D4037", "fill": True, "order": 3},
+                # Door handle
+                {"type": "circle", "center": [570, 975], "radius": 10, "color": "#FFD700", "fill": True, "order": 4},
+                # Left window
+                {"type": "polygon", "points": [[300, 750], [420, 750], [420, 880], [300, 880]], "color": "#AED6F1", "fill": True, "order": 5},
+                {"type": "line", "start": [360, 750], "end": [360, 880], "color": "#FFFFFF", "width": 3, "order": 6},
+                {"type": "line", "start": [300, 815], "end": [420, 815], "color": "#FFFFFF", "width": 3, "order": 7},
+                # Right window
+                {"type": "polygon", "points": [[660, 750], [780, 750], [780, 880], [660, 880]], "color": "#AED6F1", "fill": True, "order": 8},
+                {"type": "line", "start": [720, 750], "end": [720, 880], "color": "#FFFFFF", "width": 3, "order": 9},
+                {"type": "line", "start": [660, 815], "end": [780, 815], "color": "#FFFFFF", "width": 3, "order": 10},
+                # Chimney
+                {"type": "polygon", "points": [[700, 550], [760, 550], [760, 430], [700, 430]], "color": "#A0522D", "fill": True, "order": 11},
+                # Ground
+                {"type": "line", "start": [100, 1100], "end": [980, 1100], "color": "#228B22", "width": 8, "order": 12},
+            ]
+        }
+    
+    def _flower_template(self) -> Dict:
+        """Flower template"""
+        cx, cy = 540, 700
+        return {
+            "title": "Flower",
+            "paths": [
+                # Stem
+                {"type": "line", "start": [cx, cy+100], "end": [cx, cy+400], "color": "#27AE60", "width": 8, "order": 1},
+                # Leaves
+                {"type": "polygon", "points": [[cx, cy+250], [cx-80, cy+300], [cx-40, cy+350], [cx, cy+300]], "color": "#2ECC71", "fill": True, "order": 2},
+                {"type": "polygon", "points": [[cx, cy+200], [cx+80, cy+250], [cx+40, cy+300], [cx, cy+250]], "color": "#2ECC71", "fill": True, "order": 3},
+                # Petals
+                {"type": "circle", "center": [cx, cy-80], "radius": 50, "color": "#E74C3C", "fill": True, "order": 4},
+                {"type": "circle", "center": [cx-70, cy-30], "radius": 50, "color": "#E74C3C", "fill": True, "order": 5},
+                {"type": "circle", "center": [cx+70, cy-30], "radius": 50, "color": "#E74C3C", "fill": True, "order": 6},
+                {"type": "circle", "center": [cx-45, cy+50], "radius": 50, "color": "#E74C3C", "fill": True, "order": 7},
+                {"type": "circle", "center": [cx+45, cy+50], "radius": 50, "color": "#E74C3C", "fill": True, "order": 8},
+                # Center
+                {"type": "circle", "center": [cx, cy], "radius": 40, "color": "#F1C40F", "fill": True, "order": 9},
+            ]
+        }
+    
+    def _star_template(self) -> Dict:
+        """5-point star template"""
+        cx, cy = 540, 700
+        # Calculate star points
+        outer_r = 200
+        inner_r = 80
+        points = []
+        for i in range(10):
+            angle = math.pi/2 + i * math.pi/5
+            r = outer_r if i % 2 == 0 else inner_r
+            x = cx + r * math.cos(angle)
+            y = cy - r * math.sin(angle)
+            points.append([int(x), int(y)])
+        
+        return {
+            "title": "Star",
+            "paths": [
+                {"type": "polygon", "points": points, "color": "#F1C40F", "fill": True, "order": 1},
+                {"type": "polygon", "points": points, "color": "#D4AC0D", "fill": False, "order": 2},
+            ]
+        }
+    
+    def _heart_template(self) -> Dict:
+        """Heart shape template"""
+        cx, cy = 540, 750
+        return {
+            "title": "Heart",
+            "paths": [
+                # Left curve
+                {"type": "arc", "center": [cx-80, cy-80], "radius": 100, "start_angle": 180, "end_angle": 360, "color": "#E74C3C", "width": 8, "order": 1},
+                # Right curve  
+                {"type": "arc", "center": [cx+80, cy-80], "radius": 100, "start_angle": 180, "end_angle": 360, "color": "#E74C3C", "width": 8, "order": 2},
+                # Left line
+                {"type": "line", "start": [cx-180, cy-80], "end": [cx, cy+150], "color": "#E74C3C", "width": 8, "order": 3},
+                # Right line
+                {"type": "line", "start": [cx+180, cy-80], "end": [cx, cy+150], "color": "#E74C3C", "width": 8, "order": 4},
+            ]
+        }
+    
+    def _sun_template(self) -> Dict:
+        """Sun with rays"""
+        cx, cy = 540, 600
+        rays = []
+        for i in range(12):
+            angle = i * math.pi / 6
+            x1 = cx + 120 * math.cos(angle)
+            y1 = cy + 120 * math.sin(angle)
+            x2 = cx + 200 * math.cos(angle)
+            y2 = cy + 200 * math.sin(angle)
+            rays.append({
+                "type": "line",
+                "start": [int(x1), int(y1)],
+                "end": [int(x2), int(y2)],
+                "color": "#F39C12",
+                "width": 6,
+                "order": i + 2
+            })
+        
+        return {
+            "title": "Sun",
+            "paths": [
+                {"type": "circle", "center": [cx, cy], "radius": 100, "color": "#F1C40F", "fill": True, "order": 1},
+                *rays,
+            ]
+        }
+    
+    def _abstract_template(self, prompt: str) -> Dict:
+        """Generate abstract pattern based on prompt"""
+        cx, cy = 540, 800
+        return {
+            "title": prompt[:30],
+            "paths": [
+                {"type": "circle", "center": [cx, cy], "radius": 150, "color": "#3498DB", "fill": True, "order": 1},
+                {"type": "circle", "center": [cx, cy], "radius": 100, "color": "#2ECC71", "fill": True, "order": 2},
+                {"type": "circle", "center": [cx, cy], "radius": 50, "color": "#E74C3C", "fill": True, "order": 3},
+                {"type": "line", "start": [cx-200, cy], "end": [cx+200, cy], "color": "#2C3E50", "width": 4, "order": 4},
+                {"type": "line", "start": [cx, cy-200], "end": [cx, cy+200], "color": "#2C3E50", "width": 4, "order": 5},
+            ]
+        }
+    
+    def hex_to_rgb(self, hex_color: str) -> Tuple[int, int, int]:
+        """Convert hex to RGB"""
+        hex_color = hex_color.lstrip('#')
+        return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
+    
+    def draw_path(self, draw: ImageDraw, path: Dict, progress: float = 1.0):
+        """Draw a single path element"""
+        path_type = path.get("type", "line")
+        color = self.hex_to_rgb(path.get("color", "#000000"))
+        width = path.get("width", 3)
+        fill = path.get("fill", False)
+        
+        if path_type == "line":
+            start = path["start"]
+            end = path["end"]
+            # Partial line based on progress
+            actual_end = [
+                int(start[0] + (end[0] - start[0]) * progress),
+                int(start[1] + (end[1] - start[1]) * progress)
+            ]
+            draw.line([tuple(start), tuple(actual_end)], fill=color, width=width)
+        
+        elif path_type == "circle":
+            center = path["center"]
+            radius = int(path["radius"] * progress)
+            bbox = [center[0]-radius, center[1]-radius, center[0]+radius, center[1]+radius]
+            if fill:
+                draw.ellipse(bbox, fill=color)
+            else:
+                draw.ellipse(bbox, outline=color, width=width)
+        
+        elif path_type == "polygon":
+            points = path["points"]
+            # Draw polygon with progress controlling how many points
+            num_points = max(3, int(len(points) * progress))
+            visible_points = [tuple(p) for p in points[:num_points]]
+            if len(visible_points) >= 3:
+                if fill:
+                    draw.polygon(visible_points, fill=color)
+                else:
+                    draw.polygon(visible_points, outline=color, width=width)
+        
+        elif path_type == "arc":
+            center = path["center"]
+            radius = path["radius"]
+            start_angle = path.get("start_angle", 0)
+            end_angle = path.get("end_angle", 360)
+            # Progress affects the arc sweep
+            actual_end = start_angle + (end_angle - start_angle) * progress
+            bbox = [center[0]-radius, center[1]-radius, center[0]+radius, center[1]+radius]
+            draw.arc(bbox, start_angle, actual_end, fill=color, width=width)
+    
+    def create_frame(self, paths: List[Dict], path_progress: Dict[int, float]) -> Image.Image:
+        """Create a single frame with given path progress"""
+        img = Image.new('RGB', (self.WIDTH, self.HEIGHT), self.BG_COLOR)
+        draw = ImageDraw.Draw(img)
+        
+        # Sort paths by order
+        sorted_paths = sorted(paths, key=lambda p: p.get("order", 0))
+        
+        for path in sorted_paths:
+            order = path.get("order", 0)
+            progress = path_progress.get(order, 0.0)
+            if progress > 0:
+                self.draw_path(draw, path, progress)
+        
+        return img
+    
+    def generate_animation(
+        self,
+        prompt: str,
+        output_dir: str = "temp",
+        frames_per_path: int = 10,
+        fps: int = 30
+    ) -> List[str]:
+        """
+        Generate frame-by-frame drawing animation from prompt.
+        
+        Args:
+            prompt: What to draw
+            output_dir: Directory to save frames
+            frames_per_path: Frames for each path element
+            fps: Target frame rate
+            
+        Returns:
+            List of frame file paths
+        """
+        os.makedirs(output_dir, exist_ok=True)
+        
+        # Generate paths with AI
+        logger.info(f"Generating drawing paths for: {prompt}")
+        drawing = self.generate_paths_with_ai(prompt)
+        
+        paths = drawing.get("paths", [])
+        title = drawing.get("title", prompt)
+        
+        logger.info(f"Drawing '{title}' with {len(paths)} paths")
+        
+        # Sort paths by order
+        sorted_paths = sorted(paths, key=lambda p: p.get("order", 0))
+        
+        frame_paths = []
+        frame_num = 0
+        
+        # Animate each path
+        for path_idx, path in enumerate(sorted_paths):
+            order = path.get("order", path_idx)
+            
+            # Previous paths are complete
+            base_progress = {p.get("order", i): 1.0 for i, p in enumerate(sorted_paths[:path_idx])}
+            
+            # Animate current path
+            for f in range(frames_per_path):
+                progress = (f + 1) / frames_per_path
+                base_progress[order] = progress
+                
+                frame = self.create_frame(paths, base_progress.copy())
+                
+                # Add title
+                draw = ImageDraw.Draw(frame)
+                bbox = draw.textbbox((0, 0), title, font=self.font_title)
+                title_width = bbox[2] - bbox[0]
+                draw.text(((self.WIDTH - title_width) // 2, 100), title, 
+                         fill=(50, 50, 50), font=self.font_title)
+                
+                # Save frame
+                frame_path = os.path.join(output_dir, f"frame_{frame_num:05d}.png")
+                frame.save(frame_path)
+                frame_paths.append(frame_path)
+                frame_num += 1
+        
+        # Hold final frame
+        for _ in range(fps):  # 1 second hold
+            frame_path = os.path.join(output_dir, f"frame_{frame_num:05d}.png")
+            frame.save(frame_path)
+            frame_paths.append(frame_path)
+            frame_num += 1
+        
+        logger.info(f"Generated {len(frame_paths)} animation frames")
+        return frame_paths

static/index.html

@@ -607,32 +607,22 @@
                 <div id="minecraftStatus" class="status hidden"></div>
             </div>
 
-            <!-- Code Drawing Animation -->
+            <!-- AI Drawing Animation -->
             <div style="margin-bottom: 2rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: 12px;">
-                <h3 style="margin-bottom: 1rem;">✏️ Code Drawing Animation</h3>
+                <h3 style="margin-bottom: 1rem;">✏️ AI Drawing Animation</h3>
                 <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
-                    Line-by-line drawing with color fill
+                    AI generates paths → Line-by-line animated drawing. Type anything!
                 </p>
                 <form id="drawingForm">
                     <div class="form-group">
-                        <label>What to Draw</label>
-                        <select id="drawSubject">
-                            <option value="house">House</option>
-                            <option value="tree">Tree</option>
-                            <option value="star">Star</option>
-                            <option value="heart">Heart</option>
-                        </select>
+                        <label>What to Draw (AI-Powered)</label>
+                        <input type="text" id="drawSubject"
+                            placeholder="e.g., sports car, human face, flower, sunset, rocket..." value="sports car">
+                        <small style="color: var(--text-secondary); display: block; margin-top: 0.5rem;">
+                            💡 Try: car, face, tree, house, flower, star, heart, sun, or any custom prompt
+                        </small>
                     </div>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label>Style</label>
-                            <select id="drawStyle">
-                                <option value="outline_first">Outline First</option>
-                                <option value="color_fill">With Colors</option>
-                            </select>
-                        </div>
-                    </div>
-                    <button type="submit" class="submit-btn">✏️ Generate Drawing Video</button>
+                    <button type="submit" class="submit-btn">✏️ Generate AI Drawing Video</button>
                 </form>
                 <div id="drawingStatus" class="status hidden"></div>
             </div>