Spaces:

Elias207
/

imageediting

Running

App Files Files Community

Elias207 commited on Aug 23, 2025

Commit

5c3a601

verified ·

1 Parent(s): ccaf87d

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -333

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>فتوشاپ هوش مصنوعی (نسخه گالری حرفه‌ای)</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -21,16 +21,7 @@
             --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
         }
-        .dark {
-            --bg-start: #0f172a;
-            --bg-end: #0b1120;
-            --text-color: #e2e8f0;
-            --card-bg: #1e293b;
-            --border-color: #334155;
-            --shadow-color-light: rgba(0, 0, 0, 0.2);
-            --shadow-color-dark: rgba(0, 0, 0, 0.25);
-            --drop-zone-bg: #111827;
-        }
         @keyframes fadeInUp {
             from { opacity: 0; transform: translateY(30px); }
@@ -51,43 +42,15 @@
             transition: background-color 0.4s, color 0.4s;
         }
-        .container {
-            max-width: 750px;
-            width: 100%;
-        }
-        header {
-            text-align: center;
-            margin-bottom: 3rem;
-            animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
-        }
-        h1 {
-            font-size: 3rem;
-            font-weight: 800;
-            letter-spacing: -1px;
-            margin: 0;
-            background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        p.subtitle {
-            font-size: 1.2rem;
-            color: #64748b;
-            margin-top: 0.75rem;
-        }
-        .dark p.subtitle { color: #94a3b8; }
         main, .gallery-section {
-            background-color: var(--card-bg);
-            border-radius: 2rem;
-            border: 1px solid var(--border-color);
             box-shadow: 0 4px 10px var(--shadow-color-dark), 0 20px 40px var(--shadow-color-light);
-            padding: 3rem;
-            transition: all 0.4s;
-            animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
-            opacity: 0;
         }
         main { animation-delay: 0.2s; }
         .gallery-section { margin-top: 3rem; animation-delay: 0.4s; }
@@ -96,237 +59,104 @@
         .panel:last-child { margin-bottom: 0; }
         .controls { margin-bottom: 2.5rem; }
-        h2 {
-            font-size: 1.4rem;
-            font-weight: 700;
-            margin: 0 0 1.5rem 0;
-            padding-bottom: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            border-bottom: 1px solid var(--border-color);
-        }
         h2 svg { color: var(--primary-color-start); }
         #drop-zone {
-            border: 2px dashed var(--border-color); border-radius: 1.5rem;
-            padding: 2rem; text-align: center; cursor: pointer;
-            transition: all 0.3s var(--ease-out-expo);
-            position: relative; overflow: hidden; background-color: var(--drop-zone-bg);
-            display: flex; flex-direction: column; justify-content: center;
             align-items: center; min-height: 250px;
         }
-        #drop-zone::before {
-            content: ''; position: absolute; inset: -2px; border-radius: 1.5rem;
-            background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end)) border-box;
-            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-            -webkit-mask-composite: destination-out; mask-composite: subtract;
-            opacity: 0; transition: opacity 0.3s ease;
-        }
-        #drop-zone.dragover, #drop-zone:hover {
-            border-color: transparent; transform: translateY(-5px);
-            box-shadow: 0 10px 20px -5px var(--shadow-color-light);
-        }
-        #drop-zone.dragover::before, #drop-zone:hover::before { opacity: 1; }
-        #drop-zone-content { transition: opacity 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
-        #drop-zone:hover #drop-zone-content { transform: translateY(-5px); }
-        #drop-zone-icon { width: 40px; height: 40px; color: #94a3b8; }
-        #drop-zone-text { color: #475569; font-weight: 500; }
-        .dark #drop-zone-text { color: #94a3b8; }
         .upload-btn-styled {
-            background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%);
-            color: white; border: none; padding: 0.75rem 1.5rem;
-            border-radius: 0.75rem; font-family: 'Vazirmatn', sans-serif;
-            font-weight: 600; font-size: 1rem; cursor: pointer;
-            margin-top: 1rem; transition: all 0.3s ease;
         }
         .upload-btn-styled:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 15px var(--shadow-color-light); }
-        #image-preview {
-            position: absolute; inset: 0; width: 100%; height: 100%;
-            padding: 1rem; box-sizing: border-box; border-radius: 1.5rem;
-            object-fit: contain; opacity: 0; transform: scale(0.95);
-            transition: opacity 0.4s ease, transform 0.4s ease;
-            pointer-events: none; backdrop-filter: blur(4px);
-        }
         #image-preview.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
