feat: YouTube to HF uploader - folder management, video/audio modes, category naming, text_story UI update

modules/shared/__init__.py

@@ -1,3 +1,23 @@
 """
 Shared utilities and services for NCAkit modules
 """
+
+import logging
+from fastapi import FastAPI
+
+logger = logging.getLogger(__name__)
+
+# Module metadata
+MODULE_NAME = "shared"
+MODULE_PREFIX = "/api/utils"
+MODULE_DESCRIPTION = "Shared utilities including YouTube to HF uploader"
+
+
+def register(app: FastAPI, config=None):
+    """Register the shared module with FastAPI."""
+    from .router import router
+    
+    # Include router
+    app.include_router(router)
+    
+    logger.info("shared module registered (utilities endpoints available)")

modules/shared/router.py

@@ -0,0 +1,117 @@
+"""
+Shared Utilities Router.
+Provides common API endpoints for media management.
+"""
+
+import logging
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel, Field
+from typing import Optional, List
+
+from .services.youtube_uploader import get_uploader
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/utils", tags=["Utilities"])
+
+
+# ============================================
+# SCHEMAS
+# ============================================
+
+class FolderCreateRequest(BaseModel):
+    """Request to create a new folder."""
+    name: str = Field(..., min_length=1, max_length=50, description="Folder name")
+
+
+class YouTubeUploadRequest(BaseModel):
+    """Request to download and upload YouTube content."""
+    url: str = Field(..., description="YouTube video or playlist URL")
+    folder: str = Field(..., description="Target folder in HF Dataset")
+    format: str = Field(default="mp4", description="Format: mp4 (video) or mp3 (audio)")
+    category: Optional[str] = Field(
+        default=None, 
+        description="Category name for audio files (e.g., 'emotional', 'energetic')"
+    )
+
+
+# ============================================
+# ENDPOINTS
+# ============================================
+
+@router.get("/hf-folders", summary="List HF Dataset folders")
+async def list_hf_folders():
+    """Get all folders in HuggingFace Dataset."""
+    uploader = get_uploader()
+    
+    if not uploader.enabled:
+        raise HTTPException(
+            status_code=503, 
+            detail="Uploader not available. Check HF_REPO and HF_TOKEN."
+        )
+    
+    folders = uploader.list_folders()
+    return {"folders": folders}
+
+
+@router.post("/hf-folders", summary="Create new folder")
+async def create_hf_folder(request: FolderCreateRequest):
+    """Create a new folder in HuggingFace Dataset."""
+    uploader = get_uploader()
+    
+    if not uploader.enabled:
+        raise HTTPException(status_code=503, detail="Uploader not available")
+    
+    success = uploader.create_folder(request.name)
+    
+    if not success:
+        raise HTTPException(status_code=500, detail="Failed to create folder")
+    
+    return {"success": True, "folder": request.name}
+
+
+@router.post("/youtube-upload", summary="Upload YouTube content to HF")
+async def upload_youtube_content(request: YouTubeUploadRequest):
+    """
+    Download YouTube video/playlist and upload to HF Dataset.
+    
+    - **url**: YouTube video or playlist URL
+    - **folder**: Target folder (e.g., 'gameplay_backgrounds', 'music')
+    - **format**: 'mp4' for video, 'mp3' for audio
+    - **category**: For audio, category name like 'emotional', 'energetic'
+    """
+    uploader = get_uploader()
+    
+    if not uploader.enabled:
+        raise HTTPException(status_code=503, detail="Uploader not available")
+    
+    if request.format == "mp3":
+        # Audio mode
+        category = request.category or "music"
+        result = uploader.download_audio(
+            url=request.url,
+            folder=request.folder,
+            category=category
+        )
+    else:
+        # Video mode
+        result = uploader.download_video(
+            url=request.url,
+            folder=request.folder
+        )
+    
+    if not result.get("success", False):
+        raise HTTPException(status_code=500, detail=result.get("error", "Upload failed"))
+    
+    return result
+
+
+@router.get("/health", summary="Check uploader status")
+async def uploader_health():
+    """Check if YouTube uploader is available."""
+    uploader = get_uploader()
+    
+    return {
+        "enabled": uploader.enabled,
+        "repo_id": uploader.repo_id if uploader.enabled else None
+    }

modules/shared/services/youtube_uploader.py

