Upload folder using huggingface_hub

index.html

@@ -7,7 +7,9 @@
   <title>AI Prompt Gen | E-Commerce 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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+    rel="stylesheet">
   <style>
     :root {
       --bg-body: #0f172a;
@@ -219,6 +221,7 @@
       transition: transform 0.2s, box-shadow 0.2s;
       position: relative;
       overflow: hidden;
+      animation: fadeIn 0.5s ease-out;
     }
 
     .card:hover {
@@ -304,6 +307,7 @@
       color: var(--text-muted);
       border: 2px dashed var(--border);
       border-radius: var(--radius);
+      grid-column: 1 / -1;
     }
 
     .empty-icon {
@@ -370,18 +374,21 @@
         padding: 1rem;
       }
     }
-    
+
     /* Scrollbar styling */
     ::-webkit-scrollbar {
       width: 8px;
     }
+
     ::-webkit-scrollbar-track {
       background: transparent;
     }
+
     ::-webkit-scrollbar-thumb {
       background: var(--border);
       border-radius: 4px;
     }
+
     ::-webkit-scrollbar-thumb:hover {
       background: var(--text-muted);
     }
@@ -392,7 +399,15 @@
 
   <header>
     <div class="brand">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path><path d="M8.5 8.5v.01"></path><path d="M16 12l-2-2"></path><path d="M16 16l-2-2"></path><path d="M12 12l-2-2"></path><path d="M12 16l-2-2"></path></svg>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path>
+        <path d="M8.5 8.5v.01"></path>
+        <path d="M16 12l-2-2"></path>
+        <path d="M16 16l-2-2"></path>
+        <path d="M12 12l-2-2"></path>
+        <path d="M12 16l-2-2"></path>
+      </svg>
       PromptGen AI
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with
@@ -434,7 +449,7 @@
       </div>
 
       <div id="resultsGrid" class="grid">
-        <div class="empty-state" style="grid-column: 1 / -1;">
+        <div class="empty-state">
           <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>
@@ -453,7 +468,7 @@
         id: "detail_1",
         title: "DETALHE DO PRODUTO",
         type: "SINGLE",