-        textarea {
-            width: 100%; padding: 1rem; border: 2px solid var(--border-color);
-            border-radius: 1rem; background-color: var(--drop-zone-bg);
-            color: var(--text-color); font-family: 'Vazirmatn', sans-serif;
-            font-size: 1rem; resize: vertical; min-height: 80px;
-            box-sizing: border-box; transition: all 0.3s ease;
-        }
-        textarea:focus {
-            outline: none; border-color: var(--primary-color-start);
-            box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color-start) 15%, transparent);
-        }
-        button#submit-btn {
-            position: relative; overflow: hidden;
-            width: 100%; padding: 1.1rem; border: none; border-radius: 1rem;
-            background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%);
-            background-size: 200% auto; color: white;
-            font-size: 1.1rem; font-weight: 700; cursor: pointer;
-            margin-top: 1rem; transition: all 0.4s var(--ease-out-expo);
-            box-shadow: 0 4px 15px var(--shadow-color-light);
-        }
-        button#submit-btn:hover:not(:disabled) {
-            transform: translateY(-4px);
-            box-shadow: 0 10px 25px -5px var(--shadow-color-light);
-            background-position: right center;
-        }
         button#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-        .loader-dots {
-            display: flex; justify-content: center; align-items: center;
-            position: absolute; inset: 0;
-        }
-        .loader-dots div {
-            width: 8px; height: 8px; margin: 0 4px; background-color: white; border-radius: 50%;
-            animation: bounce 1.4s infinite ease-in-out both;
-        }
-        .loader-dots .dot1 { animation-delay: -0.32s; }
-        .loader-dots .dot2 { animation-delay: -0.16s; }
         @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
         #btn-text.hidden { visibility: hidden; }
