imageeditingpro

Running

App Files Files Community

Elias207 commited on Aug 29, 2025

Commit

760160a

verified ·

1 Parent(s): 9845856

Update index.html

Browse files

Files changed (1) hide show

index.html +122 -11

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Photoshop Pro</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -257,9 +257,9 @@
             100% { width: 100%; }
         }
-        #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
         #result-container.has-content #result-grid { display: grid; }
-        #result-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
         #result-grid img:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); z-index: 10; position: relative; }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
@@ -272,20 +272,19 @@
         #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: var(--text-secondary); grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); }
         .history-item { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1rem; transition: var(--transition-smooth); }
         .history-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
-        .history-item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
         .history-item-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--panel-border); }
         .history-item-grid img:hover { transform: scale(1.1); box-shadow: var(--shadow-md); z-index: 5; position: relative; }
         .history-delete-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: var(--transition-smooth); z-index: 5; }
         .history-delete-btn:hover { background-color: var(--panel-border); color: var(--danger-color); }
         .history-delete-btn svg { width: 18px; height: 18px; }
-        /* --- FIX: Corrected Lightbox CSS --- */
         #lightbox {
             position: fixed;
             inset: 0;
             background-color: rgba(18, 24, 38, 0.6);
             backdrop-filter: blur(10px) saturate(150%);
-            display: flex; /* Changed from none to flex */
             align-items: center;
             justify-content: center;
             z-index: 1000;
@@ -297,8 +296,6 @@
             opacity: 1;
             pointer-events: auto;
         }
-        /* --- END OF FIX --- */
         #lightbox-content { position: relative; animation: fadeIn 0.3s ease; display: flex; align-items: center; justify-content: center; }
         #lightbox-img { max-width: 85vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-card); box-shadow: var(--shadow-xl); }
         .lightbox-btn { position: absolute; background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none; font-size: 24px; }
@@ -443,10 +440,13 @@
     </div>
     <script>
-        // --- START OF APPLICATION LOGIC SCRIPT (No changes needed here) ---
-        const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         const uploadArea = document.getElementById('upload-area'); const fileInput = document.getElementById('file-input'); const previewImage = document.getElementById('preview-image-main'); const removeFileBtn = document.getElementById('remove-file-btn-main'); const promptInput = document.getElementById('prompt-input'); const submitBtn = document.getElementById('submit-btn'); const resultContainer = document.getElementById('result-container'); const resultGrid = document.getElementById('result-grid'); const errorMessage = document.getElementById('error-message'); const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const lightboxClose = document.getElementById('lightbox-close'); const lightboxDownload = document.getElementById('lightbox-download'); const lightboxNext = document.getElementById('lightbox-next'); const historyGrid = document.getElementById('history-grid'); const clearHistoryBtn = document.getElementById('clear-history-btn'); const confirmationModal = document.getElementById('confirmation-modal'); const modalMessageText = document.getElementById('modal-message-text'); const modalConfirmBtn = document.getElementById('modal-confirm-btn'); const modalCancelBtn = document.getElementById('modal-cancel-btn');
         let uploadedFile = null; let currentLightboxUrl = null; let currentLightboxGroup = []; let currentLightboxIndex = 0;
         const convertToPNG = (file) => {
             return new Promise((resolve, reject) => {
                 const image = new Image();
@@ -498,9 +498,120 @@
             clearResult();
         };
         const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; }; const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); modalConfirmBtn.onclick = null; modalCancelBtn.onclick = null; }; const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); }; const checkFormState = () => { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }; const setLoading = (isLoading) => { const btnSpinner = submitBtn.querySelector('.spinner'); const btnText = document.getElementById('btn-text'); const btnIcon = submitBtn.querySelector('svg'); if (isLoading) { resultContainer.classList.remove('has-content'); resultContainer.classList.add('loading'); btnSpinner.style.display = 'inline-block'; btnIcon.style.display = 'none'; btnText.textContent = 'در حال پردازش...'; submitBtn.disabled = true; resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnSpinner.style.display = 'none'; btnIcon.style.display = 'inline-block'; btnText.textContent = 'ایجاد کن'; checkFormState(); } }; const displayResult = (imageUrls) => { resultGrid.innerHTML = ''; imageUrls.forEach((url) => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر ویرایش شده'; img.addEventListener('click', () => openLightbox(url, imageUrls)); resultGrid.appendChild(img); }); resultContainer.classList.add('has-content'); }; const clearResult = () => { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; resultContainer.classList.remove('has-content'); }; const displayError = (message) => { errorMessage.textContent = message; errorMessage.style.display = 'block'; }; const updateLightboxImage = () => { const newUrl = currentLightboxGroup[currentLightboxIndex]; lightboxImg.src = newUrl; currentLightboxUrl = newUrl; }; const openLightbox = (clickedUrl, urlGroup) => { currentLightboxGroup = urlGroup; currentLightboxIndex = urlGroup.indexOf(clickedUrl); updateLightboxImage(); lightboxNext.style.display = urlGroup.length > 1 ? 'flex' : 'none'; lightbox.classList.add('visible'); }; const closeLightbox = () => { lightbox.classList.remove('visible'); currentLightboxGroup = []; }; const handleDownload = async () => { if (!currentLightboxUrl) return; const spinner = lightboxDownload.querySelector('.spinner'); const icon = lightboxDownload.querySelector('svg'); spinner.style.display = 'block'; icon.style.display = 'none'; lightboxDownload.disabled = true; try { const response = await fetch(currentLightboxUrl); if (!response.ok) throw new Error('Network response was not ok.'); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objectUrl; a.download = `ai-edited-image-${Date.now()}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(objectUrl); } catch (e) { console.error('Download failed:', e); alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.'); } finally { spinner.style.display = 'none'; icon.style.display = 'block'; lightboxDownload.disabled = false; } }; const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]'); const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); }; const addToHistory = (item) => { let history = getHistory(); history.unshift(item); if (history.length > 15) history.pop(); saveHistory(history); }; const handleClearHistory = () => { showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => { saveHistory([]); }); }; const handleDeleteItem = (index) => { showConfirmationModal('آیا از حذف این مورد از تاریخچه مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); }); }; const renderHistory = () => { const history = getHistory(); historyGrid.innerHTML = ''; clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none'; history.forEach((item, index) => { const card = document.createElement('div'); card.className = 'history-item'; const deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف این مورد'; deleteBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`; deleteBtn.onclick = () => handleDeleteItem(index); card.appendChild(deleteBtn); const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid'; item.urls.forEach(url => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر از تاریخچه'; img.addEventListener('click', () => openLightbox(url, item.urls)); imageGrid.appendChild(img); }); card.appendChild(imageGrid); historyGrid.appendChild(card); }); };
         document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
         removeFileBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); resetUploader(); }); fileInput.addEventListener('change', (e) => handleFile(e.target.files[0])); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }); }); ['dragenter', 'dragover'].forEach(e => { uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); }); }); ['dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')); }); uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); }); promptInput.addEventListener('input', checkFormState);
-        submitBtn.addEventListener('click', async () => { if (submitBtn.disabled) return; setLoading(true); const formData = new FormData(); formData.append('image', uploadedFile); formData.append('prompt', promptInput.value.trim()); try { const response = await fetch(API_URL, { method: 'POST', body: formData }); if (!response.ok) { const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` })); throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`); } const result = await response.json(); if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) { displayResult(result.image_urls); addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls }); } else { throw new Error('پاسخ معتبری از سرور دریافت نشد.'); } } catch (error) { displayError(error.message); } finally { setLoading(false); } });
         lightboxClose.addEventListener('click', closeLightbox); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); }); lightboxDownload.addEventListener('click', handleDownload); lightboxNext.addEventListener('click', () => { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length; updateLightboxImage(); }); clearHistoryBtn.addEventListener('click', handleClearHistory);
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Photoshop Pro (Nano Banana Edition)</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
             100% { width: 100%; }
         }
+        #result-grid { display: none; grid-template-columns: 1fr; /* Changed for single result */ gap: 1.5rem; width: 100%; justify-items: center; }
         #result-container.has-content #result-grid { display: grid; }
+        #result-grid img { max-width: 100%; max-height: 400px; /* Added for better display */ width: auto; height: auto; object-fit: contain; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
         #result-grid img:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); z-index: 10; position: relative; }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
         #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: var(--text-secondary); grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); }
         .history-item { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1rem; transition: var(--transition-smooth); }
         .history-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
+        .history-item-grid { display: grid; grid-template-columns: 1fr; /* Changed for single result */ gap: 0.75rem; }
         .history-item-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--panel-border); }
         .history-item-grid img:hover { transform: scale(1.1); box-shadow: var(--shadow-md); z-index: 5; position: relative; }
         .history-delete-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: var(--transition-smooth); z-index: 5; }
         .history-delete-btn:hover { background-color: var(--panel-border); color: var(--danger-color); }
         .history-delete-btn svg { width: 18px; height: 18px; }
         #lightbox {
             position: fixed;
             inset: 0;
             background-color: rgba(18, 24, 38, 0.6);
             backdrop-filter: blur(10px) saturate(150%);
+            display: flex;
             align-items: center;
             justify-content: center;
             z-index: 1000;
             opacity: 1;
             pointer-events: auto;
         }
         #lightbox-content { position: relative; animation: fadeIn 0.3s ease; display: flex; align-items: center; justify-content: center; }
         #lightbox-img { max-width: 85vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-card); box-shadow: var(--shadow-xl); }
         .lightbox-btn { position: absolute; background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none; font-size: 24px; }
     </div>
     <script>
+        // --- START OF MODIFIED APPLICATION LOGIC SCRIPT ---
+        const API_BASE_URL = "https://ginigen-nano-banana-video.hf.space/gradio_api/";
         const uploadArea = document.getElementById('upload-area'); const fileInput = document.getElementById('file-input'); const previewImage = document.getElementById('preview-image-main'); const removeFileBtn = document.getElementById('remove-file-btn-main'); const promptInput = document.getElementById('prompt-input'); const submitBtn = document.getElementById('submit-btn'); const resultContainer = document.getElementById('result-container'); const resultGrid = document.getElementById('result-grid'); const errorMessage = document.getElementById('error-message'); const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const lightboxClose = document.getElementById('lightbox-close'); const lightboxDownload = document.getElementById('lightbox-download'); const lightboxNext = document.getElementById('lightbox-next'); const historyGrid = document.getElementById('history-grid'); const clearHistoryBtn = document.getElementById('clear-history-btn'); const confirmationModal = document.getElementById('confirmation-modal'); const modalMessageText = document.getElementById('modal-message-text'); const modalConfirmBtn = document.getElementById('modal-confirm-btn'); const modalCancelBtn = document.getElementById('modal-cancel-btn');
         let uploadedFile = null; let currentLightboxUrl = null; let currentLightboxGroup = []; let currentLightboxIndex = 0;
+        // --- ORIGINAL HELPER FUNCTIONS (UNCHANGED) ---
         const convertToPNG = (file) => {
             return new Promise((resolve, reject) => {
                 const image = new Image();
             clearResult();
         };
         const showConfirmationModal = (message, onConfirm) => { modalMessageText.textContent = message; confirmationModal.classList.add('visible'); modalConfirmBtn.onclick = () => { onConfirm(); hideConfirmationModal(); }; modalCancelBtn.onclick = () => { hideConfirmationModal(); }; }; const hideConfirmationModal = () => { confirmationModal.classList.remove('visible'); modalConfirmBtn.onclick = null; modalCancelBtn.onclick = null; }; const resetUploader = () => { uploadedFile = null; fileInput.value = ''; previewImage.src = ''; uploadArea.classList.remove('has-file'); checkFormState(); }; const checkFormState = () => { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }; const setLoading = (isLoading) => { const btnSpinner = submitBtn.querySelector('.spinner'); const btnText = document.getElementById('btn-text'); const btnIcon = submitBtn.querySelector('svg'); if (isLoading) { resultContainer.classList.remove('has-content'); resultContainer.classList.add('loading'); btnSpinner.style.display = 'inline-block'; btnIcon.style.display = 'none'; btnText.textContent = 'در حال پردازش...'; submitBtn.disabled = true; resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnSpinner.style.display = 'none'; btnIcon.style.display = 'inline-block'; btnText.textContent = 'ایجاد کن'; checkFormState(); } }; const displayResult = (imageUrls) => { resultGrid.innerHTML = ''; imageUrls.forEach((url) => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر ویرایش شده'; img.addEventListener('click', () => openLightbox(url, imageUrls)); resultGrid.appendChild(img); }); resultContainer.classList.add('has-content'); }; const clearResult = () => { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; resultContainer.classList.remove('has-content'); }; const displayError = (message) => { errorMessage.textContent = message; errorMessage.style.display = 'block'; }; const updateLightboxImage = () => { const newUrl = currentLightboxGroup[currentLightboxIndex]; lightboxImg.src = newUrl; currentLightboxUrl = newUrl; }; const openLightbox = (clickedUrl, urlGroup) => { currentLightboxGroup = urlGroup; currentLightboxIndex = urlGroup.indexOf(clickedUrl); updateLightboxImage(); lightboxNext.style.display = urlGroup.length > 1 ? 'flex' : 'none'; lightbox.classList.add('visible'); }; const closeLightbox = () => { lightbox.classList.remove('visible'); currentLightboxGroup = []; }; const handleDownload = async () => { if (!currentLightboxUrl) return; const spinner = lightboxDownload.querySelector('.spinner'); const icon = lightboxDownload.querySelector('svg'); spinner.style.display = 'block'; icon.style.display = 'none'; lightboxDownload.disabled = true; try { const response = await fetch(currentLightboxUrl); if (!response.ok) throw new Error('Network response was not ok.'); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = objectUrl; a.download = `ai-edited-image-${Date.now()}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(objectUrl); } catch (e) { console.error('Download failed:', e); alert('خطا در دانلود تصویر. لطفا دوباره تلاش کنید.'); } finally { spinner.style.display = 'none'; icon.style.display = 'block'; lightboxDownload.disabled = false; } }; const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]'); const saveHistory = (history) => { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); }; const addToHistory = (item) => { let history = getHistory(); history.unshift(item); if (history.length > 15) history.pop(); saveHistory(history); }; const handleClearHistory = () => { showConfirmationModal('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟ این عمل غیرقابل بازگشت است.', () => { saveHistory([]); }); }; const handleDeleteItem = (index) => { showConfirmationModal('آیا از حذف این مورد از تاریخچه مطمئن هستید؟', () => { let history = getHistory(); history.splice(index, 1); saveHistory(history); }); }; const renderHistory = () => { const history = getHistory(); historyGrid.innerHTML = ''; clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none'; history.forEach((item, index) => { const card = document.createElement('div'); card.className = 'history-item'; const deleteBtn = document.createElement('button'); deleteBtn.className = 'history-delete-btn'; deleteBtn.title = 'حذف این مورد'; deleteBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`; deleteBtn.onclick = () => handleDeleteItem(index); card.appendChild(deleteBtn); const imageGrid = document.createElement('div'); imageGrid.className = 'history-item-grid'; item.urls.forEach(url => { const img = document.createElement('img'); img.src = url; img.alt = 'تصویر از تاریخچه'; img.addEventListener('click', () => openLightbox(url, item.urls)); imageGrid.appendChild(img); }); card.appendChild(imageGrid); historyGrid.appendChild(card); }); };
+        // --- NEW GRADIO API HELPER FUNCTIONS ---
+        async function uploadFileToGradio(file) {
+            const formData = new FormData();
+            formData.append('files', file);
+            const response = await fetch(`${API_BASE_URL}upload`, { method: 'POST', body: formData });
+            if (!response.ok) throw new Error(`خطای سرور در آپلود: ${response.statusText}`);
+            const result = await response.json();
+            return result[0];
+        }
+        async function submitGradioJob(prompt, file, filePath, sessionHash) {
+            const payload = {
+                "data": [
+                    prompt,
+                    {
+                        "path": filePath, "url": `${API_BASE_URL}file=${filePath}`,
+                        "orig_name": file.name, "size": file.size, "mime_type": file.type,
+                        "meta": { "_type": "gradio.FileData" }
+                    },
+                    null
+                ],
+                "event_data": null, "fn_index": 0, "session_hash": sessionHash
+            };
+            const response = await fetch(`${API_BASE_URL}queue/join`, {
+                method: 'POST', headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            if (!response.ok) throw new Error(`خطای سرور در ارسال جاب: ${response.statusText}`);
+        }
+        function listenForGradioResults(sessionHash) {
+            const eventSource = new EventSource(`${API_BASE_URL}queue/data?session_hash=${sessionHash}`);
+            const textOverlay = document.querySelector('.text-overlay');
+            eventSource.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                console.log('Received data:', JSON.stringify(data, null, 2));
+                switch (data.msg) {
+                    case 'process_starts':
+                        if (textOverlay) textOverlay.innerText = 'پردازش در سرور شروع شد...';
+                        break;
+                    case 'process_generating':
+                        if (textOverlay) textOverlay.innerText = 'در حال ساخت تصویر...';
+                        break;
+                    case 'process_completed':
+                        if (data.success === false && data.output && data.output.error) {
+                            throw new Error(`خطا از سمت سرور: ${data.output.error}`);
+                        }
+                        if (data.output && data.output.data && data.output.data[0]) {
+                            const resultData = data.output.data[0];
+                            let resultUrl;
+                            if (resultData.url) {
+                                resultUrl = resultData.url;
+                            } else if (resultData.path) {
+                                resultUrl = `${API_BASE_URL}file=${resultData.path}`;
+                            }
+                            if (resultUrl) {
+                                displayResult([resultUrl]); // displayResult expects an array
+                                addToHistory({ prompt: promptInput.value.trim(), urls: [resultUrl] });
+                            } else {
+                                throw new Error('نتیجه دریافت شد اما لینک تصویر معتبر نبود.');
+                            }
+                        } else {
+                            throw new Error('نتیجه دریافت شد اما ساختار داده غیرمنتظره بود.');
+                        }
+                        eventSource.close();
+                        setLoading(false);
+                        break;
+                }
+            };
+            eventSource.onerror = function(err) {
+                console.error('EventSource failed:', err);
+                displayError('خطا در ارتباط با سرور. لطفاً دوباره تلاش کنید.');
+                eventSource.close();
+                setLoading(false);
+            };
+        }
+        // --- EVENT LISTENERS ---
         document.addEventListener('DOMContentLoaded', () => { renderHistory(); checkFormState(); });
         removeFileBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); resetUploader(); }); fileInput.addEventListener('change', (e) => handleFile(e.target.files[0])); ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }); }); ['dragenter', 'dragover'].forEach(e => { uploadArea.addEventListener(e, () => { if (!uploadArea.classList.contains('has-file')) uploadArea.classList.add('drag-over'); }); }); ['dragleave', 'drop'].forEach(e => { uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')); }); uploadArea.addEventListener('drop', e => { if (!uploadArea.classList.contains('has-file')) handleFile(e.dataTransfer.files[0]); }); promptInput.addEventListener('input', checkFormState);
+        // --- MODIFIED SUBMIT BUTTON LOGIC ---
+        submitBtn.addEventListener('click', async () => {
+            if (submitBtn.disabled) return;
+            setLoading(true);
+            try {
+                const sessionHash = Math.random().toString(36).substring(7);
+                const textOverlay = document.querySelector('.text-overlay');
+                if (textOverlay) textOverlay.innerText = '۱/۳: آپلود تصویر...';
+                const uploadedFilePath = await uploadFileToGradio(uploadedFile);
+                if (!uploadedFilePath) throw new Error("آپلود فایل ناموفق بود.");
+                if (textOverlay) textOverlay.innerText = '۲/۳: ارسال درخواست...';
+                await submitGradioJob(promptInput.value.trim(), uploadedFile, uploadedFilePath, sessionHash);
+                if (textOverlay) textOverlay.innerText = '۳/۳: منتظر نتیجه...';
+                listenForGradioResults(sessionHash);
+            } catch (error) {
+                console.error('An error occurred:', error);
+                displayError(error.message);
+                setLoading(false); // Make sure to stop loading on initial error
+            }
+        });
         lightboxClose.addEventListener('click', closeLightbox); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); }); lightboxDownload.addEventListener('click', handleDownload); lightboxNext.addEventListener('click', () => { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxGroup.length; updateLightboxImage(); }); clearHistoryBtn.addEventListener('click', handleClearHistory);
     </script>