Update templates/editor.html

templates/editor.html

@@ -65,33 +65,27 @@
         .form-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.2em; margin-bottom: 1.2rem; }
         .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
         
-        /* Refactored Upload Area */
-        .upload-area { position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2.5rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; width: 100%; }
-        #upload-area-1 { min-height: 200px; }
-        .upload-area-secondary { min-height: 120px; padding: 1.5rem; }
-        
-        .upload-area.drag-over, .upload-area:hover:not(.has-file) { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); }
-        .upload-area.has-file { border-style: solid; border-color: var(--panel-border); padding: 0; cursor: default; }
-        
-        .upload-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
-        .upload-area-secondary .upload-content { gap: 0.5rem; }
-        
-        .upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; }
-        .upload-area-secondary .upload-icon svg { width: 28px; height: 28px; }
-        
-        .upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
-        .upload-area-secondary p { font-size: 0.85rem; }
-        
-        .preview-image { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; }
-        .remove-file-btn { display: none; position: absolute; top: 12px; right: 12px; background-color: rgba(26, 32, 44, 0.6); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; z-index: 10; transition: var(--transition-smooth); padding: 0; }
-        .upload-area-secondary .remove-file-btn { width: 24px; height: 24px; font-size: 0.9rem; top: 8px; right: 8px; }
-        .remove-file-btn:hover { background-color: var(--danger-color); transform: scale(1.1); }
-        
-        .upload-area.has-file .upload-content { display: none; }
-        .upload-area.has-file .preview-image, .upload-area.has-file .remove-file-btn { display: block; }
-        
-        .secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
+        /* Upload Area */
+        #upload-area { position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2.5rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
+        #upload-area.drag-over, #upload-area:hover:not(.has-file) { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); }
+        #upload-area.has-file { border-style: solid; border-color: var(--panel-border); padding: 0; cursor: default; }
+        #upload-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+        #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; }
+        #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
+        #preview-image-main { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; }
+        #remove-file-btn-main { display: none; position: absolute; top: 12px; right: 12px; background-color: rgba(26, 32, 44, 0.6); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; z-index: 10; transition: var(--transition-smooth); padding: 0; }
+        #remove-file-btn-main:hover { background-color: var(--danger-color); transform: scale(1.1); }
+        #upload-area.has-file #upload-content { display: none; }
+        #upload-area.has-file #preview-image-main, #upload-area.has-file #remove-file-btn-main { display: block; }
         
+        /* Multi-preview Grid CSS */
+        #multi-preview-grid { display: none; width: 100%; height: 100%; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; padding: 15px; box-sizing: border-box; align-items: center; justify-content: center; z-index: 5; }
+        #upload-area.has-multiple-files #multi-preview-grid { display: grid; }
+        #upload-area.has-multiple-files #preview-image-main { display: none !important; }
+        .preview-thumb-wrapper { position: relative; width: 100%; height: 140px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); overflow: hidden; background: #000; box-shadow: var(--shadow-sm); }
+        .preview-thumb-wrapper img { width: 100%; height: 100%; object-fit: contain; }
+        .preview-thumb-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(26, 32, 44, 0.85); color: white; padding: 3px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; font-family: var(--app-font); pointer-events: none; }
+
         /* Textarea & Buttons */
         textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 2px 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: 1.05rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 120px; resize: vertical; }
         textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-primary-glow); background-color: #fff; }
@@ -189,7 +183,6 @@
             .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;}