-        #result-container {
-            border: 2px solid var(--border-color); border-radius: 1.5rem;
-            min-height: 250px;
-            position: relative;
-            background-color: var(--drop-zone-bg); overflow: hidden;
-            padding: 0.5rem; transition: border-color 0.3s ease;
-        }
-        #loading-placeholder {
-            display: none; flex-direction: column; align-items: center; justify-content: center;
-            gap: 1.5rem; opacity: 0; animation: fadeIn 0.5s ease forwards;
-            position: absolute; inset: 0;
-        }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         #result-container.loading #loading-placeholder { display: flex; }
-        .creative-loader { width: 100px; height: 100px; position: relative; }
-        .creative-loader svg { width: 100%; height: 100%; transform-origin: center; }
-        .creative-loader .arc { fill: none; stroke-width: 4; stroke-linecap: round; transform-origin: 50% 50%; animation: spin-loader 2s linear infinite; }
-        .creative-loader .arc1 { stroke: var(--primary-color-start); animation-duration: 2.2s; }
-        .creative-loader .arc2 { stroke: var(--primary-color-end); animation-duration: 1.8s; animation-direction: reverse; }
-        .creative-loader .arc3 { stroke: #8b5cf6; animation-duration: 2s; }
-        .creative-loader .star { fill: var(--primary-color-end); transform-origin: center; animation: pulse-star 1.5s ease-in-out infinite; }
-        @keyframes spin-loader { to { transform: rotate(360deg); } }
-        @keyframes pulse-star { 0%, 100% { transform: scale(0.9); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
-        .loading-text { font-weight: 500; color: #64748b; }
-        .dark .loading-text { color: #94a3b8; }
-        #result-grid {
-            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 0.5rem; width: 100%; height: 100%;
-        }
         @keyframes popIn-spring { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 80% { opacity: 1; transform: scale(1.05) translateY(-5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
-        #result-grid img {
-            width: 100%; height: 100%; max-height: 250px; object-fit: cover; border-radius: 1rem;
-            cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
-            opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards;
-        }
-        #result-grid img:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 10px 30px -5px var(--shadow-color-dark); }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
-        #lightbox {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(10, 20, 40, 0.85); z-index: 1000; display: none;
-            justify-content: center; align-items: center; padding: 2rem;
-            box-sizing: border-box; backdrop-filter: blur(8px);
-        }
-        #lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
-        #lightbox-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; }
-        .lightbox-btn {
-            background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
-            width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex;
-            justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none;
-        }
-        .lightbox-btn svg { width: 24px; height: 24px; }
         .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
-        #lightbox-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; }
         /* --- History Gallery Styles --- */
         .gallery-header { display: flex; justify-content: space-between; align-items: center; }
-        #clear-history-btn {
-            background: none; border: 1px solid var(--border-color); color: #64748b;
-            padding: 0.5rem 1rem; border-radius: 0.75rem; cursor: pointer;
-            display: flex; align-items: center; gap: 0.5rem;
-            font-family: 'Vazirmatn', sans-serif; font-weight: 500; transition: all 0.2s;
-        }
         #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
-        #clear-history-btn svg { width: 18px; height: 18px; }
-        #history-grid {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 1.5rem;
-            margin-top: 1.5rem;
-        }
-        #history-grid:empty::before {
-            content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.';
-            color: #64748b;
-            .dark & { color: #94a3b8; }
-            grid-column: 1 / -1;
-            text-align: center;
-            padding: 3rem 1rem;
-            background-color: var(--drop-zone-bg);
-            border-radius: 1rem;
-        }
-        .history-item {
-            background-color: var(--drop-zone-bg);
-            border-radius: 1.25rem;
-            border: 1px solid var(--border-color);
-            overflow: hidden;
-            box-shadow: 0 2px 8px var(--shadow-color-dark);
-            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
-            opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards;
-            display: flex; flex-direction: column;
-        }
         .history-item.removing { transform: scale(0.9); opacity: 0; }
         .history-item:hover { transform: translateY(-8px); box-shadow: 0 10px 20px var(--shadow-color-dark); }
-        .history-item-thumbnails {
-            display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.5rem;
-        }
-        .history-item-thumbnails img {
-            width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.75rem;
-            cursor: pointer; transition: transform 0.2s ease;
-        }
         .history-item-thumbnails img:hover { transform: scale(1.08); }
         .history-item-content { padding: 0 1.25rem 1.25rem 1.25rem; border-top: 1px solid var(--border-color); }
-        .history-item-prompt {
-            font-size: 0.95rem; font-weight: 500;
-            margin: 1rem 0 1rem 0;
-            line-height: 1.6em;
-        }
-        .history-item-footer { display: flex; justify-content: space-between; align-items: center; }
-        .history-btn.delete-btn {
-            background-color: transparent; color: var(--danger-color); border: 1px solid var(--danger-color);
-            padding: 0.5rem 1rem; border-radius: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
-            font-weight: 600; transition: all 0.2s;
-        }
-        .history-btn.delete-btn:hover { background-color: var(--danger-color); color: white; }
         @media (max-width: 600px) {
             body { padding: 1.5rem 1rem; }
             main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.5rem; }
             .history-item-thumbnails { grid-template-columns: repeat(2, 1fr); }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
             <h1>فتوشاپ هوش مصنوعی ✨</h1>
             <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p>
@@ -334,13 +164,9 @@
         <main>
             <div class="panel">
-                <h2>
-                    <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="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>
-                    ۱. تصویر خود را انتخاب کنید
-                </h2>
                 <div id="drop-zone">
                     <div id="drop-zone-content">
-                        <svg id="drop-zone-icon" 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="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>
                         <span id="drop-zone-text">تصویر را اینجا بکشید یا از دکمه زیر استفاده کنید</span>
                         <button class="upload-btn-styled">انتخاب فایل</button>
                     </div>
@@ -348,30 +174,17 @@
                 </div>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
-            <!-- Rest of the main content remains the same -->
             <div class="controls">
-                <h2>
-                    <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="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>
-                    ۲. دستور ویرایش را بنویسید
-                </h2>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
-                <button id="submit-btn" disabled>
-                    <span id="btn-text">خلق کن</span>
-                </button>
                 <p id="error-message"></p>
             </div>
             <div class="panel">
-                <h2>
-                    <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="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>
-                     ۳. نتیجه را ببینید
-                </h2>
                 <div id="result-container">
                     <div id="loading-placeholder">
-                        <div class="creative-loader">
-                            <svg viewBox="0 0 50 50"><g><circle class="arc arc1" cx="25" cy="25" r="22" stroke-dasharray="60 150"></circle><circle class="arc arc2" cx="25" cy="25" r="18" stroke-dasharray="60 150"></circle><circle class="arc arc3" cx="25" cy="25" r="14" stroke-dasharray="60 150"></circle><path class="star" d="M25,21 L26.9,24.1 L30,25 L26.9,25.9 L25,29 L23.1,25.9 L20,25 L23.1,24.1 Z"></path></g></svg>
-                        </div>
                         <p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p>
                     </div>
                     <div id="result-grid"></div>
@@ -379,14 +192,11 @@
             </div>
         </main>
         <section class="gallery-section">
             <div class="gallery-header">
-                 <h2>
-                    <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"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
-                    گالری و تاریخچه شما
-                </h2>
                 <button id="clear-history-btn" style="display: none;">
-                    <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>
                     <span>پاک کردن همه</span>
                 </button>
             </div>
@@ -394,14 +204,21 @@
         </section>
     </div>
     <div id="lightbox">
-         <img id="lightbox-img" src="">
-         <div id="lightbox-controls">
-            <a id="lightbox-download" href="#" download="edited-image.png" title="دانلود تصویر" class="lightbox-btn">
-                 <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
-            </a>
-         </div>
-         <button id="lightbox-close" class="lightbox-btn">&times;</button>
     </div>
     <script>
@@ -410,9 +227,10 @@
         const HISTORY_KEY = 'aiPhotoshopHistory';
         // Element Selectors
         const dropZone = document.getElementById('drop-zone');
         const dropZoneContent = document.getElementById('drop-zone-content');
-        const fileInput = document.getElementById('file-input');
         const imagePreview = document.getElementById('image-preview');
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
@@ -420,34 +238,38 @@
         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');
-        const uploadBtnStyled = document.querySelector('.upload-btn-styled'); // New upload button
         let uploadedFile = null;
         // --- Event Listeners Setup ---
         dropZone.addEventListener('click', () => fileInput.click());
-        uploadBtnStyled.addEventListener('click', (e) => {
-             e.stopPropagation(); // Prevent dropzone click from firing twice
-             fileInput.click();
-        });
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
         ['dragenter', 'dragover'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }));
         ['dragleave', 'drop'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); }));
         dropZone.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0]));
         promptInput.addEventListener('input', checkFormState);
         submitBtn.addEventListener('click', handleSubmit);
         lightboxClose.addEventListener('click', closeLightbox);
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
-        clearHistoryBtn.addEventListener('click', handleClearHistory);
         document.addEventListener('DOMContentLoaded', renderHistory);
-        // --- Core Functions ---
         function handleFile(file) {
             if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری انتخاب کنید.'); return; }
             uploadedFile = file;
@@ -474,12 +296,9 @@
             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, id: Date.now() });
                 } else {
@@ -496,10 +315,12 @@
              if (isLoading) {
                 resultContainer.classList.add('loading');
                 btnText.classList.add('hidden');
-                const loader = document.createElement('div');
-                loader.className = 'loader-dots';
-                loader.innerHTML = '<div class="dot1"></div><div class="dot2"></div><div class="dot3"></div>';
-                submitBtn.appendChild(loader);
                 submitBtn.disabled = true;
                 resultGrid.innerHTML = '';
                 errorMessage.style.display = 'none';
@@ -507,7 +328,7 @@
                 resultContainer.classList.remove('loading');
                 btnText.classList.remove('hidden');
                 const loader = submitBtn.querySelector('.loader-dots');
-                if (loader) submitBtn.removeChild(loader);
                 checkFormState();
             }
         }
@@ -518,8 +339,9 @@
                 const img = document.createElement('img');
                 img.src = url;
                 img.alt = 'تصویر ویرایش شده';
                 img.style.animationDelay = `${index * 120}ms`;
-                img.addEventListener('click', () => openLightbox(url));
                 resultGrid.appendChild(img);
             });
         }
@@ -528,50 +350,76 @@
             resultGrid.innerHTML = '';
             errorMessage.style.display = 'none';
         }
         function displayError(message) {
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
         }
-        function openLightbox(url) {
-            lightboxImg.src = url;
-            lightboxDownload.href = url;
             lightbox.style.display = 'flex';
         }
-        function closeLightbox() { lightbox.style.display = 'none'; }
         // --- History Management Functions ---
         function getHistory() {
-            try {
-                const history = localStorage.getItem(HISTORY_KEY);
-                return history ? JSON.parse(history) : [];
-            } catch (e) {
-                console.error("Failed to parse history from localStorage", e);
-                return [];
-            }
         }
         function saveHistory(history) {
             localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
             renderHistory();
         }
         function addToHistory(item) {
             let history = getHistory();
             history.unshift(item);
-            if (history.length > 20) history.pop();
             saveHistory(history);
         }
         function deleteHistoryItem(id) {
-            let history = getHistory();
-            const updatedHistory = history.filter(item => item.id !== id);
-            saveHistory(updatedHistory);
         }
         function handleClearHistory() {
-            if (confirm('آیا از پاک کردن تمام تاریخچه ویرایش‌ها مطمئن هستید؟')) {
                 localStorage.removeItem(HISTORY_KEY);
                 renderHistory();
             }
@@ -580,53 +428,45 @@
         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';
-                card.style.animationDelay = `${index * 80}ms`;
                 const thumbnailsContainer = document.createElement('div');
                 thumbnailsContainer.className = 'history-item-thumbnails';
-                item.urls.forEach(url => {
                     const img = document.createElement('img');
                     img.src = url;
-                    img.alt = 'تصویر کوچک تاریخچه';
-                    img.addEventListener('click', () => openLightbox(url));
                     thumbnailsContainer.appendChild(img);
                 });
-                card.appendChild(thumbnailsContainer);
-                card.innerHTML += `
-                    <div class="history-item-content">
-                        <p class="history-item-prompt">${item.prompt}</p>
-                        <div class="history-item-footer">
-                             <button class="history-btn delete-btn" data-id="${item.id}">
-                                 <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>
-                        </div>
-                    </div>
-                `;
-                // Re-append the thumbnails container because innerHTML overwrites it
-                card.insertBefore(thumbnailsContainer, card.firstChild);
-                card.querySelector('.delete-btn').addEventListener('click', (e) => {
                     const idToDelete = Number(e.currentTarget.getAttribute('data-id'));
                     const cardElement = e.currentTarget.closest('.history-item');
                     cardElement.classList.add('removing');
-                    setTimeout(() => {
-                        deleteHistoryItem(idToDelete);
-                    }, 500); // Wait for animation
                 });
                 historyGrid.appendChild(card);
             });
         }
         checkFormState();
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>فتوشاپ هوش مصنوعی (نسخه نهایی)</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
             --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
         }
