Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI FaceMagic Studio - تعديل الصور بالذكاء الاصطناعي</title> | |
| <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> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .dropzone { | |
| border: 2px dashed rgba(255, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone:hover { | |
| border-color: rgba(255, 255, 255, 0.6); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .prompt-box { | |
| background: rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| } | |
| .result-card { | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| transition: transform 0.3s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white" id="vanta-bg"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-16"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-yellow-300"> | |
| AI FaceMagic Studio | |
| </span> | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto"> | |
| أداة تعديل الصور بالذكاء الاصطناعي بدون تغيير الملامح الطبيعية - حرية كاملة في تعديل الملابس ودمج الأشخاص | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Upload Section --> | |
| <section class="bg-white/10 rounded-2xl p-8"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-feather="upload" class="mr-3"></i> | |
| ارفع صورتك | |
| </h2> | |
| <div class="dropzone rounded-xl p-8 mb-8 text-center cursor-pointer" id="dropzone"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i data-feather="image" class="w-16 h-16 text-gray-400 mb-4"></i> | |
| <p class="text-gray-300 mb-2">اسحب وأفلت صورتك هنا</p> | |
| <p class="text-gray-400 text-sm">أو انقر لاختيار ملف</p> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> | |
| </div> | |
| </div> | |
| <div class="preview-container hidden mb-8 text-center" id="previewContainer"> | |
| <div class="relative inline-block"> | |
| <img id="imagePreview" class="rounded-xl max-h-80 mx-auto" src="" alt="Preview"> | |
| <button id="removeImage" class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-600 transition"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Prompt Section --> | |
| <div class="prompt-box rounded-xl p-6 mb-8"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i data-feather="edit-3" class="mr-2"></i> | |
| ماذا تريد أن تفعل بالصورة؟ | |
| </h3> | |
| <textarea id="promptInput" class="w-full bg-white/10 rounded-lg p-4 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 h-32" placeholder="مثال: غير الملابس إلى بدلة رسمية سوداء... أو أضف هذا الشخص إلى صورة شاطئ... أو اجعل الإضاءة أكثر دفئاً..."></textarea> | |
| </div> | |
| <!-- Options --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <div class="bg-white/5 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium mb-2">جودة الوجه</label> | |
| <select class="w-full bg-white/10 rounded-lg p-2 text-white"> | |
| <option>طبيعي جداً (إفتراضي)</option> | |
| <option>تحسين بسيط</option> | |
| <option>ناعم</option> | |
| </select> | |
| </div> | |
| <div class="bg-white/5 p-4 rounded-lg"> | |
| <label class="block text-sm font-medium mb-2">إعدادات الدمج</label> | |
| <select class="w-full bg-white/10 rounded-lg p-2 text-white"> | |
| <option>دمج طبيعي (إفتراضي)</option> | |
| <option>دمج متقدم</option> | |
| <option>حفظ التفاصيل</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="w-full bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-bold py-4 px-6 rounded-xl text-lg transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="magic" class="mr-3"></i> | |
| أنشئ الصورة المعدلة | |
| </button> | |
| </section> | |
| <!-- Result Section --> | |
| <section> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i data-feather="image" class="mr-3"></i> | |
| النتائج | |
| </h2> | |
| <div class="result-card bg-white/10 rounded-2xl p-8 flex flex-col items-center justify-center min-h-[500px] mb-8"> | |
| <div id="initialState" class="text-center"> | |
| <i data-feather="sliders" class="w-16 h-16 text-gray-400 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">ستظهر صورتك المعدلة هنا</h3> | |
| <p class="text-gray-400">بعد أن تقوم بتحميل الصورة وإضافة التعليمات</p> | |
| </div> | |
| <div id="loadingState" class="hidden text-center"> | |
| <div class="animate-pulse flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-purple-400/20 rounded-full mb-4"></div> | |
| <h3 class="text-xl font-bold mb-2">جاري معالجة صورتك</h3> | |
| <p class="text-gray-400">الذكاء الاصطناعي يعمل على تعديل صورتك حسب طلبك</p> | |
| </div> | |
| </div> | |
| <div id="resultContainer" class="hidden text-center w-full"> | |
| <img id="resultImage" class="rounded-xl max-w-full mx-auto max-h-[500px]" src="http://static.photos/technology/640x360/123" alt="Result"> | |
| <div class="flex justify-center mt-6 space-x-4"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> تحميل | |
| </button> | |
| <button class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg flex items-center"> | |
| <i data-feather="repeat" class="mr-2"></i> تجربة أخرى | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Examples --> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i data-feather="zap" class="mr-2"></i> | |
| أمثلة للتجربة | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="example-item cursor-pointer relative group" data-example="قم بتغيير الملابس إلى بدلة رسمية سوداء"> | |
| <img src="http://static.photos/people/320x240/1" class="rounded-lg w-full h-32 object-cover"> | |
| <div class="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition flex items-center justify-center p-2"> | |
| <p class="text-white text-sm text-center">بدلة رسمية</p> | |
| </div> | |
| </div> | |
| <div class="example-item cursor-pointer relative group" data-example="أضف هذا الشخص إلى صورة شاطئ استوائي"> | |
| <img src="http://static.photos/travel/320x240/2" class="rounded-lg w-full h-32 object-cover"> | |
| <div class="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition flex items-center justify-center p-2"> | |
| <p class="text-white text-sm text-center">صورة شاطئ</p> | |
| </div> | |
| </div> | |
| <div class="example-item cursor-pointer relative group" data-example="اجعل الإضاءة أكثر دفئاً مع إضافة تأثير غروب الشمس"> | |
| <img src="http://static.photos/nature/320x240/3" class="rounded-lg w-full h-32 object-cover"> | |
| <div class="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition flex items-center justify-center p-2"> | |
| <p class="text-white text-sm text-center">غروب الشمس</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Features --> | |
| <section class="mt-24"> | |
| <h2 class="text-3xl font-bold text-center mb-12">لماذا FaceMagic AI؟</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white/5 p-8 rounded-2xl"> | |
| <div class="w-14 h-14 bg-purple-500/20 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="user" class="text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">حفظ الملامح الطبيعية</h3> | |
| <p class="text-gray-400">نضمن لك الحفاظ على ملامح الوجه الطبيعية دون أي تغيير أو تشويه</p> | |
| </div> | |
| <div class="bg-white/5 p-8 rounded-2xl"> | |
| <div class="w-14 h-14 bg-pink-500/20 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="unlock" class="text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">بدون قيود</h3> | |
| <p class="text-gray-400">حرية كاملة في تعديل الملابس، الخلفيات ودمج الأشخاص دون أي حدود</p> | |
| </div> | |
| <div class="bg-white/5 p-8 rounded-2xl"> | |
| <div class="w-14 h-14 bg-blue-500/20 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">نتيجة فورية</h3> | |
| <p class="text-gray-400">احصل على صورتك المعدلة خلال ثوانٍ بجودة عالية ودقة فائقة</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="mt-24 pt-8 border-t border-white/10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold">FaceMagic AI Studio</h2> | |
| <p class="text-gray-400">أداة تعديل الصور بالذكاء الاصطناعي</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <p class="text-center text-gray-500 text-sm mt-8">© 2023 FaceMagic AI Studio. جميع الحقوق محفوظة.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3f3f6e, | |
| shininess: 100.00, | |
| waveHeight: 20.00, | |
| waveSpeed: 0.50, | |
| zoom: 0.8 | |
| }); | |
| // Dropzone functionality | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const previewContainer = document.getElementById('previewContainer'); | |
| const imagePreview = document.getElementById('imagePreview'); | |
| const removeImage = document.getElementById('removeImage'); | |
| dropzone.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| const file = e.target.files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| imagePreview.src = event.target.result; | |
| previewContainer.classList.remove('hidden'); | |
| dropzone.classList.add('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| removeImage.addEventListener('click', () => { | |
| fileInput.value = ''; | |
| previewContainer.classList.add('hidden'); | |
| dropzone.classList.remove('hidden'); | |
| }); | |
| // Example prompts | |
| document.querySelectorAll('.example-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const prompt = item.getAttribute('data-example'); | |
| document.getElementById('promptInput').value = prompt; | |
| }); | |
| }); | |
| // Generate button | |
| document.getElementById('generateBtn').addEventListener('click', () => { | |
| if (!fileInput.files.length) { | |
| alert('الرجاء تحميل صورة أولاً'); | |
| return; | |
| } | |
| const prompt = document.getElementById('promptInput').value.trim(); | |
| if (!prompt) { | |
| alert('الرجاء إضافة تعليمات التعديل'); | |
| return; | |
| } | |
| // Show loading state | |
| document.getElementById('initialState').classList.add('hidden'); | |
| document.getElementById('loadingState').classList.remove('hidden'); | |
| // Simulate AI processing (in a real app, this would be an API call) | |
| setTimeout(() => { | |
| document.getElementById('loadingState').classList.add('hidden'); | |
| document.getElementById('resultContainer').classList.remove('hidden'); | |
| // Use a mock result (in a real app, this would be the processed image from the API) | |
| document.getElementById('resultImage').src = "http://static.photos/technology/640x360/123"; | |
| }, 3000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |