Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

App Files Community
Elias207 commited on
Commit
1e4d3b0
·
verified ·
1 Parent(s): a0dc433

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +63 -86
index.html CHANGED
@@ -3,101 +3,81 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>دیباگر QR Code API</title>
7
  <style>
8
- body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding: 20px; gap: 30px; flex-wrap: wrap; }
9
- .container { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 450px; display: flex; flex-direction: column; gap: 15px; }
10
- h2 { margin: 0 0 10px 0; color: #0056b3; border-bottom: 2px solid #0056b3; padding-bottom: 5px; }
11
- textarea, input[type="file"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
12
- button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
13
- button:disabled { background-color: #a0c9ff; cursor: not-allowed; }
14
- button:hover:not(:disabled) { background-color: #0056b3; }
15
- .result-container { display: flex; flex-direction: column; gap: 10px; }
16
- .result-box { margin-top: 10px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; min-height: 100px; }
17
- pre { white-space: pre-wrap; word-break: break-all; margin: 0; font-size: 13px; text-align: left; direction: ltr; }
18
- .copy-btn { background-color: #28a745; }
19
- .copy-btn:hover { background-color: #218838; }
20
- .loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
21
- @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
22
- .hidden { display: none; }
23
  </style>
24
  </head>
25
  <body>
26
 
27
  <!-- بخش ساخت QR Code -->
28
  <div class="container">
29
- <h2>۱. ساخت QR Code (دیباگ)</h2>
30
- <textarea id="text-input" placeholder="یک متن مثل 'salam' وارد کنید" rows="3">salam</textarea>
31
- <button id="generate-btn" onclick="generateQRCode()">دریافت جیسون ساخت</button>
32
- <div class="result-container">
33
- <div id="generate-loader" class="loader hidden"></div>
34
- <div class="result-box">
35
- <pre id="generate-json-output">خروجی JSON اینجا نمایش داده می‌شود.</pre>
36
- </div>
37
- <button id="copy-generate-btn" class="copy-btn hidden" onclick="copyResult('generate-json-output', this)">کپی جیسون خروجی</button>
38
  </div>
 
39
  </div>
40
 
41
  <!-- بخش خواندن QR Code -->
42
  <div class="container">
43
- <h2>۲. خواندن QR Code (دیباگ)</h2>
44
  <input type="file" id="file-input" accept="image/*">
45
- <button id="read-btn" onclick="readQRCode()">دریافت جیسون خواندن</button>
46
- <div class="result-container">
47
- <div id="read-loader" class="loader hidden"></div>
48
- <div class="result-box">
49
- <pre id="read-json-output">خروجی JSON اینجا نمایش داده می‌شود.</pre>
50
- </div>
51
- <button id="copy-read-btn" class="copy-btn hidden" onclick="copyResult('read-json-output', this)">کپی جیسون خروجی</button>
52
  </div>
 
53
  </div>
54
 
55
  <script>
56
  const API_BASE_URL = "https://elias207-qrcode.hf.space/";
57
 
58
- function generateSessionHash() {
59
- return Math.random().toString(36).substring(2, 11);
60
- }
61
-
62
  async function callGradioApi(fnIndex, data, sessionHash) {
63
- const joinResponse = await fetch(API_BASE_URL + "queue/join?", {
64
  method: "POST",
65
  headers: { "Content-Type": "application/json" },
66
  body: JSON.stringify({ "fn_index": fnIndex, "data": data, "session_hash": sessionHash }),
67
  });
68
- if (!joinResponse.ok) throw new Error("Failed to join queue.");
69
 
70
  return new Promise((resolve, reject) => {
71
  const interval = setInterval(async () => {
72
  try {
73
- const dataResponse = await fetch(API_BASE_URL + `queue/data?session_hash=${sessionHash}`);
74
- if (!dataResponse.ok) {
75
- clearInterval(interval);
76
- reject(new Error("Failed to get data."));
77
- return;
78
- }
79
 
80
- const responseText = await dataResponse.text();
81
- const lines = responseText.trim().split('\n');
82
- const lastLine = lines[lines.length - 1];
83
 
84
  if (lastLine && lastLine.startsWith('data:')) {
85
- const jsonString = lastLine.substring(5).trim();
86
- const result = JSON.parse(jsonString);
87
-
88
  if (result.msg === "process_completed") {
89
  clearInterval(interval);
90
  resolve(result);
91
- } else if (result.msg === "queue_full" || result.msg === "unexpected_error") {
92
  clearInterval(interval);
93
  reject(new Error("API Error: " + result.msg));
94
  }
95
  }
96
  } catch (error) {
97
- if (!(error instanceof SyntaxError)) {
98
- clearInterval(interval);
99
- reject(error);
100
- }
101
  }
102
  }, 1000);
103
  });
@@ -105,77 +85,74 @@
105
 
106
  async function generateQRCode() {
107
  const textInput = document.getElementById('text-input').value;
108
- if (!textInput.trim()) { alert("لطفاً متنی را وارد کنید."); return; }
109
 
110
  const btn = document.getElementById('generate-btn');
111
  const loader = document.getElementById('generate-loader');
 
112
  const outputPre = document.getElementById('generate-json-output');
113
- const copyBtn = document.getElementById('copy-generate-btn');
114
 
115
  btn.disabled = true;
116
- loader.classList.remove('hidden');
117
- copyBtn.classList.add('hidden');
118
- outputPre.textContent = "در حال ارتباط با سرور...";
119
 
120
  try {
121
  const sessionHash = generateSessionHash();
122
  const result = await callGradioApi(0, [textInput], sessionHash);
123
- outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام و مرتب
124
- copyBtn.classList.remove('hidden');
125
  } catch (error) {
126
- outputPre.textContent = "خطا: " + error.message;
127
  } finally {
128
  btn.disabled = false;
129
- loader.classList.add('hidden');
130
  }
131
  }
132
 
133
  async function readQRCode() {
134
  const fileInput = document.getElementById('file-input');
135
- if (fileInput.files.length === 0) { alert("لطفاً یک فایل تصویر انتخاب کنید."); return; }
136
  const file = fileInput.files[0];
137
 
138
  const btn = document.getElementById('read-btn');
139
  const loader = document.getElementById('read-loader');
 
140
  const outputPre = document.getElementById('read-json-output');
141
- const copyBtn = document.getElementById('copy-read-btn');
142
 
143
  btn.disabled = true;
144
- loader.classList.remove('hidden');
145
- copyBtn.classList.add('hidden');
146
- outputPre.textContent = "در حال آپلود و پردازش...";
147
 
148
  try {
149
  const formData = new FormData();
150
  formData.append("files", file);
151
- const uploadResponse = await fetch(API_BASE_URL + "upload", { method: "POST", body: formData });
152
- if (!uploadResponse.ok) throw new Error("آپلود فایل با خطا مواجه شد.");
153
-
154
- const uploadResult = await uploadResponse.json();
155
  const tempFilePath = uploadResult[0];
156
 
157
  const sessionHash = generateSessionHash();
158
- const data = [{ "path": tempFilePath, "url": API_BASE_URL + "file=" + tempFilePath, "orig_name": file.name }];
159
- const result = await callGradioApi(1, [data], sessionHash);
160
- outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام و مرتب
161
- copyBtn.classList.remove('hidden');
162
  } catch (error) {
163
- outputPre.textContent = "خطا: " + error.message;
164
  } finally {
165
  btn.disabled = false;
166
- loader.classList.add('hidden');
167
  }
168
  }
169
-
170
- function copyResult(elementId, buttonElement) {
171
- const pre = document.getElementById(elementId);
172
- navigator.clipboard.writeText(pre.textContent).then(() => {
173
  const originalText = buttonElement.textContent;
174
  buttonElement.textContent = 'کپی شد!';
175
  setTimeout(() => { buttonElement.textContent = originalText; }, 2000);
176
- }).catch(err => console.error('Failed to copy: ', err));
 
 
177
  }
178
  </script>
179
-
180
  </body>
181
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>دیباگر API کیوآرکد</title>
7
  <style>
8
+ body { font-family: sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; padding: 20px; gap: 30px; flex-wrap: wrap; }
9
+ .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 450px; }
10
+ h2 { color: #333; border-bottom: 2px solid #6c5ce7; padding-bottom: 5px; }
11
+ textarea, input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
12
+ button { background-color: #6c5ce7; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
13
+ button:disabled { background-color: #b2aae8; }
14
+ .result-container { margin-top: 15px; }
15
+ 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; }
16
+ .copy-btn { background-color: #00b894; margin-top: 10px; width: auto; padding: 5px 10px; font-size: 12px; }
17
+ .loader { text-align: center; padding: 20px; color: #555; }
 
 
 
 
 
18
  </style>
19
  </head>
20
  <body>
21
 
22
  <!-- بخش ساخت QR Code -->
23
  <div class="container">
24
+ <h2>۱. تست ساخت QR Code</h2>
25
+ <textarea id="text-input" placeholder="یک متن برای تست وارد کنید..." rows="3">test</textarea>
26
+ <button id="generate-btn" onclick="generateQRCode()">دریافت JSON ساخت کد</button>
27
+ <div id="generate-result" class="result-container" hidden>
28
+ <h3>خروجی JSON:</h3>
29
+ <pre id="generate-json-output"></pre>
30
+ <button class="copy-btn" onclick="copyToClipboard('generate-json-output', this)">کپی کردن JSON</button>
 
 
31
  </div>
32
+ <div id="generate-loader" class="loader" hidden>در حال ارتباط با سرور...</div>
33
  </div>
34
 
35
  <!-- بخش خواندن QR Code -->
36
  <div class="container">
37
+ <h2>۲. تست خواندن QR Code</h2>
38
  <input type="file" id="file-input" accept="image/*">
39
+ <button id="read-btn" onclick="readQRCode()">دریافت JSON خواندن کد</button>
40
+ <div id="read-result" class="result-container" hidden>
41
+ <h3>خروجی JSON:</h3>
42
+ <pre id="read-json-output"></pre>
43
+ <button class="copy-btn" onclick="copyToClipboard('read-json-output', this)">کپی کردن JSON</button>
 
 
44
  </div>
45
+ <div id="read-loader" class="loader" hidden>در حال آپلود و پردازش...</div>
46
  </div>
47
 
48
  <script>
49
  const API_BASE_URL = "https://elias207-qrcode.hf.space/";
50
 
51
+ function generateSessionHash() { return Math.random().toString(36).substring(2, 11); }
52
+
 
 
53
  async function callGradioApi(fnIndex, data, sessionHash) {
54
+ await fetch(API_BASE_URL + "queue/join?", {
55
  method: "POST",
56
  headers: { "Content-Type": "application/json" },
57
  body: JSON.stringify({ "fn_index": fnIndex, "data": data, "session_hash": sessionHash }),
58
  });
 
59
 
60
  return new Promise((resolve, reject) => {
61
  const interval = setInterval(async () => {
62
  try {
63
+ const response = await fetch(API_BASE_URL + `queue/data?session_hash=${sessionHash}`);
64
+ if (!response.ok) { clearInterval(interval); reject(new Error("خطا در شبکه")); return; }
 
 
 
 
65
 
66
+ const responseText = await response.text();
67
+ const lastLine = responseText.trim().split('\n').pop();
 
68
 
69
  if (lastLine && lastLine.startsWith('data:')) {
70
+ const result = JSON.parse(lastLine.substring(5).trim());
 
 
71
  if (result.msg === "process_completed") {
72
  clearInterval(interval);
73
  resolve(result);
74
+ } else if (["queue_full", "unexpected_error"].includes(result.msg)) {
75
  clearInterval(interval);
76
  reject(new Error("API Error: " + result.msg));
77
  }
78
  }
79
  } catch (error) {
80
+ if (!(error instanceof SyntaxError)) { clearInterval(interval); reject(error); }
 
 
 
81
  }
82
  }, 1000);
83
  });
 
85
 
86
  async function generateQRCode() {
87
  const textInput = document.getElementById('text-input').value;
88
+ if (!textInput.trim()) { alert("لطفا متنی وارد کنید."); return; }
89
 
90
  const btn = document.getElementById('generate-btn');
91
  const loader = document.getElementById('generate-loader');
92
+ const resultDiv = document.getElementById('generate-result');
93
  const outputPre = document.getElementById('generate-json-output');
 
94
 
95
  btn.disabled = true;
96
+ loader.hidden = false;
97
+ resultDiv.hidden = true;
 
98
 
99
  try {
100
  const sessionHash = generateSessionHash();
101
  const result = await callGradioApi(0, [textInput], sessionHash);
102
+ outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام
103
+ resultDiv.hidden = false;
104
  } catch (error) {
105
+ alert("خطا در ساخت کد: " + error.message);
106
  } finally {
107
  btn.disabled = false;
108
+ loader.hidden = true;
109
  }
110
  }
111
 
112
  async function readQRCode() {
113
  const fileInput = document.getElementById('file-input');
114
+ if (fileInput.files.length === 0) { alert("لطفا فایلی انتخاب کنید."); return; }
115
  const file = fileInput.files[0];
116
 
117
  const btn = document.getElementById('read-btn');
118
  const loader = document.getElementById('read-loader');
119
+ const resultDiv = document.getElementById('read-result');
120
  const outputPre = document.getElementById('read-json-output');
 
121
 
122
  btn.disabled = true;
123
+ loader.hidden = false;
124
+ resultDiv.hidden = true;
 
125
 
126
  try {
127
  const formData = new FormData();
128
  formData.append("files", file);
129
+ const uploadRes = await fetch(API_BASE_URL + "upload", { method: "POST", body: formData });
130
+ const uploadResult = await uploadRes.json();
 
 
131
  const tempFilePath = uploadResult[0];
132
 
133
  const sessionHash = generateSessionHash();
134
+ const fileData = [{"path": tempFilePath, "url": API_BASE_URL + "file=" + tempFilePath, "orig_name": file.name}];
135
+ const result = await callGradioApi(1, fileData, sessionHash);
136
+ outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام
137
+ resultDiv.hidden = false;
138
  } catch (error) {
139
+ alert("خطا در خواندن کد: " + error.message);
140
  } finally {
141
  btn.disabled = false;
142
+ loader.hidden = true;
143
  }
144
  }
145
+
146
+ function copyToClipboard(elementId, buttonElement) {
147
+ const text = document.getElementById(elementId).textContent;
148
+ navigator.clipboard.writeText(text).then(() => {
149
  const originalText = buttonElement.textContent;
150
  buttonElement.textContent = 'کپی شد!';
151
  setTimeout(() => { buttonElement.textContent = originalText; }, 2000);
152
+ }, (err) => {
153
+ alert('خطا در کپی کردن: ' + err);
154
+ });
155
  }
156
  </script>
 
157
  </body>
158
  </html>