Spaces:

eubottura
/

anycoder-e5487497

Running

App Files Files Community

eubottura commited on Jan 15

Commit

5b307fb

verified ·

1 Parent(s): e9b8425

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +100 -180

index.html CHANGED Viewed

@@ -4,16 +4,16 @@
 <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 {
       --bg-body: #0f172a;
       --bg-card: #1e293b;
       --bg-input: #334155;
       --text-main: #f8fafc;
       --text-muted: #94a3b8;
@@ -22,10 +22,13 @@
       --accent: #10b981;
       --danger: #ef4444;
       --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;
@@ -40,11 +43,13 @@
       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;
@@ -58,28 +63,34 @@
     .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;
       display: flex;
       align-items: center;
-      gap: 0.5rem;
     }
     .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 */
@@ -90,17 +101,17 @@
       width: 100%;
       padding: 2rem;
       display: grid;
-      grid-template-columns: 380px 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);
@@ -134,23 +145,24 @@
       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 {
@@ -158,11 +170,12 @@
       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;
@@ -170,19 +183,22 @@
       font-weight: 600;
       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 {
       background-color: var(--primary-hover);
     }
     button.btn-primary:active {
-      transform: scale(0.98);
     }
     /* Output Section */
@@ -202,11 +218,19 @@
     }
     .status-badge {
-      font-size: 0.875rem;
-      padding: 0.25rem 0.75rem;
       border-radius: 99px;
       background-color: var(--bg-input);
       color: var(--text-muted);
     }
     .grid {
@@ -222,16 +246,17 @@
       padding: 0;
       display: flex;
       flex-direction: column;
-      transition: transform 0.2s, box-shadow 0.2s;
       position: relative;
       overflow: hidden;
-      animation: fadeIn 0.5s ease-out;
     }
     .card:hover {
-      transform: translateY(-2px);
       box-shadow: var(--shadow);
-      border-color: var(--primary);
     }
     .card-header {
@@ -244,7 +269,7 @@
     }
     .card-title {
-      font-size: 0.85rem;
       font-weight: 700;
       color: var(--primary);
       text-transform: uppercase;
@@ -255,12 +280,13 @@
     }
     .card-type {
-      font-size: 0.7rem;
-      padding: 2px 6px;
       border-radius: 4px;
-      background: var(--bg-input);
       color: var(--text-muted);
       text-transform: uppercase;
     }
     .card-content {
@@ -274,6 +300,7 @@
       overflow-y: auto;
       background-color: rgba(0, 0, 0, 0.2);
       flex: 1;
     }
     .card-actions {
@@ -288,14 +315,15 @@
       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 {
@@ -312,6 +340,7 @@
       border: 2px dashed var(--border);
       border-radius: var(--radius);
       grid-column: 1 / -1;
     }
     .empty-icon {
@@ -329,18 +358,21 @@
       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;
@@ -353,7 +385,7 @@
       }
     }
-    /* Responsive */
     @media (max-width: 1024px) {
       main {
         grid-template-columns: 1fr;
@@ -361,7 +393,7 @@
       aside {
         position: static;
-        margin-bottom: 2rem;
       }
     }
@@ -377,11 +409,20 @@
       main {
         padding: 1rem;
       }
     }
-    /* Scrollbar styling */
     ::-webkit-scrollbar {
       width: 8px;
     }
     ::-webkit-scrollbar-track {
@@ -412,7 +453,7 @@
         <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>
@@ -465,10 +506,16 @@
     </section>
   </main>
-  <div id="toast" class="toast">Copied to clipboard!</div>
   <script>
-    // --- TEMPLATES (BLOCKS 1-9) ---
     const TEMPLATES = [
       {
         id: "detail_1",
@@ -526,7 +573,10 @@
       }
     ];
-    // --- STEP 1: VARIABLE EXTRACTION & PARSING ---
     function extractData(productNameInput, colorsInput) {
       let rawName = productNameInput.trim();
@@ -630,7 +680,10 @@
       };
     }