+        .dark { /* Dark mode variables can be added here if needed */ }
         @keyframes fadeInUp {
             from { opacity: 0; transform: translateY(30px); }
             transition: background-color 0.4s, color 0.4s;
         }
+        .container { max-width: 750px; width: 100%; }
+        header { text-align: center; margin-bottom: 3rem; animation: fadeInUp 0.8s var(--ease-out-expo) forwards; }
+        h1 { font-size: 3rem; font-weight: 800; letter-spacing: -1px; margin: 0; background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+        p.subtitle { font-size: 1.2rem; color: #64748b; margin-top: 0.75rem; }
         main, .gallery-section {
+            background-color: var(--card-bg); border-radius: 2rem; border: 1px solid var(--border-color);
             box-shadow: 0 4px 10px var(--shadow-color-dark), 0 20px 40px var(--shadow-color-light);
+            padding: 3rem; transition: all 0.4s; animation: fadeInUp 0.8s var(--ease-out-expo) forwards; opacity: 0;
         }
         main { animation-delay: 0.2s; }
         .gallery-section { margin-top: 3rem; animation-delay: 0.4s; }
         .panel:last-child { margin-bottom: 0; }
         .controls { margin-bottom: 2.5rem; }
+        h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.5rem 0; padding-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border-color); }
         h2 svg { color: var(--primary-color-start); }
         #drop-zone {
+            border: 2px dashed var(--border-color); border-radius: 1.5rem; padding: 2rem; text-align: center;
+            cursor: pointer; transition: all 0.3s var(--ease-out-expo); position: relative; overflow: hidden;
+            background-color: var(--drop-zone-bg); display: flex; flex-direction: column; justify-content: center;
             align-items: center; min-height: 250px;
         }
+        #drop-zone.dragover { border-color: var(--primary-color-start); }
+        #drop-zone-content { transition: opacity 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
         .upload-btn-styled {
+            background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%); color: white;
+            border: none; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-family: 'Vazirmatn', sans-serif;
+            font-weight: 600; font-size: 1rem; cursor: pointer; margin-top: 1rem; transition: all 0.3s ease;
         }
         .upload-btn-styled:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 15px var(--shadow-color-light); }
+        #image-preview { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; border-radius: 1.5rem; object-fit: contain; opacity: 0; transform: scale(0.95); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; backdrop-filter: blur(4px); }
         #image-preview.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
+        textarea { width: 100%; padding: 1rem; border: 2px solid var(--border-color); border-radius: 1rem; background-color: var(--drop-zone-bg); color: var(--text-color); font-family: 'Vazirmatn', sans-serif; font-size: 1rem; resize: vertical; min-height: 80px; box-sizing: border-box; transition: all 0.3s ease; }
+        textarea:focus { outline: none; border-color: var(--primary-color-start); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color-start) 15%, transparent); }
+        button#submit-btn { position: relative; overflow: hidden; width: 100%; padding: 1.1rem; border: none; border-radius: 1rem; background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%); background-size: 200% auto; color: white; font-size: 1.1rem; font-weight: 700; cursor: pointer; margin-top: 1rem; transition: all 0.4s var(--ease-out-expo); box-shadow: 0 4px 15px var(--shadow-color-light); }
+        button#submit-btn:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 10px 25px -5px var(--shadow-color-light); background-position: right center; }
         button#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        .loader-dots { display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; }
+        .loader-dots div { width: 8px; height: 8px; margin: 0 4px; background-color: white; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
+        .loader-dots .dot1 { animation-delay: -0.32s; } .loader-dots .dot2 { animation-delay: -0.16s; }
         @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
         #btn-text.hidden { visibility: hidden; }
+        #result-container { border: 2px solid var(--border-color); border-radius: 1.5rem; min-height: 300px; position: relative; background-color: var(--drop-zone-bg); overflow: hidden; padding: 0.75rem; transition: border-color 0.3s ease; }
+        #loading-placeholder { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 0; animation: fadeIn 0.5s ease forwards; position: absolute; inset: 0; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         #result-container.loading #loading-placeholder { display: flex; }
+        .creative-loader { width: 100px; height: 100px; position: relative; } /* Styles for creative loader remain the same */
+        .creative-loader svg { width: 100%; height: 100%; } .creative-loader .arc { fill: none; stroke-width: 4; stroke-linecap: round; transform-origin: 50% 50%; animation: spin-loader 2s linear infinite; } .creative-loader .arc1 { stroke: var(--primary-color-start); animation-duration: 2.2s; } .creative-loader .arc2 { stroke: var(--primary-color-end); animation-duration: 1.8s; animation-direction: reverse; } .creative-loader .arc3 { stroke: #8b5cf6; animation-duration: 2s; } .creative-loader .star { fill: var(--primary-color-end); transform-origin: center; animation: pulse-star 1.5s ease-in-out infinite; } @keyframes spin-loader { to { transform: rotate(360deg); } } @keyframes pulse-star { 0%, 100% { transform: scale(0.9); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } } .loading-text { font-weight: 500; color: #64748b; }
+        #result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
         @keyframes popIn-spring { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 80% { opacity: 1; transform: scale(1.05) translateY(-5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
+        .result-img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards; }
+        .result-img:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 10px 30px -5px var(--shadow-color-dark); }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
+        /* -- LIGHTBOX IMPROVEMENTS -- */
+        #lightbox { position: fixed; inset: 0; background-color: rgba(10, 20, 40, 0.9); z-index: 1000; display: none; justify-content: center; align-items: center; padding: 1rem; box-sizing: border-box; backdrop-filter: blur(8px); }
+        #lightbox-content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
+        #lightbox-img { max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+        .lightbox-btn { background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none; }
         .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
+        .lightbox-btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+        #lightbox-close { position: absolute; top: 20px; right: 20px; z-index: 1002; }
+        #lightbox-download { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1002; }
+        #lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1001; }
+        #lightbox-prev { left: 20px; } #lightbox-next { right: 20px; }
         /* --- History Gallery Styles --- */
         .gallery-header { display: flex; justify-content: space-between; align-items: center; }
+        #clear-history-btn { background: none; border: 1px solid var(--border-color); color: #64748b; padding: 0.5rem 1rem; border-radius: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-family: 'Vazirmatn', sans-serif; font-weight: 500; transition: all 0.2s; }
         #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
+        #history-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
+        #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: #64748b; grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--drop-zone-bg); border-radius: 1rem; }
+        .history-item { background-color: var(--drop-zone-bg); border-radius: 1.25rem; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 2px 8px var(--shadow-color-dark); transition: all 0.4s ease; opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards; display: flex; flex-direction: column; }
         .history-item.removing { transform: scale(0.9); opacity: 0; }
         .history-item:hover { transform: translateY(-8px); box-shadow: 0 10px 20px var(--shadow-color-dark); }
+        .history-item-thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.5rem; }
+        .history-item-thumbnails img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.75rem; cursor: pointer; transition: transform 0.2s ease; }
         .history-item-thumbnails img:hover { transform: scale(1.08); }
         .history-item-content { padding: 0 1.25rem 1.25rem 1.25rem; border-top: 1px solid var(--border-color); }
+        .history-item-prompt { font-size: 0.95rem; font-weight: 500; margin: 1rem 0; line-height: 1.6em; }
+        .history-item-footer { display: flex; justify-content: flex-end; align-items: center; }
+        .delete-btn { background-color: transparent; color: var(--danger-color); border: 1px solid transparent; padding: 0.5rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; }
+        .delete-btn:hover { background-color: color-mix(in srgb, var(--danger-color) 10%, transparent); border-color: color-mix(in srgb, var(--danger-color) 20%, transparent); }
+        .delete-btn svg { width: 20px; height: 20px; }
         @media (max-width: 600px) {
             body { padding: 1.5rem 1rem; }
             main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.5rem; }
             .history-item-thumbnails { grid-template-columns: repeat(2, 1fr); }
+            #lightbox-prev, #lightbox-next { bottom: 20px; top: auto; transform: translateY(0); }
+            #lightbox-prev { left: 20px; } #lightbox-next { right: 20px; }
+            #lightbox-download { left: 50%; transform: translateX(-50%); }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- HEADER AND UPLOAD SECTIONS (UNCHANGED HTML) -->
         <header>
             <h1>فتوشاپ هوش مصنوعی ✨</h1>
             <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p>
         <main>
             <div class="panel">
+                <h2>1. تصویر خود را انتخاب کنید</h2>
                 <div id="drop-zone">
                     <div id="drop-zone-content">
                         <span id="drop-zone-text">تصویر را اینجا بکشید یا از دکمه زیر استفاده کنید</span>
                         <button class="upload-btn-styled">انتخاب فایل</button>
                     </div>
                 </div>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
             <div class="controls">
+                <h2>2. دستور ویرایش را بنویسید</h2>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
+                <button id="submit-btn" disabled><span id="btn-text">خلق کن</span></button>
                 <p id="error-message"></p>
             </div>
             <div class="panel">
+                <h2>3. نتیجه را ببینید</h2>
                 <div id="result-container">
                     <div id="loading-placeholder">
+                        <div class="creative-loader"><svg viewBox="0 0 50 50"><g><circle class="arc arc1" cx="25" cy="25" r="22"></circle><circle class="arc arc2" cx="25" cy="25" r="18"></circle><circle class="arc arc3" cx="25" cy="25" r="14"></circle><path class="star" d="M25,21 L26.9,24.1 L30,25 L26.9,25.9 L25,29 L23.1,25.9 L20,25 L23.1,24.1 Z"></path></g></svg></div>
                         <p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p>
                     </div>
                     <div id="result-grid"></div>
             </div>
         </main>
+        <!-- HISTORY SECTION (UNCHANGED HTML) -->
         <section class="gallery-section">
             <div class="gallery-header">
+                 <h2>گالری و تاریخچه شما</h2>
                 <button id="clear-history-btn" style="display: none;">
                     <span>پاک کردن همه</span>
                 </button>
             </div>
         </section>
     </div>
+    <!-- IMPROVED LIGHTBOX WITH NAVIGATION -->
     <div id="lightbox">
+        <div id="lightbox-content">
+            <button id="lightbox-prev" class="lightbox-btn" title="تصویر قبلی">
+                <svg fill="white" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+            </button>
+            <img id="lightbox-img" src="">
+            <button id="lightbox-next" class="lightbox-btn" title="تصویر بعدی">
+                <svg fill="white" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+            </button>
+        </div>
+        <a id="lightbox-download" href="#" download="edited-image.png" title="دانلود تصویر" class="lightbox-btn">
+             <svg fill="white" width="24" height="24" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+        </a>
+        <button id="lightbox-close" class="lightbox-btn">&times;</button>
     </div>
     <script>
         const HISTORY_KEY = 'aiPhotoshopHistory';
         // Element Selectors
+        const fileInput = document.getElementById('file-input');
         const dropZone = document.getElementById('drop-zone');
         const dropZoneContent = document.getElementById('drop-zone-content');
+        const uploadBtnStyled = document.querySelector('.upload-btn-styled');
         const imagePreview = document.getElementById('image-preview');
         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 historyGrid = document.getElementById('history-grid');
+        const clearHistoryBtn = document.getElementById('clear-history-btn');
+        // Lightbox Elements
         const lightbox = document.getElementById('lightbox');
         const lightboxImg = document.getElementById('lightbox-img');
         const lightboxClose = document.getElementById('lightbox-close');
         const lightboxDownload = document.getElementById('lightbox-download');
+        const lightboxPrev = document.getElementById('lightbox-prev');
+        const lightboxNext = document.getElementById('lightbox-next');
+        // State variables
         let uploadedFile = null;
+        let currentLightboxGroup = [];
+        let currentLightboxIndex = 0;
+        let currentBlobUrl = null;
         // --- Event Listeners Setup ---
         dropZone.addEventListener('click', () => fileInput.click());
+        uploadBtnStyled.addEventListener('click', (e) => { e.stopPropagation(); fileInput.click(); });
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
         ['dragenter', 'dragover'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }));
         ['dragleave', 'drop'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); }));
         dropZone.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0]));
         promptInput.addEventListener('input', checkFormState);
         submitBtn.addEventListener('click', handleSubmit);
