Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

App Files Community
Elias207 commited on
Commit
704dc20
·
verified ·
1 Parent(s): 0b7c7f4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +25 -17
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>استفاده از API کد QR</title>
7
  <style>
8
  body {
9
  font-family: 'Vazirmatn', sans-serif;
@@ -64,6 +64,7 @@
64
  border-radius: 4px;
65
  min-height: 50px;
66
  word-wrap: break-word;
 
67
  }
68
  .result img {
69
  max-width: 100%;
@@ -115,21 +116,19 @@
115
 
116
  <script>
117
  const API_BASE_URL = "https://cultrix-qrcode-read-generate.hf.space";
 
118
 
119
- // یک هش تصادفی برای session ایجاد می‌کند
120
  function generateSessionHash() {
121
  return Math.random().toString(36).substring(2);
122
  }
123
 
124
- // تابع برای غیرفعال کردن دکمه‌ها در حین پردازش
125
  function toggleButtons(disabled) {
126
  document.getElementById('generate-btn').disabled = disabled;
127
  document.getElementById('read-btn').disabled = disabled;
128
  }
129
 
130
- // تابع برای گوش دادن به نتیجه با EventSource
131
  function pollForResult(sessionHash, resultElement, statusElement, fnIndex) {
132
- const eventSource = new EventSource(`${API_BASE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
133
 
134
  statusElement.textContent = 'در انتظار نتیجه از سرور...';
135
 
@@ -146,12 +145,25 @@
146
 
147
  const outputData = data.output.data[0];
148
 
149
- if (fnIndex === 0) { // ساخت QR
150
- // نتیجه یک شی حاوی URL تصویر است
151
  const img = document.createElement('img');
152
- img.src = `${API_BASE_URL}/gradio_api/file=${outputData.path}`;
 
 
 
 
 
 
 
 
 
 
 
 
 
153
  resultElement.appendChild(img);
154
- } else if (fnIndex === 1) { // خواندن QR
 
155
  // نتیجه خود متن است
156
  resultElement.textContent = outputData;
157
  }
@@ -169,7 +181,6 @@
169
  };
170
  }
171
 
172
- // تابع اصلی برای ساخت کد QR
173
  async function generateQRCode() {
174
  const textInput = document.getElementById('qr-text').value;
175
  if (!textInput) {
@@ -191,7 +202,7 @@
191
  };
192
 
193
  try {
194
- const response = await fetch(`${API_BASE_URL}/gradio_api/queue/join?`, {
195
  method: 'POST',
196
  headers: { 'Content-Type': 'application/json' },
197
  body: JSON.stringify(payload)
@@ -208,7 +219,6 @@
208
  }
209
  }
210
 
211
- // تابع اصلی برای خواندن کد QR
212
  async function readQRCode() {
213
  const fileInput = document.getElementById('qr-file');
214
  if (fileInput.files.length === 0) {
@@ -224,11 +234,10 @@
224
  toggleButtons(true);
225
 
226
  try {
227
- // مرحله ۱: آپلود فایل
228
  const formData = new FormData();
229
  formData.append('files', file);
230
 
231
- const uploadResponse = await fetch(`${API_BASE_URL}/gradio_api/upload`, {
232
  method: 'POST',
233
  body: formData
234
  });
@@ -240,12 +249,11 @@
240
 
241
  statusElement.textContent = 'فایل آپلود شد. در حال ارسال درخواست پردازش...';
242
 
243
- // مرحله ۲: ارسال درخواست پردازش با مسیر فایل آپلود شده
244
  const sessionHash = generateSessionHash();
245
  const payload = {
246
  data: [{
247
  "path": uploadedFilePath,
248
- "url": `${API_BASE_URL}/gradio_api/file=${uploadedFilePath}`,
249
  "orig_name": file.name,
250
  "size": file.size,
251
  "mime_type": file.type,
@@ -255,7 +263,7 @@
255
  session_hash: sessionHash
256
  };
257
 
258
- const joinResponse = await fetch(`${API_BASE_URL}/gradio_api/queue/join?`, {
259
  method: 'POST',
260
  headers: { 'Content-Type': 'application/json' },
261
  body: JSON.stringify(payload)
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>استفاده از API کد QR (نسخه اصلاح شده)</title>
7
  <style>
8
  body {
9
  font-family: 'Vazirmatn', sans-serif;
 
64
  border-radius: 4px;
65
  min-height: 50px;
66
  word-wrap: break-word;
67
+ text-align: center; /* Center the content */
68
  }
69
  .result img {
70
  max-width: 100%;
 
116
 
117
  <script>
118
  const API_BASE_URL = "https://cultrix-qrcode-read-generate.hf.space";
119
+ const API_ENDPOINT = `${API_BASE_URL}/gradio_api/`;
120
 
 
121
  function generateSessionHash() {
122
  return Math.random().toString(36).substring(2);
123
  }
124
 
 
125
  function toggleButtons(disabled) {
126
  document.getElementById('generate-btn').disabled = disabled;
127
  document.getElementById('read-btn').disabled = disabled;
128
  }
129
 
 
130
  function pollForResult(sessionHash, resultElement, statusElement, fnIndex) {
131
+ const eventSource = new EventSource(`${API_ENDPOINT}queue/data?session_hash=${sessionHash}`);
132
 
133
  statusElement.textContent = 'در انتظار نتیجه از سرور...';
134
 
 
145
 
146
  const outputData = data.output.data[0];
147
 
148
+ if (fnIndex === 0) { // ساخت کد QR
 
149
  const img = document.createElement('img');
150
+
151
+ // **این بخش کلیدی اصلاح شده است**
152
+ // بررسی می‌کند که آیا خروجی یک رشته Base64 است یا یک آبجکت فایل
153
+ if (typeof outputData === 'string' && outputData.startsWith('data:image')) {
154
+ // اگر Base64 بود، مستقیماً به عنوان منبع تصویر استفاده شود
155
+ img.src = outputData;
156
+ } else if (typeof outputData === 'object' && outputData.path) {
157
+ // اگر آبجکت فایل بود، لینک آن ساخته شود (برای سازگاری)
158
+ img.src = `${API_ENDPOINT}file=${outputData.path}`;
159
+ } else {
160
+ resultElement.textContent = 'فرمت خروجی تصویر قابل شناسایی نبود.';
161
+ console.error("Unknown output format:", outputData);
162
+ return; // ادامه نده
163
+ }
164
  resultElement.appendChild(img);
165
+
166
+ } else if (fnIndex === 1) { // خواندن کد QR
167
  // نتیجه خود متن است
168
  resultElement.textContent = outputData;
169
  }
 
181
  };
182
  }
183
 
 
184
  async function generateQRCode() {
185
  const textInput = document.getElementById('qr-text').value;
186
  if (!textInput) {
 
202
  };
203
 
204
  try {
205
+ const response = await fetch(`${API_ENDPOINT}queue/join?`, {
206
  method: 'POST',
207
  headers: { 'Content-Type': 'application/json' },
208
  body: JSON.stringify(payload)
 
219
  }
220
  }
221
 
 
222
  async function readQRCode() {
223
  const fileInput = document.getElementById('qr-file');
224
  if (fileInput.files.length === 0) {
 
234
  toggleButtons(true);
235
 
236
  try {
 
237
  const formData = new FormData();
238
  formData.append('files', file);
239
 
240
+ const uploadResponse = await fetch(`${API_ENDPOINT}upload`, {
241
  method: 'POST',
242
  body: formData
243
  });
 
249
 
250
  statusElement.textContent = 'فایل آپلود شد. در حال ارسال درخواست پردازش...';
251
 
 
252
  const sessionHash = generateSessionHash();
253
  const payload = {
254
  data: [{
255
  "path": uploadedFilePath,
256
+ "url": `${API_ENDPOINT}file=${uploadedFilePath}`,
257
  "orig_name": file.name,
258
  "size": file.size,
259
  "mime_type": file.type,
 
263
  session_hash: sessionHash
264
  };
265
 
266
+ const joinResponse = await fetch(`${API_ENDPOINT}queue/join?`, {
267
  method: 'POST',
268
  headers: { 'Content-Type': 'application/json' },
269
  body: JSON.stringify(payload)