Spaces:

eubottura
/

anycoder-e5487497

Running

App Files Files Community

eubottura commited on Jan 15

Commit

66039ae

verified ·

1 Parent(s): efe4ac2

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +700 -714

index.html CHANGED Viewed

@@ -1,721 +1,707 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Prompt Generator | Variable Injection Specialist</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-body: #0f172a;
-            --bg-card: #1e293b;
-            --bg-input: #334155;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --primary: #3b82f6;
-            --primary-hover: #2563eb;
-            --accent: #10b981;
-            --border: #334155;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            --radius: 12px;
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-body);
-            color: var(--text-main);
-            line-height: 1.6;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-        /* Header */
-        header {
-            background-color: var(--bg-card);
-            border-bottom: 1px solid var(--border);
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        .brand {
-            font-size: 1.25rem;
-            font-weight: 700;
-            background: linear-gradient(to right, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.025em;
-        }
-        .anycoder-link {
-            font-size: 0.875rem;
-            color: var(--text-muted);
-            text-decoration: none;
-            transition: color 0.2s;
-            border: 1px solid var(--border);
-            padding: 0.25rem 0.75rem;
-            border-radius: 99px;
-        }
-        .anycoder-link:hover {
-            color: var(--primary);
-            border-color: var(--primary);
-        }
-        /* Main Layout */
-        main {
-            flex: 1;
-            max-width: 1400px;
-            margin: 0 auto;
-            width: 100%;
-            padding: 2rem;
-            display: grid;
-            grid-template-columns: 350px 1fr;
-            gap: 2rem;
-        }
-        /* Sidebar / Inputs */
-        aside {
-            background-color: var(--bg-card);
-            border-radius: var(--radius);
-            padding: 1.5rem;
-            border: 1px solid var(--border);
-            height: fit-content;
-            position: sticky;
-            top: 6rem;
-            box-shadow: var(--shadow);
-        }
-        h2 {
-            font-size: 1.1rem;
-            margin-bottom: 1.5rem;
-            color: var(--text-main);
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-        label {
-            display: block;
-            font-size: 0.875rem;
-            color: var(--text-muted);
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-        }
-        input, textarea {
-            width: 100%;
-            background-color: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 0.75rem 1rem;
-            color: var(--text-main);
-            font-family: inherit;
-            font-size: 0.95rem;
-            transition: all 0.2s ease;
-        }
-        textarea {
-            resize: vertical;
-            min-height: 100px;
-        }
-        input:focus, textarea:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-        }
-        .helper-text {
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            margin-top: 0.5rem;
-            font-style: italic;
-        }
-        button.btn-primary {
-            width: 100%;
-            padding: 0.875rem;
-            background-color: var(--primary);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-weight: 600;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: background-color 0.2s, transform 0.1s;
-        }
-        button.btn-primary:hover {
-            background-color: var(--primary-hover);
-        }
-        button.btn-primary:active {
-            transform: scale(0.98);
-        }
-        /* Output Section */
-        .output-container {
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-        }
-        .results-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .status-badge {
-            font-size: 0.875rem;
-            padding: 0.25rem 0.75rem;
-            border-radius: 99px;
-            background-color: var(--bg-input);
-            color: var(--text-muted);
-        }
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-            gap: 1.5rem;
-        }
-        .card {
-            background-color: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-            padding: 1.5rem;
-            display: flex;
-            flex-direction: column;
-            transition: transform 0.2s, box-shadow 0.2s;
-            position: relative;
-            overflow: hidden;
-        }
-        .card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow);
-            border-color: var(--primary);
-        }
-        .card-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 1rem;
-        }
-        .card-title {
-            font-size: 0.9rem;
-            font-weight: 700;
-            color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .card-content {
-            background-color: rgba(0, 0, 0, 0.2);
-            padding: 1rem;
-            border-radius: 8px;
-            font-family: 'Courier New', Courier, monospace;
-            font-size: 0.85rem;
-            color: #e2e8f0;
-            white-space: pre-wrap;
-            word-break: break-word;
-            max-height: 300px;
-            overflow-y: auto;
-            border: 1px solid rgba(255,255,255,0.05);
-        }
-        .card-actions {
-            margin-top: 1rem;
-            display: flex;
-            justify-content: flex-end;
-        }
-        .btn-copy {
-            background-color: transparent;
-            border: 1px solid var(--border);
-            color: var(--text-muted);
-            padding: 0.4rem 0.8rem;
-            border-radius: 6px;
-            font-size: 0.8rem;
-            cursor: pointer;
-            transition: all 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-        }
-        .btn-copy:hover {
-            background-color: var(--bg-input);
-            color: var(--text-main);
-            border-color: var(--text-muted);
-        }
-        /* Empty State */
-        .empty-state {
-            text-align: center;
-            padding: 4rem 2rem;
-            color: var(--text-muted);
-            border: 2px dashed var(--border);
-            border-radius: var(--radius);
-        }
-        .empty-icon {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-            opacity: 0.5;
-        }
-        /* Toast Notification */
-        .toast {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            background-color: var(--accent);
-            color: #fff;
-            padding: 0.75rem 1.5rem;
-            border-radius: 8px;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-            transform: translateY(150%);
-            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            z-index: 1000;
-            font-weight: 500;
-        }
-        .toast.show {
-            transform: translateY(0);
-        }
-        /* Responsive */
-        @media (max-width: 1024px) {
-            main {
-                grid-template-columns: 1fr;
-            }
-            aside {
-                position: static;
-                margin-bottom: 2rem;
-            }
-        }
-        @media (max-width: 600px) {
-            .grid {
-                grid-template-columns: 1fr;
-            }
-            header {
-                padding: 1rem;
-            }
-            main {
-                padding: 1rem;
-            }
-        }
-    </style>
 </head>
-<body>
-    <header>
-        <div class="brand">PromptGen AI</div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
-    </header>
-    <main>
-        <!-- Input Section -->
-        <aside>
-            <h2>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                Input Data
-            </h2>
-            <div class="form-group">
-                <label for="productName">Product Name</label>
-                <textarea id="productName" placeholder="e.g. Bermuda Viena Feminina em Algodão com Brinde"></textarea>
-                <p class="helper-text">Include material, gender, and quantity hints.</p>
-            </div>
-            <div class="form-group">
-                <label for="colorList">Color List</label>
-                <input type="text" id="colorList" placeholder="e.g. Green, Khaki, Beige, White">
-                <p class="helper-text">Separate colors with commas.</p>
-            </div>
-            <button class="btn-primary" id="generateBtn">Generate Prompts</button>
-        </aside>
-        <!-- Output Section -->
-        <section class="output-container">
-            <div class="results-header">
-                <h2>Generated Templates</h2>
-                <span class="status-badge" id="statusBadge">Waiting for input...</span>
-            </div>
-            <div id="resultsGrid" class="grid">
-                <div class="empty-state" style="grid-column: 1 / -1;">
-                    <div class="empty-icon">⚡</div>
-                    <h3>Ready to Generate</h3>
-                    <p>Enter the product details and click the generate button to create your prompt set.</p>
-                </div>
-            </div>
-        </section>
-    </main>
-    <div id="toast" class="toast">Copied to clipboard!</div>
-    <script>
-        // --- Constants & Templates ---
-        const TEMPLATES = [
-            {
-                title: "DETALHE DO PRODUTO",
-                content: `STRICT VISUAL MATCH TAKEN WITH IPHONE. 1:1 Square format. The subject is the EXACT "Bermuda Viena Feminina" in Linen and Cotton. The design must be IDENTICAL to the reference: high-waisted structure with precise vertical front seams (nervuras). A feminine hand is gently pinching the fabric on the front seam to display the exact ribbing detail and texture. Extreme close-up focus on the material weave and seam construction. Natural sunlight, casual Brazilian atmosphere, amateur raw photo style, beige color. DO NOT ALTER THE SILHOUETTE OR DETAILS. --ar 1:1 --style raw --v 6.0`
-            },
-            {
-                title: "DETALHE DO PRODUTO 2",
-                content: `Commercial macro photography, extreme close-up focus on fabric texture, women's high-waisted bermuda shorts made of premium linen and cotton blend, detailed visible front ribs/nervuras, natural beige color, soft diffused studio lighting to enhance fabric grain, tactile surface quality, shallow depth of field with bokeh neutral background, ultra-realistic, 8k resolution, shot on Sony A7R IV, 100mm macro lens, cinematic style, luxury e-commerce aesthetic, visible fiber details, no text, no watermark. --ar 4:5 --style raw --v 6.0`
-            },
-            {
-                title: "PESSOA USANDO",
-                content: `Square 1:1 photo taken on an iPhone, candid street photography style. A female model stands on a bright Brazilian street, neck down, wearing shorts that are an exact visual match to the reference image: High-waisted 'Bermuda Viena' made of Linen and Cotton. Key details: Prominent vertical front seams/ribs (nervuras frontais), structured high waist, and a textured natural fabric weave that looks like linen. The shorts fit is relaxed but tailored. The color is natural beige. The lighting is harsh natural sunlight typical of Brazil, emphasizing the fabric texture. Background is a blurred concrete wall or sidewalk. The shot is raw and unposed, focused on capturing the precise cut and design of the product.`
-            },
-            {
-                title: "PESSOA USANDO 2",
-                content: `A raw, candid square photo taken on an iPhone 15 Pro Max. STRICT VISUAL REPLICATION REQUIRED. The subject is wearing the EXACT 'Bermuda Viena Feminina' shorts. MUST FEATURE: High-waisted cut, distinctive vertical front ribs/nervuras seams running down the front, straight leg silhouette made of premium linen and cotton blend. The fabric texture is clearly visible, highlighting the natural earthy beige color and coarse weave. DO NOT ALTER THE DESIGN OR SILHOUETTE. Setting: Vibrant Brazilian urban street, textured white concrete wall, Portuguese stone sidewalk, intense midday sun casting sharp natural shadows. The vibe is effortless, tropical, and relaxed 'bem básico' style. High definition, authentic iPhone camera aesthetic, unposed, street photography style. --ar 1:1 --style raw --v 6.0`
-            },
-            {
-                title: "AVALIAÇÃO ESPELHO",
-                content: `Authentic Shopee-style customer review photo, raw vertical mirror selfie, 9:18 aspect ratio. A female model is standing in front of a bathroom mirror, framed from the neck up (no face visible, hiding face). She is wearing the EXACT "Bermuda Viena" high-waisted shorts. STRICT VISUAL FIDELITY: The shorts must feature the specific vertical front ribs/nervuras seams, linen and cotton fabric texture, beige color. The setting is a typical Brazilian home bathroom with natural ambient light. The image must look like a real amateur photo taken by a customer, realistic phone camera grain, showing the fit of the high waist and the straight leg cut. Candid, unposed, honest product demonstration. --ar 9:16 --style raw --v 6.0`
-            },
-            {
-                title: "AVALIAÇÃO CAMA",
-                content: `Authentic Brazilian Shopee customer review photo, raw vertical mobile shot, 9:16 aspect ratio. THE SCENE: A messy, unorganized pile of exactly 5 pairs of 'Bermuda Viena' shorts thrown casually across a bedroom bed. The shorts are fully unfolded and lying in a heap. COLOR CRITICAL: The pile must display the specific 5 colors from the product listing: Green, Khaki, White, Black, and Bege. STICT FIDELITY: Exact 'Bermuda Viena' model, high-waisted, vertical front ribs/nervuras, linen texture. LOGO: Brand tag visible. VIBE: Honest amateur photo, natural daylight, typical home setting, showing the variety of the purchase. --ar 9:16 --style raw --v 6.0`
-            },
-            {
-                title: "FOTO PRINCIPAL",
-                content: `Professional 1:1 square e-commerce product photograph featuring a charismatic, confident Brazilian woman standing behind a horizontal clothing rail. She has a warm, sun-kissed Brazilian complexion, natural hair texture, and distinctively Brazilian facial features. Her expression is authentic, engaging, and confident, with realistic human skin texture to avoid an artificial look. The rail displays exactly 5 identical pairs of "Bermuda Viena Feminina" shorts hanging perfectly flat, straight side-by-side, and FULLY UNCROPPED. STRICT DESIGN SPECIFICATIONS: The shorts must be exact replicas: high-waisted structure, distinctive vertical front ribs/nervuras seams, premium linen and cotton blend texture, straight leg cut. LOGO: A visible brand logo is present on the waistband or label of the shorts. COLOR PALETTE: Verde (Green), Cáqui (Khaki), Branco (White), Preto (Black), Beige. COMPOSITION: Hands gripping the rail, clear full view of all 5 shorts in the foreground without obstruction. BACKGROUND: Minimalist white studio backdrop, soft uniform lighting. Hyper-realistic texture focus, commercial catalog quality. --ar 1:1 --v 6.0 --style raw`
-            },
-            {
-                title: "TEXTO FOTO PRINCIPAL",
-                content: `Ensure the promotional text "Pague 3, Leve 5". Preserve exact original image position. Maintain flat lighting, no visible JPEG artifacts, Ultra-realistic, 8k resolution, photographic clarity, sharp focus, high fidelity textures, crisp details. Simple composition, use of symmetry, shallow depth of field, background blurred, leading lines created by clothes rack, no other objects, minimalist style. Add bold, sharp graphic text overlays seamlessly integrated without altering the photography subject.`
-            },
-            {
-                title: "SOMENTE O PRODUTO (PNG)",
-                content: `Professional product photography of exactly 5 identical copies of the source image product arranged in a tight horizontal row. COLOR PALETTE EXACT: The five shorts must display the following distinct colors: Green (Verde), Khaki (Cáki), White (Branco), Black (Preto), and Beige. The shorts are suspended in mid-air as if on invisible hangers, maintaining a stiff, perfectly straight structured shape. The legs are pressing tightly against each other with zero space or gaps between the items. NO HARDWARE: Absolutely no visible hangers, hooks, or strings, only the shorts floating. CRITICAL: The texture, fabric, stitching nervuras, and logo must be an exact duplication of the reference image provided. Product photography, pure white background, studio light. --ar 5:1 --style raw --iw 3`
-            }
-        ];
-        // --- Logic Functions ---
-        /**
-         * Step 1: Analyze Input 1 (INPUT_PRODUCT_NAME)
-         */
-        function analyzeProductName(input) {
-            // 1. PRODUCT_NAME: Clean input
-            // Remove common promotional suffixes for the core name if needed, but usually, the whole title is fine.
-            // The prompt implies extracting the core name. Let's clean trailing/leading whitespace.
-            const productName = input.trim();
-            // 2. MATERIAL: Identify keywords and translate
-            const materialMap = {
-                'algodão': 'Cotton',
-                'linho': 'Linen',
-                'poliéster': 'Polyester',
-                'seda': 'Silk',
-                'jeans': 'Denim',
-                'denim': 'Denim'
-            };
-            let material = 'Cotton'; // Default fallback or original if not found
-            const lowerInput = input.toLowerCase();
-            for (const [key, value] of Object.entries(materialMap)) {
-                if (lowerInput.includes(key)) {
-                    material = value;
-                    break;
-                }
-            }
-            // Construct blend string (e.g., "Linen and Cotton")
-            // Assuming simple detection. If multiple found, join them.
-            // For this specific task, the template asks for "Linen and Cotton".
-            // We will return the translated material. If "Algodão" is found -> "Cotton".
-            // The template has "Linen and Cotton". We will replace that specific string.
-            // If only one material is found, we might need to decide if we keep "and Cotton" or just use the found material.
-            // Constraint: "Replace 'Linen and Cotton' ... with {MATERIAL}".
-            // So if user enters "Bermuda de Seda", MATERIAL becomes "Silk".
-            // 3. TARGET_AUDIENCE
-            let gender = 'Female'; // Default
-            if (/masculina|masculino|homem|menino/i.test(input)) {
-                gender = 'Male';
-            }
-            // 4. GIVEAWAYS
-            const hasGiveaways = /brinde|bônus|presente|kit/i.test(input);
-            // 5. TOTAL_QUANTITY
-            let quantity = 0;
-            const explicitNumberMatch = input.match(/(?:pack|pack de|conjunto|kit)?\s*(\d+)\s*(?:unidades|pares|pcs|units)?/i);
-            if (explicitNumberMatch) {
-                quantity = parseInt(explicitNumberMatch[1], 10);
-            }
-            // If no explicit number, we rely on the color list length later.
-            // But we can store the logic here.
-            // Extract "Pay X Take Y" text for the overlay
-            // Pattern: "Pague X Leve Y"
-            const promoMatch = input.match(/pague\s*\d+\s*leve\s*\d+/i);
-            const promoText = promoMatch ? promoMatch[0] : null;
-            return {
-                productName,
-                material,
-                gender,
-                hasGiveaways,
-                quantity, // explicit number found
-                promoText
-            };
-        }
-        /**
-         * Step 2: Analyze Input 2 (INPUT_COLORS)
-         */
-        function analyzeColors(input) {
-            if (!input) return { list: [], first: '', formattedList: '' };
-            const colors = input.split(',').map(c => c.trim()).filter(c => c.length > 0);
-            // Format list: "Green, Khaki, White, Black, and Bege"
-            let formattedList = '';
-            if (colors.length === 1) {
-                formattedList = colors[0];
-            } else if (colors.length === 2) {
-                formattedList = `${colors[0]} and ${colors[1]}`;
-            } else {
-                const last = colors[colors.length - 1];
-                const rest = colors.slice(0, -1).join(', ');
-                formattedList = `${rest}, and ${last}`;
-            }
-            return {
-                list: colors,
-                first: colors[0] || '',
-                formattedList
-            };
-        }
-        /**
-         * Step 3: Substitution Execution & Step 4: Output Generation
-         */
-        function generatePrompts(productData, colorData) {
-            // Determine final quantity
-            let totalQuantity = productData.quantity;
-            if (totalQuantity === 0) {
-                totalQuantity = colorData.list.length > 0 ? colorData.list.length : 1;
-            }
-            // Quantity string replacements
-            const quantityString = totalQuantity.toString();
-            const pluralPairs = `${totalQuantity} pairs`;
-            const pluralCopies = `${totalQuantity} identical copies`;
-            const results = TEMPLATES.map(template => {
-                let text = template.content;
-                // 1. Replace Product Name
-                // Target: "Bermuda Viena Feminina"
-                text = text.replace(/Bermuda Viena Feminina/g, productData.productName);
-                text = text.replace(/'Bermuda Viena'/g, `'${productData.productName}'`); // Handle quotes in some templates
-                text = text.replace(/Bermuda Viena/g, productData.productName); // Fallback for partial matches
-                // 2. Replace Material
-                // Targets: "Linen and Cotton", "linen and cotton blend", "linen and cotton fabric"
-                // Strategy: Replace the main phrase "Linen and Cotton" and "linen and cotton"
-                // If the productData.material is just one word (e.g. "Silk"), replacing "Linen and Cotton" with "Silk" works.
-                const matRegex = /linen and cotton/gi;
-                text = text.replace(matRegex, productData.material);
-                // Handle "linen texture" or specific fabric mentions if strictly necessary,
-                // but the prompt specifically asked to replace "Linen and Cotton" (and variants like "linen and cotton blend").
-                const blendRegex = /linen and cotton blend/gi;
-                text = text.replace(blendRegex, `${productData.material} blend`);
-                // 3. Replace Color List
-                // Target: "Green, Khaki, White, Black, and Bege"
-                text = text.replace(/Green, Khaki, White, Black, and Bege/g, colorData.formattedList);
-                // Also replace the palette list in "FOTO PRINCIPAL": "Verde (Green), Cáqui (Khaki)..."
-                // This is harder to match generically, but we can try to replace the English part of that specific string.
-                // Or just rely on the main replacement. Let's try to be smart about the "COLOR PALETTE" line.
-                // Template: "Verde (Green), Cáqui (Khaki), Branco (White), Preto (Black), Beige."
-                // We don't have the Portuguese translation of user colors.
-                // Constraint: "Zero External Info". We cannot translate "Red" to "Vermelho".
-                // So we must replace the English list part or the whole line if we can.
-                // However, the prompt specifically said: "Replace the specific list 'Green, Khaki, White, Black, and Bege' with {COLOR_LIST}".
-                // This specific string appears in DETALHE DO PRODUTO and PESSOA USANDO 2.
-                // In FOTO PRINCIPAL, the list is "Verde (Green)...". We will replace the English portion inside it if possible,
-                // or just leave the non-specified parts as per "Strict Fidelity" to original formatting.
-                // Let's stick to the explicit replacement requested.
-                // 4. Replace Singular Color
-                // Target: "beige"
-                // This is tricky because "beige" might be inside "Verde (Green)...".
-                // We should use word boundaries or context.
-                // The prompt says: Replace the singular "beige" with {COLOR}.
-                // We'll replace " natural beige color" -> " natural [Color] color".
-                text = text.replace(/\bbeige\b/g, colorData.first);
-                // 5. Replace Quantity References
-                // Targets: "5 pairs", "5 identical copies", "Leve 5"
-                text = text.replace(/5 pairs/g, pluralPairs);
-                text = text.replace(/5 identical copies/g, pluralCopies);
-                // Specific replacement for "TEXTO FOTO PRINCIPAL"
-                if (template.title === "TEXTO FOTO PRINCIPAL") {
-                    // If we found a specific promo text like "Pague 3 Leve 5"
-                    if (productData.promoText) {
-                        text = text.replace(/"Pague 3, Leve 5"/g, `"${productData.promoText}"`);
-                        text = text.replace(/Pague 3, Leve 5/g, productData.promoText);
-                    } else {
-                        // Fallback if no specific promo text found but we have quantity
-                        // The prompt says: "Replace 'Leve 5' in 'TEXTO FOTO PRINCIPAL' with 'Leve {TOTAL_QUANTITY}'"
-                        text = text.replace(/Leve 5/g, `Leve ${quantityString}`);
-                        // Also update the "Pague X" part? If not found, we might keep it or assume Pague 3.
-                        // Let's update the "Pague 3" part to match the quantity logic if it's a "Pay X Take Y" deal implies quantity Y.
-                        // If user said "Pack de 10", promo might be "Pague 8 Leve 10". We can't invent the '8'.
-                        // So we only strictly follow "Replace Leve 5".
-                    }
-                } else {
-                    // General replacement for other templates
-                    text = text.replace(/Leve 5/g, `Leve ${quantityString}`);
-                }
-                // Replace "exactly 5 pairs"
-                text = text.replace(/exactly 5 pairs/g, `exactly ${pluralPairs}`);
-                text = text.replace(/exactly 5 identical/g, `exactly ${totalQuantity} identical`);
-                // 6. Gender Adaptation
-                if (productData.gender === 'Male') {
-                    text = text.replace(/female model/g, 'male model');
-                    text = text.replace(/women's/g, "men's");
-                    text = text.replace(/\bwomen\b/g, 'men'); // careful with "women's" already handled
-                    text = text.replace(/\bwoman\b/g, 'man');
-                    text = text.replace(/feminine hand/g, 'masculine hand');
-                    text = text.replace(/Brazilian woman/g, 'Brazilian man');
-                    text = text.replace(/A female model/g, 'A male model');
-                }
-                return {
-                    title: template.title,
-                    content: text
-                };
-            });
-            return results;
-        }
-        // --- UI Interactions ---
-        const generateBtn = document.getElementById('generateBtn');
-        const productNameInput = document.getElementById('productName');
-        const colorListInput = document.getElementById('colorList');
-        const resultsGrid = document.getElementById('resultsGrid');
-        const statusBadge = document.getElementById('statusBadge');
-        const toast = document.getElementById('toast');
-        function showToast(message) {
-            toast.textContent = message;
-            toast.classList.add('show');
-            setTimeout(() => {
-                toast.classList.remove('show');
-            }, 3000);
-        }
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text).then(() => {
-                showToast('Prompt copied to clipboard!');
-            }).catch(err => {
-                showToast('Failed to copy');
-            });
-        }
-        function renderResults(results) {
-            resultsGrid.innerHTML = '';
-            if (results.length === 0) {
-                resultsGrid.innerHTML = `<div class="empty-state" style="grid-column: 1 / -1;"><p>No results generated.</p></div>`;
-                return;
-            }
-            results.forEach((item, index) => {
-                const card = document.createElement('div');
-                card.className = 'card';
-                card.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
-                card.style.opacity = '0'; // For animation
-                const header = document.createElement('div');
-                header.className = 'card-header';
-                const title = document.createElement('div');
-                title.className = 'card-title';
-                title.textContent = item.title;
-                header.appendChild(title);
-                const content = document.createElement('div');
-                content.className = 'card-content';
-                content.textContent = item.content;
-                const actions = document.createElement('div');
-                actions.className = 'card-actions';
-                const copyBtn = document.createElement('button');
-                copyBtn.className = 'btn-copy';
-                copyBtn.innerHTML = `
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
-                    Copy
                 `;
-                copyBtn.onclick = () => copyToClipboard(item.content);
-                actions.appendChild(copyBtn);
-                card.appendChild(header);
-                card.appendChild(content);
-                card.appendChild(actions);
-                resultsGrid.appendChild(card);
-            });
-        }
-        generateBtn.addEventListener('click', () => {
-            const pName = productNameInput.value;
-            const cList = colorListInput.value;
-            if (!pName || !cList) {
-                showToast('Please fill in both fields.');
-                return;
-            }
-            // Generate
-            const pData = analyzeProductName(pName);

 <!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Prompt Generator | Variable Injection Specialist</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-body: #0f172a;
+      --bg-card: #1e293b;
+      --bg-input: #334155;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --primary: #3b82f6;
+      --primary-hover: #2563eb;
+      --accent: #10b981;
+      --border: #334155;
+      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      --radius: 12px;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background-color: var(--bg-body);
+      color: var(--text-main);
+      line-height: 1.6;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    /* Header */
+    header {
+      background-color: var(--bg-card);
+      border-bottom: 1px solid var(--border);
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .brand {
+      font-size: 1.25rem;
+      font-weight: 700;
+      background: linear-gradient(to right, var(--primary), var(--accent));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      letter-spacing: -0.025em;
+    }
+    .anycoder-link {
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      text-decoration: none;
+      transition: color 0.2s;
+      border: 1px solid var(--border);
+      padding: 0.25rem 0.75rem;
+      border-radius: 99px;
+    }
+    .anycoder-link:hover {
+      color: var(--primary);
+      border-color: var(--primary);
+    }
+    /* Main Layout */
+    main {
+      flex: 1;
+      max-width: 1400px;
+      margin: 0 auto;
+      width: 100%;
+      padding: 2rem;
+      display: grid;
+      grid-template-columns: 350px 1fr;
+      gap: 2rem;
+    }
+    /* Sidebar / Inputs */
+    aside {
+      background-color: var(--bg-card);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      border: 1px solid var(--border);
+      height: fit-content;
+      position: sticky;
+      top: 6rem;
+      box-shadow: var(--shadow);
+    }
+    h2 {
+      font-size: 1.1rem;
+      margin-bottom: 1.5rem;
+      color: var(--text-main);
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+    label {
+      display: block;
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+    }
+    input,
+    textarea {
+      width: 100%;
+      background-color: var(--bg-input);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.75rem 1rem;
+      color: var(--text-main);
+      font-family: inherit;
+      font-size: 0.95rem;
+      transition: all 0.2s ease;
+    }
+    textarea {
+      resize: vertical;
+      min-height: 100px;
+    }
+    input:focus,
+    textarea:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+    }
+    .helper-text {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-top: 0.5rem;
+      font-style: italic;
+    }
+    button.btn-primary {
+      width: 100%;
+      padding: 0.875rem;
+      background-color: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background-color 0.2s, transform 0.1s;
+    }
+    button.btn-primary:hover {
+      background-color: var(--primary-hover);
+    }
+    button.btn-primary:active {
+      transform: scale(0.98);
+    }
+    /* Output Section */
+    .output-container {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+    .results-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .status-badge {
+      font-size: 0.875rem;
+      padding: 0.25rem 0.75rem;
+      border-radius: 99px;
+      background-color: var(--bg-input);
+      color: var(--text-muted);
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+      gap: 1.5rem;
+    }
+    .card {
+      background-color: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      transition: transform 0.2s, box-shadow 0.2s;
+      position: relative;
+      overflow: hidden;
+    }
+    .card:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow);
+      border-color: var(--primary);
+    }
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 1rem;
+    }
+    .card-title {
+      font-size: 0.9rem;
+      font-weight: 700;
+      color: var(--primary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .card-content {
+      background-color: rgba(0, 0, 0, 0.2);
+      padding: 1rem;
+      border-radius: 8px;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 0.85rem;
+      color: #e2e8f0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 300px;
+      overflow-y: auto;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .card-actions {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: flex-end;
+    }
+    .btn-copy {
+      background-color: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      padding: 0.4rem 0.8rem;
+      border-radius: 6px;
+      font-size: 0.8rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+    .btn-copy:hover {
+      background-color: var(--bg-input);
+      color: var(--text-main);
+      border-color: var(--text-muted);
+    }
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: 4rem 2rem;
+      color: var(--text-muted);
+      border: 2px dashed var(--border);
+      border-radius: var(--radius);
+    }
+    .empty-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      opacity: 0.5;
+    }
+    /* Toast Notification */
+    .toast {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      background-color: var(--accent);
+      color: #fff;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      transform: translateY(150%);
+      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      z-index: 1000;
+      font-weight: 500;
+    }
+    .toast.show {
+      transform: translateY(0);
+    }
+    /* Animation */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    /* Responsive */
+    @media (max-width: 1024px) {
+      main {
+        grid-template-columns: 1fr;
+      }
+      aside {
+        position: static;
+        margin-bottom: 2rem;
+      }
+    }
+    @media (max-width: 600px) {
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      header {
+        padding: 1rem;
+      }
+      main {
+        padding: 1rem;
+      }
+    }
+  </style>
 </head>
+<body>
+  <header>
+    <div class="brand">PromptGen AI</div>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with
+      anycoder</a>
+  </header>
+  <main>
+    <!-- Input Section -->
+    <aside>
+      <h2>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+        </svg>
+        Dados de Entrada
+      </h2>
+      <div class="form-group">
+        <label for="productName">Nome do Produto</label>
+        <textarea id="productName" placeholder="e.g. Bermuda Viena Feminina em Algodão com Brinde"></textarea>
+        <p class="helper-text">Inclua material, gênero e dicas de quantidade.</p>
+      </div>
+      <div class="form-group">
+        <label for="colorList">Lista de Cores</label>
+        <input type="text" id="colorList" placeholder="e.g. Green, Khaki, Beige, White">
+        <p class="helper-text">Separe as cores com vírgulas.</p>
+      </div>
+      <button class="btn-primary" id="generateBtn">Gerar Prompts</button>
+    </aside>
+    <!-- Output Section -->
+    <section class="output-container">
+      <div class="results-header">
+        <h2>Templates Gerados</h2>
+        <span class="status-badge" id="statusBadge">Aguardando entrada...</span>
+      </div>
+      <div id="resultsGrid" class="grid">
+        <div class="empty-state" style="grid-column: 1 / -1;">
+          <div class="empty-icon">⚡</div>
+          <h3>Pronto para Gerar</h3>
+          <p>Insira os detalhes do produto e clique no botão para criar seu conjunto de prompts.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <div id="toast" class="toast">Copiado para a área de transferência!</div>
+  <script>
+    // --- Constants & Templates ---
+    const TEMPLATES = [
+      {
+        title: "DETALHE DO PRODUTO",
+        content: `STRICT VISUAL MATCH TAKEN WITH IPHONE. 1:1 Square format. The subject is the EXACT "Bermuda Viena Feminina" in Linen and Cotton. The design must be IDENTICAL to the reference: high-waisted structure with precise vertical front seams (nervuras). A feminine hand is gently pinching the fabric on the front seam to display the exact ribbing detail and texture. Extreme close-up focus on the material weave and seam construction. Natural sunlight, casual Brazilian atmosphere, amateur raw photo style, beige color. DO NOT ALTER THE SILHOUETTE OR DETAILS. --ar 1:1 --style raw --v 6.0`
+      },
+      {
+        title: "DETALHE DO PRODUTO 2",
+        content: `Commercial macro photography, extreme close-up focus on fabric texture, women's high-waisted bermuda shorts made of premium linen and cotton blend, detailed visible front ribs/nervuras, natural beige color, soft diffused studio lighting to enhance fabric grain, tactile surface quality, shallow depth of field with bokeh neutral background, ultra-realistic, 8k resolution, shot on Sony A7R IV, 100mm macro lens, cinematic style, luxury e-commerce aesthetic, visible fiber details, no text, no watermark. --ar 4:5 --style raw --v 6.0`
+      },
+      {
+        title: "PESSOA USANDO",
+        content: `Square 1:1 photo taken on an iPhone, candid street photography style. A female model stands on a bright Brazilian street, neck down, wearing shorts that are an exact visual match to the reference image: High-waisted 'Bermuda Viena' made of Linen and Cotton. Key details: Prominent vertical front seams/ribs (nervuras frontais), structured high waist, and a textured natural fabric weave that looks like linen. The shorts fit is relaxed but tailored. The color is natural beige. The lighting is harsh natural sunlight typical of Brazil, emphasizing the fabric texture. Background is a blurred concrete wall or sidewalk. The shot is raw and unposed, focused on capturing the precise cut and design of the product.`
+      },
+      {
+        title: "PESSOA USANDO 2",
+        content: `A raw, candid square photo taken on an iPhone 15 Pro Max. STRICT VISUAL REPLICATION REQUIRED. The subject is wearing the EXACT 'Bermuda Viena Feminina' shorts. MUST FEATURE: High-waisted cut, distinctive vertical front ribs/nervuras seams running down the front, straight leg silhouette made of premium linen and cotton blend. The fabric texture is clearly visible, highlighting the natural earthy beige color and coarse weave. DO NOT ALTER THE DESIGN OR SILHOUETTE. Setting: Vibrant Brazilian urban street, textured white concrete wall, Portuguese stone sidewalk, intense midday sun casting sharp natural shadows. The vibe is effortless, tropical, and relaxed 'bem básico' style. High definition, authentic iPhone camera aesthetic, unposed, street photography style. --ar 1:1 --style raw --v 6.0`
+      },
+      {
+        title: "AVALIAÇÃO ESPELHO",
+        content: `Authentic Shopee-style customer review photo, raw vertical mirror selfie, 9:18 aspect ratio. A female model is standing in front of a bathroom mirror, framed from the neck up (no face visible, hiding face). She is wearing the EXACT "Bermuda Viena" high-waisted shorts. STRICT VISUAL FIDELITY: The shorts must feature the specific vertical front ribs/nervuras seams, linen and cotton fabric texture, beige color. The setting is a typical Brazilian home bathroom with natural ambient light. The image must look like a real amateur photo taken by a customer, realistic phone camera grain, showing the fit of the high waist and the straight leg cut. Candid, unposed, honest product demonstration. --ar 9:16 --style raw --v 6.0`
+      },
+      {
+        title: "AVALIAÇÃO CAMA",
+        content: `Authentic Brazilian Shopee customer review photo, raw vertical mobile shot, 9:16 aspect ratio. THE SCENE: A messy, unorganized pile of exactly 5 pairs of 'Bermuda Viena' shorts thrown casually across a bedroom bed. The shorts are fully unfolded and lying in a heap. COLOR CRITICAL: The pile must display the specific 5 colors from the product listing: Green, Khaki, White, Black, and Bege. STICT FIDELITY: Exact 'Bermuda Viena' model, high-waisted, vertical front ribs/nervuras, linen texture. LOGO: Brand tag visible. VIBE: Honest amateur photo, natural daylight, typical home setting, showing the variety of the purchase. --ar 9:16 --style raw --v 6.0`
+      },
+      {
+        title: "FOTO PRINCIPAL",
+        content: `Professional 1:1 square e-commerce product photograph featuring a charismatic, confident Brazilian woman standing behind a horizontal clothing rail. She has a warm, sun-kissed Brazilian complexion, natural hair texture, and distinctively Brazilian facial features. Her expression is authentic, engaging, and confident, with realistic human skin texture to avoid an artificial look. The rail displays exactly 5 identical pairs of "Bermuda Viena Feminina" shorts hanging perfectly flat, straight side-by-side, and FULLY UNCROPPED. STRICT DESIGN SPECIFICATIONS: The shorts must be exact replicas: high-waisted structure, distinctive vertical front ribs/nervuras seams, premium linen and cotton blend texture, straight leg cut. LOGO: A visible brand logo is present on the waistband or label of the shorts. COLOR PALETTE: Verde (Green), Cáqui (Khaki), Branco (White), Preto (Black), Beige. COMPOSITION: Hands gripping the rail, clear full view of all 5 shorts in the foreground without obstruction. BACKGROUND: Minimalist white studio backdrop, soft uniform lighting. Hyper-realistic texture focus, commercial catalog quality. --ar 1:1 --v 6.0 --style raw`
+      },
+      {
+        title: "TEXTO FOTO PRINCIPAL",
+        content: `Ensure the promotional text "Pague 3, Leve 5". Preserve exact original image position. Maintain flat lighting, no visible JPEG artifacts, Ultra-realistic, 8k resolution, photographic clarity, sharp focus, high fidelity textures, crisp details. Simple composition, use of symmetry, shallow depth of field, background blurred, leading lines created by clothes rack, no other objects, minimalist style. Add bold, sharp graphic text overlays seamlessly integrated without altering the photography subject.`
+      },
+      {
+        title: "SOMENTE O PRODUTO (PNG)",
+        content: `Professional product photography of exactly 5 identical copies of the source image product arranged in a tight horizontal row. COLOR PALETTE EXACT: The five shorts must display the following distinct colors: Green (Verde), Khaki (Cáki), White (Branco), Black (Preto), and Beige. The shorts are suspended in mid-air as if on invisible hangers, maintaining a stiff, perfectly straight structured shape. The legs are pressing tightly against each other with zero space or gaps between the items. NO HARDWARE: Absolutely no visible hangers, hooks, or strings, only the shorts floating. CRITICAL: The texture, fabric, stitching nervuras, and logo must be an exact duplication of the reference image provided. Product photography, pure white background, studio light. --ar 5:1 --style raw --iw 3`
+      }
+    ];
+    // --- Logic Functions ---
+    /**
+     * Step 1: Analyze Input 1 (INPUT_PRODUCT_NAME)
+     */
+    function analyzeProductName(input) {
+      // 1. PRODUCT_NAME: Clean input
+      const productName = input.trim();
+      // 2. MATERIAL: Identify keywords and translate
+      const materialMap = {
+        'algodão': 'Cotton',
+        'linho': 'Linen',
+        'poliéster': 'Polyester',
+        'seda': 'Silk',
+        'jeans': 'Denim',
+        'denim': 'Denim'
+      };
+      let material = 'Cotton'; // Default fallback or original if not found
+      const lowerInput = input.toLowerCase();
+      for (const [key, value] of Object.entries(materialMap)) {
+        if (lowerInput.includes(key)) {
+          material = value;
+          break;
+        }
+      }
+      // 3. TARGET_AUDIENCE
+      let gender = 'Female'; // Default
+      if (/masculina|masculino|homem|menino/i.test(input)) {
+        gender = 'Male';
+      }
+      // 4. GIVEAWAYS
+      const hasGiveaways = /brinde|bônus|presente|kit/i.test(input);
+      // 5. TOTAL_QUANTITY
+      let quantity = 0;
+      const explicitNumberMatch = input.match(/(?:pack|pack de|conjunto|kit)?\s*(\d+)\s*(?:unidades|pares|pcs|units)?/i);
+      if (explicitNumberMatch) {
+        quantity = parseInt(explicitNumberMatch[1], 10);
+      }
+      // Extract "Pay X Take Y" text for the overlay
+      const promoMatch = input.match(/pague\s*\d+\s*leve\s*\d+/i);
+      const promoText = promoMatch ? promoMatch[0] : null;
+      return {
+        productName,
+        material,
+        gender,
+        hasGiveaways,
+        quantity,
+        promoText
+      };
+    }
+    /**
+     * Step 2: Analyze Input 2 (INPUT_COLORS)
+     */
+    function analyzeColors(input) {
+      if (!input) return { list: [], first: '', formattedList: '' };
+      const colors = input.split(',').map(c => c.trim()).filter(c => c.length > 0);
+      // Format list: "Green, Khaki, White, Black, and Bege"
+      let formattedList = '';
+      if (colors.length === 1) {
+        formattedList = colors[0];
+      } else if (colors.length === 2) {
+        formattedList = `${colors[0]} and ${colors[1]}`;
+      } else {
+        const last = colors[colors.length - 1];
+        const rest = colors.slice(0, -1).join(', ');
+        formattedList = `${rest}, and ${last}`;
+      }
+      return {
+        list: colors,
+        first: colors[0] || '',
+        formattedList
+      };
+    }
+    /**
+     * Step 3: Substitution Execution & Step 4: Output Generation
+     */
+    function generatePrompts(productData, colorData) {
+      // Determine final quantity
+      let totalQuantity = productData.quantity;
+      if (totalQuantity === 0) {
+        totalQuantity = colorData.list.length > 0 ? colorData.list.length : 1;
+      }
+      // Quantity string replacements
+      const quantityString = totalQuantity.toString();
+      const pluralPairs = `${totalQuantity} pairs`;
+      const pluralCopies = `${totalQuantity} identical copies`;
+      const results = TEMPLATES.map(template => {
+        let text = template.content;
+        // 1. Replace Product Name
+        text = text.replace(/Bermuda Viena Feminina/g, productData.productName);
+        text = text.replace(/'Bermuda Viena'/g, `'${productData.productName}'`);
+        text = text.replace(/Bermuda Viena/g, productData.productName);
+        // 2. Replace Material
+        const matRegex = /linen and cotton/gi;
+        text = text.replace(matRegex, productData.material);
+        const blendRegex = /linen and cotton blend/gi;
+        text = text.replace(blendRegex, `${productData.material} blend`);
+        // 3. Replace Color List
+        text = text.replace(/Green, Khaki, White, Black, and Bege/g, colorData.formattedList);
+        // 4. Replace Singular Color
+        text = text.replace(/\bbeige\b/g, colorData.first);
+        // 5. Replace Quantity References
+        text = text.replace(/5 pairs/g, pluralPairs);
+        text = text.replace(/5 identical copies/g, pluralCopies);
+        if (template.title === "TEXTO FOTO PRINCIPAL") {
+          if (productData.promoText) {
+            text = text.replace(/"Pague 3, Leve 5"/g, `"${productData.promoText}"`);
+            text = text.replace(/Pague 3, Leve 5/g, productData.promoText);
+          } else {
+            text = text.replace(/Leve 5/g, `Leve ${quantityString}`);
+          }
+        } else {
+          text = text.replace(/Leve 5/g, `Leve ${quantityString}`);
+        }
+        text = text.replace(/exactly 5 pairs/g, `exactly ${pluralPairs}`);
+        text = text.replace(/exactly 5 identical/g, `exactly ${totalQuantity} identical`);
+        // 6. Gender Adaptation
+        if (productData.gender === 'Male') {
+          text = text.replace(/female model/g, 'male model');
+          text = text.replace(/women's/g, "men's");
+          text = text.replace(/\bwomen\b/g, 'men');
+          text = text.replace(/\bwoman\b/g, 'man');
+          text = text.replace(/feminine hand/g, 'masculine hand');
+          text = text.replace(/Brazilian woman/g, 'Brazilian man');
+          text = text.replace(/A female model/g, 'A male model');
+        }
+        return {
+          title: template.title,
+          content: text
+        };
+      });
+      return results;
+    }
+    // --- UI Interactions ---
+    const generateBtn = document.getElementById('generateBtn');
+    const productNameInput = document.getElementById('productName');
+    const colorListInput = document.getElementById('colorList');
+    const resultsGrid = document.getElementById('resultsGrid');
+    const statusBadge = document.getElementById('statusBadge');
+    const toast = document.getElementById('toast');
+    function showToast(message) {
+      toast.textContent = message;
+      toast.classList.add('show');
+      setTimeout(() => {
+        toast.classList.remove('show');
+      }, 3000);
+    }
+    function copyToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        showToast('Copiado para a área de transferência!');
+      }).catch(err => {
+        showToast('Falha ao copiar');
+      });
+    }
+    function renderResults(results) {
+      resultsGrid.innerHTML = '';
+      if (results.length === 0) {
+        resultsGrid.innerHTML = `<div class="empty-state" style="grid-column: 1 / -1;"><p>Nenhum resultado gerado.</p></div>`;
+        return;
+      }
+      results.forEach((item, index) => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
+        card.style.opacity = '0'; // For animation
+        const header = document.createElement('div');
+        header.className = 'card-header';
+        const title = document.createElement('div');
+        title.className = 'card-title';
+        title.textContent = item.title;
+        header.appendChild(title);
+        const content = document.createElement('div');
+        content.className = 'card-content';
+        content.textContent = item.content;
+        const actions = document.createElement('div');
+        actions.className = 'card-actions';
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'btn-copy';
+        copyBtn.innerHTML = `
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                    Copiar
                 `;
+        copyBtn.onclick = () => copyToClipboard(item.content);
+        actions.appendChild(copyBtn);
+        card.appendChild(header);
+        card.appendChild(content);
+        card.appendChild(actions);
+        resultsGrid.appendChild(card);
+      });
+    }
+    generateBtn.addEventListener('click', () => {
+      const pName = productNameInput.value;
+      const cList = colorListInput.value;
+      if (!pName || !cList) {
+        showToast('Por favor, preencha ambos os campos.');
+        return;
+      }
+      // 1. Analyze Data
+      const pData = analyzeProductName(pName);
+      const cData = analyzeColors(cList);
+      // 2. Generate Prompts
+      const results = generatePrompts(pData, cData);
+      // 3. Render Results
+      renderResults(results);
+      // 4. Update Status Badge
+      statusBadge.textContent = `${results.length} prompts gerados`;
+      statusBadge.style.color = 'var(--accent)';
+      statusBadge.style.backgroundColor = 'rgba(16, 185, 129, 0.1)';
+    });
+  </script>
+</body>
+</html>