Update index.html

index.html

@@ -231,13 +231,15 @@
             justify-content: center;
             margin: 0 auto 0.75rem;
         }
-        .ratio-icon > div {
+        .ratio-icon > div, .ratio-icon > svg {
             background-color: var(--panel-bg);
             border: 2px solid var(--text-tertiary);
             border-radius: 6px;
             transition: var(--transition-smooth);
+            box-sizing: border-box;
         }
-        .ratio-option.active .ratio-icon > div {
+        .ratio-option.active .ratio-icon > div,
+        .ratio-option.active .ratio-icon > svg {
             border-color: var(--accent-primary);
             background-color: var(--accent-primary-glow);
         }
@@ -252,7 +254,10 @@
         #icon-portrait > div { width: 28px; height: 50px; }
         #icon-landscape > div { width: 60px; height: 34px; }
         #icon-square > div { width: 45px; height: 45px; }
-        #icon-classic > div { width: 55px; height: 41px; }
+        #icon-custom > svg { width: 45px; height: 45px; padding: 8px; color: var(--text-tertiary); }
+        .ratio-option.active #icon-custom > svg { color: var(--accent-primary); }
+        .custom-ratio-value { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; height: 1em; }
+
 
         #submit-btn {
             display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.1rem;
@@ -288,7 +293,7 @@
         
         .output-details { display: none !important; }
 
-        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; justify-content: center; align-items: center; z-index: 1000; }
+        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; justify-content: center; align-items: center; z-index: 1000; animation: fadeIn 0.3s ease; }
         .modal-content { 
             background: var(--panel-bg); 
             padding: 2rem 1rem;
@@ -301,7 +306,6 @@
             position: relative; 
             box-shadow: var(--shadow-xl); 
             border: 1px solid var(--panel-border); 
-            animation: fadeIn 0.3s ease; 
         }
         .modal-header { display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--panel-border); padding-bottom: 1rem; margin-bottom: 1.5rem; position: relative; min-height: 50px;}
         .modal-header h2 { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }
@@ -315,12 +319,10 @@
             gap: 1rem; 
             padding: 10px;
         }
-
-        /* <<< START: روش جدید و سازگار برای ساخت مربع >>> */
         .lora-card {
-            position: relative; /* ایجاد موقعیت برای عکس داخلی */
+            position: relative;
             height: 0;
-            padding-bottom: 100%; /* این باعث می‌شود ارتفاع کارت برابر با عرض آن (مربع) شود */
+            padding-bottom: 100%;
             border-radius: var(--radius-input);
             overflow: hidden;
             cursor: pointer;
@@ -328,9 +330,8 @@
             background-color: var(--input-bg);
             border: 1px solid transparent;
             box-shadow: var(--shadow-sm);
-            -webkit-user-select: none; /* Safari */
-            -ms-user-select: none; /* IE 10+ */
-            user-select: none; /* Standard syntax */
+            -webkit-user-select: none;
+            user-select: none;
         }
 
         .lora-card:hover {
@@ -340,17 +341,15 @@
         }
 
         .lora-card img {
-            position: absolute; /* عکس را داخل کادر مربع قرار می‌دهد */
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
-            height: 100%; /* عکس کل فضای مربع را پر می‌کند */
+            height: 100%;
             object-fit: cover;
             transition: opacity 0.3s ease-in-out;
             opacity: 0;
         }
-        /* <<< END: روش جدید و سازگار برای ساخت مربع >>> */
-
         .lora-card img.loaded {
             opacity: 1;
         }
@@ -421,6 +420,17 @@
             font-weight: 500;
         }
 
+        .modal-content-small { background: var(--panel-bg); padding: 2rem; border-radius: var(--radius-card); max-width: 350px; width: 90%; text-align: center; box-shadow: var(--shadow-xl); position: relative; }
+        .modal-content-small h3 { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; color: var(--text-primary); }
+        .modal-content-small .input-group { margin-bottom: 1rem; text-align: right; }
+        .modal-content-small label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-secondary); font-size: 0.9rem; }
+        .modal-content-small input { width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); }
+        .modal-content-small input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
+        #confirm-custom-size-btn { width: 100%; padding: 0.9rem; margin-top: 1rem; font-size: 1rem; font-weight: 700; background-color: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: var(--transition-smooth); }
+        #confirm-custom-size-btn:hover { background-color: var(--accent-primary-hover); }
+        #close-custom-modal-btn { position: absolute; top: 10px; left: 10px; background: transparent; border: none; font-size: 2rem; cursor: pointer; color: var(--text-tertiary); line-height: 1; padding: 0.5rem; }
+
+
         @media (max-width: 768px) {
             main { padding: 1.5rem; } h1 { font-size: 2.2rem; }
             .aspect-ratio-selector { grid-template-columns: repeat(2, 1fr); }
@@ -473,9 +483,19 @@
                         <div class="ratio-icon" id="icon-landscape"><div></div></div>
                         <div class="ratio-label">افقی ۱۶:۹</div>
                     </div>
-                    <div class="ratio-option" data-ratio="4:3">
-                        <div class="ratio-icon" id="icon-classic"><div></div></div>
-                        <div class="ratio-label">کلاسیک ۴:۳</div>
+                    <div class="ratio-option" data-ratio="custom">
+                        <div class="ratio-icon" id="icon-custom">
+                            <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 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8"/>
+                                <circle cx="18" cy="18" r="3"/>
+                                <path d="M18 15v-2"/><path d="M18 21v-2"/>
+                                <path d="M15 18h-2"/><path d="M21 18h-2"/>
+                            </svg>
+                        </div>
+                        <div class="ratio-label">
+                            اندازه دلخواه
+                            <div class="custom-ratio-value" id="custom-ratio-label-value"></div>
+                        </div>
                     </div>
                     <div class="ratio-option active" data-ratio="1:1">
                         <div class="ratio-icon" id="icon-square"><div></div></div>
@@ -513,6 +533,24 @@
             <div id="lora-grid"></div>
         </div>
     </div>
+    
+    <!-- Modal for Custom Size -->
+    <div class="modal-overlay" id="custom-size-modal">
+        <div class="modal-content-small">
+            <button id="close-custom-modal-btn">&times;</button>
+            <h3>تنظیم اندازه دلخواه</h3>
+            <div class="input-group">
+                <label for="custom-width-input">عرض (Width)</label>
+                <input type="number" id="custom-width-input" value="1024" min="512" max="1536" step="8" placeholder="بین ۵۱۲ تا ۱۵۳۶">
+            </div>
+            <div class="input-group">
+                <label for="custom-height-input">طول (Height)</label>
+                <input type="number" id="custom-height-input" value="1024" min="512" max="1536" step="8" placeholder="بین ۵۱۲ تا ۱۵۳۶">
+            </div>
+            <button id="confirm-custom-size-btn">تایید و اعمال</button>
+        </div>
+    </div>
+
 
     <script type="module">
         import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
@@ -2247,9 +2285,18 @@
         const originalModalTitleHTML = modalTitle.innerHTML;
         let longPressTimer = null;
         let longPressJustHappened = false;
+        
+        const customSizeModal = document.getElementById('custom-size-modal');
+        const closeCustomModalBtn = document.getElementById('close-custom-modal-btn');
+        const confirmCustomSizeBtn = document.getElementById('confirm-custom-size-btn');
+        const customWidthInput = document.getElementById('custom-width-input');
+        const customHeightInput = document.getElementById('custom-height-input');
+        const customRatioLabel = document.getElementById('custom-ratio-label-value');
 
         let selectedLora = null;
         let selectedRatio = '1:1';
+        let customWidth = 1024;
+        let customHeight = 1024;
         let imageObserver = null;
         let fluxClient = null;
         let countdownInterval = null;
@@ -2501,10 +2548,12 @@
                 
                 setLoadingState(true, 'در حال پردازش...'); 
                 const getDimensions = (ratio) => {
+                    if (ratio === 'custom') {
+                        return { width: customWidth, height: customHeight };
+                    }
                     switch (ratio) {
-                        case '9:16': return { width: 720, height: 1280 };
-                        case '16:9': return { width: 1280, height: 720 };
-                        case '4:3':  return { width: 1152, height: 864 };
+                        case '9:16': return { width: 768, height: 1344 };
+                        case '16:9': return { width: 1344, height: 768 };
                         default:     return { width: 1024, height: 1024 };
                     }
                 };
@@ -2621,9 +2670,50 @@
         ratioSelector.addEventListener('click', (event) => {
             const selectedOption = event.target.closest('.ratio-option');
             if (!selectedOption) return;
+            const ratioValue = selectedOption.dataset.ratio;
+
+            if (ratioValue === 'custom') {
+                customSizeModal.style.display = 'flex';
+            } else {
+                ratioSelector.querySelectorAll('.ratio-option').forEach(opt => opt.classList.remove('active'));
+                selectedOption.classList.add('active');
+                selectedRatio = ratioValue;
+            }
+        });
+        
+        closeCustomModalBtn.addEventListener('click', () => {
+            customSizeModal.style.display = 'none';
+        });
+
+        customSizeModal.addEventListener('click', (event) => {
+            if (event.target === customSizeModal) {
+                customSizeModal.style.display = 'none';
+            }
+        });
+
+        confirmCustomSizeBtn.addEventListener('click', () => {
+            const width = parseInt(customWidthInput.value, 10);
+            const height = parseInt(customHeightInput.value, 10);
+
+            if (isNaN(width) || isNaN(height) || width < 512 || height < 512 || width > 1536 || height > 1536) {
+                alert('مقادیر عرض و طول باید بین ۵۱۲ و ۱۵۳۶ پیکسل باشند.');
+                return;
+            }
+            
+            if (width % 8 !== 0 || height % 8 !== 0) {
+                alert('مقادیر عرض و طول باید بر ۸ بخش‌پذیر باشند.');
+                return;
+            }
+            
+            customWidth = width;
+            customHeight = height;
+            selectedRatio = 'custom';
+            
             ratioSelector.querySelectorAll('.ratio-option').forEach(opt => opt.classList.remove('active'));
-            selectedOption.classList.add('active');
-            selectedRatio = selectedOption.dataset.ratio;
+            document.querySelector('.ratio-option[data-ratio="custom"]').classList.add('active');
+            
+            customRatioLabel.textContent = `${width} x ${height}`;
+            customSizeModal.style.display = 'none';
         });
 
         clearResult();