Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

0b7c7f4

verified ·

1 Parent(s): 6be7f17

Update index.html

Browse files

Files changed (1) hide show

index.html +198 -275

index.html CHANGED Viewed

@@ -3,350 +3,273 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>سازنده و خواننده QR Code (نسخه نهایی)</title>
     <style>
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            background-color: #f0f2f5;
-            color: #1c1e21;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
             padding: 20px;
-            gap: 20px;
-            flex-wrap: wrap;
         }
         .container {
-            background-color: #ffffff;
-            padding: 25px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 450px;
             display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-        h2 {
-            text-align: center;
-            color: #0d6efd;
-            margin-top: 0;
-            border-bottom: 2px solid #eee;
-            padding-bottom: 10px;
         }
-        label, button, input {
-            font-size: 16px;
         }
-        textarea, input[type="file"] {
-            width: 100%;
             padding: 10px;
-            border-radius: 6px;
-            border: 1px solid #ddd;
-            box-sizing: border-box;
-            resize: vertical;
         }
         button {
-            background-color: #0d6efd;
             color: white;
             border: none;
-            padding: 12px 20px;
-            border-radius: 6px;
             cursor: pointer;
-            transition: background-color 0.3s;
-            width: 100%;
         }
         button:hover {
-            background-color: #0b5ed7;
         }
         button:disabled {
-            background-color: #6c757d;
             cursor: not-allowed;
         }
-        .result-box {
-            margin-top: 15px;
-            padding: 15px;
-            border: 1px dashed #ccc;
-            border-radius: 6px;
             min-height: 50px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            position: relative;
         }
-        #qr-image {
             max-width: 100%;
             height: auto;
-            border-radius: 4px;
         }
-        .loader {
             font-style: italic;
             color: #666;
-        }
-        #read-result {
-            word-break: break-all;
-            white-space: pre-wrap;
-        }
-        .copy-btn {
-            position: absolute;
-            top: 8px;
-            left: 8px;
-            background-color: #6c757d;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            cursor: pointer;
-            width: auto;
-        }
-        .copy-btn:hover {
-            background-color: #5a6268;
-        }
-        /* بخش دیباگ */
-        .debug-section {
-            margin-top: 15px;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-        }
-        .debug-section summary {
-            padding: 10px;
-            background-color: #f8f9fa;
-            cursor: pointer;
-            font-weight: bold;
-        }
-        .debug-content {
-            padding: 10px;
-            background-color: #fff;
-        }
-        .debug-content h4 {
-            margin-top: 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .debug-content pre {
-            background-color: #e9ecef;
-            padding: 10px;
-            border-radius: 4px;
-            white-space: pre-wrap;
-            word-break: break-all;
-            font-size: 13px;
-            max-height: 150px;
-            overflow-y: auto;
-        }
-        .copy-json-btn {
-             background-color: #198754;
-             padding: 2px 8px;
-             font-size: 12px;
-             width: auto;
-             border-radius: 4px;
         }
     </style>
 </head>
 <body>
-    <!-- بخش ساخت QR Code -->
-    <div class="container">
-        <h2>ساخت QR Code</h2>
-        <label for="qr-text">متن مورد نظر را وارد کنید:</label>
-        <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>
-        </div>
-        <!-- بخش دیباگ برای ساخت -->
-        <details class="debug-section">
-            <summary>اطلاعات دیباگ (ساخت کد)</summary>
-            <div class="debug-content">
-                <h4>
-                    <span>Request Payload (JSON ارسالی)</span>
-                    <button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('generate-req-payload').textContent)">کپی</button>
-                </h4>
-                <pre id="generate-req-payload">هنوز درخواستی ارسال نشده است.</pre>
-                <h4>
-                    <span>Server Response (پاسخ دریافتی)</span>
-                    <button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('generate-res-payload').textContent)">کپی</button>
-                </h4>
-                <pre id="generate-res-payload">هنوز پاسخی دریافت نشده است.</pre>
-            </div>
-        </details>
-    </div>
-    <!-- بخش خواندن QR Code -->
     <div class="container">
-        <h2>خواندن QR Code</h2>
-        <label for="qr-file">فایل تصویر QR Code را انتخاب کنید:</label>
-        <input type="file" id="qr-file" accept="image/*">
-        <button id="read-btn" onclick="readQRCode()">خواندن از تصویر</button>
-        <div id="read-result-box" class="result-box">
-            <p id="read-result" class="loader">متن خوانده شده اینجا نمایش داده می‌شود.</p>
         </div>
