Spaces:

dodey917
/

t-shirt-ai-backend-server

Running

App Files Files Community

dodey917 commited on Nov 16, 2025

Commit

de208fe

verified ·

1 Parent(s): 1e37fa0

okay let use this code then:

Browse files

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI T-Shirt Designer</title>

<script src="https://cdn.tailwindcss.com"></script>

<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* Custom Styles for better visual appeal */
body {
font-family: 'Inter', sans-serif;
background-color: #0d0d0d;
}
.container-shadow {
box-shadow: 0 10px 30px rgba(255, 69, 0, 0.2);
}
.animate-spin-slow {
animation: spin 3s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.drag-active {
border-color: #f87171 !important; /* Tailwind red-400 */
background-color: rgba(239, 68, 68, 0.1); /* Light red background */
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">

<div class="max-w-4xl w-full bg-gray-900 rounded-3xl p-6 md:p-10 container-shadow border border-red-800/50">
<header class="text-center mb-10">
<h1 class="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-400 to-red-600 mb-2">
Wearable AI Art 🎨
</h1>
<p class="text-gray-400 text-lg">Turn your idea or uploaded graphic into a custom T-shirt mockup.</p>
</header>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">

<div class="space-y-6">

<div id="promptSection" class="bg-gray-800 p-5 rounded-2xl shadow-inner">
<label for="designPrompt" class="block text-red-400 font-semibold mb-2 flex items-center">
<i data-lucide="sparkles" class="w-5 h-5 mr-2"></i> Design Idea (Ignored if image is uploaded)
</label>
<textarea id="designPrompt" rows="3" placeholder="A minimalist, cyberpunk cat riding a skateboard through a neon city street."
class="w-full bg-gray-700 text-white border border-gray-600 rounded-xl p-3 focus:ring-red-500 focus:border-red-500 transition resize-none"></textarea>
<p class="text-sm text-gray-500 mt-2">Describe the graphic (or leave blank if uploading).</p>
</div>


<div class="bg-gray-800 p-5 rounded-2xl shadow-inner">
<label class="block text-red-400 font-semibold mb-2 flex items-center">
<i data-lucide="upload" class="w-5 h-5 mr-2"></i> Upload Your Graphic (Optional)
</label>
<div id="dropZone" class="border-2 border-dashed border-gray-600 rounded-xl p-4 text-center cursor-pointer hover:border-red-500 transition">
<input type="file" id="imageUpload" accept="image/png, image/jpeg" class="hidden">
<p id="dropZoneText" class="text-gray-400 text-sm">Drag & drop or <span class="text-red-400 font-medium">click to upload</span> (.png, .jpg max 5MB)</p>
<p id="fileNameDisplay" class="text-red-400 text-sm mt-1 hidden"></p>
</div>
</div>


<div class="bg-gray-800 p-5 rounded-2xl shadow-inner">
<label class="block text-red-400 font-semibold mb-3 flex items-center">
<i data-lucide="shirt" class="w-5 h-5 mr-2"></i> T-Shirt Color
</label>
<div id="colorSelector" class="flex flex-wrap gap-3">

</div>
<input type="hidden" id="selectedColor" value="white">
</div>

<button id="generateButton" onclick="generateTshirtMockup()"
class="w-full flex items-center justify-center px-6 py-4 bg-red-600 hover:bg-red-700 text-white font-bold text-xl rounded-full transition duration-300 transform hover:scale-105 shadow-lg shadow-red-500/50"
>
<span id="buttonText">Generate Mockup</span>
<i data-lucide="image" id="buttonIcon" class="w-6 h-6 ml-2"></i>
</button>
</div>


<div class="bg-gray-800 rounded-2xl p-5 flex flex-col items-center justify-center min-h-[400px]">
<div id="mockupContainer" class="w-full max-w-sm aspect-square relative flex items-center justify-center rounded-xl overflow-hidden bg-gray-700/50">
<img id="mockupImage" src="https://placehold.co/1024x1024/ffffff/9ca3af?text=Design+Preview"
onerror="this.onerror=null; this.src='https://placehold.co/1024x1024/27272a/9ca3af?text=Load+Error'"
alt="AI Generated T-Shirt Mockup" class="w-full h-full object-cover transition-opacity duration-500 opacity-100 rounded-xl">

<div id="loadingIndicator" class="absolute inset-0 bg-gray-900/80 flex flex-col items-center justify-center hidden">
<i data-lucide="loader-circle" class="w-10 h-10 text-red-500 animate-spin-slow mb-4"></i>
<p class="text-white font-medium">Generating Design...</p>
<p class="text-sm text-gray-400 mt-1">This can take up to 30 seconds.</p>
</div>

<div id="errorMessage" class="absolute inset-0 bg-red-900/80 flex flex-col items-center justify-center hidden p-4 text-center rounded-xl">
<i data-lucide="alert-triangle" class="w-10 h-10 text-red-300 mb-4"></i>
<p class="text-white font-medium" id="errorText">Error during generation.</p>
<p class="text-sm text-red-200 mt-1">Please try again or simplify your prompt.</p>
</div>
</div>
</div>
</div>


<div class="mt-8 pt-6 border-t border-gray-800 flex flex-col sm:flex-row justify-end gap-4">
<button onclick="downloadImage()" id="downloadButton" disabled
class="flex items-center justify-center px-4 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-full font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
<i data-lucide="download" class="w-5 h-5 mr-2"></i> Download Design
</button>
</div>
</div>

<script>
// --- API Configuration and Core Functions ---
const apiKey = ""; // API key will be provided by the Canvas environment

// Switched to gemini-2.5-flash-image-preview for image composition/editing tasks
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`;

// Utility: Exponential backoff for reliable API calls
async function fetchWithRetry(url, options, maxRetries = 5) {
for (let i = 0; i < maxRetries; i++) {
try {
const response = await fetch(url, options);
if (response.ok) {
return response.json();
}

let errorMessage = `API call failed with status: ${response.status} ${response.statusText || ''}`;
try {
const errorData = await response.clone().json();
if (errorData.error && errorData.error.message) {
errorMessage = `API Error (${response.status}): ${errorData.error.message}`;
} else if (errorData.message) {
errorMessage = `API Error (${response.status}): ${errorData.message}`;
} else {
errorMessage = `API call failed with status: ${response.status}. Could not read error details.`;
}
} catch (jsonError) {
// Response body wasn't JSON, use statusText
}

if (response.status === 429 || (response.status >= 500 && response.status < 600)) {
const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
console.warn(`Request failed (${response.status}). Retrying in ${delay}ms... Details: ${errorMessage}`);
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}

throw new Error(errorMessage);

} catch (error) {
if (i === maxRetries - 1) throw error;
const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
console.error(`Attempt ${i + 1} failed: ${error.message}. Retrying in ${delay}ms...`);
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}

// --- UI Elements and State ---
const elements = {
promptInput: document.getElementById('designPrompt'),
selectedColorInput: document.getElementById('selectedColor'),
colorSelector: document.getElementById('colorSelector'),
generateButton: document.getElementById('generateButton'),
buttonText: document.getElementById('buttonText'),
buttonIcon: document.getElementById('buttonIcon'),
mockupImage: document.getElementById('mockupImage'),
loadingIndicator: document.getElementById('loadingIndicator'),
errorMessage: document.getElementById('errorMessage'),
errorText: document.getElementById

Files changed (5) hide show

.env +2 -4
index.html +97 -65
package.json +7 -19
server.js +2 -235
style.css +2 -27

.env CHANGED Viewed

@@ -1,6 +1,4 @@
 ```
-OPENAI_API_KEY=your_openai_api_key_here
-FRONTEND_URL=http://localhost:3000
-PORT=3001
-NODE_ENV=production
 ```

 ```
+# This file is no longer needed
+# API key should be provided in the Canvas environment
 ```

index.html CHANGED Viewed

@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI T-Shirt Designer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         /* Custom Styles for better visual appeal */
@@ -23,8 +26,8 @@
             to { transform: rotate(360deg); }
         }
         .drag-active {
-            border-color: #f87171 !important;
-            background-color: rgba(239, 68, 68, 0.1);
         }
     </style>
 </head>
@@ -33,22 +36,25 @@
     <div class="max-w-4xl w-full bg-gray-900 rounded-3xl p-6 md:p-10 container-shadow border border-red-800/50">
         <header class="text-center mb-10">
             <h1 class="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-400 to-red-600 mb-2">
-                Wearable AI Art 🎨 (Pro Mode)
             </h1>
-            <p class="text-gray-400 text-lg">Uses secure backend for realistic graphic placement.</p>
         </header>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
             <div class="space-y-6">
                 <div id="promptSection" class="bg-gray-800 p-5 rounded-2xl shadow-inner">
                     <label for="designPrompt" class="block text-red-400 font-semibold mb-2 flex items-center">
-                        <i data-lucide="sparkles" class="w-5 h-5 mr-2"></i> T-Shirt & Background Description
                     </label>
-                    <textarea id="designPrompt" rows="3" placeholder="A high-quality blank T-shirt in white, naturally draped on a simple, textured background."
                         class="w-full bg-gray-700 text-white border border-gray-600 rounded-xl p-3 focus:ring-red-500 focus:border-red-500 transition resize-none"></textarea>
-                    <p class="text-sm text-gray-500 mt-2">Describe the desired T-shirt color, style, and background.</p>
                 </div>
                 <div class="bg-gray-800 p-5 rounded-2xl shadow-inner">
                     <label class="block text-red-400 font-semibold mb-2 flex items-center">
                         <i data-lucide="upload" class="w-5 h-5 mr-2"></i> Upload Your Graphic (Optional)
@@ -60,23 +66,26 @@
                     </div>
                 </div>
                 <div class="bg-gray-800 p-5 rounded-2xl shadow-inner">
                     <label class="block text-red-400 font-semibold mb-3 flex items-center">
                         <i data-lucide="shirt" class="w-5 h-5 mr-2"></i> T-Shirt Color
                     </label>
                     <div id="colorSelector" class="flex flex-wrap gap-3">
-                        </div>
                     <input type="hidden" id="selectedColor" value="white">
                 </div>
                 <button id="generateButton" onclick="generateTshirtMockup()"
                     class="w-full flex items-center justify-center px-6 py-4 bg-red-600 hover:bg-red-700 text-white font-bold text-xl rounded-full transition duration-300 transform hover:scale-105 shadow-lg shadow-red-500/50"
                     >
-                    <span id="buttonText">Generate Realistic Mockup</span>
                     <i data-lucide="image" id="buttonIcon" class="w-6 h-6 ml-2"></i>
                 </button>
             </div>
             <div class="bg-gray-800 rounded-2xl p-5 flex flex-col items-center justify-center min-h-[400px]">
                 <div id="mockupContainer" class="w-full max-w-sm aspect-square relative flex items-center justify-center rounded-xl overflow-hidden bg-gray-700/50">
                     <img id="mockupImage" src="https://placehold.co/1024x1024/ffffff/9ca3af?text=Design+Preview"
@@ -85,19 +94,20 @@
                     <div id="loadingIndicator" class="absolute inset-0 bg-gray-900/80 flex flex-col items-center justify-center hidden">
                         <i data-lucide="loader-circle" class="w-10 h-10 text-red-500 animate-spin-slow mb-4"></i>
-                        <p class="text-white font-medium">Sending to AI for realistic placement...</p>
-                        <p class="text-sm text-gray-400 mt-1">This process can take up to 60 seconds.</p>
                     </div>
                     <div id="errorMessage" class="absolute inset-0 bg-red-900/80 flex flex-col items-center justify-center hidden p-4 text-center rounded-xl">
                         <i data-lucide="alert-triangle" class="w-10 h-10 text-red-300 mb-4"></i>
                         <p class="text-white font-medium" id="errorText">Error during generation.</p>
-                        <p class="text-sm text-red-200 mt-1">Please check your backend connection or simplify the prompt.</p>
                     </div>
                 </div>
             </div>
         </div>
         <div class="mt-8 pt-6 border-t border-gray-800 flex flex-col sm:flex-row justify-end gap-4">
             <button onclick="downloadImage()" id="downloadButton" disabled
                     class="flex items-center justify-center px-4 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-full font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
@@ -108,11 +118,11 @@
     <script>
         // --- API Configuration and Core Functions ---
-        // NOTE: The front-end now calls a secure backend proxy server,
-        // which must handle the OpenAI API calls (including the key).
-        const proxyApiUrl = 'https://tshirt-ai-backend.onrender.com/api/generate-mockup'; // Production backend endpoint
-// **CRITICAL SECURITY CHANGE:** Removed the hardcoded API key from the client-side.
         // Utility: Exponential backoff for reliable API calls
         async function fetchWithRetry(url, options, maxRetries = 5) {
             for (let i = 0; i < maxRetries; i++) {
@@ -122,14 +132,18 @@
                         return response.json();
                     }
-                    let errorMessage = `Proxy call failed with status: ${response.status} ${response.statusText || ''}`;
                     try {
                         const errorData = await response.clone().json();
-                        if (errorData.message) {
-                            errorMessage = `Proxy Error (${response.status}): ${errorData.message}`;
                         }
                     } catch (jsonError) {
-                        // Response body wasn't JSON
                     }
                     if (response.status === 429 || (response.status >= 500 && response.status < 600)) {
@@ -210,12 +224,11 @@
                 elements.fileNameDisplay.textContent = `Design uploaded: ${file.name}`;
                 elements.fileNameDisplay.classList.remove('hidden');
                 elements.dropZone.classList.add('border-red-500');
-                showNotification(`Graphic "${file.name}" ready for composition!`, 'bg-green-600', 'upload-cloud');
-                // Ensure a base prompt is set
-                if (!elements.promptInput.value.trim()) {
-                    elements.promptInput.value = `A clean, blank T-shirt in ${elements.selectedColorInput.value} color, naturally draped on a simple, textured background.`;
-                }
             };
             reader.onerror = () => {
                 showError('Error reading file.');
@@ -230,11 +243,8 @@
             elements.fileNameDisplay.textContent = '';
             elements.fileNameDisplay.classList.add('hidden');
             elements.dropZone.classList.remove('border-red-500');
-            // If the prompt was the default one, clear it.
-            const defaultPrompt = `A clean, blank T-shirt in ${elements.selectedColorInput.value} color, naturally draped on a simple, textured background.`;
-            if (elements.promptInput.value.trim() === defaultPrompt) {
-                elements.promptInput.value = '';
-            }
         }
         function setupUploadListeners() {
@@ -275,6 +285,7 @@
         // --- Initialization ---
         function renderColorButtons() {
             elements.colorSelector.innerHTML = shirtColors.map(color => `
                 <div class="relative w-8 h-8 rounded-full cursor-pointer transition-all duration-200 hover:ring-4 hover:ring-red-500"
@@ -289,6 +300,7 @@
             lucide.createIcons();
         }
         window.selectColor = function(colorName) {
             elements.selectedColorInput.value = colorName;
             shirtColors.forEach(color => {
@@ -299,6 +311,7 @@
                     checkIcon.classList.add('hidden');
                 }
             });
             const colorHex = shirtColors.find(c => c.name === colorName).hex.substring(1);
             elements.mockupImage.src = `https://placehold.co/1024x1024/${colorHex}/9ca3af?text=Design+Preview`;
             currentImageUrl = null;
@@ -310,14 +323,9 @@
         window.generateTshirtMockup = async function() {
             const promptText = elements.promptInput.value.trim();
             const shirtColor = elements.selectedColorInput.value;
-            const designBase64 = uploadedImageBase64;
-            if (!promptText) {
-                showNotification('Please describe the T-shirt and background.', 'bg-yellow-500', 'alert-circle');
-                return;
-            }
-            if (!designBase64 && !confirm("No uploaded image found. Continue to generate a design based on your text prompt only?")) {
                 return;
             }
@@ -325,49 +333,73 @@
             setLoading(true);
             hideError();
-            // Data payload sent to your backend proxy server
             const payload = {
-                prompt: promptText, // Describe the T-shirt scene
-                shirtColor: shirtColor,
-                designBase64: designBase64 // Uploaded image data (or null)
             };
             const options = {
                 method: 'POST',
-                // ONLY send Content-Type header to the backend proxy
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
             };
             try {
-                // Step 1: Call your secure backend proxy
-                const data = await fetchWithRetry(proxyApiUrl, options);
-                // The backend is expected to return a single data URL (base64) of the final composite image.
-                if (data.finalImageBase64) {
-                    const imageUrl = `data:image/png;base64,${data.finalImageBase64}`;
                     elements.mockupImage.src = imageUrl;
                     currentImageUrl = imageUrl;
                     elements.downloadButton.disabled = false;
-                    showNotification('Realistic mockup generated successfully!', 'bg-green-600', 'check-circle');
-                } else if (data.message) {
-                    // Backend returns an error message
-                    throw new Error(data.message);
                 } else {
-                    throw new Error('No valid image data received from the backend.');
                 }
             } catch (error) {
-                console.error("Mockup Generation Error:", error);
-                // If the error message is too long, truncate it
-                const displayMessage = error.message.includes("404") ?
-                    "Backend server not responding. Please try again in a moment." :
-                    error.message.includes("Failed to fetch") ?
-                    "Cannot connect to AI service. Please check your internet connection and try again." :
-                    `Generation failed: ${error.message.substring(0, 100)}`;
-showError(displayMessage);
                 elements.downloadButton.disabled = true;
             } finally {
                 // 2. UI State: Stop Loading
@@ -375,7 +407,7 @@ showError(displayMessage);
             }
         };
-        // --- Utility Functions (unchanged) ---
         function setLoading(isLoading) {
             elements.generateButton.disabled = isLoading;
@@ -385,7 +417,7 @@ showError(displayMessage);
                 elements.buttonIcon.classList.add('animate-spin');
             } else {
                 elements.loadingIndicator.classList.add('hidden');
-                elements.buttonText.textContent = 'Generate Realistic Mockup';
                 elements.buttonIcon.classList.remove('animate-spin');
             }
             lucide.createIcons();
@@ -398,6 +430,7 @@ showError(displayMessage);
         function showError(message) {
             elements.errorText.textContent = message;
             elements.errorMessage.classList.remove('hidden');
             const shirtColor = elements.selectedColorInput.value;
             const colorHex = shirtColors.find(c => c.name === shirtColor).hex.substring(1);
             elements.mockupImage.src = `https://placehold.co/1024x1024/${colorHex}/9ca3af?text=Design+Preview`;
@@ -449,6 +482,5 @@ showError(displayMessage);
             selectColor('white'); // Ensure the first color is selected
         });
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI T-Shirt Designer</title>
+    <!-- Load Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Load Lucide Icons -->
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         /* Custom Styles for better visual appeal */
             to { transform: rotate(360deg); }
         }
         .drag-active {
+            border-color: #f87171 !important; /* Tailwind red-400 */
+            background-color: rgba(239, 68, 68, 0.1); /* Light red background */
         }
     </style>
 </head>
     <div class="max-w-4xl w-full bg-gray-900 rounded-3xl p-6 md:p-10 container-shadow border border-red-800/50">
         <header class="text-center mb-10">
             <h1 class="text-4xl md:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-400 to-red-600 mb-2">
