Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

aeb6c10

verified ·

1 Parent(s): 86bec2a

Update index.html

Browse files

Files changed (1) hide show

index.html +67 -144

index.html CHANGED Viewed

@@ -3,102 +3,30 @@
 <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>
@@ -107,36 +35,50 @@
         <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');
@@ -144,25 +86,13 @@
             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');
@@ -172,33 +102,26 @@
         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'), 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');

 <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; 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; }
+        h2 { margin: 0 0 15px 0; color: #0056b3; border-bottom: 2px solid #0056b3; padding-bottom: 5px; }
+        textarea, input[type="file"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
+        button { background-color: #007bff; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; }
+        button:disabled { background-color: #a0c9ff; }
+        .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 class="result-box">
             <div id="generate-loader" class="loader hidden"></div>
+            <img id="qr-image" class="hidden" />
             <span id="generate-placeholder">تصویر QR Code اینجا نمایش داده می‌شود.</span>
         </div>
     </div>
         <h2>خواندن QR Code</h2>
         <input type="file" id="file-input" accept="image/*">
         <button id="read-btn" onclick="readQRCode()">خواندن کد</button>
+        <div class="result-box">
              <div id="read-loader" class="loader hidden"></div>
             <p id="read-text">نتیجه خواندن کد اینجا نمایش داده می‌شود.</p>
         </div>
     </div>
     <script>
+        // آدرس اسپیسی که API آن فعال است
+        const API_ROOT_URL = "https://cultrix-qrcode-read-generate.hf.space/";
+        const API_BASE_URL = API_ROOT_URL + "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("Network Error")); return; }
+                        const text = await response.text();
+                        const lastLine = text.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 (result.msg === "unexpected_error") {
+                                clearInterval(interval); reject(new Error("API Error"));
+                            }
+                        }
+                    } catch (e) { if (!(e instanceof SyntaxError)) { clearInterval(interval); reject(e); } }
+                }, 1000);
             });
         }
         async function generateQRCode() {
+            const text = document.getElementById('text-input').value.trim();
+            if (!text) { 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 result = await callGradioApi(0, [text], generateSessionHash());
+                if (result.output?.data?.[0]?.url) {
+                    qrImage.src = result.output.data[0].url;
                     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');
         async function readQRCode() {
             const fileInput = document.getElementById('file-input');
             if (fileInput.files.length === 0) { alert("لطفا فایلی انتخاب کنید."); return; }
+            const btn = document.getElementById('read-btn'), loader = document.getElementById('read-loader'), readText = document.getElementById('read-text');
             btn.disabled = true; loader.classList.remove('hidden'); readText.textContent = "در حال پردازش...";
             try {
+                const file = fileInput.files[0];
+                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("آپلود فایل ناموفق بود.");
+                const uploadResult = await uploadRes.json();
+                const fileData = [{ ...uploadResult[0], meta: {"_type": "gradio.FileData"} }];
+                const result = await callGradioApi(1, fileData, generateSessionHash());
+                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');