Upload folder using huggingface_hub

index.html

@@ -201,14 +201,13 @@
       box-shadow: var(--shadow-md);
     }
 
-    /* Distribution Preview (New Feature) */
+    /* Distribution Preview */
     .dist-preview {
       background: #f8fafc;
       border-radius: 8px;
       padding: 1rem;
       border: 1px solid var(--border-color);
       display: none;
-      /* Hidden by default */
       animation: slideDown 0.3s ease;
     }
 
@@ -366,7 +365,6 @@
       gap: 0.3rem;
     }
 
-    /* Specific style for single color badge to make it pop */
     .assigned-color.single-color-highlight {
       background-color: #ecfdf5;
       color: var(--success-color);
@@ -374,7 +372,7 @@
       border-radius: 4px;
       border: 1px solid #a7f3d0;
     }
-    
+
     .assigned-color.single-color-highlight::before {
       content: '';
       display: block;
@@ -459,32 +457,18 @@
 
     /* Animations */
     @keyframes slideDown {
-      from {
-        opacity: 0;
-        transform: translateY(-10px);
-      }
-
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
     @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-
-      to {
-        opacity: 1;
-      }
+      from { opacity: 0; }
+      to { opacity: 1; }
     }
 
     /* Responsive */
     @media (max-width: 1024px) {
-      main {
-        grid-template-columns: 1fr;
-      }
+      main { grid-template-columns: 1fr; }
     }
   </style>
 </head>
@@ -512,16 +496,14 @@
       <form id="generatorForm">
         <div class="form-group">
           <label for="productName">Product Name</label>
-          <input type="text" id="productName" placeholder="e.g. Bermuda Linho Feminina" required autocomplete="off">
-          <div class="helper-text"><i class="fa-solid fa-tag"></i> Include material, gender, and type.</div>
+          <input type="text" id="productName" placeholder="e.g. Bermuda Linho Feminina (Leve 3)" required autocomplete="off">
+          <div class="helper-text"><i class="fa-solid fa-tag"></i> Include material, gender, and bundle info.</div>
         </div>
 
         <div class="form-group">
           <label for="colors">Color Variants (Comma or Slash separated)</label>
-          <!-- Updated placeholder to show slash support -->
           <input type="text" id="colors" placeholder="e.g. Black, Grey / Dark Blue, Army Green" required autocomplete="off">
-          <div class="helper-text"><i class="fa-solid fa-palette"></i> List all available colors. Use commas or slashes (e.g., Red/Blue).
-          </div>
+          <div class="helper-text"><i class="fa-solid fa-palette"></i> List all available colors. Use commas or slashes.</div>
         </div>
 
         <button type="submit" class="btn-generate">
@@ -570,12 +552,13 @@
      * SHOOT COORDINATOR LOGIC
      * Role: Asset Coordinator
      * Goal: Distribute colors strictly across two categories.
-     * FIX: Improved parsing to handle comma OR slash separation.
+     * FIX 1: Improved parsing to handle comma OR slash separation.
+     * FIX 2: Force quantity to 1 for Single Variant shots (Phase 2), regardless of bundle size.
      */
 
     const TEMPLATES = {
       // --- CATEGORY A: MULTI-COLOR SHOTS ---
-      // Constraint: Must depict ALL colors.
+      // Constraint: Must depict ALL colors. Uses TOTAL_QUANTITY.
       AVALIACAO_ESPELHO: {
         title: "Review Mirror",
         type: "multi",
@@ -598,11 +581,11 @@
       },
 
       // --- CATEGORY B: SINGLE-COLOR SHOTS ---
-      // Constraint: Pick ONE color per shot. Cycle if needed.
+      // Constraint: Pick ONE color per shot. QUANTITY FORCED TO 1.
       DETALHE_1: {
         title: "Detail Shot 1 (Hand)",
         type: "single",
-        text: `DETALHE DO PRODUTO STRICT VISUAL MATCH TAKEN WITH IPHONE. 1:1 Square format. The subject is the EXACT "{{PRODUCT_NAME}}" in color {{ACTIVE_COLOR}}. A hand is gently pinching the fabric to display the texture and authentic stitching details. Extreme close-up focus on the material weave and construction. Natural sunlight, casual atmosphere, amateur raw photo style. DO NOT ALTER THE SILHOUETTE. --ar 1:1 --style raw --v 6.0`
+        text: `DETALHE DO PRODUTO STRICT VISUAL MATCH TAKEN WITH IPHONE. 1:1 Square format. The subject is the EXACT "{{PRODUCT_NAME}}" in color {{ACTIVE_COLOR}} (Qty: 1). A hand is gently pinching the fabric to display the texture and authentic stitching details. Extreme close-up focus on the material weave and construction. Natural sunlight, casual atmosphere, amateur raw photo style. DO NOT ALTER THE SILHOUETTE. --ar 1:1 --style raw --v 6.0`
       },
       DETALHE_2: {
         title: "Detail Shot 2 (Macro)",
@@ -623,7 +606,7 @@
       // Utility
       TEXTO_FOTO_PRINCIPAL: {
         title: "Main Photo Text Overlay",
-        type: "multi", // Usually applies to the main photo which has all colors
+        type: "multi", 
         text: `TEXTO FOTO PRINCIPAL 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. Simple composition, use of symmetry, shallow depth of field. Add bold, sharp graphic text overlays seamlessly integrated.`
       }
     };
@@ -665,8 +648,7 @@
         variables.TARGET_AUDIENCE = "Male";
       }
 
-      // Color Analysis - FIXED LOGIC
-      // Now splits by comma OR forward slash to handle inputs like "Red/Blue"
+      // Color Analysis - Split by comma OR slash
       const colorsArray = colorsStr.split(/[,\/]/).map(c => c.trim()).filter(c => c.length > 0);
       variables.COLORS_ARRAY = colorsArray;
       variables.COLOR_LIST = colorsArray.join(', ');
@@ -685,17 +667,23 @@
 
     // --- STRING SUBSTITUTION ---
 
-    function applySubstitutions(templateStr, variables, activeColor) {
+    function applySubstitutions(templateStr, variables, activeColor, type) {
       let result = templateStr;
 
       // Core Data
       result = result.replace(/{{PRODUCT_NAME}}/g, variables.PRODUCT_NAME);
       result = result.replace(/{{MATERIAL}}/g, variables.MATERIAL);
-      result = result.replace(/{{QUANTITY}}/g, variables.TOTAL_QUANTITY);
+
+      // Quantity Logic Override
+      // CRITICAL: If type is 'single', we force quantity to 1 to avoid showing piles/bundles in detail shots
+      let quantityToUse = variables.TOTAL_QUANTITY;
+      if (type === 'single') {
+        quantityToUse = 1;
+      }
+      result = result.replace(/{{QUANTITY}}/g, quantityToUse);
 
       // Color Logic
       result = result.replace(/{{ALL_COLORS}}/g, variables.COLOR_LIST);
-      // IMPORTANT: This replaces the placeholder with ONLY the specific single color assigned
       result = result.replace(/{{ACTIVE_COLOR}}/g, activeColor);
       
       // Legacy Cleanup
@@ -745,10 +733,9 @@
       // Assign Single Colors (Cycle Logic)
       let colorPointer = 0;
       const singleColorKeys = ['DETALHE_1', 'DETALHE_2', 'PESSOA_USANDO_1', 'PESSOA_USANDO_2'];
-      const singleColorAssignments = {}; // Map key -> color string
+      const singleColorAssignments = {}; 
 
       singleColorKeys.forEach(key => {
-        // Use modulo to cycle through colors if there are fewer colors than shots
         const assignedColor = vars.COLORS_ARRAY[colorPointer % vars.COLORS_ARRAY.length];
         singleColorAssignments[key] = assignedColor;
         distributionPlan.single.push({ key, color: assignedColor });
@@ -768,12 +755,14 @@
           <span class="dist-label">Multi-Variant Shots</span>
           <div class="color-chips">
             <span class="chip multi">${vars.COLORS_ARRAY.length} Colors</span>
+            <span class="chip" style="border:none; background:transparent;">(${vars.TOTAL_QUANTITY} units/shot)</span>
           </div>
         </div>
         <div class="dist-row">
           <span class="dist-label">Single-Variant Shots</span>
           <div class="color-chips">
-            ${distributionPlan.single.map(s => `<span class="chip">${s.color}</span>`).join('')}
+            <span class="chip single-color-highlight" style="border-color:var(--success-color); color:var(--success-color);">1 Unit/Shot</span>
+            <span class="chip" style="border:none; background:transparent;">(Forced Qty)</span>
           </div>
         </div>
       `;
@@ -791,11 +780,14 @@
         const badgeText = type === 'multi' ? 'Full Spectrum' : 'Single Variant';
         
         let colorDisplay;
+        let qtyInfo = "";
+        
         if (type === 'multi') {
            colorDisplay = `<span class="assigned-color" style="color:var(--accent-color)"><i class="fa-solid fa-palette"></i> ${vars.COLORS_ARRAY.length} Variants</span>`;
+           qtyInfo = `<span style="font-size:0.7rem; color:var(--text-secondary); margin-left:8px;">(${vars.TOTAL_QUANTITY} units)</span>`;
         } else {
-           // Highlight the single color specifically
            colorDisplay = `<span class="assigned-color single-color-highlight">${colorLabel}</span>`;
+           qtyInfo = `<span style="font-size:0.7rem; color:var(--success-color); margin-left:8px; font-weight:600;">(Qty: 1)</span>`;
         }
 
         card.innerHTML = `
@@ -804,6 +796,7 @@
               <span class="variant-badge ${badgeClass}">${badgeText}</span>
               <span class="card-title">${title}</span>
               ${colorDisplay}
+              ${qtyInfo}
             </div>
             <button class="btn-copy-single" onclick="copyToClipboard(this)" data-text="${encodeURIComponent(text)}">
               <i class="fa-regular fa-copy"></i> Copy
@@ -814,65 +807,11 @@
         return card;
       };
 
-      // Group 1: Multi-Variant
+      // Group 1: Multi-Variant (Pass 'multi' type)
       const group1 = document.createElement('div');
       group1.className = 'section-group';
       group1.innerHTML = `<div class="section-header"><i class="fa-solid fa-layer-group"></i> Phase 1: Full Spectrum Shots</div>`;
       
       multiColorKeys.forEach(key => {
         if(TEMPLATES[key]) {
-          // For multi, activeColor placeholder is irrelevant, but we pass the list just in case
-          const processed = applySubstitutions(TEMPLATES[key].text, vars, vars.COLOR_LIST);
-          group1.appendChild(createCard(key, TEMPLATES[key].title, processed, 'multi', vars.COLOR_LIST));
-          allGeneratedText.push(processed);
-        }
-      });
-      resultsContainer.appendChild(group1);
-
-      // Group 2: Single-Variant
-      const group2 = document.createElement('div');
-      group2.className = 'section-group';
-      group2.innerHTML = `<div class="section-header"><i class="fa-solid fa-user-tag"></i> Phase 2: Individual Variant Focus</div>`;
-
-      singleColorKeys.forEach(key => {
-        if(TEMPLATES[key]) {
-          // CRITICAL FIX: Pass the specific single color assigned to this key
-          const activeColor = singleColorAssignments[key];
-          const processed = applySubstitutions(TEMPLATES[key].text, vars, activeColor);
-          group2.appendChild(createCard(key, TEMPLATES[key].title, processed, 'single', activeColor));
-          allGeneratedText.push(processed);
-        }
-      });
-      resultsContainer.appendChild(group2);
-
-      // Setup Copy All
-      copyAllBtn.style.display = 'flex';
-      copyAllBtn.onclick = () => {
-        const allText = allGeneratedText.join('\n\n---\n\n');
-        navigator.clipboard.writeText(allText).then(() => showToast('All prompts copied!'));
-      };
-    });
-
-    // Utils
-    window.copyToClipboard = function(btn) {
-      const text = decodeURIComponent(btn.getAttribute('data-text'));
-      navigator.clipboard.writeText(text).then(() => {
-        const originalHTML = btn.innerHTML;
-        btn.innerHTML = `<i class="fa-solid fa-check"></i> Copied`;
-        setTimeout(() => {
-          btn.innerHTML = originalHTML;
-        }, 2000);
-      });
-    };
-
-    function showToast(msg) {
-      const toastMsg = document.getElementById('toastMessage');
-      toastMsg.textContent = msg;
-      const toast = document.getElementById('toast');
-      toast.classList.add('show');
-      setTimeout(() => toast.classList.remove('show'), 3000);
-    }
-  </script>
-</body>
-
-</html>
+          // Pass 'multi' as