+                Wearable AI Art 🎨
             </h1>
+            <p class="text-gray-400 text-lg">Turn your idea or uploaded graphic into a custom T-shirt mockup.</p>
         </header>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Control Panel -->
             <div class="space-y-6">
+                <!-- Design Idea Input -->
                 <div id="promptSection" class="bg-gray-800 p-5 rounded-2xl shadow-inner">
                     <label for="designPrompt" class="block text-red-400 font-semibold mb-2 flex items-center">
+                        <i data-lucide="sparkles" class="w-5 h-5 mr-2"></i> Design Idea (Ignored if image is uploaded)
                     </label>
+                    <textarea id="designPrompt" rows="3" placeholder="A minimalist, cyberpunk cat riding a skateboard through a neon city street."
                         class="w-full bg-gray-700 text-white border border-gray-600 rounded-xl p-3 focus:ring-red-500 focus:border-red-500 transition resize-none"></textarea>
+                    <p class="text-sm text-gray-500 mt-2">Describe the graphic (or leave blank if uploading).</p>
                 </div>
+                <!-- Upload Design -->
                 <div class="bg-gray-800 p-5 rounded-2xl shadow-inner">
                     <label class="block text-red-400 font-semibold mb-2 flex items-center">
                         <i data-lucide="upload" class="w-5 h-5 mr-2"></i> Upload Your Graphic (Optional)
                     </div>
                 </div>
