Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +63 -36
index.html CHANGED
@@ -48,6 +48,7 @@
48
  border-radius: 4px;
49
  cursor: pointer;
50
  font-size: 16px;
 
51
  }
52
  button:hover {
53
  background-color: #0056b3;
@@ -66,21 +67,34 @@
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;
77
  color: #666;
78
  height: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  }
80
  </style>
81
  <!-- افزودن فونت وزیر از گوگل -->
82
  <link rel="preconnect" href="https://fonts.googleapis.com">
83
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
84
  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap" rel="stylesheet">
85
  </head>
86
  <body>
@@ -92,13 +106,17 @@
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">
100
  <!-- تصویر کد QR اینجا نمایش داده می‌شود -->
101
  </div>
 
 
 
 
102
  </div>
103
 
104
  <!-- بخش خواندن کد QR -->
@@ -122,7 +140,17 @@
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) {
@@ -132,10 +160,12 @@
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`, {
@@ -146,73 +176,70 @@
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();
170
- reader.readAsDataURL(file);
171
- reader.onload = () => resolve(reader.result);
172
- reader.onerror = error => reject(error);
173
- });
174
- }
175
 
176
- // تابع برای خواندن کد QR بر اساس مستندات
177
  async function readQRCode() {
178
  const fileInput = document.getElementById('qr-file');
179
  if (fileInput.files.length === 0) {
180
  alert('لطفاً یک فایل تصویر را انتخاب کنید.');
181
  return;
182
  }
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
  }
 
48
  border-radius: 4px;
49
  cursor: pointer;
50
  font-size: 16px;
51
+ margin-bottom: 10px;
52
  }
53
  button:hover {
54
  background-color: #0056b3;
 
67
  word-wrap: break-word;
68
  text-align: center;
69
  }
70
+ .result img {
71
  max-width: 100%;
72
  height: auto;
73
  display: block;
74
+ margin: 0 auto;
75
  }
76
  .status {
77
  font-style: italic;
78
  color: #666;
79
  height: 20px;
80
+ margin-bottom: 10px;
81
+ }
82
+ .download-links a {
83
+ display: inline-block;
84
+ margin: 5px;
85
+ padding: 8px 12px;
86
+ background-color: #28a745;
87
+ color: white;
88
+ text-decoration: none;
89
+ border-radius: 4px;
90
+ }
91
+ .download-links a:hover {
92
+ background-color: #218838;
93
  }
94
  </style>
95
  <!-- افزودن فونت وزیر از گوگل -->
96
  <link rel="preconnect" href="https://fonts.googleapis.com">
97
+ <link rel="preconnect" href="https://fonts.gstatic" crossorigin>
98
  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap" rel="stylesheet">
99
  </head>
100
  <body>
 
106
  <!-- بخش ساخت کد QR -->
107
  <div class="section">
108
  <h2>۱. ساخت کد QR از متن</h2>
109
+ <label for="qr-text">متن مورد نظر:</label>
110
  <input type="text" id="qr-text" placeholder="متن خود را اینجا وارد کنید..." value="سلام دنیا!">
111
  <button id="generate-btn" onclick="generateQRCode()">ساخت کد</button>
112
  <div id="generate-status" class="status"></div>
113
  <div id="generate-result" class="result">
114
  <!-- تصویر کد QR اینجا نمایش داده می‌شود -->
115
  </div>
116
+ <div id="download-links" class="download-links" style="display: none; text-align: center; margin-top: 10px;">
117
+ <a id="download-png" href="#" download="qrcode.png">دانلود PNG</a>
118
+ <a id="download-txt" href="#" download="qrcode_base64.txt">دانلود Base64 (TXT)</a>
119
+ </div>
120
  </div>
121
 
122
  <!-- بخش خواندن کد QR -->
 
140
  document.getElementById('read-btn').disabled = disabled;
141
  }
142
 
143
+ // تابع برای تبدیل فایل به رشته Base64
144
+ function fileToBase64(file) {
145
+ return new Promise((resolve, reject) => {
146
+ const reader = new FileReader();
147
+ reader.readAsDataURL(file);
148
+ reader.onload = () => resolve(reader.result);
149
+ reader.onerror = error => reject(error);
150
+ });
151
+ }
152
+
153
+ // تابع برای ساخت کد QR
154
  async function generateQRCode() {
155
  const textInput = document.getElementById('qr-text').value;
156
  if (!textInput) {
 
160
 
161
  const statusElement = document.getElementById('generate-status');
162
  const resultElement = document.getElementById('generate-result');
163
+ const downloadLinks = document.getElementById('download-links');
164
+
165
  toggleButtons(true);
166
+ statusElement.textContent = 'در حال ساخت کد QR...';
167
  resultElement.innerHTML = '';
168
+ downloadLinks.style.display = 'none';
169
 
170
  try {
171
  const response = await fetch(`${API_BASE_URL}/run/generate_qr_interface`, {
 
176
  })
177
  });
178
 
179
+ if (!response.ok) throw new Error(`خطای سرور: ${response.statusText}`);
 
 
180
 
181
+ const result = await response.json();
182
+ const outputData = result.data;
183
+
184
+ // نمایش تصویر QR (خروجی اول)
185
+ resultElement.innerHTML = outputData[0];
186
+
187
+ // تنظیم لینک‌های دانلود (خروجی دوم و سوم)
188
+ document.getElementById('download-png').href = outputData[1].url;
189
+ document.getElementById('download-txt').href = outputData[2].url;
190
+ downloadLinks.style.display = 'block';
191
+
192
  statusElement.textContent = 'کد QR با موفقیت ساخته شد.';
193
 
194
  } catch (error) {
195
  statusElement.textContent = `خطا: ${error.message}`;
196
+ console.error(error);
197
  } finally {
198
  toggleButtons(false);
199
  }
200
  }
 
 
 
 
 
 
 
 
 
 
201
 
202
+ // تابع برای خواندن کد QR
203
  async function readQRCode() {
204
  const fileInput = document.getElementById('qr-file');
205
  if (fileInput.files.length === 0) {
206
  alert('لطفاً یک فایل تصویر را انتخاب کنید.');
207
  return;
208
  }
209
+
210
  const file = fileInput.files[0];
211
  const statusElement = document.getElementById('read-status');
212
  const resultElement = document.getElementById('read-result');
213
 
214
  toggleButtons(true);
215
+ statusElement.textContent = 'در حال خواندن کد...';
216
  resultElement.textContent = '';
217
 
218
  try {
219
+ // تبدیل فایل به Base64 برای ارسال به API
220
  const base64File = await fileToBase64(file);
221
 
222
  const response = await fetch(`${API_BASE_URL}/run/decode_qr`, {
223
  method: 'POST',
224
  headers: { 'Content-Type': 'application/json' },
225
  body: JSON.stringify({
226
+ "data": [
227
+ base64File
228
+ ]
229
  })
230
  });
231
 
232
+ if (!response.ok) throw new Error(`خطای سرور: ${response.statusText}`);
233
+
234
  const result = await response.json();
235
 
236
+ // نمایش متن خوانده شده
237
+ resultElement.textContent = result.data[0];
238
+ statusElement.textContent = 'کد با موفقیت خوانده شد.';
 
239
 
240
  } catch (error) {
241
  statusElement.textContent = `خطا: ${error.message}`;
242
+ console.error(error);
243
  } finally {
244
  toggleButtons(false);
245
  }