Update index.html

index.html

@@ -183,7 +183,7 @@
         .loading-text { font-weight: 500; color: var(--text-secondary); }
         #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
         #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; }
         
@@ -200,7 +200,7 @@
         }
 
         #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: 1rem; transition: var(--transition-smooth); } /* Adjusted padding */
+        .history-item { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1rem; transition: var(--transition-smooth); }
         .history-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
         
         .history-item-grid { 
@@ -224,9 +224,8 @@
         #lightbox-close { top: -50px; right: 0; }
         #lightbox-download { top: -50px; left: 0; }
         
-        /* --- CHANGE: Added Next button --- */
         #lightbox-next {
-            right: -60px; /* Positioned outside the image */
+            right: -60px;
             top: 50%;
             transform: translateY(-50%);
         }
@@ -319,7 +318,6 @@
                  <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                  <div class="spinner"></div>
              </button>
-             <!-- --- CHANGE: Added Next button --- -->
              <button id="lightbox-next" title="بعدی" class="lightbox-btn">
                 <svg fill="white" viewBox="0 0 24 24" width="24" height="24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
              </button>
@@ -327,31 +325,32 @@
     </div>
     
     <script>
+        // --- 1. ELEMENT SELECTORS ---
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
-        
         const uploadArea = document.getElementById('upload-area');
         const fileInput = document.getElementById('file-input');
         const previewImage = document.getElementById('preview-image-main');
         const removeFileBtn = document.getElementById('remove-file-btn-main');
-        
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
         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 lightboxNext = document.getElementById('lightbox-next'); // New button
+        const lightboxNext = document.getElementById('lightbox-next');
         const historyGrid = document.getElementById('history-grid');
         const clearHistoryBtn = document.getElementById('clear-history-btn');
 
+        // --- 2. STATE VARIABLES ---
         let uploadedFile = null;
         let currentLightboxUrl = null;
-        // --- CHANGE: Added state for lightbox navigation ---
         let currentLightboxGroup = [];
         let currentLightboxIndex = 0;
 
+        // --- 3. FUNCTION DEFINITIONS ---
         const resetUploader = () => {
             uploadedFile = null;
             fileInput.value = '';
@@ -361,7 +360,10 @@
         };
 
         const handleFile = (file) => {
-            if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.'); return; }
+            if (!file || !file.type.startsWith('image/')) {
+                displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.');
+                return;
+            }
             uploadedFile = file;
             const reader = new FileReader();
             reader.onload = (e) => { previewImage.src = e.target.result; };
@@ -371,71 +373,130 @@
             clearResult();
         };
 
-        removeFileBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            resetUploader();
-        });
+        const checkFormState = () => {
+            submitBtn.disabled = !uploadedFile || promptInput.value.trim() === '';
+        };
         
-        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }));
-        ['dragenter', 'dragover'].forEach(e => uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); }));
-        ['dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')));
-        uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); });
-
-        function checkFormState() { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }
-        submitBtn.addEventListener('click', async () => { /* ... (no changes in this function) ... */ });
+        const setLoading = (isLoading) => {
+            const btnSpinner = submitBtn.querySelector('.spinner');
+            const btnText = document.getElementById('btn-text');
+            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) {
+        const displayResult = (imageUrls) => {
             resultGrid.innerHTML = '';
             imageUrls.forEach((url) => {
                 const img = document.createElement('img');
                 img.src = url;
                 img.alt = 'تصویر ویرایش شده';
-                // --- CHANGE: Pass the whole group of URLs for navigation ---
                 img.addEventListener('click', () => openLightbox(url, imageUrls));
                 resultGrid.appendChild(img);
             });
             resultContainer.classList.add('has-content');
-        }
+        };
 
-        // --- CHANGE: Lightbox functions now handle navigation ---
-        function updateLightboxImage() {
+        const clearResult = () => {
+            resultGrid.innerHTML = '';
+            errorMessage.style.display = 'none';
+            resultContainer.classList.remove('has-content');
+        };
+
+        const displayError = (message) => {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+        };
+
+        const updateLightboxImage = () => {
             const newUrl = currentLightboxGroup[currentLightboxIndex];
             lightboxImg.src = newUrl;
-            currentLightboxUrl = newUrl; // Keep this for the download function
-        }
+            currentLightboxUrl = newUrl;
+        };
 
-        function openLightbox(clickedUrl, urlGroup) {
+        const openLightbox = (clickedUrl, urlGroup) => {
             currentLightboxGroup = urlGroup;
             currentLightboxIndex = urlGroup.indexOf(clickedUrl);
             updateLightboxImage();
             lightboxNext.style.display = urlGroup.length > 1 ? 'flex' : 'none';
             lightbox.classList.add('visible');
-        }
+        };
 
-        function closeLightbox() {
+        const closeLightbox = () => {
             lightbox.classList.remove('visible');
-            currentLightboxGroup = []; // Reset the group
-        }
-        
-        lightboxNext.addEventListener('click', () => {
-            currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length;
-            updateLightboxImage();
-        });
+            currentLightboxGroup = [];
+        };
 
