Image Storyteller

/**
 * Generates a descriptive story or caption for an image using a client-side AI model.
 * This function dynamically loads the 'Transformers.js' library and an AI model
 * to perform image-to-text conversion directly in the browser.
 * The result is an HTML element containing the original image and the generated text.
 *
 * @param {Image} originalImg The input Image object to be processed.
 * @param {string} modelName The name of a compatible Hugging Face model for image-to-text tasks (e.g., 'Xenova/vit-gpt2-image-captioning').
 * @param {number} maxNewTokens The maximum length of the story to be generated, in tokens.
 * @param {number} temperature A value controlling the creativity of the output. Higher values (e.g., 1.0) produce more random text, while lower values (e.g., 0.7) are more deterministic.
 * @returns {Promise<HTMLElement>} A promise that resolves to a single HTML div element containing the image and its generated story. This element can be appended to the DOM.
 */
async function processImage(originalImg, modelName = 'Xenova/vit-gpt2-image-captioning', maxNewTokens = 50, temperature = 1.0) {

    // Helper function to dynamically load a Google Font if it hasn't been loaded yet.
    const loadGoogleFont = (fontName) => {
        const fontId = `google-font-${fontName.replace(/\s/g, '-')}`;
        if (document.getElementById(fontId)) {
            return; // Font is already loaded
        }
        const link = document.createElement('link');
        link.id = fontId;
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s/g, '+')}:wght@400;700&display=swap`;
        document.head.appendChild(link);
    };

    // Create the main container element which will be styled and returned.
    const container = document.createElement('div');
    container.style.display = 'inline-block';
    container.style.maxWidth = `${originalImg.naturalWidth}px`;
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.padding = '16px';
    container.style.backgroundColor = '#fafafa';
    container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    container.style.textAlign = 'center';

    // Add the user's image to the container.
    const imgElement = document.createElement('img');
    imgElement.src = originalImg.src;
    imgElement.style.maxWidth = '100%';
    imgElement.style.height = 'auto';
    imgElement.style.borderRadius = '4px';
    container.appendChild(imgElement);

    // Load a "storybook" style font and add a placeholder for the story text.
    loadGoogleFont('Crimson Text');
    const storyElement = document.createElement('p');
    storyElement.style.fontFamily = "'Crimson Text', serif";
    storyElement.style.fontSize = '1.1em';
    storyElement.style.lineHeight = '1.6';
    storyElement.style.textAlign = 'left';
    storyElement.style.marginTop = '16px';
    storyElement.style.color = '#333';
    storyElement.textContent = 'Initializing storyteller...';
    container.appendChild(storyElement);

    try {
        // Dynamically import the Transformers.js library from a CDN.
        // This brings the power of AI models to the browser.
        const {
            pipeline,
            env
        } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1');

        // Configure the environment to allow remote models.
        env.allowRemoteModels = true;

        // Create the image-to-text pipeline. This is the core of our storyteller.
        // It will download the model on the first run, and the progress_callback
        // provides real-time feedback to the user during this process.
        const captioner = await pipeline('image-to-text', modelName, {
            progress_callback: (progress) => {
                if (progress.status === 'download') {
                    const percent = ((progress.progress || 0)).toFixed(2);
                    storyElement.textContent = `Downloading model: ${progress.file} (${percent}%)...`;
                } else if (progress.status === 'ready') {
                    storyElement.textContent = 'Model loaded. Weaving a tale...';
                } else {
                    storyElement.textContent = `Status: ${progress.status}...`;
                }
            }
        });

        // Use the loaded model to generate text from the provided image.
        const output = await captioner(originalImg.src, {
            max_new_tokens: maxNewTokens,
            temperature: temperature
        });

        // Format and display the generated story.
        if (output && output.length > 0 && output[0].generated_text) {
            let storyText = output[0].generated_text.trim();
            // Capitalize the first letter for a nice starting sentence.
            storyText = storyText.charAt(0).toUpperCase() + storyText.slice(1);
            storyElement.textContent = storyText;
        } else {
            storyElement.textContent = 'A story could not be woven for this image.';
        }

    } catch (e) {
        console.error("Error during AI processing:", e);
        storyElement.textContent = 'An error occurred while generating the story. The AI model might not be available or another issue occurred. Please check the browser console for details.';
        storyElement.style.color = 'red';
    }

    return container;
}