Spaces:

eubottura
/

anycoder-e5487497

Running

App Files Files Community

eubottura commited on Jan 15

Commit

e9b8425

verified ·

1 Parent(s): 2b59679

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +155 -15

index.html CHANGED Viewed

@@ -4,10 +4,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Prompt Gen | E-Commerce Asset System v4.7</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">
   <style>
     :root {
@@ -170,6 +171,10 @@
       font-size: 1rem;
       cursor: pointer;
       transition: background-color 0.2s, transform 0.1s;
     }
     button.btn-primary:hover {
@@ -407,7 +412,7 @@
         <path d="M12 12l-2-2"></path>
         <path d="M12 16l-2-2"></path>
       </svg>
-      PromptGen AI v4.7
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with
       anycoder</a>
@@ -437,7 +442,10 @@
         <p class="helper-text">Use commas, slashes, or + to separate (e.g., Verde, Cáqui, White).</p>
       </div>
-      <button class="btn-primary" id="generateBtn">Generate Prompts</button>
     </aside>
     <!-- Output Section -->
@@ -680,16 +688,6 @@
           }
         }
-        if (template.id === 'detail_2' && data.hasGifts) {
-          // Logic: DELETE PROMOTIONAL_OFFER logic (use Product Name)
-          // Since Block 2 is a macro shot, it doesn't inherently have text.
-          // We ensure the prompt focuses purely on the product material/name context.
-          // The prompt instruction says "Display only Product Name".
-          // We will append a clarification to ensure no promo text is implied if it were.
-          // (Since the base template doesn't have promo text, we leave it mostly as is,
-          // but we ensure we don't inject promo text later).
-        }
         // --- STEP 4: TEMPLATE INJECTION ---
         // 1. Product Name
@@ -705,4 +703,146 @@
         if (data.material === 'Cotton') text = text.replace(/\bLinen\b/gi, 'Cotton');
         // 3. Quantity
-        const

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Prompt Gen | E-Commerce Asset System v4.8</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">
   <style>
     :root {
       font-size: 1rem;
       cursor: pointer;
       transition: background-color 0.2s, transform 0.1s;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
     }
     button.btn-primary:hover {
         <path d="M12 12l-2-2"></path>
         <path d="M12 16l-2-2"></path>
       </svg>
+      PromptGen AI v4.8
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with
       anycoder</a>
         <p class="helper-text">Use commas, slashes, or + to separate (e.g., Verde, Cáqui, White).</p>
       </div>
+      <button class="btn-primary" id="generateBtn">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+        Generate Prompts
+      </button>
     </aside>
     <!-- Output Section -->
           }
         }
         // --- STEP 4: TEMPLATE INJECTION ---
         // 1. Product Name
         if (data.material === 'Cotton') text = text.replace(/\bLinen\b/gi, 'Cotton');
         // 3. Quantity
+        text = text.replace(/5 pairs/g, `${data.totalQuantity} pairs`);
+        text = text.replace(/exactly 5 pairs/g, `exactly ${data.totalQuantity} pairs`);
+        text = text.replace(/exactly 5 identical/g, `exactly ${data.totalQuantity} identical`);
+        text = text.replace(/5 identical pairs/g, `${data.totalQuantity} identical pairs`);
+        // 4. Colors (The complex replacement)
+        // We replace the hardcoded list in the templates with the actual list
+        // Hardcoded patterns found in templates: "Green, Khaki, White, Black, and Beige" or "Green (Verde), Khaki (Cáki)..."
+        // Simple replacement for the list format "Green, Khaki, White, Black, and Beige"
+        text = text.replace(/Green, Khaki, White, Black, and Beige/g, data.colorListString);
+        // Replacement for descriptive format "Green (Verde), Khaki (Cáki), White (Branco), Black (Preto), and Beige"
+        // This requires mapping back, but for simplicity we replace the whole segment with the generated list
+        text = text.replace(/Green \(Verde\), Khaki \(Cáki\), White \(Branco\), Black \(Preto\), and Beige/gi, data.colorListString);
+        // Generic single color replacement (Beige, beige color)
+        if (template.type === "SINGLE") {
+           text = text.replace(/\bbeige color\b/gi, `${assignedColor} color`);
+           text = text.replace(/\bnatural beige\b/gi, `natural ${assignedColor}`);
+           text = text.replace(/\bcolor is natural beige\b/gi, `color is natural ${assignedColor}`);
+        }
+        return {
+          id: template.id,
+          title: template.title,
+          type: template.type,
+          content: text
+        };
+      });
+    }
+    // --- UI RENDERING & INTERACTION ---
+    function renderResults(results) {
+      const grid = document.getElementById('resultsGrid');
+      const statusBadge = document.getElementById('statusBadge');
+      grid.innerHTML = ''; // Clear previous results
+      if (!results || results.length === 0) {
+        grid.innerHTML = `
+          <div class="empty-state">
+            <div class="empty-icon">⚡</div>
+            <h3>No Results</h3>
+            <p>Could not generate prompts. Check your input.</p>
+          </div>
+        `;
+        statusBadge.textContent = "Error";
+        statusBadge.style.color = "var(--danger)";
+        return;
+      }
+      statusBadge.textContent = `Generated ${results.length} prompts`;
+      statusBadge.style.color = "var(--accent)";
+      results.forEach((res, index) => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.style.animationDelay = `${index * 50}ms`; // Staggered animation
+        card.innerHTML = `
+          <div class="card-header">
+            <div class="card-title">
+              <svg width="14" height="14" 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>
+              ${res.title}
+            </div>
+            <span class="card-type">${res.type}</span>
+          </div>
+          <div class="card-content">${escapeHtml(res.content)}</div>
+          <div class="card-actions">
+            <button class="btn-copy" onclick="copyText('${res.id}')">
+              <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
+            </button>
+          </div>
+        `;
+        grid.appendChild(card);
+      });
+    }
+    // Helper to prevent XSS when displaying text
+    function escapeHtml(text) {
+      const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+      };
+      return text.replace(/[&<>"']/g, function(m) { return map[m]; });
+    }
+    // Global store for copy function
+    let generatedResults = [];
+    function copyText(id) {
+      const item = generatedResults.find(r => r.id === id);
+      if (item) {
+        navigator.clipboard.writeText(item.content).then(() => {
+          showToast();
+        }).catch(err => {
+          console.error('Failed to copy: ', err);
+        });
+      }
+    }
+    function showToast() {
+      const toast = document.getElementById('toast');
+      toast.classList.add('show');
+      setTimeout(() => {
+        toast.classList.remove('show');
+      }, 3000);
+    }
+    // --- EVENT LISTENERS ---
+    document.addEventListener('DOMContentLoaded', () => {
+      const generateBtn = document.getElementById('generateBtn');
+      const productNameInput = document.getElementById('productName');
+      const colorListInput = document.getElementById('colorList');
+      generateBtn.addEventListener('click', () => {
+        const pName = productNameInput.value;
+        const cList = colorListInput.value;
+        if (!pName.trim()) {
+          alert("Please enter a product name.");
+          return;
+        }
+        // Execute Logic
+        const data = extractData(pName, cList);
+        generatedResults = processTemplates(data); // Store for copy function
+        // Render
+        renderResults(generatedResults);
+      });
+    });
+  </script>
+</body>
+</html>