+                <!-- Color Selector -->
                 <div class="bg-gray-800 p-5 rounded-2xl shadow-inner">
                     <label class="block text-red-400 font-semibold mb-3 flex items-center">
                         <i data-lucide="shirt" class="w-5 h-5 mr-2"></i> T-Shirt Color
                     </label>
                     <div id="colorSelector" class="flex flex-wrap gap-3">
+                        <!-- Color options will be generated by JS -->
+                    </div>
                     <input type="hidden" id="selectedColor" value="white">
                 </div>
                 <button id="generateButton" onclick="generateTshirtMockup()"
                     class="w-full flex items-center justify-center px-6 py-4 bg-red-600 hover:bg-red-700 text-white font-bold text-xl rounded-full transition duration-300 transform hover:scale-105 shadow-lg shadow-red-500/50"
                     >
+                    <span id="buttonText">Generate Mockup</span>
                     <i data-lucide="image" id="buttonIcon" class="w-6 h-6 ml-2"></i>
                 </button>
             </div>
+            <!-- Mockup Display -->
             <div class="bg-gray-800 rounded-2xl p-5 flex flex-col items-center justify-center min-h-[400px]">
                 <div id="mockupContainer" class="w-full max-w-sm aspect-square relative flex items-center justify-center rounded-xl overflow-hidden bg-gray-700/50">
                     <img id="mockupImage" src="https://placehold.co/1024x1024/ffffff/9ca3af?text=Design+Preview"
                     <div id="loadingIndicator" class="absolute inset-0 bg-gray-900/80 flex flex-col items-center justify-center hidden">
                         <i data-lucide="loader-circle" class="w-10 h-10 text-red-500 animate-spin-slow mb-4"></i>
