Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

28ef445

verified ·

1 Parent(s): b0a55a3

Update index.html

Browse files

Files changed (1) hide show

index.html +70 -146

index.html CHANGED Viewed

@@ -3,123 +3,53 @@
 <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>
         const API_BASE_URL = "https://elias207-qrcode.hf.space/gradio_api/";
         function generateSessionHash() { return Math.random().toString(36).substring(2, 11); }
         async function callGradioApi(fnIndex, data, sessionHash) {
             await fetch(API_BASE_URL + "queue/join?", {
                 method: "POST",
@@ -131,7 +61,7 @@
                 const interval = setInterval(async () => {
                     try {
                         const response = await fetch(API_BASE_URL + `queue/data?session_hash=${sessionHash}`);
-                        if (!response.ok) { clearInterval(interval); reject(new Error("خطا در شبکه")); return; }
                         const responseText = await response.text();
                         const lastLine = responseText.trim().split('\n').pop();
@@ -143,7 +73,7 @@
                                 resolve(result);
                             } else if (["queue_full", "unexpected_error"].includes(result.msg)) {
                                 clearInterval(interval);
-                                reject(new Error("API Error: " + result.msg));
                             }
                         }
                     } catch (error) {
@@ -154,37 +84,22 @@
         }
         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 placeholder = document.getElementById('generate-placeholder');
-            const qrImage = document.getElementById('qr-image');
-            btn.disabled = true;
-            loader.classList.remove('hidden');
-            placeholder.classList.add('hidden');
-            qrImage.classList.add('hidden');
             try {
                 const sessionHash = generateSessionHash();
-                const result = await callGradioApi(0, [textInput], sessionHash);
-                if (result.output?.data?.[0]?.path) {
-                    // **اصلاح**: آدرس فایل هم باید از مسیر API خوانده شود
-                    const imageUrl = API_BASE_URL + "file=" + result.output.data[0].path;
-                    qrImage.src = imageUrl;
-                    qrImage.classList.remove('hidden');
-                } else {
-                    throw new Error("پاسخ دریافتی از سرور معتبر نیست.");
-                }
             } catch (error) {
                 alert("خطا در ساخت کد: " + error.message);
-                placeholder.classList.remove('hidden');
             } finally {
-                btn.disabled = false;
-                loader.classList.add('hidden');
             }
         }
@@ -193,43 +108,52 @@
             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 readText = document.getElementById('read-text');
-            btn.disabled = true;
-            loader.classList.remove('hidden');
-            readText.textContent = "در حال پردازش...";
             try {
                 const formData = new FormData();
                 formData.append("files", file);
-                // *** مهم: اینجا نقطه اصلی اصلاح بود ***
-                // آدرس آپلود باید به API_BASE_URL اشاره کند
                 const uploadRes = await fetch(API_BASE_URL + "upload", { method: "POST", body: formData });
-                if (!uploadRes.ok) throw new Error("آپلود فایل ناموفق بود.");
                 const uploadResult = await uploadRes.json();
                 const tempFilePath = uploadResult[0];
                 const sessionHash = generateSessionHash();
-                const fileData = [{"path": tempFilePath, "url": API_BASE_URL + "file=" + tempFilePath, "orig_name": file.name}];
-                const result = await callGradioApi(1, fileData, sessionHash);
-                if (result.output?.data?.[0]) {
-                    readText.textContent = "نتیجه: " + result.output.data[0];
-                } else {
-                     readText.textContent = "نتیجه‌ای یافت نشد.";
-                }
             } catch (error) {
                 alert("خطا در خواندن کد: " + error.message);
-                readText.textContent = "خطا در خواندن کد.";
             } finally {
-                btn.disabled = false;
-                loader.classList.add('hidden');
             }
         }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>دیباگر API کیوآرکد</title>
     <style>
+        body { font-family: sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; padding: 20px; gap: 30px; flex-wrap: wrap; }
+        .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 450px; }
+        h2 { color: #333; border-bottom: 2px solid #6c5ce7; padding-bottom: 5px; }
+        textarea, input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
+        button { background-color: #6c5ce7; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
+        button:disabled { background-color: #b2aae8; }
+        .result-container { margin-top: 15px; }
+        pre { background-color: #eee; padding: 15px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; text-align: left; direction: ltr; max-height: 300px; overflow-y: auto; border: 1px solid #ddd; }
+        .copy-btn { background-color: #00b894; margin-top: 10px; width: auto; padding: 5px 10px; font-size: 12px; }
+        .loader { text-align: center; padding: 20px; color: #555; }
     </style>
 </head>
 <body>
     <!-- بخش ساخت QR Code -->
     <div class="container">
+        <h2>۱. تست ساخت QR Code</h2>
+        <textarea id="text-input" placeholder="یک متن برای تست وارد کنید..." rows="3">test</textarea>
+        <button id="generate-btn" onclick="generateQRCode()">دریافت JSON ساخت کد</button>
+        <div id="generate-result" class="result-container" hidden>
+            <h3>خروجی JSON:</h3>
+            <pre id="generate-json-output"></pre>
+            <button class="copy-btn" onclick="copyToClipboard('generate-json-output', this)">کپی کردن JSON</button>
         </div>
+        <div id="generate-loader" class="loader" hidden>در حال ارتباط با سرور...</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()">دریافت JSON خواندن کد</button>
+        <div id="read-result" class="result-container" hidden>
+            <h3>خروجی JSON:</h3>
+            <pre id="read-json-output"></pre>
+            <button class="copy-btn" onclick="copyToClipboard('read-json-output', this)">کپی کردن JSON</button>
         </div>
+         <div id="read-loader" class="loader" hidden>در حال آپلود و پردازش...</div>
     </div>
     <script>
         const API_BASE_URL = "https://elias207-qrcode.hf.space/gradio_api/";
         function generateSessionHash() { return Math.random().toString(36).substring(2, 11); }
         async function callGradioApi(fnIndex, data, sessionHash) {
             await fetch(API_BASE_URL + "queue/join?", {
                 method: "POST",
                 const interval = setInterval(async () => {
                     try {
                         const response = await fetch(API_BASE_URL + `queue/data?session_hash=${sessionHash}`);
+                        if (!response.ok) { clearInterval(interval); reject(new Error("خطا در شبکه با کد: " + response.status)); return; }
                         const responseText = await response.text();
                         const lastLine = responseText.trim().split('\n').pop();
                                 resolve(result);
                             } else if (["queue_full", "unexpected_error"].includes(result.msg)) {
                                 clearInterval(interval);
+                                reject(new Error("خطای API: " + result.msg));
                             }
                         }
                     } catch (error) {
         }
         async function generateQRCode() {
+            const btn = document.getElementById('generate-btn'), loader = document.getElementById('generate-loader');
+            const resultDiv = document.getElementById('generate-result'), outputPre = document.getElementById('generate-json-output');
+            btn.disabled = true; loader.hidden = false; resultDiv.hidden = true;
             try {
+                const text = document.getElementById('text-input').value;
                 const sessionHash = generateSessionHash();
+                const result = await callGradioApi(0, [text], sessionHash);
+                outputPre.textContent = JSON.stringify(result, null, 2);
+                resultDiv.hidden = false;
             } catch (error) {
                 alert("خطا در ساخت کد: " + error.message);
+                outputPre.textContent = "خطا: " + error.message;
+                resultDiv.hidden = false;
             } finally {
+                btn.disabled = false; loader.hidden = true;
             }
         }
             if (fileInput.files.length === 0) { alert("لطفا فایلی انتخاب کنید."); return; }
             const file = fileInput.files[0];
+            const btn = document.getElementById('read-btn'), loader = document.getElementById('read-loader');
+            const resultDiv = document.getElementById('read-result'), outputPre = document.getElementById('read-json-output');
+            btn.disabled = true; loader.hidden = false; resultDiv.hidden = true;
             try {
+                // 1. آپلود فایل
                 const formData = new FormData();
                 formData.append("files", file);
                 const uploadRes = await fetch(API_BASE_URL + "upload", { method: "POST", body: formData });
+                if (!uploadRes.ok) throw new Error("آپلود فایل ناموفق بود. کد وضعیت: " + uploadRes.status);
                 const uploadResult = await uploadRes.json();
                 const tempFilePath = uploadResult[0];
+                // 2. ارسال درخواست پردازش با اطلاعات کامل فایل
                 const sessionHash = generateSessionHash();
+                // **مهم**: ساختار کامل دیتا برای فایل
+                const fileData = [{
+                    "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, fileData, sessionHash);
+                outputPre.textContent = JSON.stringify(result, null, 2);
+                resultDiv.hidden = false;
             } catch (error) {
                 alert("خطا در خواندن کد: " + error.message);
+                outputPre.textContent = "خطا: " + error.message;
+                resultDiv.hidden = false;
             } finally {
+                btn.disabled = false; loader.hidden = true;
             }
         }
+        function copyToClipboard(elementId, buttonElement) {
+            const text = document.getElementById(elementId).textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                const originalText = buttonElement.textContent;
+                buttonElement.textContent = 'کپی شد!';
+                setTimeout(() => { buttonElement.textContent = originalText; }, 2000);
+            });
+        }
     </script>
 </body>
 </html>