-            .secondary-grid { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -208,42 +201,18 @@
              <div class="form-group">
                 <div class="form-label">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
-                    ۱. تصاویر خود را انتخاب کنید
+                    ۱. تصویر خود را انتخاب کنید (تا ۳ تصویر)
                 </div>
-                
-                <!-- Main Image 1 -->
-                <label class="upload-area" id="upload-area-1" for="file-input-1">
-                    <div class="upload-content">
-                        <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
-                        <p>تصویر اصلی را اینجا بکشید یا برای انتخاب کلیک کنید (الزامی)</p>
+                <label id="upload-area" for="file-input">
+                    <div id="upload-content">
+                        <div id="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
+                        <p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید (حداکثر ۳ تصویر)</p>
                     </div>
-                    <img id="preview-image-1" class="preview-image" src="" alt="Preview">
-                    <button type="button" id="remove-file-btn-1" class="remove-file-btn" title="حذف تصویر">&times;</button>
+                    <img id="preview-image-main" src="" alt="Preview">
+                    <div id="multi-preview-grid"></div>
+                    <button type="button" id="remove-file-btn-main" title="حذف تصویر">&times;</button>
                 </label>
-                <input type="file" id="file-input-1" accept="image/png, image/jpeg, image/webp" hidden>
-
-                <!-- Optional Images -->
-                <div class="secondary-grid">
-                    <label class="upload-area upload-area-secondary" id="upload-area-2" for="file-input-2">
-                        <div class="upload-content">
-                            <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
-                            <p>تصویر دوم (اختیاری)</p>
-                        </div>
-                        <img id="preview-image-2" class="preview-image" src="" alt="Preview">
-                        <button type="button" id="remove-file-btn-2" class="remove-file-btn" title="حذف تصویر">&times;</button>
-                    </label>
-                    <input type="file" id="file-input-2" accept="image/png, image/jpeg, image/webp" hidden>
-
-                    <label class="upload-area upload-area-secondary" id="upload-area-3" for="file-input-3">
-                        <div class="upload-content">
-                            <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div>
-                            <p>تصویر سوم (اختیاری)</p>
-                        </div>
-                        <img id="preview-image-3" class="preview-image" src="" alt="Preview">
-                        <button type="button" id="remove-file-btn-3" class="remove-file-btn" title="حذف تصویر">&times;</button>
-                    </label>
-                    <input type="file" id="file-input-3" accept="image/png, image/jpeg, image/webp" hidden>
-                </div>
+                <input type="file" id="file-input" accept="image/png, image/jpeg, image/webp" multiple hidden>
             </div>
             
             <div class="form-group">
@@ -251,7 +220,7 @@
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
                     ۲. دستور ویرایش را بنویسید
                 </label>
-                <textarea id="prompt-input" placeholder="مثال: گل در عکس اول را به دست مجسمه در عکس دوم منتقل کن..."></textarea>
+                <textarea id="prompt-input" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
                 
                 <div id="credit-info" class="credit-info">درحال بررسی اعتبار...</div>
                 <button id="upgrade-button" class="upgrade-btn">⭐️ ارتقا به نسخه نامحدود</button>
@@ -354,32 +323,44 @@
             });
         }
 
-        // توابع ذخیره و خواندن تصاویر کاربر
-        function saveInputImage(blob, index) {
+        // توابع ذخیره و خواندن تصاویر کاربر (پشتیبانی از چندین تصویر)
+        function saveInputImages(blobs) {
             return new Promise((resolve, reject) => {
                 if (!db) return resolve();
                 const tx = db.transaction([inputStore], 'readwrite');
-                tx.objectStore(inputStore).put({ id: 'current_input_' + index, blob: blob });
+                tx.objectStore(inputStore).put({ id: 'current_inputs', blobs: blobs });
                 tx.oncomplete = () => resolve();
                 tx.onerror = () => reject();
             });
         }
 
-        function getInputImage(index) {
+        function getInputImages() {
             return new Promise((resolve) => {
-                if (!db) return resolve(null);
+                if (!db) return resolve([]);
                 const tx = db.transaction([inputStore], 'readonly');
-                const req = tx.objectStore(inputStore).get('current_input_' + index);
-                req.onsuccess = () => resolve(req.result ? req.result.blob : null);
-                req.onerror = () => resolve(null);
+                const req = tx.objectStore(inputStore).get('current_inputs');
+                req.onsuccess = () => {
+                    if (req.result && req.result.blobs) {
+                        resolve(req.result.blobs);
+                    } else {
+                        // در صورت نبودن، تلاش برای خواندن دیتای تک عکسی قدیمی
+                        const reqOld = tx.objectStore(inputStore).get('current_input');
+                        reqOld.onsuccess = () => {
+                            resolve(reqOld.result ? [reqOld.result.blob] : []);
+                        };
+                        reqOld.onerror = () => resolve([]);
+                    }
+                };
+                req.onerror = () => resolve([]);
             });
         }
 
-        function clearInputImage(index) {
+        function clearInputImages() {
             return new Promise((resolve) => {
                 if (!db) return resolve();
                 const tx = db.transaction([inputStore], 'readwrite');
-                tx.objectStore(inputStore).delete('current_input_' + index);
+                tx.objectStore(inputStore).delete('current_inputs');
+                tx.objectStore(inputStore).delete('current_input');
                 tx.oncomplete = () => resolve();
             });
         }
@@ -498,7 +479,6 @@
             });
         });
 
-        // نمایش عکس بزرگ همراه با نوار ابزار در زیر آن 
         window.viewHistoryImage = function(url, promptText) {
             const modal = document.createElement('div');
             modal.className = 'image-view-modal';
@@ -677,62 +657,90 @@
         };
 
         // --- مدیریت آپلود و متغیرها ---
+        const uploadArea = document.getElementById('upload-area');
+        const fileInput = document.getElementById('file-input');
+        const previewImage = document.getElementById('preview-image-main');
+        const multiPreviewGrid = document.getElementById('multi-preview-grid');
+        const removeFileBtn = document.getElementById('remove-file-btn-main');
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
         const imageResultContainer = document.getElementById('image-result-container');
         
