imageediting

Paused

App Files Files Community

Ezmary commited on Sep 21, 2025

Commit

b372360

verified ·

1 Parent(s): 03c6e78

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +169 -55

templates/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Photoshop Pro</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -254,6 +254,99 @@
         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'); const historyGrid = document.getElementById('history-grid'); const clearHistoryBtn = document.getElementById('clear-history-btn'); const confirmationModal = document.getElementById('confirmation-modal'); const modalMessageText = document.getElementById('modal-message-text'); const modalConfirmBtn = document.getElementById('modal-confirm-btn'); const modalCancelBtn = document.getElementById('modal-cancel-btn');
         let uploadedFile = null; let currentLightboxUrl = null; let currentLightboxGroup = []; let currentLightboxIndex = 0;
         const convertToPNG = (file) => new Promise((resolve, reject) => { const image = new Image(); const reader = new FileReader(); image.onload = () => { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0); canvas.toBlob((blob) => { if (!blob) { reject(new Error('تبدیل به PNG ناموفق بود.')); return; } const originalName = file.name.substring(0, file.name.lastIndexOf('.')) || file.name; const pngFile = new File([blob], `${originalName}.png`, { type: 'image/png' }); resolve(pngFile); }, 'image/png', 1.0); }; image.onerror = () => reject(new Error('فایل تصویر قابل خواندن نیست.')); reader.onload = e => { image.src = e.target.result; }; reader.onerror = () => reject(new Error('خطا در خواندن فایل.')); reader.readAsDataURL(file); });
         const handleFile = async (file) => { if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.'); return; } let fileToProcess = file; if (file.type !== 'image/png' && file.type !== 'image/jpeg') { try { fileToProcess = await convertToPNG(file); } catch (error) { console.error('Image conversion failed:', error); displayError('خطا در تبدیل فرمت تصویر.'); resetUploader(); return; } } uploadedFile = fileToProcess; const reader = new FileReader(); reader.onload = (e) => { previewImage.src = e.target.result; }; reader.readAsDataURL(file); uploadArea.classList.add('has-file'); checkFormState(); clearResult(); };
         const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); };
@@ -264,10 +357,8 @@
             resultGrid.innerHTML = '';
             imageUrls.forEach((url) => {
                 const img = document.createElement('img');
-                // *** CHANGE: Use proxy for display ***
                 img.src = `/api/proxy?url=${encodeURIComponent(url)}`;
                 img.alt = 'تصویر ویرایش شده';
-                // Pass the ORIGINAL url to the lightbox
                 img.addEventListener('click', () => openLightbox(url, imageUrls));
                 resultGrid.appendChild(img);
             });
@@ -281,67 +372,79 @@
         const updateLightboxImage = () => {
             const newUrl = currentLightboxGroup[currentLightboxIndex];
-            // *** CHANGE: Use proxy for lightbox display ***
             lightboxImg.src = `/api/proxy?url=${encodeURIComponent(newUrl)}`;
-            currentLightboxUrl = newUrl; // Store the ORIGINAL url for download
         };
         const handleDownload = () => { if (!currentLightboxUrl) return; parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: currentLightboxUrl }, '*'); };
-        const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
-        const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); };
-        // *** CHANGE: Add timestamp on save ***
-        const addToHistory = (item) => {
-            let history = getHistory();
-            const newItem = {
-                ...item,
-                timestamp: Date.now() // Add current time in milliseconds
-            };
-            history.unshift(newItem);
-            if (history.length > 15) history.pop();
-            saveHistory(history);
-            renderHistory(); // Re-render after saving
         };
         const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; };
         const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); };
-        const handleClearHistory = () => { showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟', () => { saveHistory([]); renderHistory(); }); };
-        const handleDeleteItem = (index) => { showConfirmationModal('آیا از حذف این مورد مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); renderHistory(); }); };
-        // *** CHANGE: Filter expired items on render ***
-        const renderHistory = () => {
-            const now = Date.now();
-            const expirationTime = 23 * 60 * 60 * 1000; // 23 hours in milliseconds
-            let history = getHistory();
-            // Filter out items older than 23 hours
-            const validHistory = history.filter(item => {
-                // Keep items that have a timestamp and are not expired
-                return item.timestamp && (now - item.timestamp) < expirationTime;
             });
-            // If any items were removed, update localStorage
-            if (validHistory.length < history.length) {
-                saveHistory(validHistory);
-            }
-            historyGrid.innerHTML = '';
-            clearHistoryBtn.style.display = validHistory.length > 0 ? 'flex' : 'none';
-            validHistory.forEach((item, index) => {
-                const card = document.createElement('div'); card.className = 'history-item';
-                const deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف'; deleteBtn.innerHTML = `<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>`;
-                deleteBtn.onclick = () => handleDeleteItem(index); card.appendChild(deleteBtn);
-                const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid';
-                item.urls.forEach(url => {
-                    const img = document.createElement('img');
-                    // *** CHANGE: Use proxy for history display ***
-                    img.src = `/api/proxy?url=${encodeURIComponent(url)}`;
-                    img.alt = 'تصویر تاریخچه';
-                    img.addEventListener('click', () => openLightbox(url, item.urls));
-                    imageGrid.appendChild(img);
                 });
-                card.appendChild(imageGrid); historyGrid.appendChild(card);
-            });
         };
         const proceedWithImageGeneration = async () => {
@@ -357,7 +460,7 @@
                         checkFreeUserCredit();
                     }
                     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); }
         };