+                        <p class="text-white font-medium">Generating Design...</p>
+                        <p class="text-sm text-gray-400 mt-1">This can take up to 30 seconds.</p>
                     </div>
                     <div id="errorMessage" class="absolute inset-0 bg-red-900/80 flex flex-col items-center justify-center hidden p-4 text-center rounded-xl">
                         <i data-lucide="alert-triangle" class="w-10 h-10 text-red-300 mb-4"></i>
                         <p class="text-white font-medium" id="errorText">Error during generation.</p>
+                        <p class="text-sm text-red-200 mt-1">Please try again or simplify your prompt.</p>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Action Buttons -->
         <div class="mt-8 pt-6 border-t border-gray-800 flex flex-col sm:flex-row justify-end gap-4">
             <button onclick="downloadImage()" id="downloadButton" disabled
                     class="flex items-center justify-center px-4 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-full font-medium transition disabled:opacity-50 disabled:cursor-not-allowed">
     <script>
         // --- API Configuration and Core Functions ---
+        const apiKey = ""; // API key will be provided by the Canvas environment
+        // Switched to gemini-2.5-flash-image-preview for image composition/editing tasks
+        const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`;
         // Utility: Exponential backoff for reliable API calls
         async function fetchWithRetry(url, options, maxRetries = 5) {
             for (let i = 0; i < maxRetries; i++) {
                         return response.json();
                     }
+                    let errorMessage = `API call failed with status: ${response.status} ${response.statusText || ''}`;
                     try {
                         const errorData = await response.clone().json();
+                        if (errorData.error && errorData.error.message) {
+                            errorMessage = `API Error (${response.status}): ${errorData.error.message}`;
+                        } else if (errorData.message) {
+                            errorMessage = `API Error (${response.status}): ${errorData.message}`;
+                        } else {
+                            errorMessage = `API call failed with status: ${response.status}. Could not read error details.`;
                         }
                     } catch (jsonError) {
+                        // Response body wasn't JSON, use statusText
                     }
                     if (response.status === 429 || (response.status >= 500 && response.status < 600)) {
                 elements.fileNameDisplay.textContent = `Design uploaded: ${file.name}`;
                 elements.fileNameDisplay.classList.remove('hidden');
                 elements.dropZone.classList.add('border-red-500');
+                showNotification(`Graphic "${file.name}" ready for mockup!`, 'bg-green-600', 'upload-cloud');
+                // Disable text prompt when an image is uploaded
+                elements.promptInput.disabled = true;
+                elements.promptInput.value = 'Design uploaded. Generating a realistic mockup.';
             };
             reader.onerror = () => {
                 showError('Error reading file.');
             elements.fileNameDisplay.textContent = '';
             elements.fileNameDisplay.classList.add('hidden');
             elements.dropZone.classList.remove('border-red-500');
+            elements.promptInput.disabled = false;
+            elements.promptInput.value = ''; // Clear prompt if it was auto-set
         }
         function setupUploadListeners() {
         // --- Initialization ---
+        // 1. Render Color Buttons
         function renderColorButtons() {
             elements.colorSelector.innerHTML = shirtColors.map(color => `
                 <div class="relative w-8 h-8 rounded-full cursor-pointer transition-all duration-200 hover:ring-4 hover:ring-red-500"
             lucide.createIcons();
         }
