Update index.html

index.html

@@ -20,6 +20,8 @@
             --accent-primary-hover: #3553D6;
             --accent-primary-glow: rgba(74, 108, 250, 0.25);
             --accent-secondary: #0FD4A8;
+            --danger-color: #e53e3e;
+            --danger-color-hover: #c53030;
             --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
             --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
             --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
@@ -94,7 +96,7 @@
         }
         .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.8; }
 
-        main {
+        main, .gallery-section {
             padding: 3rem;
             background-color: var(--panel-bg);
             border-radius: var(--radius-card);
@@ -102,6 +104,10 @@
             border: 1px solid var(--panel-border);
             animation: fadeIn 0.8s 0.3s ease-out backwards;
         }
+        .gallery-section {
+             margin-top: 3rem; 
+             animation-delay: 0.5s;
+        }
 
         .form-group { margin-bottom: 2.5rem; }
         .form-group:last-child { margin-bottom: 0; }
@@ -283,7 +289,8 @@
 
         #result-image-wrapper { display: none; width: 100%; }
         #result-container.has-content #result-image-wrapper { display: block; animation: fadeIn 0.5s; text-align: center; }
-        #result-image-display { max-width: 100%; max-height: 500px; object-fit: contain; border-radius: var(--radius-input); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
+        #result-image-display { max-width: 100%; max-height: 500px; object-fit: contain; border-radius: var(--radius-input); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); cursor: pointer; transition: var(--transition-smooth); }
+        #result-image-display:hover { box-shadow: var(--shadow-lg); transform: scale(1.02); }
         .error-message { color: #d93025; font-weight: bold; margin-top: 10px; background: #ffebee; padding: 1rem; border-radius: var(--radius-input); border: 1px solid #e57373; }
         
         .output-details { display: none !important; }
@@ -315,12 +322,10 @@
             gap: 1rem; 
             padding: 10px;
         }
-
-        /* <<< START: روش جدید و سازگار برای ساخت مربع >>> */
         .lora-card {
-            position: relative; /* ایجاد موقعیت برای عکس داخلی */
+            position: relative;
             height: 0;
-            padding-bottom: 100%; /* این باعث می‌شود ارتفاع کارت برابر با عرض آن (مربع) شود */
+            padding-bottom: 100%;
             border-radius: var(--radius-input);
             overflow: hidden;
             cursor: pointer;
@@ -328,32 +333,26 @@
             background-color: var(--input-bg);
             border: 1px solid transparent;
             box-shadow: var(--shadow-sm);
-            -webkit-user-select: none; /* Safari */
-            -ms-user-select: none; /* IE 10+ */
-            user-select: none; /* Standard syntax */
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
         }
-
         .lora-card:hover {
             transform: translateY(-5px); 
             box-shadow: var(--shadow-lg);
             border-color: var(--accent-primary);
         }
-
         .lora-card img {
-            position: absolute; /* عکس را داخل کادر مربع قرار می‌دهد */
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
-            height: 100%; /* عکس کل فضای مربع را پر می‌کند */
+            height: 100%;
             object-fit: cover;
             transition: opacity 0.3s ease-in-out;
             opacity: 0;
         }
-        /* <<< END: روش جدید و سازگار برای ساخت مربع >>> */
-
-        .lora-card img.loaded {
-            opacity: 1;
-        }
+        .lora-card img.loaded { opacity: 1; }
         
         .ip-reset-guide-container { text-align: right; background: var(--panel-bg); padding: 10px; border-radius: var(--radius-lg-guide); animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; max-width: 100%; width: 100%; position: relative; overflow: hidden; box-sizing: border-box; }
         .ip-reset-guide-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--primary-gradient-guide); }
@@ -421,11 +420,121 @@
             font-weight: 500;
         }
 
