Update index.html

index.html

@@ -35,23 +35,40 @@
         @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
         body {
-            font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary);
-            margin: 0; padding: 2.5rem 1rem; display: flex; justify-content: center;
-            align-items: flex-start; min-height: 100vh;
+            font-family: var(--app-font);
+            background-color: var(--app-bg);
+            color: var(--text-primary);
+            margin: 0;
+            padding: 2.5rem 1rem;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
         }
         .container { max-width: 820px; width: 100%; }
 
-        header { text-align: center; margin-bottom: 2.5rem; animation: fadeIn 0.8s 0.1s ease-out backwards; }
+        header {
+            text-align: center;
+            margin-bottom: 2.5rem;
+            animation: fadeIn 0.8s 0.1s ease-out backwards;
+        }
         h1 {
-            font-size: 2.8rem; font-weight: 800; margin: 0 0 0.8rem 0;
+            font-size: 2.8rem;
+            font-weight: 800;
+            margin: 0 0 0.8rem 0;
             background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -1px;
         }
         .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; }
 
         main, .gallery-section {
-            padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card);
-            box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border);
+            padding: 3rem;
+            background-color: var(--panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--panel-border);
             animation: fadeIn 0.8s 0.3s ease-out backwards;
         }
         .gallery-section { margin-top: 3rem; animation-delay: 0.5s; }
@@ -59,26 +76,59 @@
         .form-group { margin-bottom: 2.5rem; }
         .form-group:last-child { margin-bottom: 0; }
         label.form-label {
-            display: flex; align-items: center; gap: 0.75rem; font-weight: 700;
-            color: var(--text-primary); font-size: 1.2em; margin-bottom: 1.2rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            font-size: 1.2em;
+            margin-bottom: 1.2rem;
         }
         label.form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
 
-        /* --- Uploader Style to Match Reference Image --- */
-        #drop-zone {
-            position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input);
-            padding: 2rem; text-align: center; cursor: pointer; transition: var(--transition-smooth);
-            background-color: var(--input-bg); min-height: 250px; display: flex; align-items: center;
-            justify-content: center; overflow: hidden;
+        /* --- Uploader Style with Image Preview --- */
+        #upload-container.has-file #upload-area { display: none; }
+        #upload-container:not(.has-file) #file-preview { display: none; }
+
+        #upload-area {
+            border: 2px dashed var(--input-border);
+            border-radius: var(--radius-input);
+            padding: 2.5rem;
+            text-align: center;
+            cursor: pointer;
+            transition: var(--transition-smooth);
+            background-color: var(--input-bg);
+        }
+        #upload-area.drag-over, #upload-area:hover {
+            border-color: var(--accent-primary);
+            background-color: #fff;
+            box-shadow: 0 0 15px var(--accent-primary-glow);
+        }
+        #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); margin-bottom: 1rem; stroke-width: 1.5; opacity: 0.8; }
+        #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
+        
+        #file-preview {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+            padding: 1rem;
+            background-color: var(--input-bg);
+            border-radius: var(--radius-input);
+            border: 1px solid var(--panel-border);
+            animation: fadeIn 0.3s;
         }
-        #drop-zone.drag-over, #drop-zone:hover { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); }
-        #drop-zone-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; transition: opacity 0.3s ease; }
-        #drop-zone-content svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; }
-        #drop-zone-content p { margin: 0; color: var(--text-secondary); font-weight: 500; }
-        #image-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 1rem; box-sizing: border-box; background-color: var(--input-bg); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; pointer-events: none; }
-        #image-preview.visible { opacity: 1; visibility: visible; pointer-events: auto; }
-        #remove-preview-btn { position: absolute; top: 1rem; left: 1rem; background-color: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; z-index: 10; }
-        #remove-preview-btn.visible { opacity: 1; visibility: visible; }
+        #preview-image {
+            width: 80px;
+            height: 80px;
+            object-fit: cover;
+            border-radius: 8px;
+            flex-shrink: 0;
+            border: 1px solid var(--panel-border);
+        }
+        #file-details { flex-grow: 1; }
+        #file-name { font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        #remove-file-btn { background: none; border: 1px solid var(--input-border); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 500; font-family: var(--app-font); }
+        #remove-file-btn:hover { color: var(--danger-color); border-color: var(--danger-color); }
         
         textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 90px; resize: vertical; }
         textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
