Photo Story Generator

async function processImage(originalImg, prompt = "Describe the image in a detailed and evocative story.") {
    const outputContainer = document.createElement('div');
    outputContainer.style.fontFamily = 'Arial, sans-serif';
    outputContainer.style.lineHeight = '1.6';
    outputContainer.style.padding = '20px';
    outputContainer.style.border = '1px solid #eee';
    outputContainer.style.borderRadius = '8px';
    outputContainer.style.backgroundColor = '#f9f9f9';
    outputContainer.style.maxWidth = '700px';
    outputContainer.innerHTML = '<p>AI is thinking...</p>';

    try {
        // 1. Get Google AI API Key from user
        let apiKey = sessionStorage.getItem('GEMINI_API_KEY');
        if (!apiKey) {
            apiKey = window.prompt("Please enter your Google AI API Key:");
            if (!apiKey) {
                throw new Error("An API Key is required to generate a story.");
            }
            sessionStorage.setItem('GEMINI_API_KEY', apiKey);
        }

        // 2. Dynamically load the Google Generative AI SDK (via Vercel AI SDK for simplicity)
        if (!window.ai) {
             outputContainer.innerHTML = '<p>Loading AI library...</p>';
             await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://sdk.vercel.ai/ai';
                script.onload = resolve;
                script.onerror = () => reject(new Error("Failed to load the AI SDK."));
                document.head.appendChild(script);
            });
        }
        
        outputContainer.innerHTML = '<p>Analyzing image and generating story...</p>';

        // 3. Convert image to a data URL
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);
        // Using JPEG for smaller size; you can use 'image/png' for higher quality.
        const dataUrl = canvas.toDataURL('image/jpeg', 0.9);

        // 4. Initialize the AI model and generate content
        const { createGoogleGenerativeAI } = window.ai;
        const google = createGoogleGenerativeAI({ apiKey });
        
        const model = google.getGenerativeModel({
            model: 'gemini-1.5-flash-latest'
        });

        const result = await model.generateContent([
            prompt,
            { image: dataUrl }
        ]);

        const response = await result.response;
        const storyText = response.text();
        
        // 5. Display the generated story
        outputContainer.innerHTML = '';
        const storyParagraph = document.createElement('p');
        storyParagraph.style.whiteSpace = 'pre-wrap'; // Preserve line breaks from the AI
        storyParagraph.textContent = storyText;
        outputContainer.appendChild(storyParagraph);

    } catch (error) {
        console.error("Photo Story Generator Error:", error);
        outputContainer.style.color = 'red';
        outputContainer.innerHTML = `
            <strong>An error occurred:</strong>
            <p>${error.message}</p>
            <p>Please check the console for more details. Common issues include an invalid API key or network problems.</p>`;
    }

    return outputContainer;
}