Update index.html

index.html

@@ -94,7 +94,7 @@
     <div class="container">
         <h2>ساخت QR Code</h2>
         <label for="qr-text">متن مورد نظر را وارد کنید:</label>
-        <textarea id="qr-text" rows="4" placeholder="مثال: https://google.com"></textarea>
+        <textarea id="qr-text" rows="4" placeholder="مثال: https://google.com">سلام</textarea>
         <button id="generate-btn" onclick="generateQRCode()">ساخت QR Code</button>
         <div id="generate-result-box" class="result-box">
             <span class="loader">تصویر QR Code اینجا نمایش داده می‌شود.</span>
@@ -113,7 +113,8 @@
     </div>
 
     <script>
-        const API_BASE_URL = "https://cultrix-qrcode-read-generate.hf.space/gradio_api";
+        // آدرس API برای اسپیس Elias207/QRcode
+        const API_URL = "https://elias207-qrcode.hf.space/run/predict";
 
         // گرفتن ارجاع به عناصر HTML
         const generateBtn = document.getElementById('generate-btn');
@@ -121,36 +122,12 @@
         const qrTextInput = document.getElementById('qr-text');
         const qrFileInput = document.getElementById('qr-file');
         const generateResultBox = document.getElementById('generate-result-box');
-        const readResultBox = document.getElementById('read-result-box');
         const readResultP = document.getElementById('read-result');
 
         // تابع برای تولید یک رشته تصادفی برای session_hash
         function generateSessionHash() {
             return Math.random().toString(36).substring(2, 15);
         }
-        
-        // تابع برای گوش دادن به نتایج از طریق EventSource
-        function listenForData(sessionHash, onComplete, onError) {
-            const eventSource = new EventSource(`${API_BASE_URL}/queue/data?session_hash=${sessionHash}`);
-
-            eventSource.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                
-                if (data.msg === 'process_completed') {
-                    eventSource.close();
-                    onComplete(data.output);
-                } else if (data.msg === 'process_generating' || data.msg === 'process_starts') {
-                    // در حال پردازش...
-                    console.log('Processing...');
-                }
-            };
-
-            eventSource.onerror = function(err) {
-                console.error("EventSource failed:", err);
-                eventSource.close();
-                onError("خطا در برقراری ارتباط با سرور.");
-            };
-        }
 
         // تابع برای ساخت QR Code
         async function generateQRCode() {
@@ -163,41 +140,36 @@
             generateBtn.disabled = true;
             generateResultBox.innerHTML = '<span class="loader">در حال ساخت... لطفاً صبر کنید.</span>';
 
-            const sessionHash = generateSessionHash();
             const payload = {
-                "data": [text],
-                "event_data": null,
                 "fn_index": 0, // ایندکس تابع ساخت QR
-                "trigger_id": 5, // این مقادیر از لاگ‌ها گرفته شده
-                "session_hash": sessionHash
+                "data": [
+                    text, // ورودی اول: متن
+                    null  // ورودی دوم: تصویر (برای این تابع استفاده نمی‌شود)
+                ],
+                "session_hash": generateSessionHash()
             };
 
             try {
-                // 1. ارسال درخواست برای شروع پردازش
-                const response = await fetch(`${API_BASE_URL}/queue/join?`, {
+                const response = await fetch(API_URL, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(payload)
                 });
 
-                if (!response.ok) throw new Error('خطا در ارسال درخواست به صف.');
+                if (!response.ok) {
+                    throw new Error(`خطای شبکه: ${response.status}`);
+                }
 
-                // 2. گوش دادن برای دریافت نتیجه
-                listenForData(sessionHash, 
-                    (output) => {
-                        const imageUrl = `${API_BASE_URL.replace('/gradio_api', '')}/file=${output.data[0].path}`;
-                        generateResultBox.innerHTML = `<img id="qr-image" src="${imageUrl}" alt="Generated QR Code">`;
-                        generateBtn.disabled = false;
-                    },
-                    (errorMsg) => {
-                        generateResultBox.innerHTML = `<span style="color:red;">${errorMsg}</span>`;
-                        generateBtn.disabled = false;
-                    }
-                );
+                const result = await response.json();
+                // تصویر به صورت Base64 در پاسخ می‌آید
+                const base64Image = result.data[0]; 
+                
+                generateResultBox.innerHTML = `<img id="qr-image" src="${base64Image}" alt="Generated QR Code">`;
 
             } catch (error) {
                 console.error('Error generating QR code:', error);
                 generateResultBox.innerHTML = `<span style="color:red;">خطا: ${error.message}</span>`;
+            } finally {
                 generateBtn.disabled = false;
             }
         }
@@ -211,72 +183,57 @@
             }
 
             readBtn.disabled = true;