@@ -87,11 +137,17 @@
         #submit-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; }
         #submit-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
         
-        #result-container { min-height: 220px; position: relative; box-sizing: border-box; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; }
+        #result-container {
+            min-height: 250px; position: relative;
+            padding: 1rem; background-color: var(--input-bg);
+            border-radius: var(--radius-card); border: 2px dashed var(--input-border);
+            box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth);
+            display: flex; align-items: center; justify-content: center;
+        }
         #result-container.loading, #result-container.has-content { border-style: solid; border-color: var(--panel-border); }
         #loading-placeholder { display: none; flex-direction: column; align-items: center; gap: 1.5rem; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; }
-        .orbital-loader { width: 100px; height: 100px; position: relative; animation: spin 10s linear infinite; }
+        .orbital-loader { width: 110px; height: 110px; position: relative; animation: spin 10s linear infinite; } /* MODIFIED: Increased size */
         .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; }
         .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: spin 2.8s linear infinite reverse; }
         .orbit:nth-child(2) { width: 70px; height: 70px; margin: -35px 0 0 -35px; animation: spin 3.8s linear infinite; }
@@ -100,13 +156,13 @@
         .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); transform: translateY(-50%); }
         .loading-text { font-weight: 500; color: var(--text-secondary); }
         
-        #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; }
+        #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; } /* MODIFIED: Larger results */
         #result-container.has-content #result-grid { display: grid; }
-        #result-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
+        #result-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
         #result-grid img:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); z-index: 10; position: relative; }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
         
-        /* History Gallery Styles */
+        /* --- History Gallery Styles --- */
         .gallery-header { display: flex; justify-content: space-between; align-items: center; }
         #clear-history-btn { background: none; border: 1px solid var(--panel-border); color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-btn); cursor: pointer; display: none; align-items: center; gap: 0.5rem; font-family: var(--app-font); font-weight: 500; transition: all 0.2s; }
         #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
@@ -114,14 +170,16 @@
         #history-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
         #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: var(--text-secondary); grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); }
         .history-item { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1.5rem; transition: var(--transition-smooth); }
-        .history-item-prompt { font-weight: 600; margin: 0 0 1rem 0; word-break: break-word; }
+        .history-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
+        .history-item-prompt { font-weight: 600; margin: 0 0 1rem 0; word-break: break-word; padding-left: 30px; }
         .history-item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
         .history-item-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--panel-border); }
         .history-item-grid img:hover { transform: scale(1.1); box-shadow: var(--shadow-md); z-index: 5; position: relative; }
-        .history-item-delete-btn { position: absolute; top: 0.75rem; left: 0.75rem; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); color: var(--danger-color); border: 1px solid var(--panel-border); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; opacity: 0; transition: all 0.2s; }
-        .history-item:hover .history-item-delete-btn { opacity: 1; }
+        .history-delete-btn { /* NEW */ position: absolute; top: 1rem; left: 1rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: var(--transition-smooth); }
+        .history-delete-btn:hover { background-color: var(--panel-border); color: var(--danger-color); }
+        .history-delete-btn svg { width: 18px; height: 18px; }
 
-        /* Lightbox Styles */
+        /* --- Lightbox Styles --- */
         #lightbox { position: fixed; inset: 0; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s; }
         #lightbox.visible { display: flex; opacity: 1; }
         #lightbox-content { position: relative; animation: fadeIn 0.3s ease; }
@@ -131,169 +189,313 @@
         #lightbox-close { top: -50px; right: 0; font-size: 1.8rem; }
         #lightbox-download { top: -50px; left: 0; }
         #lightbox-download svg { width: 22px; height: 22px; }