@@ -0,0 +1,340 @@
+"""
+YouTube to HuggingFace Media Uploader.
+Downloads YouTube videos/playlists and uploads to HF Dataset.
+No local storage - temp files deleted immediately.
+"""
+
+import os
+import logging
+import tempfile
+import shutil
+from typing import List, Optional, Dict
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+# Try to import dependencies
+try:
+    import yt_dlp
+    YTDLP_AVAILABLE = True
+except ImportError:
+    YTDLP_AVAILABLE = False
+    logger.warning("yt-dlp not installed. YouTube uploads disabled.")
+
+try:
+    from huggingface_hub import HfApi, list_repo_files
+    HF_HUB_AVAILABLE = True
+except ImportError:
+    HF_HUB_AVAILABLE = False
+    logger.warning("huggingface_hub not installed.")
+
+
+class YouTubeToHFUploader:
+    """
+    Downloads YouTube videos/audio and uploads to HuggingFace Dataset.
+    
+    Features:
+    - Single video or playlist download
+    - MP4 (video) or MP3 (audio) format
+    - Custom category naming for audio
+    - Direct upload to HF, no local storage
+    """
+    
+    def __init__(self, repo_id: str = None, token: str = None):
+        """
+        Initialize uploader.
+        
+        Args:
+            repo_id: HF repo ID (e.g., "username/dataset")
+            token: HF token with write access
+        """
+        self.repo_id = repo_id or os.getenv("HF_REPO", "")
+        self.token = token or os.getenv("HF_TOKEN", "")
+        self.api = None
+        
+        if not self.repo_id or not self.token:
+            logger.warning("YouTubeUploader: HF_REPO or HF_TOKEN not set")
+            self.enabled = False
+            return
+        
+        if not YTDLP_AVAILABLE or not HF_HUB_AVAILABLE:
+            self.enabled = False
+            return
+        
+        self.enabled = True
+        self.api = HfApi(token=self.token)
+        logger.info(f"YouTubeUploader: Initialized for {self.repo_id}")
+    
+    def list_folders(self) -> List[str]:
+        """List all folders in HF Dataset."""
+        if not self.enabled:
+            return []
+        
+        try:
+            all_files = list_repo_files(
+                repo_id=self.repo_id,
+                repo_type="dataset"
+            )
+            
+            # Extract unique folder names
+            folders = set()
+            for f in all_files:
+                if "/" in f:
+                    folder = f.split("/")[0]
+                    folders.add(folder)
+            
+            return sorted(list(folders))
+            
+        except Exception as e:
+            logger.error(f"Failed to list folders: {e}")
+            return []
+    
+    def create_folder(self, folder_name: str) -> bool:
+        """
+        Create a new folder in HF Dataset.
+        
+        Args:
+            folder_name: Name of folder to create
+            
+        Returns:
+            True if successful
+        """
+        if not self.enabled:
+            return False
+        
+        try:
+            # Create placeholder file to create folder
+            placeholder = f"# {folder_name}\n\nFolder for media files."
+            
+            with tempfile.NamedTemporaryFile(mode='w', suffix='.md', delete=False) as f:
+                f.write(placeholder)
+                temp_path = f.name
+            
+            self.api.upload_file(
+                path_or_fileobj=temp_path,
+                path_in_repo=f"{folder_name}/README.md",
+                repo_id=self.repo_id,
+                repo_type="dataset"
+            )
+            
+            os.remove(temp_path)
+            logger.info(f"Created folder: {folder_name}")
+            return True
+            
+        except Exception as e:
+            logger.error(f"Failed to create folder: {e}")
+            return False
+    
+    def _get_next_index(self, folder: str, category: str) -> int:
+        """Get next available index for category files."""
+        try:
+            all_files = list_repo_files(
+                repo_id=self.repo_id,
+                repo_type="dataset"
+            )
+            
+            # Find existing files with this category
+            existing = [
+                f for f in all_files 
+                if f.startswith(f"{folder}/{category}_") and f.endswith(".mp3")
+            ]
+            
+            if not existing:
+                return 1
+            
+            # Extract highest index
+            indices = []
+            for f in existing:
+                try:
+                    # Extract number from filename like "emotional_003.mp3"
+                    name = f.split("/")[-1]
+                    num = int(name.replace(f"{category}_", "").replace(".mp3", ""))
+                    indices.append(num)
+                except:
+                    pass
+            
+            return max(indices) + 1 if indices else 1
+            
+        except:
+            return 1
+    
+    def download_video(self, url: str, folder: str) -> Dict:
+        """
+        Download YouTube video and upload to HF.
+        
+        Args:
+            url: YouTube video or playlist URL
+            folder: Target folder in HF Dataset
+            
+        Returns:
+            Dict with results
+        """
+        if not self.enabled:
+            return {"success": False, "error": "Uploader not enabled"}
+        
+        temp_dir = tempfile.mkdtemp(prefix="yt_video_")
+        results = {"success": True, "uploaded": [], "errors": []}
+        
+        try:
+            ydl_opts = {
+                'format': 'best[height<=720][ext=mp4]/best[height<=720]/best',
+                'outtmpl': os.path.join(temp_dir, '%(id)s.%(ext)s'),
+                'quiet': True,
+                'no_warnings': True,
+            }
+            
+            with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+                # Get video info
+                info = ydl.extract_info(url, download=True)
+                
+                # Handle playlist
+                entries = info.get('entries', [info])
+                
+                for entry in entries:
+                    if not entry:
+                        continue
+                    
+                    video_id = entry.get('id', 'unknown')
+                    
+                    # Find downloaded file
+                    for ext in ['mp4', 'webm', 'mkv']:
+                        local_path = os.path.join(temp_dir, f"{video_id}.{ext}")
+                        if os.path.exists(local_path):
+                            break
+                    else:
+                        results["errors"].append(f"File not found for {video_id}")
+                        continue
+                    
+                    # Upload to HF
+                    try:
+                        path_in_repo = f"{folder}/{video_id}.mp4"
+                        self.api.upload_file(
+                            path_or_fileobj=local_path,
+                            path_in_repo=path_in_repo,
+                            repo_id=self.repo_id,
+                            repo_type="dataset"
+                        )
+                        
+                        cloud_url = f"https://huggingface.co/datasets/{self.repo_id}/resolve/main/{path_in_repo}"
+                        results["uploaded"].append({
+                            "id": video_id,
+                            "title": entry.get('title', video_id),
+                            "url": cloud_url
+                        })
+                        
+                        # Delete local file immediately
+                        os.remove(local_path)
+                        logger.info(f"Uploaded: {video_id}")
+                        
+                    except Exception as e:
+                        results["errors"].append(f"{video_id}: {str(e)}")
+            
+        except Exception as e:
+            results["success"] = False
+            results["error"] = str(e)
+            logger.error(f"Download failed: {e}")
+        
+        finally:
+            # Cleanup temp directory
+            shutil.rmtree(temp_dir, ignore_errors=True)
+        
+        return results
+    
+    def download_audio(self, url: str, folder: str, category: str = "music") -> Dict:
+        """
+        Download YouTube audio as MP3 and upload to HF.
+        
+        Args:
+            url: YouTube video or playlist URL
+            folder: Target folder in HF Dataset
+            category: Category name for files (e.g., "emotional", "energetic")
+            
+        Returns:
+            Dict with results
+        """
+        if not self.enabled:
+            return {"success": False, "error": "Uploader not enabled"}
+        
+        temp_dir = tempfile.mkdtemp(prefix="yt_audio_")
+        results = {"success": True, "uploaded": [], "errors": []}
+        
+        try:
+            ydl_opts = {
+                'format': 'bestaudio/best',
+                'outtmpl': os.path.join(temp_dir, '%(id)s.%(ext)s'),
+                'quiet': True,
+                'no_warnings': True,
+                'postprocessors': [{
+                    'key': 'FFmpegExtractAudio',
+                    'preferredcodec': 'mp3',
+                    'preferredquality': '192',
+                }],
+            }
+            
+            # Get starting index for category
+            next_index = self._get_next_index(folder, category)
+            
+            with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+                info = ydl.extract_info(url, download=True)
+                entries = info.get('entries', [info])
+                
+                for entry in entries:
+                    if not entry:
+                        continue
+                    
+                    video_id = entry.get('id', 'unknown')
+                    local_path = os.path.join(temp_dir, f"{video_id}.mp3")
+                    
+                    if not os.path.exists(local_path):
+                        results["errors"].append(f"MP3 not found for {video_id}")
+                        continue
+                    
+                    # Upload with category naming
+                    try:
+                        filename = f"{category}_{next_index:03d}.mp3"
+                        path_in_repo = f"{folder}/{filename}"
+                        
+                        self.api.upload_file(
+                            path_or_fileobj=local_path,
+                            path_in_repo=path_in_repo,
+                            repo_id=self.repo_id,
+                            repo_type="dataset"
+                        )
+                        
+                        cloud_url = f"https://huggingface.co/datasets/{self.repo_id}/resolve/main/{path_in_repo}"
+                        results["uploaded"].append({
+                            "id": video_id,
+                            "title": entry.get('title', video_id),
+                            "filename": filename,
+                            "url": cloud_url
+                        })
+                        
+                        # Delete local file immediately
+                        os.remove(local_path)
+                        logger.info(f"Uploaded: {filename}")
+                        next_index += 1
+                        
+                    except Exception as e:
+                        results["errors"].append(f"{video_id}: {str(e)}")
+            
+        except Exception as e:
+            results["success"] = False
+            results["error"] = str(e)
+            logger.error(f"Audio download failed: {e}")
+        
+        finally:
+            shutil.rmtree(temp_dir, ignore_errors=True)
+        
+        return results
+
+
+# Singleton instance
+_uploader: Optional[YouTubeToHFUploader] = None
+
+
+def get_uploader() -> YouTubeToHFUploader:
+    """Get or create uploader instance."""
+    global _uploader
+    if _uploader is None:
+        _uploader = YouTubeToHFUploader()
+    return _uploader