-        let files = [null, null, null];
+        let uploadedFiles = [];
         let activePollTimer = null;
         let activeTimeoutTimer = null;
         let fakeProgressInterval = null;
         let isResultProcessed = false;
 
-        async function handleFileSelection(file, index) {
-            if (!file || !file.type.startsWith('image/')) {
-                if(file) alert('لطفاً یک تصویر معتبر انتخاب کنید.');
+        // تابع اختصاصی پیش‌نمایش عکس‌ها
+        function renderPreviews() {
+            multiPreviewGrid.innerHTML = '';
+            
+            if (uploadedFiles.length === 0) {
+                uploadArea.classList.remove('has-file');
+                uploadArea.classList.remove('has-multiple-files');
+                previewImage.src = '';
                 return;
             }
-            files[index] = file;
-            await saveInputImage(file, index + 1); // دیتابیس با شماره 1, 2, 3 ذخیره میکند
             
-            const reader = new FileReader();
-            const preview = document.getElementById(`preview-image-${index+1}`);
-            const area = document.getElementById(`upload-area-${index+1}`);
+            uploadArea.classList.add('has-file');
             
-            reader.onload = (e) => { preview.src = e.target.result; };
-            reader.readAsDataURL(file);
-            area.classList.add('has-file');
-            checkFormState();
+            if (uploadedFiles.length === 1) {
+                uploadArea.classList.remove('has-multiple-files');
+                const reader = new FileReader();
+                reader.onload = (e) => { previewImage.src = e.target.result; };
+                reader.readAsDataURL(uploadedFiles[0]);
+            } else {
+                uploadArea.classList.add('has-multiple-files');
+                uploadedFiles.forEach((file, index) => {
+                    const wrapper = document.createElement('div');
+                    wrapper.className = 'preview-thumb-wrapper';
+                    
+                    const img = document.createElement('img');
+                    const reader = new FileReader();
+                    reader.onload = (e) => { img.src = e.target.result; };
+                    reader.readAsDataURL(file);
+                    
+                    const badge = document.createElement('div');
+                    badge.className = 'preview-thumb-badge';
+                    badge.textContent = `تصویر ${index + 1}`;
+                    
+                    wrapper.appendChild(img);
+                    wrapper.appendChild(badge);
+                    multiPreviewGrid.appendChild(wrapper);
+                });
+            }
         }
 
-        async function removeFile(index, e) {
-            if(e) { e.preventDefault(); e.stopPropagation(); }
-            files[index] = null;
-            document.getElementById(`file-input-${index+1}`).value = '';
-            document.getElementById(`preview-image-${index+1}`).src = '';
-            document.getElementById(`upload-area-${index+1}`).classList.remove('has-file');
-            await clearInputImage(index + 1);
+        async function handleFiles(files) {
+            if (!files || files.length === 0) return;
+            const validFiles = Array.from(files).filter(file => file.type.startsWith('image/')).slice(0, 3);
+            if (validFiles.length === 0) return alert('لطفاً حداقل یک تصویر معتبر انتخاب کنید.');
+            
+            uploadedFiles = validFiles;
+            await saveInputImages(validFiles);
+            renderPreviews();
             checkFormState();
         }
 
-        // تنظیم Event Listener ها برای هر 3 باکس
-        for (let i = 0; i < 3; i++) {
-            const idx = i;
-            const fileInput = document.getElementById(`file-input-${idx+1}`);
-            const uploadArea = document.getElementById(`upload-area-${idx+1}`);
-            const removeBtn = document.getElementById(`remove-file-btn-${idx+1}`);
-
-            fileInput.onchange = (e) => handleFileSelection(e.target.files[0], idx);
-            uploadArea.ondragover = (e) => { e.preventDefault(); uploadArea.classList.add('drag-over'); };
-            uploadArea.ondragleave = () => uploadArea.classList.remove('drag-over');
-            uploadArea.ondrop = (e) => { e.preventDefault(); uploadArea.classList.remove('drag-over'); handleFileSelection(e.dataTransfer.files[0], idx); };
-            removeBtn.onclick = (e) => removeFile(idx, e);
-        }
+        removeFileBtn.onclick = async (e) => {
+            e.preventDefault(); e.stopPropagation();
+            uploadedFiles = []; fileInput.value = ''; previewImage.src = '';
+            uploadArea.classList.remove('has-file');
+            uploadArea.classList.remove('has-multiple-files');
+            multiPreviewGrid.innerHTML = '';
+            await clearInputImages();
+            checkFormState();
+        };
+
+        fileInput.onchange = (e) => handleFiles(e.target.files);
+        uploadArea.ondragover = (e) => { e.preventDefault(); uploadArea.classList.add('drag-over'); };
+        uploadArea.ondragleave = () => uploadArea.classList.remove('drag-over');
+        uploadArea.ondrop = (e) => { e.preventDefault(); uploadArea.classList.remove('drag-over'); handleFiles(e.dataTransfer.files); };
         
         function checkFormState() {
             let limitReached = (userSubscriptionStatus === 'free' && freeCreditRemaining === 0);
-            // فقط عکس اول (files[0]) الزامی است
-            submitBtn.disabled = limitReached || !(files[0] && promptInput.value.trim() !== '');
+            submitBtn.disabled = limitReached || !(uploadedFiles.length > 0 && promptInput.value.trim() !== '');
         }
         promptInput.oninput = checkFormState;
 
@@ -762,6 +770,27 @@
             if(pb) pb.style.width = '100%';
         }
 
+        // متد مستقیم آپلود تصویر دوم و سوم به کادر موقت گرادیو
+        async function uploadGradioFile(file) {
+            if (!file) return "";
+            const API_BASE = "https://selfit-camera-omni-image-editor.hf.space";
+            const formData = new FormData();
+            formData.append("files", file);
+
+            try {
+                const res = await fetch(`${API_BASE}/gradio_api/upload`, {
+                    method: "POST",
+                    body: formData
+                });
+                if (!res.ok) throw new Error(`HTTP ${res.status}`);
+                const paths = await res.json();
+                return paths[0];
+            } catch (error) {
+                console.error("Helper upload failed:", error);
+                throw error;
+            }
+        }
+
         // --- ارسال درخواست به سرور ---
         submitBtn.onclick = async () => {
             if (userSubscriptionStatus !== 'paid') {
@@ -822,13 +851,29 @@
             isResultProcessed = false;
 
             const formData = new FormData();
-            // برای سازگاری با بک اند شما عکس اول همان 'image' می‌ماند.
-            if(files[0]) formData.append('image', files[0]);
-            if(files[1]) formData.append('image2', files[1]);
-            if(files[2]) formData.append('image3', files[2]);
-            formData.append('prompt', originalPrompt);
 
             try {
+                let finalPrompt = originalPrompt;
+                
+                // در صورتی که بیش از ۱ تصویر وجود داشته باشد
+                if (uploadedFiles.length > 1) {
+                    const loadingText = document.getElementById('loading-text');
+                    if (loadingText) loadingText.textContent = "در حال آپلود و هماهنگ‌سازی تصاویر کمکی...";
+                    
+                    // آپلود فایل‌ها به سرور برای دریافت مسیرهای Gradio
+                    const p1 = uploadGradioFile(uploadedFiles[0]);
+                    const p2 = uploadGradioFile(uploadedFiles[1]);
+                    const p3 = uploadedFiles[2] ? uploadGradioFile(uploadedFiles[2]) : Promise.resolve("");
+                    
+                    const [path1, path2, path3] = await Promise.all([p1, p2, p3]);
+                    
+                    // قرار دادن ساختار مسیرها در کادر پیام مخفی شده برای رانر بک‌اند پایتون
+                    finalPrompt = `${originalPrompt}\n---OMNI_MULTI---${path1},${path2},${path3}`;
+                }
+
+                formData.append('image', uploadedFiles[0]);
+                formData.append('prompt', finalPrompt);
+
                 const res = await fetch('/api/edit', {
                     method: 'POST',
                     body: formData
@@ -888,7 +933,7 @@
                     displayError('خطا در ارتباط با گیت‌هاب سرور.');
                 }
             } catch (e) {
-                displayError('خطای اتصال به سرور!');
+                displayError('خطای اتصال به سرور یا آپلود تصاویر به سرور کمکی!');
             }
         };
 
@@ -915,18 +960,13 @@
             try {
                 await initDB();
                 
-                // بازیابی تصاویر کاربر در صورت رفرش صفحه
-                for (let i = 0; i < 3; i++) {
-                    const savedInput = await getInputImage(i + 1);
-                    if (savedInput) {
-                        files[i] = savedInput;
-                        const reader = new FileReader();
-                        reader.onload = (e) => { document.getElementById(`preview-image-${i+1}`).src = e.target.result; };
-                        reader.readAsDataURL(savedInput);
-                        document.getElementById(`upload-area-${i+1}`).classList.add('has-file');
-                    }
+                const savedInputs = await getInputImages();
+                if (savedInputs && savedInputs.length > 0) {
+                    uploadedFiles = savedInputs;
+                    renderPreviews();
+                    checkFormState();
                 }
-                checkFormState();
+
                 await loadHistory();
             } catch (e) {
                 console.error(e);