Spaces:

taunk
/

tushartaunk

Running

File size: 21,044 Bytes

<!DOCTYPE html>
<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>