good use the OpenAI’s DALL·E / gpt-image-1

Generate a high-quality, realistic image of a plain unisex T-shirt on a clean, neutral background or worn by a gender-neutral model; the T-shirt must have soft lighting, natural folds, and visible fabric texture; apply the uploaded image as the shirt design and make it look naturally printed on the fabric by following the shirt’s wrinkles, lighting, and shadows; blend the design seamlessly so it appears part of the fabric, not pasted; preserve realistic shadows, highlights, and depth; the shirt color should be editable through the API to any selected color for user customization.


here is the API key: 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

.env.example

@@ -0,0 +1,14 @@
+```
+# OpenAI API Configuration
+OPENAI_API_KEY=your_openai_api_key_here
+
+# Server Configuration
+PORT=3000
+NODE_ENV=production
+
+# File Upload Configuration
+MAX_FILE_SIZE=10485760
+UPLOAD_DIR=uploads
+```
+
+Finally, let me update the meme.html to better handle the new functionality:

api/mockup-generator.js

@@ -0,0 +1,152 @@
+// This is a Node.js backend file for secure API handling
+// Place this in your backend server, not in the frontend
+
+const express = require('express');
+const { Configuration, OpenAIApi } = require('openai');
+const multer = require('multer');
+const fs = require('fs');
+const path = require('path');
+
+const router = express.Router();
+
+// Configure OpenAI - IMPORTANT: Store this in environment variables
+const configuration = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY, // Never expose API keys in frontend
+});
+
+const openai = new OpenAIApi(configuration);
+
+// Configure multer for file uploads
+const upload = multer({
+  dest: 'uploads/',
+  limits: {
+    fileSize: 10 * 1024 * 1024, // 10MB limit
+  },
+  fileFilter: (req, file, cb) => {
+    if (file.mimetype.startsWith('image/')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only image files are allowed'));
+    }
+  }
+});
+
+// Generate realistic T-shirt mockup endpoint
+router.post('/generate-mockup', upload.single('image'), async (req, res) => {
+  try {
+    const { caption, shirtColor = 'white' } = req.body;
+    const imagePath = req.file ? req.file.path : null;
+
+    if (!imagePath && !req.body.image) {
+      return res.status(400).json({ 
+        success: false, 
+        error: 'No image provided' 
+      });
+    }
+
+    let base64Image = req.body.image;
+    
+    // If file was uploaded, convert to base64
+    if (imagePath) {
+      const imageBuffer = fs.readFileSync(imagePath);
+      base64Image = imageBuffer.toString('base64');
+      // Clean up uploaded file
+      fs.unlinkSync(imagePath);
+    }
+
+    // Construct the detailed prompt for DALL-E
+    const prompt = `
+      Generate a high-quality, realistic photograph of a plain unisex T-shirt on a clean, neutral background.
+      The T-shirt must:
+      - Be ${shirtColor} colored
+      - Have soft, natural lighting with visible fabric texture
+      - Show natural folds and wrinkles in the fabric
+      - Have the following design seamlessly printed on it: "${caption}"
+      - The printed design should follow the shirt's wrinkles, lighting, and shadows naturally
+      - Blend the design so it appears part of the fabric, not pasted on
+      - Preserve realistic shadows, highlights, and depth
+      - Style: photorealistic, commercial product photography, high detail
+    `;
+
+    // Call DALL-E API
+    const response = await openai.createImage({
+      model: "dall-e-3",
+      prompt: prompt,
+      n: 1,
+      size: "1024x1024",
+      quality: "hd",
+      response_format: "url",
+    });
+
+    const imageUrl = response.data.data[0].url;
+
+    res.json({
+      success: true,
+      imageUrl: imageUrl,
+      message: 'Mockup generated successfully'
+    });
+
+  } catch (error) {
+    console.error('Mockup generation error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Failed to generate mockup: ' + error.message
+    });
+  }
+});
+
+// Alternative endpoint for when image is sent as base64
+router.post('/generate-mockup-base64', async (req, res) => {
+  try {
+    const { image, caption, shirtColor = 'white' } = req.body;
+
+    if (!image) {
+      return res.status(400).json({ 
+        success: false, 
+        error: 'No image provided' 
+      });
+    }
+
+    // Same DALL-E prompt as above
+    const prompt = `
+      Generate a high-quality, realistic photograph of a plain unisex T-shirt on a clean, neutral background.
+      The T-shirt must:
+      - Be ${shirtColor} colored
+      - Have soft, natural lighting with visible fabric texture
+      - Show natural folds and wrinkles in the fabric
+      - Have the user's uploaded image seamlessly printed on the chest area
+      - The printed design should follow the shirt's wrinkles, lighting, and shadows naturally
+      - Blend the design so it appears part of the fabric, not pasted on
+      - Preserve realistic shadows, highlights, and depth
+      - Include the text "${caption}" as part of the design if appropriate
+      - Style: photorealistic, commercial product photography, high detail
+    `;
+
+    // Call DALL-E API with image editing capability
+    const response = await openai.createImageEdit(
+      // Convert base64 to file buffer for API
+      Buffer.from(image.split(',')[1], 'base64'),
+      prompt,
+      null, // No mask needed for full image
+      1,
+      "1024x1024"
+    );
+
+    const imageUrl = response.data.data[0].url;
+
+    res.json({
+      success: true,
+      imageUrl: imageUrl,
+      message: 'Mockup generated successfully'
+    });
+
+  } catch (error) {
+    console.error('Mockup generation error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Failed to generate mockup: ' + error.message
+    });
+  }
+});
+
+module.exports = router;

meme.html

@@ -256,60 +256,154 @@ function generateMockCaptions() {
             });
 captionsContainer.classList.remove('hidden');
         }
-        function showMockup(caption) {
+        async function showMockup(caption) {
             if (!uploadedImage) return;
             
-            const tshirtImage = document.getElementById('tshirtImage');
-            const tshirtCaption = document.getElementById('tshirtCaption');
-            
-            // Set the image on the t-shirt
-            tshirtImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', uploadedImage);
+            mockupPlaceholder.classList.add('hidden');
+            mockupPreview.classList.remove('hidden');
             
-            // Set the caption with word wrap
-            const words = caption.split(' ');
-            const maxCharsPerLine = 15;
-            let lines = [];
-            let currentLine = '';
+            // Show loading state
+            mockupPreview.innerHTML = `
+                <div class="text-center py-8">
+                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-red-600 mx-auto mb-4"></div>
+                    <p class="text-gray-400 mb-2">Generating realistic T-shirt mockup...</p>
+                    <p class="text-gray-500 text-sm">Using AI to create a photorealistic design</p>
+                </div>
+            `;
             
-            words.forEach(word => {
-                if ((currentLine + word).length <= maxCharsPerLine) {
-                    currentLine += (currentLine ? ' ' : '') + word;
+            try {
+                const shirtColor = window.selectedShirtColor || 'white';
+                
+                // Call backend API for DALL-E generation
+                const response = await fetch('/api/generate-mockup', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        image: uploadedImage,
+                        caption: caption,
+                        shirtColor: shirtColor
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Failed to generate mockup');
+                }
+                
+                const data = await response.json();
+                
+                if (data.success && data.imageUrl) {
+                    // Display the generated realistic mockup
+                    mockupPreview.innerHTML = `
+                        <div class="space-y-4">
+                            <div class="relative rounded-lg overflow-hidden shadow-2xl">
+                                <img src="${data.imageUrl}" alt="T-shirt Mockup" class="w-full h-auto">
+                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+                                    <p class="text-white text-sm font-medium">${caption}</p>
+                                </div>
+                            </div>
+                            <div class="flex gap-2 justify-center">
+                                <button onclick="regenerateMockup('${caption}')" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition">
+                                    <i data-feather="refresh-cw" class="w-4 h-4 inline mr-1"></i>
+                                    Regenerate
+                                </button>
+                                <button onclick="downloadMockup('${data.imageUrl}')" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg text-sm transition">
+                                    <i data-feather="download" class="w-4 h-4 inline mr-1"></i>
+                                    Download
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    feather.replace();
                 } else {
-                    if (currentLine) lines.push(currentLine);
-                    currentLine = word;
+                    throw new Error(data.error || 'Generation failed');
                 }
-            });
-            if (currentLine) lines.push(currentLine);
-            
-            // Clear existing text elements
-            const mockupPreview = document.getElementById('mockupPreview');
-            const existingTexts = mockupPreview.querySelectorAll('text:not(#tshirtCaption)');
-            existingTexts.forEach(text => text.remove());
+            } catch (error) {
+                console.error('Mockup generation error:', error);
+                showNotification('Failed to generate realistic mockup. Using fallback preview.', 'warning');
+                // Fallback to SVG mockup if API fails
+                showFallbackMockup(caption);
+            }
+        }
+        
+        function regenerateMockup(caption) {
+            showMockup(caption);
+        }
+        
+        function downloadMockup(imageUrl) {
+            const link = document.createElement('a');
+            link.href = imageUrl;
+            link.download = 'tshirt-mockup.png';
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            const bgColor = type === 'warning' ? 'bg-yellow-600' : type === 'error' ? 'bg-red-600' : 'bg-green-600';
+            notification.className = `fixed top-20 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300`;
+            notification.innerHTML = `
+                <div class="flex items-center">
+                    <i data-feather="${type === 'warning' ? 'alert-triangle' : type === 'error' ? 'x-circle' : 'check-circle'}" class="w-5 h-5 mr-2"></i>
+                    <span>${message}</span>
+                </div>
+            `;
+            document.body.appendChild(notification);
+            feather.replace();
             
-            // Add new text elements for each line
-            const svg = mockupPreview.querySelector('svg');
-            const startY = lines.length === 1 ? 240 : (lines.length === 2 ? 235 : 230);
+            setTimeout(() => {
+                notification.style.transform = 'translateX(0)';
+            }, 100);
             
-            lines.forEach((line, index) => {
-                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                text.setAttribute('x', '150');
-                text.setAttribute('y', startY + (index * 15));
-                text.setAttribute('text-anchor', 'middle');
-                text.setAttribute('fill', 'white');
-                text.setAttribute('font-size', '12');
-                text.setAttribute('font-weight', 'bold');
-                text.setAttribute('font-family', 'Arial, sans-serif');
-                text.textContent = line;
-                svg.appendChild(text);
-            });
+            setTimeout(() => {
+                notification.style.transform = 'translateX(100%)';
+                setTimeout(() => {
+                    document.body.removeChild(notification);
+                }, 300);
+            }, 5000);
+        }
+function showFallbackMockup(caption) {
+            const tshirtImage = document.getElementById('tshirtImage');
+            const tshirtCaption = document.getElementById('tshirtCaption');
             
-            // Hide the original text element
-            tshirtCaption.style.display = 'none';
+            // Create the SVG fallback structure
+            mockupPreview.innerHTML = `
+                <svg width="300" height="350" viewBox="0 0 300 350" class="relative">
+                    <!-- T-Shirt Base -->
+                    <path d="M75 80 L75 40 L100 20 L120 30 L150 25 L180 30 L200 20 L225 40 L225 80 L200 100 L200 320 L100 320 L100 100 Z" 
+                          fill="#1a1a1a" stroke="#333" stroke-width="2"/>
+                    <!-- Neckline -->
+                    <ellipse cx="150" cy="40" rx="25" ry="20" fill="none" stroke="#333" stroke-width="2"/>
+                    <!-- Sleeves -->
+                    <path d="M75 80 L50 120 L40 180 L70 180 L100 100" fill="#1a1a1a" stroke="#333" stroke-width="2"/>
+                    <path d="M225 80 L250 120 L260 180 L230 180 L200 100" fill="#1a1a1a" stroke="#333" stroke-width="2"/>
+                    
+                    <!-- Design Area -->
+                    <defs>
+                        <clipPath id="designArea">
+                            <rect x="90" y="100" width="120" height="120" rx="5"/>
+                        </clipPath>
+                    </defs>
+                    <rect x="90" y="100" width="120" height="120" rx="5" fill="white" opacity="0.1"/>
+                    <g clip-path="url(#designArea)">
+                        <image id="tshirtImage" x="90" y="100" width="120" height="120" preserveAspectRatio="xMidYMid meet"/>
+                    </g>
+                </svg>
+                <div class="mt-4 p-4 bg-gray-800 rounded-lg">
+                    <p class="text-white text-center font-medium">${caption}</p>
+                </div>
+            `;
             
-            mockupPlaceholder.classList.add('hidden');
-            mockupPreview.classList.remove('hidden');
+            // Set the image on the t-shirt
+            const tshirtImg = document.getElementById('tshirtImage');
+            if (tshirtImg) {
+                tshirtImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', uploadedImage);
+            }
         }
-        function resetCaptions() {
+function resetCaptions() {
             captionsContainer.classList.add('hidden');
             noCaptions.classList.remove('hidden');
             mockupPlaceholder.classList.remove('hidden');