Image Metadata Extractor From Video Titles

function processImage(
    originalImg,
    videoTitleData = "big Hero 6 2014 Wonder Project Amazon Channel Jun 30 2028 1:41:52",
    bgColor = "#1e1e24",
    primaryTextColor = "#ffffff",
    accentColor = "#00adb5"
) {
    // Create canvas and get context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure a reasonable minimum width so the extracted text is always legible
    const MIN_WIDTH = 800;
    const width = Math.max(originalImg.width, MIN_WIDTH);
    
    // Scale text and UI elements based on the canvas width
    const scale = width / MIN_WIDTH;
    
    // Layout padding and heights
    const padding = 30 * scale;
    const lineSpacing = 45 * scale;
    const panelHeight = 350 * scale;

    // Set canvas dimensions (Image height + space for text panel)
    canvas.width = width;
    canvas.height = originalImg.height + panelHeight;

    // Draw background for the entire canvas
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw the original image (centered horizontally if it's smaller than MIN_WIDTH)
    const imgX = (canvas.width - originalImg.width) / 2;
    ctx.drawImage(originalImg, imgX, 0);

    // --- Metadata Extraction Logic ---
    // Extract logical components from the provided videoTitleData string 

    // Extract Duration (e.g., 1:41:52)
    const durationMatch = videoTitleData.match(/\b\d{1,2}:\d{2}(?::\d{2})?\b/);
    // Extract Date (e.g., Jun 30 2028)
    const dateMatch = videoTitleData.match(/\b(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)[a-z]*\s\d{1,2},?\s\d{4}\b/i);
    // Extract Year candidates (19xx or 20xx)
    const yearArray = videoTitleData.match(/\b(19|20)\d{2}\b/g) || [];

    const duration = durationMatch ? durationMatch[0] : "N/A";
    const dateStr = dateMatch ? dateMatch[0] : "N/A";

    // Deduce Release Year (make sure it's not the year in the extracted date string)
    const dateYear = dateMatch ? dateStr.match(/\d{4}/)?.[0] : "";
    const releaseYear = yearArray.find(y => y !== dateYear) || (yearArray.length > 0 ? yearArray[0] : "N/A");

    // Clean text to extract residual Title/Tags
    let extractedTitle = videoTitleData;
    if (duration !== "N/A") extractedTitle = extractedTitle.replace(duration, '');
    if (dateStr !== "N/A") extractedTitle = extractedTitle.replace(dateMatch[0], '');
    if (releaseYear !== "N/A") extractedTitle = extractedTitle.replace(releaseYear, '');
    
    // Trim and collapse multiple spaces for the final title string
    extractedTitle = extractedTitle.replace(/\s+/g, ' ').trim() || "N/A";

    // Y offset for drawing the metadata panel below the image
    const panelY = originalImg.height;

    // Draw Header
    const headerSize = Math.floor(36 * scale);
    ctx.fillStyle = primaryTextColor;
    ctx.font = `bold ${headerSize}px "Segoe UI", Arial, sans-serif`;
    ctx.fillText("Extracted Video Metadata", padding, panelY + padding + headerSize - 10);

    // Draw Divider Line
    ctx.strokeStyle = accentColor;
    ctx.lineWidth = 3 * scale;
    ctx.beginPath();
    ctx.moveTo(padding, panelY + padding + headerSize + (10 * scale));
    ctx.lineTo(canvas.width - padding, panelY + padding + headerSize + (10 * scale));
    ctx.stroke();

    // Data Rows Structure
    const rowLabelSize = Math.floor(22 * scale);
    const rowValueSize = Math.floor(22 * scale);
    const startY = panelY + padding + headerSize + (35 * scale);

    const rows = [
        { label: "Raw Metadata Title:", value: videoTitleData },
        { label: "Title / Project / Channel:", value: extractedTitle },
        { label: "Release Year:", value: releaseYear },
        { label: "Air / Fetch Date:", value: dateStr },
        { label: "Duration:", value: duration }
    ];

    rows.forEach((row, index) => {
        const y = startY + (index * lineSpacing) + rowLabelSize;
        
        // Render Row Label (e.g. "Release Year:")
        ctx.font = `bold ${rowLabelSize}px "Segoe UI", Arial, sans-serif`;
        ctx.fillStyle = accentColor;
        ctx.fillText(row.label, padding, y);

        // Render Values accurately aligned beside labels
        const labelWidth = ctx.measureText(row.label).width;
        ctx.font = `${rowValueSize}px "Segoe UI", Arial, sans-serif`;
        ctx.fillStyle = primaryTextColor;
        ctx.fillText("  " + row.value, padding + labelWidth, y);
    });

    // Draw Footer indicating automated extraction
    const footSize = Math.floor(14 * scale);
    ctx.font = `italic ${footSize}px "Segoe UI", Arial, sans-serif`;
    ctx.fillStyle = "#888888";
    ctx.fillText("Automated Video Title Recognition & Metadata Extraction", padding, canvas.height - padding);

    // Return the resulting canvas with both the original image and formatted metadata table
    return canvas;
}