-        async function handleDownload() { /* ... (no changes in this function) ... */ }
-        
-        function renderHistory() {
+        const handleDownload = async () => {
+            if (!currentLightboxUrl) return;
+            const spinner = lightboxDownload.querySelector('.spinner');
+            const icon = lightboxDownload.querySelector('svg');
+            spinner.style.display = 'block';
+            icon.style.display = 'none';
+            lightboxDownload.disabled = true;
+            try {
+                const response = await fetch(currentLightboxUrl);
+                if (!response.ok) throw new Error('Network response was not ok.');
+                const blob = await response.blob();
+                const objectUrl = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = objectUrl;
+                a.download = `ai-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';
+                lightboxDownload.disabled = false;
+            }
+        };
+
+        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('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) {
+                saveHistory([]);
+            }
+        };
+        const handleDeleteItem = (index) => {
+            let history = getHistory();
+            history.splice(index, 1);
+            saveHistory(history);
+        };
+
+        const 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';
                 
-                // --- CHANGE: Programmatically create elements to attach listeners correctly ---
                 const deleteBtn = document.createElement('button');
                 deleteBtn.className = 'history-delete-btn';
                 deleteBtn.title = 'حذف این مورد';
@@ -445,12 +506,10 @@
 
                 const imageGrid = document.createElement('div');
                 imageGrid.className = 'history-item-grid';
-
                 item.urls.forEach(url => {
                     const img = document.createElement('img');
                     img.src = url;
                     img.alt = 'تصویر از تاریخچه';
-                    // Add listener for lightbox with navigation context
                     img.addEventListener('click', () => openLightbox(url, item.urls));
                     imageGrid.appendChild(img);
                 });
@@ -458,32 +517,70 @@
                 card.appendChild(imageGrid);
                 historyGrid.appendChild(card);
             });
-        }
-        
-        // Minor change to handleDeleteItem to avoid needing data-attributes
-        const handleDeleteItem = (index) => {
-            let history = getHistory();
-            history.splice(index, 1);
-            saveHistory(history);
         };
 
-        // All other functions (API calls, loading states, etc.) remain unchanged.
-        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('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) { saveHistory([]); } };
-        const setLoading = (isLoading) => { const btnSpinner = submitBtn.querySelector('.spinner'); const btnText = document.getElementById('btn-text'); if (isLoading) { resultContainer.classList.remove('has-content'); resultContainer.classList.add('loading'); btnSpinner.style.display = 'inline-block'; btnText.textContent = 'در حال پردازش...'; submitBtn.disabled = true; resultGrid.innerHTML = ''; document.getElementById('error-message').style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnSpinner.style.display = 'none'; btnText.textContent = 'خلق کن'; checkFormState(); } };
-        const clearResult = () => { resultGrid.innerHTML = ''; document.getElementById('error-message').style.display = 'none'; resultContainer.classList.remove('has-content'); };
-        const displayError = (message) => { const errorMessage = document.getElementById('error-message'); errorMessage.textContent = message; errorMessage.style.display = 'block'; };
-        submitBtn.addEventListener('click', async () => { 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 || `یک خطای ناشناخته رخ داد.`); } const result = await response.json(); 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); } });
+        // --- 4. EVENT LISTENERS ---
+        document.addEventListener('DOMContentLoaded', () => {
+            renderHistory();
+            checkFormState();
+        });
+
+        removeFileBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            resetUploader();
+        });
+
+        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
+            uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); });
+        });
+        ['dragenter', 'dragover'].forEach(e => {
+            uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); });
+        });
+        ['dragleave', 'drop'].forEach(e => {
+            uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over'));
+        });
+        uploadArea.addEventListener('drop', e => {
+            if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]);
+        });
+
+        promptInput.addEventListener('input', checkFormState);
+
+        submitBtn.addEventListener('click', async () => {
+            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 || `یک خطای ناشناخته رخ داد.`);
+                }
+                const result = await response.json();
+                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);
+            }
+        });
+
         lightboxClose.addEventListener('click', closeLightbox);
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
         lightboxDownload.addEventListener('click', handleDownload);
+        lightboxNext.addEventListener('click', () => {
+            currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length;
+            updateLightboxImage();
+        });
         clearHistoryBtn.addEventListener('click', handleClearHistory);
-        document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
-        
-        // This function is copy-pasted for brevity as it had no changes.
-        handleDownload = async function () { if (!currentLightboxUrl) return; const spinner = lightboxDownload.querySelector('.spinner'); const icon = lightboxDownload.querySelector('svg'); spinner.style.display = 'block'; icon.style.display = 'none'; lightboxDownload.disabled = true; try { const response = await fetch(currentLightboxUrl); if (!response.ok) throw new Error('Network response was not ok.'); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objectUrl; a.download = `ai-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'; lightboxDownload.disabled = false; } };
     </script>
 </body>
 </html>