Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

185845e

verified ·

1 Parent(s): 4d00960

Update index.html

Browse files

Files changed (1) hide show

index.html +282 -19

index.html CHANGED Viewed

@@ -1,19 +1,282 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<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: 20px;
+            flex-wrap: wrap;
+        }
+        .container {
+            background-color: #ffffff;
+            padding: 25px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 450px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        h2 {
+            text-align: center;
+            color: #0d6efd;
+            margin-top: 0;
+            border-bottom: 2px solid #eee;
+            padding-bottom: 10px;
+        }
+        label, button, input {
+            font-size: 16px;
+        }
+        textarea, input[type="file"] {
+            width: 100%;
+            padding: 10px;
+            border-radius: 6px;
+            border: 1px solid #ddd;
+            box-sizing: border-box;
+            resize: vertical;
+        }
+        button {
+            background-color: #0d6efd;
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            width: 100%;
+        }
+        button:hover {
+            background-color: #0b5ed7;
+        }
+        button:disabled {
+            background-color: #6c757d;
+            cursor: not-allowed;
+        }
+        .result-box {
+            margin-top: 15px;
+            padding: 15px;
+            border: 1px dashed #ccc;
+            border-radius: 6px;
+            min-height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        #qr-image {
+            max-width: 100%;
+            height: auto;
+            border-radius: 4px;
+        }
+        .loader {
+            font-style: italic;
+            color: #666;
+        }
+        #read-result {
+            word-break: break-all;
+            white-space: pre-wrap;
+        }
+    </style>
+</head>
+<body>
+    <!-- بخش ساخت QR Code -->
+    <div class="container">
+        <h2>ساخت QR Code</h2>
+        <label for="qr-text">متن مورد نظر را وارد کنید:</label>
+        <textarea id="qr-text" rows="4" placeholder="مثال: https://google.com"></textarea>
+        <button id="generate-btn" onclick="generateQRCode()">ساخت QR Code</button>
+        <div id="generate-result-box" class="result-box">
+            <span class="loader">تصویر QR Code اینجا نمایش داده می‌شود.</span>
+        </div>
+    </div>
+    <!-- بخش خواندن QR Code -->
+    <div class="container">
+        <h2>خواندن QR Code</h2>
+        <label for="qr-file">فایل تصویر QR Code را انتخاب کنید:</label>
+        <input type="file" id="qr-file" accept="image/*">
+        <button id="read-btn" onclick="readQRCode()">خواندن از تصویر</button>
+        <div id="read-result-box" class="result-box">
+            <p id="read-result" class="loader">متن خوانده شده اینجا نمایش داده می‌شود.</p>
+        </div>
+    </div>
+    <script>
+        const API_BASE_URL = "https://cultrix-qrcode-read-generate.hf.space/gradio_api";
+        // گرفتن ارجاع به عناصر HTML
+        const generateBtn = document.getElementById('generate-btn');
+        const readBtn = document.getElementById('read-btn');
+        const qrTextInput = document.getElementById('qr-text');
+        const qrFileInput = document.getElementById('qr-file');
+        const generateResultBox = document.getElementById('generate-result-box');
+        const readResultBox = document.getElementById('read-result-box');
+        const readResultP = document.getElementById('read-result');
+        // تابع برای تولید یک رشته تصادفی برای session_hash
+        function generateSessionHash() {
+            return Math.random().toString(36).substring(2, 15);
+        }
+        // تابع برای گوش دادن به نتایج از طریق EventSource
+        function listenForData(sessionHash, onComplete, onError) {
+            const eventSource = new EventSource(`${API_BASE_URL}/queue/data?session_hash=${sessionHash}`);
+            eventSource.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                if (data.msg === 'process_completed') {
+                    eventSource.close();
+                    onComplete(data.output);
+                } else if (data.msg === 'process_generating' || data.msg === 'process_starts') {
+                    // در حال پردازش...
+                    console.log('Processing...');
+                }
+            };
+            eventSource.onerror = function(err) {
+                console.error("EventSource failed:", err);
+                eventSource.close();
+                onError("خطا در برقراری ارتباط با سرور.");
+            };
+        }
+        // تابع برای ساخت QR Code
+        async function generateQRCode() {
+            const text = qrTextInput.value.trim();
+            if (!text) {
+                alert("لطفاً متنی را برای ساخت QR Code وارد کنید.");
+                return;
+            }
+            generateBtn.disabled = true;
+            generateResultBox.innerHTML = '<span class="loader">در حال ساخت... لطفاً صبر کنید.</span>';
+            const sessionHash = generateSessionHash();
+            const payload = {
+                "data": [text],
+                "event_data": null,
+                "fn_index": 0, // ایندکس تابع ساخت QR
+                "trigger_id": 5, // این مقادیر از لاگ‌ها گرفته شده
+                "session_hash": sessionHash
+            };
+            try {
+                // 1. ارسال درخواست برای شروع پردازش
+                const response = await fetch(`${API_BASE_URL}/queue/join?`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                if (!response.ok) throw new Error('خطا در ارسال درخواست به صف.');
+                // 2. گوش دادن برای دریافت نتیجه
+                listenForData(sessionHash,
+                    (output) => {
+                        const imageUrl = `${API_BASE_URL.replace('/gradio_api', '')}/file=${output.data[0].path}`;
+                        generateResultBox.innerHTML = `<img id="qr-image" src="${imageUrl}" alt="Generated QR Code">`;
+                        generateBtn.disabled = false;
+                    },
+                    (errorMsg) => {
+                        generateResultBox.innerHTML = `<span style="color:red;">${errorMsg}</span>`;
+                        generateBtn.disabled = false;
+                    }
+                );
+            } catch (error) {
+                console.error('Error generating QR code:', error);
+                generateResultBox.innerHTML = `<span style="color:red;">خطا: ${error.message}</span>`;
+                generateBtn.disabled = false;
+            }
+        }
+        // تابع برای خواندن QR Code
+        async function readQRCode() {
+            const file = qrFileInput.files[0];
+            if (!file) {
+                alert("لطفاً یک فایل تصویر را انتخاب کنید.");
+                return;
+            }
+            readBtn.disabled = true;
+            readResultP.textContent = 'در حال آپلود و پردازش...';
+            readResultP.classList.add('loader');
+            try {
+                // 1. آپلود فایل تصویر
+                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 serverFilePath = uploadResult[0];
+                // 2. ارسال درخواست برای خواندن QR کد با مسیر فایل آپلود شده
+                const sessionHash = generateSessionHash();
+                const payload = {
+                    "data": [{
+                        "path": serverFilePath,
+                        "url": `${API_BASE_URL.replace('/gradio_api', '')}/file=${serverFilePath}`,
+                        "orig_name": file.name,
+                        "size": file.size,
+                        "mime_type": file.type,
+                        "meta": { "_type": "gradio.FileData" }
+                    }],
+                    "event_data": null,
+                    "fn_index": 1, // ایندکس تابع خواندن QR
+                    "trigger_id": 13,
+                    "session_hash": sessionHash
+                };
+                const joinResponse = await fetch(`${API_BASE_URL}/queue/join?`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                if (!joinResponse.ok) throw new Error('خطا در ارسال درخواست خواندن به صف.');
+                // 3. گوش دادن برای دریافت نتیجه
+                listenForData(sessionHash,
+                    (output) => {
+                        const decodedText = output.data[0];
+                        readResultP.textContent = decodedText || "متنی در QR Code یافت نشد.";
+                        readResultP.classList.remove('loader');
+                        readBtn.disabled = false;
+                    },
+                    (errorMsg) => {
+                        readResultP.textContent = errorMsg;
+                        readResultP.style.color = 'red';
+                        readBtn.disabled = false;
+                    }
+                );
+            } catch (error) {
+                console.error('Error reading QR code:', error);
+                readResultP.textContent = `خطا: ${error.message}`;
+                readResultP.style.color = 'red';
+                readBtn.disabled = false;
+            }
+        }
+    </script>
+</body>
+</html>