Spaces:

Elias207
/

imageediting

Running

App Files Files Community

Elias207 commited on Aug 23, 2025

Commit

25f2444

verified ·

1 Parent(s): 0a41c97

Update index.html

Browse files

Files changed (1) hide show

index.html +133 -27

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>فتوشاپ هوش مصنوعی</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -195,14 +195,29 @@
             position: relative;
             background-color: var(--drop-zone-bg);
             overflow: hidden;
         }
-        #result-image {
-            max-width: 100%;
-            max-height: 400px;
             border-radius: 0.75rem;
-            object-fit: contain;
-            display: none;
         }
         .spinner {
@@ -227,6 +242,64 @@
             display: none;
             font-weight: 500;
         }
         @media (max-width: 800px) {
             .editor-grid {
@@ -265,7 +338,7 @@
                     <h2>۲. نتیجه را مشاهده کنید</h2>
                     <div id="result-container">
                         <div class="spinner" id="loader"></div>
-                        <img id="result-image" src="#" alt="تصویر ویرایش شده" />
                     </div>
                 </div>
             </div>
@@ -279,6 +352,17 @@
         </main>
     </div>
     <script>
         // API Endpoint from the provided chatbot code
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
@@ -290,9 +374,14 @@
         const dropZoneText = document.getElementById('drop-zone-text');
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
-        const resultImage = document.getElementById('result-image');
         const loader = document.getElementById('loader');
         const errorMessage = document.getElementById('error-message');
         let uploadedFile = null;
@@ -301,12 +390,9 @@
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => {
             const file = e.target.files[0];
-            if (file) {
-                handleFile(file);
-            }
         });
-        // Drag and Drop events
         dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('dragover');
@@ -320,9 +406,7 @@
             e.preventDefault();
             dropZone.classList.remove('dragover');
             const file = e.dataTransfer.files[0];
-            if (file) {
-                handleFile(file);
-            }
         });
         function handleFile(file) {
@@ -357,10 +441,8 @@
                 return;
             }
-            // Start loading state
             setLoading(true);
-            // Create FormData to send to the API
             const formData = new FormData();
             formData.append('image', uploadedFile);
             formData.append('prompt', prompt);
@@ -378,10 +460,10 @@
                 const result = await response.json();
-                if (result.image_urls && result.image_urls.length > 0) {
-                    displayResult(result.image_urls[0]);
                 } else {
-                    throw new Error('پاسخ معتبری از سرور دریافت نشد.');
                 }
             } catch (error) {
@@ -398,7 +480,7 @@
                 loader.style.display = 'block';
                 submitBtn.disabled = true;
                 submitBtn.textContent = 'در حال پردازش...';
-                resultImage.style.display = 'none';
                 errorMessage.style.display = 'none';
             } else {
                 loader.style.display = 'none';
@@ -407,14 +489,19 @@
             }
         }
-        function displayResult(imageUrl) {
-            resultImage.src = imageUrl;
-            resultImage.style.display = 'block';
         }
         function clearResult() {
-            resultImage.src = '#';
-            resultImage.style.display = 'none';
             errorMessage.style.display = 'none';
         }
@@ -422,6 +509,25 @@
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
         }
     </script>
 </body>

 <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&display=swap" rel="stylesheet">
     <style>
         :root {
             position: relative;
             background-color: var(--drop-zone-bg);
             overflow: hidden;
+            padding: 0.5rem;
         }
+        #result-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 0.5rem;
+            width: 100%;
+            height: 100%;
+        }
+        #result-grid img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
             border-radius: 0.75rem;
+            cursor: pointer;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        #result-grid img:hover {
+            transform: scale(1.05);
+            box-shadow: 0 5px 15px var(--shadow-color);
         }
         .spinner {
             display: none;
             font-weight: 500;
         }
+        /* Lightbox Styles */
+        #lightbox {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.85);
+            z-index: 1000;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+            box-sizing: border-box;
+            backdrop-filter: blur(5px);
+        }
+        #lightbox-content {
+             position: relative;
+             max-width: 80vw;
+             max-height: 90vh;
+        }
+        #lightbox-img {
+            max-width: 100%;
+            max-height: 90vh;
+            object-fit: contain;
+            border-radius: 1rem;
+        }
+        #lightbox-close, #lightbox-download {
+            position: absolute;
+            top: -40px;
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: none;
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 1.5rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: background-color 0.2s;
+        }
+        #lightbox-close {
+            left: 10px;
+        }
+        #lightbox-download {
+            right: 10px;
+        }
+        #lightbox-close:hover, #lightbox-download:hover {
+            background-color: rgba(255, 255, 255, 0.4);
+        }
         @media (max-width: 800px) {
             .editor-grid {
                     <h2>۲. نتیجه را مشاهده کنید</h2>
                     <div id="result-container">
                         <div class="spinner" id="loader"></div>
+                        <div id="result-grid"></div>
                     </div>
                 </div>
             </div>
         </main>
     </div>
+    <!-- Lightbox Structure -->
+    <div id="lightbox">
+        <div id="lightbox-content">
+             <img id="lightbox-img" src="">
+             <button id="lightbox-close">&times;</button>
+             <a id="lightbox-download" href="#" download="edited-image.png" title="دانلود تصویر">
+                 <svg fill="white" width="20px" height="20px" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+             </a>
+        </div>
+    </div>
     <script>
         // API Endpoint from the provided chatbot code
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         const dropZoneText = document.getElementById('drop-zone-text');
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
+        const resultGrid = document.getElementById('result-grid');
         const loader = document.getElementById('loader');
         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');
         let uploadedFile = null;
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => {
             const file = e.target.files[0];
+            if (file) handleFile(file);
         });
         dropZone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropZone.classList.add('dragover');
             e.preventDefault();
             dropZone.classList.remove('dragover');
             const file = e.dataTransfer.files[0];
+            if (file) handleFile(file);
         });
         function handleFile(file) {
                 return;
             }
             setLoading(true);
             const formData = new FormData();
             formData.append('image', uploadedFile);
             formData.append('prompt', prompt);
                 const result = await response.json();
+                if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) {
+                    displayResult(result.image_urls);
                 } else {
+                    throw new Error('پاسخ معتبری از سرور دریافت نشد. ممکن است سرور موقتا با مشکل مواجه شده باشد.');
                 }
             } catch (error) {
                 loader.style.display = 'block';
                 submitBtn.disabled = true;
                 submitBtn.textContent = 'در حال پردازش...';
+                resultGrid.innerHTML = '';
                 errorMessage.style.display = 'none';
             } else {
                 loader.style.display = 'none';
             }
         }
+        function displayResult(imageUrls) {
+            resultGrid.innerHTML = ''; // Clear previous results
+            imageUrls.forEach(url => {
+                const img = document.createElement('img');
+                img.src = url;
+                img.alt = 'تصویر ویرایش شده';
+                img.addEventListener('click', () => openLightbox(url));
+                resultGrid.appendChild(img);
+            });
         }
         function clearResult() {
+            resultGrid.innerHTML = '';
             errorMessage.style.display = 'none';
         }
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
         }
+        // --- Lightbox Functions ---
+        function openLightbox(url) {
+            lightboxImg.src = url;
+            lightboxDownload.href = url; // Set simple download link
+            lightbox.style.display = 'flex';
+        }
+        function closeLightbox() {
+            lightbox.style.display = 'none';
+        }
+        lightboxClose.addEventListener('click', closeLightbox);
+        lightbox.addEventListener('click', (e) => {
+            if (e.target === lightbox) { // Close if clicked on the background
+                closeLightbox();
+            }
+        });
     </script>
 </body>