Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +84 -130
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,7 +64,7 @@
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%;
@@ -86,14 +86,14 @@
86
  <body>
87
 
88
  <h1>ابزار کار با کد QR (توسط API)</h1>
89
- <p>این صفحه از API موجود در Hugging Face Space با آدرس <code>cultrix-qrcode-read-generate</code> استفاده می‌کند.</p>
90
 
91
  <div class="container">
92
  <!-- بخش ساخت کد QR -->
93
  <div class="section">
94
  <h2>۱. ساخت کد QR از متن</h2>
95
  <label for="qr-text">متن مورد نظر:</label>
96
- <input type="text" id="qr-text" placeholder="متن خود را اینجا وارد کنید...">
97
  <button id="generate-btn" onclick="generateQRCode()">ساخت کد</button>
98
  <div id="generate-status" class="status"></div>
99
  <div id="generate-result" class="result">
@@ -115,8 +115,9 @@
115
  </div>
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);
@@ -126,158 +127,111 @@
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
 
135
- eventSource.onmessage = function(event) {
136
- const data = JSON.parse(event.data);
137
 
138
- if (data.msg === 'process_starts') {
139
- statusElement.textContent = 'پردازش شروع شد...';
140
  }
141
 
142
- if (data.msg === 'process_completed') {
143
- statusElement.textContent = 'پردازش با موفقیت انجام شد.';
144
- resultElement.innerHTML = ''; // پاک کردن محتوای قبلی
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
  }
170
-
171
- eventSource.close();
172
- toggleButtons(false);
173
  }
174
- };
175
 
176
- eventSource.onerror = function(err) {
177
- statusElement.textContent = 'خطا در ارتباط با سرور.';
178
- console.error("EventSource failed:", err);
179
- eventSource.close();
180
  toggleButtons(false);
181
- };
182
  }
183
 
184
- async function generateQRCode() {
 
185
  const textInput = document.getElementById('qr-text').value;
186
  if (!textInput) {
187
  alert('لطفاً متنی را برای ساخت کد QR وارد کنید.');
188
  return;
189
  }
190
-
191
- const statusElement = document.getElementById('generate-status');
192
- const resultElement = document.getElementById('generate-result');
193
- resultElement.innerHTML = '';
194
- statusElement.textContent = 'در حال ارسال درخواست...';
195
- toggleButtons(true);
196
-
197
- const sessionHash = generateSessionHash();
198
- const payload = {
199
- data: [textInput],
200
- fn_index: 0,
201
- session_hash: sessionHash
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)
209
- });
210
-
211
- if (!response.ok) throw new Error('خطا در عضویت در صف');
212
-
213
- pollForResult(sessionHash, resultElement, statusElement, 0);
214
-
215
- } catch (error) {
216
- statusElement.textContent = `خطا: ${error.message}`;
217
- console.error(error);
218
- toggleButtons(false);
219
- }
220
- }
221
-
222
  async function readQRCode() {
223
  const fileInput = document.getElementById('qr-file');
224
  if (fileInput.files.length === 0) {
225
  alert('لطفاً یک فایل تصویر را انتخاب کنید.');
226
  return;
227
  }
228
-
229
  const file = fileInput.files[0];
230
  const statusElement = document.getElementById('read-status');
231
- const resultElement = document.getElementById('read-result');
232
- resultElement.innerHTML = '';
233
- statusElement.textContent = 'در حال آپلود فایل...';
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
- });
244
 
245
- if (!uploadResponse.ok) throw new Error('خطا در آپلود فایل');
246
-
247
- const uploadedFiles = await uploadResponse.json();
248
- const uploadedFilePath = uploadedFiles[0];
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,
260
- "meta": {"_type": "gradio.FileData"}
261
- }],
262
- fn_index: 1,
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)
270
- });
271
-
272
- if (!joinResponse.ok) throw new Error('خطا در عضویت در صف برای پردازش فایل');
273
-
274
- pollForResult(sessionHash, resultElement, statusElement, 1);
275
 
276
- } catch (error) {
277
- statusElement.textContent = `خطا: ${error.message}`;
278
- console.error(error);
279
- toggleButtons(false);
280
- }
 
281
  }
282
  </script>
283
  </body>
 
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;
68
  }
