GLIF AI Batch Generator

AI-powered batch image generation for GLIF
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         GLIF AI Batch Generator
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  AI-powered batch image generation for GLIF
// @author       i12bp8
// @match        https://glif.app/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Modern SVG Icons
    const icons = {
        close: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>`,
        generate: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="16"/>
            <line x1="8" y1="12" x2="16" y2="12"/>
        </svg>`,
        loading: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 2a10 10 0 0 1 10 10"/>
        </svg>`
    };
 
    // Inject styles
    function injectStyles() {
        const styles = `
            .ai-batch-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
 
            .ai-batch-panel {
                background: white;
                border-radius: 12px;
                padding: 24px;
                width: 90%;
                max-width: 500px;
                max-height: 90vh;
                overflow-y: auto;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
 
            .ai-batch-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }
 
            .ai-batch-header h2 {
                margin: 0;
                font-size: 1.5rem;
                font-weight: 600;
            }
 
            .ai-close-button {
                background: none;
                border: none;
                cursor: pointer;
                padding: 4px;
                color: #666;
                transition: color 0.2s;
            }
 
            .ai-close-button:hover {
                color: #000;
            }
 
            .ai-input-field {
                margin-bottom: 16px;
            }
 
            .ai-input-label {
                display: block;
                margin-bottom: 8px;
                font-weight: 500;
                color: #333;
            }
 
            .ai-input {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 14px;
                transition: border-color 0.2s;
            }
 
            .ai-input:focus {
                outline: none;
                border-color: #0066ff;
            }
 
            .ai-generate-button {
                width: 100%;
                padding: 12px;
                background: rgb(100 48 247);
                color: white;
                border: none;
                border-radius: 6px;
                font-weight: 500;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                height: 48px;
                transition: background-color 0.2s;
            }
 
            .ai-generate-button:hover {
                background: #0052cc;
            }
 
            .ai-generate-button:disabled {
                background: #ccc;
                cursor: not-allowed;
            }
 
            .progress-container {
                margin-top: 16px;
            }
 
            .progress-bar {
                width: 100%;
                height: 4px;
                background: #eee;
                border-radius: 2px;
                overflow: hidden;
            }
 
            .progress-fill {
                height: 100%;
                background: #0066ff;
                transition: width 0.3s ease;
            }
 
            .progress-info {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
                font-size: 14px;
                color: #666;
            }
 
            .progress-message {
                margin-top: 8px;
                font-size: 14px;
                color: #666;
                text-align: center;
            }
 
            .review-container {
                margin-top: 20px;
                max-height: 60vh;
                overflow-y: auto;
                padding-right: 8px;
            }
 
            .review-container::-webkit-scrollbar {
                width: 8px;
            }
 
            .review-container::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }
 
            .review-container::-webkit-scrollbar-thumb {
                background: rgb(100 48 247);
                border-radius: 4px;
            }
 
            .review-item {
                background: #f8f9fa;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 12px;
                border: 1px solid #e9ecef;
            }
 
            .review-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
 
            .review-item-number {
                font-weight: 600;
                color: rgb(100 48 247);
            }
 
            .review-field {
                margin-bottom: 8px;
            }
 
            .review-field-label {
                font-size: 12px;
                color: #666;
                margin-bottom: 4px;
            }
 
            .review-field-input {
                width: 100%;
                padding: 8px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                transition: border-color 0.2s;
            }
 
            .review-field-input:focus {
                outline: none;
                border-color: rgb(100 48 247);
            }
 
            .review-actions {
                margin-top: 20px;
                display: flex;
                gap: 12px;
            }
 
            .review-button {
                flex: 1;
                padding: 12px;
                border: none;
                border-radius: 6px;
                font-weight: 500;
                cursor: pointer;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                transition: all 0.2s;
            }
 
            .review-generate {
                background: rgb(100 48 247);
                color: white;
            }
 
            .review-generate:hover {
                background: rgb(85 41 210);
            }
 
            .review-back {
                background: #f8f9fa;
                color: #666;
                border: 1px solid #ddd;
            }
 
            .review-back:hover {
                background: #e9ecef;
            }
 
            .results-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
                padding: 20px;
                margin-top: 20px;
            }
 
            .result-card {
                background: white;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transition: transform 0.2s;
                position: relative;
            }
 
            .result-card:hover {
                transform: translateY(-2px);
            }
 
            .result-image-container {
                position: relative;
                padding-top: 100%;
                background: #f8f9fa;
            }
 
            .result-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
 
            .result-loading {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: rgb(100 48 247);
            }
 
            .result-error {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #dc3545;
                text-align: center;
                padding: 20px;
            }
 
            .result-details {
                padding: 16px;
            }
 
            .result-field {
                margin-bottom: 8px;
            }
 
            .result-field-label {
                font-size: 12px;
                color: #666;
                margin-bottom: 2px;
            }
 
            .result-field-value {
                font-size: 14px;
                color: #333;
                word-break: break-word;
            }
 
            .generation-progress {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: white;
                padding: 16px;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                display: flex;
                align-items: center;
                gap: 12px;
                z-index: 10000;
            }
 
            .generation-progress-bar {
                width: 200px;
                height: 4px;
                background: #eee;
                border-radius: 2px;
                overflow: hidden;
            }
 
            .generation-progress-fill {
                height: 100%;
                background: rgb(100 48 247);
                transition: width 0.3s ease;
            }
 
            .generation-progress-text {
                font-size: 14px;
                color: #666;
                white-space: nowrap;
            }
 
            .animate-spin {
                animation: spin 1s linear infinite;
            }
 
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
 
            .batch-results-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                max-width: 900px;
                max-height: 80vh;
                background: white;
                border-radius: 12px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.15);
                z-index: 10000;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
 
            .batch-results-header {
                padding: 16px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fafafa;
            }
 
            .batch-results-header h2 {
                margin: 0;
                font-size: 18px;
            }
 
            .batch-results-header .close-button {
                background: none;
                border: none;
                padding: 8px;
                cursor: pointer;
                color: #666;
                font-size: 20px;
                line-height: 1;
            }
 
            .batch-results-content {
                flex: 1;
                overflow-y: auto;
                padding: 16px;
            }
 
            .batch-results-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 16px;
            }
        `;
 
        const styleElement = document.createElement('style');
        styleElement.textContent = styles;
        document.head.appendChild(styleElement);
    }
 
    // Get form inputs
    function getWorkflowInputs() {
        const form = document.querySelector('form');
        if (!form) return [];
 
        const inputs = [];
        form.querySelectorAll('textarea').forEach(textarea => {
            if (textarea.name && !textarea.name.startsWith('__') && textarea.name !== 'spellId' && textarea.name !== 'version') {
                const label = textarea.closest('label')?.querySelector('span')?.textContent?.trim() || '';
                inputs.push({
                    name: textarea.name,
                    type: 'textarea',
                    label: label,
                    value: textarea.value.trim(),
                    placeholder: textarea.getAttribute('placeholder') || label
                });
            }
        });
        return inputs;
    }
 
    // Show toast notification
    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.style.cssText = `
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 24px;
            background: ${type === 'error' ? '#ff4444' : type === 'warning' ? '#ffbb33' : '#00C851'};
            color: white;
            border-radius: 6px;
            font-size: 14px;
            z-index: 10000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        `;
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    }
 
    // Fetch AI batch inputs
    async function fetchAIBatchInputs(amount, content) {
        const formInputs = getWorkflowInputs();
 
        // Get workflow name and description
        const workflowTitle = document.querySelector('h1')?.textContent || '';
        const workflowDescription = document.querySelector('.text-gray-500')?.textContent?.trim() || '';
 
        // Format input fields with rich context
        const enrichedFields = formInputs.map(input => ({
            name: input.label,
            type: input.type,
            currentValue: input.value,
            placeholder: input.placeholder,
            constraints: input.type === 'number' ? {
                min: input.min,
                max: input.max,
                step: input.step
            } : null
        }));
 
        // Get previous successful generations if available
        const previousGenerations = Array.from(document.querySelectorAll('.workflow-result'))
            .slice(0, 3)  // Take up to 3 recent examples
            .map(result => {
                const inputs = {};
                result.querySelectorAll('.input-value').forEach(input => {
                    inputs[input.getAttribute('data-name')] = input.textContent.trim();
                });
                return inputs;
            });
 
        console.log('Sending enriched context:', { workflowTitle, enrichedFields, previousGenerations });
 
        try {
            const enrichedContext = JSON.stringify({
                workflow: {
                    title: workflowTitle,
                    description: workflowDescription
                },
                fields: enrichedFields,
                examples: previousGenerations
            });
 
            const payload = {
                id: "cm4b89oo000asm86fstry7u1e",
                version: "live",
                inputs: {
                    amount: amount.toString(),
                    fields: formInputs.map(input => input.name).join(' | '),
                    content: content,
                    enrichedContext: enrichedContext
                },
                glifRunIsPublic: !GM_getValue('isPrivate', false)
            };
 
            console.log('Debug - Request payload:', JSON.stringify(payload, null, 2));
 
            const response = await fetch("https://glif.app/api/run-glif", {
                method: 'POST',
                credentials: 'include',
                headers: {
                    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0',
                    'Accept': '*/*',
                    'Accept-Language': 'en-US,en;q=0.5',
                    'Content-Type': 'application/json',
                    'Sec-GPC': '1',
                    'Sec-Fetch-Dest': 'empty',
                    'Sec-Fetch-Mode': 'cors',
                    'Sec-Fetch-Site': 'same-origin',
                    'Priority': 'u=4'
                },
                referrer: `https://glif.app/@appelsiensam/glifs/${window.location.pathname.split('/').pop()}`,
                mode: 'cors',
                body: JSON.stringify(payload)
            });
 
            if (!response.ok) {
                const errorText = await response.text();
                console.log('Debug - Error response:', errorText);
                throw new Error(`API request failed: ${response.status}\nResponse: ${errorText}`);
            }
 
            const reader = response.body.getReader();
            let jsonData = '';
            let entries = [];
 
            while (true) {
                const { done, value } = await reader.read();
                if (done) break;
 
                const chunk = new TextDecoder().decode(value);
                jsonData += chunk;
 
                const lines = jsonData.split('\n');
                jsonData = lines.pop() || '';
 
                for (const line of lines) {
                    if (!line.trim().startsWith('data: ')) continue;
 
                    try {
                        const data = JSON.parse(line.slice(6));
                        const text = data.graphExecutionState?.nodes?.text1?.output?.value;
 
                        if (text?.includes('"entries"')) {
                            try {
                                const parsed = JSON.parse(text);
                                if (parsed.entries?.length) entries = parsed.entries;
                            } catch (e) {
                                console.log('Partial JSON:', text);
                            }
                        }
                    } catch (e) {
                        console.log('Parse error:', e);
                    }
                }
            }
 
            return entries;
        } catch (error) {
            console.error('fetchAIBatchInputs error:', error);
            throw error;
        }
    }
 
    // Process batch generation with parallel processing
    async function processBatchGeneration(entries) {
        const spellId = window.location.pathname.split('/').pop();
        const isPrivate = GM_getValue('isPrivate', false);
 
        console.log('Starting generation with spell ID:', spellId);
        console.log('Entries to process:', entries);
 
        // Create results container if it doesn't exist
        let resultsContainer = document.querySelector('.batch-results-container');
        if (!resultsContainer) {
            resultsContainer = document.createElement('div');
            resultsContainer.className = 'batch-results-container';
            resultsContainer.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                max-width: 900px;
                max-height: 80vh;
                background: white;
                border-radius: 12px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.15);
                z-index: 10000;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            `;
 
            // Add header with title and close button
            const header = document.createElement('div');
            header.style.cssText = `
                padding: 16px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fafafa;
            `;
            header.innerHTML = `
                <h2 style="margin: 0; font-size: 18px;">Generated Images</h2>
                <button class="close-button" style="
                    background: none;
                    border: none;
                    padding: 8px;
                    cursor: pointer;
                    color: #666;
                    font-size: 20px;
                    line-height: 1;
                ">×</button>
            `;
            resultsContainer.appendChild(header);
 
            // Add close button functionality
            header.querySelector('.close-button').addEventListener('click', () => {
                resultsContainer.remove();
            });
 
            // Add overlay
            const overlay = document.createElement('div');
            overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,0.5);
                z-index: 9999;
            `;
            document.body.appendChild(overlay);
 
            // Close on overlay click
            overlay.addEventListener('click', () => {
                overlay.remove();
                resultsContainer.remove();
            });
 
            document.body.appendChild(resultsContainer);
        }
 
        // Create scrollable content area
        const contentArea = document.createElement('div');
        contentArea.style.cssText = `
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        `;
        resultsContainer.appendChild(contentArea);
 
        // Create results grid with improved layout
        const resultsGrid = document.createElement('div');
        resultsGrid.className = 'batch-results-grid';
        resultsGrid.style.cssText = `
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 16px;
        `;
        contentArea.appendChild(resultsGrid);
 
        // Create progress indicator
        const progress = document.createElement('div');
        progress.className = 'generation-progress';
        progress.style.cssText = `
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 8px 16px;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
            z-index: 10001;
        `;
        progress.innerHTML = `
            <div class="generation-progress-bar" style="
                height: 4px;
                background: #f0f0f0;
                border-radius: 2px;
                overflow: hidden;
            ">
                <div class="generation-progress-fill" style="
                    width: 0%;
                    height: 100%;
                    background: rgb(100, 48, 247);
                    transition: width 0.3s ease;
                "></div>
            </div>
            <div class="generation-progress-text" style="
                text-align: center;
                margin-top: 4px;
                font-size: 14px;
            ">Generating 0/${entries.length}</div>
        `;
        document.body.appendChild(progress);
 
        let completed = 0;
        const updateProgress = () => {
            completed++;
            const percentage = (completed / entries.length) * 100;
            progress.querySelector('.generation-progress-fill').style.width = `${percentage}%`;
            progress.querySelector('.generation-progress-text').textContent =
                `Generating ${completed}/${entries.length}`;
        };
 
        // Create result cards for each entry
        const resultCards = entries.map((entry, index) => {
            const card = document.createElement('div');
            card.className = 'result-card';
            card.style.cssText = `
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                overflow: hidden;
            `;
            card.innerHTML = `
                <div class="result-image-container" style="
                    aspect-ratio: ${entry.widthinput}/${entry.heightinput};
                    background: #f5f5f5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                    <div class="result-loading">${icons.loading}</div>
                </div>
                <div class="result-details" style="padding: 12px;">
                    ${Object.entries(entry).map(([key, value]) => `
                        <div class="result-field" style="margin-bottom: 8px;">
                            <div class="result-field-label" style="
                                font-size: 12px;
                                color: #666;
                                margin-bottom: 2px;
                            ">${key.charAt(0).toUpperCase() + key.slice(1)}</div>
                            <div class="result-field-value" style="
                                font-size: 14px;
                                word-break: break-word;
                            ">${value}</div>
                        </div>
                    `).join('')}
                </div>
            `;
            resultsGrid.appendChild(card);
            return card;
        });
 
        // Process all entries in parallel
        const results = await Promise.all(entries.map(async (entry, index) => {
            try {
                console.log(`Generating image ${index + 1} with inputs:`, entry);
 
                const requestBody = {
                    id: spellId,
                    version: "live",
                    inputs: {
                        ...entry,
                        heightinput: String(entry.heightinput),
                        widthinput: String(entry.widthinput)
                    },
                    glifRunIsPublic: !isPrivate
                };
 
                console.log('Request body:', requestBody);
 
                const response = await fetch("https://glif.app/api/run-glif", {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0',
                        'Accept': '*/*',
                        'Accept-Language': 'en-US,en;q=0.5',
                        'Content-Type': 'application/json',
                        'Sec-GPC': '1',
                        'Sec-Fetch-Dest': 'empty',
                        'Sec-Fetch-Mode': 'cors',
                        'Sec-Fetch-Site': 'same-origin',
                        'Priority': 'u=4'
                    },
                    referrer: `https://glif.app/@appelsiensam/glifs/${spellId}`,
                    mode: 'cors',
                    body: JSON.stringify(requestBody)
                });
 
                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('API error:', errorText);
                    throw new Error(`Generation failed: ${response.status} - ${errorText}`);
                }
 
                const reader = response.body.getReader();
                let imageUrl = null;
                let jsonData = '';
 
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
 
                    const chunk = new TextDecoder().decode(value);
                    console.log(`Chunk received for image ${index + 1}:`, chunk);
 
                    const lines = chunk.split('\n');
                    for (const line of lines) {
                        if (!line.trim().startsWith('data: ')) continue;
 
                        try {
                            const data = JSON.parse(line.slice(6));
 
                            // Check for image URL in various locations
                            const imageValue =
                                data.graphExecutionState?.finalOutput?.value ||
                                data.graphExecutionState?.nodes?.output1?.output?.value ||
                                data.graphExecutionState?.nodes?.image?.output?.value;
 
                            if (imageValue) {
                                imageUrl = imageValue;
                                console.log(`Found image URL for ${index + 1}:`, imageUrl);
 
                                // Update card with image immediately
                                const card = resultCards[index];
                                const container = card.querySelector('.result-image-container');
                                container.innerHTML = `<img src="${imageUrl}" class="result-image" style="
                                    max-width: 100%;
                                    height: auto;
                                    display: block;
                                " alt="Generated image ${index + 1}">`;
 
                                break;
                            }
 
                            // Check if generation is complete
                            if (data.graphExecutionState?.status === 'done') {
                                console.log(`Generation complete for ${index + 1}`);
                                break;
                            }
                        } catch (e) {
                            console.log('Parse error:', e);
                        }
                    }
 
                    if (imageUrl) break;
                }
 
                updateProgress();
                return { success: true, imageUrl, entry };
 
            } catch (error) {
                console.error(`Error generating image ${index + 1}:`, error);
 
                // Update card with error
                const card = resultCards[index];
                const container = card.querySelector('.result-image-container');
                container.innerHTML = `
                    <div class="result-error" style="
                        padding: 16px;
                        color: #e53935;
                        text-align: center;
                    ">
                        <div>Generation failed</div>
                        <div style="font-size: 12px; margin-top: 4px;">${error.message}</div>
                    </div>
                `;
 
                updateProgress();
                return { success: false, error: error.message, entry };
            }
        }));
 
        // Keep progress indicator for a moment before removing
        setTimeout(() => progress.remove(), 2000);
 
        const successfulResults = results.filter(r => r.success);
        console.log('Generation complete. Successful results:', successfulResults);
 
        return results;
    }
 
    // Display AI batch panel
    function displayAIBatchPanel() {
        const overlay = document.createElement('div');
        overlay.className = 'ai-batch-overlay';
 
        const panel = document.createElement('div');
        panel.className = 'ai-batch-panel';
 
        const header = document.createElement('div');
        header.className = 'ai-batch-header';
 
        const title = document.createElement('h2');
        title.textContent = 'Batch Generator';
 
        const closeButton = document.createElement('button');
        closeButton.className = 'ai-close-button';
        closeButton.innerHTML = icons.close;
        closeButton.addEventListener('click', () => {
            if (!panel.dataset.generating) {
                overlay.remove();
            } else {
                showToast('Please wait for generation to complete', 'warning');
            }
        });
 
        header.appendChild(title);
        header.appendChild(closeButton);
 
        const content = document.createElement('div');
        content.className = 'ai-batch-content';
 
        const amountField = document.createElement('div');
        amountField.className = 'ai-input-field';
 
        const amountLabel = document.createElement('label');
        amountLabel.className = 'ai-input-label';
        amountLabel.textContent = 'Number of Images';
 
        const amountInput = document.createElement('input');
        amountInput.type = 'number';
        amountInput.className = 'ai-input';
        amountInput.min = '1';
        amountInput.max = '100';
        amountInput.value = '1';
 
        amountField.appendChild(amountLabel);
        amountField.appendChild(amountInput);
 
        const contentField = document.createElement('div');
        contentField.className = 'ai-input-field';
 
        const contentLabel = document.createElement('label');
        contentLabel.className = 'ai-input-label';
        contentLabel.textContent = 'Description';
 
        const contentInput = document.createElement('textarea');
        contentInput.className = 'ai-input';
        contentInput.rows = 4;
        contentInput.placeholder = 'Describe what you want to generate...';
 
        contentField.appendChild(contentLabel);
        contentField.appendChild(contentInput);
 
        const generateButton = document.createElement('button');
        generateButton.className = 'ai-generate-button';
        generateButton.style.cssText = `
            width: 100%;
            padding: 12px;
            background: rgb(100 48 247);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 48px;
            transition: background-color 0.2s;
        `;
        generateButton.innerHTML = `${icons.generate}<span>Generate Images</span>`;
 
        const progressContainer = document.createElement('div');
        progressContainer.className = 'progress-container';
        progressContainer.style.display = 'none';
        progressContainer.innerHTML = `
            <div class="progress-bar">
                <div class="progress-fill" style="width: 0%"></div>
            </div>
            <div class="progress-info">
                <span class="progress-count">0/${amountInput.value}</span>
                <span class="progress-percentage">0%</span>
            </div>
            <div class="progress-message">Starting generation...</div>
        `;
 
        generateButton.addEventListener('click', async () => {
            const amount = parseInt(amountInput.value);
            const content = contentInput.value;
 
            if (!content) {
                showToast('Please describe the content you want to generate', 'error');
                return;
            }
 
            if (isNaN(amount) || amount < 1 || amount > 100) {
                showToast('Please enter a valid number of images (1-100)', 'error');
                return;
            }
 
            generateButton.disabled = true;
            generateButton.innerHTML = `${icons.loading}<span>Generating Prompts...</span>`;
 
            try {
                console.log('Fetching AI batch inputs...');
                const inputs = await fetchAIBatchInputs(amount, content);
                console.log('Received inputs:', inputs);
 
                if (inputs && inputs.length > 0) {
                    // Show review screen instead of generating immediately
                    displayReviewScreen(inputs, panel, {
                        amount,
                        content
                    });
                } else {
                    showToast('Failed to generate image prompts', 'error');
                    generateButton.disabled = false;
                    generateButton.innerHTML = `${icons.generate}<span>Generate Images</span>`;
                }
            } catch (error) {
                console.error('Batch generation error:', error);
                showToast('Failed to generate prompts: ' + error.message, 'error');
                generateButton.disabled = false;
                generateButton.innerHTML = `${icons.generate}<span>Generate Images</span>`;
            }
        });
 
        content.appendChild(amountField);
        content.appendChild(contentField);
        content.appendChild(generateButton);
        content.appendChild(progressContainer);
 
        panel.appendChild(header);
        panel.appendChild(content);
        overlay.appendChild(panel);
        document.body.appendChild(overlay);
    }
 
    // Display review screen
    function displayReviewScreen(entries, panel, originalInputs) {
        // Clear existing content
        const content = panel.querySelector('.ai-batch-content');
        content.innerHTML = '';
 
        // Create review container
        const reviewContainer = document.createElement('div');
        reviewContainer.className = 'review-container';
 
        // Add each entry for review
        entries.forEach((entry, index) => {
            const reviewItem = document.createElement('div');
            reviewItem.className = 'review-item';
 
            const header = document.createElement('div');
            header.className = 'review-item-header';
            header.innerHTML = `<span class="review-item-number">Image ${index + 1}</span>`;
 
            reviewItem.appendChild(header);
 
            // Add editable fields
            Object.entries(entry).forEach(([key, value]) => {
                const field = document.createElement('div');
                field.className = 'review-field';
 
                const label = document.createElement('div');
                label.className = 'review-field-label';
                label.textContent = key.charAt(0).toUpperCase() + key.slice(1);
 
                const input = document.createElement('input');
                input.className = 'review-field-input';
                input.type = 'text';
                input.value = value;
                input.dataset.index = index;
                input.dataset.field = key;
 
                // Update entries object when input changes
                input.addEventListener('input', (e) => {
                    entries[index][key] = e.target.value;
                });
 
                field.appendChild(label);
                field.appendChild(input);
                reviewItem.appendChild(field);
            });
 
            reviewContainer.appendChild(reviewItem);
        });
 
        // Add action buttons
        const actions = document.createElement('div');
        actions.className = 'review-actions';
 
        const backButton = document.createElement('button');
        backButton.className = 'review-button review-back';
        backButton.innerHTML = `<span>Back</span>`;
        backButton.addEventListener('click', () => {
            // Restore original panel content
            displayAIBatchPanel();
        });
 
        const generateButton = document.createElement('button');
        generateButton.className = 'review-button review-generate';
        generateButton.innerHTML = `${icons.generate}<span>Generate Images</span>`;
        generateButton.addEventListener('click', async () => {
            generateButton.disabled = true;
            generateButton.innerHTML = `${icons.loading}<span>Generating...</span>`;
 
            try {
                const results = await processBatchGeneration(entries);
                console.log('Generation complete:', results);
 
                const successCount = results.filter(r => r.success).length;
                showToast(`Successfully generated ${successCount} images`);
 
                if (successCount === 0) {
                    generateButton.disabled = false;
                    generateButton.innerHTML = `${icons.generate}<span>Generate Images</span>`;
                } else {
                    panel.closest('.ai-batch-overlay').remove();
                }
            } catch (error) {
                console.error('Generation error:', error);
                showToast('Failed to generate images: ' + error.message, 'error');
                generateButton.disabled = false;
                generateButton.innerHTML = `${icons.generate}<span>Generate Images</span>`;
            }
        });
 
        actions.appendChild(backButton);
        actions.appendChild(generateButton);
 
        content.appendChild(reviewContainer);
        content.appendChild(actions);
    }
 
    // Add the AI batch button to the page
    function addAIBatchButton() {
        const container = document.querySelector('form');
        if (!container) return;
 
        const button = document.createElement('button');
        button.className = 'ai-batch-button';
        button.style.cssText = `
            margin-top: 12px;
            padding: 8px 16px;
            background: rgb(100 48 247);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            height: 48px;
            transition: background-color 0.2s;
        `;
        button.innerHTML = `${icons.generate}<span>Batch Generator</span>`;
        button.addEventListener('click', (e) => {
            e.preventDefault();
            displayAIBatchPanel();
        });
 
        container.appendChild(button);
    }
 
    // Initialize
    function initialize() {
        injectStyles();
 
        // Wait for the form to be ready
        const observer = new MutationObserver((mutations, obs) => {
            if (document.querySelector('form')) {
                addAIBatchButton();
                obs.disconnect();
            }
        });
 
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
 
    // Start the script
    initialize();
})();