modules/text_story/router.py

@@ -133,13 +133,17 @@ async def generate_text_story_video(job_id: str, request: TextStoryRequest):
                 )
                 if cloud_url:
                     logger.info(f"TextStory: Uploaded to HF: {cloud_url}")
+                    # Delete local file after successful upload
+                    if os.path.exists(final_path):
+                        os.remove(final_path)
+                        logger.info(f"TextStory: Deleted local file after HF upload")
         except Exception as e:
-            logger.warning(f"TextStory: HF upload failed: {e}")
+            logger.warning(f"TextStory: HF upload failed, keeping local file: {e}")
         
         # Cleanup temp
         shutil.rmtree(temp_dir, ignore_errors=True)
         
-        # Use cloud URL if available, otherwise local
+        # Use cloud URL if available, otherwise local endpoint for direct streaming
         video_url = cloud_url or f"/api/text-story/{job_id}/video"
         update_job(job_id, "ready", 100, "Complete!", video_url=video_url)
         logger.info(f"TextStory: Job {job_id} completed successfully")

modules/text_story/services/renderer.py

@@ -1,6 +1,6 @@
 """
 Chat UI Renderer for Text Story module.
-Creates dating-app style chat bubbles and UI.
+Creates iMessage-style floating chat card.
 """
 
 import os
