Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

a0dc433

verified ·

1 Parent(s): 19f79dc

Update index.html

Browse files

Files changed (1) hide show

index.html +69 -175

index.html CHANGED Viewed

@@ -3,142 +3,70 @@
 <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: 30px;
-            flex-wrap: wrap;
-        }
-        .container {
-            background-color: #fff;
-            padding: 25px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            width: 400px;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-        h2 {
-            margin: 0 0 10px 0;
-            color: #0056b3;
-            border-bottom: 2px solid #0056b3;
-            padding-bottom: 5px;
-        }
-        textarea, input[type="file"] {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            box-sizing: border-box;
-            resize: vertical;
-        }
-        button {
-            background-color: #007bff;
-            color: white;
-            padding: 12px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s;
-        }
-        button:disabled {
-            background-color: #a0c9ff;
-            cursor: not-allowed;
-        }
-        button:hover:not(:disabled) {
-            background-color: #0056b3;
-        }
-        .result-box {
-            margin-top: 15px;
-            padding: 15px;
-            border: 1px dashed #ddd;
-            border-radius: 4px;
-            min-height: 50px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #fafafa;
-            word-break: break-all;
-        }
-        #qr-image {
-            max-width: 100%;
-            height: auto;
-        }
-        .loader {
-            border: 4px solid #f3f3f3;
-            border-radius: 50%;
-            border-top: 4px solid #3498db;
-            width: 30px;
-            height: 30px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .hidden {
-            display: none;
-        }
     </style>
 </head>
 <body>
     <!-- بخش ساخت QR Code -->
     <div class="container">
-        <h2>ساخت QR Code</h2>
-        <textarea id="text-input" placeholder="متن مورد نظر را اینجا وارد کنید..." rows="4"></textarea>
-        <button id="generate-btn" onclick="generateQRCode()">ساخت کد</button>
-        <div id="generate-result" class="result-box">
             <div id="generate-loader" class="loader hidden"></div>
-            <img id="qr-image" src="" alt="QR Code" class="hidden" />
-            <span id="generate-placeholder">تصویر QR Code اینجا نمایش داده می‌شود.</span>
         </div>
     </div>
     <!-- بخش خواندن QR Code -->
     <div class="container">
-        <h2>خواندن QR Code</h2>
         <input type="file" id="file-input" accept="image/*">
-        <button id="read-btn" onclick="readQRCode()">خواندن کد</button>
-        <div id="read-result" class="result-box">
-             <div id="read-loader" class="loader hidden"></div>
-            <p id="read-text">نتیجه خواندن کد اینجا نمایش داده می‌شود.</p>
         </div>
     </div>
     <script>
-        // *** مهم: آدرس API مطابق با اسکرین شات شما تغییر کرد ***
         const API_BASE_URL = "https://elias207-qrcode.hf.space/";
-        // یک session_hash تصادفی ایجاد می‌کند
         function generateSessionHash() {
             return Math.random().toString(36).substring(2, 11);
         }
-        // تابع برای ارسال درخواست به API و دریافت نتیجه
         async function callGradioApi(fnIndex, data, sessionHash) {
-            // Step 1: Join the queue
             const joinResponse = await fetch(API_BASE_URL + "queue/join?", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    "fn_index": fnIndex,
-                    "data": data,
-                    "session_hash": sessionHash,
-                }),
             });
             if (!joinResponse.ok) throw new Error("Failed to join queue.");
-            // Step 2: Poll for the result
             return new Promise((resolve, reject) => {
                 const interval = setInterval(async () => {
                     try {
@@ -149,16 +77,11 @@
                             return;
                         }
-                        // --- بخش اصلاح شده ---
-                        // پاسخ را به عنوان متن می خوانیم
                         const responseText = await dataResponse.text();
-                        // ممکن است چندین پیام در استریم باشد، آخرین پیام را پردازش می کنیم
                         const lines = responseText.trim().split('\n');
                         const lastLine = lines[lines.length - 1];
                         if (lastLine && lastLine.startsWith('data:')) {
-                            // پیشوند 'data: ' را حذف کرده و نتیجه را به JSON تبدیل می کنیم
                             const jsonString = lastLine.substring(5).trim();
                             const result = JSON.parse(jsonString);
@@ -170,117 +93,88 @@
                                 reject(new Error("API Error: " + result.msg));
                             }
                         }
-                        // --- پایان بخش اصلاح شده ---
                     } catch (error) {
-                         // اگر خطا در حین پارس کردن رخ دهد (مثلا پیام کامل نباشد)، منتظر درخواست بعدی می مانیم
                         if (!(error instanceof SyntaxError)) {
                            clearInterval(interval);
                            reject(error);
                         }
                     }
-                }, 1000); // هر ۱ ثانیه چک کن
             });
         }
