Image Topic Idea Generator For TV And Movies

function processImage(originalImg, topicCount = "2", category = "TV and Movies") {
    const count = parseInt(topicCount, 10) || 2;
    
    // Seeded Random Number Generator to ensure consistent outputs for the same image
    function LCG(seed) {
        this.seed = seed;
        this.next = function() {
            this.seed = (this.seed * 1664525 + 1013904223) % 4294967296;
            return this.seed / 4294967296;
        };
    }
    
    let seed = 12345;
    try {
        // Read image pixels to generate a unique but consistent seed 
        const tmpCanvas = document.createElement('canvas');
        tmpCanvas.width = 100;
        tmpCanvas.height = 100;
        const tmpCtx = tmpCanvas.getContext('2d');
        tmpCtx.drawImage(originalImg, 0, 0, 100, 100);
        const imgData = tmpCtx.getImageData(0, 0, 100, 100).data;
        let sum = 0;
        for (let i = 0; i < imgData.length; i += 16) { 
            sum += imgData[i];
        }
        seed = sum + originalImg.width + originalImg.height || 12345;
    } catch (e) {
        // Fallback for any cross-origin image errors
        seed = Math.floor(Math.random() * 1000000);
    }
    
    for(let i = 0; i < category.length; i++) {
        seed += category.charCodeAt(i);
    }

    const rng = new LCG(seed);
    const getRandom = (arr) => arr[Math.floor(rng.next() * arr.length)];
    
    // Generation Word Banks
    const adjectives = ["Gritty", "Hilarious", "Dark", "Heartwarming", "Intense", "Surreal", "Action-packed", "Romantic", "Mind-bending", "Nostalgic", "Epic", "Suspenseful", "Mysterious", "Quirky", "Gothic", "Lighthearted", "Psychedelic", "Melancholy", "Fast-paced"];
    const themes = ["Sci-Fi", "Fantasy", "Mystery", "Comedy", "Drama", "Horror", "Thriller", "Documentary", "Slice of Life", "Cyberpunk", "Steampunk", "Post-Apocalyptic", "Noir", "Adventure", "Musical", "Western", "Rom-Com"];
    const subjects = ["Time Travelers", "Aliens", "Vampires", "Zombies", "Superheroes", "Detectives", "Teenagers", "Chefs", "Talking Animals", "Royalty", "Spies", "Ghosts", "Artificial Intelligences", "Pirates", "Ninjas", "Witches", "Bounty Hunters"];
    const settings = ["in Space", "in Medieval Times", "in a Dystopian City", "in the 1980s", "in a Quirky Small Town", "in a Haunted Mansion", "inside a Virtual Reality", "Deep Underwater", "in the Distant Future", "during a Global Crisis", "in a Parallel Universe", "in an Alternate History", "at a Summer Camp", "in a Post-Scarcity Utopia", "on an Isolated Island", "in a Megacorporation", "in the Wild West"];

    const topics = [];
    for (let i = 0; i < count; i++) {
        topics.push(`${getRandom(adjectives)} ${getRandom(themes)} about ${getRandom(subjects)} ${getRandom(settings)}`);
    }

    // Set up canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const panelWidth = 450;
    const padding = 30;
    
    // Make sure canvas height can accommodate the generated text layout
    canvas.width = originalImg.width + panelWidth;
    canvas.height = Math.max(originalImg.height, 200 + (count * 90));
    
    // Draw background 
    ctx.fillStyle = '#121212';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw original image on the left, centered vertically
    const imgY = canvas.height > originalImg.height ? (canvas.height - originalImg.height) / 2 : 0;
    ctx.drawImage(originalImg, 0, imgY);
    
    // Draw side panel for topic ideas
    ctx.fillStyle = '#1e1e1e';
    ctx.fillRect(originalImg.width, 0, panelWidth, canvas.height);
    
    // Add separator line
    ctx.beginPath();
    ctx.moveTo(originalImg.width, 0);
    ctx.lineTo(originalImg.width, canvas.height);
    ctx.strokeStyle = '#333333';
    ctx.lineWidth = 2;
    ctx.stroke();

    ctx.fillStyle = '#ffffff';
    ctx.textBaseline = 'top';
    
    // Draw Heading and Category
    let currentY = padding;
    ctx.font = '16px sans-serif';
    ctx.fillStyle = '#888888';
    ctx.fillText(`Category: ${category}     |     Ideas: ${count}`, originalImg.width + padding, currentY);
    
    currentY += 30;
    ctx.font = 'bold 26px sans-serif';
    ctx.fillStyle = '#f39c12';
    ctx.fillText('Generated Topic Ideas:', originalImg.width + padding, currentY);
    
    currentY += 50;
    
    // Utility to wrap text on canvas
    const wrapText = (context, text, x, y, maxWidth, lineHeight) => {
        const words = text.split(' ');
        let line = '';
        let testY = y;
        for(let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            const metrics = context.measureText(testLine);
            const testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                context.fillText(line, x, testY);
                line = words[n] + ' ';
                testY += lineHeight;
            } else {
                line = testLine;
            }
        }
        context.fillText(line, x, testY);
        return testY + lineHeight;
    };

    const maxTextWidth = panelWidth - (padding * 2);

    // Render topics line by line
    for (let i = 0; i < topics.length; i++) {
        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 18px sans-serif';
        ctx.fillText(`Idea ${i + 1}:`, originalImg.width + padding, currentY);
        currentY += 24;
        
        ctx.fillStyle = '#cccccc';
        ctx.font = 'italic 18px sans-serif';
        currentY = wrapText(ctx, topics[i], originalImg.width + padding, currentY, maxTextWidth, 24);
        currentY += 25; 
    }

    // Credits / Footer
    ctx.fillStyle = '#444444';
    ctx.font = '12px sans-serif';
    ctx.fillText('Image Topic Idea Generator', originalImg.width + panelWidth - 190, canvas.height - 25);

    return canvas;
}