Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +64 -80
index.html CHANGED
@@ -66,11 +66,11 @@
66
  word-wrap: break-word;
67
  text-align: center;
68
  }
69
- .result img {
70
  max-width: 100%;
71
  height: auto;
72
  display: block;
73
- margin: 0 auto;
74
  }
75
  .status {
76
  font-style: italic;
@@ -86,14 +86,14 @@
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,86 +115,55 @@
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);
124
- }
125
 
126
  function toggleButtons(disabled) {
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();
@@ -204,7 +173,7 @@
204
  });
205
  }
206
 
207
- // تابع برای خواندن کد QR
208
  async function readQRCode() {
209
  const fileInput = document.getElementById('qr-file');
210
  if (fileInput.files.length === 0) {
@@ -214,24 +183,39 @@
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>
 
66
  word-wrap: break-word;
67
  text-align: center;
68
  }
69
+ .result img { /* استایل برای تصویری که از API می آید */
70
  max-width: 100%;
71
  height: auto;
72
  display: block;
73
+ margin: 10px auto;
74
  }
75
  .status {
76
  font-style: italic;
 
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="متن خود را اینجا وارد کنید..." 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
+ const API_BASE_URL = "https://cultrix-qrcode-read-generate.hf.space";
 
 
 
 
 
 
119
 
120
  function toggleButtons(disabled) {
121
  document.getElementById('generate-btn').disabled = disabled;
122
  document.getElementById('read-btn').disabled = disabled;
123
  }
124
+
125
+ // تابع برای ساخت کد QR بر اساس مستندات
126
+ async function generateQRCode() {
127
+ const textInput = document.getElementById('qr-text').value;
128
+ if (!textInput) {
129
+ alert('لطفاً متنی را برای ساخت کد QR وارد کنید.');
130
+ return;
131
+ }
132
+
133
+ const statusElement = document.getElementById('generate-status');
134
+ const resultElement = document.getElementById('generate-result');
135
+
136
  toggleButtons(true);
137
+ statusElement.textContent = 'در حال ارسال درخواست...';
138
  resultElement.innerHTML = '';
139
 
140
  try {
141
+ const response = await fetch(`${API_BASE_URL}/run/generate_qr_interface`, {
142
  method: 'POST',
143
  headers: { 'Content-Type': 'application/json' },
144
+ body: JSON.stringify({
145
+ "data": [textInput]
146
+ })
147
  });
148
 
149
+ if (!response.ok) throw new Error(`خطای شبکه: ${response.statusText}`);
 
 
150
 
151
  const result = await response.json();
152
+
153
+ // بر اساس مستندات، خروجی اول یک رشته HTML است
154
+ const htmlOutput = result.data[0];
155
+ resultElement.innerHTML = htmlOutput;
156
+ statusElement.textContent = 'کد QR با موفقیت ساخته شد.';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
 
158
  } catch (error) {
159
  statusElement.textContent = `خطا: ${error.message}`;
160
+ console.error("Generate QR Error:", error);
161
  } finally {
162
  toggleButtons(false);
163
  }
164
  }
165
 
166
+ // تابع برای تبدیل فایل به رشته Base64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  function fileToBase64(file) {
168
  return new Promise((resolve, reject) => {
169
  const reader = new FileReader();
 
173
  });
174
  }
175
 
176
+ // تابع برای خواندن کد QR بر اساس مستندات
177
  async function readQRCode() {
178
  const fileInput = document.getElementById('qr-file');
179
  if (fileInput.files.length === 0) {
 
183
 
184
  const file = fileInput.files[0];
185
  const statusElement = document.getElementById('read-status');
186
+ const resultElement = document.getElementById('read-result');
187
+
188
+ toggleButtons(true);
189
+ statusElement.textContent = 'در حال تبدیل فایل و ارسال...';
190
+ resultElement.textContent = '';
191
 
192
+ try {
193
+ // فایل به فرمت Base64 تبدیل می‌شود چون API این فرمت را می‌پذیرد
194
+ const base64File = await fileToBase64(file);
195
+
196
+ const response = await fetch(`${API_BASE_URL}/run/decode_qr`, {
197
+ method: 'POST',
198
+ headers: { 'Content-Type': 'application/json' },
199
+ body: JSON.stringify({
200
+ "data": [base64File] // ارسال رشته Base64 به عنوان ورودی
201
+ })
202
+ });
203
+
204
+ if (!response.ok) throw new Error(`خطای شبکه: ${response.statusText}`);
205
+
206
+ const result = await response.json();
207
+
208
+ // خروجی یک رشته متنی است
209
+ const decodedText = result.data[0];
210
+ resultElement.textContent = decodedText;
211
+ statusElement.textContent = 'متن با موفقیت خوانده شد.';
212
+
213
+ } catch (error) {
214
+ statusElement.textContent = `خطا: ${error.message}`;
215
+ console.error("Decode QR Error:", error);
216
+ } finally {
217
+ toggleButtons(false);
218
+ }
219
  }
220
  </script>
221
  </body>