-        // --- بخش ساخت QR Code ---
         async function generateQRCode() {
             const textInput = document.getElementById('text-input').value;
-            if (!textInput.trim()) {
-                alert("لطفاً متنی را برای ساخت QR Code وارد کنید.");
-                return;
-            }
-            const generateBtn = document.getElementById('generate-btn');
             const loader = document.getElementById('generate-loader');
-            const placeholder = document.getElementById('generate-placeholder');
-            const qrImage = document.getElementById('qr-image');
-            generateBtn.disabled = true;
             loader.classList.remove('hidden');
-            placeholder.classList.add('hidden');
-            qrImage.classList.add('hidden');
             try {
                 const sessionHash = generateSessionHash();
-                const data = [textInput];
-                const result = await callGradioApi(0, data, sessionHash); // fn_index=0 برای ساخت
-                if (result.output && result.output.data && result.output.data[0]) {
-                    // Gradio آدرس فایل را به صورت نسبی برمی‌گرداند، ما آن را کامل می‌کنیم
-                    const imageUrl = API_BASE_URL + "file=" + result.output.data[0].path;
-                    qrImage.src = imageUrl;
-                    qrImage.classList.remove('hidden');
-                } else {
-                    throw new Error("پاسخ دریافتی از سرور معتبر نیست.");
-                }
             } catch (error) {
-                console.error("Error generating QR Code:", error);
-                alert("خطا در ساخت QR Code: " + error.message);
-                placeholder.classList.remove('hidden');
             } finally {
-                generateBtn.disabled = false;
                 loader.classList.add('hidden');
             }
         }
-        // --- بخش خواندن QR Code ---
         async function readQRCode() {
             const fileInput = document.getElementById('file-input');
-            if (fileInput.files.length === 0) {
-                alert("لطفاً یک فایل تصویر QR Code انتخاب کنید.");
-                return;
-            }
             const file = fileInput.files[0];
-            const readBtn = document.getElementById('read-btn');
             const loader = document.getElementById('read-loader');
-            const readText = document.getElementById('read-text');
-            readBtn.disabled = true;
             loader.classList.remove('hidden');
-            readText.textContent = "در حال پردازش...";
             try {
-                // Step 1: Upload the file
                 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("آپلود فایل با خطا مواجه شد.");
                 const uploadResult = await uploadResponse.json();
                 const tempFilePath = uploadResult[0];
-                // Step 2: Call the API with the uploaded file path
                 const sessionHash = generateSessionHash();
-                const data = [{
-                    "path": tempFilePath,
-                    "url": API_BASE_URL + "file=" + tempFilePath,
-                    "orig_name": file.name,
-                    "size": file.size,
-                    "mime_type": file.type,
-                    "meta": {"_type": "gradio.FileData"}
-                }];
-                const result = await callGradioApi(1, data, sessionHash); // fn_index=1 برای خواندن
-                if (result.output && result.output.data && typeof result.output.data[0] === 'string') {
-                    readText.textContent = "نتیجه: " + result.output.data[0];
-                } else {
-                     readText.textContent = "نتیجه‌ای یافت نشد یا فرمت پاسخ نامعتبر است.";
-                }
             } catch (error) {
-                console.error("Error reading QR Code:", error);
-                readText.textContent = "خطا در خواندن QR Code: " + error.message;
             } finally {
-                readBtn.disabled = false;
                 loader.classList.add('hidden');
             }
         }
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>دیباگر QR Code API</title>
     <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding: 20px; gap: 30px; flex-wrap: wrap; }