+        clearHistoryBtn.addEventListener('click', handleClearHistory);
         lightboxClose.addEventListener('click', closeLightbox);
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
+        lightboxPrev.addEventListener('click', showPrevImage);
+        lightboxNext.addEventListener('click', showNextImage);
         document.addEventListener('DOMContentLoaded', renderHistory);
         function handleFile(file) {
             if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری انتخاب کنید.'); return; }
             uploadedFile = file;
             formData.append('prompt', promptInput.value.trim());
             try {
                 const response = await fetch(API_URL, { method: 'POST', body: formData });
+                if (!response.ok) throw new Error(`خطای سرور: ${response.statusText}`);
                 const result = await response.json();
+                if (result.image_urls && result.image_urls.length > 0) {
                     displayResult(result.image_urls);
                     addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls, id: Date.now() });
                 } else {
              if (isLoading) {
                 resultContainer.classList.add('loading');
                 btnText.classList.add('hidden');
+                if (!submitBtn.querySelector('.loader-dots')) {
+                    const loader = document.createElement('div');
+                    loader.className = 'loader-dots';
+                    loader.innerHTML = '<div></div><div></div><div></div>';
+                    submitBtn.appendChild(loader);
+                }
                 submitBtn.disabled = true;
                 resultGrid.innerHTML = '';
                 errorMessage.style.display = 'none';
                 resultContainer.classList.remove('loading');
                 btnText.classList.remove('hidden');
                 const loader = submitBtn.querySelector('.loader-dots');
+                if (loader) loader.remove();
                 checkFormState();
             }
         }
                 const img = document.createElement('img');
                 img.src = url;
                 img.alt = 'تصویر ویرایش شده';