69
  .result img {
70
  max-width: 100%;
 
86
  <body>
87
 
88
  <h1>ابزار کار با کد QR (توسط API)</h1>
89
+ <p>این صفحه از API موجود در Hugging Face Space با آدرس <code>Elias207/QRcode</code> استفاده می‌کند.</p>
90
 
91
  <div class="container">
92
  <!-- بخش ساخت کد QR -->
93
  <div class="section">
94
  <h2>۱. ساخت کد QR از متن</h2>
95
  <label for="qr-text">متن مورد نظر:</label>
96
+ <input type="text" id="qr-text" placeholder="متن خود را اینجا وارد کنید..." value="سلام">
97
  <button id="generate-btn" onclick="generateQRCode()">ساخت کد</button>
98
  <div id="generate-status" class="status"></div>
99
  <div id="generate-result" class="result">
 
115
  </div>
116
 
117
  <script>
118
+ // *** تغییر کلیدی: آدرس API به آدرس صحیح در اسکرین‌شات شما به‌روز شد ***
119
+ const API_BASE_URL = "https://elias207-qrcode.hf.space";
120
+ const API_ENDPOINT = `${API_BASE_URL}/run/`; // اندپوینت برای این Space از /run/ استفاده می‌کند
121
 
122
  function generateSessionHash() {
123
  return Math.random().toString(36).substring(2);
 
127
  document.getElementById('generate-btn').disabled = disabled;
128
  document.getElementById('read-btn').disabled = disabled;
129
  }
130
+
131
+ // **این یک API استانداردتر است و نیازی به صف ندارد**
132
+ // تابع برای ارسال درخواست و دریافت نتیجه
133
+ async function callApi(endpoint, payload, resultElement, statusElement) {
134
+ toggleButtons(true);
135
+ statusElement.textContent = 'در حال ارسال درخواست به سرور...';
136
+ resultElement.innerHTML = '';
137
+
138
+ try {
139
+ const response = await fetch(API_ENDPOINT + endpoint, {
140
+ method: 'POST',
141
+ headers: { 'Content-Type': 'application/json' },
142
+ body: JSON.stringify(payload)
143
+ });
144
 
145
+ if (!response.ok) {
146
+ throw new Error(`خطای شبکه: ${response.statusText}`);
147
+ }
148
 
149
+ const result = await response.json();
150
+ statusElement.textContent = 'پردازش با موفقیت انجام شد.';
151
 
152
+ // داده خروجی را استخراج کن
153
+ const outputData = result.data[0];
154
 
155
+ if (!outputData) {
156
+ throw new Error('پاسخ دریافتی از سرور فاقد داده خروجی بود.');
157
  }
158
 
159
+ // نمایش نتیجه
160
+ if (endpoint === 'predict') { // اندپوینت ساخت QR
161
+ const img = document.createElement('img');
162
+ // این API تصویر را به صورت Base64 برمی‌گرداند
163
+ if (typeof outputData === 'string' && outputData.startsWith('data:image')) {
164
+ img.src = outputData;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  resultElement.appendChild(img);
166
+ } else {
167
+ throw new Error('فرمت خروجی تصویر قابل شناسایی نبود.');
 
 
168
  }
169
+ } else if (endpoint === 'predict_1') { // اندپوینت خواندن QR
170
+ resultElement.textContent = outputData;
 
171
  }
 
172
 
173
+ } catch (error) {
174
+ statusElement.textContent = `خطا: ${error.message}`;
175
+ console.error("API Error:", error);
176
+ } finally {
177
  toggleButtons(false);
178
+ }
179
  }
180
 
181
+ // تابع برای ساخت کد QR
182
+ function generateQRCode() {
183
  const textInput = document.getElementById('qr-text').value;
184
  if (!textInput) {
185
  alert('لطفاً متنی را برای ساخت کد QR وارد کنید.');
186
  return;
187
  }
188
+ const payload = { data: [textInput] };
189
+ callApi(
190
+ 'predict', // نام تابع در API
191
+ payload,
192
+ document.getElementById('generate-result'),
193
+ document.getElementById('generate-status')
194
+ );
195
+ }
196
+
197
+ // تابع برای خواندن فایل به صورت Base64
198
+ function fileToBase64(file) {
199
+ return new Promise((resolve, reject) => {
200
+ const reader = new FileReader();
201
+ reader.readAsDataURL(file);
202
+ reader.onload = () => resolve(reader.result);
203
+ reader.onerror = error => reject(error);
204
+ });
205
+ }
206
+
207
+ // تابع برای خواندن کد QR
 
 
 
 
 
 
 
 
 
 
 
 
208
  async function readQRCode() {
209
  const fileInput = document.getElementById('qr-file');
210
  if (fileInput.files.length === 0) {
211
  alert('لطفاً یک فایل تصویر را انتخاب کنید.');
212
  return;
213
  }
214
+
215
  const file = fileInput.files[0];
216
  const statusElement = document.getElementById('read-status');
217
+ statusElement.textContent = 'در حال آماده‌سازی فایل...';
218
+
219
+ // فایل باید به فرمت Base64 تبدیل شود
220
+ const base64File = await fileToBase64(file);
 
 
 
 
 
 
 
 
 
221
 
222
+ const payload = {
223
+ data: [{
224
+ "name": file.name,
225
+ "data": base64File
226
+ }]
227
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
 
229
+ callApi(
230
+ 'predict_1', // نام تابع دوم در API
231
+ payload,
232
+ document.getElementById('read-result'),
233
+ document.getElementById('read-status')
234
+ );
235
  }
236
  </script>
237
  </body>