+        #lightbox-download .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
 
         @media (max-width: 768px) {
             main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.2rem; }
-            #result-grid { grid-template-columns: 1fr; } /* Single column on small screens for bigger images */
             .history-item-grid { grid-template-columns: repeat(2, 1fr); }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <header><h1>فتوشاپ هوش مصنوعی ✨</h1><p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p></header>
+        <header>
+            <h1>فتوشاپ هوش مصنوعی ✨</h1>
+            <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p>
+        </header>
+
         <main>
             <div class="form-group">
-                <label for="drop-zone" class="form-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>۱. تصویر خود را انتخاب کنید</label>
-                <div id="drop-zone">
-                    <div id="drop-zone-content"><svg><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</p></div>
-                    <img id="image-preview" src="#" alt="پیش‌نمایش تصویر"><button type="button" id="remove-preview-btn" title="حذف تصویر">&times;</button>
+                <label for="upload-area" class="form-label">
+                    <svg xmlns="http://www.w.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
+                    ۱. تصویر خود را انتخاب کنید
+                </label>
+                <div id="upload-container">
+                    <label id="upload-area">
+                        <div id="upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
+                        <p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</p>
+                    </label>
+                    <div id="file-preview">
+                        <img id="preview-image" src="" alt="Preview"> <!-- NEW: Image preview element -->
+                        <div id="file-details">
+                            <span id="file-name"></span>
+                            <button type="button" id="remove-file-btn">حذف و انتخاب مجدد</button>
+                        </div>
+                    </div>
                 </div>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
+
             <div class="form-group">
-                <label for="prompt-input" class="form-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>۲. دستور ویرایش را بنویسید</label>
+                <label for="prompt-input" class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                    ۲. دستور ویرایش را بنویسید
+                </label>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
-                <button id="submit-btn" disabled><span id="btn-text">خلق کن</span><div class="spinner"></div></button>
+                <button id="submit-btn" disabled>
+                    <span id="btn-text">خلق کن</span>
+                    <div class="spinner"></div>
+                </button>
                 <p id="error-message"></p>
             </div>
+            
             <div class="form-group">
-                 <label class="form-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>۳. نتیجه را ببینید</label>
+                 <label class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>
+                     ۳. نتیجه را ببینید
+                </label>
                 <div id="result-container">
-                    <div id="loading-placeholder"><div class="orbital-loader"><div class="orbit"><div class="satellite"></div></div><div class="orbit"><div class="satellite"></div></div></div><p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p></div>
+                    <div id="loading-placeholder">
+                        <div class="orbital-loader"><div class="orbit"><div class="satellite"></div></div><div class="orbit"><div class="satellite"></div></div></div>
+                        <p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p>
+                    </div>
                     <div id="result-grid"></div>
                 </div>
             </div>
         </main>
+        
         <section class="gallery-section">
             <div class="gallery-header">
-                 <label class="form-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>گالری و تاریخچه شما</label>
-                <button id="clear-history-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><span>پاک کردن</span></button>
+                 <label class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+                    گالری و تاریخچه شما
+                </label>
+                <button id="clear-history-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    <span>پاک کردن همه</span>
+                </button>
             </div>
             <div id="history-grid"></div>
         </section>
     </div>
+
     <div id="lightbox">
         <div id="lightbox-content">