+        // 2. Select Color Handler
         window.selectColor = function(colorName) {
             elements.selectedColorInput.value = colorName;
             shirtColors.forEach(color => {
                     checkIcon.classList.add('hidden');
                 }
             });
+            // Update the placeholder image to show the selected color immediately (simple mock)
             const colorHex = shirtColors.find(c => c.name === colorName).hex.substring(1);
             elements.mockupImage.src = `https://placehold.co/1024x1024/${colorHex}/9ca3af?text=Design+Preview`;
             currentImageUrl = null;
         window.generateTshirtMockup = async function() {
             const promptText = elements.promptInput.value.trim();
             const shirtColor = elements.selectedColorInput.value;
+            if (!uploadedImageBase64 && !promptText) {
+                showNotification('Please enter a design idea OR upload a graphic.', 'bg-yellow-500', 'alert-circle');
                 return;
             }
             setLoading(true);
             hideError();
+            const parts = [];
+            if (uploadedImageBase64) {
+                // Multimodal request (Image + Text)
+                const mimeType = uploadedImageBase64.match(/^data:(image\/\w+);base64,/)?.[1] || 'image/png';
+                const data = uploadedImageBase64.replace(/^data:image\/\w+;base64,/, '');
+                parts.push({
+                    inlineData: {
+                        mimeType: mimeType,
+                        data: data
+                    }
+                });
+                // Prompt for image-to-image/composition
+                const img2imgPrompt = `Create a high-quality, photorealistic T-shirt mockup. The T-shirt is a clean, blank ${shirtColor} color, draped naturally. Take the uploaded image and place it prominently and realistically on the center front of the T-shirt as the graphic design. The uploaded image is the only design element. Ensure the final result is a high-quality mockup showing the design correctly printed on the fabric.`;
+                parts.push({ text: img2imgPrompt });
+            } else {
+                // Standard text-to-image prompt
+                const descriptivePrompt = `Generate a high-resolution, photorealistic, and professional T-shirt mockup. The T-shirt is a clean, blank ${shirtColor} color, draped naturally on a minimalist background. The shirt prominently features a bold, high-quality, and centered graphic design based on the idea: "${promptText}". Focus on rendering the graphic design clearly on the shirt fabric, with photorealistic lighting and shadows. The graphic must be centered and appropriate for a t-shirt print.`;
+                parts.push({ text: descriptivePrompt });
+            }
             const payload = {
+                contents: [{ parts: parts }],
+                generationConfig: {
+                    responseModalities: ["IMAGE", "TEXT"]
+                }
             };
             const options = {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
             };
             try {
+                const data = await fetchWithRetry(apiUrl, options);
+                // The image data is nested in the parts array
+                const imagePart = data.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
+                if (imagePart && imagePart.inlineData && imagePart.inlineData.data) {
+                    const base64Data = imagePart.inlineData.data;
+                    const mimeType = imagePart.inlineData.mimeType || 'image/png';
+                    const imageUrl = `data:${mimeType};base64,${base64Data}`;
                     elements.mockupImage.src = imageUrl;
                     currentImageUrl = imageUrl;
                     elements.downloadButton.disabled = false;
+                    showNotification('Mockup generated successfully!', 'bg-green-600', 'check-circle');
                 } else {
+                    // Check for text response if image generation failed
+                    const textPart = data.candidates?.[0]?.content?.parts?.find(p => p.text);
+                    if (textPart) {
+                         // The model might send a rejection message in text if it can't generate the image
+                        throw new Error(`AI response (Text): ${textPart.text}`);
+                    }
+                    throw new Error('No valid image data received from the AI.');
                 }
             } catch (error) {
+                console.error("AI API Error:", error);
+                showError(`Generation failed: ${error.message}`);
                 elements.downloadButton.disabled = true;
             } finally {
                 // 2. UI State: Stop Loading
             }
         };