@@ -15,48 +15,61 @@ logger = logging.getLogger(__name__)
 CANVAS_WIDTH = 1080
 CANVAS_HEIGHT = 1920
 
-# Colors (Dating app style)
+# ============================================
+# POSITIONING (Mapped from reference image)
+# ============================================
+# Reference shows floating card with:
+# - Top margin: ~8% of height = 150px
+# - Side margins: ~3% = 35px each
+# - Chat box width: 94% of screen = 1010px
+# - Chat box rounded corners
+
+LAYOUT = {
+    "top_margin": 150,           # Empty space at top
+    "side_margin": 35,           # Side margins left/right
+    "chat_box_width": 1010,      # Width of chat card (1080 - 35*2)
+    "chat_box_radius": 30,       # Rounded corners
+    "header_height": 130,        # Header with avatar + name
+    "max_chat_height": 1100,     # Maximum height of entire chat box
+}
+
+# Colors (iMessage dark style from reference)
 COLORS = {
-    # Header gradient (purple/blue)
-    "header_start": (138, 43, 226),  # Blue-violet
-    "header_end": (75, 0, 130),      # Indigo
+    # Header (dark)
+    "header_bg": (28, 28, 30),        # #1C1C1E - Dark header
     
-    # Bubbles
-    "bubble_other": (245, 240, 235),  # Cream/beige for left (other person)
-    "bubble_user": (255, 255, 255),   # White for right (user)
+    # Bubbles (exactly like reference)
+    "bubble_other": (58, 58, 60),     # #3A3A3C - Gray for left (other person)
+    "bubble_user": (0, 122, 255),     # #007AFF - Blue for right (user)
     
     # Text
-    "text_dark": (30, 30, 30),         # Dark text on light bubbles
-    "text_white": (255, 255, 255),     # White text on header
-    "text_gray": (120, 120, 120),      # Gray for timestamps
-    "text_online": (50, 205, 50),      # Green for "Online"
+    "text_white": (255, 255, 255),    # White text
+    "text_gray": (142, 142, 147),     # #8E8E93 - Secondary text
+    "text_blue": (0, 122, 255),       # Blue accent
     
     # Background
-    "chat_bg": (240, 240, 245),        # Light gray chat area
+    "chat_bg": (0, 0, 0),             # Black chat area background
 }
 
 # UI Measurements
 UI = {
-    "header_height": 180,        # Taller header for avatar
-    "margin_side": 40,
-    "bubble_max_width_ratio": 0.72,
-    "bubble_padding_h": 20,
-    "bubble_padding_v": 14,
-    "bubble_radius": 24,
-    "bubble_gap": 20,
-    "font_size": 36,
-    "header_name_size": 48,
-    "timestamp_size": 22,
-    "avatar_size": 90,
-    "max_visible_messages": 7,
-    "chat_area_top": 220,        # Where chat area starts (below header)
+    "bubble_max_width_ratio": 0.75,   # 75% of chat box width
+    "bubble_padding_h": 16,
+    "bubble_padding_v": 10,
+    "bubble_radius": 18,
+    "bubble_gap": 8,
+    "font_size": 32,
+    "header_font_size": 28,
+    "small_font_size": 22,
+    "avatar_size": 50,
+    "max_visible_messages": 8,
 }
 
 
 class ChatRenderer:
     """
-    Renders dating-app style chat UI frames.
-    Fixed header with gradient, scrolling messages.
+    Renders iMessage-style floating chat card.
+    Positioned with margins matching reference image.
     """
     
     def __init__(self, 
@@ -69,13 +82,9 @@ class ChatRenderer:
         
         # Load fonts
         self.font = self._load_font(UI["font_size"])
-        self.font_name = self._load_font(UI["header_name_size"])
-        self.font_timestamp = self._load_font(UI["timestamp_size"])
-        self.font_small = self._load_font(24)
-        
-        # Current timestamp (random for realism)
-        self.base_hour = random.randint(10, 22)
-        self.base_minute = random.randint(10, 45)
+        self.font_header = self._load_font(UI["header_font_size"])
+        self.font_small = self._load_font(UI["small_font_size"])
+        self.font_avatar = self._load_font(24)
     
     def _load_font(self, size: int) -> ImageFont.FreeTypeFont:
         """Load font with fallback."""
@@ -118,18 +127,12 @@ class ChatRenderer:
         
         return lines if lines else [text]
     
-    def _get_timestamp(self, msg_index: int) -> str:
-        """Generate realistic timestamp."""
-        minute = (self.base_minute + msg_index * 2) % 60
-        hour = self.base_hour + ((self.base_minute + msg_index * 2) // 60)
-        return f"{hour % 24:02d}:{minute:02d}"
-    
     def _calculate_bubble_size(self, text: str) -> Tuple[int, int, List[str]]:
         """Calculate bubble size based on text."""
-        max_text_width = int(CANVAS_WIDTH * UI["bubble_max_width_ratio"]) - UI["bubble_padding_h"] * 2
+        max_text_width = int(LAYOUT["chat_box_width"] * UI["bubble_max_width_ratio"]) - UI["bubble_padding_h"] * 2
         lines = self._wrap_text(text, max_text_width)
         
-        line_height = self.font.getbbox("Ay")[3] + 6
+        line_height = self.font.getbbox("Ay")[3] + 4
         text_height = line_height * len(lines)
         
         max_line_width = 0
@@ -137,107 +140,94 @@ class ChatRenderer:
             bbox = self.font.getbbox(line)
             max_line_width = max(max_line_width, bbox[2] - bbox[0])
         
-        # Add padding + space for timestamp
-        bubble_width = max_line_width + UI["bubble_padding_h"] * 2 + 80  # Extra for timestamp
+        bubble_width = max_line_width + UI["bubble_padding_h"] * 2
         bubble_height = text_height + UI["bubble_padding_v"] * 2
         
         return bubble_width, bubble_height, lines
     
-    def _draw_gradient_header(self, img: Image.Image, draw: ImageDraw.Draw):
-        """Draw gradient header with avatar and name."""
-        # Create gradient
-        for y in range(UI["header_height"]):
-            ratio = y / UI["header_height"]
-            r = int(COLORS["header_start"][0] * (1 - ratio) + COLORS["header_end"][0] * ratio)
-            g = int(COLORS["header_start"][1] * (1 - ratio) + COLORS["header_end"][1] * ratio)
-            b = int(COLORS["header_start"][2] * (1 - ratio) + COLORS["header_end"][2] * ratio)
-            draw.line([(0, y), (CANVAS_WIDTH, y)], fill=(r, g, b))
-        
-        # Avatar circle (left side)
-        avatar_x = 80
-        avatar_y = UI["header_height"] // 2
-        avatar_r = UI["avatar_size"] // 2
+    def _draw_chat_box_background(self, draw: ImageDraw.Draw, height: int):
+        """Draw the floating chat card background with rounded corners."""
+        x1 = LAYOUT["side_margin"]
+        y1 = LAYOUT["top_margin"]
+        x2 = x1 + LAYOUT["chat_box_width"]
+        y2 = y1 + height
+        
+        # Draw rounded rectangle for entire chat box
+        draw.rounded_rectangle(
+            [x1, y1, x2, y2],
+            radius=LAYOUT["chat_box_radius"],
+            fill=COLORS["chat_bg"]
+        )
+    
+    def _draw_header(self, draw: ImageDraw.Draw):
+        """Draw iMessage-style header."""
+        x_offset = LAYOUT["side_margin"]
+        y_start = LAYOUT["top_margin"]
         
-        # White circle border
-        draw.ellipse(
-            [avatar_x - avatar_r - 4, avatar_y - avatar_r - 4,
-             avatar_x + avatar_r + 4, avatar_y + avatar_r + 4],
-            fill=(255, 255, 255)
+        # Header background (already drawn as part of chat box)
+        header_y2 = y_start + LAYOUT["header_height"]
+        draw.rectangle(
+            [x_offset, y_start, x_offset + LAYOUT["chat_box_width"], header_y2],
+            fill=COLORS["header_bg"]
+        )
+        
+        # Round top corners
+        draw.rounded_rectangle(
+            [x_offset, y_start, x_offset + LAYOUT["chat_box_width"], y_start + 60],
+            radius=LAYOUT["chat_box_radius"],
+            fill=COLORS["header_bg"]
         )
         
-        # Avatar inner circle (random color)
-        avatar_color = (random.randint(100, 200), random.randint(80, 150), random.randint(80, 150))
+        # Avatar circle (center)
+        avatar_x = x_offset + LAYOUT["chat_box_width"] // 2
+        avatar_y = y_start + 40
+        avatar_r = UI["avatar_size"] // 2
+        
+        # Gray circle
         draw.ellipse(
             [avatar_x - avatar_r, avatar_y - avatar_r,
              avatar_x + avatar_r, avatar_y + avatar_r],
-            fill=avatar_color
+            fill=(100, 100, 105)
         )
         
         # Avatar letter
         letter = self.person_b_avatar[:1].upper()
-        bbox = self.font_name.getbbox(letter)
+        bbox = self.font_avatar.getbbox(letter)
         text_w = bbox[2] - bbox[0]
         text_h = bbox[3] - bbox[1]
         draw.text(
-            (avatar_x - text_w // 2, avatar_y - text_h // 2 - 5),
+            (avatar_x - text_w // 2, avatar_y - text_h // 2 - 2),
             letter,
             fill=COLORS["text_white"],
-            font=self.font_name
+            font=self.font_avatar
         )
         
-        # Name (to the right of avatar)
-        name_x = avatar_x + avatar_r + 30
-        name_y = avatar_y - 25
+        # Name below avatar
+        name_bbox = self.font_header.getbbox(self.person_b_name)
+        name_w = name_bbox[2] - name_bbox[0]
         draw.text(
-            (name_x, name_y),
+            (avatar_x - name_w // 2, avatar_y + avatar_r + 10),
             self.person_b_name,
             fill=COLORS["text_white"],
-            font=self.font_name
+            font=self.font_header
         )
         
-        # "Online" status (below name)
-        online_y = name_y + 50
-        draw.text(
-            (name_x, online_y),
-            "Online",
-            fill=COLORS["text_online"],
-            font=self.font_small
-        )
+        # Back button (left) - "<15"
+        draw.text((x_offset + 20, y_start + 30), "‹15", fill=COLORS["text_blue"], font=self.font_header)
         
-        # Three dots menu (right side)
-        dots_x = CANVAS_WIDTH - 60
-        dots_y = avatar_y
-        for i in range(3):
-            y = dots_y - 25 + i * 25
-            draw.ellipse(
-                [dots_x - 5, y - 5, dots_x + 5, y + 5],
-                fill=COLORS["text_white"]
-            )
+        # Video icon (right)
+        video_x = x_offset + LAYOUT["chat_box_width"] - 50
+        draw.text((video_x, y_start + 30), "📹", fill=COLORS["text_blue"], font=self.font_small)
     
     def _draw_bubble(self, draw: ImageDraw.Draw, 
                      x: int, y: int, 
                      width: int, height: int,
                      lines: List[str],
-                     timestamp: str,
                      is_user: bool) -> int:
-        """
-        Draw a chat bubble with timestamp.
-        
-        Returns:
-            Bottom Y position of bubble
-        """
-        # Bubble color
+        """Draw a chat bubble. Returns bottom Y position."""
         color = COLORS["bubble_user"] if is_user else COLORS["bubble_other"]
-        text_color = COLORS["text_dark"]  # Dark text on light bubbles
-        
-        # Draw rounded rectangle with shadow
-        shadow_offset = 3
-        draw.rounded_rectangle(
-            [x + shadow_offset, y + shadow_offset, x + width + shadow_offset, y + height + shadow_offset],
-            radius=UI["bubble_radius"],
-            fill=(200, 200, 200, 100)  # Light shadow
-        )
         
+        # Draw rounded rectangle
         draw.rounded_rectangle(
             [x, y, x + width, y + height],
             radius=UI["bubble_radius"],
@@ -247,19 +237,12 @@ class ChatRenderer:
         # Draw text
         text_x = x + UI["bubble_padding_h"]
         text_y = y + UI["bubble_padding_v"]
-        line_height = self.font.getbbox("Ay")[3] + 6
+        line_height = self.font.getbbox("Ay")[3] + 4
         
         for line in lines:
-            draw.text((text_x, text_y), line, fill=text_color, font=self.font)
+            draw.text((text_x, text_y), line, fill=COLORS["text_white"], font=self.font)
             text_y += line_height
         
-        # Draw timestamp (bottom right of bubble)
-        ts_bbox = self.font_timestamp.getbbox(timestamp)
-        ts_w = ts_bbox[2] - ts_bbox[0]
-        ts_x = x + width - ts_w - 15
-        ts_y = y + height - 30
-        draw.text((ts_x, ts_y), timestamp, fill=COLORS["text_gray"], font=self.font_timestamp)
-        
         return y + height
     
     def render_frame(self, messages: List[dict], show_typing: bool = False) -> Image.Image:
@@ -273,84 +256,75 @@ class ChatRenderer:
         Returns:
             PIL Image of the frame
         """
-        # Create transparent image (gameplay will be behind)
+        # Create transparent image
         img = Image.new("RGBA", (CANVAS_WIDTH, CANVAS_HEIGHT), (0, 0, 0, 0))
         draw = ImageDraw.Draw(img)
         
-        # Calculate total height needed for messages
+        # Calculate message heights
         message_heights = []
-        for msg in messages:
+        visible_messages = messages[-UI["max_visible_messages"]:]
+        
+        for msg in visible_messages:
             _, height, _ = self._calculate_bubble_size(msg["text"])
             message_heights.append(height + UI["bubble_gap"])
         
         total_msg_height = sum(message_heights)
         
-        # Calculate UI box height (dynamic)
-        ui_height = UI["chat_area_top"] + total_msg_height + 30
-        
-        # Limit maximum height
-        max_ui_height = 1400
-        ui_height = min(ui_height, max_ui_height)
-        
-        # Draw light gray chat background
-        draw.rectangle(
-            [0, UI["header_height"], CANVAS_WIDTH, ui_height],
-            fill=COLORS["chat_bg"]
-        )
+        # Calculate total chat box height
+        chat_box_height = LAYOUT["header_height"] + total_msg_height + 30  # 30px bottom padding
+        chat_box_height = min(chat_box_height, LAYOUT["max_chat_height"])
         
-        # Draw gradient header (fixed on top)
-        self._draw_gradient_header(img, draw)
+        # Draw chat box background
+        self._draw_chat_box_background(draw, chat_box_height)
         
-        # Draw messages starting below header
-        current_y = UI["chat_area_top"]
+        # Draw header
+        self._draw_header(draw)
         
-        # Only show last N messages if too many
-        visible_messages = messages[-UI["max_visible_messages"]:]
-        start_index = len(messages) - len(visible_messages)
+        # Draw messages
+        x_base = LAYOUT["side_margin"]
+        current_y = LAYOUT["top_margin"] + LAYOUT["header_height"] + 10
+        bubble_area_width = LAYOUT["chat_box_width"]
         
-        for i, msg in enumerate(visible_messages):
+        for msg in visible_messages:
             width, height, lines = self._calculate_bubble_size(msg["text"])
-            timestamp = self._get_timestamp(start_index + i)
             
             # Position: A (user) = right, B (other) = left
             if msg["sender"] == "A":
-                x = CANVAS_WIDTH - UI["margin_side"] - width
+                x = x_base + bubble_area_width - width - 15  # Right aligned with padding
             else:
-                x = UI["margin_side"]
+                x = x_base + 15  # Left aligned with padding
             
-            current_y = self._draw_bubble(draw, x, current_y, width, height, lines, timestamp, msg["sender"] == "A")
+            current_y = self._draw_bubble(draw, x, current_y, width, height, lines, msg["sender"] == "A")
             current_y += UI["bubble_gap"]
         
         # Draw typing indicator if needed
         if show_typing:
-            typing_y = current_y + 5
-            self._draw_typing_indicator(draw, typing_y)
+            self._draw_typing_indicator(draw, current_y)
         
         return img
     
     def _draw_typing_indicator(self, draw: ImageDraw.Draw, y: int):
         """Draw typing indicator (●●●)."""
-        x = UI["margin_side"]
+        x = LAYOUT["side_margin"] + 15
         
-        # Background bubble (cream color like other messages)
-        bubble_width = 80
-        bubble_height = 45
+        bubble_width = 70
+        bubble_height = 35
         draw.rounded_rectangle(
             [x, y, x + bubble_width, y + bubble_height],
-            radius=18,
+            radius=14,
             fill=COLORS["bubble_other"]
         )
         
         # Three dots
         dot_y = y + bubble_height // 2
-        for i, dx in enumerate([22, 40, 58]):
+        for i, dx in enumerate([18, 35, 52]):
             draw.ellipse(
-                [x + dx - 5, dot_y - 5, x + dx + 5, dot_y + 5],
+                [x + dx - 4, dot_y - 4, x + dx + 4, dot_y + 4],
                 fill=COLORS["text_gray"]
             )
     
     def get_ui_height(self, messages: List[dict]) -> int:
-        """Calculate the height of the chat UI for given messages."""
+        """Calculate the height of the chat UI."""
         message_heights = []
         visible_messages = messages[-UI["max_visible_messages"]:]
         
@@ -358,4 +332,5 @@ class ChatRenderer:
             _, height, _ = self._calculate_bubble_size(msg["text"])
             message_heights.append(height + UI["bubble_gap"])
         
-        return min(UI["chat_area_top"] + sum(message_heights) + 30, 1400)
+        total = LAYOUT["header_height"] + sum(message_heights) + 30
+        return min(LAYOUT["top_margin"] + total, LAYOUT["top_margin"] + LAYOUT["max_chat_height"])

requirements.txt

@@ -29,3 +29,6 @@ imageio-ffmpeg>=0.4.9
 # Trends Analysis
 pytrends
 pandas
+
+# YouTube Downloads
+yt-dlp

static/index.html

@@ -282,6 +282,9 @@
             <button class="tab-btn" data-tab="textstory">
                 📱 Text Story
             </button>
+            <button class="tab-btn" data-tab="media">
+                📁 Media Uploader
+            </button>
         </div>
 
         <!-- Story Reels Tab -->
@@ -784,6 +787,78 @@
         </div>
     </div>
 
+    <!-- Media Uploader Tab -->
+    <div id="media-tab" class="tab-content">
+        <div class="card">
+            <h2>📁 YouTube to HF Uploader</h2>
+            <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
+                Download YouTube videos/playlists and upload directly to HuggingFace Dataset
+            </p>
+
+            <form id="mediaUploaderForm">
+                <!-- URL Input -->
+                <div class="form-group">
+                    <label>YouTube URL (Video or Playlist) *</label>
+                    <input type="text" id="mediaUrl"
+                        placeholder="https://youtube.com/watch?v=... or https://youtube.com/playlist?list=..." required>
+                </div>
+
+                <!-- Folder Selection -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Target Folder *</label>
+                        <select id="mediaFolder" required>
+                            <option value="">Loading folders...</option>
+                        </select>
+                    </div>
+                    <div class="form-group" style="flex: 0 0 auto;">
+                        <label>&nbsp;</label>
+                        <button type="button" id="createFolderBtn" class="btn btn-secondary">
+                            ➕ New Folder
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Format Toggle -->
+                <div class="form-group">
+                    <label>Download Format *</label>
+                    <div style="display: flex; gap: 1rem;">
+                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+                            <input type="radio" name="mediaFormat" value="mp4" checked>
+                            🎬 Video (MP4)
+                        </label>
+                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+                            <input type="radio" name="mediaFormat" value="mp3">
+                            🎵 Audio (MP3)
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Category (for Audio) -->
+                <div id="audioCategorySection" class="form-group" style="display: none;">
+                    <label>Music Category / Name</label>
+                    <input type="text" id="audioCategory" placeholder="e.g., emotional, energetic, lofi, sad, happy"
+                        style="max-width: 300px;">
+                    <small style="color: var(--text-secondary); display: block; margin-top: 0.5rem;">
+                        Files will be saved as: {category}_001.mp3, {category}_002.mp3, etc.
+                    </small>
+                </div>
+
+                <button type="submit" class="btn btn-primary" style="width: 100%;">
+                    📤 Download & Upload to HF
+                </button>
+            </form>
+
+            <div id="mediaUploaderStatus" class="status hidden"></div>
+
+            <!-- Results -->
+            <div id="mediaResults" style="display: none; margin-top: 1.5rem;">
+                <h3>✅ Uploaded Files</h3>
+                <div id="mediaResultsList" style="max-height: 300px; overflow-y: auto;"></div>
+            </div>
+        </div>
+    </div>
+
     <script>
         // Tab switching
         document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -1478,6 +1553,126 @@
             };
             poll();
         }
+
+        // ============================================
+        // MEDIA UPLOADER
+        // ============================================
+
+        // Load HF folders on page load
+        async function loadHFFolders() {
+            const select = document.getElementById('mediaFolder');
+            try {
+                const res = await fetch('/api/utils/hf-folders');
+                if (res.ok) {
+                    const data = await res.json();
+                    select.innerHTML = '<option value="">Select folder...</option>';
+                    data.folders.forEach(folder => {
+                        select.innerHTML += `<option value="${folder}">${folder}</option>`;
+                    });
+                } else {
+                    select.innerHTML = '<option value="">Failed to load folders</option>';
+                }
+            } catch (err) {
+                select.innerHTML = '<option value="">Error loading folders</option>';
+            }
+        }
+
+        // Toggle category input based on format
+        document.querySelectorAll('input[name="mediaFormat"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                const categorySection = document.getElementById('audioCategorySection');
+                categorySection.style.display = e.target.value === 'mp3' ? 'block' : 'none';
+            });
+        });
+
+        // Create new folder
+        document.getElementById('createFolderBtn').addEventListener('click', async () => {
+            const name = prompt('Enter new folder name:');
+            if (!name) return;
+
+            try {
+                const res = await fetch('/api/utils/hf-folders', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name: name.trim() })
+                });
+
+                if (res.ok) {
+                    alert('✅ Folder created: ' + name);
+                    loadHFFolders();
+                } else {
+                    const err = await res.json();
+                    alert('❌ Failed: ' + (err.detail || 'Unknown error'));
+                }
+            } catch (err) {
+                alert('❌ Error: ' + err.message);
+            }
+        });
+
+        // Media Uploader form submission
+        document.getElementById('mediaUploaderForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const status = document.getElementById('mediaUploaderStatus');
+            const resultsDiv = document.getElementById('mediaResults');
+            const resultsList = document.getElementById('mediaResultsList');
+
+            status.className = 'status processing';
+            status.innerHTML = '⏳ Downloading and uploading... This may take a while...';
+            status.classList.remove('hidden');
+            resultsDiv.style.display = 'none';
+
+            const format = document.querySelector('input[name="mediaFormat"]:checked').value;
+            const data = {
+                url: document.getElementById('mediaUrl').value,
+                folder: document.getElementById('mediaFolder').value,
+                format: format
+            };
+
+            if (format === 'mp3') {
+                data.category = document.getElementById('audioCategory').value || 'music';
+            }
+
+            try {
+                const res = await fetch('/api/utils/youtube-upload', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+
+                const result = await res.json();
+
+                if (res.ok && result.uploaded && result.uploaded.length > 0) {
+                    status.className = 'status success';
+                    status.innerHTML = `✅ Uploaded ${result.uploaded.length} file(s)!`;
+
+                    // Show results
+                    resultsList.innerHTML = '';
+                    result.uploaded.forEach(file => {
+                        resultsList.innerHTML += `
+                            <div style="padding: 0.5rem; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 0.5rem;">
+                                <strong>${file.filename || file.id}</strong><br>
+                                <small>${file.title}</small><br>
+                                <a href="${file.url}" target="_blank" style="color: var(--accent);">🔗 View on HF</a>
+                            </div>
+                        `;
+                    });
+                    resultsDiv.style.display = 'block';
+
+                    // Refresh folders if new ones created
+                    loadHFFolders();
+                } else {
+                    status.className = 'status error';
+                    status.innerHTML = '❌ ' + (result.error || result.detail || 'Upload failed');
+                }
+            } catch (err) {
+                status.className = 'status error';
+                status.innerHTML = '❌ Error: ' + err.message;
+            }
+        });
+
+        // Load folders on page load
+        loadHFFolders();
     </script>
 
     <!-- Chat Widget Button -->