-             <img id="lightbox-img" src=""><button id="lightbox-close" class="lightbox-btn">&times;</button>
-             <a id="lightbox-download" href="#" title="دانلود تصویر" class="lightbox-btn"><svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg></a>
+             <img id="lightbox-img" src="">
+             <button id="lightbox-close" class="lightbox-btn">&times;</button>
+             <a id="lightbox-download" title="دانلود تصویر" class="lightbox-btn">
+                 <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+                 <div class="spinner"></div>
+             </a>
         </div>
     </div>
     
     <script>
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         
-        const dropZone = document.getElementById('drop-zone'), dropZoneContent = document.getElementById('drop-zone-content'), fileInput = document.getElementById('file-input'), imagePreview = document.getElementById('image-preview'), removePreviewBtn = document.getElementById('remove-preview-btn'), promptInput = document.getElementById('prompt-input'), submitBtn = document.getElementById('submit-btn'), btnText = document.getElementById('btn-text'), btnSpinner = submitBtn.querySelector('.spinner'), resultContainer = document.getElementById('result-container'), resultGrid = document.getElementById('result-grid'), errorMessage = document.getElementById('error-message'), lightbox = document.getElementById('lightbox'), lightboxImg = document.getElementById('lightbox-img'), lightboxClose = document.getElementById('lightbox-close'), lightboxDownload = document.getElementById('lightbox-download'), historyGrid = document.getElementById('history-grid'), clearHistoryBtn = document.getElementById('clear-history-btn');
+        const uploadContainer = document.getElementById('upload-container');
+        const uploadArea = document.getElementById('upload-area');
+        const fileInput = document.getElementById('file-input');
+        const filePreview = document.getElementById('file-preview');
+        const previewImage = document.getElementById('preview-image');
+        const fileNameSpan = document.getElementById('file-name');
+        const removeFileBtn = document.getElementById('remove-file-btn');
+        const promptInput = document.getElementById('prompt-input');
+        const submitBtn = document.getElementById('submit-btn');
+        const btnText = document.getElementById('btn-text');
+        const btnSpinner = submitBtn.querySelector('.spinner');
+        const resultContainer = document.getElementById('result-container');
+        const resultGrid = document.getElementById('result-grid');
+        const errorMessage = document.getElementById('error-message');
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = document.getElementById('lightbox-img');
+        const lightboxClose = document.getElementById('lightbox-close');
+        const lightboxDownload = document.getElementById('lightbox-download');
+        const historyGrid = document.getElementById('history-grid');
+        const clearHistoryBtn = document.getElementById('clear-history-btn');
 
         let uploadedFile = null;
+        let currentLightboxUrl = null;
 
-        const resetUploader = () => { uploadedFile = null; fileInput.value = ''; imagePreview.classList.remove('visible'); removePreviewBtn.classList.remove('visible'); dropZoneContent.style.opacity = '1'; checkFormState(); };
+        // --- Uploader Logic ---
+        const resetUploader = () => {
+            uploadedFile = null;
+            fileInput.value = '';
+            uploadContainer.classList.remove('has-file');
+            checkFormState();
+        };
         const handleFile = (file) => {
             if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.'); return; }
             uploadedFile = file;
+            fileNameSpan.textContent = file.name;
+            
             const reader = new FileReader();
-            reader.onload = (e) => { imagePreview.src = e.target.result; imagePreview.classList.add('visible'); removePreviewBtn.classList.add('visible'); dropZoneContent.style.opacity = '0'; };
-            reader.readAsDataURL(file); checkFormState(); clearResult();
-        };
+            reader.onload = (e) => { previewImage.src = e.target.result; };
+            reader.readAsDataURL(file);
 
-        dropZone.addEventListener('click', () => fileInput.click());
+            uploadContainer.classList.add('has-file');
+            checkFormState();
+            clearResult();
+        };
+        uploadArea.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => dropZone.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }));
-        ['dragenter', 'dragover'].forEach(e => dropZone.addEventListener(e, () => dropZone.classList.add('drag-over')));
-        ['dragleave', 'drop'].forEach(e => dropZone.addEventListener(e, () => dropZone.classList.remove('drag-over')));
-        dropZone.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
-        removePreviewBtn.addEventListener('click', (e) => { e.stopPropagation(); resetUploader(); });
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }));
+        ['dragenter', 'dragover'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.add('drag-over')));
+        ['dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')));
+        uploadArea.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
+        removeFileBtn.addEventListener('click', resetUploader);
 
+        // --- Form & Submission ---
         promptInput.addEventListener('input', checkFormState);
         function checkFormState() { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }
-
         submitBtn.addEventListener('click', async () => {
-            if (submitBtn.disabled) return; setLoading(true);
-            const formData = new FormData(); formData.append('image', uploadedFile); formData.append('prompt', promptInput.value.trim());
+            if (submitBtn.disabled) return;
+            setLoading(true);
+            const formData = new FormData();
+            formData.append('image', uploadedFile);
+            formData.append('prompt', promptInput.value.trim());
             try {
                 const response = await fetch(API_URL, { method: 'POST', body: formData });
-                if (!response.ok) { const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` })); throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`); }
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` }));
+                    throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`);
+                }
                 const result = await response.json();
-                if (result.image_urls?.length > 0) { displayResult(result.image_urls); addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls }); } 
-                else { throw new Error('��اسخ معتبری از سرور دریافت نشد.'); }
-            } catch (error) { displayError(error.message); } finally { setLoading(false); }
+                if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) {
+                    displayResult(result.image_urls);
+                    addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls });
+                } else { throw new Error('پاسخ معتبری از سرور دریافت نشد.'); }
+            } catch (error) { displayError(error.message); } 
+            finally { setLoading(false); }
         });
 
         function setLoading(isLoading) {
-            resultContainer.classList.remove('has-content'); resultContainer.classList.toggle('loading', isLoading);
-            btnSpinner.style.display = isLoading ? 'inline-block' : 'none';
-            btnText.textContent = isLoading ? 'در حال پردازش...' : 'خلق کن';
-            submitBtn.disabled = isLoading;
-            if(isLoading) { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; }
+             if (isLoading) {
+                resultContainer.classList.remove('has-content');
+                resultContainer.classList.add('loading');
+                btnSpinner.style.display = 'inline-block';
+                btnText.textContent = 'در حال پردازش...';
+                submitBtn.disabled = true;
+                resultGrid.innerHTML = '';
+                errorMessage.style.display = 'none';
+            } else {
+                resultContainer.classList.remove('loading');
+                btnSpinner.style.display = 'none';
+                btnText.textContent = 'خلق کن';
+                checkFormState();
+            }
         }
         function displayResult(imageUrls) {
             resultGrid.innerHTML = '';
-            imageUrls.forEach((url) => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر ویرایش شده'; img.addEventListener('click', () => openLightbox(url)); resultGrid.appendChild(img); });
+            imageUrls.forEach((url) => {
+                const img = document.createElement('img');
+                img.src = url;
+                img.alt = 'تصویر ویرایش شده';
+                img.addEventListener('click', () => openLightbox(url));
+                resultGrid.appendChild(img);
+            });
             resultContainer.classList.add('has-content');
         }
-        function clearResult() { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; resultContainer.classList.remove('has-content'); }
-        function displayError(message) { errorMessage.textContent = message; errorMessage.style.display = 'block'; }
+        function clearResult() {
+            resultGrid.innerHTML = '';
+            errorMessage.style.display = 'none';
+            resultContainer.classList.remove('has-content');
+        }
+        function displayError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+        }
 