-        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`
+        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, natural beige color. DO NOT ALTER THE SILHOUETTE OR DETAILS. --ar 1:1 --style raw --v 6.0`
       },
       {
         id: "detail_2",
@@ -477,13 +492,13 @@
         id: "mirror",
         title: "AVALIAÇÃO ESPELHO",
         type: "SINGLE",
-        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`
+        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, natural 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`
       },
       {
         id: "bed",
         title: "AVALIAÇÃO CAMA",
         type: "GLOBAL",
-        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`
+        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 Beige. STRICT 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`
       },
       {
         id: "main",
@@ -512,16 +527,11 @@
      */
     function extractData(productNameInput, colorsInput) {
       // 1. PRODUCT_NAME: Clean input
-      // Remove promotional text for the core name, but keep it for PROMOTIONAL_OFFER extraction
-      // However, the prompt says "PRODUCT_NAME: The core product name (cleaned of promotional text)."
-      // We need to extract promo text first, then remove it.
-      
       let rawName = productNameInput.trim();
       let promoOffer = null;
       let totalQuantity = 0;
 
       // Extract Promotional Offer (e.g., "Pague 3, Leve 5")
-      // Regex looks for "Pague X, Leve Y" variations
       const promoRegex = /pague\s*\d+\s*(?:,|e)?\s*leve\s*\d+/i;
       const promoMatch = rawName.match(promoRegex);
       
@@ -553,7 +563,7 @@
       };
 
       let material = 'Cotton'; // Default
-      const lowerInput = rawName.toLowerCase(); // Check raw input for material keywords
+      const lowerInput = rawName.toLowerCase();
 
       for (const [key, value] of Object.entries(materialMap)) {
         if (lowerInput.includes(key)) {
@@ -607,7 +617,6 @@
 
       const colorArray = rawColors.map(c => {
         const lowerC = c.toLowerCase();
-        // If it's already in the map, translate. Otherwise keep as is (assuming English or proper noun).
         return colorMap[lowerC] || c;
       });
 
@@ -679,8 +688,7 @@
 
         // 2. Replace Material
         // "Linen and Cotton", "linen and cotton", "Linen", "Cotton"
-        // We replace the specific blend mention first, then individual if needed, 
-        // but usually, we map the input material to the blend.
+        // We replace the specific blend mention first, then individual if needed
         const matRegex = /linen and cotton/gi;
         text = text.replace(matRegex, data.material);
         
@@ -694,4 +702,87 @@
         // 3. Replace Quantity
         // "5 pairs", "5 identical copies", "exactly 5 pairs"
         const qStr = data.totalQuantity.toString();
-        text = text.replace(/5 pairs/g,
+        text = text.replace(/5 pairs/g, `${qStr} pairs`);
+        text = text.replace(/exactly 5 copies/g, `exactly ${qStr} copies`);
+        text = text.replace(/exactly 5 pairs/g, `exactly ${qStr} pairs`);
+        text = text.replace(/specific 5 colors/g, `specific ${qStr} colors`);
+        text = text.replace(/5 identical copies/g, `${qStr} identical copies`);
+        text = text.replace(/display the following distinct colors: Green \(Verde\), Khaki \(Cáki\), White \(Branco\), Black \(Preto\), and Beige/g, `display the distinct colors: ${data.colorListString}`);
+
+        // 4. Replace Gender
+        // Replace "female model", "women's", "feminine hand"
+        if (data.gender === 'Male') {
+            text = text.replace(/female model/gi, 'male model');
+            text = text.replace(/women's/gi, "men's");
+            text = text.replace(/feminine hand/gi, 'masculine hand');
+        }
+
+        // 5. Replace Colors
+        // Replace specific color lists
+        const oldColorList = /Green, Khaki, White, Black, and Beige/g;
+        text = text.replace(oldColorList, data.colorListString);
+        
+        const oldColorList2 = /Green, Khaki, White, Black, and Bege/g;
+        text = text.replace(oldColorList2, data.colorListString);
+
+        const oldColorList3 = /Verde \(Green\), Cáqui \(Khaki\), Branco \(White\), Preto \(Black\), Beige/g;
+        // Create a mapped string for the Portuguese/English mix in the template
+        const mappedColorString = data.colorArray.map(c => {
+           // Simple mapping back for the specific template format or just use the list
+           return c; 
+        }).join(', ');
+        text = text.replace(oldColorList3, mappedColorString);
+
+        // Replace single color mentions for single items
+        if (template.type !== 'GLOBAL') {
+            text = text.replace(/natural beige color/g, `${assignedColor.toLowerCase()} color`);
+            text = text.replace(/beige color/g, `${assignedColor.toLowerCase()} color`);
+            // Replace standalone "beige" at end of sentence or description
+            text = text.replace(/, beige\./g, `, ${assignedColor}.`);
+            text = text.replace(/ is beige\./g, ` is ${assignedColor}.`);
+        }
+
+        return { ...template, content: text, generatedColor: assignedColor };
+      });
+    }
+
+    /**
+     * UI Functions
+     */
+    function renderResults(prompts) {
+      const grid = document.getElementById('resultsGrid');
+      const statusBadge = document.getElementById('statusBadge');
+
+      // Clear previous results
+      grid.innerHTML = '';
+
+      if (prompts.length === 0) {
+        grid.innerHTML = `
+          <div class="empty-state" style="grid-column: 1 / -1;">
+            <div class="empty-icon">⚡</div>
+            <h3>Sem resultados</h3>
+            <p>Não foi possível gerar prompts com os dados fornecidos.</p>
+          </div>`;
+        statusBadge.textContent = 'Erro';
+        return;
+      }
+
+      statusBadge.textContent = `${prompts.length} Prompts Gerados`;
+
+      prompts.forEach((prompt, index) => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.style.animationDelay = `${index * 0.05}s`;
+
+        card.innerHTML = `
+          <div class="card-header">
+            <div class="card-title">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              ${prompt.title}
+            </div>
+            <span class="card-type">${prompt.type}</span>
+          </div>
+          <div class="card-content">${prompt.content}</div>
+          <div class="card-actions">
+            <button class="btn-copy" onclick="copyToClipboard(this)">
+              <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