|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Meme Generator - Wear.Fun</title> |
|
|
<link rel="icon" type="image/x-icon" href="https://huggingface.co/dodey917/wear-fun/resolve/main/images/KZr0gBp.png"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-black text-white"> |
|
|
<custom-header></custom-header> |
|
|
<main class="py-12 px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Meme Generator</h1> |
|
|
<p class="text-gray-400 text-center mb-12">Turn your memes into wearable art</p> |
|
|
|
|
|
<div class="bg-gray-900 rounded-2xl p-6 md:p-8 border border-gray-800"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold mb-4">Upload Your Image</h2> |
|
|
<div id="dropZone" class="border-2 border-dashed border-gray-700 rounded-xl p-8 text-center mb-6 transition hover:border-red-500 cursor-pointer"> |
|
|
<i data-feather="upload" class="w-12 h-12 mx-auto text-gray-500 mb-4"></i> |
|
|
<p class="mb-2">Drag & drop your image here</p> |
|
|
<p class="text-sm text-gray-500 mb-4">or</p> |
|
|
<button type="button" id="browseBtn" class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg font-medium">Browse Files</button> |
|
|
<input type="file" id="fileInput" class="hidden" accept="image/*"> |
|
|
</div> |
|
|
<div id="imagePreview" class="hidden mb-6"> |
|
|
<img id="previewImg" class="w-full rounded-lg" alt="Preview"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-400 mb-2">Style Hint (Optional)</label> |
|
|
<input type="text" placeholder="e.g., crypto meme, sarcastic" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500"> |
|
|
</div> |
|
|
<button id="generateBtn" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-semibold transition disabled:bg-gray-600 disabled:cursor-not-allowed"> |
|
|
Generate Captions |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-xl font-bold mb-4">Generated Captions</h2> |
|
|
<div id="captionsContainer" class="space-y-4 hidden"> |
|
|
|
|
|
</div> |
|
|
<div id="loadingCaptions" class="hidden text-center py-8"> |
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-600 mx-auto"></div> |
|
|
<p class="mt-4 text-gray-400">Generating hilarious captions...</p> |
|
|
</div> |
|
|
<div id="noCaptions" class="text-center py-8 text-gray-500"> |
|
|
<i data-feather="message-circle" class="w-12 h-12 mx-auto mb-4 opacity-50"></i> |
|
|
<p>Upload an image and generate captions to see them here</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12"> |
|
|
<h2 class="text-xl font-bold mb-4">T-Shirt Preview</h2> |
|
|
<div id="mockupContainer" class="bg-gray-800 rounded-xl p-8 flex items-center justify-center min-h-[500px] border border-gray-700"> |
|
|
<div id="mockupPlaceholder" class="text-center"> |
|
|
<i data-feather="t-shirt" class="w-24 h-24 mx-auto text-gray-600 mb-4"></i> |
|
|
<p class="text-gray-500">Your t-shirt mockup will appear here</p> |
|
|
</div> |
|
|
<div id="mockupPreview" class="hidden relative"> |
|
|
|
|
|
<svg width="300" height="350" viewBox="0 0 300 350" class="relative"> |
|
|
|
|
|
<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"/> |
|
|
|
|
|
<ellipse cx="150" cy="40" rx="25" ry="20" fill="none" stroke="#333" stroke-width="2"/> |
|
|
|
|
|
<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"/> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<text id="tshirtCaption" x="150" y="240" text-anchor="middle" fill="white" font-size="14" font-weight="bold" font-family="Arial, sans-serif"></text> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
<script src="components/header.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
let uploadedImage = null; |
|
|
let currentCaption = ''; |
|
|
|
|
|
const dropZone = document.getElementById('dropZone'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const browseBtn = document.getElementById('browseBtn'); |
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const imagePreview = document.getElementById('imagePreview'); |
|
|
const previewImg = document.getElementById('previewImg'); |
|
|
const captionsContainer = document.getElementById('captionsContainer'); |
|
|
const loadingCaptions = document.getElementById('loadingCaptions'); |
|
|
const noCaptions = document.getElementById('noCaptions'); |
|
|
const mockupContainer = document.getElementById('mockupContainer'); |
|
|
const mockupPlaceholder = document.getElementById('mockupPlaceholder'); |
|
|
const mockupPreview = document.getElementById('mockupPreview'); |
|
|
const mockupImg = document.getElementById('mockupImg'); |
|
|
const mockupCaption = document.getElementById('mockupCaption'); |
|
|
|
|
|
|
|
|
browseBtn.addEventListener('click', () => fileInput.click()); |
|
|
|
|
|
fileInput.addEventListener('change', (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (file && file.type.startsWith('image/')) { |
|
|
handleImageUpload(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
dropZone.classList.add('border-red-500', 'bg-red-900/10'); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('dragleave', () => { |
|
|
dropZone.classList.remove('border-red-500', 'bg-red-900/10'); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
dropZone.classList.remove('border-red-500', 'bg-red-900/10'); |
|
|
|
|
|
const file = e.dataTransfer.files[0]; |
|
|
if (file && file.type.startsWith('image/')) { |
|
|
handleImageUpload(file); |
|
|
} |
|
|
}); |
|
|
function handleImageUpload(file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
uploadedImage = e.target.result; |
|
|
previewImg.src = uploadedImage; |
|
|
imagePreview.classList.remove('hidden'); |
|
|
generateBtn.disabled = false; |
|
|
resetCaptions(); |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
|
|
|
generateBtn.addEventListener('click', async () => { |
|
|
if (!uploadedImage) return; |
|
|
|
|
|
loadingCaptions.classList.remove('hidden'); |
|
|
captionsContainer.classList.add('hidden'); |
|
|
noCaptions.classList.add('hidden'); |
|
|
generateBtn.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const captions = generateMockCaptions(); |
|
|
displayCaptions(captions); |
|
|
loadingCaptions.classList.add('hidden'); |
|
|
generateBtn.disabled = false; |
|
|
}, 1500); |
|
|
}); |
|
|
function generateMockCaptions() { |
|
|
const captionTemplates = [ |
|
|
"When you finally understand that meme", |
|
|
"Send this to your group chat immediately", |
|
|
"My therapist: 'And how does that make you feel?'", |
|
|
"Me explaining why this is the funniest thing ever", |
|
|
"POV: You get the reference", |
|
|
"IYKYK (If you know, you know)", |
|
|
"This is my emotional support meme", |
|
|
"When the meme hits different at 3 AM", |
|
|
"Tell me you have internet without telling me you have internet", |
|
|
"Chef's kiss: 馃" |
|
|
]; |
|
|
|
|
|
return Array.from({length: 3}, () => |
|
|
captionTemplates[Math.floor(Math.random() * captionTemplates.length)] |
|
|
); |
|
|
} |
|
|
|
|
|
function displayCaptions(captions) { |
|
|
captionsContainer.innerHTML = ''; |
|
|
captions.forEach((caption, index) => { |
|
|
const captionDiv = document.createElement('div'); |
|
|
captionDiv.className = 'bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-red-500 transition'; |
|
|
captionDiv.innerHTML = ` |
|
|
<p class="font-medium mb-3">${caption}</p> |
|
|
<div class="flex gap-2"> |
|
|
<button class="preview-btn flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm transition" data-caption="${caption}"> |
|
|
Preview Mockup |
|
|
</button> |
|
|
<button class="add-to-shirt-btn flex-1 bg-red-600 hover:bg-red-700 py-2 rounded-lg text-sm transition" data-caption="${caption}"> |
|
|
Add to T-Shirt |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
captionsContainer.appendChild(captionDiv); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.preview-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const caption = e.target.dataset.caption; |
|
|
showMockup(caption); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.add-to-shirt-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const caption = e.target.dataset.caption; |
|
|
currentCaption = caption; |
|
|
showMockup(caption); |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed top-20 right-4 bg-green-600 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="check-circle" class="w-5 h-5 mr-2"></i> |
|
|
<span>Design added to T-Shirt! Scroll down to preview.</span> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.style.transform = 'translateX(0)'; |
|
|
}, 100); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.style.transform = 'translateX(100%)'; |
|
|
setTimeout(() => { |
|
|
document.body.removeChild(notification); |
|
|
}, 300); |
|
|
}, 3000); |
|
|
}); |
|
|
}); |
|
|
captionsContainer.classList.remove('hidden'); |
|
|
} |
|
|
async function showMockup(caption) { |
|
|
if (!uploadedImage) return; |
|
|
|
|
|
mockupPlaceholder.classList.add('hidden'); |
|
|
mockupPreview.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
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> |
|
|
`; |
|
|
|
|
|
try { |
|
|
const shirtColor = window.selectedShirtColor || 'white'; |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
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 { |
|
|
throw new Error(data.error || 'Generation failed'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Mockup generation error:', error); |
|
|
showNotification('Failed to generate realistic mockup. Using fallback preview.', 'warning'); |
|
|
|
|
|
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(); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.style.transform = 'translateX(0)'; |
|
|
}, 100); |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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> |
|
|
`; |
|
|
|
|
|
|
|
|
const tshirtImg = document.getElementById('tshirtImage'); |
|
|
if (tshirtImg) { |
|
|
tshirtImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', uploadedImage); |
|
|
} |
|
|
} |
|
|
function resetCaptions() { |
|
|
captionsContainer.classList.add('hidden'); |
|
|
noCaptions.classList.remove('hidden'); |
|
|
mockupPlaceholder.classList.remove('hidden'); |
|
|
mockupPreview.classList.add('hidden'); |
|
|
generateBtn.disabled = !uploadedImage; |
|
|
} |
|
|
|
|
|
const styleHint = document.querySelector('input[placeholder="e.g., crypto meme, sarcastic"]'); |
|
|
if (styleHint) { |
|
|
styleHint.addEventListener('input', (e) => { |
|
|
|
|
|
console.log('Style hint:', e.target.value); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
