Spaces:
Running
Running
I need you to generate a new image using faces from this attached image and the name tags on their body in a setup and arrangement as follows: it's mom and dad's 45 wedding anniversary, so the theme of the image should be there celebration party where everyone is in wedding clothes. Mom and dad in the center, side hugging with my son 1, my son 2 and sister's daughter kneeling/standing in front of them. Me and my wife on mom's side and sister and sister's husband on dad's side. Everyone side hugging for the picture
cff23f2 verified | <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>AI Photo Enhancement</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-50 to-blue-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8"> | |
| <h1 class="text-4xl font-bold text-center text-purple-800 mb-2">AI Photo Enhancement Studio</h1> | |
| <p class="text-lg text-center text-gray-600 mb-8">Transform your photos with advanced AI tools</p> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Upload Section --> | |
| <div class="space-y-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Upload Your Photo</h2> | |
| <div class="border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center hover:border-purple-400 transition-colors"> | |
| <input type="file" id="photoUpload" class="hidden" accept="image/*"> | |
| <label for="photoUpload" class="cursor-pointer block"> | |
| <svg class="w-16 h-16 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <p class="mt-4 text-gray-600">Click to upload a photo</p> | |
| </label> | |
| </div> | |
| <div id="uploadPreview" class="hidden"> | |
| <img id="previewImage" class="w-full rounded-lg shadow-md" alt="Upload preview" src="https://huggingface.co/spaces/al2kool/deepsite-project/resolve/main/images/27544.jpg"> | |
| </div> | |
| <div class="text-center"> | |
| <button id="useSampleButton" class="bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 transition-colors"> | |
| Use Sample Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Modification Request Section --> | |
| <div class="space-y-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Describe Your Modifications</h2> | |
| <textarea | |
| id="modificationRequest" | |
| class="w-full h-40 p-4 border border-gray-300 rounded-2xl resize-none focus:border-purple-400 focus:ring-2 focus:ring-purple-200 transition-all" | |
| placeholder="Describe the changes you want to make to your photo...">I need you to generate a new image using faces from this attached image and the name tags on their body in a setup and arrangement as follows: it's mom and dad's 45 wedding anniversary, so the theme of the image should be there celebration party where everyone is in wedding clothes. Mom and dad in the center, side hugging with my son 1, my son 2 and sister's daughter kneeling/standing in front of them. Me and my wife on mom's side and sister and sister's husband on dad's side. Everyone side hugging for the picture</textarea> | |
| <button id="processButton" class="w-full bg-purple-600 text-white py-3 px-6 rounded-2xl font-semibold hover:bg-purple-700 transition-colors shadow-lg"> | |
| Process with AI | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Result Section --> | |
| <div id="resultSection" class="mt-12 hidden"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Enhanced Result</h2> | |
| <div class="bg-gray-50 rounded-2xl p-6 text-center"> | |
| <div id="loadingSpinner" class="hidden"> | |
| <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div> | |
| <p class="mt-4 text-gray-600">Processing your image with AI...</p> | |
| </div> | |
| <div id="resultImage" class="hidden"> | |
| <img id="enhancedImage" class="max-w-full rounded-lg shadow-lg mx-auto" alt="Enhanced result"> | |
| <button id="downloadButton" class="mt-4 bg-green-600 text-white py-2 px-6 rounded-xl font-semibold hover:bg-green-700 transition-colors"> | |
| Download Enhanced Image | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('photoUpload').addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| const preview = document.getElementById('previewImage'); | |
| preview.src = event.target.result; | |
| document.getElementById('uploadPreview').classList.remove('hidden'); | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| document.getElementById('useSampleButton').addEventListener('click', function() { | |
| const preview = document.getElementById('previewImage'); | |
| preview.src = "https://huggingface.co/spaces/al2kool/deepsite-project/resolve/main/images/27544.jpg"; | |
| document.getElementById('uploadPreview').classList.remove('hidden'); | |
| }); | |
| document.getElementById('processButton').addEventListener('click', function() { | |
| const requestText = document.getElementById('modificationRequest').value; | |
| const fileInput = document.getElementById('photoUpload'); | |
| if (!fileInput.files[0]) { | |
| alert('Please upload a photo first.'); | |
| return; | |
| } | |
| if (!requestText.trim()) { | |
| alert('Please describe your modifications.'); | |
| return; | |
| } | |
| // Show loading state | |
| document.getElementById('resultSection').classList.remove('hidden'); | |
| document.getElementById('loadingSpinner').classList.remove('hidden'); | |
| document.getElementById('resultImage').classList.add('hidden'); | |
| // Simulate AI processing (in a real app, this would be an API call) | |
| setTimeout(() => { | |
| document.getElementById('loadingSpinner').classList.add('hidden'); | |
| document.getElementById('resultImage').classList.remove('hidden'); | |
| // For demo purposes, we'll use a generated wedding anniversary image | |
| document.getElementById('enhancedImage').src = "http://static.photos/wedding/1024x576/45"; | |
| }, 3000); | |
| }); | |
| document.getElementById('downloadButton').addEventListener('click', function() { | |
| alert('In a real application, this would download the enhanced image. This is a demo interface.'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |