Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

86bec2a

verified ·

1 Parent(s): 28ef445

Update index.html

Browse files

Files changed (1) hide show

index.html +160 -110

index.html CHANGED Viewed

@@ -3,103 +3,169 @@
 <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",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ "fn_index": fnIndex, "data": data, "session_hash": sessionHash }),
-            });
-            return new Promise((resolve, reject) => {
-                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();
-                        if (lastLine && lastLine.startsWith('data:')) {
-                            const result = JSON.parse(lastLine.substring(5).trim());
-                            if (result.msg === "process_completed") {
-                                clearInterval(interval);
-                                resolve(result);
-                            } else if (["queue_full", "unexpected_error"].includes(result.msg)) {
-                                clearInterval(interval);
-                                reject(new Error("خطای API: " + result.msg));
-                            }
-                        }
-                    } catch (error) {
-                        if (!(error instanceof SyntaxError)) { clearInterval(interval); reject(error); }
-                    }
-                }, 1000);
             });
         }
         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;
             }
         }
@@ -109,51 +175,35 @@
             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>

 <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>
     <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>
     <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 به /api/ تغییر کرد ***
+        const API_ROOT_URL = "https://elias207-qrcode.hf.space/";
+        const API_BASE_URL = API_ROOT_URL + "api/";
+        // اندپوینت‌های predict معمولا یک نام خاص دارند. بیایید predict/ را امتحان کنیم
+        const GENERATE_ENDPOINT = API_BASE_URL + "predict/";
+        const READ_ENDPOINT = API_BASE_URL + "predict_1/"; // معمولا تابع دوم _1 می‌گیرد
+        async function uploadFile(file) {
+            const fileData = await new Promise(resolve => {
+                const reader = new FileReader();
+                reader.onload = e => resolve(e.target.result);
+                reader.readAsDataURL(file);
             });
+            return {
+                data: fileData,
+                name: file.name
+            };
         }
         async function generateQRCode() {
+            const textInput = document.getElementById('text-input').value;
+            if (!textInput.trim()) { alert("لطفاً متنی وارد کنید."); return; }
             const btn = document.getElementById('generate-btn'), loader = document.getElementById('generate-loader');
+            const placeholder = document.getElementById('generate-placeholder'), qrImage = document.getElementById('qr-image');
+            btn.disabled = true; loader.classList.remove('hidden'); placeholder.classList.add('hidden'); qrImage.classList.add('hidden');
             try {
+                const response = await fetch(GENERATE_ENDPOINT, {
+                    method: "POST",
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ "data": [textInput] }),
+                });
+                if (!response.ok) throw new Error("خطای سرور: " + response.status);
+                const result = await response.json();
+                if (result.data?.[0]?.name) {
+                    const imageUrl = API_ROOT_URL + "file=" + result.data[0].name;
+                    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');
             }
         }
             const file = fileInput.files[0];
             const btn = document.getElementById('read-btn'), loader = document.getElementById('read-loader');
+            const readText = document.getElementById('read-text');
+            btn.disabled = true; loader.classList.remove('hidden'); readText.textContent = "در حال پردازش...";
             try {
+                const uploadedFileObject = await uploadFile(file);
+                const response = await fetch(READ_ENDPOINT, {
+                    method: "POST",
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ "data": [uploadedFileObject] }),
+                });
+                if (!response.ok) throw new Error("خطای سرور: " + response.status);
+                const result = await response.json();
+                if (result.data?.[0]) {
+                    readText.textContent = "نتیجه: " + result.data[0];
+                } else {
+                     readText.textContent = "نتیجه‌ای یافت نشد.";
+                }
             } catch (error) {
                 alert("خطا در خواندن کد: " + error.message);
+                readText.textContent = "خطا در خواندن کد.";
             } finally {
+                btn.disabled = false; loader.classList.add('hidden');
             }
         }
     </script>
 </body>
 </html>