-            readResultP.textContent = 'در حال آپلود و پردازش...';
+            readResultP.textContent = 'در حال خواندن تصویر...';
             readResultP.classList.add('loader');
 
-            try {
-                // 1. آپلود فایل تصویر
-                const formData = new FormData();
-                formData.append('files', file);
-
-                const uploadResponse = await fetch(`${API_BASE_URL}/upload?`, {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                if (!uploadResponse.ok) throw new Error('خطا در آپلود فایل.');
+            // تبدیل فایل تصویر به Base64
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = async () => {
+                const base64Image = reader.result;
 
-                const uploadResult = await uploadResponse.json();
-                const serverFilePath = uploadResult[0];
-
-                // 2. ارسال درخواست برای خواندن QR کد با مسیر فایل آپلود شده
-                const sessionHash = generateSessionHash();
                 const payload = {
-                    "data": [{
-                        "path": serverFilePath,
-                        "url": `${API_BASE_URL.replace('/gradio_api', '')}/file=${serverFilePath}`,
-                        "orig_name": file.name,
-                        "size": file.size,
-                        "mime_type": file.type,
-                        "meta": { "_type": "gradio.FileData" }
-                    }],
-                    "event_data": null,
                     "fn_index": 1, // ایندکس تابع خواندن QR
-                    "trigger_id": 13,
-                    "session_hash": sessionHash
+                    "data": [
+                        null, // ورودی اول: متن (برای این تابع استفاده نمی‌شود)
+                        base64Image // ورودی دوم: تصویر به صورت Base64
+                    ],
+                    "session_hash": generateSessionHash()
                 };
-                
-                const joinResponse = await fetch(`${API_BASE_URL}/queue/join?`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
-                });
 
-                if (!joinResponse.ok) throw new Error('خطا در ارسال درخواست خواندن به صف.');
+                try {
+                    const response = await fetch(API_URL, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
 
-                // 3. گوش دادن برای دریافت نتیجه
-                listenForData(sessionHash,
-                    (output) => {
-                        const decodedText = output.data[0];
-                        readResultP.textContent = decodedText || "متنی در QR Code یافت نشد.";
-                        readResultP.classList.remove('loader');
-                        readBtn.disabled = false;
-                    },
-                    (errorMsg) => {
-                        readResultP.textContent = errorMsg;
-                        readResultP.style.color = 'red';
-                        readBtn.disabled = false;
+                    if (!response.ok) {
+                        throw new Error(`خطای شبکه: ${response.status}`);
                     }
-                );
 
-            } catch (error) {
-                console.error('Error reading QR code:', error);
-                readResultP.textContent = `خطا: ${error.message}`;
-                readResultP.style.color = 'red';
-                readBtn.disabled = false;
-            }
-        }
+                    const result = await response.json();
+                    const decodedText = result.data[0];
 
+                    readResultP.textContent = decodedText || "متنی در QR Code یافت نشد.";
+                    readResultP.classList.remove('loader');
+
+                } catch (error) {
+                    console.error('Error reading QR code:', error);
+                    readResultP.textContent = `خطا: ${error.message}`;
+                    readResultP.style.color = 'red';
+                } finally {
+                    readBtn.disabled = false;
+                }
+            };
+            
+            reader.onerror = (error) => {
+                 console.error('Error reading file:', error);
+                 readResultP.textContent = 'خطا در خواندن فایل.';
+                 readResultP.style.color = 'red';
+                 readBtn.disabled = false;
+            };
+        }
     </script>
 </body>
 </html>