Hugging Face's logo

Spaces:
Opera8
/
tts10
Paused

App Files Community
tts10 / templates /lora.html
Opera8's picture
Opera8
Update templates/lora.html
7abf19e verified
Raw
History Blame Contribute Delete
174 kB
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<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 {
 --app-font: 'Vazirmatn', sans-serif;
 --app-bg: #F0F2F5;
 --panel-bg: #FFFFFF;
 --panel-border: #EAEFF7;
 --input-bg: #F8F9FC;
 --input-border: #E1E7EF;
 --text-primary: #1A202C;
 --text-secondary: #4A5568;
 --text-tertiary: #718096;
 --accent-primary: #4A6CFA;
 --accent-primary-hover: #3553D6;
 --accent-primary-glow: rgba(74, 108, 250, 0.25);
 --accent-secondary: #0FD4A8;
 --premium-gold: #FFC107;
 --danger-color: #E53E3E;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
 --radius-card: 20px;
 --radius-btn: 14px;
 --radius-input: 12px;
 --radius-sm: 10px;
 --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body {
font-family: var(--app-font);
background-color: var(--app-bg);
color: var(--text-primary);
display: flex;
justify-content: center;
min-height: 100vh;
 padding: 2rem 1rem;
 }
 .container {
max-width: 820px;
width: 100%;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
 @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes core-pulse { 0%, 100% { transform: scale(0.95); box-shadow: 0 0 25px var(--accent-primary-glow); } 50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(74, 108, 250, 0.5); } }
 @keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 @keyframes background-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
 @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
 /* Header Style */
 header { position: relative; text-align: center; margin-bottom: 2.5rem; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; }
 #neural-network-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; }
 .header-content { position: relative; z-index: 2; }
.ai-orb-container { width: 150px; height: 150px; margin: 0 auto 1rem; position: relative; display: flex; align-items: center; justify-content: center; }
 .orb-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(74, 108, 250, 0.15) 0%, transparent 70%), linear-gradient(45deg, rgba(15, 212, 168, 0.05), rgba(74, 108, 250, 0.05)); border-radius: 50%; animation: background-pan 12s ease-in-out infinite; background-size: 200% 200%; }
 .orb-core { width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #394A7A 0%, #1A202C 70%); box-shadow: 0 0 25px var(--accent-primary-glow); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; animation: core-pulse 4s ease-in-out infinite; border: 1px solid rgba(74, 108, 250, 0.3); }
.image-icon { width: 28px; height: 28px; color: var(--accent-secondary); filter: drop-shadow(0 0 8px rgba(15, 212, 168, 0.7)); transition: var(--transition-smooth); }
 .orb-core:hover .image-icon { transform: scale(1.1); color: #fff; filter: drop-shadow(0 0 12px rgba(15, 212, 168, 1)); }
.orb-ring { position: absolute; top: 50%; left: 50%; border-style: solid; border-color: transparent; border-radius: 50%; z-index: 1; mix-blend-mode: screen; }
 .orb-ring.one { width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; border-width: 2px; border-top-color: var(--accent-primary); border-right-color: var(--accent-primary); animation: ring-rotate 8s linear infinite; filter: blur(1px); }
 .orb-ring.two { width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; border-width: 1px; border-bottom-color: var(--accent-secondary); animation: ring-rotate 10s linear infinite reverse; }
 .orb-ring.three { width: 140px; height: 140px; margin-top: -70px; margin-left: -70px; border-width: 2px; border-left-color: rgba(255, 255, 255, 0.5); border-right-color: rgba(255, 255, 255, 0.5); animation: ring-rotate 12s linear infinite; filter: blur(1px); opacity: 0.5; }
h1 { font-size: 2.2rem; font-weight: 800; margin: 0 0 0.5rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 .subtitle { font-size: 1.05rem; color: var(--text-secondary); margin: 0; }
 /* Badge */
 #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.85em; font-weight: 700; margin-top: 1rem; display: inline-block; animation: badge-fade-in 0.6s 0.5s ease-out backwards;}
 #subscription-status-badge.free-badge { background: #64748b; color: white; box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3); }
 #subscription-status-badge.paid-badge { background: linear-gradient(45deg, #FFC107, #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); }
 /* Control Panel */
 .control-panel {
 background: var(--panel-bg);
 border-radius: var(--radius-card);
 padding: 2rem;
 box-shadow: var(--shadow-lg);
 border: 1px solid var(--panel-border);
 display: flex;
 flex-direction: column;
 gap: 2rem;
 animation: fadeIn 0.6s ease-out 0.2s both;
 }
 .section-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
 .section-title svg { width: 22px; height: 22px; color: var(--accent-primary); }
 /* Textarea & Prompt Helper Button */
 textarea { width: 100%; padding: 1.2rem; border-radius: var(--radius-input); border: 2px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); font-family: var(--app-font); font-size: 1.05rem; transition: var(--transition-smooth); min-height: 120px; resize: vertical; margin-bottom: 0.5rem; }
 textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-primary-glow); background-color: #fff; }
 textarea:disabled { opacity: 0.7; cursor: not-allowed; }
 .prompt-helper-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; font-size: 0.95rem; font-weight: 700; color: var(--accent-primary); background-color: transparent; border: 2px dashed var(--input-border); border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); font-family: inherit; }
 .prompt-helper-button:hover { background-color: var(--input-bg); border-color: var(--accent-primary); transform: translateY(-1px); }
 /* Ratio Selector */
 .ratio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
 .ratio-btn { background: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-input); padding: 1rem 0.5rem; color: var(--text-secondary); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
 .ratio-btn:hover { border-color: var(--accent-primary); transform: translateY(-3px); }
 .ratio-btn.active { background: #fff; border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow); }
.ratio-icon-box { background-color: var(--panel-bg); border: 2px solid var(--text-tertiary); border-radius: 4px; transition: var(--transition-smooth); display:flex; align-items:center; justify-content:center;}
 .ratio-btn.active .ratio-icon-box { border-color: var(--accent-primary); background-color: var(--accent-primary-glow); color: var(--accent-primary); }
 .icon-1-1 { width: 28px; height: 28px; }
 .icon-16-9 { width: 40px; height: 22px; }
 .icon-9-16 { width: 22px; height: 40px; }
 .icon-custom { width: 34px; height: 25px; border-style: dashed !important; color: var(--text-tertiary); }
 /* --- Horizontal Model Selector Grid --- */
 .model-grid-scroll {
display: flex;
overflow-x: auto;
gap: 15px;
padding: 5px;
padding-bottom: 10px;
 scroll-snap-type: x mandatory;
-ms-overflow-style: none; /* IE and Edge */
 scrollbar-width: none; /* Firefox */
 }
 .model-grid-scroll::-webkit-scrollbar { display: none; /* Chrome */ }
 .model-card {
flex: 0 0 120px; /* Fixed width */
 height: 120px;
 position: relative;
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
border: 2px solid var(--input-border);
transition: var(--transition-smooth);
 background-color: var(--input-bg);
 scroll-snap-align: center;
 }
 .model-card:hover { border-color: var(--text-tertiary); }
 .model-card.active { border-color: var(--accent-primary); box-shadow: 0 0 15px rgba(74, 108, 250, 0.4); }
 .model-card.active::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent-primary); border-radius: calc(var(--radius-sm) - 2px); pointer-events: none; }
.model-image { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s; opacity: 0.6; }
 .model-card:hover .model-image, .model-card.active .model-image { transform: scale(1.1); opacity: 1; }
.model-name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px 6px 8px; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); color: #fff; font-size: 0.85rem; font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.8); pointer-events: none; }
 /* --- Selected Style Box --- */
 .selected-style-box {
 display: none; /* مخفی در حالت عادی */
 align-items: center;
 justify-content: space-between;
 background: linear-gradient(135deg, rgba(74, 108, 250, 0.04) 0%, rgba(15, 212, 168, 0.04) 100%);
 border: 1px solid rgba(74, 108, 250, 0.15);
 border-radius: 24px;
 padding: 18px 25px;
 margin-top: 5px;
box-shadow: 0 8px 20px -6px rgba(74, 108, 250, 0.12);
 backdrop-filter: blur(10px);
 position: relative;
 overflow: hidden;
 animation: fadeIn 0.4s ease;
 }
 .selected-style-box::before {
 content: '';
 position: absolute;
 top: 0; right: 0; width: 5px; height: 100%;
 background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary));
 border-radius: 0 5px 5px 0;
 }
 .selected-style-details {
 display: flex;
 align-items: center;
 gap: 18px;
 }
 .selected-style-img {
 width: 75px;
 height: 75px;
 border-radius: 18px;
 object-fit: cover;
 box-shadow: 0 6px 15px rgba(0,0,0,0.08);
 border: 2px solid #fff;
 aspect-ratio: 1/1; /* کاملا مربعی */
 }
 .selected-style-text {
 display: flex;
 flex-direction: column;
 gap: 6px;
 text-align: right; /* راست‌چین پیش‌فرض در دسکتاپ */
 }
 .ss-title {
 font-size: 1.25rem;
 font-weight: 800;
 background: linear-gradient(90deg, var(--accent-primary), #8A2BE2);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-align: inherit; /* ارث‌بری تراز از والد */
 }
 .ss-change-btn {
 background: #fff;
 border: 1px solid #e2e8f0;
 border-radius: 14px;
 padding: 12px 20px;
 font-size: 0.95rem;
 font-weight: 800;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--accent-primary);
 transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 box-shadow: 0 4px 10px rgba(0,0,0,0.03);
 }
 .ss-change-btn svg { width: 18px; height: 18px; }
 .ss-change-btn:hover {
 background: var(--accent-primary);
 border-color: var(--accent-primary);
 color: #fff;
 box-shadow: 0 8px 20px rgba(74, 108, 250, 0.25);
 transform: translateY(-3px);
 }
 /* Buttons & Info */
 .big-send-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.2rem; font-size: 1.3rem; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 15px -3px var(--accent-primary-glow); }
 .big-send-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); }
 .big-send-btn:hover:not(:disabled) { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 20px -4px var(--accent-primary-glow); }
 .big-send-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; transform: none; }
 .credit-info { font-size: 0.95rem; color: var(--text-tertiary); text-align: center; margin-bottom: 1rem; font-weight: 600; background: var(--input-bg); padding: 10px; border-radius: var(--radius-input); border: 1px solid var(--input-border); display: none; }
 .upgrade-btn { display: none; width: 100%; margin-bottom: 1rem; padding: 1rem; background: linear-gradient(90deg, #FFD54F, var(--premium-gold)); border: none; border-radius: var(--radius-btn); color: #212529; font-weight: 800; font-size: 1.1rem; cursor: pointer; text-align: center; font-family: inherit; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3); transition: transform 0.3s; }
 .upgrade-btn:hover { transform: translateY(-3px); }
 /* Result Area */
 #image-result-container { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--panel-border); animation: fadeIn 0.5s ease-out; }
.empty-placeholder { width: 400px; max-width: 100%; height: 300px; border: 2px dashed var(--input-border); border-radius: 20px; background-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
 .empty-placeholder svg { color: var(--text-tertiary); margin-bottom: 15px; opacity: 0.5; width: 48px; height: 48px; }
 .empty-placeholder p { color: var(--text-tertiary); font-size: 0.95rem; font-weight: 600; margin: 0; }
 .generated-image-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
 .generated-image-box img { max-width: 100%; border-radius: var(--radius-input); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); }
.image-meta { display: flex; gap: 15px; justify-content: center; background: var(--input-bg); padding: 8px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--input-border); flex-wrap: wrap;}
 .image-meta span { display: flex; align-items: center; gap: 5px; }
.download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 0.9rem; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-btn); font-family: inherit; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; box-shadow: 0 4px 10px rgba(74, 108, 250, 0.3); }
 .download-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(74, 108, 250, 0.4); }
 /* --- TV Loading Animation --- */
 .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; margin: 0 auto; }
 @keyframes pulse-loader { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } }
 .noise-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; }
@keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } }
 .sketch-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; }
@keyframes reveal-sketch { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } }
 .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(15px); opacity: 0; animation: denoise-color 7s infinite ease-in-out; }
@keyframes denoise-color { 0% { opacity: 0; } 40% { opacity: 0.6; filter: blur(5px); } 100% { opacity: 1; filter: blur(0px); } }
 .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; }
@keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } }
 .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); }
@keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(10px, -15px) scale(1.05); opacity: 0.8; } 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } }
 .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); width: 90%; text-align: center;}
@keyframes glow-text { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }
 .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.3s linear; }
 /* --- Modal Styles for Prompts & LoRAs --- */
 .alpha-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(26, 32, 44, 0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeInBackdrop 0.3s forwards; backdrop-filter: blur(8px);}
 .alpha-modal-content { background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); width: 90%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; position: relative; padding: 25px; opacity: 0; transform: translateY(-20px) scale(0.95); animation: fadeInModal 0.3s 0.1s forwards; border: 1px solid rgba(255, 255, 255, 0.4);}
 .alpha-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); padding-bottom: 15px; margin-bottom: 15px; }
 .alpha-modal-header h2 { font-size: 1.25rem; font-weight: 800; color: var(--accent-primary); }
 .alpha-modal-close-btn { background-color: transparent; border: none; font-size: 2rem; line-height: 1; color: var(--text-tertiary); cursor: pointer; transition: color 0.3s; }
 .alpha-modal-close-btn:hover { color: var(--danger-color); }
 .alpha-modal-body { overflow-y: auto; flex-grow: 1; padding-left: 10px; margin-left: -10px; }
 .alpha-modal-body::-webkit-scrollbar { width: 6px; }
 .alpha-modal-body::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 4px; }
 .alpha-modal-body::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 4px; }
 .alpha-modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
 .alpha-modal-footer { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--panel-border); text-align: center; }
.prompt-category-item, .prompt-item { display: flex; align-items: center; justify-content: space-between; background-color: var(--input-bg); padding: 12px 15px; border-radius: var(--radius-input); border: 1px solid var(--input-border); margin-bottom: 10px; cursor: pointer; transition: var(--transition-smooth); }
 .prompt-category-item:hover, .prompt-item:hover { border-color: var(--accent-primary); background-color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
 .prompt-category-item { font-weight: 700; color: var(--text-secondary); }
 .prompt-item .prompt-text-container { display: flex; flex-direction: column; align-items: flex-start; text-align: right; flex-grow: 1; }
 .prompt-item .prompt-text { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); direction: ltr; text-align: left; align-self: flex-start; }
 .prompt-item .persian-translation { font-size: 0.85rem; color: var(--text-tertiary); margin-top: 4px;}
