Image To Text Prompt Generator

async function processImage(originalImg) {
    /**
     * Dynamically imports the Transformers.js library if it's not already available.
     * @returns {Promise<Function>} A promise that resolves with the pipeline function.
     */
    async function loadTransformers() {
        if (window.transformers) {
            return window.transformers;
        }

        // Dynamically import the ESM version of the library
        const module = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1');
        window.transformers = module; // Cache for future use
        return module;
    }

    const resultContainer = document.createElement('div');
    resultContainer.style.fontFamily = 'Arial, sans-serif';
    resultContainer.style.padding = '20px';
    resultContainer.style.border = '1px solid #ccc';
    resultContainer.style.borderRadius = '8px';
    resultContainer.style.backgroundColor = '#f9f9f9';
    resultContainer.style.maxWidth = '100%';
    resultContainer.style.boxSizing = 'border-box';

    const statusElement = document.createElement('p');
    statusElement.textContent = 'Initializing AI model...';
    resultContainer.appendChild(statusElement);

    try {
        // Step 1: Load the AI library/model pipeline
        const { pipeline } = await loadTransformers();

        // Step 2: Use a singleton pattern to ensure the model is loaded only once.
        class ImageToTextPipeline {
            static task = 'image-to-text';
            static model = 'Xenova/vit-gpt2-image-captioning';
            static instance = null;

            static async getInstance(progress_callback = null) {
                if (this.instance === null) {
                    this.instance = await pipeline(this.task, this.model, { progress_callback });
                }
                return this.instance;
            }
        }

        // Get the pipeline instance, providing a callback for progress updates.
        const captioner = await ImageToTextPipeline.getInstance((progress) => {
            statusElement.textContent = `Loading model: ${progress.file} (${Math.round(progress.progress || 0)}%)`;
        });

        // Step 3: Once the model is loaded, start analyzing the image.
        statusElement.textContent = 'Analyzing image...';

        // Step 4: Perform the image-to-text conversion.
        // The `originalImg.src` can be a URL or a data URI.
        const output = await captioner(originalImg.src);

        // Step 5: Format and display the output.
        // The output is an array; we'll take the first result.
        const generatedText = output[0].generated_text;

        statusElement.textContent = 'Generated Prompt:';
        statusElement.style.fontWeight = 'bold';
        
        const promptElement = document.createElement('p');
        promptElement.textContent = generatedText;
        promptElement.style.marginTop = '10px';
        promptElement.style.fontSize = '1.1em';
        promptElement.style.color = '#333';
        promptElement.style.whiteSpace = 'pre-wrap';
        resultContainer.appendChild(promptElement);

    } catch (error) {
        console.error("Error during image processing:", error);
        statusElement.textContent = 'An error occurred while generating the prompt. Please check the console for details.';
        statusElement.style.color = 'red';
    }

    return resultContainer;
}