-    // --- STEP 2, 3, & 4: LOGIC, DISTRIBUTION & INJECTION ---
     function processTemplates(data) {
       let singleColorIndex = 0;
@@ -651,18 +704,13 @@
         // Rule A: Feature Adaptation (Deletion)
         if (!data.hasHighWaisted) {
-          // Remove "high-waisted", "high waist", "alta cintura"
-          // Using regex to handle word boundaries and spacing roughly
           text = text.replace(/\bhigh-waisted\b/gi, '');
           text = text.replace(/\bhigh waist\b/gi, 'waist');
           text = text.replace(/\balta cintura\b/gi, '');
-          // Cleanup double spaces resulting from removal
           text = text.replace(/\s+/g, ' ').trim();
         }
         if (!data.hasRibs) {
-          // Remove "vertical front seams", "nervuras", "ribs"
           text = text.replace(/vertical front seams/gi, '');
           text = text.replace(/nervuras/gi, '');
           text = text.replace(/ribs/gi, '');
@@ -683,7 +731,6 @@
           if (data.promoOffer) {
             text = `Ensure the promotional text "${data.promoOffer}". 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.`;
           } else {
-            // If no promo, display Product Name
             text = `Ensure the product name "${data.productName}" is clearly visible. 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.`;
           }
         }
@@ -696,9 +743,7 @@
         text = text.replace(/Bermuda Viena/g, data.productName);
         // 2. Material
-        // Replace "Linen and Cotton" first
         text = text.replace(/Linen and Cotton/gi, data.material);
-        // Handle individual fallbacks if material is singular
         if (data.material === 'Linen') text = text.replace(/\bCotton\b/gi, 'Linen');
         if (data.material === 'Cotton') text = text.replace(/\bLinen\b/gi, 'Cotton');
@@ -708,18 +753,10 @@
         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}`);
@@ -728,121 +765,4 @@
         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>

 <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.9</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 {
+      /* Color Palette - Modern Dark Theme */
       --bg-body: #0f172a;
       --bg-card: #1e293b;
+      --bg-card-hover: #263345;
       --bg-input: #334155;
       --text-main: #f8fafc;
       --text-muted: #94a3b8;
       --accent: #10b981;
       --danger: #ef4444;
       --border: #334155;
+      --border-hover: #475569;
+      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
       --radius: 12px;
+      --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }
+    /* Reset & Base */
     * {
       box-sizing: border-box;
       margin: 0;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
+      background-image: radial-gradient(circle at top right, #1e293b 0%, transparent 40%);
     }
     /* Header */
     header {
+      background-color: rgba(30, 41, 59, 0.8);
+      backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
       padding: 1rem 2rem;
       display: flex;
     .brand {
       font-size: 1.25rem;
       font-weight: 700;
+      background: linear-gradient(135deg, var(--primary), var(--accent));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       letter-spacing: -0.025em;
       display: flex;
       align-items: center;
+      gap: 0.75rem;
+    }
+    .brand svg {
+      color: var(--primary);
     }
     .anycoder-link {
       font-size: 0.875rem;
       color: var(--text-muted);
       text-decoration: none;
+      transition: var(--transition);
       border: 1px solid var(--border);
+      padding: 0.35rem 1rem;
       border-radius: 99px;
+      font-weight: 500;
     }
     .anycoder-link:hover {
       color: var(--primary);
       border-color: var(--primary);
+      background-color: rgba(59, 130, 246, 0.1);
     }
     /* Main Layout */
       width: 100%;
       padding: 2rem;
       display: grid;
+      grid-template-columns: 400px 1fr; /* Slightly wider sidebar for usability */
+      gap: 2.5rem;
+      align-items: start;
     }
     /* Sidebar / Inputs */
     aside {
       background-color: var(--bg-card);
       border-radius: var(--radius);
+      padding: 1.75rem;
       border: 1px solid var(--border);
       position: sticky;
       top: 6rem;
       box-shadow: var(--shadow);
       background-color: var(--bg-input);
       border: 1px solid var(--border);
       border-radius: 8px;
+      padding: 0.875rem 1rem;
       color: var(--text-main);
       font-family: inherit;
       font-size: 0.95rem;
+      transition: var(--transition);
     }
     textarea {
       resize: vertical;
+      min-height: 120px;
     }
     input:focus,
     textarea:focus {
       outline: none;
       border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+      background-color: #384659;
     }
     .helper-text {
       color: var(--text-muted);
       margin-top: 0.5rem;
       font-style: italic;
+      opacity: 0.8;
     }
     button.btn-primary {
       width: 100%;
+      padding: 1rem;
       background-color: var(--primary);
       color: white;
       border: none;
       font-weight: 600;
       font-size: 1rem;
       cursor: pointer;
+      transition: var(--transition);
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 0.5rem;
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
     }
     button.btn-primary:hover {
       background-color: var(--primary-hover);
+      transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
     }
     button.btn-primary:active {
+      transform: translateY(1px);
     }
     /* Output Section */
     }
     .status-badge {
+      font-size: 0.8rem;
+      padding: 0.3rem 0.8rem;
       border-radius: 99px;
       background-color: var(--bg-input);
       color: var(--text-muted);
+      font-weight: 500;
+      border: 1px solid var(--border);
+    }
+    .status-badge.success {
+      color: var(--accent);
+      border-color: rgba(16, 185, 129, 0.3);
+      background-color: rgba(16, 185, 129, 0.1);
     }
     .grid {
       padding: 0;
       display: flex;
       flex-direction: column;
+      transition: var(--transition);
       position: relative;
       overflow: hidden;
+      animation: fadeIn 0.5s ease-out forwards;
     }
     .card:hover {
+      transform: translateY(-4px);
       box-shadow: var(--shadow);
+      border-color: var(--border-hover);
+      background-color: var(--bg-card-hover);
     }
     .card-header {
     }
     .card-title {
+      font-size: 0.8rem;
       font-weight: 700;
       color: var(--primary);
       text-transform: uppercase;
     }
     .card-type {
+      font-size: 0.65rem;
+      padding: 2px 8px;
       border-radius: 4px;
+      background: rgba(255, 255, 255, 0.05);
       color: var(--text-muted);
       text-transform: uppercase;
+      border: 1px solid var(--border);
     }
     .card-content {
       overflow-y: auto;
       background-color: rgba(0, 0, 0, 0.2);
       flex: 1;
+      line-height: 1.5;
     }
     .card-actions {
       background-color: transparent;
       border: 1px solid var(--border);
       color: var(--text-muted);
+      padding: 0.4rem 1rem;
       border-radius: 6px;
       font-size: 0.8rem;
       cursor: pointer;
+      transition: var(--transition);
       display: flex;
       align-items: center;
+      gap: 0.5rem;
+      font-weight: 500;
     }
     .btn-copy:hover {
       border: 2px dashed var(--border);
       border-radius: var(--radius);
       grid-column: 1 / -1;
+      background-color: rgba(255, 255, 255, 0.01);
     }
     .empty-icon {
       color: #fff;
       padding: 0.75rem 1.5rem;
       border-radius: 8px;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
       transform: translateY(150%);
       transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       z-index: 1000;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
     }
     .toast.show {
       transform: translateY(0);
     }
+    /* Animations */
     @keyframes fadeIn {
       from {
         opacity: 0;
       }
     }
+    /* Responsive Design */
     @media (max-width: 1024px) {
       main {
         grid-template-columns: 1fr;
       aside {
         position: static;
+        width: 100%;
       }
     }
       main {
         padding: 1rem;
       }
+      .brand span {
+        display: none; /* Hide text on very small screens, keep logo */
+      }
+      .brand span:first-child {
+        display: block; /* Keep the svg visible */
+      }
     }
+    /* Custom Scrollbar */
     ::-webkit-scrollbar {
       width: 8px;
+      height: 8px;
     }
     ::-webkit-scrollbar-track {
         <path d="M12 12l-2-2"></path>
         <path d="M12 16l-2-2"></path>
       </svg>
+      <span>PromptGen AI v4.9</span>
     </div>
     <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with
       anycoder</a>
     </section>
   </main>
+  <div id="toast" class="toast">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+    Copied to clipboard!
+  </div>
   <script>
+    /**
+     * TEMPLATES (BLOCKS 1-9)
+     * Core definitions for the prompt generation logic.
+     */
     const TEMPLATES = [
       {
         id: "detail_1",
       }
     ];
+    /**
+     * STEP 1: VARIABLE EXTRACTION & PARSING
+     * Analyzes raw input strings to extract structured data.
+     */
     function extractData(productNameInput, colorsInput) {
       let rawName = productNameInput.trim();
       };
     }
+    /**
+     * STEP 2, 3, & 4: LOGIC, DISTRIBUTION & INJECTION
+     * Processes templates based on extracted data.
+     */
     function processTemplates(data) {
       let singleColorIndex = 0;
         // Rule A: Feature Adaptation (Deletion)
         if (!data.hasHighWaisted) {
           text = text.replace(/\bhigh-waisted\b/gi, '');
           text = text.replace(/\bhigh waist\b/gi, 'waist');
           text = text.replace(/\balta cintura\b/gi, '');
           text = text.replace(/\s+/g, ' ').trim();
         }
         if (!data.hasRibs) {
           text = text.replace(/vertical front seams/gi, '');
           text = text.replace(/nervuras/gi, '');
           text = text.replace(/ribs/gi, '');
           if (data.promoOffer) {
             text = `Ensure the promotional text "${data.promoOffer}". 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.`;
           } else {
             text = `Ensure the product name "${data.productName}" is clearly visible. 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.`;
           }
         }
         text = text.replace(/Bermuda Viena/g, data.productName);
         // 2. Material
         text = text.replace(/Linen and Cotton/gi, data.material);
         if (data.material === 'Linen') text = text.replace(/\bCotton\b/gi, 'Linen');
         if (data.material === 'Cotton') text = text.replace(/\bLinen\b/gi, 'Cotton');
         text = text.replace(/exactly 5 identical/g, `exactly ${data.totalQuantity} identical`);
         text = text.replace(/5 identical pairs/g, `${data.totalQuantity} identical pairs`);
+        // 4. Colors
         text = text.replace(/Green, Khaki, White, Black, and Beige/g, data.colorListString);
         text = text.replace(/Green \(Verde\), Khaki \(Cáki\), White \(Branco\), Black \(Preto\), and Beige/gi, data.colorListString);
         if (template.type === "SINGLE") {
            text = text.replace(/\bbeige color\b/gi, `${assignedColor} color`);
            text = text.replace(/\bnatural beige\b/gi, `natural ${assignedColor}`);
         return {
           id: template.id,
+          title: template.title