/* CSS برای گالری لورا (مدرن و بسیار جذاب) */
 .lora-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 padding-top: 5px;
 padding-bottom: 20px;
 }
 .lora-item {
 background: #fff;
 border: none;
 border-radius: 20px;
 overflow: hidden;
 cursor: pointer;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 display: flex;
 flex-direction: column;
 box-shadow: 0 4px 15px rgba(0,0,0,0.06);
 position: relative;
 }
 .lora-item:hover {
 transform: translateY(-8px) scale(1.02);
 box-shadow: 0 15px 30px rgba(74, 108, 250, 0.15);
 }
 .lora-item::after {
 content: '';
 position: absolute;
 inset: 0;
 border: 2px solid transparent;
 border-radius: 20px;
 transition: border-color 0.4s ease;
 pointer-events: none;
 }
 .lora-item:hover::after {
 border-color: var(--accent-primary);
 }
 .lora-image-wrapper {
 width: 100%;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 position: relative;
 }
 .lora-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.6s ease;
 }
 .lora-item:hover .lora-image {
 transform: scale(1.1);
 }
 .lora-title-container {
 padding: 12px 8px;
 text-align: center;
 display: flex;
 flex-direction: column;
 gap: 4px;
 background: #fff;
 z-index: 2;
 position: relative;
 }
 .lora-title {
 font-size: 0.85rem;
 font-weight: 800;
 color: var(--text-primary);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .lora-title-fa {
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--accent-primary);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .pagination-container { display: flex; justify-content: center; gap: 10px; margin-top: 15px; align-items: center; }
 .pagination-button, .alpha-modal-footer .modal-action-button { padding: 8px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: var(--transition-smooth); box-shadow: var(--shadow-sm); }
 .pagination-button { background-color: var(--accent-primary); color: #fff; border: none; }
 .pagination-button:hover { background-color: var(--accent-primary-hover); transform: translateY(-1px); }
 .pagination-button:disabled { background-color: var(--input-border); color: var(--text-tertiary); cursor: not-allowed; transform: none; box-shadow: none;}
 .alpha-modal-footer .modal-action-button { background-color: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
 .alpha-modal-footer .modal-action-button:hover { background-color: #fff; border-color: var(--text-secondary); color: var(--text-primary); }
@keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }
 @keyframes fadeInModal { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
 /* --- Custom Dialogs (Confirm & Input) --- */
 .confirm-modal-backdrop {
 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
 background-color: rgba(26, 32, 44, 0.7); z-index: 3000;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; animation: fadeInBackdrop 0.3s forwards;
 backdrop-filter: blur(5px);
 }
 .confirm-modal-content {
 background: var(--panel-bg); border-radius: var(--radius-card); padding: 25px;
 width: 90%; max-width: 400px; text-align: center; box-shadow: var(--shadow-xl);
 transform: scale(0.9); animation: popIn 0.3s forwards; border: 1px solid var(--panel-border);
 }
 @keyframes popIn { to { transform: scale(1); opacity: 1; } }
 .confirm-icon {
 width: 60px; height: 60px; color: var(--danger-color); margin: 0 auto 15px;
 background: rgba(229, 62, 62, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;
 }
 .confirm-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
 .confirm-message { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 25px; line-height: 1.6; }
 .confirm-actions { display: flex; gap: 10px; justify-content: center; }
 .confirm-btn { flex: 1; padding: 12px; border-radius: var(--radius-btn); font-weight: 700; font-size: 1rem; cursor: pointer; border: none; transition: var(--transition-smooth); font-family: inherit; }
 .btn-cancel { background: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
 .btn-cancel:hover { background: #e2e8f0; color: var(--text-primary); }
 .btn-danger { background: var(--danger-color); color: white; box-shadow: 0 4px 10px rgba(229,62,62,0.3); }
 .btn-danger:hover { background: #C53030; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(229,62,62,0.4); }
 .btn-primary-action { background: var(--accent-primary); color: white; box-shadow: 0 4px 10px rgba(74, 108, 250, 0.3); }
 .btn-primary-action:hover { background: var(--accent-primary-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(74, 108, 250, 0.4); }
 /* --- History Section Styles --- */
 .history-section {
 margin-top: 1rem;
 padding-top: 2rem;
 border-top: 1px solid var(--panel-border);
 display: none;
 animation: fadeIn 0.5s ease-out;
 }
 .history-header {
 display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
 }
 .history-header h3 {
 font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px;
 }
 .history-header h3 svg { width: 22px; height: 22px; color: var(--accent-primary); }
 .danger-btn {
 background: var(--input-bg); color: var(--danger-color); border: 1px solid var(--danger-color);
 padding: 6px 14px; border-radius: var(--radius-sm); font-family: inherit; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); font-size: 0.85rem;
 }
 .danger-btn:hover { background: var(--danger-color); color: #fff; }
.history-grid {
 display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
 }
 .history-item {
 background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm);
 overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s;
 }
 .history-item:hover {
 transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--text-tertiary);
 }
 .history-item img {
 width: 100%; height: 200px; object-fit: cover; cursor: pointer; border-bottom: 1px solid var(--input-border);
 }
 .history-details {
 padding: 12px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; overflow: hidden;
 }
 .history-prompt {
 font-size: 0.85rem; color: var(--text-primary); font-weight: 600;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: auto; text-align: right;
 }
 .history-meta {
 font-size: 0.75rem; color: var(--text-tertiary); display: flex; justify-content: space-between; font-weight: 600; background: var(--panel-bg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--panel-border);
 }
 .history-delete-btn {
 margin-top: auto; padding: 6px; background: transparent; color: var(--danger-color); border: 1px dashed var(--danger-color); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 600; transition: var(--transition-smooth);
 }
 .history-delete-btn:hover {
 background: var(--danger-color); color: white; border-style: solid;
 }
 /* --- Image View Modal & Toolbar --- */
 .image-view-modal {
 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
 background-color: rgba(26, 32, 44, 0.95); z-index: 2000;
 display: flex; flex-direction: column; align-items: center;
 opacity: 0; animation: fadeInBackdrop 0.3s forwards;
 overflow-y: auto;
 padding: 40px 20px;
 }
 .image-view-wrapper {
 margin: auto;
 display: flex; flex-direction: column; align-items: center; gap: 12px;
 width: 100%; max-width: 800px; position: relative;
 }
 .image-view-modal img {
 max-width: 100%; border-radius: var(--radius-card); box-shadow: 0 0 30px rgba(0,0,0,0.5); object-fit: contain;
 }
 .image-view-close {
 position: fixed; top: 20px; right: 20px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3);
 color: white; font-size: 1.5rem; cursor: pointer; width: 45px; height: 45px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center; transition: all 0.3s; z-index: 2002;
 backdrop-filter: blur(5px);
 }
 .image-view-close:hover {
 background: rgba(255,255,255,0.3); border-color: white; transform: scale(1.1);
 }
.image-view-toolbar {
 width: 100%; display: flex; gap: 15px; justify-content: center;
 background: rgba(0,0,0,0.7); padding: 12px 20px; border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1);
 }
 .iv-action-btn {
 background: var(--accent-primary); color: white; border: none; padding: 10px 18px; border-radius: var(--radius-btn);
 font-family: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; font-size: 0.95rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 }
 .iv-action-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); }
 .iv-action-btn svg { width: 20px; height: 20px; }
 .iv-btn-copy { background: #4A5568; }
 .iv-btn-copy:hover { background: #2D3748; }
 @media (max-width: 650px) {
 .ratio-grid { grid-template-columns: repeat(2, 1fr); }
 h1 { font-size: 1.8rem; }
 .generator-container { height: 250px; }
.empty-placeholder { height: 250px; }
 .text-overlay { font-size: 16px; }
 .history-item img { height: 140px; }
 .lora-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
.image-view-modal { padding: 60px 15px 30px; }
.image-view-toolbar { flex-direction: row; flex-wrap: wrap; padding: 10px; border-radius: 15px; gap: 10px;}
 .iv-action-btn { flex: 1; min-width: 130px; font-size: 0.85rem; padding: 10px 12px;}
 /* ریسپانسیو برای باکس نمایش استایل */
 .selected-style-box { flex-direction: column; align-items: center; text-align: center; gap: 15px;}
 .selected-style-details { flex-direction: column; align-items: center; }
 .selected-style-text { text-align: center; align-items: center; }
 .selected-style-box::before {
 width: 100%; height: 5px; top: 0; right: 0; left: 0;
 border-radius: 5px 5px 0 0;
 background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
 }
 }
 </style>
</head>
<body>
<div class="container">
<!-- Header -->
 <header>
 <canvas id="neural-network-canvas"></canvas>
 <div class="header-content">
 <div class="ai-orb-container">
 <div class="orb-background"></div>
 <div class="orb-core">
 <svg class="image-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
 </div>
 <div class="orb-ring one"></div><div class="orb-ring two"></div><div class="orb-ring three"></div>
 </div>
 <h1>استودیو ساخت تصاویر آلفا</h1>
 <p class="subtitle">ایده‌های خود را به بهترین تصاویر خیره‌کننده تبدیل کنید</p>
 <div id="subscription-status-badge">درحال بررسی...</div>
 </div>
 </header>
<!-- Control Panel -->
 <div class="control-panel">
<!-- 1. Input & Prompts -->
 <div>
 <div class="section-title">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
 ۱. ایده خود را بنویسید
 </div>
<textarea id="prompt-input" placeholder="تصویر رویایی خود را با جزئیات توصیف کنید..."></textarea>
 <button id="promptHelperBtn" class="prompt-helper-button">💡 افزودن سبک به تصویر (پرامپت ها)</button>
 </div>
<!-- 2. Ratio Selection -->
 <div>
 <div class="section-title">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4"/><rect x="12" y="13" width="10" height="8" rx="2"/><path d="M17 12v-1a2 2 0 0 0-2-2h-1"/></svg>
 ۲. ابعاد تصویر
 </div>
 <div class="ratio-grid" id="ratio-selector">
 <button class="ratio-btn active" data-ratio="1:1" data-name="۱:۱ مربع">
 <div class="ratio-icon-box icon-1-1"></div>
 <span>۱:۱ مربع</span>
 </button>
 <button class="ratio-btn" data-ratio="16:9" data-name="۱۶:۹ افقی">
 <div class="ratio-icon-box icon-16-9"></div>
 <span>۱۶:۹ افقی</span>
 </button>
 <button class="ratio-btn" data-ratio="9:16" data-name="۹:۱۶ استوری">
 <div class="ratio-icon-box icon-9-16"></div>
 <span>۹:۱۶ استوری</span>
 </button>
 <!-- Custom Size Button -->
 <button class="ratio-btn" data-ratio="custom" data-name="اندازه دلخواه">
 <div class="ratio-icon-box icon-custom">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
 </div>
 <span>اندازه دلخواه</span>
 </button>
 </div>
 </div>
<!-- 3. Model Selection (Horizontal Scroll) -->
 <div>
 <div class="section-title">
 <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" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
 ۳. مدل هوش مصنوعی (برای مشاهده بکشید ↔️)
 </div>
 <div class="model-grid-scroll" id="model-selector">
 <div class="model-card active" data-action="generate-flux" data-name="Flux Pro" data-img="https://app.puzzley.net/uploads/user/Jydo/Gpt4/pro.webp">
 <div class="model-image" style="background-image: url('https://app.puzzley.net/uploads/user/Jydo/Gpt4/pro.webp');"></div>
 <div class="model-name">Flux Pro</div>
 </div>
 <div class="model-card" data-action="generate-midjourney" data-name="Midjourney" id="midjourney-btn" data-img="https://app.puzzley.net/uploads/user/Jydo/%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/Midjourney_Emblem.png">
 <div class="model-image" style="background-image: url('https://app.puzzley.net/uploads/user/Jydo/%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/Midjourney_Emblem.png');"></div>
 <div class="model-name">Midjourney</div>
 </div>
 <div class="model-card" data-action="generate-cartoon" data-name="Cartoon 3D" data-img="https://app.puzzley.net/uploads/user/Jydo/Ghibli/image%20(28).webp">
 <div class="model-image" style="background-image: url('https://app.puzzley.net/uploads/user/Jydo/Ghibli/image%20(28).webp');"></div>
 <div class="model-name">Cartoon 3D</div>
 </div>
 <!-- دکمه ویژه برای لوراها (با اکشن میدجرنی اما رفتار متفاوت) -->
 <div class="model-card" data-action="generate-midjourney" data-name="انتخاب سبک ویژه" id="lora-selector-btn">
 <div class="model-image" style="background-color: #2D3748; display:flex; align-items:center; justify-content:center;">
 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-top:-20px;"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
 </div>
 <div class="model-name">مدل‌های ویژه (LoRA)</div>
 </div>
 </div>
<!-- باکس نمایش استایل انتخاب شده در زیر دکمه‌های افقی -->
 <div class="selected-style-box" id="selected-style-box">
 <div class="selected-style-details">
 <img class="selected-style-img" id="ss-img" src="https://app.puzzley.net/uploads/user/Jydo/Gpt4/pro.webp">
 <div class="selected-style-text">
 <span class="ss-label">سبک تصویر انتخاب شده:</span>
 <span class="ss-title" id="ss-title">Flux Pro</span>
 <span class="ss-title-fa" id="ss-title-fa" style="font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-top:-3px;">فلاکس پرو</span>
 </div>
 </div>
 <button class="ss-change-btn" id="change-style-btn">
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
 تغییر سبک
 </button>
 </div>
 </div>
<!-- Generate Buttons -->
 <div>
 <div id="credit-info" class="credit-info">درحال بررسی اعتبار...</div>
 <button id="upgrade-button" class="upgrade-btn">⭐️ ارتقا به نسخه نامحدود</button>
<button id="send-btn" class="big-send-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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
 ساخت تصویر جادویی
 </button>
 </div>
<!-- Result Container -->
 <div id="image-result-container">
 <div class="empty-placeholder">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
 <p>تصویر شما در این کادر ظاهر می‌شود</p>
 </div>
 </div>
<!-- History Section -->
 <div id="history-section" class="history-section">
 <div class="history-header">
 <h3>
 <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 3v18h18"/><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/></svg>
 سابقه تصاویر ساخته شده
 </h3>
 <button id="clear-history-btn" class="danger-btn">حذف همه</button>
 </div>
 <div id="history-grid" class="history-grid"></div>
 </div>
</div>
 </div>
<script>
 // --- دیتابیس کامل تمام ۲۴۲ لورا (بدون یک خط کم‌وکاست) با تصاویر اختصاصی دیتاست شما ---
 const allLoras = [
 { repo: "alvdansen/flux-koda", trigger: "flmft style", title: "Koda", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_0_alvdansen_flux-koda.webp" },
 { repo: "strangerzonehf/Flux-Super-Realism-LoRA", trigger: "Super Realism", title: "Super Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_1_strangerzonehf_Flux-Super-Realism-LoRA.webp" },
 { repo: "prithivMLmods/Flux-Dalle-Mix-LoRA", trigger: "dalle-mix", title: "Dalle Mix", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_2_prithivMLmods_Flux-Dalle-Mix-LoRA.webp" },
 { repo: "strangerzonehf/Ghibli-Flux-Cartoon-LoRA", trigger: "Ghibli Art", title: "Ghibli Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_3_strangerzonehf_Ghibli-Flux-Cartoon-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Sketch-Smudge-LoRA", trigger: " Sketch Smudge", title: "Sketch_Smudge", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_4_strangerzonehf_Flux-Sketch-Smudge-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Animeo-v1-LoRA", trigger: "Animeo", title: "Animeo Mix", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_5_strangerzonehf_Flux-Animeo-v1-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Animex-v2-LoRA", trigger: "Animex", title: "Animex Mix", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_6_strangerzonehf_Flux-Animex-v2-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Super-Portrait-LoRA", trigger: "Super Portrait", title: "Super Portraits", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_7_strangerzonehf_Flux-Super-Portrait-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Super-Blend-LoRA", trigger: "Super Blend", title: "Super Blend", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_8_strangerzonehf_Flux-Super-Blend-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Midjourney-Mix2-LoRA", trigger: "MJ v6", title: "Midjourney Mix 2", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_9_strangerzonehf_Flux-Midjourney-Mix2-LoRA.webp" },
 { repo: "Datou1111/shou_xin", trigger: "shou_xin, pencil sketch", title: "SHOU_XIN", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_10_Datou1111_shou_xin.webp" },
 { repo: "prithivMLmods/Flux-Long-Toon-LoRA", trigger: "Long toons", title: "Long Toons", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_11_prithivMLmods_Flux-Long-Toon-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Cute-3D-Kawaii-LoRA", trigger: "Cute 3d Kawaii", title: "Cute 3D Kawaii", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_12_strangerzonehf_Flux-Cute-3D-Kawaii-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Isometric-3D-LoRA", trigger: "Isometric 3D", title: "Isometric 3D", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_13_strangerzonehf_Flux-Isometric-3D-LoRA.webp" },
 { repo: "prithivMLmods/Flux-Toonic-2.5D-LoRA", trigger: "toonic 2.5D", title: "Toon 2.5D", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_14_prithivMLmods_Flux-Toonic-2.5D-LoRA.webp" },
 { repo: "strangerzonehf/Flux-YWL-Realism-LoRA", trigger: "ylw realism", title: "YWL Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_15_strangerzonehf_Flux-YWL-Realism-LoRA.webp" },
 { repo: "prithivMLmods/Flux-Chill-Guy-Zone", trigger: "chill guy", title: "Chill Guy", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_16_prithivMLmods_Flux-Chill-Guy-Zone.webp" },
 { repo: "p1atdev/flux.1-schnell-pvc-style-lora", trigger: "pvc figure, nendoroid, figma", title: "Anime PVC Style", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_17_p1atdev_flux_1-schnell-pvc-style-lora.webp" },
 { repo: "strangerzonehf/Flux-C4C-Design-LoRA", trigger: "Smiley C4C", title: "Smiley C4C", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_18_strangerzonehf_Flux-C4C-Design-LoRA.webp" },
 { repo: "prithivMLmods/Purple-Dreamy-Flux-LoRA", trigger: "Purple Dreamy", title: "Purple Dream", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_19_prithivMLmods_Purple-Dreamy-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Canopus-LoRA-Flux-FaceRealism", trigger: "Realism", title: "Flux Face Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_20_prithivMLmods_Canopus-LoRA-Flux-FaceRealism.webp" },
 { repo: "alvdansen/softserve_anime", trigger: "sftsrv style illustration", title: "Softserve Anime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_21_alvdansen_softserve_anime.webp" },
 { repo: "prithivMLmods/Fashion-Hut-Modeling-LoRA", trigger: "Modeling of", title: "Modeling Hut", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_22_prithivMLmods_Fashion-Hut-Modeling-LoRA.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-One-Click-Creative-Template", trigger: "The background is 4 real photos, and in the middle is a cartoon picture summarizing the real photos.", title: "Creative Template", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_23_Shakker-Labs_FLUX_1-dev-LoRA-One-Click-Creative-Template.webp" },
 { repo: "prithivMLmods/Canopus-LoRA-Flux-UltraRealism-2.0", trigger: "Ultra realistic", title: "Ultra Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_24_prithivMLmods_Canopus-LoRA-Flux-UltraRealism-2_0.webp" },
 { repo: "gokaygokay/Flux-Game-Assets-LoRA-v2", trigger: "wbgmsst, white background", title: "Game Assets", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_25_gokaygokay_Flux-Game-Assets-LoRA-v2.webp" },
 { repo: "alvdansen/softpasty-flux-dev", trigger: "araminta_illus illustration style", title: "Softpasty", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_26_alvdansen_softpasty-flux-dev.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-add-details", trigger: "", title: "Details Add", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_27_Shakker-Labs_FLUX_1-dev-LoRA-add-details.webp" },
 { repo: "prithivMLmods/Canopus-LoRA-Flux-Anime", trigger: "Anime", title: "Flux Anime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_28_prithivMLmods_Canopus-LoRA-Flux-Anime.webp" },
 { repo: "aleksa-codes/flux-ghibsky-illustration", trigger: "GHIBSKY style painting", title: "Ghibsky Illustration", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_29_aleksa-codes_flux-ghibsky-illustration.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Dark-Fantasy", trigger: "", title: "Dark Fantasy", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_30_Shakker-Labs_FLUX_1-dev-LoRA-Dark-Fantasy.webp" },
 { repo: "Norod78/Flux_1_Dev_LoRA_Paper-Cutout-Style", trigger: "Paper Cutout Style", title: "Paper Cutout", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_31_Norod78_Flux_1_Dev_LoRA_Paper-Cutout-Style.webp" },
 { repo: "alvdansen/mooniverse", trigger: "surreal style", title: "Mooniverse", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_32_alvdansen_mooniverse.webp" },
 { repo: "alvdansen/pola-photo-flux", trigger: "polaroid style", title: "Pola Photo", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_33_alvdansen_pola-photo-flux.webp" },
 { repo: "multimodalart/flux-tarot-v1", trigger: "in the style of TOK a trtcrd tarot style", title: "Flux Tarot", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_34_multimodalart_flux-tarot-v1.webp" },
 { repo: "prithivMLmods/Flux-Dev-Real-Anime-LoRA", trigger: "Real Anime", title: "Real Anime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_35_prithivMLmods_Flux-Dev-Real-Anime-LoRA.webp" },
 { repo: "diabolic6045/Flux_Sticker_Lora", trigger: "5t1cker 5ty1e", title: "Stickers", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_36_diabolic6045_Flux_Sticker_Lora.webp" },
 { repo: "XLabs-AI/flux-RealismLora", trigger: "", title: "Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_37_XLabs-AI_flux-RealismLora.webp" },
 { repo: "mgwr/Cine-Aesthetic", trigger: "mgwr/cine", title: "Cine Aesthetic", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_38_mgwr_Cine-Aesthetic.webp" },
 { repo: "SebastianBodza/flux_cute3D", trigger: "NEOCUTE3D", title: "Cute 3D", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_39_SebastianBodza_flux_cute3D.webp" },
 { repo: "bingbangboom/flux_dreamscape", trigger: "in the style of BSstyle004", title: "Dreamscape", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_40_bingbangboom_flux_dreamscape.webp" },
 { repo: "prithivMLmods/Canopus-Cute-Kawaii-Flux-LoRA", trigger: "cute-kawaii", title: "Cute Kawaii", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_41_prithivMLmods_Canopus-Cute-Kawaii-Flux-LoRA.webp" },
 { repo: "Raelina/Flux-Pastel-Anime", trigger: "Anime", title: "Pastel Anime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_42_Raelina_Flux-Pastel-Anime.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Vector-Journey", trigger: "artistic style blends reality and illustration elements", title: "Vector", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_43_Shakker-Labs_FLUX_1-dev-LoRA-Vector-Journey.webp" },
 { repo: "bingbangboom/flux-miniature-worlds", trigger: "Image in the style of MNTRWRLDS", title: "Miniature", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_44_bingbangboom_flux-miniature-worlds.webp" },
 { repo: "glif-loradex-trainer/bingbangboom_flux_surf", trigger: "SRFNGV01", title: "Surf Bingbangboom", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_45_glif-loradex-trainer_bingbangboom_flux_surf.webp" },
 { repo: "prithivMLmods/Canopus-Snoopy-Charlie-Brown-Flux-LoRA", trigger: "Snoopy Charlie Brown", title: "Snoopy Charlie", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_46_prithivMLmods_Canopus-Snoopy-Charlie-Brown-Flux-LoRA.webp" },
 { repo: "alvdansen/sonny-anime-fixed", trigger: "nm22 style", title: "Fixed Sonny", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_47_alvdansen_sonny-anime-fixed.webp" },
 { repo: "davisbro/flux-multi-angle", trigger: "A TOK composite photo of a person posing at different angles", title: "Multi Angle", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_48_davisbro_flux-multi-angle.webp" },
 { repo: "glif/how2draw", trigger: "How2Draw", title: "How2Draw", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_49_glif_how2draw.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Text-Poster", trigger: "text poster", title: "Text Poster", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_50_Shakker-Labs_FLUX_1-dev-LoRA-Text-Poster.webp" },
 { repo: "SebastianBodza/Flux_Aquarell_Watercolor_v2", trigger: "AQUACOLTOK", title: "Aquarell Watercolor", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_51_SebastianBodza_Flux_Aquarell_Watercolor_v2.webp" },
 { repo: "Purz/face-projection", trigger: "f4c3_p40j3ct10n", title: "Face Projection ", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_52_Purz_face-projection.webp" },
 { repo: "martintomov/ecom-flux-v2", trigger: "", title: "Ecom Design Art", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_53_martintomov_ecom-flux-v2.webp" },
 { repo: "TheAwakenOne/max-headroom", trigger: "M2X, Max-Headroom", title: "Max Head-Room", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_54_TheAwakenOne_max-headroom.webp" },
 { repo: "renderartist/toyboxflux", trigger: "t0yb0x, simple toy design, detailed toy design, 3D render", title: "Toy Box Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_55_renderartist_toyboxflux.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-live-3D", trigger: "", title: "Live 3D", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_56_Shakker-Labs_FLUX_1-dev-LoRA-live-3D.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Garbage-Bag-Art", trigger: "Inflatable plastic bag", title: "Garbage Bag Art", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_57_Shakker-Labs_FLUX_1-dev-LoRA-Garbage-Bag-Art.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Logo-Design", trigger: "wablogo, logo, Minimalist", title: "Logo Design", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_58_Shakker-Labs_FLUX_1-dev-LoRA-Logo-Design.webp" },
 { repo: "punzel/flux_sadie_sink", trigger: "Sadie Sink", title: "Sadie Sink", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_59_punzel_flux_sadie_sink.webp" },
 { repo: "punzel/flux_jenna_ortega", trigger: "Jenna ortega", title: "Jenna ortega", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_60_punzel_flux_jenna_ortega.webp" },
 { repo: "Wakkamaruh/balatro-poker-cards", trigger: "balatrocard", title: "Poker Cards", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_61_Wakkamaruh_balatro-poker-cards.webp" },
 { repo: "lichorosario/flux-cubist-cartoon", trigger: "CBSTCRTN", title: "Cubist Cartoon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_62_lichorosario_flux-cubist-cartoon.webp" },
 { repo: "iliketoasters/miniature-people", trigger: "miniature people", title: "Miniature People", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_63_iliketoasters_miniature-people.webp" },
 { repo: "ampp/rough-kids-illustrations", trigger: "r0ughkids4rt", title: "kids Illustrations", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_64_ampp_rough-kids-illustrations.webp" },
 { repo: "lichorosario/flux-lora-tstvctr", trigger: "TSTVCTR cartoon illustration", title: "TSTVCTR Cartoon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_65_lichorosario_flux-lora-tstvctr.webp" },
 { repo: "lichorosario/flux-lora-gliff-tosti-vector-no-captions-2500s", trigger: "", title: "Tosti Vector", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_66_lichorosario_flux-lora-gliff-tosti-vector-no-captions-2500s.webp" },
 { repo: "AlekseyCalvin/Propaganda_Poster_Schnell_by_doctor_diffusion", trigger: "propaganda poster", title: "Propaganda Poster", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_67_AlekseyCalvin_Propaganda_Poster_Schnell_by_doctor_diffusion.webp" },
 { repo: "WizWhite/Wiz-PunchOut_Ringside_Portrait", trigger: "punch0ut, ringside pixel portrait depicting", title: "Ringside Portrait", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_68_WizWhite_Wiz-PunchOut_Ringside_Portrait.webp" },
 { repo: "glif-loradex-trainer/kklors_flux_dev_long_exposure", trigger: "LE", title: "Long Exposure", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_69_glif-loradex-trainer_kklors_flux_dev_long_exposure.webp" },
 { repo: "DamarJati/streetwear-flux", trigger: "Handling Information Tshirt template", title: "Street Wear", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_70_DamarJati_streetwear-flux.webp" },
 { repo: "strangerzonehf/Flux-NFTv4-Designs-LoRA", trigger: "NFT V4", title: "NFT V4", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_71_strangerzonehf_Flux-NFTv4-Designs-LoRA.webp" },
 { repo: "multimodalart/product-design", trigger: "product designed by prdsgn", title: "Product Design", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_72_multimodalart_product-design.webp" },
 { repo: "prithivMLmods/Canopus-LoRA-Flux-Typography-ASCII", trigger: "Typography, ASCII Art", title: "Typography", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_73_prithivMLmods_Canopus-LoRA-Flux-Typography-ASCII.webp" },
 { repo: "mateo-19182/mosoco", trigger: "moscos0", title: "Mosoco", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_74_mateo-19182_mosoco.webp" },
 { repo: "jakedahn/flux-latentpop", trigger: "latentpop", title: "Latent Pop", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_75_jakedahn_flux-latentpop.webp" },
 { repo: "glif-loradex-trainer/ddickinson_dstyl3xl", trigger: "in the style of dstyl3xl", title: "Dstyl3xl", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_76_glif-loradex-trainer_ddickinson_dstyl3xl.webp" },
 { repo: "TDN-M/RetouchFLux", trigger: "luxury, enhance, hdr", title: "Retouch FLux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_77_TDN-M_RetouchFLux.webp" },
 { repo: "glif/anime-blockprint-style", trigger: "blockprint style", title: "Block Print", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_78_glif_anime-blockprint-style.webp" },
 { repo: "renderartist/weirdthingsflux", trigger: "w3irdth1ngs, illustration", title: "Weird Things Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_79_renderartist_weirdthingsflux.webp" },
 { repo: "lucataco/ReplicateFluxLoRA", trigger: "TOK", title: "Replicate Flux LoRA", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_80_lucataco_ReplicateFluxLoRA.webp" },
 { repo: "alvdansen/haunted_linework_flux", trigger: "hntdlnwrk style", title: "Linework", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_81_alvdansen_haunted_linework_flux.webp" },
 { repo: "fofr/flux-cassette-futurism", trigger: "cassette futurism", title: "Cassette Futurism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_82_fofr_flux-cassette-futurism.webp" },
 { repo: "Wadaka/Mojo_Style_LoRA", trigger: "Mojo_Style", title: "Mojo Style", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_83_Wadaka_Mojo_Style_LoRA.webp" },
 { repo: "Norod78/JojosoStyle-flux-lora", trigger: "JojosoStyle", title: "Jojoso Style", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_84_Norod78_JojosoStyle-flux-lora.webp" },
 { repo: "Chunte/flux-lora-Huggieverse", trigger: "HGGRE", title: "Huggieverse", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_85_Chunte_flux-lora-Huggieverse.webp" },
 { repo: "diabolic6045/Flux_Wallpaper_Lora", trigger: "wallpap3r5", title: "Wallpaper LoRA", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_86_diabolic6045_Flux_Wallpaper_Lora.webp" },
 { repo: "bingbangboom/flux_geopop", trigger: "illustration in the style of NWGMTRCPOPV01", title: "Geo Pop", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_87_bingbangboom_flux_geopop.webp" },
 { repo: "bingbangboom/flux_colorscape", trigger: "illustration in the style of ASstyle001", title: "Colorscape", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_88_bingbangboom_flux_colorscape.webp" },
 { repo: "dvyio/flux-lora-thermal-image", trigger: "thermal image in the style of THRML", title: "Thermal Image", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_89_dvyio_flux-lora-thermal-image.webp" },
 { repo: "prithivMLmods/Canopus-Clothing-Flux-LoRA", trigger: "Hoodie, Clothes, Shirt, Pant", title: "Clothing Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_90_prithivMLmods_Canopus-Clothing-Flux-LoRA.webp" },
 { repo: "dvyio/flux-lora-stippled-illustration", trigger: "stippled illustration in the style of STPPLD", title: "Stippled Illustration", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_91_dvyio_flux-lora-stippled-illustration.webp" },
 { repo: "wayned/fruitlabels", trigger: "fruit labels", title: "Fruitlabels", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_92_wayned_fruitlabels.webp" },
 { repo: "punzel/flux_margot_robbie", trigger: "", title: "Margot Robbie", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_93_punzel_flux_margot_robbie.webp" },
 { repo: "punzel/flux_margot_robbie", trigger: "f1leg0s", title: "Formula 1 Lego", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_94_punzel_flux_margot_robbie.webp" },
 { repo: "glif/Brain-Melt-Acid-Art", trigger: "in an acid surrealism style, maximalism", title: "Melt Acid", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_95_glif_Brain-Melt-Acid-Art.webp" },
 { repo: "jeremytai/enso-zen", trigger: "enso", title: "Enso", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_96_jeremytai_enso-zen.webp" },
 { repo: "veryVANYA/opus-ascii-flux", trigger: "opus_ascii", title: "Opus Ascii", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_97_veryVANYA_opus-ascii-flux.webp" },
 { repo: "crystantine/cybrpnkz", trigger: "architecture style of CYBRPNKZ", title: "Cybrpnkz", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_98_crystantine_cybrpnkz.webp" },
 { repo: "fyp1/pattern_generation", trigger: "pattern", title: "Pattern Generation", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_99_fyp1_pattern_generation.webp" },
 { repo: "TheAwakenOne/caricature", trigger: "CCTUR3", title: "Caricature", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_100_TheAwakenOne_caricature.webp" },
 { repo: "strangerzonehf/Flux-3DXL-Partfile-C0001", trigger: "3DXLC1", title: "3DXLC1", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_101_strangerzonehf_Flux-3DXL-Partfile-C0001.webp" },
 { repo: "Purz/neon-sign", trigger: "n30n_51gn", title: "Neon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_102_Purz_neon-sign.webp" },
 { repo: "WizWhite/wizard-s-vintage-sardine-tins", trigger: "Vintage Sardine Tin, Tinned Fish, vintage xyz tin", title: "Vintage Sardine Tins", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_103_WizWhite_wizard-s-vintage-sardine-tins.webp" },
 { repo: "TheAwakenOne/mtdp-balloon-character", trigger: "FLOAT", title: "Float Ballon Character", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_104_TheAwakenOne_mtdp-balloon-character.webp" },
 { repo: "glif/golden-haggadah", trigger: "golden haggadah style", title: "Golden Haggadah", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_105_glif_golden-haggadah.webp" },
 { repo: "glif-loradex-trainer/usernametaken420__oz_ftw_balaclava", trigger: "ftw balaclava", title: "Ftw Balaclava", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_106_glif-loradex-trainer_usernametaken420__oz_ftw_balaclava.webp" },
 { repo: "AlloReview/flux-lora-undraw", trigger: "in the style of UndrawPurple", title: "Undraw", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_107_AlloReview_flux-lora-undraw.webp" },
 { repo: "Disra/lora-anime-test-02", trigger: "anime", title: "Anime Test", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_108_Disra_lora-anime-test-02.webp" },
 { repo: "wanghaofan/Black-Myth-Wukong-FLUX-LoRA", trigger: "wukong", title: "Black Myth Wukong", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_109_wanghaofan_Black-Myth-Wukong-FLUX-LoRA.webp" },
 { repo: "nerijs/pastelcomic-flux", trigger: "", title: "Pastelcomic", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_110_nerijs_pastelcomic-flux.webp" },
 { repo: "RareConcepts/Flux.1-dev-LoKr-Moonman", trigger: "moonman", title: "Moonman", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_111_RareConcepts_Flux_1-dev-LoKr-Moonman.webp" },
 { repo: "martintomov/ascii-flux-v1", trigger: "ASCII art", title: "Ascii Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_112_martintomov_ascii-flux-v1.webp" },
 { repo: "Omarito2412/Stars-Galaxy-Flux", trigger: "mlkwglx", title: "Ascii Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_113_Omarito2412_Stars-Galaxy-Flux.webp" },
 { repo: "brushpenbob/flux-pencil-v2", trigger: "evang style", title: "Pencil V2", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_114_brushpenbob_flux-pencil-v2.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Children-Simple-Sketch", trigger: "sketched style", title: "Children Simple Sketch", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_115_Shakker-Labs_FLUX_1-dev-LoRA-Children-Simple-Sketch.webp" },
 { repo: "victor/contemporarink", trigger: "ECACX", title: "Contemporarink", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_116_victor_contemporarink.webp" },
 { repo: "wavymulder/OverlordStyleFLUX", trigger: "ovld style anime", title: "OverlordStyle", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_117_wavymulder_OverlordStyleFLUX.webp" },
 { repo: "marceloxp/canny-quest", trigger: "blonde, silver silk dress, perfectly round sunglasses, pearl necklace", title: "Canny quest", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_118_marceloxp_canny-quest.webp" },
 { repo: "busetolunay/building_flux_lora_v1", trigger: "a0ce", title: "Building Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_119_busetolunay_building_flux_lora_v1.webp" },
 { repo: "Omarito2412/Tinker-Bell-Flux", trigger: "TinkerWaifu, blue eyes, single hair bun", title: "Tinker Bell Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_120_Omarito2412_Tinker-Bell-Flux.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-playful-metropolis", trigger: "", title: "Playful Metropolis", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_121_Shakker-Labs_FLUX_1-dev-LoRA-playful-metropolis.webp" },
 { repo: "prithivMLmods/Castor-Character-Polygon-Flux-LoRA", trigger: "3D Polygon", title: "Character Polygon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_122_prithivMLmods_Castor-Character-Polygon-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Castor-Gta6-Theme-Flux-LoRA", trigger: "GTA 6 Theme, World of GTA 6", title: "GTA 6 Theme", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_123_prithivMLmods_Castor-Gta6-Theme-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Castor-Flux-Concept-Gta6-Character-Design", trigger: "Jason, Lucia, GTA 6", title: "GTA Character Concept", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_124_prithivMLmods_Castor-Flux-Concept-Gta6-Character-Design.webp" },
 { repo: "prithivMLmods/Castor-3D-Sketchfab-Flux-LoRA", trigger: "3D Sketchfab", title: "3D Sketchfab", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_125_prithivMLmods_Castor-3D-Sketchfab-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Castor-Collage-Dim-Flux-LoRA", trigger: "collage", title: "In Image Collage", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_126_prithivMLmods_Castor-Collage-Dim-Flux-LoRA.webp" },
 { repo: "brushpenbob/flux-midjourney-anime", trigger: "egmid", title: "Anime Journey", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_127_brushpenbob_flux-midjourney-anime.webp" },
 { repo: "glif-loradex-trainer/maxxd4240_minimalistPastel", trigger: "minimalistPastel", title: "Min Pastel", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_128_glif-loradex-trainer_maxxd4240_minimalistPastel.webp" },
 { repo: "prithivMLmods/Castor-Red-Dead-Redemption-2-Flux-LoRA", trigger: "Red Dead Redemption 2", title: "RDR2", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_129_prithivMLmods_Castor-Red-Dead-Redemption-2-Flux-LoRA.webp" },
 { repo: "WizWhite/wizard-s-paper-model-universe", trigger: "A paper model", title: "Paper Model", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_130_WizWhite_wizard-s-paper-model-universe.webp" },
 { repo: "renderartist/retrocomicflux", trigger: "comic book panel", title: "Retrocomic Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_131_renderartist_retrocomicflux.webp" },
 { repo: "prithivMLmods/Castor-Happy-Halloween-Flux-LoRA", trigger: "happy halloween", title: "Halloween Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_132_prithivMLmods_Castor-Happy-Halloween-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Castor-3D-Portrait-Flux-LoRA", trigger: "3D Portrait", title: "Castor-3D-Portrait", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_133_prithivMLmods_Castor-3D-Portrait-Flux-LoRA.webp" },
 { repo: "renderartist/coloringbookflux", trigger: "c0l0ringb00k, coloring book, coloring book page", title: "Coloring book flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_134_renderartist_coloringbookflux.webp" },
 { repo: "prithivMLmods/Uncoloured-Polygon-Flux-LoRA", trigger: "uncoloured polygon", title: "Uncoloured Polygon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_135_prithivMLmods_Uncoloured-Polygon-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Past-Present-Deep-Mix-Flux-LoRA", trigger: "Mixing Past and Present", title: "Past Present Mix", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_136_prithivMLmods_Past-Present-Deep-Mix-Flux-LoRA.webp" },
 { repo: "gokaygokay/Flux-Double-Exposure-LoRA", trigger: "dblxpsr", title: "Double Exposure", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_137_gokaygokay_Flux-Double-Exposure-LoRA.webp" },
 { repo: "gokaygokay/Flux-Seamless-Texture-LoRA", trigger: "smlstxtr", title: "Seamless Texture", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_138_gokaygokay_Flux-Seamless-Texture-LoRA.webp" },
 { repo: "prithivMLmods/Mockup-Texture-Flux-LoRA", trigger: "Mockup", title: "Mockup Texture", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_139_prithivMLmods_Mockup-Texture-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Ton618-Tarot-Cards-Flux-LoRA", trigger: "Tarot card", title: "Tarot Cards", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_140_prithivMLmods_Ton618-Tarot-Cards-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Ton618-Amxtoon-Flux-LoRA", trigger: "Amxtoon", title: "Amxtoon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_141_prithivMLmods_Ton618-Amxtoon-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Ton618-Epic-Realism-Flux-LoRA", trigger: "Epic Realism", title: "Epic Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_142_prithivMLmods_Ton618-Epic-Realism-Flux-LoRA.webp" },
 { repo: "bingbangboom/flux-mixReality", trigger: "in the style of HLFILSTHLFPHTO", title: "Mixed Reality", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_143_bingbangboom_flux-mixReality.webp" },
 { repo: "sWizad/pokemon-trainer-sprites-pixelart-flux", trigger: "pixel image of, pixel art", title: "Pixelart", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_144_sWizad_pokemon-trainer-sprites-pixelart-flux.webp" },
 { repo: "bingbangboom/flux_colorscape", trigger: "illustration in the style of ASstyle001", title: "Colorscape", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_145_bingbangboom_flux_colorscape.webp" },
 { repo: "UmeAiRT/FLUX.1-dev-LoRA-Modern_Pixel_art", trigger: "umempart", title: "Modern Pixel art", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_146_UmeAiRT_FLUX_1-dev-LoRA-Modern_Pixel_art.webp" },
 { repo: "prithivMLmods/Ton618-Only-Stickers-Flux-LoRA", trigger: "Only Sticker", title: "Sticker", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_147_prithivMLmods_Ton618-Only-Stickers-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Ton618-Space-Wallpaper-LoRA", trigger: "Space Wallpaper", title: "Space Wallpaper", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_148_prithivMLmods_Ton618-Space-Wallpaper-LoRA.webp" },
 { repo: "prithivMLmods/Canopus-Pixar-3D-Flux-LoRA", trigger: "Pixar 3D", title: "Pixar 3D", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_149_prithivMLmods_Canopus-Pixar-3D-Flux-LoRA.webp" },
 { repo: "prithivMLmods/EBook-Creative-Cover-Flux-LoRA", trigger: "EBook Cover", title: "EBook Cover", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_150_prithivMLmods_EBook-Creative-Cover-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Minimal-Futuristic-Flux-LoRA", trigger: "Minimal Futuristic", title: "Minimal Futuristic", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_151_prithivMLmods_Minimal-Futuristic-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Seamless-Pattern-Design-Flux-LoRA", trigger: "Seamless Pattern Design", title: "Seamless Pattern", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_152_prithivMLmods_Seamless-Pattern-Design-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Logo-Design-Flux-LoRA", trigger: "Logo Design", title: "Logo Design", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_153_prithivMLmods_Logo-Design-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Coloring-Book-Flux-LoRA", trigger: "Coloring Book", title: "Coloring Book", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_154_prithivMLmods_Coloring-Book-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Intense-Red-Flux-LoRA", trigger: "Intense Red", title: "Intense Red", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_155_prithivMLmods_Intense-Red-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Glowing-Body-Flux-LoRA", trigger: "Glowing Body", title: "Glowing Body Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_156_prithivMLmods_Glowing-Body-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Electric-Blue-Flux-LoRA", trigger: "Electric Blue", title: "Electric Blue", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_157_prithivMLmods_Electric-Blue-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Clouds-Illusion-Flux-LoRA", trigger: "Clouds Illusion", title: "Clouds Illusion", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_158_prithivMLmods_Clouds-Illusion-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Digital-Yellow-Flux-LoRA", trigger: "Digital Yellow", title: "Digital Yellow", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_159_prithivMLmods_Digital-Yellow-Flux-LoRA.webp" },
 { repo: "cfahlgren1/flux-qwen-capybara", trigger: "QWENCAPY", title: "Flux Qwen Capybara", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_160_cfahlgren1_flux-qwen-capybara.webp" },
 { repo: "dasdsff/PleinAirArt", trigger: "P1e!n", title: "Plein Air Art ", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_161_dasdsff_PleinAirArt.webp" },
 { repo: "prithivMLmods/Orange-Chroma-Flux-LoRA", trigger: "Orange Chroma", title: "Orange Chroma", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_162_prithivMLmods_Orange-Chroma-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Lime-Green-Flux-LoRA", trigger: "Lime Green", title: "Lime Green", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_163_prithivMLmods_Lime-Green-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Fractured-Line-Flare", trigger: "Fractured Line Flare", title: "Line Flare", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_164_prithivMLmods_Fractured-Line-Flare.webp" },
 { repo: "prithivMLmods/Golden-Dust-Flux-LoRA", trigger: "Golden Dust", title: "Golden Dust", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_165_prithivMLmods_Golden-Dust-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Castor-Dramatic-Neon-Flux-LoRA", trigger: "Dramatic Neon", title: "Dramatic Neon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_166_prithivMLmods_Castor-Dramatic-Neon-Flux-LoRA.webp" },
 { repo: "tryonlabs/FLUX.1-dev-LoRA-Outfit-Generator", trigger: "Outfit", title: "Outfit Generator", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_167_tryonlabs_FLUX_1-dev-LoRA-Outfit-Generator.webp" },
 { repo: "davisbro/half_illustration", trigger: "in the style of TOK", title: "Half Illustration", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_168_davisbro_half_illustration.webp" },
 { repo: "bingbangboom/flux_oilscape", trigger: "in the style of Oilstyle002", title: "Oilscape", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_169_bingbangboom_flux_oilscape.webp" },
 { repo: "prithivMLmods/Red-Undersea-Flux-LoRA", trigger: "Red Undersea", title: "Red Undersea Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_170_prithivMLmods_Red-Undersea-Flux-LoRA.webp" },
 { repo: "prithivMLmods/3D-Render-Flux-LoRA", trigger: "3D Portrait, 3d render", title: "3D Render Flux LoRA", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_171_prithivMLmods_3D-Render-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Yellow-Pop-Flux-Dev-LoRA", trigger: "Yellow Pop", title: "Yellow Pop Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_172_prithivMLmods_Yellow-Pop-Flux-Dev-LoRA.webp" },
 { repo: "prithivMLmods/Purple-Grid-Flux-LoRA", trigger: "Purple Grid", title: "Purple Grid Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_173_prithivMLmods_Purple-Grid-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Dark-Thing-Flux-LoRA", trigger: "Dark Creature", title: "Dark Thing Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_174_prithivMLmods_Dark-Thing-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Shadow-Projection-Flux-LoRA", trigger: "Shadow Projection", title: "Shadow Projection", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_175_prithivMLmods_Shadow-Projection-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Street-Bokeh-Flux-LoRA", trigger: "Street Bokeh", title: "Street Bokeh", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_176_prithivMLmods_Street-Bokeh-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Abstract-Cartoon-Flux-LoRA", trigger: "Abstract Cartoon", title: "Abstract Cartoon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_177_prithivMLmods_Abstract-Cartoon-Flux-LoRA.webp" },
 { repo: "Norod78/CartoonStyle-flux-lora", trigger: "", title: "Cartoon Style Flux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_178_Norod78_CartoonStyle-flux-lora.webp" },
 { repo: "prithivMLmods/Digital-Chaos-Flux-LoRA", trigger: "Digital Chaos", title: "HDR Digital Chaos", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_179_prithivMLmods_Digital-Chaos-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Yellow-Laser-Flux-LoRA", trigger: "Yellow Lasers", title: "Yellow Laser", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_180_prithivMLmods_Yellow-Laser-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Bold-Shadows-Flux-LoRA", trigger: "Bold Shadows", title: "Bold Shadows", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_181_prithivMLmods_Bold-Shadows-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Knitted-Character-Flux-LoRA", trigger: "Knitted Character", title: "Knitted Character", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_182_prithivMLmods_Knitted-Character-Flux-LoRA.webp" },
 { repo: "alvdansen/frosting_lane_flux", trigger: "frstingln illustration", title: "Frosting Lane", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_183_alvdansen_frosting_lane_flux.webp" },
 { repo: "prithivMLmods/Flux-Realism-FineDetailed", trigger: "Fine Detailed", title: "Fine Detailed Character", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_184_prithivMLmods_Flux-Realism-FineDetailed.webp" },
 { repo: "prithivMLmods/Aura-9999", trigger: "Aura 9999", title: "Aura 9999+", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_185_prithivMLmods_Aura-9999.webp" },
 { repo: "prithivMLmods/Pastel-BG-Flux-LoRA", trigger: "Pastel BG", title: "Pastel BG", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_186_prithivMLmods_Pastel-BG-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Green-Cartoon-Flux-LoRA", trigger: "Green Cartoon", title: "Green Cartoon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_187_prithivMLmods_Green-Cartoon-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Retro-Pixel-Flux-LoRA", trigger: "Retro Pixel", title: "Retro Pixel", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_188_prithivMLmods_Retro-Pixel-Flux-LoRA.webp" },
 { repo: "prithivMLmods/Teen-Outfit", trigger: "Teen Outfit", title: "Teen Outfit", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_189_prithivMLmods_Teen-Outfit.webp" },
 { repo: "prithivMLmods/CAnime-LoRA", trigger: "CAnime", title: "CAnime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_190_prithivMLmods_CAnime-LoRA.webp" },
 { repo: "prithivMLmods/Super-Pencil-Flux-LoRA", trigger: "Simple Pencil", title: "Simple Pencil", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_191_prithivMLmods_Super-Pencil-Flux-LoRA.webp" },
 { repo: "martintomov/retrofuturism-flux", trigger: "retrofuturism", title: "Retro futurism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_192_martintomov_retrofuturism-flux.webp" },
 { repo: "Bootoshi/retroanime", trigger: "retro anime", title: "Retro Anime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_193_Bootoshi_retroanime.webp" },
 { repo: "alvdansen/plushy-world-flux", trigger: "3dcndylnd style", title: "Plushy world", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_194_alvdansen_plushy-world-flux.webp" },
 { repo: "renderartist/ROYGBIVFlux", trigger: "r0ygb1v, digital illustration, textured", title: "ROYGBIVFlux", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_195_renderartist_ROYGBIVFlux.webp" },
 { repo: "alvdansen/sonny-anime-flex", trigger: "nm22 [style] style", title: "sonny anime", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_196_alvdansen_sonny-anime-flex.webp" },
 { repo: "bingbangboom/flux_whimscape", trigger: "illustration in the style of WHMSCPE001", title: "flux whimscape", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_197_bingbangboom_flux_whimscape.webp" },
 { repo: "glif-loradex-trainer/AP123_movie_shots_ic_lora_experiment_v1", trigger: "MOVIE-SHOTS", title: "movie shots ic lora", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_198_glif-loradex-trainer_AP123_movie_shots_ic_lora_experiment_v1.webp" },
 { repo: "glif/LiDAR-Vision", trigger: "L1d4r", title: "LiDAR", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_199_glif_LiDAR-Vision.webp" },
 { repo: "prithivMLmods/Canopus-Flux-LoRA-Hoodies", trigger: "Hoodie", title: "Hoodies", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_200_prithivMLmods_Canopus-Flux-LoRA-Hoodies.webp" },
 { repo: "dvyio/flux-lora-rdr2", trigger: "in the style of RDRGM", title: "World of RDR", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_201_dvyio_flux-lora-rdr2.webp" },
 { repo: "Fihade/Retro-Collage-Art-Flux-Dev", trigger: "ff-collage", title: "Retro Collage Art", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_202_Fihade_Retro-Collage-Art-Flux-Dev.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Quote-LoRA", trigger: "quoter", title: "Quote", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_203_prithivMLmods_Flux_1-Dev-Quote-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Stamp-Art-LoRA", trigger: "stam9", title: "Stamp", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_204_prithivMLmods_Flux_1-Dev-Stamp-Art-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Hand-Sticky-LoRA", trigger: "handstick69", title: "Hand Sticky", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_205_prithivMLmods_Flux_1-Dev-Hand-Sticky-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Poster-HQ-LoRA", trigger: "poster foss", title: "Poster Foss", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_206_prithivMLmods_Flux_1-Dev-Poster-HQ-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Ctoon-LoRA", trigger: "ctoon", title: "Ctoon", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_207_prithivMLmods_Flux_1-Dev-Ctoon-LoRA.webp" },
 { repo: "prithivMLmods/Flux-C33-Design-LoRA", trigger: "C33 Design", title: "C33 Design", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_208_prithivMLmods_Flux-C33-Design-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Indo-Realism-LoRA", trigger: "indo-realism", title: "Indo Realism", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_209_prithivMLmods_Flux_1-Dev-Indo-Realism-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Sketch-Card-LoRA", trigger: "sketch card", title: "Sketch Card", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_210_prithivMLmods_Flux_1-Dev-Sketch-Card-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Movie-Boards-LoRA", trigger: "movieboard", title: "Movie Board", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_211_prithivMLmods_Flux_1-Dev-Movie-Boards-LoRA.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Pov-DoorEye-LoRA", trigger: "look in 2", title: "Door Eye View", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_212_prithivMLmods_Flux_1-Dev-Pov-DoorEye-LoRA.webp" },
 { repo: "alvdansen/enna-sketch-style", trigger: "sketch illustration style", title: "Enna Sketch", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_213_alvdansen_enna-sketch-style.webp" },
 { repo: "jbilcke-hf/flux-dev-panorama-lora-2", trigger: "HDRI panoramic view of TOK", title: "Panorama", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_214_jbilcke-hf_flux-dev-panorama-lora-2.webp" },
 { repo: "Shakker-Labs/FLUX.1-dev-LoRA-Micro-landscape-on-Mobile-Phone", trigger: "miniature stereoscopic scene", title: "Micro Landscape", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_215_Shakker-Labs_FLUX_1-dev-LoRA-Micro-landscape-on-Mobile-Phone.webp" },
 { repo: "glif-loradex-trainer/goldenark__Ancient_Greece_Watercolor_Sketch_Style", trigger: "AncientWaterColorStyle", title: "Ancient Greece Watercolor", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_216_glif-loradex-trainer_goldenark__Ancient_Greece_Watercolor_Sketch_Style.webp" },
 { repo: "glif-loradex-trainer/i12bp8_appelsiensam_mii_v1", trigger: "M11_PPLSNSM", title: "M11 PPLSNSM", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_217_glif-loradex-trainer_i12bp8_appelsiensam_mii_v1.webp" },
 { repo: "glif-loradex-trainer/an303042_RisographPrint_v1", trigger: "rsgrf , risograph", title: "RisographPrint", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_218_glif-loradex-trainer_an303042_RisographPrint_v1.webp" },
 { repo: "gokaygokay/Flux-White-Background-LoRA", trigger: "in the middle ,white background", title: "White Background", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_219_gokaygokay_Flux-White-Background-LoRA.webp" },
 { repo: "glif/Gesture-Draw", trigger: "gstdrw style", title: "Gesture Draw", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_220_glif_Gesture-Draw.webp" },
 { repo: "strangerzonehf/Black-of-Art-Flux", trigger: "Black of Art", title: "Black of Art", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_221_strangerzonehf_Black-of-Art-Flux.webp" },
 { repo: "dvyio/flux-lora-the-sims", trigger: "video game screenshot in the style of THSMS", title: "SIMS", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_222_dvyio_flux-lora-the-sims.webp" },
 { repo: "UmeAiRT/FLUX.1-dev-LoRA-Ume_Sky", trigger: "umesky", title: "Umesky", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_223_UmeAiRT_FLUX_1-dev-LoRA-Ume_Sky.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Realtime-Toon-Mix", trigger: "toon mix", title: "Realtime Toon Mix", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_224_prithivMLmods_Flux_1-Dev-Realtime-Toon-Mix.webp" },
 { repo: "oshtz/flux-pointcrayonstyle", trigger: "pointcrayonstyle", title: "Pointcrayonstyle", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_225_oshtz_flux-pointcrayonstyle.webp" },
 { repo: "Purz/vhs-box", trigger: "vhs_box", title: "VSH Box", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_226_Purz_vhs-box.webp" },
 { repo: "nerijs/flux_prettyshot_v1", trigger: "pr3ttysh0t", title: "Prettyshot", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_227_nerijs_flux_prettyshot_v1.webp" },
 { repo: "glif-loradex-trainer/insectagon_pipo_hippo1", trigger: "pipo_meme", title: "Insectagon pipo", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_228_glif-loradex-trainer_insectagon_pipo_hippo1.webp" },
 { repo: "prithivMLmods/Flux-Polaroid-Plus", trigger: "Polaroid Collage", title: "Polaroid Plus", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_229_prithivMLmods_Flux-Polaroid-Plus.webp" },
 { repo: "prithivMLmods/Flux-Product-Ad-Backdrop", trigger: "Product Ad", title: "Product Ad", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_230_prithivMLmods_Flux-Product-Ad-Backdrop.webp" },
 { repo: "prithivMLmods/Flux-Art-Nightmare-99", trigger: "nm99", title: "Nightmare 99", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_231_prithivMLmods_Flux-Art-Nightmare-99.webp" },
 { repo: "prithivMLmods/Flux.1-Dev-Frosted-Container-LoRA", trigger: "frosted GC", title: "Frosted Container", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_232_prithivMLmods_Flux_1-Dev-Frosted-Container-LoRA.webp" },
 { repo: "glif-loradex-trainer/swap_magenta_kuki_roblox", trigger: "kuki_magenta, roblox", title: "Magenta Kuki Roblox", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_233_glif-loradex-trainer_swap_magenta_kuki_roblox.webp" },
 { repo: "glif-loradex-trainer/maxxd4240_PleinAir", trigger: "P1e!n", title: "Plein Air", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_234_glif-loradex-trainer_maxxd4240_PleinAir.webp" },
 { repo: "prithivMLmods/Flux-GArt-LoRA", trigger: "GArt", title: "GArt", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_235_prithivMLmods_Flux-GArt-LoRA.webp" },
 { repo: "strangerzonehf/Flux-Super-Capybara-HF", trigger: "capybara hf", title: "Capybara HF", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_236_strangerzonehf_Flux-Super-Capybara-HF.webp" },
 { repo: "prithivMLmods/Flux-Fine-Detail-LoRA", trigger: "Super Detail", title: "Fine Detail", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_237_prithivMLmods_Flux-Fine-Detail-LoRA.webp" },
 { repo: "gokaygokay/Flux-Digital-Backgrounds-LoRA", trigger: "dgtlbg", title: "Digital Backgrounds", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_238_gokaygokay_Flux-Digital-Backgrounds-LoRA.webp" },
 { repo: "gokaygokay/Flux-Realistic-Backgrounds-LoRA", trigger: "rlstcbg", title: "Realistic Backgrounds", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_239_gokaygokay_Flux-Realistic-Backgrounds-LoRA.webp" },
 { repo: "prithivMLmods/Flux-Lego-Ref-LoRA", trigger: "lego --fref --89890", title: "LEGO", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_240_prithivMLmods_Flux-Lego-Ref-LoRA.webp" },
 { repo: "strangerzonehf/Qd-Sketch", trigger: "Qd-Sketch", title: "Qd-Sketch", image: "https://huggingface.co/datasets/Opera8/imagelora/resolve/main/thumbnails/thumb_241_strangerzonehf_Qd-Sketch.webp" }
 ];
 let selectedLoraRepo = "";
 let selectedLoraTrigger = "";
 let isCustomLoraMode = false;
 // تولید نام فارسی دقیق و بی‌نقص برای تمام سبک‌ها
 function getPersianLoraName(title) {
 const exactMatches = {
 "Koda": "کودا", "Super Realism": "سوپر رئالیسم", "Dalle Mix": "دال-ای میکس", "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": "سه‌بعدی بامزه",
 "Dreamscape": "فضای رویایی", "Cute Kawaii": "بامزه و کاوایی", "Pastel Anime": "انیمه پاستلی",
 "Vector": "وکتور (برداری)", "Miniature": "مینیاتوری (ماکت)", "Surf Bingbangboom": "موج‌سواری بینگ‌بنگ‌بوم",
 "Snoopy Charlie": "اسنوپی و چارلی", "Fixed Sonny": "سانی فیکس‌شده", "Multi Angle": "چند زاویه‌ای",
 "How2Draw": "آموزش طراحی", "Text Poster": "پوستر متنی", "Aquarell Watercolor": "آبرنگ آکواریل",
 "Face Projection": "پروجکشن چهره", "Face Projection ": "پروجکشن چهره", "Ecom Design Art": "طراحی محصولات فروشگاهی",
 "Max Head-Room": "مکس هدروم", "Toy Box Flux": "جعبه اسباب‌بازی فلاکس", "Live 3D": "سه‌بعدی زنده",
 "Garbage Bag Art": "هنر کیسه زباله", "Logo Design": "طراحی لوگو", "Sadie Sink": "سیدی سینک",
 "Jenna ortega": "جنا اورتگا", "Poker Cards": "کارت‌های پوکر", "Cubist Cartoon": "کارتون کوبیسمی",
 "Miniature People": "آدم‌های مینیاتوری", "kids Illustrations": "تصویرسازی کودکان", "TSTVCTR Cartoon": "کارتون TSTVCTR",
 "Tosti Vector": "وکتور توستی", "Propaganda Poster": "پوستر پروپاگاندا", "Ringside Portrait": "پرتره پیکسلی رینگ",
 "Long Exposure": "نوردهی طولانی (لانگ اکسپوژر)", "Street Wear": "استایل خیابانی", "NFT V4": "طراحی NFT نسخه ۴",
 "Product Design": "طراحی محصول", "Typography": "تایپوگرافی (حروف‌چینی)", "Mosoco": "موسوکو",
 "Latent Pop": "پاپ نهان (Latent Pop)", "Dstyl3xl": "استایل Dstyl3xl", "Retouch FLux": "روتوش فلاکس",
 "Block Print": "چاپ کلیشه‌ای", "Weird Things Flux": "چیزهای عجیب فلاکس", "Replicate Flux LoRA": "لورا فلاکس رپلیکیت",
 "Linework": "طراحی خطی", "Cassette Futurism": "آینده‌گرایی کاستی", "Mojo Style": "استایل موجو",
 "Jojoso Style": "استایل جوجوسو", "Huggieverse": "دنیای هاگی", "Wallpaper LoRA": "لورا والپیپر",
 "Geo Pop": "پاپ هندسی", "Colorscape": "منظره رنگی", "Thermal Image": "تصویر حرارتی",
 "Clothing Flux": "فلاکس پوشاک", "Stippled Illustration": "تصویرسازی نقطه‌چین", "Fruitlabels": "لیبل میوه‌ها",
 "Margot Robbie": "مارگو رابی", "Formula 1 Lego": "لگو فرمول یک", "Melt Acid": "اسید ذوب‌شده (سایکلدلیک)",
 "Enso": "انسو (دایره ذن)", "Opus Ascii": "اسکی آرت اپوس", "Cybrpnkz": "سایبرپانک‌ها",
 "Pattern Generation": "تولید پترن (الگو)", "Caricature": "کاریکاتور", "3DXLC1": "سه‌بعدی 3DXLC1",
 "Neon": "نئون", "Vintage Sardine Tins": "قوطی ساردین وینتیج", "Float Ballon Character": "کاراکتر بادکنک شناور",
 "Golden Haggadah": "هاگادای طلایی", "Ftw Balaclava": "بالاکلاوا Ftw", "Undraw": "سبک Undraw",
 "Anime Test": "تست انیمه", "Black Myth Wukong": "افسانه سیاه: ووکونگ", "Pastelcomic": "کمیک پاستلی",
 "Moonman": "مرد ماه", "Ascii Flux": "فلاکس اسکی آرت", "Pencil V2": "طراحی مداد نسخه ۲",
 "Children Simple Sketch": "اسکچ ساده کودکانه", "Contemporarink": "جوهر معاصر", "OverlordStyle": "استایل اورلرد",
 "Canny quest": "کنی کوئست", "Building Flux": "فلاکس معماری ساختمان", "Tinker Bell Flux": "فلاکس تینکربل",
 "Playful Metropolis": "کلان‌شهر بازیگوش", "Character Polygon": "کاراکتر پالی‌گان (چندضلعی)", "GTA 6 Theme": "تم GTA 6",
 "GTA Character Concept": "کانسپت کاراکتر GTA", "3D Sketchfab": "سه‌بعدی اسکچ‌فب", "In Image Collage": "کلاژ داخل تصویر",
 "Anime Journey": "انیمه جرنی", "Min Pastel": "پاستل مینیمال", "RDR2": "رد دد ردمپشن ۲ (RDR2)",
 "Paper Model": "ماکت کاغذی", "Retrocomic Flux": "فلاکس کمیک رترو", "Halloween Flux": "فلاکس هالووین",
 "Castor-3D-Portrait": "پرتره سه‌بعدی کاستور", "Coloring book flux": "فلاکس کتاب رنگ‌آمیزی", "Uncoloured Polygon": "پالی‌گان بدون رنگ",
 "Past Present Mix": "ترکیب گذشته و حال", "Double Exposure": "نوردهی دوگانه (دابل اکسپوژر)", "Seamless Texture": "تکستچر بدون درز",
 "Mockup Texture": "تکستچر موکاپ", "Tarot Cards": "کارت‌های تاروت", "Amxtoon": "کارتون Amx",
 "Epic Realism": "رئالیسم حماسی", "Mixed Reality": "واقعیت ترکیبی", "Pixelart": "پیکسل آرت",
 "Modern Pixel art": "پیکسل آرت مدرن", "Sticker": "استیکر", "Space Wallpaper": "والپیپر فضایی",
 "Pixar 3D": "سه‌بعدی پیکسار", "EBook Cover": "جلد کتاب الکترونیکی", "Minimal Futuristic": "آینده‌گرایانه مینیمال",
 "Seamless Pattern": "پترن بدون درز", "Coloring Book": "کتاب رنگ‌آمیزی", "Intense Red": "قرمز تند",
 "Glowing Body Flux": "فلاکس بدن درخشان", "Electric Blue": "آبی الکتریک", "Clouds Illusion": "توهم ابرها",
 "Digital Yellow": "زرد دیجیتال", "Flux Qwen Capybara": "فلاکس کپی‌بارا", "Plein Air Art ": "نقاشی در فضای باز",
 "Orange Chroma": "کروما نارنجی", "Lime Green": "سبز لیمویی", "Line Flare": "فلر خطی",
 "Golden Dust": "غبار طلایی", "Dramatic Neon": "نئون دراماتیک", "Outfit Generator": "تولیدکننده لباس",
 "Half Illustration": "تصویرسازی نیمه", "Oilscape": "منظره رنگ روغن", "Red Undersea Flux": "زیردریای قرمز",
 "3D Render Flux LoRA": "فلاکس رندر سه‌بعدی", "Yellow Pop Flux": "زرد پاپ", "Purple Grid Flux": "شبکه بنفش",
 "Dark Thing Flux": "موجود تاریک", "Shadow Projection": "سایه‌اندازی", "Street Bokeh": "بوکه خیابانی",
 "Abstract Cartoon": "کارتون انتزاعی", "Cartoon Style Flux": "فلاکس استایل کارتونی", "HDR Digital Chaos": "آشوب دیجیتال HDR",
 "Yellow Laser": "لیزر زرد", "Bold Shadows": "سایه‌های پررنگ", "Knitted Character": "کاراکتر بافتنی",
 "Frosting Lane": "خیابان فراستینگ", "Fine Detailed Character": "کاراکتر با جزئیات دقیق", "Aura 9999+": "هاله انرژی +9999",
 "Pastel BG": "پس‌زمینه پاستلی", "Green Cartoon": "کارتون سبز", "Retro Pixel": "پیکسل رترو",
 "Teen Outfit": "لباس نوجوان", "CAnime": "انیمه C", "Simple Pencil": "مداد ساده",
 "Retro futurism": "آینده‌گرایی رترو", "Retro Anime": "انیمه رترو (کلاسیک)", "Plushy world": "دنیای عروسکی",
 "ROYGBIVFlux": "فلاکس رنگین‌کمان", "sonny anime": "انیمه سانی", "flux whimscape": "منظره خیالی فلاکس",
 "movie shots ic lora": "شات‌های سینمایی", "LiDAR": "اسکن نوری (LiDAR)", "Hoodies": "هودی‌ها",
 "World of RDR": "دنیای بازی RDR", "Retro Collage Art": "کلاژ هنری رترو", "Quote": "نقل قول",
 "Stamp": "مُهر پستی", "Hand Sticky": "برچسب دستی", "Poster Foss": "پوستر فاس",
 "Ctoon": "سیتون (کارتون)", "C33 Design": "طراحی C33", "Indo Realism": "رئالیسم هندی/اندونزیایی",
 "Sketch Card": "کارت اسکچ", "Movie Board": "استوری‌بورد فیلم", "Door Eye View": "نمای چشمی در",
 "Enna Sketch": "اسکچ انا", "Panorama": "پانوراما", "Micro Landscape": "میکرو لنداسکیپ (منظره ریز)",
 "Ancient Greece Watercolor": "آبرنگ یونان باستان", "M11 PPLSNSM": "استایل M11", "RisographPrint": "چاپ ریسوگراف",
 "White Background": "پس‌زمینه سفید", "Gesture Draw": "طراحی فیگوراتیو", "Black of Art": "هنر سیاه",
 "SIMS": "سیمز (بازی)", "Umesky": "آسمان اومه", "Realtime Toon Mix": "کارتون در لحظه",
 "Pointcrayonstyle": "استایل مدادشمعی نقطه‌ای", "VSH Box": "جعبه نوار VHS", "Prettyshot": "پرتی شات",
 "Insectagon pipo": "حشره‌گون پیپو", "Polaroid Plus": "پولاروید پلاس", "Product Ad": "تبلیغ محصول",
 "Nightmare 99": "کابوس ۹۹", "Frosted Container": "ظرف شیشه‌ای مات", "Magenta Kuki Roblox": "روبلاکس ماجنتا",
 "Plein Air": "نقاشی در طبیعت", "GArt": "جی-آرت", "Capybara HF": "کپی‌بارا HF",
 "Fine Detail": "جزئیات ظریف", "Digital Backgrounds": "پس‌زمینه‌های دیجیتال", "Realistic Backgrounds": "پس‌زمینه‌های واقع‌گرایانه",
 "LEGO": "لگو", "Qd-Sketch": "طراحی Qd"
 };
 return exactMatches[title] || `سبک ${title}`;
 }
 // --- توابع پاپ‌آپ سفارشی (تاییدیه حذف و اندازه دلخواه) ---
 function showCustomConfirm(title, message, onConfirm) {
 const backdrop = document.createElement('div');
 backdrop.className = 'confirm-modal-backdrop';
const content = document.createElement('div');
 content.className = 'confirm-modal-content';
content.innerHTML = `
 <div class="confirm-icon">
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
 </div>
 <div class="confirm-title">${title}</div>
 <div class="confirm-message">${message}</div>
 <div class="confirm-actions">
 <button class="confirm-btn btn-cancel" id="confirm-cancel">انصراف</button>
 <button class="confirm-btn btn-danger" id="confirm-ok">تایید و حذف</button>
 </div>
 `;
backdrop.appendChild(content);
 document.body.appendChild(backdrop);
const close = () => {
 backdrop.style.opacity = '0';
 setTimeout(() => backdrop.remove(), 300);
 };
backdrop.querySelector('#confirm-cancel').onclick = close;
 backdrop.querySelector('#confirm-ok').onclick = () => {
 onConfirm();
 close();
 };
 backdrop.onclick = (e) => {
 if(e.target === backdrop) close();
 }
 }
 let userCustomWidth = 1024;
 let userCustomHeight = 1024;
 function showCustomSizeModal(onConfirm) {
 const backdrop = document.createElement('div');
 backdrop.className = 'confirm-modal-backdrop';
const content = document.createElement('div');
 content.className = 'confirm-modal-content';
content.innerHTML = `
 <div class="confirm-icon" style="color: var(--accent-primary); background: var(--accent-primary-glow);">
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:32px;height:32px;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
 </div>
 <div class="confirm-title">اندازه دلخواه تصویر</div>
 <div class="confirm-message">ابعاد مورد نظر خود را وارد کنید (بین ۲۵۶ تا ۲۰۴۸)</div>
 <div style="display:flex; gap:10px; margin-bottom: 20px; flex-direction:row-reverse;">
 <div style="flex:1;">
 <label style="display:block; font-size:0.85rem; margin-bottom:5px; color:var(--text-secondary); font-weight:bold;">عرض (Width)</label>
 <input type="number" id="inp-width" value="${userCustomWidth}" min="256" max="2048" style="width:100%; padding:10px; border-radius:10px; border:2px solid var(--input-border); font-family:inherit; text-align:center; font-weight:bold; font-size:1.1rem; outline:none;">
 </div>
 <div style="flex:1;">
 <label style="display:block; font-size:0.85rem; margin-bottom:5px; color:var(--text-secondary); font-weight:bold;">ارتفاع (Height)</label>
 <input type="number" id="inp-height" value="${userCustomHeight}" min="256" max="2048" style="width:100%; padding:10px; border-radius:10px; border:2px solid var(--input-border); font-family:inherit; text-align:center; font-weight:bold; font-size:1.1rem; outline:none;">
 </div>
 </div>
 <div class="confirm-actions">
 <button class="confirm-btn btn-cancel" id="size-cancel">انصراف</button>
 <button class="confirm-btn btn-primary-action" id="size-ok">تایید اندازه</button>
 </div>
 `;
backdrop.appendChild(content);
 document.body.appendChild(backdrop);
const inputs = backdrop.querySelectorAll('input');
 inputs.forEach(inp => {
 inp.addEventListener('focus', () => inp.style.borderColor = 'var(--accent-primary)');
 inp.addEventListener('blur', () => inp.style.borderColor = 'var(--input-border)');
 });
 const close = () => {
 backdrop.style.opacity = '0';
 setTimeout(() => backdrop.remove(), 300);
 };
backdrop.querySelector('#size-cancel').onclick = close;
backdrop.querySelector('#size-ok').onclick = () => {
 const w = parseInt(backdrop.querySelector('#inp-width').value);
 const h = parseInt(backdrop.querySelector('#inp-height').value);
 if(w >= 256 && w <= 2048 && h >= 256 && h <= 2048) {
 userCustomWidth = w;
 userCustomHeight = h;
 onConfirm(w, h);
 close();
 } else {
 alert('لطفا مقادیری بین ۲۵۶ تا ۲۰۴۸ وارد کنید.');
 }
 };
 backdrop.onclick = (e) => {
 if(e.target === backdrop) close();
 }
 }
 // --- مدیریت دیتابیس تصاویر (IndexedDB) ---
 const dbName = 'ImageStudioDB';
 const storeName = 'ImageHistory';
 let db;
 function initDB() {
 return new Promise((resolve, reject) => {
 const request = indexedDB.open(dbName, 1);
 request.onerror = event => reject(event.target.error);
 request.onsuccess = event => {
 db = event.target.result;
 resolve(db);
 };
 request.onupgradeneeded = event => {
 db = event.target.result;
 if (!db.objectStoreNames.contains(storeName)) {
 db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true });
 }
 };
 });
 }
 async function saveToHistory(blob, prompt, model, ratio) {
 if (!db) await initDB();
 return new Promise((resolve, reject) => {
 const transaction = db.transaction([storeName], 'readwrite');
 const store = transaction.objectStore(storeName);
 const newItem = {
 blob: blob,
 prompt: prompt,
 model: model,
 ratio: ratio,
 timestamp: Date.now()
 };
 store.add(newItem);
 const countReq = store.count();
 countReq.onsuccess = () => {
 if (countReq.result > 50) {
 const extra = countReq.result - 50;
 const cursorReq = store.openCursor();
 let deletedCount = 0;
 cursorReq.onsuccess = e => {
 const cursor = e.target.result;
 if (cursor && deletedCount < extra) {
 store.delete(cursor.primaryKey);
 deletedCount++;
 cursor.continue();
 }
 };
 }
 };
 transaction.oncomplete = () => {
 loadHistory();
 resolve();
 };
 transaction.onerror = e => reject(e.target.error);
 });
 }
 async function loadHistory() {
 if (!db) await initDB();
 return new Promise((resolve, reject) => {
 const transaction = db.transaction([storeName], 'readonly');
 const store = transaction.objectStore(storeName);
 const request = store.getAll();
 request.onsuccess = e => {
 const items = e.target.result;
 items.sort((a, b) => b.timestamp - a.timestamp);
 renderHistory(items);
 resolve(items);
 };
 request.onerror = e => reject(e.target.error);
 });
 }
 function renderHistory(items) {
 const historySection = document.getElementById('history-section');
 const grid = document.getElementById('history-grid');
 grid.innerHTML = '';
if (items.length === 0) {
 historySection.style.display = 'none';
 return;
 }
historySection.style.display = 'block';
items.forEach(item => {
 const blobUrl = URL.createObjectURL(item.blob);
 const safeTitle = item.prompt.replace(/"/g, '&quot;');
 const div = document.createElement('div');
 div.className = 'history-item';
 div.innerHTML = `
 <img src="${blobUrl}" alt="History Image" title="برای مشاهده کلیک کنید">
 <div class="history-details">
 <div class="history-prompt" dir="auto" title="${safeTitle}">${item.prompt}</div>
 <div class="history-meta">
 <span>${item.model}</span>
 <span dir="ltr">${item.ratio}</span>
 </div>
 <button class="history-delete-btn">حذف تصویر</button>
 </div>
 `;
div.querySelector('img').addEventListener('click', () => {
 viewHistoryImage(blobUrl, item.prompt);
 });
div.querySelector('.history-delete-btn').addEventListener('click', () => {
 deleteHistoryItem(item.id);
 });
 grid.appendChild(div);
 });
 }
 window.deleteHistoryItem = function(id) {
 showCustomConfirm('حذف از سابقه', 'آیا از حذف دائمی این تصویر از حافظه مرورگر خود اطمینان دارید؟', async () => {
 if (!db) await initDB();
 const transaction = db.transaction([storeName], 'readwrite');
 const store = transaction.objectStore(storeName);
 store.delete(id);
 transaction.oncomplete = () => loadHistory();
 });
 };
 async function deleteAllHistory() {
 if (!db) await initDB();
 return new Promise((resolve, reject) => {
 const transaction = db.transaction([storeName], 'readwrite');
 const store = transaction.objectStore(storeName);
 store.clear();
 transaction.oncomplete = () => {
 loadHistory();
 resolve();
 };
 });
 }
 document.getElementById('clear-history-btn').addEventListener('click', () => {
 showCustomConfirm('حذف تمام تصاویر', 'آیا از پاک کردن تمامی ۵۰ تصویر آخر از سابقه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => {
 deleteAllHistory();
 });
 });
 // نمایش عکس بزرگ همراه با نوار ابزار در زیر آن
window.viewHistoryImage = function(url, promptText) {
 const modal = document.createElement('div');
 modal.className = 'image-view-modal';
 modal.innerHTML = `
 <button class="image-view-close" onclick="this.parentElement.remove()">×</button>
 <div class="image-view-wrapper" onclick="event.stopPropagation()">
 <img src="${url}" alt="Full Image" class="full-view-img">
 <div class="image-view-toolbar">
 <button class="iv-action-btn iv-btn-copy" id="btn-copy-prompt">
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
 کپی پرامپت
 </button>
 <button class="iv-action-btn" id="btn-download-img">
 <svg 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"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
 دانلود تصویر
 </button>
 </div>
 </div>
 `;
modal.querySelector('#btn-download-img').onclick = () => {
 window.triggerDownload(url);
 };
const copyBtn = modal.querySelector('#btn-copy-prompt');
 copyBtn.onclick = () => {
 const showSuccess = () => {
 const originalHtml = copyBtn.innerHTML;
 copyBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> کپی شد!`;
 copyBtn.style.background = 'var(--accent-secondary)';
 copyBtn.style.color = '#1A202C';
 setTimeout(() => {
 copyBtn.innerHTML = originalHtml;
 copyBtn.style.background = '';
 copyBtn.style.color = '';
 }, 2000);
 };
 const fallbackCopy = () => {
 const textArea = document.createElement("textarea");
 textArea.value = promptText;
 textArea.style.position = "fixed";
textArea.style.top = "-9999px";
 textArea.style.left = "-9999px";
 document.body.appendChild(textArea);
 textArea.focus();
 textArea.select();
 try {
 document.execCommand('copy');
 showSuccess();
 } catch (err) {
 console.error('Fallback copy failed', err);
 }
 document.body.removeChild(textArea);
 };
 if (navigator.clipboard && window.isSecureContext) {
 navigator.clipboard.writeText(promptText).then(showSuccess).catch(fallbackCopy);
 } else {
 fallbackCopy();
 }
 };
 modal.onclick = (e) => {
 if(e.target === modal) modal.remove();
 };
 document.body.appendChild(modal);
 };
 // --- سیستم اعتبار و شناسایی کاربر ---
 let userSubscriptionStatus = 'free';
 let userFingerprint = null;
 let countdownInterval = null;
 let isResultProcessed = false;
let fakeProgressInterval = null;
let activePollTimer = null; // برای مدیریت تایمر ساخت عکس در پس زمینه
 let activeTimeoutTimer = null; // برای مدیریت هشدار دو دقیقه‌ای
const PREMIUM_PAGE_ID = '1149636';
async function getBrowserFingerprint() {
const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset(), "canvas-test"];
const fingerprintString = components.join('---');
let hash = 0;
for (let i = 0; i < fingerprintString.length; i++) { hash = ((hash << 5) - hash) + fingerprintString.charCodeAt(i); hash |= 0; }
return 'fp_img_' + Math.abs(hash).toString(16);
}
 function isUserPaid(userObject) {
return userObject?.isLogin && userObject.accessible_pages?.some(p => p == PREMIUM_PAGE_ID);
}
 function updateUIForSubscriptionStatus(status) {
userSubscriptionStatus = status;
const creditInfoDiv = document.getElementById('credit-info');
const upgradeBtn = document.getElementById('upgrade-button');
const sendBtn = document.getElementById('send-btn');
const badge = document.getElementById('subscription-status-badge');
badge.style.display = 'inline-block';
if (status === 'paid') {
badge.textContent = 'کاربر ویژه (نامحدود)';
badge.className = 'paid-badge';
creditInfoDiv.style.display = 'none';
upgradeBtn.style.display = 'none';
sendBtn.disabled = false;
if(countdownInterval) clearInterval(countdownInterval);
} else {
badge.textContent = 'کاربر رایگان';
badge.className = 'free-badge';
checkFreeUserCredit();
}
}
 async function checkFreeUserCredit() {
if (!userFingerprint || userSubscriptionStatus === 'paid') return;
const creditInfoDiv = document.getElementById('credit-info');
const upgradeBtn = document.getElementById('upgrade-button');
const sendBtn = document.getElementById('send-btn');
try {
const response = await fetch('/api/check-image-credit', {
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint })
});
const result = await response.json();
creditInfoDiv.style.display = 'block';
if (result.limit_reached) {
sendBtn.disabled = true;
upgradeBtn.style.display = 'block';
startCountdown(result.reset_timestamp);
} else {
sendBtn.disabled = false;
upgradeBtn.style.display = 'none';
if(countdownInterval) clearInterval(countdownInterval);
creditInfoDiv.innerHTML = `شما <b>${result.credits_remaining}</b> اعتبار ساخت تصویر برای امروز دارید.`;
}
} catch (error) {
creditInfoDiv.textContent = "خطا در ارتباط با سیستم اعتبار.";
sendBtn.disabled = true;
}
}
 function startCountdown(resetTimestamp) {
if (countdownInterval) clearInterval(countdownInterval);
const creditInfoDiv = document.getElementById('credit-info');
const updateTimer = () => {
const timeLeft = Math.max(0, resetTimestamp - (Date.now() / 1000));
if (timeLeft === 0) {
clearInterval(countdownInterval);
creditInfoDiv.textContent = 'در حال شارژ اعتبارات...';
setTimeout(checkFreeUserCredit, 2000); return;
}
const h = Math.floor(timeLeft / 3600);
const m = Math.floor((timeLeft % 3600) / 60);
creditInfoDiv.innerHTML = `<span style="color:var(--danger-color)">اعتبار امروز تمام شد.</span> زمان شارژ مجدد: ${h} ساعت و ${m} دقیقه`;
};
updateTimer(); countdownInterval = setInterval(updateTimer, 60000);
}
 window.addEventListener('message', (event) => {
if (event.data?.type === 'USER_DATA_RESPONSE') {
if (event.data.error || !event.data.payload) { updateUIForSubscriptionStatus('free'); return; }
try {
const userObject = JSON.parse(event.data.payload);
updateUIForSubscriptionStatus(isUserPaid(userObject) ? 'paid' : 'free');
} catch (e) { updateUIForSubscriptionStatus('free'); }
}
});
 document.addEventListener('DOMContentLoaded', async () => {
userFingerprint = await getBrowserFingerprint();
parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*');
document.getElementById('upgrade-button').addEventListener('click', () => { parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); });
 initDB().then(() => loadHistory()).catch(e => console.error("Database init error:", e));
 });
 // --- بخش انتخاب‌ها و مدیریت UI افقی ---
 const promptInput = document.getElementById('prompt-input');
 const sendBtn = document.getElementById('send-btn');
 const imageResultContainer = document.getElementById('image-result-container');
 const modelSelector = document.getElementById('model-selector');
 const ratioSelector = document.getElementById('ratio-selector');
 const loraSelectorBtn = document.getElementById('lora-selector-btn');
// المان‌های باکس نمایش استایل
 const selectedStyleBox = document.getElementById('selected-style-box');
 const ssImg = document.getElementById('ss-img');
 const ssTitle = document.getElementById('ss-title');
 const changeStyleBtn = document.getElementById('change-style-btn');
let selectedModelAction = 'generate-flux';
 let selectedModelName = 'Flux Pro';
 let selectedRatio = '1:1';
 let selectedRatioName = '۱:۱ مربع';
 function showLoraModal() {
 let contentHtml = '<div class="lora-grid">';
 allLoras.forEach((lora, index) => {
 const persianName = getPersianLoraName(lora.title);
 contentHtml += `
 <div class="lora-item" onclick="selectLora(${index})">
 <div class="lora-image-wrapper">
 <img class="lora-image" src="${lora.image}" loading="lazy" alt="${lora.title}">
 </div>
 <div class="lora-title-container">
 <div class="lora-title">${lora.title}</div>
 <div class="lora-title-fa">${persianName}</div>
 </div>
 </div>`;
 });
 contentHtml += '</div>';
 createAlphaModal('انتخاب سبک ویژه (LoRA)', contentHtml);
 }
 // عملکرد دکمه تغییر سبک در باکس انتخابی
 changeStyleBtn.addEventListener('click', () => {
 if(isCustomLoraMode) {
 showLoraModal();
 } else {
 modelSelector.scrollIntoView({behavior: "smooth", block: "center"});
 modelSelector.style.border = "2px solid var(--accent-primary)";
 setTimeout(() => modelSelector.style.border = "none", 1000);
 }
 });
 window.selectLora = function(index) {
 const lora = allLoras[index];
 selectedLoraRepo = lora.repo;
 selectedLoraTrigger = lora.trigger;
 selectedModelName = lora.title;
// آپدیت باکس نمایش استایل با متن انگلیسی و فارسی
 ssImg.src = lora.image;
 ssTitle.textContent = lora.title;
 document.getElementById('ss-title-fa').textContent = getPersianLoraName(lora.title);
 selectedStyleBox.style.display = 'flex';
 const loraCardName = loraSelectorBtn.querySelector('.model-name');
 if(loraCardName) loraCardName.textContent = lora.title;
 if(activeModal) {
 activeModal.remove();
 activeModal = null;
 }
 };
 modelSelector.addEventListener('click', (e) => {
 const card = e.target.closest('.model-card');
 if (!card) return;
modelSelector.querySelectorAll('.model-card').forEach(c => c.classList.remove('active'));
 card.classList.add('active');
 selectedModelAction = card.dataset.action;
if (card.id === 'lora-selector-btn') {
 isCustomLoraMode = true;
 showLoraModal();
 } else {
 isCustomLoraMode = false;
 selectedModelName = card.dataset.name;
 selectedLoraRepo = "";
 selectedLoraTrigger = "";
// در مدل‌های پیش‌فرض باکس سبک نمایش داده نمی‌شود
 selectedStyleBox.style.display = 'none';
 const loraCardName = loraSelectorBtn.querySelector('.model-name');
 if(loraCardName) loraCardName.textContent = "مدل‌های ویژه (LoRA)";
 }
 });
 ratioSelector.addEventListener('click', (e) => {
 const btn = e.target.closest('.ratio-btn');
 if (!btn) return;
if (btn.dataset.ratio === 'custom') {
 showCustomSizeModal((w, h) => {
 ratioSelector.querySelectorAll('.ratio-btn').forEach(c => c.classList.remove('active'));
 btn.classList.add('active');
 selectedRatio = 'custom';
 selectedRatioName = `${w}x${h} دلخواه`;
 btn.querySelector('span').textContent = `${w}x${h} دلخواه`;
 });
 } else {
 ratioSelector.querySelectorAll('.ratio-btn').forEach(c => c.classList.remove('active'));
 btn.classList.add('active');
 selectedRatio = btn.dataset.ratio;
 selectedRatioName = btn.dataset.name;
const customBtn = ratioSelector.querySelector('[data-ratio="custom"]');
 if(customBtn) customBtn.querySelector('span').textContent = 'اندازه دلخواه';
 }
 });
 const getDimensions = (ratio) => {
 switch (ratio) {
 case '9:16': return { width: 768, height: 1344 };
 case '16:9': return { width: 1344, height: 768 };
 case 'custom': return { width: userCustomWidth, height: userCustomHeight };
 case '1:1': default: return { width: 1024, height: 1024 };
 }
 };
 window.triggerDownload = function(url) {
 parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: url }, '*');
 };
 // --- توابع نوار پیشرفت ---
 function startFakeProgress(targetSeconds) {
 clearInterval(fakeProgressInterval);
 const pb = document.getElementById('tv-progress-bar');
 if (!pb) return;
 let currentProg = 0;
 const intervalMs = 200;
const increment = 100 / (targetSeconds * 1000 / intervalMs);
pb.style.width = '0%';
 fakeProgressInterval = setInterval(() => {
 currentProg += increment;
 if(currentProg > 98) {
 clearInterval(fakeProgressInterval);
 currentProg = 98;
 }
 pb.style.width = `${currentProg}%`;
 }, intervalMs);
 }
 function finishFakeProgress() {
 clearInterval(fakeProgressInterval);
 const pb = document.getElementById('tv-progress-bar');
 if(pb) pb.style.width = '100%';
 }
 // --- پردازش درخواست ---
 sendBtn.addEventListener('click', async () => {
 const userPrompt = promptInput.value.trim();
 if (!userPrompt) { promptInput.focus(); return; }
 const forbiddenWords = ["sex", "sexy", "porn", "nude", "erotic", "سکس", "سکسی", "پورن", "شهوانی", "برهنه", "لخت"];
 if (forbiddenWords.some(word => userPrompt.toLowerCase().includes(word))) {
 alert("متن ورودی شما حاوی کلمات نامناسب است. لطفاً آن را اصلاح کنید.");
 return;
 }
 if (userSubscriptionStatus !== 'paid') {
 try {
 const response = await fetch('/api/check-image-credit', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fingerprint: userFingerprint })
});
 const result = await response.json();
 if (result.limit_reached) {
 updateUIForSubscriptionStatus('free');
 alert("محدودیت ساخت عکس امروز شما به پایان رسیده است.");
 return;
 }
 } catch (err) { alert("عدم ارتباط با سیستم اعتبار."); return; }
 }
let dims = getDimensions(selectedRatio);
 let sendWidth = dims.width;
 // تشخیص ارسال با مدل‌های ویژه با استفاده از ترفند Width
 if (isCustomLoraMode) {
 if(!selectedLoraRepo) {
 alert("لطفاً از طریق دکمه مدل‌های ویژه، یک لورا (سبک) را انتخاب کنید.");
 return;
 }
 // تزریق نام مخزن و کلمه کلیدی در عرض تصویر به وسیله کاراکتر |
 sendWidth = `${dims.width}|${selectedLoraRepo}|${selectedLoraTrigger}`;
 }
 // پاک کردن تایمرهای اجرای قبلی در صورت وجود (درخواست جدید)
 if (activePollTimer) clearInterval(activePollTimer);
 if (activeTimeoutTimer) clearTimeout(activeTimeoutTimer);
 sendBtn.disabled = true;
 promptInput.disabled = true;
 sendBtn.innerHTML = `در حال پردازش تصویر...`;
// نمایش لودر پیشرفته
 imageResultContainer.innerHTML = `
 <div class="generator-container">
 <div class="noise-layer"></div>
 <div class="sketch-layer"></div>
 <div class="building-layer"></div>
 <div class="pixel-grid"></div>
 <div class="particles"></div>
 <div class="text-overlay">در حال پردازش و خلق تصویر...</div>
 <div class="progress-bar" id="tv-progress-bar"></div>
 </div>
 `;
 // راه‌اندازی تایمر هشدار 2 دقیقه‌ای (120000 میلی‌ثانیه)
 activeTimeoutTimer = setTimeout(() => {
 if (isResultProcessed) return;
const tvContainer = document.querySelector('.generator-container');
 if (tvContainer) {
 let warnDiv = document.getElementById('timeout-warning-msg');
 if (!warnDiv) {
 warnDiv = document.createElement('div');
 warnDiv.id = 'timeout-warning-msg';
 warnDiv.style.cssText = "color: var(--danger-color); font-size: 0.95rem; font-weight: 700; text-align: center; margin-top: 15px; padding: 12px; background: rgba(229, 62, 62, 0.1); border-radius: 12px; border: 1px solid rgba(229, 62, 62, 0.3); width: 100%; max-width: 400px; animation: fadeIn 0.5s; line-height: 1.6;";
 tvContainer.parentNode.insertBefore(warnDiv, tvContainer.nextSibling);
 }
if (selectedRatio === 'custom') {
 warnDiv.innerHTML = '⏳ پردازش تصویر با اندازه دلخواه بیش از حد طولانی شد.<br>ممکن است اندازه وارد شده نامعتبر باشد یا سرور شلوغ است.<br>می‌توانید اندازه را تغییر داده و مجدداً تلاش کنید.';
 } else {
 warnDiv.innerHTML = '⏳ پردازش تصویر بیش از حد طولانی شد.<br>ممکن است سرور شلوغ باشد. می‌توانید چند لحظه دیگه صبر کنید یا مجدداً تلاش کنید.';
 }
// آزاد کردن دکمه بدون قطع کردن فرآیند ساخت قبلی
 sendBtn.disabled = false;
 promptInput.disabled = false;
 sendBtn.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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> تلاش مجدد`;
 }
 }, 150000);
 // راه‌اندازی تایمر پیشرفت
 const targetSeconds = selectedModelAction === 'generate-flux' ? 40 : 50;
 startFakeProgress(targetSeconds);
 isResultProcessed = false;
const currentModelName = selectedModelName;
 const currentRatioName = selectedRatioName;
let finalPrompt = userPrompt;
 try {
 const res = await fetch('/api/generate', {
 method: 'POST',
 headers: {'Content-Type': 'application/json'},
 body: JSON.stringify({
prompt: finalPrompt,
 width: sendWidth,
height: dims.height,
 action_name: selectedModelAction
})
 });
const data = await res.json();
if (data.status === 'success') {
 activePollTimer = setInterval(async () => {
 try {
 const statusRes = await fetch(`/api/status/${data.run_id}`);
 const statusData = await statusRes.json();
if (statusData.status === 'ready' && !isResultProcessed) {
 isResultProcessed = true;
 clearInterval(activePollTimer);
 clearTimeout(activeTimeoutTimer);
 finishFakeProgress();
if (userSubscriptionStatus === 'free') {
try {
await fetch('/api/use-image-credit', {
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint })
});
checkFreeUserCredit();
} catch (e) { console.error("Error using credit", e); }
}
 const absoluteUrl = window.location.origin + statusData.url;
 imageResultContainer.innerHTML = `
 <div style="font-weight: bold; margin-bottom: 5px; color: var(--accent-primary); text-align:center;">تصویر شما آماده شد! امیدوارم لذت ببرید. 🎨</div>
 <div class="generated-image-box">
 <img src="${statusData.url}" alt="تصویر تولید شده توسط هوش مصنوعی" onload="this.scrollIntoView({behavior: 'smooth', block: 'center'})">
<div class="image-meta">
 <span>
 <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="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
 ${currentModelName}
 </span>
 <span>|</span>
 <span dir="ltr">
 <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" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
 ${currentRatioName}
 </span>
 </div>
 <button class="download-btn" onclick="triggerDownload('${absoluteUrl}')">
 <svg width="22" height="22" 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"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
 دانلود مستقیم تصویر
 </button>
 </div>
 `;
 // ذخیره فایل عکس در IndexedDB
 try {
 const imgRes = await fetch(statusData.url);
 if(imgRes.ok) {
 const blob = await imgRes.blob();
 await saveToHistory(blob, finalPrompt, currentModelName, currentRatioName);
 }
 } catch(e) {
 console.error('Failed to save history', e);
 }
sendBtn.disabled = false;
 promptInput.disabled = false;
 sendBtn.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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> ساخت تصویر جادویی`;
 }
 } catch(e) { console.error('Polling error', e); }
 }, 3500);
 } else {
 clearInterval(fakeProgressInterval);
 clearTimeout(activeTimeoutTimer);
 imageResultContainer.innerHTML = `<div style="color: var(--danger-color); font-weight:bold; text-align:center;">خطا: متاسفانه در ارسال درخواست به سرور مشکلی پیش آمد.</div>`;
 sendBtn.disabled = false; promptInput.disabled = false;
 sendBtn.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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> ساخت تصویر جادویی`;
 }
 } catch (e) {
 clearInterval(fakeProgressInterval);
 clearTimeout(activeTimeoutTimer);
 imageResultContainer.innerHTML = `<div style="color: var(--danger-color); font-weight:bold; text-align:center;">خطا در برقراری ارتباط با سرور.</div>`;
 sendBtn.disabled = false; promptInput.disabled = false;
 sendBtn.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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> ساخت تصویر جادویی`;
 }
 });
 // --- بخش کمک‌یار پرامپت ---
 const promptHelperBtn = document.getElementById('promptHelperBtn');
 let activeModal = null; let currentPromptListPage = 1; const promptsPageSize = 10;
const promptsData = { "lighting": [{"text": "Cinematic lighting", "translation": "نورپردازی سینمایی"}, {"text": "Soft lighting", "translation": "نورپردازی نرم"}, {"text": "Softbox lighting", "translation": "نورپردازی با سافت‌باکس"}, {"text": "Bright lighting", "translation": "نورپردازی روشن"}, {"text": "Ambient lighting", "translation": "نورپردازی محیطی"}, {"text": "Silhouetted", "translation": "سایه‌دار"}, {"text": "Flat lighting", "translation": "نورپردازی تخت"}, {"text": "Backlit Volumetric lighting", "translation": "نورپردازی حجمی پس‌زمینه"}], "special_lighting": [{"text": "Neon", "translation": "نئون"}, {"text": "Holographic", "translation": "هولوگرافیک"}, {"text": "Glow", "translation": "تابان"}, {"text": "Bioluminescent", "translation": "زیست‌تاب"}, {"text": "Rimlight", "translation": "نور حاشیه‌ای"}, {"text": "Silhouetted", "translation": "سایه‌دار"}], "details_quality": [{"text": "Ultra photoreal", "translation": "فوق‌العاده واقع‌گرایانه"}, {"text": "Intricate details", "translation": "جزئیات پیچیده"}, {"text": "Photorealistic", "translation": "فوتورئالیستی"}, {"text": "Hyper detailed", "translation": "بسیار جزئیات‌دار"}, {"text": "Ultra detailed", "translation": "فوق‌العاده جزئیات‌دار"}, {"text": "Extremely detailed", "translation": "بسیار پرجزئیات"}, {"text": "4K", "translation": "4K"}, {"text": "8K", "translation": "8K"}, {"text": "Super resolution", "translation": "وضوح فوق‌العاده"}, {"text": "High resolution", "translation": "وضوح بالا"}], "punk": [{"text": "Steampunk", "translation": "استیم‌پانک"}, {"text": "Cloudpunk", "translation": "کلودپانک"}, {"text": "Cyberpunk", "translation": "سایبرپانک"}, {"text": "Forestpunk", "translation": "فورست‌پانک"}, {"text": "Decopunk", "translation": "دکوپانک"}, {"text": "Atompunk", "translation": "اتم‌پانک"}, {"text": "Dieselpunk", "translation": "دیزل‌پانک"}, {"text": "Biopunk", "translation": "بیوپانک"}, {"text": "Dinopunk", "translation": "دینوپانک"}, {"text": "Cassettepunk", "translation": "کاست‌پانک"}, {"text": "Dollupunk", "translation": "دالاپانک"}, {"text": "Catholicpunk", "translation": "کاتولیک‌پانک"}, {"text": "Clockpunk", "translation": "کلاک‌پانک"}], "landscape": [{"text": "Surreal landscape", "translation": "منظره سورئال"}, {"text": "Unreal landscape", "translation": "منظره غیرواقعی"}, {"text": "Fantasy landscape", "translation": "منظره فانتزی"}, {"text": "Sci-fi landscape", "translation": "منظره علمی-تخیلی"}, {"text": "Desert landscape", "translation": "منظره بیابانی"}, {"text": "Tropical paradise", "translation": "بهشت گرمسیری"}, {"text": "Rainforest scenery", "translation": "منظره جنگل بارانی"}, {"text": "Expansive mountain range", "translation": "زنجیره کوهستانی گسترده"}], "colors": [{"text": "Retro colors", "translation": "رنگ‌های رترو"}, {"text": "Vivid colors", "translation": "رنگ‌های زنده"}, {"text": "Pastel colors", "translation": "رنگ‌های پاستلی"}, {"text": "Neon colors", "translation": "رنگ‌های نئونی"}, {"text": "Earthy tones", "translation": "رنگ‌های خاکی"}, {"text": "Primary colors", "translation": "رنگ‌های اصلی"}, {"text": "Monochromatic colors", "translation": "رنگ‌های تک‌رنگ"}, {"text": "Jewel tones", "translation": "رنگ‌های جواهری"}], "artist_style": [{"text": "in the style of Leonardo da Vinci", "translation": "به سبک لئوناردو داوینچی"}, {"text": "in the style of Michelangelo", "translation": "به سبک میکل‌آنجلو"}, {"text": "in the style of Rembrandt", "translation": "به سبک رامبراند"}, {"text": "in the style of Vermeer", "translation": "به سبک ورمیر"}, {"text": "in the style of Claude Monet", "translation": "به سبک کلود مونه"}, {"text": "in the style of Vincent van Gogh", "translation": "به سبک ونسان ون گوگ"}, {"text": "in the style of Pablo Picasso", "translation": "به سبک پابلو پیکاسو"}, {"text": "in the style of Salvador Dalí", "translation": "به سبک سالوادور دالی"}, {"text": "in the style of Andy Warhol", "translation": "به سبک اندی وارهول"}, {"text": "in the style of Frida Kahlo", "translation": "به سبک فریدا کالو"}], "iranian_art_identity": [{"text": "Persian Carpet Weaving style", "translation": "سبک قالی‌بافی ایرانی"}, {"text": "Persian Tilework style", "translation": "سبک کاشی‌کاری ایرانی"}, {"text": "Persian Miniature Painting style", "translation": "سبک نگارگری ایرانی"}, {"text": "Persian Calligraphy style", "translation": "سبک خوشنویسی ایرانی"}, {"text": "Traditional Persian Textiles", "translation": "منسوجات سنتی ایرانی"}, {"text": "Persian Woodcarving (Monabatkari)", "translation": "منبت‌کاری ایرانی"}, {"text": "Persian Mirrorwork (Aine-kari)", "translation": "آینه‌کاری ایرانی"}, {"text": "Termeh Weaving style", "translation": "سبک بافت ترمه"}, {"text": "Qajar art style", "translation": "سبک هنر قاجار"}], "iranian_set_design": [{"text": "Modern Tehran vibe", "translation": "حال و هوای مدرن تهران"}, {"text": "Esfahan architectural vibe", "translation": "حال و هوای معماری اصفهان"}, {"text": "Shiraz garden atmosphere", "translation": "فضای باغ شیراز"}, {"text": "Yazd desert city look", "translation": "نمای شهر کویری یزد"}, {"text": "Traditional Persian house interior", "translation": "فضای داخلی خانه سنتی ایرانی"}, {"text": "Persian empire aesthetic", "translation": "زیبایی‌شناسی امپراتوری پارس"}, {"text": "Sassanian art influence", "translation": "تحت تأثیر هنر ساسانی"}] };
 const promptCategoryNames = { "lighting": "نورپردازی 💡", "special_lighting": "نورپردازی خاص ✨", "details_quality": "جزئیات و کیفیت 🔍", "punk": "سبک‌های پانک 🎸", "landscape": "منظره 🌄", "colors": "رنگ‌ها 🎨", "artist_style": "به سبک هنرمندان 🖌️", "iranian_art_identity": "هویت هنری ایرانی 🏺", "iranian_set_design": "فضاسازی ایرانی 🏙️" };
function createAlphaModal(title, bodyHtml, footerButtons = []) { if (activeModal) activeModal.remove(); const backdrop = document.createElement('div'); backdrop.className = 'alpha-modal-backdrop'; const modalContent = document.createElement('div'); modalContent.className = 'alpha-modal-content'; modalContent.innerHTML = `<div class="alpha-modal-header"><h2>${title}</h2><button class="alpha-modal-close-btn">×</button></div><div class="alpha-modal-body">${bodyHtml}</div>`; if (footerButtons.length > 0) { const footer = document.createElement('div'); footer.className = 'alpha-modal-footer'; footerButtons.forEach(btnConfig => { const button = document.createElement('button'); button.textContent = btnConfig.text; button.className = 'modal-action-button'; button.onclick = (e) => { e.preventDefault(); btnConfig.onclick(); }; footer.appendChild(button); }); modalContent.appendChild(footer); } backdrop.appendChild(modalContent); document.body.appendChild(backdrop); activeModal = backdrop; backdrop.querySelector('.alpha-modal-close-btn').onclick = () => activeModal.remove(); backdrop.onclick = (e) => { if (e.target === backdrop) activeModal.remove(); }; return modalContent; }
function insertPromptIntoTextarea(text) { const currentValue = promptInput.value.trim(); promptInput.value = currentValue === '' ? text : `${currentValue}, ${text}`; promptInput.focus(); if (activeModal) { activeModal.remove(); activeModal = null; } }
function showPromptCategoriesNotification() { let contentHtml = ''; for (const categoryKey in promptCategoryNames) { contentHtml += `<div class="prompt-category-item" data-category-key="${categoryKey}">${promptCategoryNames[categoryKey]}</div>`; } const modalElement = createAlphaModal('دسته‌بندی پرامپت‌ها', contentHtml); modalElement.querySelectorAll('.prompt-category-item').forEach(item => { item.addEventListener('click', function() { showPromptListNotification(this.dataset.categoryKey); }); }); }
function showPromptListNotification(categoryKey) { currentPromptListPage = 1; const prompts = promptsData[categoryKey]; const categoryName = promptCategoryNames[categoryKey].replace(/<[^>]*>/g, ''); const totalPages = Math.ceil(prompts.length / promptsPageSize); const renderPage = () => { let listHtml = ''; const start = (currentPromptListPage - 1) * promptsPageSize; const end = start + promptsPageSize; prompts.slice(start, end).forEach(prompt => { listHtml += `<div class="prompt-item" data-prompt-text="${prompt.text}"><div class="prompt-text-container"><div class="prompt-text">${prompt.text}</div><div class="persian-translation">${prompt.translation}</div></div></div>`; }); let paginationHtml = ''; if (totalPages > 1) { paginationHtml = `<div class="pagination-container"><button class="pagination-button" id="prevPageBtn" ${currentPromptListPage === 1 ? 'disabled' : ''}> قبلی </button><span class="page-info">${currentPromptListPage} از ${totalPages}</span><button class="pagination-button" id="nextPageBtn" ${currentPromptListPage === totalPages ? 'disabled' : ''}> بعدی </button></div>`; } return listHtml + paginationHtml; }; const modalElement = createAlphaModal(`پرامپت‌های ${categoryName}`, renderPage(), [{ text: 'بازگشت به دسته‌بندی‌ها', onclick: showPromptCategoriesNotification }]); const updateAndRebind = () => { modalElement.querySelector('.alpha-modal-body').innerHTML = renderPage(); bindListEvents(); }; const bindListEvents = () => { modalElement.querySelectorAll('.prompt-item').forEach(item => { item.onclick = () => insertPromptIntoTextarea(item.dataset.promptText); }); const prevBtn = modalElement.querySelector('#prevPageBtn'); const nextBtn = modalElement.querySelector('#nextPageBtn'); if (prevBtn) prevBtn.onclick = () => { if (currentPromptListPage > 1) { currentPromptListPage--; updateAndRebind(); }}; if (nextBtn) nextBtn.onclick = () => { if (currentPromptListPage < totalPages) { currentPromptListPage++; updateAndRebind(); }}; }; bindListEvents(); }
 promptHelperBtn.addEventListener('click', (e) => { e.preventDefault(); showPromptCategoriesNotification(); });
 // انیمیشن شبکه عصبی هدر
 document.addEventListener('DOMContentLoaded', () => {
 const canvas = document.getElementById('neural-network-canvas');
 if(!canvas) return; const header = canvas.parentElement; const ctx = canvas.getContext('2d');
 let particles = []; const particleCount = 20; const maxDistance = 100;
 const particleColor = '#4A6CFA'; const lineColor = '#8A94A6';
 function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); }
 class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } }
 function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } }
 function connectParticles() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; }
 function animate() { if(!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); }
 window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate();
 });
 </script>
</body>
</html>