-        <!-- بخش دیباگ برای خواندن -->
-         <details class="debug-section">
-            <summary>اطلاعات دیباگ (خواندن کد)</summary>
-            <div class="debug-content">
-                <h4>
-                    <span>Request Payload (JSON ارسالی)</span>
-                    <button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('read-req-payload').textContent)">کپی</button>
-                </h4>
-                <pre id="read-req-payload">هنوز درخواستی ارسال نشده است.</pre>
-                 <h4>
-                    <span>Server Response (پاسخ دریافتی)</span>
-                    <button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('read-res-payload').textContent)">کپی</button>
-                </h4>
-                <pre id="read-res-payload">هنوز پاسخی دریافت نشده است.</pre>
             </div>
-        </details>
     </div>
     <script>
-        // *** خط زیر اصلاح شد ***
-        // آدرس API صحیح برای اسپیس Elias207/QRcode
-        const API_URL = "https://elias207-qrcode.hf.space/run/predict/";
-        // گرفتن ارجاع به عناصر HTML
-        const generateBtn = document.getElementById('generate-btn');
-        const readBtn = document.getElementById('read-btn');
-        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');
-        // عناصر دیباگ
-        const genReqPayload = document.getElementById('generate-req-payload');
-        const genResPayload = document.getElementById('generate-res-payload');
-        const readReqPayload = document.getElementById('read-req-payload');
-        const readResPayload = document.getElementById('read-res-payload');
-        // تابع کمکی برای کپی در کلیپ‌بورد
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text).then(() => {
-                alert("متن کپی شد!");
-            }).catch(err => {
-                console.error('Failed to copy: ', err);
-                alert("کپی کردن با خطا مواجه شد.");
-            });
         }
-        // تابع برای ساخت QR Code
         async function generateQRCode() {
-            const text = qrTextInput.value.trim();
-            if (!text) {
-                alert("لطفاً متنی را برای ساخت QR Code وارد کنید.");
                 return;
             }
-            generateBtn.disabled = true;
-            generateResultBox.innerHTML = '<span class="loader">در حال ساخت... لطفاً صبر ��نید.</span>';
             const payload = {
-                "fn_index": 0,
-                "data": [text]
             };
-            genReqPayload.textContent = JSON.stringify(payload, null, 2);
-            genResPayload.textContent = "در حال دریافت پاسخ...";
             try {
-                const response = await fetch(API_URL, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
                     body: JSON.stringify(payload)
                 });
-                const result = await response.json();
-                genResPayload.textContent = JSON.stringify(result, null, 2);
-                if (!response.ok) {
-                    throw new Error(`خطای سرور: ${response.status} - ${result.error || 'Unknown Error'}`);
-                }
-                const imageData = result.data[0];
-                if (imageData) {
-                    generateResultBox.innerHTML = `<img id="qr-image" src="${imageData}" alt="Generated QR Code">`;
-                } else {
-                    throw new Error("پاسخ دریافتی از سرور، شامل تصویر نبود.");
-                }
             } catch (error) {
-                console.error('Error generating QR code:', error);
-                generateResultBox.innerHTML = `<span style="color:red;">خطا: ${error.message}</span>`;
-                genResPayload.textContent = `Error: ${error.message}`;
-            } finally {
-                generateBtn.disabled = false;
             }
         }