@@ -376,7 +479,18 @@
         });
         // Event Listeners
-        document.addEventListener('DOMContentLoaded', async () => { renderHistory(); userFingerprint = await getBrowserFingerprint(); parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); 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(); }); });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Photoshop Pro (IndexedDB Version)</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
         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'); const historyGrid = document.getElementById('history-grid'); const clearHistoryBtn = document.getElementById('clear-history-btn'); const confirmationModal = document.getElementById('confirmation-modal'); const modalMessageText = document.getElementById('modal-message-text'); const modalConfirmBtn = document.getElementById('modal-confirm-btn'); const modalCancelBtn = document.getElementById('modal-cancel-btn');
         let uploadedFile = null; let currentLightboxUrl = null; let currentLightboxGroup = []; let currentLightboxIndex = 0;
+        // --- START: IndexedDB Handler ---
+        const dbHandler = {
+            db: null,
+            dbName: 'aiPhotoshopDB',
+            storeName: 'history',
+            initDB() {
+                return new Promise((resolve, reject) => {
+                    const request = indexedDB.open(this.dbName, 1);
+                    request.onerror = (event) => {
+                        console.error("IndexedDB error:", event.target.error);
+                        reject("Error opening DB");
+                    };
+                    request.onsuccess = (event) => {
+                        this.db = event.target.result;
+                        resolve();
+                    };
+                    request.onupgradeneeded = (event) => {
+                        const db = event.target.result;
+                        const store = db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true });
+                        store.createIndex('timestamp', 'timestamp', { unique: false });
+                    };
+                });
+            },
+            add(item) {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.add(item);
+                    request.onsuccess = () => resolve();
+                    request.onerror = (event) => reject(event.target.error);
+                });
+            },
+            getAll() {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readonly');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.getAll();
+                    request.onsuccess = () => {
+                        // Sort by timestamp descending (newest first)
+                        resolve(request.result.sort((a, b) => b.timestamp - a.timestamp));
+                    };
+                    request.onerror = (event) => reject(event.target.error);
+                });
+            },
+            delete(id) {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.delete(id);
+                    request.onsuccess = () => resolve();
+                    request.onerror = (event) => reject(event.target.error);
+                });
+            },
+            clear() {
+                return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const request = store.clear();
+                    request.onsuccess = () => resolve();
+                    request.onerror = (event) => reject(event.target.error);
+                });
+            },
+            deleteOlderThan(timestamp) {
+                 return new Promise((resolve, reject) => {
+                    const transaction = this.db.transaction([this.storeName], 'readwrite');
+                    const store = transaction.objectStore(this.storeName);
+                    const index = store.index('timestamp');
+                    // Create a key range for all items with a timestamp less than the provided one
+                    const keyRange = IDBKeyRange.upperBound(timestamp);
+                    const request = index.openCursor(keyRange);
+                    request.onsuccess = (event) => {
+                        const cursor = event.target.result;
+                        if (cursor) {
+                            store.delete(cursor.primaryKey); // Delete the item
+                            cursor.continue(); // Move to the next item
+                        } else {
+                           resolve(); // No more items to delete
+                        }
+                    };
+                    request.onerror = (event) => reject(event.target.error);
+                });
+            }
+        };
+        // --- END: IndexedDB Handler ---
         const convertToPNG = (file) => new Promise((resolve, reject) => { const image = new Image(); const reader = new FileReader(); image.onload = () => { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0); canvas.toBlob((blob) => { if (!blob) { reject(new Error('تبدیل به PNG ناموفق بود.')); return; } const originalName = file.name.substring(0, file.name.lastIndexOf('.')) || file.name; const pngFile = new File([blob], `${originalName}.png`, { type: 'image/png' }); resolve(pngFile); }, 'image/png', 1.0); }; image.onerror = () => reject(new Error('فایل تصویر قابل خواندن نیست.')); reader.onload = e => { image.src = e.target.result; }; reader.onerror = () => reject(new Error('خطا در خواندن فایل.')); reader.readAsDataURL(file); });
         const handleFile = async (file) => { if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.'); return; } let fileToProcess = file; if (file.type !== 'image/png' && file.type !== 'image/jpeg') { try { fileToProcess = await convertToPNG(file); } catch (error) { console.error('Image conversion failed:', error); displayError('خطا در تبدیل فرمت تصویر.'); resetUploader(); return; } } uploadedFile = fileToProcess; const reader = new FileReader(); reader.onload = (e) => { previewImage.src = e.target.result; }; reader.readAsDataURL(file); uploadArea.classList.add('has-file'); checkFormState(); clearResult(); };
         const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); };
             resultGrid.innerHTML = '';
             imageUrls.forEach((url) => {
                 const img = document.createElement('img');
                 img.src = `/api/proxy?url=${encodeURIComponent(url)}`;
                 img.alt = 'تصویر ویرایش شده';
                 img.addEventListener('click', () => openLightbox(url, imageUrls));
                 resultGrid.appendChild(img);
             });
         const updateLightboxImage = () => {
             const newUrl = currentLightboxGroup[currentLightboxIndex];
             lightboxImg.src = `/api/proxy?url=${encodeURIComponent(newUrl)}`;
+            currentLightboxUrl = newUrl;
         };
         const handleDownload = () => { if (!currentLightboxUrl) return; parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: currentLightboxUrl }, '*'); };