+        .gallery-header { display: flex; justify-content: space-between; align-items: center; }
+        #clear-history-btn { background: none; border: 1px solid var(--panel-border); color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-btn); cursor: pointer; display: none; align-items: center; gap: 0.5rem; font-family: var(--app-font); font-weight: 500; transition: all 0.2s; }
+        #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
+        #clear-history-btn svg { width: 18px; height: 18px; }
+
+        #history-grid { 
+            display: grid; 
+            grid-template-columns: repeat(4, 1fr); 
+            gap: 1rem; 
+            margin-top: 1.5rem; 
+        }
+        #history-grid:empty::before { 
+            content: 'هنوز تصویری خلق نکرده‌اید. اولین اثر شما اینجا ذخیره خواهد شد. (توجه: تصاویر پس از ۶ ساعت برای حفظ حریم خصوصی حذف می‌شوند)'; 
+            color: var(--text-secondary); 
+            grid-column: 1 / -1; 
+            text-align: center; 
+            padding: 3rem 1rem; 
+            background-color: var(--input-bg); 
+            border-radius: var(--radius-card); 
+            line-height: 1.8;
+        }
+        .history-item { position: relative; }
+        .history-item img { 
+            width: 100%; 
+            aspect-ratio: 1 / 1; 
+            object-fit: cover; 
+            border-radius: var(--radius-input); 
+            cursor: pointer; 
+            transition: var(--transition-smooth); 
+            border: 1px solid var(--panel-border); 
+        }
+        .history-item:hover img { 
+            transform: translateY(-5px) scale(1.05); 
+            box-shadow: var(--shadow-lg); 
+            z-index: 5;
+        }
+        .history-delete-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(26,32,44,0.6); border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: white; transition: var(--transition-smooth); z-index: 6; opacity: 0; }
+        .history-item:hover .history-delete-btn { opacity: 1; }
+        .history-delete-btn:hover { background-color: var(--danger-color); }
+        .history-delete-btn svg { width: 18px; height: 18px; }
+
+        #lightbox { 
+            position: fixed; 
+            inset: 0; 
+            background-color: rgba(18, 24, 38, 0.6); 
+            backdrop-filter: blur(10px) saturate(150%); 
+            display: flex; 
+            align-items: center; 
+            justify-content: center; 
+            z-index: 1000; 
+            opacity: 0; 
+            transition: opacity 0.3s; 
+            pointer-events: none; 
+        }
+        #lightbox.visible { 
+            opacity: 1; 
+            pointer-events: auto; 
+        }
+        #lightbox-content { 
+            position: relative; 
+            animation: fadeIn 0.3s ease; 
+            display: flex; 
+            align-items: center; 
+            justify-content: center; 
+        }
+        #lightbox-img { 
+            max-width: 85vw; 
+            max-height: 80vh; 
+            object-fit: contain; 
+            border-radius: var(--radius-card); 
+            box-shadow: var(--shadow-xl); 
+        }
+        .lightbox-btn { 
+            position: absolute; 
+            background-color: rgba(255, 255, 255, 0.1); 
+            color: white; 
+            border: 1px solid rgba(255,255,255,0.2); 
+            width: 44px; 
+            height: 44px; 
+            border-radius: 50%; 
+            cursor: pointer; 
+            display: flex; 
+            justify-content: center; 
+            align-items: center; 
+            transition: all 0.2s; 
+            text-decoration: none; 
+            font-size: 24px; 
+        }
+        .lightbox-btn:hover { 
+            background-color: rgba(255, 255, 255, 0.2); 
+            transform: scale(1.1); 
+        }
+        #lightbox-close { top: -50px; right: 0; }
+        #lightbox-download { top: -50px; left: 0; }
+        
+        #confirmation-modal { position: fixed; inset: 0; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
+        #confirmation-modal.visible { opacity: 1; pointer-events: auto; }
+        .modal-dialog { background: var(--panel-bg); color: var(--text-primary); border-radius: var(--radius-card); padding: 2rem; width: 90%; max-width: 400px; text-align: center; box-shadow: var(--shadow-xl); animation: fadeIn 0.3s ease-out backwards; }
+        .modal-icon { width: 48px; height: 48px; margin: 0 auto 1.5rem; color: var(--danger-color); }
+        .modal-dialog h3 { font-size: 1.5rem; margin: 0 0 0.75rem; font-weight: 700; }
+        .modal-dialog p { font-size: 1rem; color: var(--text-secondary); margin: 0 0 2rem; }
+        .modal-buttons { display: flex; gap: 1rem; }
+        .modal-btn { flex: 1; padding: 0.8rem 1rem; border-radius: var(--radius-btn); border: none; cursor: pointer; font-family: var(--app-font); font-weight: 600; font-size: 1rem; transition: var(--transition-smooth); }
+        .modal-btn.confirm-btn { background-color: var(--danger-color); color: white; }
+        .modal-btn.confirm-btn:hover { background-color: var(--danger-color-hover); transform: translateY(-2px); }
+        .modal-btn.cancel-btn { background-color: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
+        .modal-btn.cancel-btn:hover { background-color: var(--panel-border); color: var(--text-primary); }
+
         @media (max-width: 768px) {
-            main { padding: 1.5rem; } h1 { font-size: 2.2rem; }
+            main, .gallery-section { padding: 1.5rem; } 
+            h1 { font-size: 2.2rem; }
             .aspect-ratio-selector { grid-template-columns: repeat(2, 1fr); }
             .style-preview-card { flex-direction: column; text-align: center; gap: 1rem; }
             #selected-style-image-large { margin-left: 0; }
+            #history-grid { grid-template-columns: repeat(2, 1fr); }
         }
     </style>
 </head>
@@ -503,6 +612,20 @@
 
             <div class="output-details" id="output-details"></div>
         </main>
+        
+        <section class="gallery-section">
+            <div class="gallery-header">
+                <div class="form-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+                    گالری و تاریخچه شما
+                </div>
+                <button id="clear-history-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    <span>پاک کردن همه</span>
+                </button>
+            </div>
+            <div id="history-grid"></div>
+        </section>
     </div>
 
     <div class="modal-overlay" id="style-modal">
@@ -514,294 +637,74 @@
             <div id="lora-grid"></div>
         </div>
     </div>
+    
+    <div id="lightbox">
+        <div id="lightbox-content">
+             <img id="lightbox-img" src="">
+             <button id="lightbox-close" class="lightbox-btn" title="بستن">&times;</button>
+             <a id="lightbox-download" title="دانلود تصویر" class="lightbox-btn" href="#" download>
+                 <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+             </a>
+        </div>
+    </div>
+    
+    <div id="confirmation-modal">
+        <div class="modal-dialog">
+            <div class="modal-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
+            <h3>تایید حذف</h3>
+            <p id="modal-message-text">آیا از انجام این عمل مطمئن هستید؟</p>
+            <div class="modal-buttons"><button id="modal-cancel-btn" class="modal-btn cancel-btn">انصراف</button><button id="modal-confirm-btn" class="modal-btn confirm-btn">بله، حذف کن</button></div>
+        </div>
+    </div>
 
     <script type="module">
         import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
         
         const loras = [
-            {
-                "image": "https://huggingface.co/prithivMLmods/Flux-Dalle-Mix-LoRA/resolve/main/images/D3.png",
-                "title": "Dalle Mix",
-                "repo": "prithivMLmods/Flux-Dalle-Mix-LoRA",
-                "trigger_word": "dalle-mix"
-            },
-            {
-                "image": "https://huggingface.co/alvdansen/flux-koda/resolve/main/images/ComfyUI_00583_%20(1).png",
-                "title": "Koda",
-                "repo": "alvdansen/flux-koda",
-                "trigger_word": "flmft style"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Super-Realism-LoRA/resolve/main/images/1.png",
-                "title": "Super Realism",
-                "repo": "strangerzonehf/Flux-Super-Realism-LoRA",
-                "trigger_word": "Super Realism"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Ghibli-Flux-Cartoon-LoRA/resolve/main/images/3333.png",
-                "title": "Ghibli Flux",
-                "repo": "strangerzonehf/Ghibli-Flux-Cartoon-LoRA",
-                "trigger_word": "Ghibli Art"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Sketch-Smudge-LoRA/resolve/main/images/5.png",
-                "title": "Sketch_Smudge",
-                "repo": "strangerzonehf/Flux-Sketch-Smudge-LoRA",
-                "trigger_word": " Sketch Smudge"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Animeo-v1-LoRA/resolve/main/images/A4.png",
-                "title": "Animeo Mix",
-                "repo": "strangerzonehf/Flux-Animeo-v1-LoRA",
-                "trigger_word": "Animeo"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Animex-v2-LoRA/resolve/main/images/A33.png",
-                "title": "Animex Mix",
-                "repo": "strangerzonehf/Flux-Animex-v2-LoRA",
-                "trigger_word": "Animex"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Super-Portrait-LoRA/resolve/main/images/3.png",
-                "title": "Super Portraits",
-                "repo": "strangerzonehf/Flux-Super-Portrait-LoRA",
-                "trigger_word": "Super Portrait"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Super-Blend-LoRA/resolve/main/images/SB1.png",
-                "title": "Super Blend",
-                "repo": "strangerzonehf/Flux-Super-Blend-LoRA",
-                "trigger_word": "Super Blend"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Midjourney-Mix2-LoRA/resolve/main/images/3.png",
-                "title": "Midjourney Mix 2",
-                "repo": "strangerzonehf/Flux-Midjourney-Mix2-LoRA",
-                "trigger_word": "MJ v6"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Ultimate-LoRA-Collection/resolve/main/images/example_aqz3dv60n.jpeg",
-                "title": "SHOU_XIN",
-                "repo": "Datou1111/shou_xin",
-                "trigger_word": "shou_xin, pencil sketch"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Flux-Long-Toon-LoRA/resolve/main/images/LT5.png",
-                "title": "Long Toons",
-                "repo": "prithivMLmods/Flux-Long-Toon-LoRA",
-                "trigger_word": "Long toons"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Cute-3D-Kawaii-LoRA/resolve/main/images/CK3.png",
-                "title": "Cute 3D Kawaii",
-                "repo": "strangerzonehf/Flux-Cute-3D-Kawaii-LoRA",
-                "trigger_word": "Cute 3d Kawaii"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-Isometric-3D-LoRA/resolve/main/images/ID2.png",
-                "title": "Isometric 3D",
-                "repo": "strangerzonehf/Flux-Isometric-3D-LoRA",
-                "trigger_word": "Isometric 3D"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Flux-Toonic-2.5D-LoRA/resolve/main/images/T2.png",
-                "title": "Toon 2.5D",
-                "repo": "prithivMLmods/Flux-Toonic-2.5D-LoRA",
-                "trigger_word": "toonic 2.5D"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-YWL-Realism-LoRA/resolve/main/images/R3.png",
-                "title": "YWL Realism",
-                "repo": "strangerzonehf/Flux-YWL-Realism-LoRA",
-                "trigger_word": "ylw realism"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Flux-Chill-Guy-Zone/resolve/main/images/8.png",
-                "title": "Chill Guy",
-                "repo": "prithivMLmods/Flux-Chill-Guy-Zone",
-                "trigger_word": "chill guy"
-            },
-            {
-                "image": "https://huggingface.co/p1atdev/flux.1-schnell-pvc-style-lora/resolve/main/images/flux_lora_00221_.png",
-                "title": "Anime PVC Style",
-                "repo": "p1atdev/flux.1-schnell-pvc-style-lora",
-                "trigger_word": "pvc figure, nendoroid, figma"
-            },
-            {
-                "image": "https://huggingface.co/strangerzonehf/Flux-C4C-Design-LoRA/resolve/main/images/4.png",
-                "title": "Smiley C4C",
-                "repo": "strangerzonehf/Flux-C4C-Design-LoRA",
-                "trigger_word": "Smiley C4C"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Purple-Dreamy-Flux-LoRA/resolve/main/images/PD3.png",
-                "title": "Purple Dream",
-                "repo": "prithivMLmods/Purple-Dreamy-Flux-LoRA",
-                "trigger_word": "Purple Dreamy"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Canopus-LoRA-Flux-FaceRealism/resolve/main/images/11.png",
-                "title": "Flux Face Realism",
-                "repo": "prithivMLmods/Canopus-LoRA-Flux-FaceRealism",
-                "trigger_word": "Realism"
-            },
-            {
-                "image": "https://huggingface.co/alvdansen/softserve_anime/resolve/main/images/ComfyUI_00134_.png",
-                "title": "Softserve Anime",
-                "repo": "alvdansen/softserve_anime",
-                "trigger_word": "sftsrv style illustration"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Fashion-Hut-Modeling-LoRA/resolve/main/images/MO1.png",
-                "title": "Modeling Hut",
-                "repo": "prithivMLmods/Fashion-Hut-Modeling-LoRA",
-                "trigger_word": "Modeling of"
-            },
-            {
-                "image": "https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-One-Click-Creative-Template/resolve/main/images/f2cc649985648e57b9b9b14ca7a8744ac8e50d75b3a334ed4df0f368.jpg",
-                "title": "Creative Template",
-                "repo": "Shakker-Labs/FLUX.1-dev-LoRA-One-Click-Creative-Template",
-                "trigger_word": "The background is 4 real photos, and in the middle is a cartoon picture summarizing the real photos."
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Canopus-LoRA-Flux-UltraRealism-2.0/resolve/main/images/XX.png",
-                "title": "Ultra Realism",
-                "repo": "prithivMLmods/Canopus-LoRA-Flux-UltraRealism-2.0",
-                "trigger_word": "Ultra realistic"
-            },
-            {
-                "image": "https://huggingface.co/gokaygokay/Flux-Game-Assets-LoRA-v2/resolve/main/images/example_y2bqpuphc.png",
-                "title": "Game Assets",
-                "repo": "gokaygokay/Flux-Game-Assets-LoRA-v2",
-                "trigger_word": "wbgmsst, white background"
-            },
-            {
-                "image": "https://huggingface.co/alvdansen/softpasty-flux-dev/resolve/main/images/ComfyUI_00814_%20(2).png",
-                "title": "Softpasty",
-                "repo": "alvdansen/softpasty-flux-dev",
-                "trigger_word": "araminta_illus illustration style"
-            },
-            {
-                "image": "https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-add-details/resolve/main/images/0.png",
-                "title": "Details Add",
-                "repo": "Shakker-Labs/FLUX.1-dev-LoRA-add-details",
-                "trigger_word": ""
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Canopus-LoRA-Flux-Anime/resolve/main/assets/4.png",
-                "title": "Flux Anime",
-                "repo": "prithivMLmods/Canopus-LoRA-Flux-Anime",
-                "trigger_word": "Anime"
-            },
-            {
-                "image": "https://huggingface.co/aleksa-codes/flux-ghibsky-illustration/resolve/main/images/example5.jpg",
-                "title": "Ghibsky Illustration",
-                "repo": "aleksa-codes/flux-ghibsky-illustration",
-                "trigger_word": "GHIBSKY style painting"
-            },
-            {
-                "image": "https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-Dark-Fantasy/resolve/main/images/c2215bd73da9f14fcd63cc93350e66e2901bdafa6fb8abaaa2c32a1b.jpg",
-                "title": "Dark Fantasy",
-                "repo": "Shakker-Labs/FLUX.1-dev-LoRA-Dark-Fantasy",
-                "trigger_word": ""
-            },
-            {
-                "image": "https://huggingface.co/Norod78/Flux_1_Dev_LoRA_Paper-Cutout-Style/resolve/main/d13591878d5043f3989dd6eb1c25b710_233c18effb4b491cb467ca31c97e90b5.png",
-                "title": "Paper Cutout",
-                "repo": "Norod78/Flux_1_Dev_LoRA_Paper-Cutout-Style",
-                "trigger_word": "Paper Cutout Style"
-            },
-            {
-                "image": "https://huggingface.co/alvdansen/mooniverse/resolve/main/images/out-0%20(17).webp",
-                "title": "Mooniverse",
-                "repo": "alvdansen/mooniverse",
-                "trigger_word": "surreal style"
-            },
-            {
-                "image": "https://huggingface.co/alvdansen/pola-photo-flux/resolve/main/images/out-0%20-%202024-09-22T130819.351.webp",
-                "title": "Pola Photo",
-                "repo": "alvdansen/pola-photo-flux",
-                "trigger_word": "polaroid style"
-            },
-            {
-                "image": "https://huggingface.co/multimodalart/flux-tarot-v1/resolve/main/images/7e180627edd846e899b6cd307339140d_5b2a09f0842c476b83b6bd2cb9143a52.png",
-                "title": "Flux Tarot",
-                "repo": "multimodalart/flux-tarot-v1",
-                "trigger_word": "in the style of TOK a trtcrd tarot style"
-            },
-            {
-                "image": "https://huggingface.co/prithivMLmods/Flux-Dev-Real-Anime-LoRA/resolve/main/images/111.png",
-                "title": "Real Anime",
-                "repo": "prithivMLmods/Flux-Dev-Real-Anime-LoRA",
-                "trigger_word": "Real Anime"
-            },
-            {
-                "image": "https://huggingface.co/diabolic6045/Flux_Sticker_Lora/resolve/main/images/example_s3pxsewcb.png",
-                "title": "Stickers",
-                "repo": "diabolic6045/Flux_Sticker_Lora",
-                "trigger_word": "5t1cker 5ty1e"
-            },
-            {
-                "image": "https://huggingface.co/VideoAditor/Flux-Lora-Realism/resolve/main/images/feel-the-difference-between-using-flux-with-lora-from-xlab-v0-j0ehybmvxehd1.png",
-                "title": "Realism",
-                "repo": "XLabs-AI/flux-RealismLora",
-                "trigger_word": ""
-            },
-            {
-                "image": "https://huggingface.co/mgwr/Cine-Aesthetic/resolve/main/images/00019-1333633802.png",
-                "title": "Cine Aesthetic",
-                "repo": "mgwr/Cine-Aesthetic",
-                "trigger_word": "mgwr/cine"
-            },
-            {
-                "image": "https://huggingface.co/SebastianBodza/flux_cute3D/resolve/main/images/astronaut.webp",
-                "title": "Cute 3D",
-                "repo": "SebastianBodza/flux_cute3D",
-                "trigger_word": "NEOCUTE3D"
-            }
+            { "image": "https://huggingface.co/prithivMLmods/Flux-Dalle-Mix-LoRA/resolve/main/images/D3.png", "title": "Dalle Mix", "repo": "prithivMLmods/Flux-Dalle-Mix-LoRA", "trigger_word": "dalle-mix" },
+            { "image": "https://huggingface.co/alvdansen/flux-koda/resolve/main/images/ComfyUI_00583_%20(1).png", "title": "Koda", "repo": "alvdansen/flux-koda", "trigger_word": "flmft style" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Super-Realism-LoRA/resolve/main/images/1.png", "title": "Super Realism", "repo": "strangerzonehf/Flux-Super-Realism-LoRA", "trigger_word": "Super Realism" },
+            { "image": "https://huggingface.co/strangerzonehf/Ghibli-Flux-Cartoon-LoRA/resolve/main/images/3333.png", "title": "Ghibli Flux", "repo": "strangerzonehf/Ghibli-Flux-Cartoon-LoRA", "trigger_word": "Ghibli Art" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Sketch-Smudge-LoRA/resolve/main/images/5.png", "title": "Sketch_Smudge", "repo": "strangerzonehf/Flux-Sketch-Smudge-LoRA", "trigger_word": " Sketch Smudge" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Animeo-v1-LoRA/resolve/main/images/A4.png", "title": "Animeo Mix", "repo": "strangerzonehf/Flux-Animeo-v1-LoRA", "trigger_word": "Animeo" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Animex-v2-LoRA/resolve/main/images/A33.png", "title": "Animex Mix", "repo": "strangerzonehf/Flux-Animex-v2-LoRA", "trigger_word": "Animex" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Super-Portrait-LoRA/resolve/main/images/3.png", "title": "Super Portraits", "repo": "strangerzonehf/Flux-Super-Portrait-LoRA", "trigger_word": "Super Portrait" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Super-Blend-LoRA/resolve/main/images/SB1.png", "title": "Super Blend", "repo": "strangerzonehf/Flux-Super-Blend-LoRA", "trigger_word": "Super Blend" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Midjourney-Mix2-LoRA/resolve/main/images/3.png", "title": "Midjourney Mix 2", "repo": "strangerzonehf/Flux-Midjourney-Mix2-LoRA", "trigger_word": "MJ v6" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Ultimate-LoRA-Collection/resolve/main/images/example_aqz3dv60n.jpeg", "title": "SHOU_XIN", "repo": "Datou1111/shou_xin", "trigger_word": "shou_xin, pencil sketch" },
+            { "image": "https://huggingface.co/prithivMLmods/Flux-Long-Toon-LoRA/resolve/main/images/LT5.png", "title": "Long Toons", "repo": "prithivMLmods/Flux-Long-Toon-LoRA", "trigger_word": "Long toons" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Cute-3D-Kawaii-LoRA/resolve/main/images/CK3.png", "title": "Cute 3D Kawaii", "repo": "strangerzonehf/Flux-Cute-3D-Kawaii-LoRA", "trigger_word": "Cute 3d Kawaii" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-Isometric-3D-LoRA/resolve/main/images/ID2.png", "title": "Isometric 3D", "repo": "strangerzonehf/Flux-Isometric-3D-LoRA", "trigger_word": "Isometric 3D" },
+            { "image": "https://huggingface.co/prithivMLmods/Flux-Toonic-2.5D-LoRA/resolve/main/images/T2.png", "title": "Toon 2.5D", "repo": "prithivMLmods/Flux-Toonic-2.5D-LoRA", "trigger_word": "toonic 2.5D" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-YWL-Realism-LoRA/resolve/main/images/R3.png", "title": "YWL Realism", "repo": "strangerzonehf/Flux-YWL-Realism-LoRA", "trigger_word": "ylw realism" },
+            { "image": "https://huggingface.co/prithivMLmods/Flux-Chill-Guy-Zone/resolve/main/images/8.png", "title": "Chill Guy", "repo": "prithivMLmods/Flux-Chill-Guy-Zone", "trigger_word": "chill guy" },
+            { "image": "https://huggingface.co/p1atdev/flux.1-schnell-pvc-style-lora/resolve/main/images/flux_lora_00221_.png", "title": "Anime PVC Style", "repo": "p1atdev/flux.1-schnell-pvc-style-lora", "trigger_word": "pvc figure, nendoroid, figma" },
+            { "image": "https://huggingface.co/strangerzonehf/Flux-C4C-Design-LoRA/resolve/main/images/4.png", "title": "Smiley C4C", "repo": "strangerzonehf/Flux-C4C-Design-LoRA", "trigger_word": "Smiley C4C" },
+            { "image": "https://huggingface.co/prithivMLmods/Purple-Dreamy-Flux-LoRA/resolve/main/images/PD3.png", "title": "Purple Dream", "repo": "prithivMLmods/Purple-Dreamy-Flux-LoRA", "trigger_word": "Purple Dreamy" },
+            { "image": "https://huggingface.co/prithivMLmods/Canopus-LoRA-Flux-FaceRealism/resolve/main/images/11.png", "title": "Flux Face Realism", "repo": "prithivMLmods/Canopus-LoRA-Flux-FaceRealism", "trigger_word": "Realism" },
+            { "image": "https://huggingface.co/alvdansen/softserve_anime/resolve/main/images/ComfyUI_00134_.png", "title": "Softserve Anime", "repo": "alvdansen/softserve_anime", "trigger_word": "sftsrv style illustration" },
+            { "image": "https://huggingface.co/prithivMLmods/Fashion-Hut-Modeling-LoRA/resolve/main/images/MO1.png", "title": "Modeling Hut", "repo": "prithivMLmods/Fashion-Hut-Modeling-LoRA", "trigger_word": "Modeling of" },
+            { "image": "https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-One-Click-Creative-Template/resolve/main/images/f2cc649985648e57b9b9b14ca7a8744ac8e50d75b3a334ed4df0f368.jpg", "title": "Creative Template", "repo": "Shakker-Labs/FLUX.1-dev-LoRA-One-Click-Creative-Template", "trigger_word": "The background is 4 real photos, and in the middle is a cartoon picture summarizing the real photos." },
+            { "image": "https://huggingface.co/prithivMLmods/Canopus-LoRA-Flux-UltraRealism-2.0/resolve/main/images/XX.png", "title": "Ultra Realism", "repo": "prithivMLmods/Canopus-LoRA-Flux-UltraRealism-2.0", "trigger_word": "Ultra realistic" },
+            { "image": "https://huggingface.co/gokaygokay/Flux-Game-Assets-LoRA-v2/resolve/main/images/example_y2bqpuphc.png", "title": "Game Assets", "repo": "gokaygokay/Flux-Game-Assets-LoRA-v2", "trigger_word": "wbgmsst, white background" },
+            { "image": "https://huggingface.co/alvdansen/softpasty-flux-dev/resolve/main/images/ComfyUI_00814_%20(2).png", "title": "Softpasty", "repo": "alvdansen/softpasty-flux-dev", "trigger_word": "araminta_illus illustration style" },
+            { "image": "https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-add-details/resolve/main/images/0.png", "title": "Details Add", "repo": "Shakker-Labs/FLUX.1-dev-LoRA-add-details", "trigger_word": "" },
+            { "image": "https://huggingface.co/prithivMLmods/Canopus-LoRA-Flux-Anime/resolve/main/assets/4.png", "title": "Flux Anime", "repo": "prithivMLmods/Canopus-LoRA-Flux-Anime", "trigger_word": "Anime" },
+            { "image": "https://huggingface.co/aleksa-codes/flux-ghibsky-illustration/resolve/main/images/example5.jpg", "title": "Ghibsky Illustration", "repo": "aleksa-codes/flux-ghibsky-illustration", "trigger_word": "GHIBSKY style painting" },
+            { "image": "https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-Dark-Fantasy/resolve/main/images/c2215bd73da9f14fcd63cc93350e66e2901bdafa6fb8abaaa2c32a1b.jpg", "title": "Dark Fantasy", "repo": "Shakker-Labs/FLUX.1-dev-LoRA-Dark-Fantasy", "trigger_word": "" },
+            { "image": "https://huggingface.co/Norod78/Flux_1_Dev_LoRA_Paper-Cutout-Style/resolve/main/d13591878d5043f3989dd6eb1c25b710_233c18effb4b491cb467ca31c97e90b5.png", "title": "Paper Cutout", "repo": "Norod78/Flux_1_Dev_LoRA_Paper-Cutout-Style", "trigger_word": "Paper Cutout Style" },
+            { "image": "https://huggingface.co/alvdansen/mooniverse/resolve/main/images/out-0%20(17).webp", "title": "Mooniverse", "repo": "alvdansen/mooniverse", "trigger_word": "surreal style" },
+            { "image": "https://huggingface.co/alvdansen/pola-photo-flux/resolve/main/images/out-0%20-%202024-09-22T130819.351.webp", "title": "Pola Photo", "repo": "alvdansen/pola-photo-flux", "trigger_word": "polaroid style" },
+            { "image": "https://huggingface.co/multimodalart/flux-tarot-v1/resolve/main/images/7e180627edd846e899b6cd307339140d_5b2a09f0842c476b83b6bd2cb9143a52.png", "title": "Flux Tarot", "repo": "multimodalart/flux-tarot-v1", "trigger_word": "in the style of TOK a trtcrd tarot style" },
+            { "image": "https://huggingface.co/prithivMLmods/Flux-Dev-Real-Anime-LoRA/resolve/main/images/111.png", "title": "Real Anime", "repo": "prithivMLmods/Flux-Dev-Real-Anime-LoRA", "trigger_word": "Real Anime" },
+            { "image": "https://huggingface.co/diabolic6045/Flux_Sticker_Lora/resolve/main/images/example_s3pxsewcb.png", "title": "Stickers", "repo": "diabolic6045/Flux_Sticker_Lora", "trigger_word": "5t1cker 5ty1e" },
+            { "image": "https://huggingface.co/VideoAditor/Flux-Lora-Realism/resolve/main/images/feel-the-difference-between-using-flux-with-lora-from-xlab-v0-j0ehybmvxehd1.png", "title": "Realism", "repo": "XLabs-AI/flux-RealismLora", "trigger_word": "" },
+            { "image": "https://huggingface.co/mgwr/Cine-Aesthetic/resolve/main/images/00019-1333633802.png", "title": "Cine Aesthetic", "repo": "mgwr/Cine-Aesthetic", "trigger_word": "mgwr/cine" },
+            { "image": "https://huggingface.co/SebastianBodza/flux_cute3D/resolve/main/images/astronaut.webp", "title": "Cute 3D", "repo": "SebastianBodza/flux_cute3D", "trigger_word": "NEOCUTE3D" }
         ];
         
         const loraPersianNames = {
-            "Dalle Mix": "ترکیب دالی",
-            "Koda": "کُدا",
-            "Super Realism": "واقع‌گرایی خارق‌العاده",
-            "Ghibli Flux": "سبک جیبلی",
-            "Sketch_Smudge": "طراحی و لکه",
-            "Animeo Mix": "ترکیب انیمه",
-            "Animex Mix": "ترکیب انیمکس",
-            "Super Portraits": "پرتره‌های ویژه",
-            "Super Blend": "ترکیب ویژه",
-            "Midjourney Mix 2": "ترکیب میدجرنی ۲",
-            "SHOU_XIN": "شو شین",
-            "Long Toons": "کارتون‌های بلند",
-            "Cute 3D Kawaii": "کاوایی سه‌بعدی",
-            "Isometric 3D": "ایزومتریک سه‌بعدی",
-            "Toon 2.5D": "کارتون ۲.۵ بعدی",
-            "YWL Realism": "واقع‌گرایی YWL",
-            "Chill Guy": "پسر آرام",
-            "Anime PVC Style": "سبک انیمه PVC",
-            "Smiley C4C": "لبخند C4C",
-            "Purple Dream": "رویای بنفش",
-            "Flux Face Realism": "چهره واقع‌گرایانه",
-            "Softserve Anime": "انیمه سافت‌سرو",
-            "Modeling Hut": "کلبه مدلینگ",
-            "Creative Template": "قالب خلاقانه",
-            "Ultra Realism": "فرا واقع‌گرایی",
-            "Game Assets": "آیتم‌های بازی",
-            "Softpasty": "سافت‌پِیستی",
-            "Details Add": "افزودن جزئیات",
-            "Flux Anime": "فلاکس انیمه",
-            "Ghibsky Illustration": "تصویرسازی گیبسکی",
-            "Dark Fantasy": "فانتزی تاریک",
-            "Paper Cutout": "هنر کاغذبری",
-            "Mooniverse": "دنیای ماه",
-            "Pola Photo": "عکس پولاروید",
-            "Flux Tarot": "فال تاروت",
-            "Real Anime": "انیمه واقعی",
-            "Stickers": "استیکرها",
-            "Realism": "واقع‌گرایی",
-            "Cine Aesthetic": "زیبایی‌شناسی سینمایی",
-            "Cute 3D": "سه‌بعدی بامزه"
+            "Dalle Mix": "ترکیب دالی", "Koda": "کُدا", "Super Realism": "واقع‌گرایی خارق‌العاده", "Ghibli Flux": "سبک جیبلی", "Sketch_Smudge": "طراحی و لکه", "Animeo Mix": "ترکیب انیمه", "Animex Mix": "ترکیب انیمکس", "Super Portraits": "پرتره‌های ویژه", "Super Blend": "ترکیب ویژه", "Midjourney Mix 2": "ترکیب میدجرنی ۲", "SHOU_XIN": "شو شین", "Long Toons": "کارتون‌های بلند", "Cute 3D Kawaii": "کاوایی سه‌بعدی", "Isometric 3D": "ایزومتریک سه‌بعدی", "Toon 2.5D": "کارتون ۲.۵ بعدی", "YWL Realism": "واقع‌گرایی YWL", "Chill Guy": "پسر آرام", "Anime PVC Style": "سبک انیمه PVC", "Smiley C4C": "لبخند C4C", "Purple Dream": "رویای بنفش", "Flux Face Realism": "چهره واقع‌گرایانه", "Softserve Anime": "انیمه سافت‌سرو", "Modeling Hut": "کلبه مدلینگ", "Creative Template": "قالب خلاقانه", "Ultra Realism": "فرا واقع‌گرایی", "Game Assets": "آیتم‌های بازی", "Softpasty": "سافت‌پِیستی", "Details Add": "افزودن جزئیات", "Flux Anime": "فلاکس انیمه", "Ghibsky Illustration": "تصویرسازی گیبسکی", "Dark Fantasy": "فانتزی تاریک", "Paper Cutout": "هنر کاغذبری", "Mooniverse": "دنیای ماه", "Pola Photo": "عکس پولاروید", "Flux Tarot": "فال تاروت", "Real Anime": "انیمه واقعی", "Stickers": "استیکرها", "Realism": "واقع‌گرایی", "Cine Aesthetic": "زیبایی‌شناسی سینمایی", "Cute 3D": "سه‌بعدی بامزه"
         };
         
         const GPU_QUOTA_ERROR_HTML = `
@@ -843,35 +746,37 @@
         const stylePreviewContainer = document.getElementById('style-preview-container');
         const selectedStyleImageLarge = document.getElementById('selected-style-image-large');
         const selectedStyleNameFa = document.getElementById('selected-style-name-fa');
-        
         const modalTitle = document.querySelector('#style-modal .modal-header h2');
         const originalModalTitleHTML = modalTitle.innerHTML;
+        
+        const historyGrid = document.getElementById('history-grid');
+        const clearHistoryBtn = document.getElementById('clear-history-btn');
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = document.getElementById('lightbox-img');
+        const lightboxClose = document.getElementById('lightbox-close');
+        const lightboxDownload = document.getElementById('lightbox-download');
+        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 longPressTimer = null;
         let longPressJustHappened = false;
-
         let selectedLora = null;
         let selectedRatio = '1:1';
         let imageObserver = null;
         let fluxClient = null;
         let countdownInterval = null;
 
-        const loadingPlaceholderHTML = `
-            <div id="loading-placeholder">
-                <div class="generator-container">
-                    <div class="text-overlay" id="loading-status-text">در حال آماده‌سازی...</div>
-                    <div class="progress-bar" id="loading-progress-bar"></div>
-                </div>
-            </div>`;
+        const loadingPlaceholderHTML = `<div id="loading-placeholder"><div class="generator-container"><div class="text-overlay" id="loading-status-text">در حال آماده‌سازی...</div><div class="progress-bar" id="loading-progress-bar"></div></div></div>`;
         const resultWrapperHTML = `<div id="result-image-wrapper"><img id="result-image-display" src="" alt="تصویر خلق شده"></div>`;
         
         const startCountdown = (durationInSeconds) => {
             stopCountdown(); 
             let remainingTime = durationInSeconds;
-            
             countdownInterval = setInterval(() => {
                 const statusEl = document.getElementById('loading-status-text');
                 const progressEl = document.getElementById('loading-progress-bar');
-                
                 if (remainingTime >= 0) {
                     const progress = ((durationInSeconds - remainingTime) / durationInSeconds) * 100;
                     if (statusEl) statusEl.textContent = `در حال ساخت... زمان باقی‌مانده: ${remainingTime} ثانیه`;
@@ -885,18 +790,12 @@
             }, 1000);
         };
 
-        const stopCountdown = () => {
-            if (countdownInterval) {
-                clearInterval(countdownInterval);
-                countdownInterval = null;
-            }
-        };
+        const stopCountdown = () => { if (countdownInterval) { clearInterval(countdownInterval); countdownInterval = null; } };
 
         const setLoadingState = (isLoading, message = 'در حال پردازش...') => {
             const btnSpinner = submitBtn.querySelector('.spinner');
             const btnText = document.getElementById('btn-text');
             const btnIcon = submitBtn.querySelector('svg');
-
             if (isLoading) {
                 clearResult(); 
                 resultContainer.classList.add('loading');
@@ -919,24 +818,21 @@
             resultContainer.classList.remove('loading', 'has-error-guide');
             resultContainer.classList.add('has-content');
             resultContainer.innerHTML = resultWrapperHTML;
-            document.getElementById('result-image-display').src = imageUrl;
+            const resultImage = document.getElementById('result-image-display');
+            resultImage.src = imageUrl;
+            resultImage.addEventListener('click', () => openLightbox(imageUrl));
         };
         
-        const clearResult = () => {
-            resultContainer.classList.remove('has-content', 'loading', 'has-error-guide');
-            resultContainer.innerHTML = `<p>${'برای شروع، ایده، سبک و اندازه دلخواه خود را انتخاب کرده و دکمه "خلق کن" را بزنید.'}</p>`;
-        };
+        const clearResult = () => { resultContainer.classList.remove('has-content', 'loading', 'has-error-guide'); resultContainer.innerHTML = `<p>${'برای شروع، ایده، سبک و اندازه دلخواه خود را انتخاب کرده و دکمه "خلق کن" را بزنید.'}</p>`; };
 
         const displayError = (friendlyMessage, rawError) => {
             const rawErrorString = String(rawError?.message || rawError).toLowerCase();
             const gpuErrorKeywords = ["gpu capacity", "unavailable", "exceeded", "quota", "queue is full"];
             const isGpuError = gpuErrorKeywords.some(keyword => rawErrorString.includes(keyword));
-
             if (isGpuError) {
                 resultContainer.classList.remove('loading');
                 resultContainer.classList.add('has-error-guide');
                 resultContainer.innerHTML = GPU_QUOTA_ERROR_HTML;
-                
                 resultContainer.querySelector('.back-button').addEventListener('click', clearResult);
                 resultContainer.querySelector('.retry-button').addEventListener('click', generateImage);
                 resultContainer.querySelector('#tutorialLinkBtn').addEventListener('click', () => {
@@ -953,22 +849,12 @@
         function updateStyleDisplay(lora) {
             selectedStyleNameFa.textContent = loraPersianNames[lora.title] || lora.title;
             selectedStyleImageLarge.src = `https://wsrv.nl/?url=${encodeURIComponent(lora.image)}&w=200&h=200&fit=cover&q=80&output=webp`;
-            
             const descriptionP = stylePreviewContainer.querySelector('p');
-            const tickHTML = `
-                <span class="tick-wrapper">
-                    <svg class="tick-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                        <path class="tick-path" d="M5 13l4 4L19 7" />
-                    </svg>
-                </span>`;
-            
+            const tickHTML = `<span class="tick-wrapper"><svg class="tick-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="tick-path" d="M5 13l4 4L19 7" /></svg></span>`;
             descriptionP.innerHTML = `سبک ${loraPersianNames[lora.title] || lora.title} انتخاب شد. ${tickHTML}`;
-            
             setTimeout(() => {
                 const tickWrapper = descriptionP.querySelector('.tick-wrapper');
-                if (tickWrapper) {
-                    tickWrapper.classList.add('show');
-                }
+                if (tickWrapper) tickWrapper.classList.add('show');
             }, 50); 
         }
 
@@ -978,9 +864,7 @@
                 const card = document.createElement('div');
                 card.className = 'lora-card';
                 card.dataset.loraTitle = lora.title; 
-                
                 const thumbnailUrl = `https://wsrv.nl/?url=${encodeURIComponent(lora.image)}&w=300&h=300&fit=cover&q=75&output=webp`;
-                
                 card.innerHTML = `<img data-src="${thumbnailUrl}" alt="${loraPersianNames[lora.title] || lora.title}" onerror="this.onerror=null;this.src='https://placehold.co/300x300/e0e0e0/909090?text=Error';">`;
                 loraGrid.appendChild(card);
             });
@@ -999,33 +883,24 @@
         }
         
         async function handleStyleSelection(event) {
-            if (longPressJustHappened) {
-                longPressJustHappened = false;
-                return;
-            }
+            if (longPressJustHappened) { longPressJustHappened = false; return; }
             const card = event.target.closest('.lora-card');
             if (!card) return;
-            
             const cardTitleEn = card.dataset.loraTitle;
             const newLora = loras.find(lora => lora.title === cardTitleEn);
-
             if (!newLora) return;
-
             selectedLora = newLora;
             updateStyleDisplay(selectedLora);
             styleModal.style.display = 'none';
             resetModalTitle();
-
             if (fluxClient) {
                 const btnText = document.getElementById('btn-text');
                 const btnSpinner = submitBtn.querySelector('.spinner');
                 const btnIcon = submitBtn.querySelector('svg');
-                
                 submitBtn.disabled = true;
                 btnText.textContent = `در حال تنظیم سبک...`;
                 btnSpinner.style.display = 'inline-block';
                 btnIcon.style.display = 'none';
-
                 try {
                     await fluxClient.predict("/add_custom_lora", { custom_lora: selectedLora.repo });
                 } catch (e) {
@@ -1049,11 +924,9 @@
                 btnText.textContent = 'در حال اتصال...';
                 submitBtn.disabled = true;
             }
-
             try {
                 fluxClient = await Client.connect("prithivMLmods/FLUX-LoRA-DLC");
                 await fluxClient.predict("/add_custom_lora", { custom_lora: selectedLora.repo });
-
                 if (!isCalledFromGenerate) {
                     const btnSpinner = submitBtn.querySelector('.spinner');
                     const btnText = document.getElementById('btn-text');
@@ -1085,9 +958,7 @@
             if (!selectedLora) { alert('لطفاً ابتدا یک سبک هنری را انتخاب کنید.'); return; }
             const userPrompt = promptInput.value.trim();
             if (!userPrompt) { alert('لطفاً یک متن برای ساخت تصویر بنویسید.'); return; }
-
             setLoadingState(true, 'در حال پردازش...');
-
             try {
                 if (!fluxClient) {
                     setLoadingState(true, 'در حال اتصال مجدد...');
@@ -1099,7 +970,6 @@
                          return;
                     }
                 }
-                
                 setLoadingState(true, 'در حال پردازش...'); 
                 const getDimensions = (ratio) => {
                     switch (ratio) {
@@ -1110,47 +980,34 @@
                     }
                 };
                 const dimensions = getDimensions(selectedRatio);
-                
                 const statusEl = document.getElementById('loading-status-text');
                 if (statusEl) statusEl.textContent = 'در حال ترجمه متن...';
-                
                 const translatorClient = await Client.connect("hamed744/translate-tts-aloha");
                 const translationResult = await translatorClient.predict(1, [userPrompt, 'انگلیسی (آمریکا) - جنی (زن)', 0, 0, 0]);
                 const translatedPrompt = translationResult.data[0];
                 if (!translatedPrompt) throw new Error("سرویس ترجمه یک متن خالی برگرداند.");
-                
                 startCountdown(30);
-                
                 const finalPrompt = `${selectedLora.trigger_word} ${translatedPrompt}`;
-                
                 const result = await fluxClient.predict("/run_lora", {
                     prompt: finalPrompt, image_input: null, cfg_scale: 3.5, steps: 28, 
                     randomize_seed: true, seed: 0, 
                     width: dimensions.width, height: dimensions.height, lora_scale: 0.8,
                 });
-
                 const imageData = result.data[0];
                 if (imageData && imageData.url) {
                     displayResult(imageData.url);
+                    addToHistory(imageData.url);
                 } else {
                     throw new Error('پاسخ سرور فاقد تصویر بود.');
                 }
                 setLoadingState(false);
-
             } catch (error) {
                 let friendlyMessage = `خطا در ارتباط با سرور. لطفاً اتصال اینترنت خود را بررسی کرده و دوباره تلاش کنید.`;
-                if (String(error.message).includes("hamed744/translate-tts-aloha")) {
-                    friendlyMessage = `خطا در سرویس ترجمه. لطفاً دقایقی دیگر دوباره امتحان کنید.`;
-                }
-                
+                if (String(error.message).includes("hamed744/translate-tts-aloha")) { friendlyMessage = `خطا در سرویس ترجمه. لطفاً دقایقی دیگر دوباره امتحان کنید.`; }
                 const rawErrorString = String(error?.message || error).toLowerCase();
                 const gpuErrorKeywords = ["gpu capacity", "unavailable", "exceeded", "quota", "queue is full"];
                 const isGpuError = gpuErrorKeywords.some(keyword => rawErrorString.includes(keyword));
-
-                if (!isGpuError) {
-                    fluxClient = null; 
-                }
-                
+                if (!isGpuError) { fluxClient = null; }
                 setLoadingState(false);
                 displayError(friendlyMessage, error);
             }
@@ -1162,13 +1019,10 @@
         }
 
         const longPressDuration = 500;
-
         function handlePressStart(event) {
             const card = event.target.closest('.lora-card');
             if (!card) return;
-            
             longPressJustHappened = false;
-
             longPressTimer = setTimeout(() => {
                 longPressJustHappened = true;
                 const cardTitleEn = card.dataset.loraTitle;
@@ -1176,49 +1030,61 @@
                 if (loraData) {
                     const loraNameFa = loraPersianNames[loraData.title] || loraData.title;
                     const thumbnailUrl = `https://wsrv.nl/?url=${encodeURIComponent(loraData.image)}&w=50&h=50&fit=cover&q=80&output=webp`;
-                    const newTitleHTML = `
-                        <div class="style-info-box">
-                            <img src="${thumbnailUrl}" class="style-info-image" alt="${loraNameFa}">
-                            <div class="style-info-text">
-                                <span class="persian-name">${loraNameFa}</span>
-                                <span class="english-name">${loraData.title}</span>
-                            </div>
-                        </div>`;
-                    modalTitle.innerHTML = newTitleHTML;
+                    modalTitle.innerHTML = `<div class="style-info-box"><img src="${thumbnailUrl}" class="style-info-image" alt="${loraNameFa}"><div class="style-info-text"><span class="persian-name">${loraNameFa}</span><span class="english-name">${loraData.title}</span></div></div>`;
                 }
             }, longPressDuration);
         }
+        function handlePressEnd(event) { clearTimeout(longPressTimer); }
+        
+        const openLightbox = (imageUrl) => { lightboxImg.src = imageUrl; lightboxDownload.href = imageUrl; lightbox.classList.add('visible'); };
+        const closeLightbox = () => lightbox.classList.remove('visible');
+        const getHistory = () => JSON.parse(localStorage.getItem('fluxLoraHistory_v2') || '[]');
+        const saveHistory = (history) => { localStorage.setItem('fluxLoraHistory_v2', JSON.stringify(history)); renderHistory(); };
+        const addToHistory = (imageUrl) => { let history = getHistory(); history.unshift({ url: imageUrl, timestamp: Date.now() }); if (history.length > 20) history.pop(); saveHistory(history); };
+        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([]));
+        const handleDeleteItem = (index) => showConfirmationModal('آیا ��ز حذف این مورد از تاریخچه مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); });
 
-        function handlePressEnd(event) {
-            clearTimeout(longPressTimer);
-        }
+        const renderHistory = () => {
+            let history = getHistory();
+            const sixHoursInMs = 6 * 60 * 60 * 1000;
+            const currentTime = Date.now();
+            const validHistory = history.filter(item => (currentTime - item.timestamp) < sixHoursInMs);
+            if (validHistory.length !== history.length) { localStorage.setItem('fluxLoraHistory_v2', JSON.stringify(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 img = document.createElement('img');
+                img.src = item.url;
+                img.alt = 'تصویر ساخته شده در تاریخچه';
+                img.addEventListener('click', () => openLightbox(item.url));
+                card.appendChild(img);
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'history-delete-btn';
+                deleteBtn.title = 'حذف این مورد';
+                deleteBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
+                deleteBtn.onclick = (e) => { e.stopPropagation(); handleDeleteItem(index); };
+                card.appendChild(deleteBtn);
+                historyGrid.appendChild(card);
+            });
+        };
 
         loraGrid.addEventListener('mousedown', handlePressStart);
         loraGrid.addEventListener('touchstart', handlePressStart, { passive: true });
         loraGrid.addEventListener('mouseup', handlePressEnd);
         loraGrid.addEventListener('mouseleave', handlePressEnd);
         loraGrid.addEventListener('touchend', handlePressEnd);
-
-        stylePreviewContainer.addEventListener('click', () => {
-            styleModal.style.display = 'flex';
-            if (loraGrid.children.length === 0) populateGrid();
-        });
-
-        closeModalBtn.addEventListener('click', () => {
-            styleModal.style.display = 'none';
-            resetModalTitle();
-        });
-
-        window.addEventListener('click', (event) => { 
-            if (event.target === styleModal) {
-                styleModal.style.display = 'none'; 
-                resetModalTitle();
-            }
-        });
-
+        stylePreviewContainer.addEventListener('click', () => { styleModal.style.display = 'flex'; if (loraGrid.children.length === 0) populateGrid(); });
+        closeModalBtn.addEventListener('click', () => { styleModal.style.display = 'none'; resetModalTitle(); });
+        window.addEventListener('click', (event) => { if (event.target === styleModal) { styleModal.style.display = 'none'; resetModalTitle(); } });
+        lightboxClose.addEventListener('click', closeLightbox);
+        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
         loraGrid.addEventListener('click', handleStyleSelection);
         submitBtn.addEventListener('click', generateImage);
-        
+        clearHistoryBtn.addEventListener('click', handleClearHistory);
         ratioSelector.addEventListener('click', (event) => {
             const selectedOption = event.target.closest('.ratio-option');
             if (!selectedOption) return;
@@ -1226,17 +1092,13 @@
             selectedOption.classList.add('active');
             selectedRatio = selectedOption.dataset.ratio;
         });
-
-        clearResult();
-
-        function setInitialStyle() {
-            selectedLora = loras[0];
-            updateStyleDisplay(selectedLora);
-        }
-        
-        setInitialStyle();
-        initializeClient();
-
+        document.addEventListener('DOMContentLoaded', () => {
+            clearResult();
+            renderHistory();
+            setInitialStyle();
+            initializeClient();
+        });
+        function setInitialStyle() { selectedLora = loras[0]; updateStyleDisplay(selectedLora); }
     </script>
     
     <script>