Update index.html
Browse files- index.html +150 -20
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>سازنده و خواننده QR Code (نسخه
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -72,6 +72,7 @@
|
|
| 72 |
justify-content: center;
|
| 73 |
align-items: center;
|
| 74 |
text-align: center;
|
|
|
|
| 75 |
}
|
| 76 |
#qr-image {
|
| 77 |
max-width: 100%;
|
|
@@ -86,6 +87,60 @@
|
|
| 86 |
word-break: break-all;
|
| 87 |
white-space: pre-wrap;
|
| 88 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 89 |
</style>
|
| 90 |
</head>
|
| 91 |
<body>
|
|
@@ -94,11 +149,27 @@
|
|
| 94 |
<div class="container">
|
| 95 |
<h2>ساخت QR Code</h2>
|
| 96 |
<label for="qr-text">متن مورد نظر را وارد کنید:</label>
|
| 97 |
-
<textarea id="qr-text" rows="4" placeholder="مثال: https://google.com"
|
| 98 |
<button id="generate-btn" onclick="generateQRCode()">ساخت QR Code</button>
|
| 99 |
<div id="generate-result-box" class="result-box">
|
| 100 |
<span class="loader">تصویر QR Code اینجا نمایش داده می‌شود.</span>
|
| 101 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 102 |
</div>
|
| 103 |
|
| 104 |
<!-- بخش خواندن QR Code -->
|
|
@@ -110,11 +181,25 @@
|
|
| 110 |
<div id="read-result-box" class="result-box">
|
| 111 |
<p id="read-result" class="loader">متن خوانده شده اینجا نمایش داده می‌شود.</p>
|
| 112 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 113 |
</div>
|
| 114 |
|
| 115 |
<script>
|
| 116 |
-
// *** خط زیر اصلاح شد ***
|
| 117 |
-
// آدرس API صحیح برای اسپیس Elias207/QRcode
|
| 118 |
const API_URL = "https://elias207-qrcode.hf.space/api/predict/";
|
| 119 |
|
| 120 |
// گرفتن ارجاع به عناصر HTML
|
|
@@ -123,7 +208,24 @@
|
|
| 123 |
const qrTextInput = document.getElementById('qr-text');
|
| 124 |
const qrFileInput = document.getElementById('qr-file');
|
| 125 |
const generateResultBox = document.getElementById('generate-result-box');
|
|
|
|
| 126 |
const readResultP = document.getElementById('read-result');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 127 |
|
| 128 |
// تابع برای ساخت QR Code
|
| 129 |
async function generateQRCode() {
|
|
@@ -135,24 +237,29 @@
|
|
| 135 |
|
| 136 |
generateBtn.disabled = true;
|
| 137 |
generateResultBox.innerHTML = '<span class="loader">در حال ساخت... لطفاً صبر کنید.</span>';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 138 |
|
| 139 |
try {
|
| 140 |
const response = await fetch(API_URL, {
|
| 141 |
method: "POST",
|
| 142 |
headers: { "Content-Type": "application/json" },
|
| 143 |
-
body: JSON.stringify(
|
| 144 |
-
"fn_index": 0, // ایندکس تابع ساخت QR
|
| 145 |
-
"data": [text]
|
| 146 |
-
})
|
| 147 |
});
|
| 148 |
|
|
|
|
|
|
|
|
|
|
| 149 |
if (!response.ok) {
|
| 150 |
-
throw new Error(`خطای
|
| 151 |
}
|
| 152 |
-
|
| 153 |
-
const result = await response.json();
|
| 154 |
-
const imageData = result.data[0];
|
| 155 |
|
|
|
|
| 156 |
if (imageData) {
|
| 157 |
generateResultBox.innerHTML = `<img id="qr-image" src="${imageData}" alt="Generated QR Code">`;
|
| 158 |
} else {
|
|
@@ -161,7 +268,8 @@
|
|
| 161 |
|
| 162 |
} catch (error) {
|
| 163 |
console.error('Error generating QR code:', error);
|
| 164 |
-
generateResultBox.innerHTML = `<span style="color:red;"
|
|
|
|
| 165 |
} finally {
|
| 166 |
generateBtn.disabled = false;
|
| 167 |
}
|
|
@@ -178,36 +286,58 @@
|
|
| 178 |
readBtn.disabled = true;
|
| 179 |
readResultP.textContent = 'در حال خواندن تصویر...';
|
| 180 |
readResultP.classList.add('loader');
|
|
|
|
|
|
|
|
|
|
|
|
|
| 181 |
|
| 182 |
const reader = new FileReader();
|
| 183 |
reader.readAsDataURL(file);
|
| 184 |
reader.onload = async () => {
|
| 185 |
const fileDataUrl = reader.result;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 186 |
|
| 187 |
try {
|
| 188 |
const response = await fetch(API_URL, {
|
| 189 |
method: "POST",
|
| 190 |
headers: { "Content-Type": "application/json" },
|
| 191 |
-
body: JSON.stringify(
|
| 192 |
-
"fn_index": 1, // ایندکس تابع خواندن QR
|
| 193 |
-
"data": [fileDataUrl]
|
| 194 |
-
})
|
| 195 |
});
|
| 196 |
|
|
|
|
|
|
|
|
|
|
| 197 |
if (!response.ok) {
|
| 198 |
-
|
| 199 |
}
|
| 200 |
|
| 201 |
-
const result = await response.json();
|
| 202 |
const decodedText = result.data[0];
|
| 203 |
|
| 204 |
readResultP.textContent = decodedText || "متنی در QR Code یافت نشد.";
|
| 205 |
readResultP.classList.remove('loader');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 206 |
|
| 207 |
} catch (error) {
|
| 208 |
console.error('Error reading QR code:', error);
|
| 209 |
-
readResultP.textContent =
|
| 210 |
readResultP.style.color = 'red';
|
|
|
|
| 211 |
} finally {
|
| 212 |
readBtn.disabled = false;
|
| 213 |
}
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>سازنده و خواننده QR Code (نسخه دیباگ)</title>
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
|
|
| 72 |
justify-content: center;
|
| 73 |
align-items: center;
|
| 74 |
text-align: center;
|
| 75 |
+
position: relative;
|
| 76 |
}
|
| 77 |
#qr-image {
|
| 78 |
max-width: 100%;
|
|
|
|
| 87 |
word-break: break-all;
|
| 88 |
white-space: pre-wrap;
|
| 89 |
}
|
| 90 |
+
.copy-btn {
|
| 91 |
+
position: absolute;
|
| 92 |
+
top: 8px;
|
| 93 |
+
left: 8px;
|
| 94 |
+
background-color: #6c757d;
|
| 95 |
+
color: white;
|
| 96 |
+
padding: 5px 10px;
|
| 97 |
+
border-radius: 4px;
|
| 98 |
+
font-size: 12px;
|
| 99 |
+
cursor: pointer;
|
| 100 |
+
width: auto;
|
| 101 |
+
}
|
| 102 |
+
.copy-btn:hover {
|
| 103 |
+
background-color: #5a6268;
|
| 104 |
+
}
|
| 105 |
+
/* بخش دیباگ */
|
| 106 |
+
.debug-section {
|
| 107 |
+
margin-top: 15px;
|
| 108 |
+
border: 1px solid #e0e0e0;
|
| 109 |
+
border-radius: 6px;
|
| 110 |
+
}
|
| 111 |
+
.debug-section summary {
|
| 112 |
+
padding: 10px;
|
| 113 |
+
background-color: #f8f9fa;
|
| 114 |
+
cursor: pointer;
|
| 115 |
+
font-weight: bold;
|
| 116 |
+
}
|
| 117 |
+
.debug-content {
|
| 118 |
+
padding: 10px;
|
| 119 |
+
background-color: #fff;
|
| 120 |
+
}
|
| 121 |
+
.debug-content h4 {
|
| 122 |
+
margin-top: 0;
|
| 123 |
+
display: flex;
|
| 124 |
+
justify-content: space-between;
|
| 125 |
+
align-items: center;
|
| 126 |
+
}
|
| 127 |
+
.debug-content pre {
|
| 128 |
+
background-color: #e9ecef;
|
| 129 |
+
padding: 10px;
|
| 130 |
+
border-radius: 4px;
|
| 131 |
+
white-space: pre-wrap;
|
| 132 |
+
word-break: break-all;
|
| 133 |
+
font-size: 13px;
|
| 134 |
+
max-height: 150px;
|
| 135 |
+
overflow-y: auto;
|
| 136 |
+
}
|
| 137 |
+
.copy-json-btn {
|
| 138 |
+
background-color: #198754;
|
| 139 |
+
padding: 2px 8px;
|
| 140 |
+
font-size: 12px;
|
| 141 |
+
width: auto;
|
| 142 |
+
border-radius: 4px;
|
| 143 |
+
}
|
| 144 |
</style>
|
| 145 |
</head>
|
| 146 |
<body>
|
|
|
|
| 149 |
<div class="container">
|
| 150 |
<h2>ساخت QR Code</h2>
|
| 151 |
<label for="qr-text">متن مورد نظر را وارد کنید:</label>
|
| 152 |
+
<textarea id="qr-text" rows="4" placeholder="مثال: https://google.com">سلام دنیا</textarea>
|
| 153 |
<button id="generate-btn" onclick="generateQRCode()">ساخت QR Code</button>
|
| 154 |
<div id="generate-result-box" class="result-box">
|
| 155 |
<span class="loader">تصویر QR Code اینجا نمایش داده می‌شود.</span>
|
| 156 |
</div>
|
| 157 |
+
<!-- بخش دیباگ برای ساخت -->
|
| 158 |
+
<details class="debug-section">
|
| 159 |
+
<summary>اطلاعات دیباگ (ساخت کد)</summary>
|
| 160 |
+
<div class="debug-content">
|
| 161 |
+
<h4>
|
| 162 |
+
<span>Request Payload (JSON ارسالی)</span>
|
| 163 |
+
<button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('generate-req-payload').textContent)">کپی</button>
|
| 164 |
+
</h4>
|
| 165 |
+
<pre id="generate-req-payload">هنوز درخواستی ارسال نشده است.</pre>
|
| 166 |
+
<h4>
|
| 167 |
+
<span>Server Response (پاسخ دریافتی)</span>
|
| 168 |
+
<button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('generate-res-payload').textContent)">کپی</button>
|
| 169 |
+
</h4>
|
| 170 |
+
<pre id="generate-res-payload">هنوز پاسخی دریافت نشده است.</pre>
|
| 171 |
+
</div>
|
| 172 |
+
</details>
|
| 173 |
</div>
|
| 174 |
|
| 175 |
<!-- بخش خواندن QR Code -->
|
|
|
|
| 181 |
<div id="read-result-box" class="result-box">
|
| 182 |
<p id="read-result" class="loader">متن خوانده شده اینجا نمایش داده می‌شود.</p>
|
| 183 |
</div>
|
| 184 |
+
<!-- بخش دیباگ برای خواندن -->
|
| 185 |
+
<details class="debug-section">
|
| 186 |
+
<summary>اطلاعات دیباگ (خواندن کد)</summary>
|
| 187 |
+
<div class="debug-content">
|
| 188 |
+
<h4>
|
| 189 |
+
<span>Request Payload (JSON ارسالی)</span>
|
| 190 |
+
<button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('read-req-payload').textContent)">کپی</button>
|
| 191 |
+
</h4>
|
| 192 |
+
<pre id="read-req-payload">هنوز درخواستی ارسال نشده است.</pre>
|
| 193 |
+
<h4>
|
| 194 |
+
<span>Server Response (پاسخ دریافتی)</span>
|
| 195 |
+
<button class="copy-json-btn" onclick="copyToClipboard(document.getElementById('read-res-payload').textContent)">کپی</button>
|
| 196 |
+
</h4>
|
| 197 |
+
<pre id="read-res-payload">هنوز پاسخی دریافت نشده است.</pre>
|
| 198 |
+
</div>
|
| 199 |
+
</details>
|
| 200 |
</div>
|
| 201 |
|
| 202 |
<script>
|
|
|
|
|
|
|
| 203 |
const API_URL = "https://elias207-qrcode.hf.space/api/predict/";
|
| 204 |
|
| 205 |
// گرفتن ارجاع به عناصر HTML
|
|
|
|
| 208 |
const qrTextInput = document.getElementById('qr-text');
|
| 209 |
const qrFileInput = document.getElementById('qr-file');
|
| 210 |
const generateResultBox = document.getElementById('generate-result-box');
|
| 211 |
+
const readResultBox = document.getElementById('read-result-box');
|
| 212 |
const readResultP = document.getElementById('read-result');
|
| 213 |
+
|
| 214 |
+
// عناصر دیباگ
|
| 215 |
+
const genReqPayload = document.getElementById('generate-req-payload');
|
| 216 |
+
const genResPayload = document.getElementById('generate-res-payload');
|
| 217 |
+
const readReqPayload = document.getElementById('read-req-payload');
|
| 218 |
+
const readResPayload = document.getElementById('read-res-payload');
|
| 219 |
+
|
| 220 |
+
// تابع کمکی برای کپی در کلیپ‌بورد
|
| 221 |
+
function copyToClipboard(text) {
|
| 222 |
+
navigator.clipboard.writeText(text).then(() => {
|
| 223 |
+
alert("متن کپی شد!");
|
| 224 |
+
}).catch(err => {
|
| 225 |
+
console.error('Failed to copy: ', err);
|
| 226 |
+
alert("کپی کردن با خطا مواجه شد.");
|
| 227 |
+
});
|
| 228 |
+
}
|
| 229 |
|
| 230 |
// تابع برای ساخت QR Code
|
| 231 |
async function generateQRCode() {
|
|
|
|
| 237 |
|
| 238 |
generateBtn.disabled = true;
|
| 239 |
generateResultBox.innerHTML = '<span class="loader">در حال ساخت... لطفاً صبر کنید.</span>';
|
| 240 |
+
|
| 241 |
+
const payload = {
|
| 242 |
+
"fn_index": 0,
|
| 243 |
+
"data": [text]
|
| 244 |
+
};
|
| 245 |
+
genReqPayload.textContent = JSON.stringify(payload, null, 2);
|
| 246 |
+
genResPayload.textContent = "در حال دریافت پاسخ...";
|
| 247 |
|
| 248 |
try {
|
| 249 |
const response = await fetch(API_URL, {
|
| 250 |
method: "POST",
|
| 251 |
headers: { "Content-Type": "application/json" },
|
| 252 |
+
body: JSON.stringify(payload)
|
|
|
|
|
|
|
|
|
|
| 253 |
});
|
| 254 |
|
| 255 |
+
const result = await response.json();
|
| 256 |
+
genResPayload.textContent = JSON.stringify(result, null, 2);
|
| 257 |
+
|
| 258 |
if (!response.ok) {
|
| 259 |
+
throw new Error(`خطای سرور: ${response.status} - ${result.error || 'Unknown Error'}`);
|
| 260 |
}
|
|
|
|
|
|
|
|
|
|
| 261 |
|
| 262 |
+
const imageData = result.data[0];
|
| 263 |
if (imageData) {
|
| 264 |
generateResultBox.innerHTML = `<img id="qr-image" src="${imageData}" alt="Generated QR Code">`;
|
| 265 |
} else {
|
|
|
|
| 268 |
|
| 269 |
} catch (error) {
|
| 270 |
console.error('Error generating QR code:', error);
|
| 271 |
+
generateResultBox.innerHTML = `<span style="color:red;">خطا: ${error.message}</span>`;
|
| 272 |
+
genResPayload.textContent = `Error: ${error.message}`;
|
| 273 |
} finally {
|
| 274 |
generateBtn.disabled = false;
|
| 275 |
}
|
|
|
|
| 286 |
readBtn.disabled = true;
|
| 287 |
readResultP.textContent = 'در حال خواندن تصویر...';
|
| 288 |
readResultP.classList.add('loader');
|
| 289 |
+
// حذف دکمه کپی قبلی
|
| 290 |
+
const oldCopyBtn = readResultBox.querySelector('.copy-btn');
|
| 291 |
+
if(oldCopyBtn) oldCopyBtn.remove();
|
| 292 |
+
|
| 293 |
|
| 294 |
const reader = new FileReader();
|
| 295 |
reader.readAsDataURL(file);
|
| 296 |
reader.onload = async () => {
|
| 297 |
const fileDataUrl = reader.result;
|
| 298 |
+
|
| 299 |
+
const payload = {
|
| 300 |
+
"fn_index": 1,
|
| 301 |
+
"data": [fileDataUrl]
|
| 302 |
+
};
|
| 303 |
+
// نمایش بخشی از کد بیس۶۴ برای جلوگیری از شلوغی
|
| 304 |
+
readReqPayload.textContent = JSON.stringify({...payload, data: [fileDataUrl.substring(0, 50) + '...'] }, null, 2);
|
| 305 |
+
readResPayload.textContent = "در حال دریافت پاسخ...";
|
| 306 |
|
| 307 |
try {
|
| 308 |
const response = await fetch(API_URL, {
|
| 309 |
method: "POST",
|
| 310 |
headers: { "Content-Type": "application/json" },
|
| 311 |
+
body: JSON.stringify(payload)
|
|
|
|
|
|
|
|
|
|
| 312 |
});
|
| 313 |
|
| 314 |
+
const result = await response.json();
|
| 315 |
+
readResPayload.textContent = JSON.stringify(result, null, 2);
|
| 316 |
+
|
| 317 |
if (!response.ok) {
|
| 318 |
+
throw new Error(`خطای سرور: ${response.status} - ${result.error || 'Unknown Error'}`);
|
| 319 |
}
|
| 320 |
|
|
|
|
| 321 |
const decodedText = result.data[0];
|
| 322 |
|
| 323 |
readResultP.textContent = decodedText || "متنی در QR Code یافت نشد.";
|
| 324 |
readResultP.classList.remove('loader');
|
| 325 |
+
|
| 326 |
+
// افزودن دکمه کپی در صورت موفقیت‌آمیز بودن
|
| 327 |
+
if (decodedText) {
|
| 328 |
+
const copyBtn = document.createElement('button');
|
| 329 |
+
copyBtn.textContent = 'کپی متن';
|
| 330 |
+
copyBtn.className = 'copy-btn';
|
| 331 |
+
copyBtn.onclick = () => copyToClipboard(decodedText);
|
| 332 |
+
readResultBox.appendChild(copyBtn);
|
| 333 |
+
}
|
| 334 |
+
|
| 335 |
|
| 336 |
} catch (error) {
|
| 337 |
console.error('Error reading QR code:', error);
|
| 338 |
+
readResultP.textContent = `خطا: ${error.message}`;
|
| 339 |
readResultP.style.color = 'red';
|
| 340 |
+
readResPayload.textContent = `Error: ${error.message}`;
|
| 341 |
} finally {
|
| 342 |
readBtn.disabled = false;
|
| 343 |
}
|