Spaces:
Running
Running
انشاء تطبيق تعديل على الصور بالذكاء الاصطناعي مجانا بطريقة إضافة صورة وبرومبت وتطلع النتيجة احترافية والمحافظة على تفاصيل الوجوه طبيعي جدا وبدون تغير الملامح وبدون قيود او حدود وتغير الملابس بدون قيود او حدود ودمج الأشخاص معا في صورة واحدة
Browse files- README.md +7 -4
- index.html +312 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
colorFrom: green
|
| 5 |
colorTo: gray
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: AI FaceMagic Studio ✨
|
| 3 |
+
colorFrom: gray
|
|
|
|
| 4 |
colorTo: gray
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,313 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="ar" dir="rtl">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>AI FaceMagic Studio - تعديل الصور بالذكاء الاصطناعي</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Tajawal', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.dropzone {
|
| 17 |
+
border: 2px dashed rgba(255, 255, 255, 0.3);
|
| 18 |
+
transition: all 0.3s ease;
|
| 19 |
+
}
|
| 20 |
+
.dropzone:hover {
|
| 21 |
+
border-color: rgba(255, 255, 255, 0.6);
|
| 22 |
+
background: rgba(255, 255, 255, 0.05);
|
| 23 |
+
}
|
| 24 |
+
.prompt-box {
|
| 25 |
+
background: rgba(0, 0, 0, 0.3);
|
| 26 |
+
backdrop-filter: blur(10px);
|
| 27 |
+
}
|
| 28 |
+
.result-card {
|
| 29 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
| 30 |
+
transition: transform 0.3s ease;
|
| 31 |
+
}
|
| 32 |
+
.result-card:hover {
|
| 33 |
+
transform: translateY(-5px);
|
| 34 |
+
}
|
| 35 |
+
</style>
|
| 36 |
+
</head>
|
| 37 |
+
<body class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white" id="vanta-bg">
|
| 38 |
+
<div class="container mx-auto px-4 py-12">
|
| 39 |
+
<!-- Header -->
|
| 40 |
+
<header class="text-center mb-16">
|
| 41 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
| 42 |
+
<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-yellow-300">
|
| 43 |
+
AI FaceMagic Studio
|
| 44 |
+
</span>
|
| 45 |
+
</h1>
|
| 46 |
+
<p class="text-xl text-gray-300 max-w-2xl mx-auto">
|
| 47 |
+
أداة تعديل الصور بالذكاء الاصطناعي بدون تغيير الملامح الطبيعية - حرية كاملة في تعديل الملابس ودمج الأشخاص
|
| 48 |
+
</p>
|
| 49 |
+
</header>
|
| 50 |
+
|
| 51 |
+
<!-- Main Content -->
|
| 52 |
+
<main class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
| 53 |
+
<!-- Upload Section -->
|
| 54 |
+
<section class="bg-white/10 rounded-2xl p-8">
|
| 55 |
+
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
| 56 |
+
<i data-feather="upload" class="mr-3"></i>
|
| 57 |
+
ارفع صورتك
|
| 58 |
+
</h2>
|
| 59 |
+
|
| 60 |
+
<div class="dropzone rounded-xl p-8 mb-8 text-center cursor-pointer" id="dropzone">
|
| 61 |
+
<div class="flex flex-col items-center justify-center">
|
| 62 |
+
<i data-feather="image" class="w-16 h-16 text-gray-400 mb-4"></i>
|
| 63 |
+
<p class="text-gray-300 mb-2">اسحب وأفلت صورتك هنا</p>
|
| 64 |
+
<p class="text-gray-400 text-sm">أو انقر لاختيار ملف</p>
|
| 65 |
+
<input type="file" id="fileInput" class="hidden" accept="image/*">
|
| 66 |
+
</div>
|
| 67 |
+
</div>
|
| 68 |
+
|
| 69 |
+
<div class="preview-container hidden mb-8 text-center" id="previewContainer">
|
| 70 |
+
<div class="relative inline-block">
|
| 71 |
+
<img id="imagePreview" class="rounded-xl max-h-80 mx-auto" src="" alt="Preview">
|
| 72 |
+
<button id="removeImage" class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-600 transition">
|
| 73 |
+
<i data-feather="x"></i>
|
| 74 |
+
</button>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
|
| 78 |
+
<!-- Prompt Section -->
|
| 79 |
+
<div class="prompt-box rounded-xl p-6 mb-8">
|
| 80 |
+
<h3 class="text-xl font-bold mb-4 flex items-center">
|
| 81 |
+
<i data-feather="edit-3" class="mr-2"></i>
|
| 82 |
+
ماذا تريد أن تفعل بالصورة؟
|
| 83 |
+
</h3>
|
| 84 |
+
<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>
|
| 85 |
+
</div>
|
| 86 |
+
|
| 87 |
+
<!-- Options -->
|
| 88 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
| 89 |
+
<div class="bg-white/5 p-4 rounded-lg">
|
| 90 |
+
<label class="block text-sm font-medium mb-2">جودة الوجه</label>
|
| 91 |
+
<select class="w-full bg-white/10 rounded-lg p-2 text-white">
|
| 92 |
+
<option>طبيعي جداً (إفتراضي)</option>
|
| 93 |
+
<option>تحسين بسيط</option>
|
| 94 |
+
<option>ناعم</option>
|
| 95 |
+
</select>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="bg-white/5 p-4 rounded-lg">
|
| 98 |
+
<label class="block text-sm font-medium mb-2">إعدادات الدمج</label>
|
| 99 |
+
<select class="w-full bg-white/10 rounded-lg p-2 text-white">
|
| 100 |
+
<option>دمج طبيعي (إفتراضي)</option>
|
| 101 |
+
<option>دمج متقدم</option>
|
| 102 |
+
<option>حفظ التفاصيل</option>
|
| 103 |
+
</select>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
|
| 107 |
+
<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">
|
| 108 |
+
<i data-feather="magic" class="mr-3"></i>
|
| 109 |
+
أنشئ الصورة المعدلة
|
| 110 |
+
</button>
|
| 111 |
+
</section>
|
| 112 |
+
|
| 113 |
+
<!-- Result Section -->
|
| 114 |
+
<section>
|
| 115 |
+
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
| 116 |
+
<i data-feather="image" class="mr-3"></i>
|
| 117 |
+
النتائج
|
| 118 |
+
</h2>
|
| 119 |
+
|
| 120 |
+
<div class="result-card bg-white/10 rounded-2xl p-8 flex flex-col items-center justify-center min-h-[500px] mb-8">
|
| 121 |
+
<div id="initialState" class="text-center">
|
| 122 |
+
<i data-feather="sliders" class="w-16 h-16 text-gray-400 mx-auto mb-4"></i>
|
| 123 |
+
<h3 class="text-xl font-bold mb-2">ستظهر صورتك المعدلة هنا</h3>
|
| 124 |
+
<p class="text-gray-400">بعد أن تقوم بتحميل الصورة وإضافة التعليمات</p>
|
| 125 |
+
</div>
|
| 126 |
+
<div id="loadingState" class="hidden text-center">
|
| 127 |
+
<div class="animate-pulse flex flex-col items-center">
|
| 128 |
+
<div class="w-16 h-16 bg-purple-400/20 rounded-full mb-4"></div>
|
| 129 |
+
<h3 class="text-xl font-bold mb-2">جاري معالجة صورتك</h3>
|
| 130 |
+
<p class="text-gray-400">الذكاء الاصطناعي يعمل على تعديل صورتك حسب طلبك</p>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
<div id="resultContainer" class="hidden text-center w-full">
|
| 134 |
+
<img id="resultImage" class="rounded-xl max-w-full mx-auto max-h-[500px]" src="" alt="Result">
|
| 135 |
+
<div class="flex justify-center mt-6 space-x-4">
|
| 136 |
+
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center">
|
| 137 |
+
<i data-feather="download" class="mr-2"></i> تحميل
|
| 138 |
+
</button>
|
| 139 |
+
<button class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg flex items-center">
|
| 140 |
+
<i data-feather="repeat" class="mr-2"></i> تجربة أخرى
|
| 141 |
+
</button>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
|
| 146 |
+
<!-- Examples -->
|
| 147 |
+
<div class="mt-8">
|
| 148 |
+
<h3 class="text-xl font-bold mb-4 flex items-center">
|
| 149 |
+
<i data-feather="zap" class="mr-2"></i>
|
| 150 |
+
أمثلة للتجربة
|
| 151 |
+
</h3>
|
| 152 |
+
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
| 153 |
+
<div class="example-item cursor-pointer relative group" data-example="قم بتغيير الملابس إلى بدلة رسمية سوداء">
|
| 154 |
+
<img src="http://static.photos/people/320x240/1" class="rounded-lg w-full h-32 object-cover">
|
| 155 |
+
<div class="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition flex items-center justify-center p-2">
|
| 156 |
+
<p class="text-white text-sm text-center">بدلة رسمية</p>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
<div class="example-item cursor-pointer relative group" data-example="أضف هذا الشخص إلى صورة شاطئ استوائي">
|
| 160 |
+
<img src="http://static.photos/travel/320x240/2" class="rounded-lg w-full h-32 object-cover">
|
| 161 |
+
<div class="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition flex items-center justify-center p-2">
|
| 162 |
+
<p class="text-white text-sm text-center">صورة شاطئ</p>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
<div class="example-item cursor-pointer relative group" data-example="اجعل الإضاءة أكثر دفئاً مع إضافة تأثير غروب الشمس">
|
| 166 |
+
<img src="http://static.photos/nature/320x240/3" class="rounded-lg w-full h-32 object-cover">
|
| 167 |
+
<div class="absolute inset-0 bg-black/60 rounded-lg opacity-0 group-hover:opacity-100 transition flex items-center justify-center p-2">
|
| 168 |
+
<p class="text-white text-sm text-center">غروب الشمس</p>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</section>
|
| 174 |
+
</main>
|
| 175 |
+
|
| 176 |
+
<!-- Features -->
|
| 177 |
+
<section class="mt-24">
|
| 178 |
+
<h2 class="text-3xl font-bold text-center mb-12">لماذا FaceMagic AI؟</h2>
|
| 179 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 180 |
+
<div class="bg-white/5 p-8 rounded-2xl">
|
| 181 |
+
<div class="w-14 h-14 bg-purple-500/20 rounded-full flex items-center justify-center mb-4">
|
| 182 |
+
<i data-feather="user" class="text-purple-400"></i>
|
| 183 |
+
</div>
|
| 184 |
+
<h3 class="text-xl font-bold mb-3">حفظ الملامح الطبيعية</h3>
|
| 185 |
+
<p class="text-gray-400">نضمن لك الحفاظ على ملامح الوجه الطبيعية دون أي تغيير أو تشويه</p>
|
| 186 |
+
</div>
|
| 187 |
+
<div class="bg-white/5 p-8 rounded-2xl">
|
| 188 |
+
<div class="w-14 h-14 bg-pink-500/20 rounded-full flex items-center justify-center mb-4">
|
| 189 |
+
<i data-feather="unlock" class="text-pink-400"></i>
|
| 190 |
+
</div>
|
| 191 |
+
<h3 class="text-xl font-bold mb-3">بدون قيود</h3>
|
| 192 |
+
<p class="text-gray-400">حرية كاملة في تعديل الملابس، الخلفيات ودمج الأشخاص دون أي حدود</p>
|
| 193 |
+
</div>
|
| 194 |
+
<div class="bg-white/5 p-8 rounded-2xl">
|
| 195 |
+
<div class="w-14 h-14 bg-blue-500/20 rounded-full flex items-center justify-center mb-4">
|
| 196 |
+
<i data-feather="zap" class="text-blue-400"></i>
|
| 197 |
+
</div>
|
| 198 |
+
<h3 class="text-xl font-bold mb-3">نتيجة فورية</h3>
|
| 199 |
+
<p class="text-gray-400">احصل على صورتك المعدلة خلال ثوانٍ بجودة عالية ودقة فائقة</p>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</section>
|
| 203 |
+
|
| 204 |
+
<!-- Footer -->
|
| 205 |
+
<footer class="mt-24 pt-8 border-t border-white/10">
|
| 206 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 207 |
+
<div class="mb-4 md:mb-0">
|
| 208 |
+
<h2 class="text-xl font-bold">FaceMagic AI Studio</h2>
|
| 209 |
+
<p class="text-gray-400">أداة تعديل الصور بالذكاء الاصطناعي</p>
|
| 210 |
+
</div>
|
| 211 |
+
<div class="flex space-x-6">
|
| 212 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 213 |
+
<i data-feather="facebook"></i>
|
| 214 |
+
</a>
|
| 215 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 216 |
+
<i data-feather="twitter"></i>
|
| 217 |
+
</a>
|
| 218 |
+
<a href="#" class="text-gray-400 hover:text-white transition">
|
| 219 |
+
<i data-feather="instagram"></i>
|
| 220 |
+
</a>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
<p class="text-center text-gray-500 text-sm mt-8">© 2023 FaceMagic AI Studio. جميع الحقوق محفوظة.</p>
|
| 224 |
+
</footer>
|
| 225 |
+
</div>
|
| 226 |
+
|
| 227 |
+
<script>
|
| 228 |
+
feather.replace();
|
| 229 |
+
|
| 230 |
+
// Initialize Vanta.js background
|
| 231 |
+
VANTA.WAVES({
|
| 232 |
+
el: "#vanta-bg",
|
| 233 |
+
mouseControls: true,
|
| 234 |
+
touchControls: true,
|
| 235 |
+
gyroControls: false,
|
| 236 |
+
minHeight: 200.00,
|
| 237 |
+
minWidth: 200.00,
|
| 238 |
+
scale: 1.00,
|
| 239 |
+
scaleMobile: 1.00,
|
| 240 |
+
color: 0x3f3f6e,
|
| 241 |
+
shininess: 100.00,
|
| 242 |
+
waveHeight: 20.00,
|
| 243 |
+
waveSpeed: 0.50,
|
| 244 |
+
zoom: 0.8
|
| 245 |
+
});
|
| 246 |
+
|
| 247 |
+
// Dropzone functionality
|
| 248 |
+
const dropzone = document.getElementById('dropzone');
|
| 249 |
+
const fileInput = document.getElementById('fileInput');
|
| 250 |
+
const previewContainer = document.getElementById('previewContainer');
|
| 251 |
+
const imagePreview = document.getElementById('imagePreview');
|
| 252 |
+
const removeImage = document.getElementById('removeImage');
|
| 253 |
+
|
| 254 |
+
dropzone.addEventListener('click', () => fileInput.click());
|
| 255 |
+
|
| 256 |
+
fileInput.addEventListener('change', (e) => {
|
| 257 |
+
if (e.target.files.length) {
|
| 258 |
+
const file = e.target.files[0];
|
| 259 |
+
const reader = new FileReader();
|
| 260 |
+
|
| 261 |
+
reader.onload = (event) => {
|
| 262 |
+
imagePreview.src = event.target.result;
|
| 263 |
+
previewContainer.classList.remove('hidden');
|
| 264 |
+
dropzone.classList.add('hidden');
|
| 265 |
+
};
|
| 266 |
+
|
| 267 |
+
reader.readAsDataURL(file);
|
| 268 |
+
}
|
| 269 |
+
});
|
| 270 |
+
|
| 271 |
+
removeImage.addEventListener('click', () => {
|
| 272 |
+
fileInput.value = '';
|
| 273 |
+
previewContainer.classList.add('hidden');
|
| 274 |
+
dropzone.classList.remove('hidden');
|
| 275 |
+
});
|
| 276 |
+
|
| 277 |
+
// Example prompts
|
| 278 |
+
document.querySelectorAll('.example-item').forEach(item => {
|
| 279 |
+
item.addEventListener('click', () => {
|
| 280 |
+
const prompt = item.getAttribute('data-example');
|
| 281 |
+
document.getElementById('promptInput').value = prompt;
|
| 282 |
+
});
|
| 283 |
+
});
|
| 284 |
+
|
| 285 |
+
// Generate button
|
| 286 |
+
document.getElementById('generateBtn').addEventListener('click', () => {
|
| 287 |
+
if (!fileInput.files.length) {
|
| 288 |
+
alert('الرجاء تحميل صورة أولاً');
|
| 289 |
+
return;
|
| 290 |
+
}
|
| 291 |
+
|
| 292 |
+
const prompt = document.getElementById('promptInput').value.trim();
|
| 293 |
+
if (!prompt) {
|
| 294 |
+
alert('الرجاء إضافة تعليمات التعديل');
|
| 295 |
+
return;
|
| 296 |
+
}
|
| 297 |
+
|
| 298 |
+
// Show loading state
|
| 299 |
+
document.getElementById('initialState').classList.add('hidden');
|
| 300 |
+
document.getElementById('loadingState').classList.remove('hidden');
|
| 301 |
+
|
| 302 |
+
// Simulate AI processing (in a real app, this would be an API call)
|
| 303 |
+
setTimeout(() => {
|
| 304 |
+
document.getElementById('loadingState').classList.add('hidden');
|
| 305 |
+
document.getElementById('resultContainer').classList.remove('hidden');
|
| 306 |
+
|
| 307 |
+
// Use a mock result (in a real app, this would be the processed image from the API)
|
| 308 |
+
document.getElementById('resultImage').src = imagePreview.src;
|
| 309 |
+
}, 3000);
|
| 310 |
+
});
|
| 311 |
+
</script>
|
| 312 |
+
</body>
|
| 313 |
</html>
|