+        // --- Utility Functions ---
         function setLoading(isLoading) {
             elements.generateButton.disabled = isLoading;
                 elements.buttonIcon.classList.add('animate-spin');
             } else {
                 elements.loadingIndicator.classList.add('hidden');
+                elements.buttonText.textContent = 'Generate Mockup';
                 elements.buttonIcon.classList.remove('animate-spin');
             }
             lucide.createIcons();
         function showError(message) {
             elements.errorText.textContent = message;
             elements.errorMessage.classList.remove('hidden');
+            // Revert image to color placeholder on error
             const shirtColor = elements.selectedColorInput.value;
             const colorHex = shirtColors.find(c => c.name === shirtColor).hex.substring(1);
             elements.mockupImage.src = `https://placehold.co/1024x1024/${colorHex}/9ca3af?text=Design+Preview`;
             selectColor('white'); // Ensure the first color is selected
         });
     </script>
 </body>
+</html>

package.json CHANGED Viewed

@@ -1,28 +1,16 @@
 json
 {
-  "name": "tshirt-ai-backend",
   "version": "1.0.0",
-  "description": "Backend server for AI T-Shirt Designer with OpenAI integration",
-  "main": "server.js",
   "scripts": {
-    "start": "node server.js",
-    "dev": "nodemon server.js"
   },
-  "keywords": ["ai", "tshirt", "design", "openai", "dalle"],
   "author": "AI Designer",
   "license": "MIT",
-  "dependencies": {
-    "express": "^4.18.2",
-    "cors": "^2.8.5",
-    "multer": "^1.4.5-lts.1",
-    "openai": "^4.20.1",
-    "dotenv": "^16.3.1",
-    "sharp": "^0.32.6",
-    "axios": "^1.6.2"
-  },
-"devDependencies": {
-    "nodemon": "^3.0.1"
-  }
 }
 </html>

 json
 {
+  "name": "tshirt-ai-designer",
   "version": "1.0.0",
+  "description": "AI T-Shirt Designer with Gemini API integration",
+  "main": "index.html",
   "scripts": {
+    "start": "python -m http.server 8000",
+    "dev": "python -m http.server 8000"
   },
+  "keywords": ["ai", "tshirt", "design", "gemini", "mockup"],
   "author": "AI Designer",
   "license": "MIT",
+  "dependencies": {}
 }
 </html>

server.js CHANGED Viewed

@@ -1,236 +1,3 @@
-const express = require('express');
-const cors = require('cors');
-const multer = require('multer');
-const OpenAI = require('openai');
-const sharp = require('sharp');
-const path = require('path');
-require('dotenv').config();
-// Keep the server awake
-const http = require('http');
-setInterval(() => {
-    http.get('http://tshirt-ai-backend.onrender.com/api/health');
-}, 25 * 60 * 1000); // Ping every 25 minutes
-const app = express();
-const PORT = process.env.PORT || 3001;
-// Initialize OpenAI client
-const openai = new OpenAI({
-    apiKey: process.env.OPENAI_API_KEY,
-});
-// Middleware
-app.use(cors({
-    origin: ['http://localhost:3000', 'https://localhost:3000', 'http://127.0.0.1:3000', 'https://127.0.0.1:3000'],
-    credentials: true,
-    methods: ['GET', 'POST', 'OPTIONS'],
-    allowedHeaders: ['Content-Type', 'Authorization']
-}));
-app.use(express.json({ limit: '10mb' }));
-app.use(express.urlencoded({ extended: true, limit: '10mb' }));
-// Configure multer for file uploads
-const upload = multer({
-    storage: multer.memoryStorage(),
-    limits: {
-        fileSize: 10 * 1024 * 1024, // 10MB limit
-    },
-    fileFilter: (req, file, cb) => {
-        const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
-        if (allowedTypes.includes(file.mimetype)) {
-            cb(null, true);
-        } else {
-            cb(new Error('Invalid file type. Only JPEG, PNG, and WebP are allowed.'), false);
-        }
-    }
-});
-// Health check endpoint
-app.get('/api/health', (req, res) => {
-    res.json({
-        status: 'Server is running',
-        timestamp: new Date().toISOString(),
-        version: '1.0.0',
-        uptime: process.uptime()
-    });
-});
-// Root endpoint
-app.get('/', (req, res) => {
-    res.json({
-        message: 'T-Shirt AI Backend Server',
-        status: 'Running',
-        endpoints: {
-            health: '/api/health',
-            generate: '/api/generate-mockup'
-        }
-    });
-});
-// Main mockup generation endpoint
-app.post('/api/generate-mockup', async (req, res) => {
-    try {
-        const { prompt, shirtColor, designBase64 } = req.body;
-        if (!prompt) {
-            return res.status(400).json({
-                success: false,
-                message: 'Prompt is required'
-            });
-        }
-        console.log('Generating mockup with:', { prompt: prompt.substring(0, 100), shirtColor, hasDesign: !!designBase64 });
-        let finalPrompt = prompt;
-        // If there's a design, enhance the prompt
-        if (designBase64) {
-            finalPrompt += ` Create a realistic product photography of a ${shirtColor} T-shirt with the uploaded design printed on it. The design should look naturally integrated, not floating. Show proper fabric texture, shadows, and realistic lighting. The T-shirt should be displayed on a mannequin or flat lay with professional studio lighting.`;
-        } else {
-            finalPrompt += ` Create a high-quality product photography of a ${shirtColor} T-shirt. Show realistic fabric texture, proper folds, shadows, and professional studio lighting. Display it as if it's a real product photo for an e-commerce store.`;
-        }
-        // Enhanced prompt for better quality
-        finalPrompt += ' Photorealistic, 8k resolution, detailed, professional lighting, commercial photography, high quality, sharp focus.';
-        console.log('Enhanced prompt:', finalPrompt);
-        // Generate image using OpenAI DALL-E 3
-        const response = await openai.images.generate({
-            model: "dall-e-3",
-            prompt: finalPrompt,
-            n: 1,
-            size: "1024x1024",
-            quality: "hd",
-            style: "natural",
-            response_format: "b64_json"
-        });
-        if (!response.data || response.data.length === 0) {
-            throw new Error('No image generated from OpenAI');
-        }
-        const imageData = response.data[0].b64_json;
-        // If there's a design to composite, process it
-        if (designBase64 && imageData) {
-            try {
-                // This is a simplified composite operation
-                // In a production environment, you'd want more sophisticated image processing
-                const compositeImage = await compositeDesignOnTshirt(imageData, designBase64, shirtColor);
-                res.json({
-                    success: true,
-                    finalImageBase64: compositeImage,
-                    message: 'Mockup generated successfully with design'
-                });
-            } catch (compositeError) {
-                console.error('Composite error:', compositeError);
-                // Fallback to the generated image without composite
-                res.json({
-                    success: true,
-                    finalImageBase64: imageData,
-                    message: 'Mockup generated (design composite failed, using generated image)'
-                });
-            }
-        } else {
-            // Return the generated image as is
-            res.json({
-                success: true,
-                finalImageBase64: imageData,
-                message: 'Mockup generated successfully'
-            });
-        }
-    } catch (error) {
-        console.error('Error generating mockup:', error);
-        let errorMessage = 'Failed to generate mockup';
-        let statusCode = 500;
-        if (error.message.includes('Invalid API key')) {
-            errorMessage = 'Invalid OpenAI API key';
-            statusCode = 401;
-        } else if (error.message.includes('rate limit')) {
-            errorMessage = 'Rate limit exceeded. Please try again later.';
-            statusCode = 429;
-        } else if (error.message.includes('content policy')) {
-            errorMessage = 'Content policy violation. Please modify your prompt.';
-            statusCode = 400;
-        } else if (error.message.includes('insufficient credits')) {
-            errorMessage = 'Insufficient API credits. Please check your OpenAI account.';
-            statusCode = 402;
-        }
-        res.status(statusCode).json({
-            success: false,
-            message: errorMessage,
-            error: process.env.NODE_ENV === 'development' ? error.message : undefined
-        });
-    }
-});
-// Composite design on T-shirt (simplified version)
-async function compositeDesignOnTshirt(tshirtBase64, designBase64, shirtColor) {
-    try {
-        // Convert base64 to buffers
-        const tshirtBuffer = Buffer.from(tshirtBase64, 'base64');
-        const designBuffer = Buffer.from(designBase64.split(',')[1] || designBase64, 'base64');
-        // Resize design to appropriate size for T-shirt
-        const design = await sharp(designBuffer)
-            .resize({
-                width: 300,
-                height: 300,
-                fit: 'contain',
-                background: { r: 0, g: 0, b: 0, alpha: 0 }
-            })
-            .png()
-            .toBuffer();
-        // Get T-shirt metadata
-        const tshirtMetadata = await sharp(tshirtBuffer).metadata();
-        // Calculate position for design (center of T-shirt)
-        const designX = Math.floor((tshirtMetadata.width - 300) / 2);
-        const designY = Math.floor((tshirtMetadata.height - 300) / 3); // Upper chest area
-        // Composite design on T-shirt
-        const compositeBuffer = await sharp(tshirtBuffer)
-            .composite([{
-                input: design,
-                left: designX,
-                top: designY,
-                blend: 'over'
-            }])
-            .png()
-            .toBuffer();
-        // Convert back to base64
-        return compositeBuffer.toString('base64');
-    } catch (error) {
-        console.error('Composite error:', error);
-        throw error;
-    }
-}
-// Serve static files if needed
-app.use(express.static(path.join(__dirname, 'public')));
-// Error handling middleware
-app.use((error, req, res, next) => {
-    console.error('Unhandled error:', error);
-    res.status(500).json({
-        success: false,
-        message: 'Internal server error'
-    });
-});
-// Start server
-app.listen(PORT, () => {
-    console.log(`🚀 T-Shirt AI Backend Server is running on port ${PORT}`);
-    console.log(`📡 API endpoint: http://localhost:${PORT}/api/generate-mockup`);
-    console.log(`🏥 Health check: http://localhost:${PORT}/api/health`);
-    console.log(`🔗 Frontend URL: ${process.env.FRONTEND_URL || 'http://localhost:3000'}`);
-});
-module.exports = app;


1
2	+ # This file is no longer needed for the new Gemini-based implementation
3	+ # The application now runs directly in the browser using the Gemini API

style.css CHANGED Viewed

@@ -1,28 +1,3 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}






1
2	+ /* This CSS is now embedded in the HTML file */
3	+ /* No separate CSS file needed for this implementation */