+        .container { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 450px; display: flex; flex-direction: column; gap: 15px; }
+        h2 { margin: 0 0 10px 0; color: #0056b3; border-bottom: 2px solid #0056b3; padding-bottom: 5px; }
+        textarea, input[type="file"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
+        button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
+        button:disabled { background-color: #a0c9ff; cursor: not-allowed; }
+        button:hover:not(:disabled) { background-color: #0056b3; }
+        .result-container { display: flex; flex-direction: column; gap: 10px; }
+        .result-box { margin-top: 10px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; min-height: 100px; }
+        pre { white-space: pre-wrap; word-break: break-all; margin: 0; font-size: 13px; text-align: left; direction: ltr; }
+        .copy-btn { background-color: #28a745; }
+        .copy-btn:hover { background-color: #218838; }
+        .loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .hidden { display: none; }
     </style>
 </head>
 <body>
     <!-- بخش ساخت QR Code -->
     <div class="container">
+        <h2>۱. ساخت QR Code (دیباگ)</h2>
+        <textarea id="text-input" placeholder="یک متن مثل 'salam' وارد کنید" rows="3">salam</textarea>
+        <button id="generate-btn" onclick="generateQRCode()">دریافت جیسون ساخت</button>
+        <div class="result-container">
             <div id="generate-loader" class="loader hidden"></div>
+            <div class="result-box">
+                <pre id="generate-json-output">خروجی JSON اینجا نمایش داده می‌شود.</pre>
+            </div>
+            <button id="copy-generate-btn" class="copy-btn hidden" onclick="copyResult('generate-json-output', this)">کپی جیسون خروجی</button>
         </div>
     </div>
     <!-- بخش خواندن QR Code -->
     <div class="container">
+        <h2>۲. خواندن QR Code (دیباگ)</h2>
         <input type="file" id="file-input" accept="image/*">
+        <button id="read-btn" onclick="readQRCode()">دریافت جیسون خواندن</button>
+         <div class="result-container">
+            <div id="read-loader" class="loader hidden"></div>
+            <div class="result-box">
+                <pre id="read-json-output">خروجی JSON اینجا نمایش داده می‌شود.</pre>
+            </div>
+            <button id="copy-read-btn" class="copy-btn hidden" onclick="copyResult('read-json-output', this)">کپی جیسون خروجی</button>
         </div>
     </div>
     <script>
         const API_BASE_URL = "https://elias207-qrcode.hf.space/";
         function generateSessionHash() {
             return Math.random().toString(36).substring(2, 11);
         }
         async function callGradioApi(fnIndex, data, sessionHash) {
             const joinResponse = await fetch(API_BASE_URL + "queue/join?", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ "fn_index": fnIndex, "data": data, "session_hash": sessionHash }),
             });
             if (!joinResponse.ok) throw new Error("Failed to join queue.");
             return new Promise((resolve, reject) => {
                 const interval = setInterval(async () => {
                     try {
                             return;
                         }
                         const responseText = await dataResponse.text();
                         const lines = responseText.trim().split('\n');
                         const lastLine = lines[lines.length - 1];
                         if (lastLine && lastLine.startsWith('data:')) {
                             const jsonString = lastLine.substring(5).trim();
                             const result = JSON.parse(jsonString);
                                 reject(new Error("API Error: " + result.msg));
                             }
                         }
                     } catch (error) {
                         if (!(error instanceof SyntaxError)) {
                            clearInterval(interval);
                            reject(error);
                         }
                     }
+                }, 1000);
             });
         }
         async function generateQRCode() {
             const textInput = document.getElementById('text-input').value;
+            if (!textInput.trim()) { alert("لطفاً متنی را وارد کنید."); return; }
+            const btn = document.getElementById('generate-btn');
             const loader = document.getElementById('generate-loader');
+            const outputPre = document.getElementById('generate-json-output');
+            const copyBtn = document.getElementById('copy-generate-btn');
+            btn.disabled = true;
             loader.classList.remove('hidden');
+            copyBtn.classList.add('hidden');
+            outputPre.textContent = "در حال ارتباط با سرور...";
             try {
                 const sessionHash = generateSessionHash();
+                const result = await callGradioApi(0, [textInput], sessionHash);
+                outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام و مرتب
+                copyBtn.classList.remove('hidden');
             } catch (error) {
+                outputPre.textContent = "خطا: " + error.message;
             } finally {
+                btn.disabled = false;
                 loader.classList.add('hidden');
             }
         }
         async function readQRCode() {
             const fileInput = document.getElementById('file-input');
+            if (fileInput.files.length === 0) { alert("لطفاً یک فایل تصویر انتخاب کنید."); return; }
             const file = fileInput.files[0];
+            const btn = document.getElementById('read-btn');
             const loader = document.getElementById('read-loader');
+            const outputPre = document.getElementById('read-json-output');
+            const copyBtn = document.getElementById('copy-read-btn');
+            btn.disabled = true;
             loader.classList.remove('hidden');
+            copyBtn.classList.add('hidden');
+            outputPre.textContent = "در حال آپلود و پردازش...";
             try {
                 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("آپلود فایل با خطا مواجه شد.");
                 const uploadResult = await uploadResponse.json();
                 const tempFilePath = uploadResult[0];
                 const sessionHash = generateSessionHash();
+                const data = [{ "path": tempFilePath, "url": API_BASE_URL + "file=" + tempFilePath, "orig_name": file.name }];
+                const result = await callGradioApi(1, [data], sessionHash);
+                outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام و مرتب
+                copyBtn.classList.remove('hidden');
             } catch (error) {
+                outputPre.textContent = "خطا: " + error.message;
             } finally {
+                btn.disabled = false;
                 loader.classList.add('hidden');
             }
         }
+        function copyResult(elementId, buttonElement) {
+            const pre = document.getElementById(elementId);
+            navigator.clipboard.writeText(pre.textContent).then(() => {
+                const originalText = buttonElement.textContent;
+                buttonElement.textContent = 'کپی شد!';
+                setTimeout(() => { buttonElement.textContent = originalText; }, 2000);
+            }).catch(err => console.error('Failed to copy: ', err));
+        }
     </script>
 </body>