+        const addToHistory = async (item) => {
+            const newItem = { ...item, timestamp: Date.now() };
+            try {
+                await dbHandler.add(newItem);
+                // Limit history to 15 items by deleting the oldest if count exceeds 15
+                const history = await dbHandler.getAll();
+                if (history.length > 15) {
+                    await dbHandler.delete(history[history.length - 1].id); // Oldest is last due to sorting
+                }
+            } catch (error) {
+                console.error("Failed to add to history:", error);
+            }
+            await renderHistory();
         };
         const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; };
         const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); };
+        const handleClearHistory = () => {
+            showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟', async () => {
+                await dbHandler.clear();
+                await renderHistory();
             });
+        };
+        const handleDeleteItem = (id) => {
+            showConfirmationModal('آیا از حذف این مورد مطمئن هستید؟', async () => {
+                await dbHandler.delete(id);
+                await renderHistory();
+            });
+        };
+        const renderHistory = async () => {
+            try {
+                const expirationTime = 23 * 60 * 60 * 1000; // 23 hours in milliseconds
+                const expirationTimestamp = Date.now() - expirationTime;
+                // Clean up old entries first
+                await dbHandler.deleteOlderThan(expirationTimestamp);
+                const history = await dbHandler.getAll();
+                historyGrid.innerHTML = '';
+                clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none';
+                history.forEach((item) => {
+                    const card = document.createElement('div'); card.className = 'history-item';
+                    const deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف'; deleteBtn.innerHTML = `<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>`;
+                    // Pass the item's unique ID from the database
+                    deleteBtn.onclick = () => handleDeleteItem(item.id);
+                    card.appendChild(deleteBtn);
+                    const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid';
+                    item.urls.forEach(url => {
+                        const img = document.createElement('img');
+                        img.src = `/api/proxy?url=${encodeURIComponent(url)}`;
+                        img.alt = 'تصویر تاریخچه';
+                        img.addEventListener('click', () => openLightbox(url, item.urls));
+                        imageGrid.appendChild(img);
+                    });
+                    card.appendChild(imageGrid);
+                    historyGrid.appendChild(card);
                 });
+            } catch (error) {
+                console.error("Could not render history:", error);
+                historyGrid.innerHTML = '<p style="color: var(--danger-color); grid-column: 1 / -1; text-align: center;">خطا در بارگذاری تاریخچه.</p>';
+            }
         };
         const proceedWithImageGeneration = async () => {
                         checkFreeUserCredit();
                     }
                     displayResult(result.image_urls);
+                    await addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls });
                 } else { throw new Error('پاسخ معتبری از سرور دریافت نشد.'); }
             } catch (error) { displayError(error.message); } finally { setLoading(false); }
         };
         });
         // Event Listeners
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                await dbHandler.initDB();
+                await renderHistory();
+            } catch (error) {
+                console.error("Failed to initialize the application:", error);
+                displayError("خطا در راه اندازی اولیه برنامه. لطفا صفحه را رفرش کنید.");
+            }
+            userFingerprint = await getBrowserFingerprint();
+            parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*');
+            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(); }); });