Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

eba0b23

verified ·

1 Parent(s): c24ad72

Update index.html

Browse files

Files changed (1) hide show

index.html +345 -89

index.html CHANGED Viewed

@@ -3,130 +3,386 @@
 <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>
     <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-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');
             }
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ابزار مدرن QR Code</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
     <style>
+        :root {
+            --primary-color: #8e44ad;
+            --secondary-color: #3498db;
+            --background-start: #141e30;
+            --background-end: #243b55;
+            --text-color: #ecf0f1;
+            --input-bg: rgba(255, 255, 255, 0.1);
+            --container-bg: rgba(255, 255, 255, 0.15);
+            --border-color: rgba(255, 255, 255, 0.2);
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background: linear-gradient(135deg, var(--background-end), var(--background-start));
+            color: var(--text-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+            gap: 40px;
+            flex-wrap: wrap;
+        }
+        .main-title {
+            width: 100%;
+            text-align: center;
+            font-size: 2.5rem;
+            font-weight: 300;
+            margin-bottom: 20px;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        .main-title span {
+            font-weight: 700;
+            color: #fff;
+        }
+        .container {
+            background: var(--container-bg);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid var(--border-color);
+            width: 100%;
+            max-width: 450px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
+        }
+        h2 {
+            text-align: center;
+            color: #fff;
+            margin-top: 0;
+            font-weight: 500;
+            border-bottom: 1px solid var(--secondary-color);
+            padding-bottom: 15px;
+        }
+        label {
+            font-size: 0.9rem;
+            margin-bottom: -10px;
+            color: #bdc3c7;
+        }
+        textarea, .file-label {
+            width: 100%;
+            padding: 12px;
+            border-radius: 8px;
+            border: 1px solid var(--border-color);
+            box-sizing: border-box;
+            font-size: 1rem;
+            background: var(--input-bg);
+            color: var(--text-color);
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+        textarea::placeholder {
+            color: #95a5a6;
+        }
+        textarea:focus, .file-label:hover {
+            outline: none;
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
+        }
+        /* Custom file input */
+        .file-wrapper {
+            position: relative;
+            cursor: pointer;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        .file-label {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+        }
+        #file-name {
+            margin-top: 10px;
+            font-size: 0.85rem;
+            color: #bdc3c7;
+            text-align: center;
+            height: 1.2em;
+        }
+        button {
+            padding: 14px 20px;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+        button:hover:not(:disabled) {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        }
+        button:disabled {
+            background: #555;
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+        .result-box {
+            margin-top: 15px;
+            padding: 20px;
+            background: var(--input-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            min-height: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            word-wrap: break-word;
+            color: #ecf0f1;
+            font-size: 1rem;
+        }
+        #qr-code-display img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8px;
+            border: 2px solid white;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .loader {
+            border: 4px solid #555;
+            border-top: 4px solid var(--secondary-color);
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
+        }
     </style>
 </head>
 <body>
+    <h1 class="main-title">ابزار مدرن <span>QR Code</span></h1>
+    <!-- بخش ساخت QR Code -->
     <div class="container">
+        <h2>ساخت QR Code از متن</h2>
+        <label for="text-input">متن خود را وارد کنید:</label>
+        <textarea id="text-input" rows="4" placeholder="مثلا: https://google.com">سلام دنیا</textarea>
+        <button id="generate-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2v0z"/><path d="M12 8l4 4-4 4"/><path d="M8 12h7"/></svg>
+            <span>ساخت QR Code</span>
+        </button>
         <div class="result-box">
+            <div id="generate-loader" class="loader"></div>
+            <div id="qr-code-display"></div>
         </div>
     </div>
+    <!-- بخش خواندن QR Code -->
     <div class="container">
+        <h2>خواندن متن از QR Code</h2>
+        <label for="file-input">فایل تصویر QR Code را انتخاب کنید:</label>
+        <div class="file-wrapper">
+            <input type="file" id="file-input" accept="image/*">
+            <label for="file-input" class="file-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                <span>انتخاب فایل تصویر</span>
+            </label>
+        </div>
+        <p id="file-name"></p>
+        <button id="read-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+            <span>خواندن QR Code</span>
+        </button>
         <div class="result-box">
+            <div id="read-loader" class="loader"></div>
+            <p id="decoded-text">نتیجه در اینجا نمایش داده می‌شود.</p>
         </div>
     </div>
     <script>
+        // --- کد جاوااسکریپت بدون هیچ تغییری باقی مانده است ---
+        const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
+        // --- دریافت عناصر DOM ---
+        const generateBtn = document.getElementById('generate-btn');
+        const readBtn = document.getElementById('read-btn');
+        const textInput = document.getElementById('text-input');
+        const fileInput = document.getElementById('file-input');
+        const qrCodeDisplay = document.getElementById('qr-code-display');
+        const decodedText = document.getElementById('decoded-text');
+        const generateLoader = document.getElementById('generate-loader');
+        const readLoader = document.getElementById('read-loader');
+        const fileNameDisplay = document.getElementById('file-name');
+        // نمایش نام فایل انتخاب شده
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files.length > 0) {
+                fileNameDisplay.textContent = `فایل انتخاب شده: ${fileInput.files[0].name}`;
+            } else {
+                fileNameDisplay.textContent = '';
+            }
+        });
+        // --- توابع کمکی ---
+        const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
+        const listenForData = (sessionHash, onResult, onError) => {
+            const eventSource = new EventSource(`${SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
+            eventSource.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.msg === "process_completed") {
+                    eventSource.close();
+                    if (data.output.error) {
+                        onError(data.output.error);
+                    } else {
+                        onResult(data.output.data);
+                    }
+                } else if (data.msg === "process_starts") {
+                    console.log("پردازش شروع شد...");
+                } else if (data.msg === "process_failed") {
+                    eventSource.close();
+                    onError("پردازش با خطا مواجه شد.");
+                }
+            };
+            eventSource.onerror = (err) => {
+                console.error("EventSource failed:", err);
+                eventSource.close();
+                onError("خطا در ارتباط با سرور.");
+            };
+        };
+        // --- منطق ساخت QR Code ---
+        generateBtn.addEventListener('click', async () => {
+            const text = textInput.value.trim();
+            if (!text) return alert("لطفاً متنی را وارد کنید.");
+            generateLoader.style.display = 'block';
+            qrCodeDisplay.innerHTML = '';
+            generateBtn.disabled = true;
+            const sessionHash = generateSessionHash();
             try {
+                const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ fn_index: 0, data: [text], session_hash: sessionHash })
+                });
+                if (!joinResponse.ok) throw new Error(`خطا در ارسال درخواست: ${joinResponse.statusText}`);
+                listenForData(
+                    sessionHash,
+                    (result) => {
+                        if (result && result[0]) {
+                            qrCodeDisplay.innerHTML = result[0];
+                        } else {
+                            qrCodeDisplay.innerText = "خطا: خروجی معتبر دریافت نشد.";
+                        }
+                    },
+                    (error) => {
+                        alert(`خطا در پردازش: ${error}`);
+                        qrCodeDisplay.innerText = "خطا در ساخت تصویر.";
+                    }
+                );
             } catch (error) {
+                alert(`یک خطا رخ داد: ${error.message}`);
             } finally {
+                generateLoader.style.display = 'none';
+                generateBtn.disabled = false;
             }
+        });
+        // --- منطق خواندن QR Code ---
+        readBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) return alert("لطفاً یک فایل تصویر انتخاب کنید.");
+            readLoader.style.display = 'block';
+            decodedText.innerText = '';
+            readBtn.disabled = true;
             try {
                 const formData = new FormData();
+                formData.append('files', file);
+                const uploadResponse = await fetch(`${SPACE_URL}/gradio_api/upload`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!uploadResponse.ok) throw new Error(`خطا در آپلود فایل: ${uploadResponse.statusText}`);
+                const uploadResult = await uploadResponse.json();
+                const serverFilePath = uploadResult[0];
+                const fileDataObject = {
+                    path: serverFilePath,
+                    url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`,
+                    orig_name: file.name,
+                };
+                const sessionHash = generateSessionHash();
+                const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ fn_index: 1, data: [fileDataObject], session_hash: sessionHash })
+                });
+                if (!joinResponse.ok) throw new Error(`خطا در ارسال به صف: ${joinResponse.statusText}`);
+                listenForData(
+                    sessionHash,
+                    (result) => {
+                        decodedText.innerText = `متن خوانده شده: \n ${result[0]}`;
+                    },
+                    (error) => {
+                        alert(`خطا در پردازش: ${error}`);
+                        decodedText.innerText = "خطا در خواندن کد.";
+                    }
+                );
             } catch (error) {
+                alert(`یک خطا رخ داد: ${error.message}`);
+                decodedText.innerText = "نتیجه در اینجا نمایش داده می‌شود.";
             } finally {
+                readLoader.style.display = 'none';
+                readBtn.disabled = false;
+                // fileInput.value = ''; // ریست کردن اینپوت فایل باعث حذف نام فایل از نمایش می‌شود
             }
+        });
     </script>
 </body>
 </html>