+                img.className = 'result-img';
                 img.style.animationDelay = `${index * 120}ms`;
+                img.addEventListener('click', () => openLightbox(imageUrls, index));
                 resultGrid.appendChild(img);
             });
         }
             resultGrid.innerHTML = '';
             errorMessage.style.display = 'none';
         }
         function displayError(message) {
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
         }
+        // --- Lightbox Functions ---
+        function openLightbox(urls, index) {
+            currentLightboxGroup = urls;
+            currentLightboxIndex = index;
             lightbox.style.display = 'flex';
+            updateLightboxImage();
+        }
+        function closeLightbox() {
+            lightbox.style.display = 'none';
+            if (currentBlobUrl) {
+                URL.revokeObjectURL(currentBlobUrl);
+                currentBlobUrl = null;
+            }
+        }
+        function showPrevImage() {
+            currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxGroup.length) % currentLightboxGroup.length;
+            updateLightboxImage();
+        }
+        function showNextImage() {
+            currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length;
+            updateLightboxImage();
+        }
+        async function updateLightboxImage() {
+            const url = currentLightboxGroup[currentLightboxIndex];
+            lightboxImg.src = url;
+            // --- ROBUST DOWNLOAD LOGIC ---
+            lightboxDownload.classList.add('disabled'); // Disable while fetching
+            if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl);
+            try {
+                const response = await fetch(url);
+                const blob = await response.blob();
+                currentBlobUrl = URL.createObjectURL(blob);
+                lightboxDownload.href = currentBlobUrl;
+                lightboxDownload.download = `ai-photoshop-${Date.now()}.png`;
+                lightboxDownload.classList.remove('disabled');
+            } catch (error) {
+                console.error('Download failed:', error);
+                // Optionally hide or keep it disabled
+            }
         }
         // --- History Management Functions ---
         function getHistory() {
+            try { return JSON.parse(localStorage.getItem(HISTORY_KEY)) || []; } catch (e) { return []; }
         }
         function saveHistory(history) {
             localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
             renderHistory();
         }
         function addToHistory(item) {
             let history = getHistory();
             history.unshift(item);
+            if (history.length > 20) history.pop(); // Limit history size
             saveHistory(history);
         }
         function deleteHistoryItem(id) {
+            let history = getHistory().filter(item => item.id !== id);
+            saveHistory(history);
         }
         function handleClearHistory() {
+            if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) {
                 localStorage.removeItem(HISTORY_KEY);
                 renderHistory();
             }
         function renderHistory() {
             const history = getHistory();
             historyGrid.innerHTML = '';
             clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none';
+            history.forEach((item, historyIndex) => {
                 const card = document.createElement('div');
                 card.className = 'history-item';
+                card.style.animationDelay = `${historyIndex * 80}ms`;
                 const thumbnailsContainer = document.createElement('div');
                 thumbnailsContainer.className = 'history-item-thumbnails';
+                item.urls.forEach((url, urlIndex) => {
                     const img = document.createElement('img');
                     img.src = url;
+                    img.addEventListener('click', () => openLightbox(item.urls, urlIndex));
                     thumbnailsContainer.appendChild(img);
                 });
+                const contentContainer = document.createElement('div');
+                contentContainer.className = 'history-item-content';
+                contentContainer.innerHTML = `
+                    <p class="history-item-prompt">${item.prompt}</p>
+                    <div class="history-item-footer">
+                         <button class="delete-btn" data-id="${item.id}" 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>
+                    </div>`;
+                contentContainer.querySelector('.delete-btn').addEventListener('click', (e) => {
+                    e.stopPropagation();
                     const idToDelete = Number(e.currentTarget.getAttribute('data-id'));
                     const cardElement = e.currentTarget.closest('.history-item');
                     cardElement.classList.add('removing');
+                    setTimeout(() => deleteHistoryItem(idToDelete), 400);
                 });
+                card.appendChild(thumbnailsContainer);
+                card.appendChild(contentContainer);
                 historyGrid.appendChild(card);
             });
         }
         checkFormState();
     </script>
 </body>