Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Avatar Creator - Transform Photos to Avatars</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #9CA3AF; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3B82F6; | |
| background-color: #EFF6FF; | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .style-btn.active { | |
| background-color: #E0E7FF; | |
| color: #4F46E5; | |
| border-color: #C7D2FE; | |
| } | |
| #generated-avatar { | |
| max-width: 100%; | |
| max-height: 400px; | |
| object-fit: contain; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Avatar Creator</h1> | |
| <p class="text-gray-600 text-lg">Turn your photos into stunning avatars with AI</p> | |
| </header> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Main Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <!-- Left Side - Upload & Settings --> | |
| <div class="md:w-1/2 p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Upload Your Photo</h2> | |
| <!-- Dropzone --> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center mb-6 cursor-pointer"> | |
| <div id="upload-content"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i> | |
| <p class="text-gray-600 mb-2">Drag & drop your photo here</p> | |
| <p class="text-gray-400 text-sm mb-4">or</p> | |
| <label for="file-upload" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition cursor-pointer"> | |
| Select Photo | |
| </label> | |
| <input id="file-upload" type="file" accept="image/*" class="hidden"> | |
| </div> | |
| <div id="preview-container" class="hidden"> | |
| <img id="image-preview" src="" alt="Preview" class="max-h-48 mx-auto rounded-lg mb-3"> | |
| <button id="change-image" class="text-indigo-600 hover:text-indigo-800 text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i> Change Photo | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Style Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Avatar Style</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button data-style="realistic" class="style-btn active bg-indigo-100 text-indigo-700 py-2 px-3 rounded-md border border-indigo-200 hover:bg-indigo-200 transition"> | |
| <i class="fas fa-user mr-1"></i> Realistic | |
| </button> | |
| <button data-style="cartoon" class="style-btn bg-gray-100 text-gray-700 py-2 px-3 rounded-md border border-gray-200 hover:bg-gray-200 transition"> | |
| <i class="fas fa-paint-brush mr-1"></i> Cartoon | |
| </button> | |
| <button data-style="anime" class="style-btn bg-gray-100 text-gray-700 py-2 px-3 rounded-md border border-gray-200 hover:bg-gray-200 transition"> | |
| <i class="fas fa-moon mr-1"></i> Anime | |
| </button> | |
| <button data-style="pixel" class="style-btn bg-gray-100 text-gray-700 py-2 px-3 rounded-md border border-gray-200 hover:bg-gray-200 transition"> | |
| <i class="fas fa-gamepad mr-1"></i> Pixel | |
| </button> | |
| <button data-style="fantasy" class="style-btn bg-gray-100 text-gray-700 py-2 px-3 rounded-md border border-gray-200 hover:bg-gray-200 transition"> | |
| <i class="fas fa-hat-wizard mr-1"></i> Fantasy | |
| </button> | |
| <button data-style="cyberpunk" class="style-btn bg-gray-100 text-gray-700 py-2 px-3 rounded-md border border-gray-200 hover:bg-gray-200 transition"> | |
| <i class="fas fa-robot mr-1"></i> Cyberpunk | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Prompt Input --> | |
| <div class="mb-6"> | |
| <label for="prompt" class="block text-gray-700 mb-2 font-medium">Customization Prompt</label> | |
| <div class="relative"> | |
| <textarea id="prompt" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500" placeholder="E.g. 'Make me look like a professional portrait with soft lighting and cinematic depth of field'"></textarea> | |
| <div class="absolute bottom-2 right-2 text-gray-400 text-xs"> | |
| <span id="char-count">0</span>/200 | |
| </div> | |
| </div> | |
| <p class="text-gray-500 text-xs mt-1">Describe how you want your avatar to look</p> | |
| </div> | |
| <!-- Generate Button --> | |
| <button id="generate-btn" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-indigo-700 hover:to-purple-700 transition shadow-md flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Create Avatar | |
| </button> | |
| </div> | |
| <!-- Right Side - Results --> | |
| <div class="md:w-1/2 bg-gray-50 p-6 border-l border-gray-200"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Your Avatar</h2> | |
| <div id="result-placeholder" class="text-center py-12"> | |
| <i class="fas fa-user-circle text-5xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-400">Your generated avatar will appear here</p> | |
| <p class="text-gray-300 text-xs mt-2">Try our realistic style for professional results</p> | |
| </div> | |
| <div id="loading-indicator" class="hidden text-center py-12"> | |
| <div class="loading-spinner inline-block border-4 border-indigo-500 border-t-transparent rounded-full w-12 h-12 mb-4"></div> | |
| <p class="text-gray-600">Creating your avatar... This may take a moment</p> | |
| <p class="text-gray-400 text-xs mt-2">Processing your photo with AI</p> | |
| </div> | |
| <div id="result-container" class="hidden"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md mb-4 flex justify-center p-4"> | |
| <img id="generated-avatar" src="" alt="Generated Avatar"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="download-btn" class="flex-1 bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition flex items-center justify-center"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| <button id="regenerate-btn" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition flex items-center justify-center"> | |
| <i class="fas fa-redo mr-2"></i> Try Again | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Style Examples Section --> | |
| <div class="mt-16"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Style Examples</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative group"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Example" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-indigo-600 bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center opacity-0 group-hover:opacity-100"> | |
| <span class="text-white font-medium">Original Photo</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded mr-2">Realistic</span> | |
| <span class="text-gray-500 text-sm">"Professional headshot with soft lighting"</span> | |
| </div> | |
| <img src="https://i.imgur.com/8KQ3b9T.jpg" alt="Avatar" class="w-full h-48 object-contain"> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative group"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Example" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-indigo-600 bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center opacity-0 group-hover:opacity-100"> | |
| <span class="text-white font-medium">Original Photo</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-2">Fantasy</span> | |
| <span class="text-gray-500 text-sm">"Elven princess with golden jewelry"</span> | |
| </div> | |
| <img src="https://i.imgur.com/3RtQbZ9.png" alt="Avatar" class="w-full h-48 object-contain"> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative group"> | |
| <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Example" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-indigo-600 bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center opacity-0 group-hover:opacity-100"> | |
| <span class="text-white font-medium">Original Photo</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded mr-2">Cyberpunk</span> | |
| <span class="text-gray-500 text-sm">"Neon-enhanced futuristic hacker"</span> | |
| </div> | |
| <img src="https://i.imgur.com/7VQ0D4x.png" alt="Avatar" class="w-full h-48 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-16 text-center text-gray-500 text-sm pb-8"> | |
| <p>© 2023 Avatar Creator. All rights reserved.</p> | |
| <p class="mt-2">Free to use for personal and commercial projects</p> | |
| </footer> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileUpload = document.getElementById('file-upload'); | |
| const uploadContent = document.getElementById('upload-content'); | |
| const previewContainer = document.getElementById('preview-container'); | |
| const imagePreview = document.getElementById('image-preview'); | |
| const changeImageBtn = document.getElementById('change-image'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const promptInput = document.getElementById('prompt'); | |
| const charCount = document.getElementById('char-count'); | |
| const resultPlaceholder = document.getElementById('result-placeholder'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const generatedAvatar = document.getElementById('generated-avatar'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const regenerateBtn = document.getElementById('regenerate-btn'); | |
| const styleBtns = document.querySelectorAll('.style-btn'); | |
| // Variables | |
| let selectedFile = null; | |
| let selectedStyle = 'realistic'; | |
| // Event Listeners | |
| dropzone.addEventListener('click', () => fileUpload.click()); | |
| fileUpload.addEventListener('change', handleFileSelect); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| if (e.dataTransfer.files.length) { | |
| fileUpload.files = e.dataTransfer.files; | |
| handleFileSelect({ target: fileUpload }); | |
| } | |
| }); | |
| changeImageBtn.addEventListener('click', () => { | |
| previewContainer.classList.add('hidden'); | |
| uploadContent.classList.remove('hidden'); | |
| selectedFile = null; | |
| fileUpload.value = ''; | |
| }); | |
| promptInput.addEventListener('input', () => { | |
| const count = promptInput.value.length; | |
| charCount.textContent = count; | |
| if (count > 200) { | |
| promptInput.classList.add('border-red-500'); | |
| charCount.classList.add('text-red-500'); | |
| } else { | |
| promptInput.classList.remove('border-red-500'); | |
| charCount.classList.remove('text-red-500'); | |
| } | |
| }); | |
| generateBtn.addEventListener('click', generateAvatar); | |
| downloadBtn.addEventListener('click', downloadAvatar); | |
| regenerateBtn.addEventListener('click', generateAvatar); | |
| styleBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| styleBtns.forEach(b => b.classList.remove('active', 'bg-indigo-100', 'text-indigo-700', 'border-indigo-200')); | |
| btn.classList.add('active', 'bg-indigo-100', 'text-indigo-700', 'border-indigo-200'); | |
| selectedStyle = btn.dataset.style; | |
| }); | |
| }); | |
| // Functions | |
| function handleFileSelect(e) { | |
| const file = e.target.files[0]; | |
| if (file && file.type.match('image.*')) { | |
| selectedFile = file; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| imagePreview.src = event.target.result; | |
| uploadContent.classList.add('hidden'); | |
| previewContainer.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| function generateAvatar() { | |
| if (!selectedFile) { | |
| alert('Please upload a photo first'); | |
| return; | |
| } | |
| if (promptInput.value.length > 200) { | |
| alert('Prompt must be 200 characters or less'); | |
| return; | |
| } | |
| // Show loading state | |
| resultPlaceholder.classList.add('hidden'); | |
| resultContainer.classList.add('hidden'); | |
| loadingIndicator.classList.remove('hidden'); | |
| generateBtn.disabled = true; | |
| generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Creating...'; | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // In a real app, this would be an actual API call to your backend | |
| // For demo purposes, we'll use placeholder images | |
| const demoAvatars = { | |
| realistic: 'https://i.imgur.com/8KQ3b9T.jpg', | |
| cartoon: 'https://i.imgur.com/Jm6hX9T.png', | |
| anime: 'https://i.imgur.com/9zQ3b7S.png', | |
| pixel: 'https://i.imgur.com/5XwC6rY.png', | |
| fantasy: 'https://i.imgur.com/3RtQbZ9.png', | |
| cyberpunk: 'https://i.imgur.com/7VQ0D4x.png' | |
| }; | |
| generatedAvatar.src = demoAvatars[selectedStyle]; | |
| // Hide loading and show result | |
| loadingIndicator.classList.add('hidden'); | |
| resultContainer.classList.remove('hidden'); | |
| generateBtn.disabled = false; | |
| generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Create Avatar'; | |
| }, 2000); | |
| } | |
| function downloadAvatar() { | |
| if (!generatedAvatar.src) return; | |
| const link = document.createElement('a'); | |
| link.href = generatedAvatar.src; | |
| link.download = `avatar-${selectedStyle}-${Date.now()}.png`; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=taunk/tushartaunk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |