Update templates/image_studio.html

templates/image_studio.html

@@ -155,7 +155,12 @@
         .upgrade-btn:hover { transform: translateY(-3px); }
 
         /* Result Area */
-        #image-result-container { display: none; 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; }
+        #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); }
         
@@ -236,7 +241,7 @@
         .danger-btn:hover { background: var(--danger-color); color: #fff; }
         
         .history-grid {
-            display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px;
+            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);
@@ -246,7 +251,7 @@
             transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--text-tertiary);
         }
         .history-item img {
-            width: 100%; height: 160px; object-fit: cover; cursor: pointer; border-bottom: 1px solid var(--input-border);
+            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;
@@ -288,7 +293,9 @@
             .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; }
         }
     </style>
 </head>
@@ -388,7 +395,10 @@
 
             <!-- 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 -->
@@ -773,7 +783,6 @@
             sendBtn.innerHTML = `<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: spin-border 1.5s linear infinite;"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg> در حال خلق تصویر...`;
             
             // نمایش لودر پیشرفته
-            imageResultContainer.style.display = 'flex';
             imageResultContainer.innerHTML = `
                 <div class="generator-container">
                     <div class="noise-layer"></div>