Spaces:

mahdirahdar
/

first

Running

App Files Files Community

mahdirahdar commited on Jul 20, 2025

Commit

8fe58c9

verified ·

1 Parent(s): a3f2618

میخوام بعد از اینکه طرح رو از کاربر گرفت ، دقیقا ایده با خلاقیت هوش مصنوعی روی خود لباس پیاده بشه - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +595 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: First
-emoji: ⚡
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: first
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,595 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>استودیو مد هوش مصنوعی - لباس زنانه سفارشی</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>
+        .gradient-bg {
+            background: linear-gradient(135deg, #fff0f6 0%, #ffdeeb 100%);
+        }
+        .fabric-pattern {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjYiPgo8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMNiA2IiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMC41Ij48L3BhdGg+CjxwYXRoIGQ9Ik02IDBMMCA2IiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMC41Ij48L3BhdGg+Cjwvc3ZnPg==');
+        }
+        .dress-display {
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .dress-display:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .color-option {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .color-option:hover {
+            transform: scale(1.2);
+        }
+        .color-option.selected {
+            transform: scale(1.3);
+            box-shadow: 0 0 0 2px white, 0 0 0 4px #4f46e5;
+        }
+        .pattern-option {
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+            transition: all 0.2s;
+            background-size: cover;
+        }
+        .pattern-option:hover {
+            transform: scale(1.1);
+        }
+        .pattern-option.selected {
+            transform: scale(1.15);
+            box-shadow: 0 0 0 2px white, 0 0 0 4px #4f46e5;
+        }
+        .loading-spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen font-sans">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row justify-between items-center mb-12">
+            <div class="flex items-center mb-4 md:mb-0">
+                <i class="fas fa-tshirt text-4xl text-pink-500 mr-3"></i>
+                <h1 class="text-3xl font-bold text-gray-800">استودیو مد هوش مصنوعی</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-user-circle mr-2"></i> طرح‌های من
+                </button>
+                <button class="bg-white hover:bg-gray-100 text-pink-500 px-4 py-2 rounded-lg border border-pink-500 flex items-center">
+                    <i class="fas fa-shopping-cart mr-2"></i> سبد خرید
+                </button>
+            </div>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Panel - Design Controls -->
+            <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-1">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-6">لباس خود را طراحی کنید</h2>
+                <!-- Style Selection -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب سبک</h3>
+                    <div class="grid grid-cols-2 gap-3">
+                        <button class="style-btn bg-gray-100 hover:bg-pink-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="casual">
+                            <i class="fas fa-tshirt mr-2"></i> معمولی
+                        </button>
+                        <button class="style-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="formal">
+                            <i class="fas fa-user-tie mr-2"></i> رسمی
+                        </button>
+                        <button class="style-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="party">
+                            <i class="fas fa-glass-cheers mr-2"></i> مهمانی
+                        </button>
+                        <button class="style-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="sport">
+                            <i class="fas fa-running mr-2"></i> ورزشی
+                        </button>
+                    </div>
+                </div>
+                <!-- Color Selection -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب رنگ</h3>
+                    <div class="flex flex-wrap gap-3">
+                        <div class="color-option bg-red-500 selected" data-color="#ef4444"></div>
+                        <div class="color-option bg-pink-500" data-color="#ec4899"></div>
+                        <div class="color-option bg-purple-500" data-color="#a855f7"></div>
+                        <div class="color-option bg-indigo-500" data-color="#6366f1"></div>
+                        <div class="color-option bg-blue-500" data-color="#3b82f6"></div>
+                        <div class="color-option bg-green-500" data-color="#10b981"></div>
+                        <div class="color-option bg-yellow-500" data-color="#f59e0b"></div>
+                        <div class="color-option bg-gray-500" data-color="#6b7280"></div>
+                        <div class="color-option bg-black" data-color="#000000"></div>
+                        <div class="color-option bg-white border border-gray-300" data-color="#ffffff"></div>
+                    </div>
+                    <div class="mt-3">
+                        <label for="custom-color" class="block text-sm font-medium text-gray-700 mb-1">یا رنگ دلخواه انتخاب کنید:</label>
+                        <input type="color" id="custom-color" value="#ef4444" class="w-full h-10 cursor-pointer">
+                    </div>
+                </div>
+                <!-- Pattern Selection -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب طرح</h3>
+                    <div class="flex flex-wrap gap-3">
+                        <div class="pattern-option selected" data-pattern="solid" style="background-color: #ef4444;"></div>
+                        <div class="pattern-option" data-pattern="stripes" style="background: linear-gradient(45deg, #ef4444 25%, #ffffff 25%, #ffffff 50%, #ef4444 50%, #ef4444 75%, #ffffff 75%, #ffffff 100%); background-size: 14.14px 14.14px;"></div>
+                        <div class="pattern-option" data-pattern="polka" style="background: radial-gradient(circle, #ef4444 20%, transparent 20%), #ffffff; background-size: 10px 10px;"></div>
+                        <div class="pattern-option" data-pattern="floral" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTQwIDBDMjAgMTAgMTAgMzAgMTAgNTBjMCAyMCAxMCA0MCAzMCA1MCAyMC0xMCAzMC0zMCAzMC01MEM3MCAzMCA2MCAxMCA0MCAweiIgZmlsbD0iI2VmNDQ0NCIvPjwvc3ZnPg==');"></div>
+                        <div class="pattern-option" data-pattern="geometric" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTAgMEg1MFY1MEgweiIgZmlsbD0iI2VmNDQ0NCIvPjxwYXRoIGQ9Ik01MCA1MEgxMDBWMTAwSDUweiIgZmlsbD0iI2VmNDQ0NCIvPjwvc3ZnPg==');"></div>
+                    </div>
+                </div>
+                <!-- AI Suggestions -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-gray-700 mb-3">پیشنهادهای هوش مصنوعی</h3>
+                    <div class="bg-pink-50 rounded-lg p-4">
+                        <p class="text-pink-800 mb-3">"بر اساس ترندهای فعلی، پیشنهاد می‌کنیم طرح گل‌دار با رنگ‌های پاستلی برای ظاهری بهاری امتحان کنید."</p>
+                        <button class="ai-suggestion-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-1 px-3 rounded-full text-sm flex items-center">
+                            <i class="fas fa-magic mr-1"></i> اعمال پیشنهاد
+                        </button>
+                    </div>
+                </div>
+                <!-- Size Selection -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب سایز</h3>
+                    <div class="grid grid-cols-5 gap-2">
+                        <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="XS">XS</button>
+                        <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="S">S</button>
+                        <button class="size-btn bg-pink-100 border-pink-500 text-pink-700 py-2 rounded-lg border-2" data-size="M">M</button>
+                        <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="L">L</button>
+                        <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="XL">XL</button>
+                    </div>
+                </div>
+                <!-- Custom Text -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-gray-700 mb-3">افزودن متن سفارشی</h3>
+                    <input type="text" placeholder="متن خود را اینجا وارد کنید" class="custom-text w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <div class="mt-2 flex items-center">
+                        <label for="text-color" class="mr-2 text-sm text-gray-700">رنگ:</label>
+                        <input type="color" id="text-color" value="#000000" class="h-6 w-6 cursor-pointer">
+                        <button class="ml-auto text-sm bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">افزودن متن</button>
+                    </div>
+                </div>
+                <!-- Action Buttons -->
+                <div class="flex flex-col space-y-3">
+                    <button id="generate-btn" class="bg-pink-500 hover:bg-pink-600 text-white py-3 rounded-lg font-medium flex items-center justify-center">
+                        <i class="fas fa-robot mr-2"></i> تولید با هوش مصنوعی
+                    </button>
+                    <button class="bg-white hover:bg-gray-100 text-pink-500 py-3 rounded-lg border-2 border-pink-500 font-medium flex items-center justify-center">
+                        <i class="fas fa-save mr-2"></i> ذخیره طرح
+                    </button>
+                    <button class="bg-white hover:bg-gray-100 text-gray-800 py-3 rounded-lg border border-gray-300 font-medium flex items-center justify-center">
+                        <i class="fas fa-shopping-bag mr-2"></i> افزودن به سبد
+                    </button>
+                </div>
+            </div>
+            <!-- Center Panel - Dress Display -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-2xl font-semibold text-gray-800">طراحی سفارشی شما</h2>
+                        <div class="flex space-x-2">
+                            <button class="view-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full" data-view="front">
+                                <i class="fas fa-user"></i>
+                            </button>
+                            <button class="view-btn bg-pink-100 text-pink-700 p-2 rounded-full" data-view="back">
+                                <i class="fas fa-user-alt"></i>
+                            </button>
+                            <button class="view-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full" data-view="side">
+                                <i class="fas fa-user-friends"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="dress-display fabric-pattern rounded-xl overflow-hidden relative" style="height: 500px; background-color: #ef4444;">
+                        <!-- Dress will be displayed here -->
+                        <div id="dress-container" class="h-full flex items-center justify-center">
+                            <div class="text-center">
+                                <i class="fas fa-tshirt text-6xl text-white opacity-50 mb-3"></i>
+                                <p class="text-white opacity-70">با استفاده از کنترل‌ها لباس خود را سفارشی کنید</p>
+                            </div>
+                        </div>
+                        <!-- Loading overlay -->
+                        <div id="loading-overlay" class="hidden absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+                            <div class="text-white text-center">
+                                <i class="fas fa-spinner loading-spinner text-4xl mb-2"></i>
+                                <p>هوش مصنوعی در حال تولید طرح شماست...</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div>
+                            <p class="text-gray-600">سبک فعلی: <span class="font-medium" id="current-style">معمولی</span></p>
+                            <p class="text-gray-600">رنگ: <span class="font-medium" id="current-color">قرمز</span></p>
+                        </div>
+                        <div class="flex space-x-2">
+                            <button class="zoom-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full">
+                                <i class="fas fa-search-plus"></i>
+                            </button>
+                            <button class="zoom-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full">
+                                <i class="fas fa-search-minus"></i>
+                            </button>
+                            <button class="rotate-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- AI Recommendations -->
+                <div class="bg-white rounded-xl shadow-lg p-6">
+                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">پیشنهادهای هوش مصنوعی</h2>
+                    <p class="text-gray-600 mb-4">هوش مصنوعی ما با تحلیل ترندهای مد و ترجیحات شما این موارد تکمیلی را پیشنهاد می‌کند:</p>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <div class="bg-gray-50 rounded-lg p-3 text-center">
+                            <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-shoe-prints text-3xl text-gray-400"></i>
+                            </div>
+                            <p class="font-medium">کفش هماهنگ</p>
+                            <p class="text-sm text-gray-500">$79.99</p>
+                            <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">افزودن</button>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-3 text-center">
+                            <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-ring text-3xl text-gray-400"></i>
+                            </div>
+                            <p class="font-medium">گردنبند طلا</p>
+                            <p class="text-sm text-gray-500">$129.99</p>
+                            <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">Add</button>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-3 text-center">
+                            <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-hat-cowboy text-3xl text-gray-400"></i>
+                            </div>
+                            <p class="font-medium">کلاه تابستانی</p>
+                            <p class="text-sm text-gray-500">$39.99</p>
+                            <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">Add</button>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-3 text-center">
+                            <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-bag-shopping text-3xl text-gray-400"></i>
+                            </div>
+                            <p class="font-medium">کیف چرمی</p>
+                            <p class="text-sm text-gray-500">$89.99</p>
+                            <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">Add</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Current design state
+            const designState = {
+                style: 'casual',
+                color: '#ef4444',
+                pattern: 'solid',
+                size: 'M',
+                view: 'front',
+                customText: '',
+                textColor: '#000000'
+            };
+            // Color name mapping
+            const colorNames = {
+                '#ef4444': 'قرمز',
+                '#ec4899': 'صورتی',
+                '#a855f7': 'بنفش',
+                '#6366f1': 'نیلی',
+                '#3b82f6': 'آبی',
+                '#10b981': 'سبز',
+                '#f59e0b': 'زرد',
+                '#6b7280': 'خاکستری',
+                '#000000': 'مشکی',
+                '#ffffff': 'سفید'
+            };
+            // Style name mapping
+            const styleNames = {
+                'casual': 'معمولی',
+                'formal': 'رسمی',
+                'party': 'مهمانی',
+                'sport': 'ورزشی'
+            };
+            // DOM elements
+            const colorOptions = document.querySelectorAll('.color-option');
+            const patternOptions = document.querySelectorAll('.pattern-option');
+            const styleButtons = document.querySelectorAll('.style-btn');
+            const sizeButtons = document.querySelectorAll('.size-btn');
+            const viewButtons = document.querySelectorAll('.view-btn');
+            const customColorInput = document.getElementById('custom-color');
+            const customTextInput = document.querySelector('.custom-text');
+            const textColorInput = document.getElementById('text-color');
+            const generateBtn = document.getElementById('generate-btn');
+            const loadingOverlay = document.getElementById('loading-overlay');
+            const currentStyleElement = document.getElementById('current-style');
+            const currentColorElement = document.getElementById('current-color');
+            const dressContainer = document.getElementById('dress-container');
+            const aiSuggestionBtn = document.querySelector('.ai-suggestion-btn');
+            // Initialize
+            updateDisplay();
+            // Event listeners
+            colorOptions.forEach(option => {
+                option.addEventListener('click', function() {
+                    // Remove selected class from all options
+                    colorOptions.forEach(opt => opt.classList.remove('selected'));
+                    // Add selected class to clicked option
+                    this.classList.add('selected');
+                    // Update design state
+                    designState.color = this.getAttribute('data-color');
+                    // Update custom color picker
+                    customColorInput.value = designState.color;
+                    // Update display
+                    updateDisplay();
+                });
+            });
+            patternOptions.forEach(option => {
+                option.addEventListener('click', function() {
+                    // Remove selected class from all options
+                    patternOptions.forEach(opt => opt.classList.remove('selected'));
+                    // Add selected class to clicked option
+                    this.classList.add('selected');
+                    // Update design state
+                    designState.pattern = this.getAttribute('data-pattern');
+                    // Update display
+                    updateDisplay();
+                });
+            });
+            styleButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Update design state
+                    designState.style = this.getAttribute('data-style');
+                    // Update display
+                    updateDisplay();
+                });
+            });
+            sizeButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Remove selected styling from all buttons
+                    sizeButtons.forEach(btn => {
+                        btn.classList.remove('bg-indigo-100', 'border-indigo-500', 'text-indigo-700', 'border-2');
+                        btn.classList.add('bg-gray-100', 'border-gray-200', 'text-gray-800');
+                    });
+                    // Add selected styling to clicked button
+                    this.classList.remove('bg-gray-100', 'border-gray-200', 'text-gray-800');
+                    this.classList.add('bg-indigo-100', 'border-indigo-500', 'text-indigo-700', 'border-2');
+                    // Update design state
+                    designState.size = this.getAttribute('data-size');
+                });
+            });
+            viewButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // Remove selected styling from all buttons
+                    viewButtons.forEach(btn => {
+                        btn.classList.remove('bg-indigo-100', 'text-indigo-700');
+                        btn.classList.add('bg-gray-100', 'text-gray-800');
+                    });
+                    // Add selected styling to clicked button
+                    this.classList.remove('bg-gray-100', 'text-gray-800');
+                    this.classList.add('bg-indigo-100', 'text-indigo-700');
+                    // Update design state
+                    designState.view = this.getAttribute('data-view');
+                    // Update display
+                    updateDisplay();
+                });
+            });
+            customColorInput.addEventListener('input', function() {
+                // Update design state
+                designState.color = this.value;
+                // Find matching color option if exists
+                let matchingOption = null;
+                colorOptions.forEach(option => {
+                    if (option.getAttribute('data-color').toLowerCase() === this.value.toLowerCase()) {
+                        matchingOption = option;
+                    }
+                });
+                // Update selected color option
+                colorOptions.forEach(opt => opt.classList.remove('selected'));
+                if (matchingOption) {
+                    matchingOption.classList.add('selected');
+                } else {
+                    // If custom color doesn't match any option, select the custom color
+                    // (in a real app, you might add a new option dynamically)
+                }
+                // Update display
+                updateDisplay();
+            });
+            customTextInput.addEventListener('input', function() {
+                designState.customText = this.value;
+            });
+            textColorInput.addEventListener('input', function() {
+                designState.textColor = this.value;
+            });
+            generateBtn.addEventListener('click', function() {
+                // Show loading overlay
+                loadingOverlay.classList.remove('hidden');
+                // Simulate AI generation (in a real app, this would call an API)
+                setTimeout(() => {
+                    // Hide loading overlay
+                    loadingOverlay.classList.add('hidden');
+                    // Update display with "AI-generated" design
+                    updateDisplay(true);
+                    // Show success message
+                    alert('هوش مصنوعی یک طرح جدید بر اساس ترجیحات شما تولید کرد!');
+                }, 2000);
+            });
+            aiSuggestionBtn.addEventListener('click', function() {
+                // Apply AI suggestion
+                designState.color = '#a855f7'; // Purple
+                designState.pattern = 'floral';
+                // Update UI to match new state
+                colorOptions.forEach(opt => opt.classList.remove('selected'));
+                document.querySelector('.color-option[data-color="#a855f7"]').classList.add('selected');
+                patternOptions.forEach(opt => opt.classList.remove('selected'));
+                document.querySelector('.pattern-option[data-pattern="floral"]').classList.add('selected');
+                customColorInput.value = designState.color;
+                // Update display
+                updateDisplay();
+                // Show message
+                alert('پیشنهاد هوش مصنوعی اعمال شد!');
+            });
+            // Update the dress display
+            function updateDisplay(isAIGenerated = false) {
+                // Update info text
+                currentStyleElement.textContent = styleNames[designState.style];
+                currentColorElement.textContent = colorNames[designState.color] || 'سفارشی';
+                const dressDisplay = document.querySelector('.dress-display');
+                const initialPrompt = document.getElementById('initial-prompt');
+                const aiDesign = document.getElementById('ai-design');
+                if (isAIGenerated) {
+                    initialPrompt.classList.add('hidden');
+                    aiDesign.classList.remove('hidden');
+                    // Generate AI-enhanced design
+                    const designElements = {
+                        casual: ['fas fa-tshirt', 'طرح روزمره'],
+                        formal: ['fas fa-user-tie', 'طراحی رسمی'],
+                        party: ['fas fa-glass-cheers', 'طرح مهمانی'],
+                        sport: ['fas fa-running', 'طراحی ورزشی']
+                    };
+                    const [icon, title] = designElements[designState.style];
+                    const colorName = colorNames[designState.color] || 'سفارشی';
+                    aiDesign.innerHTML = `
+                        <div class="text-center p-4 bg-white bg-opacity-20 rounded-xl">
+                            <i class="${icon} text-6xl text-white mb-3"></i>
+                            <h3 class="text-xl font-bold text-white">${title}</h3>
+                            <p class="text-white">رنگ: ${colorName}</p>
+                            <p class="text-white">طرح: ${designState.pattern}</p>
+                            <div class="mt-4 w-full h-1 bg-white bg-opacity-50"></div>
+                            <p class="text-white mt-2 text-sm">طراحی شده با هوش مصنوعی</p>
+                        </div>
+                    `;
+                    // Apply creative pattern based on user selection
+                    dressDisplay.style.background = getAIPattern(designState.pattern, designState.color);
+                } else {
+                    initialPrompt.classList.remove('hidden');
+                    aiDesign.classList.add('hidden');
+                    dressDisplay.style.background = getBasicPattern(designState.pattern, designState.color);
+                }
+            }
+            function getBasicPattern(pattern, color) {
+                switch(pattern) {
+                    case 'solid': return color;
+                    case 'stripes':
+                        return `linear-gradient(45deg, ${color} 25%, #ffffff 25%, #ffffff 50%, ${color} 50%, ${color} 75%, #ffffff 75%, #ffffff 100%)`;
+                    case 'polka':
+                        return `radial-gradient(circle, ${color} 20%, transparent 20%), #ffffff`;
+                    case 'floral':
+                        return `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTQwIDBDMjAgMTAgMTAgMzAgMTAgNTBjMCAyMCAxMCA0MCAzMCA1MCAyMC0xMCAzMC0zMCAzMC01MEM3MCAzMCA2MCAxMCA0MCB6IiBmaWxsPSJ${color.substring(1)}Ii8+PC9zdmc+')`;
+                    case 'geometric':
+                        return `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTAgMEg1MFY1MEgweiIgZmlsbD0i${color.substring(1)}Ii8+PHBhdGggZD0iTTUwIDBIMTAwVjUwSDUweiIgZmlsbD0i${color.substring(1)}Ii8+PC9zdmc+')`;
+                    default: return color;
+                }
+            }
+            function getAIPattern(pattern, color) {
+                // More creative patterns for AI version
+                switch(pattern) {
+                    case 'solid':
+                        return `linear-gradient(135deg, ${color} 0%, ${shadeColor(color, -20)} 100%)`;
+                    case 'stripes':
+                        return `repeating-linear-gradient(45deg, ${color}, ${color} 10px, ${shadeColor(color, -30)} 10px, ${shadeColor(color, -30)} 20px)`;
+                    case 'polka':
+                        return `radial-gradient(circle at 10px 10px, ${color} 2px, transparent 2px),
+                                radial-gradient(circle at 10px 10px, ${color} 2px, transparent 2px) ${shadeColor(color, 20)};
+                                background-size: 20px 20px`;
+                    case 'floral':
+                        return `url('data:image/svg+xml;base64,${btoa(`
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+                                <path d="M50 0C30 15 15 30 0 50c15 20 30 35 50 50 20-15 35-30 50-50C85 30 70 15 50 0z"
+                                    fill="${color}"/>
+                                <path d="M30 20C15 30 5 45 0 60c10 15 25 25 40 30-5-15-5-30 0-45-5 5-10 10-10 15z"
+                                    fill="${shadeColor(color, 20)}"/>
+                            </svg>`)}')`;
+                    case 'geometric':
+                        return `url('data:image/svg+xml;base64,${btoa(`
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+                                <polygon points="0,0 50,0 0,50" fill="${color}"/>
+                                <polygon points="50,0 100,0 100,50" fill="${shadeColor(color, -20)}"/>
+                                <polygon points="0,50 0,100 50,100" fill="${shadeColor(color, 20)}"/>
+                                <polygon points="50,100 100,100 100,50" fill="${shadeColor(color, -30)}"/>
+                            </svg>`)}')`;
+                    default:
+                        return `linear-gradient(135deg, ${color} 0%, ${shadeColor(color, -20)} 100%)`;
+                }
+            }
+            function shadeColor(color, percent) {
+                let R = parseInt(color.substring(1,3), 16);
+                let G = parseInt(color.substring(3,5), 16);
+                let B = parseInt(color.substring(5,7), 16);
+                R = parseInt(R * (100 + percent) / 100);
+                G = parseInt(G * (100 + percent) / 100);
+                B = parseInt(B * (100 + percent) / 100);
+                R = (R<255)?R:255;
+                G = (G<255)?G:255;
+                B = (B<255)?B:255;
+                R = Math.round(R);
+                G = Math.round(G);
+                B = Math.round(B);
+                const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
+                const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
+                const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
+                return "#"+RR+GG+BB;
+            }
+        });
+    </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=mahdirahdar/first" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>