-        // تابع برای خواندن QR Code
         async function readQRCode() {
-            const file = qrFileInput.files[0];
-            if (!file) {
-                alert("لطفاً یک فایل تصویر را انتخاب کنید.");
                 return;
             }
-            readBtn.disabled = true;
-            readResultP.textContent = 'در حال خواندن تصویر...';
-            readResultP.style.color = 'inherit';
-            readResultP.classList.add('loader');
-            const oldCopyBtn = readResultBox.querySelector('.copy-btn');
-            if(oldCopyBtn) oldCopyBtn.remove();
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = async () => {
-                const fileDataUrl = reader.result;
                 const payload = {
-                    "fn_index": 1,
-                    "data": [fileDataUrl]
                 };
-                readReqPayload.textContent = JSON.stringify({...payload, data: [fileDataUrl.substring(0, 50) + '...'] }, null, 2);
-                readResPayload.textContent = "در حال دریافت پاسخ...";
-                try {
-                    const response = await fetch(API_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify(payload)
-                    });
-                    const result = await response.json();
-                    readResPayload.textContent = JSON.stringify(result, null, 2);
-                    if (!response.ok) {
-                         throw new Error(`خطای سرور: ${response.status} - ${result.error || 'Unknown Error'}`);
-                    }
-                    const decodedText = result.data[0];
-                    readResultP.textContent = decodedText || "متنی در QR Code یافت نشد.";
-                    readResultP.classList.remove('loader');
-                    if (decodedText) {
-                        const copyBtn = document.createElement('button');
-                        copyBtn.textContent = 'کپی متن';
-                        copyBtn.className = 'copy-btn';
-                        copyBtn.onclick = () => copyToClipboard(decodedText);
-                        readResultBox.appendChild(copyBtn);
-                    }
-                } catch (error) {
-                    console.error('Error reading QR code:', error);
-                    readResultP.textContent = `خطا: ${error.message}`;
-                    readResultP.style.color = 'red';
-                    readResPayload.textContent = `Error: ${error.message}`;
-                } finally {
-                    readBtn.disabled = false;
-                }
-            };
-            reader.onerror = error => {
-                console.error("Error converting file to Base64", error);
-                readResultP.textContent = "خطا در خواندن فایل.";
-                readResultP.style.color = 'red';
-                readBtn.disabled = false;
-            };
         }
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>استفاده از API کد QR</title>
     <style>
         body {
+            font-family: 'Vazirmatn', sans-serif;
+            background-color: #f4f7f6;
+            color: #333;
+            max-width: 800px;
+            margin: 20px auto;
             padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        h1, h2 {
+            color: #0056b3;
+            border-bottom: 2px solid #0056b3;
+            padding-bottom: 10px;
         }
         .container {
             display: flex;
+            flex-wrap: wrap;
+            gap: 40px;
         }
+        .section {
+            flex: 1;
+            min-width: 300px;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            border: 1px solid #ddd;
         }
+        input[type="text"], input[type="file"] {
+            width: calc(100% - 20px);
             padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
         }
         button {
+            background-color: #007bff;
             color: white;
+            padding: 10px 15px;
             border: none;
+            border-radius: 4px;
             cursor: pointer;
+            font-size: 16px;
         }
         button:hover {
+            background-color: #0056b3;
         }
         button:disabled {
+            background-color: #ccc;
             cursor: not-allowed;
         }
+        .result {
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #e9ecef;
+            border: 1px solid #ced4da;
+            border-radius: 4px;
             min-height: 50px;
+            word-wrap: break-word;
         }
+        .result img {
             max-width: 100%;
             height: auto;
+            display: block;
+            margin: 0 auto;
         }
+        .status {
             font-style: italic;
             color: #666;
+            height: 20px;
         }
     </style>
+    <!-- افزودن فونت وزیر از گوگل -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap" rel="stylesheet">
 </head>
 <body>
+    <h1>ابزار کار با کد QR (توسط API)</h1>
+    <p>این صفحه از API موجود در Hugging Face Space با آدرس <code>cultrix-qrcode-read-generate</code> استفاده می‌کند.</p>
     <div class="container">
+        <!-- بخش ساخت کد QR -->
+        <div class="section">
+            <h2>۱. ساخت کد QR از متن</h2>
+            <label for="qr-text">متن مورد نظر:</label>
+            <input type="text" id="qr-text" placeholder="متن خود را اینجا وارد کنید...">
+            <button id="generate-btn" onclick="generateQRCode()">ساخت کد</button>
+            <div id="generate-status" class="status"></div>
+            <div id="generate-result" class="result">
+                <!-- تصویر کد QR اینجا نمایش داده می‌شود -->
+            </div>
         </div>
+        <!-- بخش خواندن کد QR -->
+        <div class="section">
+            <h2>۲. خواندن متن از کد QR</h2>
+            <label for="qr-file">فایل تصویر کد QR را انتخاب کنید:</label>
+            <input type="file" id="qr-file" accept="image/*">
+            <button id="read-btn" onclick="readQRCode()">خواندن کد</button>
+            <div id="read-status" class="status"></div>
+            <div id="read-result" class="result">
+                <!-- متن خوانده شده اینجا نمایش داده می‌شود -->
             </div>
+        </div>
     </div>
     <script>
+        const API_BASE_URL = "https://cultrix-qrcode-read-generate.hf.space";
+        // یک هش تصادفی برای session ایجاد می‌کند
+        function generateSessionHash() {
+            return Math.random().toString(36).substring(2);
+        }
+        // تابع برای غیرفعال کردن دکمه‌ها در حین پردازش
+        function toggleButtons(disabled) {
+            document.getElementById('generate-btn').disabled = disabled;
+            document.getElementById('read-btn').disabled = disabled;
         }
+        // تابع برای گوش دادن به نتیجه با EventSource
+        function pollForResult(sessionHash, resultElement, statusElement, fnIndex) {
+            const eventSource = new EventSource(`${API_BASE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
+            statusElement.textContent = 'در انتظار نتیجه از سرور...';
+            eventSource.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                if (data.msg === 'process_starts') {
+                    statusElement.textContent = 'پردازش شروع شد...';
+                }
+                if (data.msg === 'process_completed') {
+                    statusElement.textContent = 'پردازش با موفقیت انجام شد.';
+                    resultElement.innerHTML = ''; // پاک کردن محتوای قبلی
+                    const outputData = data.output.data[0];
+                    if (fnIndex === 0) { // ساخت QR
+                        // نتیجه یک شی حاوی URL تصویر است
+                        const img = document.createElement('img');
+                        img.src = `${API_BASE_URL}/gradio_api/file=${outputData.path}`;
+                        resultElement.appendChild(img);
+                    } else if (fnIndex === 1) { // خواندن QR
+                        // نتیجه خود متن است
+                        resultElement.textContent = outputData;
+                    }
+                    eventSource.close();
+                    toggleButtons(false);
+                }
+            };
+            eventSource.onerror = function(err) {
+                statusElement.textContent = 'خطا در ارتباط با سرور.';
+                console.error("EventSource failed:", err);
+                eventSource.close();
+                toggleButtons(false);
+            };
+        }
+        // تابع اصلی برای ساخت کد QR
         async function generateQRCode() {
+            const textInput = document.getElementById('qr-text').value;
+            if (!textInput) {
+                alert('لطفاً متنی را برای ساخت کد QR وارد کنید.');
                 return;
             }
+            const statusElement = document.getElementById('generate-status');
+            const resultElement = document.getElementById('generate-result');
+            resultElement.innerHTML = '';
+            statusElement.textContent = 'در حال ارسال درخواست...';
+            toggleButtons(true);
+            const sessionHash = generateSessionHash();
             const payload = {
+                data: [textInput],
+                fn_index: 0,
+                session_hash: sessionHash
             };
             try {
+                const response = await fetch(`${API_BASE_URL}/gradio_api/queue/join?`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(payload)
                 });
+                if (!response.ok) throw new Error('خطا در عضویت در صف');
+                pollForResult(sessionHash, resultElement, statusElement, 0);
             } catch (error) {
+                statusElement.textContent = `خطا: ${error.message}`;
+                console.error(error);
+                toggleButtons(false);
             }
         }
+        // تابع اصلی برای خواندن کد QR
         async function readQRCode() {
+            const fileInput = document.getElementById('qr-file');
+            if (fileInput.files.length === 0) {
+                alert('لطفاً یک فایل تصویر را انتخاب کنید.');
                 return;
             }
+            const file = fileInput.files[0];
+            const statusElement = document.getElementById('read-status');
+            const resultElement = document.getElementById('read-result');
+            resultElement.innerHTML = '';
+            statusElement.textContent = 'در حال آپلود فایل...';
+            toggleButtons(true);
+            try {
+                // مرحله ۱: آپلود فایل
+                const formData = new FormData();
+                formData.append('files', file);
+                const uploadResponse = await fetch(`${API_BASE_URL}/gradio_api/upload`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!uploadResponse.ok) throw new Error('خطا در آپلود فایل');
+                const uploadedFiles = await uploadResponse.json();
+                const uploadedFilePath = uploadedFiles[0];
+                statusElement.textContent = 'فایل آپلود شد. در حال ارسال درخواست پردازش...';
+                // مرحله ۲: ارسال درخواست پردازش با مسیر فایل آپلود شده
+                const sessionHash = generateSessionHash();
                 const payload = {
+                    data: [{
+                        "path": uploadedFilePath,
+                        "url": `${API_BASE_URL}/gradio_api/file=${uploadedFilePath}`,
+                        "orig_name": file.name,
+                        "size": file.size,
+                        "mime_type": file.type,
+                        "meta": {"_type": "gradio.FileData"}
+                    }],
+                    fn_index: 1,
+                    session_hash: sessionHash
                 };
+                const joinResponse = await fetch(`${API_BASE_URL}/gradio_api/queue/join?`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                if (!joinResponse.ok) throw new Error('خطا در عضویت در صف برای پردازش فایل');
+                pollForResult(sessionHash, resultElement, statusElement, 1);
+            } catch (error) {
+                statusElement.textContent = `خطا: ${error.message}`;
+                console.error(error);
+                toggleButtons(false);
+            }
         }
     </script>
 </body>