-        function openLightbox(url) { lightboxImg.src = url; lightbox.classList.add('visible'); }
-        function closeLightbox() { lightbox.classList.remove('visible'); }
-        lightboxClose.addEventListener('click', closeLightbox);
-        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
-        
-        // --- FIXED DOWNLOAD FUNCTION ---
-        lightboxDownload.addEventListener('click', async (e) => {
-            e.preventDefault();
-            const url = lightboxImg.src;
+        // --- Lightbox Functions & Download Fix ---
+        function openLightbox(url) {
+            currentLightboxUrl = url;
+            lightboxImg.src = url;
+            lightbox.classList.add('visible');
+        }
+        function closeLightbox() {
+            lightbox.classList.remove('visible');
+            currentLightboxUrl = null;
+        }
+        async function handleDownload() {
+            if (!currentLightboxUrl) return;
+            const downloadBtn = lightboxDownload;
+            const spinner = downloadBtn.querySelector('.spinner');
+            const icon = downloadBtn.querySelector('svg');
+            
+            spinner.style.display = 'block';
+            icon.style.display = 'none';
             try {
-                const response = await fetch(url);
+                const response = await fetch(currentLightboxUrl);
                 const blob = await response.blob();
-                const blobUrl = URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = blobUrl;
-                link.download = `ai-edited-${Date.now()}.png`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                URL.revokeObjectURL(blobUrl);
-            } catch (error) {
-                console.error('Download failed:', error);
-                alert('دانلود ��ا مشکل مواجه شد. لطفا دوباره تلاش کنید.');
+                const objectUrl = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = objectUrl;
+                a.download = `edited-image-${Date.now()}.png`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(objectUrl);
+            } catch (e) {
+                console.error('Download failed:', e);
+                alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.');
+            } finally {
+                spinner.style.display = 'none';
+                icon.style.display = 'block';
             }
-        });
+        }
+        lightboxClose.addEventListener('click', closeLightbox);
+        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
+        lightboxDownload.addEventListener('click', handleDownload);
+
 
+        // --- History Management with Individual Delete ---
         const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
-        const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); };
-        const addToHistory = (item) => { let history = getHistory(); history.unshift(item); if (history.length > 15) history.pop(); saveHistory(history); };
-        const handleClearHistory = () => { if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) { localStorage.removeItem('aiPhotoshopHistory'); renderHistory(); }};
-        
-        // --- NEW: DELETE INDIVIDUAL HISTORY ITEM ---
-        function handleDeleteHistoryItem(index) {
-            if (confirm('آیا از حذف این مورد از تاریخچه مطمئن هستید؟')) {
-                let history = getHistory();
-                history.splice(index, 1);
-                saveHistory(history);
+        const saveHistory = (history) => {
+            localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history));
+            renderHistory();
+        };
+        const addToHistory = (item) => {
+            let history = getHistory();
+            history.unshift(item);
+            if (history.length > 15) history.pop();
+            saveHistory(history);
+        };
+        const handleClearHistory = () => {
+            if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) {
+                saveHistory([]);
             }
+        };
+        const handleDeleteItem = (index) => {
+            let history = getHistory();
+            history.splice(index, 1);
+            saveHistory(history);
         }
-        
         function renderHistory() {
             const history = getHistory();
             historyGrid.innerHTML = '';
             clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none';
+
             history.forEach((item, index) => {
                 const card = document.createElement('div');
                 card.className = 'history-item';
-                const imagesHTML = item.urls.map(url => `<img src="${url}" alt="تصویر از تاریخچه" onclick="openLightbox('${url}')">`).join('');
+                const imagesHTML = item.urls.map(url => 
+                    `<img src="${url}" alt="تصویر از تاریخچه" onclick="openLightbox('${url}')">`
+                ).join('');
+                
                 card.innerHTML = `
-                    <button class="history-item-delete-btn" title="حذف این مورد" onclick="handleDeleteHistoryItem(${index})">&times;</button>
+                    <button class="history-delete-btn" data-index="${index}" title="حذف این مورد">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    </button>
                     <p class="history-item-prompt">${item.prompt}</p>
-                    <div class="history-item-grid">${imagesHTML}</div>`;
+                    <div class="history-item-grid">${imagesHTML}</div>
+                `;
                 historyGrid.appendChild(card);
             });
         }
         clearHistoryBtn.addEventListener('click', handleClearHistory);
-        document.addEventListener('DOMContentLoaded', renderHistory);
+        historyGrid.addEventListener('click', (e) => {
+            const deleteBtn = e.target.closest('.history-delete-btn');
+            if (deleteBtn) {
+                const indexToDelete = parseInt(deleteBtn.dataset.index, 10);
+                handleDeleteItem(indexToDelete);
+            }
+        });
         
-        checkFormState();
+        document.addEventListener('DOMContentLoaded', () => {
+            renderHistory();
+            checkFormState();
+        });
     </script>
 </body>
 </html>