Update index.html

index.html

@@ -29,46 +29,241 @@
             flex-direction: column;
         }
 
-        .header { text-align: center; padding: 20px 0 30px; }
-        .logo { font-size: 3rem; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
-        .title { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; }
-        .subtitle { font-size: 0.9rem; opacity: 0.8; }
-
-        .tabs { display: flex; background: rgba(255,255,255,0.15); border-radius: 15px; padding: 5px; margin-bottom: 20px; backdrop-filter: blur(10px); }
-        .tab { flex: 1; padding: 12px; text-align: center; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; font-size: 0.9rem; }
-        .tab.active { background: rgba(255,255,255,0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
-
-        .card { background: rgba(255,255,255,0.2); border-radius: 20px; padding: 25px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.1); flex: 1; display: none; flex-direction: column; }
-        .tab-content.active { display: flex; }
-
-        .form-group { margin-bottom: 20px; }
-        .label { display: block; margin-bottom: 8px; font-size: 0.9rem; opacity: 0.9; font-weight: 500; }
-        .input { width: 100%; padding: 15px; border: none; border-radius: 12px; background: rgba(255,255,255,0.9); color: #333; font-size: 1rem; min-height: 100px; resize: vertical; outline: none; transition: all 0.3s ease; }
-        .input:focus { background: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
-        .input::placeholder { color: #666; }
-
-        .file-upload { position: relative; background: rgba(255,255,255,0.9); border: 2px dashed #667eea; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
-        .file-upload.has-preview { padding: 5px; border-style: solid; }
-        .file-upload:hover { background: white; transform: translateY(-2px); }
-        .file-upload input { position: absolute; left: -9999px; }
-        .file-upload img { max-width: 100%; max-height: 120px; height: auto; border-radius: 8px; object-fit: contain; }
-        .upload-icon { font-size: 2.5rem; margin-bottom: 10px; color: #667eea; }
-        .upload-text { color: #333; font-size: 0.9rem; font-weight: 500; }
-
-        .btn { width: 100%; padding: 16px; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; margin-top: auto; margin-bottom: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
-        .btn-generate, .btn-read { background: linear-gradient(45deg, #00d2d3, #54a0ff); color: white; box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4); }
-        .btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
-        .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
-        .btn:active { transform: translateY(0); }
-
-        .result { flex: 1; background: rgba(255,255,255,0.15); border-radius: 12px; padding: 20px; min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; backdrop-filter: blur(5px); margin-bottom: 20px; }
-        .result-empty { opacity: 0.7; font-style: italic; }
-        .result img { max-width: 100%; height: auto; border-radius: 8px; background: white; padding: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); animation: zoomIn 0.4s ease; }
+        .header {
+            text-align: center;
+            padding: 20px 0 30px;
+        }
+
+        .logo {
+            font-size: 3rem;
+            margin-bottom: 10px;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
+        }
+
+        .title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+
+        .subtitle {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+
+        .tabs {
+            display: flex;
+            background: rgba(255,255,255,0.15);
+            border-radius: 15px;
+            padding: 5px;
+            margin-bottom: 20px;
+            backdrop-filter: blur(10px);
+        }
+
+        .tab {
+            flex: 1;
+            padding: 12px;
+            text-align: center;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 500;
+            font-size: 0.9rem;
+        }
+
+        .tab.active {
+            background: rgba(255,255,255,0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+
+        .card {
+            background: rgba(255,255,255,0.2);
+            border-radius: 20px;
+            padding: 25px;
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255,255,255,0.3);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            flex: 1;
+            display: none;
+            flex-direction: column;
+        }
+
+        .tab-content.active {
+            display: flex;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            opacity: 0.9;
+            font-weight: 500;
+        }
+
+        .input {
+            width: 100%;
+            padding: 15px;
+            border: none;
+            border-radius: 12px;
+            background: rgba(255,255,255,0.9);
+            color: #333;
+            font-size: 1rem;
+            min-height: 100px;
+            resize: vertical;
+            outline: none;
+            transition: all 0.3s ease;
+        }
+
+        .input:focus {
+            background: white;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+        }
+
+        .input::placeholder {
+            color: #666;
+        }
+
+        .file-upload {
+            position: relative;
+            background: rgba(255,255,255,0.9);
+            border: 2px dashed #667eea;
+            border-radius: 12px;
+            padding: 30px 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            min-height: 140px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
         
-        .result-text-wrapper { width: 100%; background: rgba(255,255,255,0.2); border-radius: 8px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; animation: slideUp 0.4s ease; }
-        .result-text { flex-grow: 1; margin-left: 10px; word-break: break-all; line-height: 1.5; text-align: right; }
+        .file-upload.has-preview {
+            padding: 5px;
+            border-style: solid;
+        }
+
+        .file-upload:hover {
+            background: white;
+            transform: translateY(-2px);
+        }
+
+        .file-upload input {
+            position: absolute;
+            left: -9999px;
+        }
+
+        .file-upload img {
+            max-width: 100%;
+            max-height: 120px;
+            height: auto;
+            border-radius: 8px;
+            object-fit: contain;
+        }
+
+        .upload-icon {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            color: #667eea;
+        }
+
+        .upload-text {
+            color: #333;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 16px;
+            border: none;
+            border-radius: 12px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            margin-top: auto;
+            margin-bottom: 20px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-generate, .btn-read {
+            background: linear-gradient(45deg, #00d2d3, #54a0ff);
+            color: white;
+            box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4);
+        }
+
+        .btn:hover:not(:disabled) {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .btn:active {
+            transform: translateY(0);
+        }
+
+        .result {
+            flex: 1;
+            background: rgba(255,255,255,0.15);
+            border-radius: 12px;
+            padding: 20px;
+            min-height: 150px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            backdrop-filter: blur(5px);
+            margin-bottom: 20px;
+        }
+
+        .result-empty {
+            opacity: 0.7;
+            font-style: italic;
+        }
+
+        .result img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8px;
+            background: white;
+            padding: 10px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            animation: zoomIn 0.4s ease;
+        }
+
+        .result-text-wrapper {
+            width: 100%;
+            background: rgba(255,255,255,0.2);
+            border-radius: 8px;
+            padding: 10px 15px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            animation: slideUp 0.4s ease;
+        }
+        .result-text {
+            flex-grow: 1;
+            margin-left: 10px;
+            word-break: break-all;
+            line-height: 1.5;
+            text-align: right;
+        }
         
-        /* ===== CHANGE HERE: New styles for the copy button animation ===== */
+        /* ===== CHANGE HERE: Styles for the copy button and its animation ===== */
         .copy-btn {
             background: #fff;
             color: #54a0ff;
@@ -78,43 +273,37 @@
             font-family: 'Vazirmatn', sans-serif;
             font-weight: 600;
             cursor: pointer;
-            transition: background-color 0.3s ease, color 0.3s ease;
+            transition: all 0.3s ease; /* Smooth transition for all properties */
             flex-shrink: 0;
-            position: relative;
-            overflow: hidden;
-            min-width: 50px; /* Ensure button has width */
+            font-size: 0.9rem;
         }
-        .copy-btn .copy-btn-text {
-            transition: opacity 0.2s ease;
-        }
-        .copy-btn::after {
-            content: '✓';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%) scale(0);
-            opacity: 0;
-            font-size: 1rem;
-            font-weight: bold;
-            color: white;
-            transition: transform 0.3s ease, opacity 0.3s ease;
+        .copy-btn:hover {
+            background: #eef;
         }
         .copy-btn.copied {
-            background-color: #28a745; /* Success Green */
-        }
-        .copy-btn.copied .copy-btn-text {
-            opacity: 0;
+            background-color: #28a745; /* Success green */
+            color: white;
+            transform: scale(1.05); /* Slightly enlarge */
         }
-        .copy-btn.copied::after {
-            transform: translate(-50%, -50%) scale(1);
-            opacity: 1;
+
+
+        .loader {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255,255,255,0.3);
+            border-top: 3px solid white;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
 
-        .loader { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid white; border-radius: 50%; animation: spin 1s linear infinite; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
         @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        .icon { display: inline-block; margin-left: 8px; }
+        
+        .icon {
+            display: inline-block;
+            margin-left: 8px;
+        }
     </style>
 </head>
 <body>
@@ -177,30 +366,34 @@
         const fileUpload = document.querySelector('.file-upload');
         const uploadContent = document.querySelector('.upload-content');
 
-        tabs.forEach(tab => {
-            tab.addEventListener('click', () => {
-                tabs.forEach(t => t.classList.remove('active'));
-                tabContents.forEach(tc => tc.classList.remove('active'));
-                tab.classList.add('active');
-                document.getElementById(tab.getAttribute('data-tab') + '-content').classList.add('active');
-            });
-        });
-
-        // ===== CHANGE HERE: Replaced old copy function with an event listener for animation =====
-        decodedText.addEventListener('click', function(event) {
-            const button = event.target.closest('.copy-btn');
-            if (!button || button.classList.contains('copied')) return; // Exit if not a copy button or if already in copied state
+        // ===== CHANGE HERE: New copy function with animation =====
+        function copyToClipboard(button, text) {
+            if (button.classList.contains('copied')) return; // Prevent re-triggering animation
 
-            const textToCopy = button.dataset.textToCopy;
-            navigator.clipboard.writeText(textToCopy).then(() => {
+            navigator.clipboard.writeText(text).then(() => {
+                const originalText = button.innerHTML;
+                button.innerHTML = '✓';
                 button.classList.add('copied');
+                button.disabled = true;
+
                 setTimeout(() => {
+                    button.innerHTML = originalText;
                     button.classList.remove('copied');
-                }, 2000); // Revert back after 2 seconds
+                    button.disabled = false;
+                }, 2000); // 2 seconds
             }).catch(err => {
-                console.error('Failed to copy: ', err);
+                console.error('Failed to copy text: ', err);
                 alert('کپی کردن با خطا مواجه شد.');
             });
+        }
+
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(tc => tc.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(tab.getAttribute('data-tab') + '-content').classList.add('active');
+            });
         });
 
         fileInput.addEventListener('change', () => {
@@ -208,7 +401,7 @@
             if (file) {
                 if (file.type.startsWith('image/')) {
                     const reader = new FileReader();
-                    reader.onload = e => {
+                    reader.onload = function(e) {
                         const previewImage = document.createElement('img');
                         previewImage.src = e.target.result;
                         uploadContent.style.display = 'none';
@@ -234,59 +427,8 @@
         });
 
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
-        const listenForData = (sessionHash, onResult, onError) => { /* ... (no changes here) ... */ };
-        
-        generateBtn.addEventListener('click', async () => { /* ... (no changes here) ... */ });
-
-        readBtn.addEventListener('click', async () => {
-            const file = fileInput.files[0];
-            if (!file) return alert("لطفاً یک تصویر انتخاب کنید.");
-            if (!file.type.startsWith('image/')) return alert("لطفاً یک فایل تصویری انتخاب کنید.");
-            
-            readLoader.style.display = 'block';
-            decodedText.innerHTML = '';
-            readBtn.disabled = true;
-            try {
-                const formData = new FormData();
-                formData.append('files', file);
-                const uploadRes = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData });
-                if (!uploadRes.ok) throw new Error('خطا در آپلود فایل');
-                const [serverFilePath] = await uploadRes.json();
-                const fileData = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name };
-                
-                const sessionHash = generateSessionHash();
-                const joinRes = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fn_index: 1, data: [fileData], session_hash: sessionHash })
-                });
-                if (!joinRes.ok) throw new Error('خطا در پردازش');
-
-                listenForData(sessionHash, 
-                    (result) => {
-                        const textResult = result[0];
-                        // ===== CHANGE HERE: New HTML for the button with data attribute =====
-                        decodedText.innerHTML = `
-                            <div class="result-text-wrapper">
-                                <span class="result-text">📝 ${textResult}</span>
-                                <button class="copy-btn" data-text-to-copy="${textResult.replace(/"/g, '&quot;')}">
-                                    <span class="copy-btn-text">کپی</span>
-                                </button>
-                            </div>`;
-                    },
-                    (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; }
-                );
-            } catch (error) {
-                alert(`خطا: ${error.message}`);
-                decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>';
-            } finally {
-                readLoader.style.display = 'none';
-                readBtn.disabled = false;
-            }
-        });
 
-        // Re-pasting unchanged functions for completeness
-        const listenForDataFull = (sessionHash, onResult, onError) => {
+        const listenForData = (sessionHash, onResult, onError) => {
             const eventSource = new EventSource(`${SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
             eventSource.onmessage = (event) => {
                 const data = JSON.parse(event.data);
@@ -304,7 +446,6 @@
                 onError("خطا در ارتباط با سرور.");
             };
         };
-        listenForData = listenForDataFull;
 
         generateBtn.addEventListener('click', async () => {
             const text = textInput.value.trim();
@@ -333,10 +474,73 @@
             }
         });
 
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); }); });
-        ['dragenter', 'dragover'].forEach(eventName => { fileUpload.addEventListener(eventName, () => { fileUpload.style.background = 'white'; fileUpload.style.transform = 'translateY(-2px)'; }); });
-        ['dragleave', 'drop'].forEach(eventName => { fileUpload.addEventListener(eventName, () => { fileUpload.style.background = 'rgba(255,255,255,0.9)'; fileUpload.style.transform = 'translateY(0)'; }); });
-        fileUpload.addEventListener('drop', e => { if (e.dataTransfer.files.length > 0) { fileInput.files = e.dataTransfer.files; fileInput.dispatchEvent(new Event('change')); } });
+        readBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) return alert("لطفاً یک تصویر انتخاب کنید.");
+            if (!file.type.startsWith('image/')) return alert("لطفاً یک فایل تصویری انتخاب کنید.");
+            
+            readLoader.style.display = 'block';
+            decodedText.innerHTML = '';
+            readBtn.disabled = true;
+            try {
+                const formData = new FormData();
+                formData.append('files', file);
+                const uploadRes = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData });
+                if (!uploadRes.ok) throw new Error('خطا در آپلود فایل');
+                const [serverFilePath] = await uploadRes.json();
+                const fileData = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name };
+                
+                const sessionHash = generateSessionHash();
+                const joinRes = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ fn_index: 1, data: [fileData], session_hash: sessionHash })
+                });
+                if (!joinRes.ok) throw new Error('خطا در پردازش');
+
+                listenForData(sessionHash, 
+                    (result) => {
+                        const textToCopy = result[0];
+                        // ===== CHANGE HERE: onclick now passes `this` to the function =====
+                        const escapedText = textToCopy.replace(/'/g, "\\'").replace(/"/g, '&quot;');
+                        decodedText.innerHTML = `
+                            <div class="result-text-wrapper">
+                                <span class="result-text">📝 ${textToCopy}</span>
+                                <button class="copy-btn" onclick="copyToClipboard(this, '${escapedText}')">کپی</button>
+                            </div>`;
+                    },
+                    (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; }
+                );
+            } catch (error) {
+                alert(`خطا: ${error.message}`);
+                decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>';
+            } finally {
+                readLoader.style.display = 'none';
+                readBtn.disabled = false;
+            }
+        });
+
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
+        });
+        ['dragenter', 'dragover'].forEach(eventName => {
+            fileUpload.addEventListener(eventName, () => {
+                fileUpload.style.background = 'white';
+                fileUpload.style.transform = 'translateY(-2px)';
+            });
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            fileUpload.addEventListener(eventName, () => {
+                fileUpload.style.background = 'rgba(255,255,255,0.9)';
+                fileUpload.style.transform = 'translateY(0)';
+            });
+        });
+        fileUpload.addEventListener('drop', e => {
+            if (e.dataTransfer.files.length > 0) {
+                fileInput.files = e.dataTransfer.files;
+                fileInput.dispatchEvent(new Event('change'));
+            }
+        });
     </script>
 </body>
 </html>