Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

App Files Community
Elias207 commited on
Commit
cd4a72c
·
verified ·
1 Parent(s): 5b45af1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +61 -96
index.html CHANGED
@@ -88,11 +88,10 @@
88
  border: 1px solid rgba(255,255,255,0.3);
89
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
90
  flex: 1;
91
- display: none; /* Changed from display: flex */
92
  flex-direction: column;
93
  }
94
 
95
- /* محتوای تب‌ها */
96
  .tab-content.active {
97
  display: flex;
98
  }
@@ -144,6 +143,17 @@
144
  text-align: center;
145
  cursor: pointer;
146
  transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
147
  }
148
 
149
  .file-upload:hover {
@@ -156,6 +166,15 @@
156
  left: -9999px;
157
  }
158
 
 
 
 
 
 
 
 
 
 
159
  .upload-icon {
160
  font-size: 2.5rem;
161
  margin-bottom: 10px;
@@ -168,16 +187,6 @@
168
  font-weight: 500;
169
  }
170
 
171
- .file-info {
172
- margin-top: 10px;
173
- padding: 8px 12px;
174
- background: rgba(102, 126, 234, 0.1);
175
- border-radius: 8px;
176
- font-size: 0.8rem;
177
- color: #333;
178
- display: none;
179
- }
180
-
181
  /* دکمه */
182
  .btn {
183
  width: 100%;
@@ -194,14 +203,7 @@
194
  overflow: hidden;
195
  }
196
 
197
- /* ===== CHANGE HERE ===== */
198
- .btn-generate {
199
- background: linear-gradient(45deg, #00d2d3, #54a0ff); /* Changed to match .btn-read */
200
- color: white;
201
- box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4); /* Changed to match .btn-read */
202
- }
203
-
204
- .btn-read {
205
  background: linear-gradient(45deg, #00d2d3, #54a0ff);
206
  color: white;
207
  box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4);
@@ -276,37 +278,19 @@
276
  0% { transform: rotate(0deg); }
277
  100% { transform: rotate(360deg); }
278
  }
279
-
280
  @keyframes zoomIn {
281
  from { opacity: 0; transform: scale(0.8); }
282
  to { opacity: 1; transform: scale(1); }
283
  }
284
-
285
  @keyframes slideUp {
286
  from { opacity: 0; transform: translateY(20px); }
287
  to { opacity: 1; transform: translateY(0); }
288
  }
289
-
290
  /* آیکون‌ها */
291
  .icon {
292
  display: inline-block;
293
  margin-left: 8px;
294
  }
295
-
296
- /* ریسپانسیو برای موبایل‌های کوچک */
297
- @media (max-width: 360px) {
298
- .container {
299
- padding: 10px;
300
- }
301
-
302
- .card {
303
- padding: 20px;
304
- }
305
-
306
- .title {
307
- font-size: 1.3rem;
308
- }
309
- }
310
  </style>
311
  </head>
312
  <body>
@@ -336,14 +320,12 @@
336
  <label class="label">متن یا لینک خود را بنویسید:</label>
337
  <textarea id="text-input" class="input" placeholder="مثال: https://google.com یا سلام دنیا">سلام دنیا</textarea>
338
  </div>
339
-
340
  <div class="result" id="qr-result">
341
  <div id="generate-loader" class="loader" style="display: none;"></div>
342
  <div id="qr-display">
343
  <span class="result-empty">QR کد شما اینجا ظاهر می‌شود</span>
344
  </div>
345
  </div>
346
-
347
  <button id="generate-btn" class="btn btn-generate">
348
  <span class="icon">✨</span>
349
  ساخت QR کد
@@ -356,19 +338,18 @@
356
  <label class="label">تصویر QR کد را انتخاب کنید:</label>
357
  <div class="file-upload" onclick="document.getElementById('file-input').click()">
358
  <input type="file" id="file-input" accept="image/*">
359
- <div class="upload-icon">📷</div>
360
- <div class="upload-text">انتخاب تصویر</div>
361
- <div id="file-info" class="file-info"></div>
 
362
  </div>
363
  </div>
364
-
365
  <div class="result" id="read-result">
366
  <div id="read-loader" class="loader" style="display: none;"></div>
367
  <div id="decoded-text">
368
  <span class="result-empty">نتیجه اینجا نمای�� داده می‌شود</span>
369
  </div>
370
  </div>
371
-
372
  <button id="read-btn" class="btn btn-read">
373
  <span class="icon">🔍</span>
374
  خواندن QR کد
@@ -390,29 +371,50 @@
390
  const decodedText = document.getElementById('decoded-text');
391
  const generateLoader = document.getElementById('generate-loader');
392
  const readLoader = document.getElementById('read-loader');
393
- const fileInfo = document.getElementById('file-info');
 
 
 
 
394
 
395
  // تعویض تب‌ها
396
  tabs.forEach(tab => {
397
  tab.addEventListener('click', () => {
398
- // حذف کلاس active از همه تب‌ها و محتواها
399
  tabs.forEach(t => t.classList.remove('active'));
400
  tabContents.forEach(tc => tc.classList.remove('active'));
401
 
402
- // اضافه کردن کلاس active به تب و محتوای کلیک‌شده
403
  tab.classList.add('active');
404
  const targetTab = tab.getAttribute('data-tab');
405
  document.getElementById(targetTab + '-content').classList.add('active');
406
  });
407
  });
408
 
409
- // نمایش اطلاعات فایل
410
  fileInput.addEventListener('change', () => {
411
- if (fileInput.files.length > 0) {
412
- fileInfo.textContent = `📎 ${fileInput.files[0].name}`;
413
- fileInfo.style.display = 'block';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  } else {
415
- fileInfo.style.display = 'none';
 
 
 
 
 
416
  }
417
  });
418
 
@@ -421,22 +423,17 @@
421
 
422
  const listenForData = (sessionHash, onResult, onError) => {
423
  const eventSource = new EventSource(`${SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
424
-
425
  eventSource.onmessage = (event) => {
426
  const data = JSON.parse(event.data);
427
  if (data.msg === "process_completed") {
428
  eventSource.close();
429
- if (data.output.error) {
430
- onError(data.output.error);
431
- } else {
432
- onResult(data.output.data);
433
- }
434
  } else if (data.msg === "process_failed") {
435
  eventSource.close();
436
  onError("پردازش با خطا مواجه شد.");
437
  }
438
  };
439
-
440
  eventSource.onerror = (err) => {
441
  eventSource.close();
442
  onError("خطا در ارتباط با سرور.");
@@ -450,30 +447,21 @@
450
  alert("لطفاً متنی را وارد کنید.");
451
  return;
452
  }
453
-
454
  generateLoader.style.display = 'block';
455
  qrDisplay.innerHTML = '';
456
  generateBtn.disabled = true;
457
-
458
  const sessionHash = generateSessionHash();
459
-
460
  try {
461
  const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
462
  method: 'POST',
463
  headers: { 'Content-Type': 'application/json' },
464
  body: JSON.stringify({ fn_index: 0, data: [text], session_hash: sessionHash })
465
  });
466
-
467
  if (!joinResponse.ok) throw new Error('خطا در ارسال درخواست');
468
-
469
  listenForData(
470
  sessionHash,
471
  (result) => {
472
- if (result && result[0]) {
473
- qrDisplay.innerHTML = result[0];
474
- } else {
475
- qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت QR کد</span>';
476
- }
477
  },
478
  (error) => {
479
  alert(`خطا: ${error}`);
@@ -496,45 +484,27 @@
496
  alert("لطفاً یک تصویر انتخاب کنید.");
497
  return;
498
  }
499
-
500
  readLoader.style.display = 'block';
501
  decodedText.innerHTML = '';
502
  readBtn.disabled = true;
503
-
504
  try {
505
  const formData = new FormData();
506
  formData.append('files', file);
507
-
508
- const uploadResponse = await fetch(`${SPACE_URL}/gradio_api/upload`, {
509
- method: 'POST',
510
- body: formData
511
- });
512
-
513
  if (!uploadResponse.ok) throw new Error('خطا در آپلود فایل');
514
-
515
  const uploadResult = await uploadResponse.json();
516
  const serverFilePath = uploadResult[0];
517
-
518
- const fileDataObject = {
519
- path: serverFilePath,
520
- url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`,
521
- orig_name: file.name,
522
- };
523
-
524
  const sessionHash = generateSessionHash();
525
  const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
526
  method: 'POST',
527
  headers: { 'Content-Type': 'application/json' },
528
  body: JSON.stringify({ fn_index: 1, data: [fileDataObject], session_hash: sessionHash })
529
  });
530
-
531
  if (!joinResponse.ok) throw new Error('خطا در پردازش');
532
-
533
  listenForData(
534
  sessionHash,
535
- (result) => {
536
- decodedText.innerHTML = `<div class="result-text">📝 ${result[0]}</div>`;
537
- },
538
  (error) => {
539
  alert(`خطا: ${error}`);
540
  decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>';
@@ -550,29 +520,24 @@
550
  });
551
 
552
  // Drag & Drop برای فایل
553
- const fileUpload = document.querySelector('.file-upload');
554
-
555
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
556
  fileUpload.addEventListener(eventName, (e) => {
557
  e.preventDefault();
558
  e.stopPropagation();
559
  });
560
  });
561
-
562
  ['dragenter', 'dragover'].forEach(eventName => {
563
  fileUpload.addEventListener(eventName, () => {
564
  fileUpload.style.background = 'white';
565
  fileUpload.style.transform = 'translateY(-2px)';
566
  });
567
  });
568
-
569
  ['dragleave', 'drop'].forEach(eventName => {
570
  fileUpload.addEventListener(eventName, () => {
571
  fileUpload.style.background = 'rgba(255,255,255,0.9)';
572
  fileUpload.style.transform = 'translateY(0)';
573
  });
574
  });
575
-
576
  fileUpload.addEventListener('drop', (e) => {
577
  const files = e.dataTransfer.files;
578
  if (files.length > 0) {
 
88
  border: 1px solid rgba(255,255,255,0.3);
89
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
90
  flex: 1;
91
+ display: none;
92
  flex-direction: column;
93
  }
94
 
 
95
  .tab-content.active {
96
  display: flex;
97
  }
 
143
  text-align: center;
144
  cursor: pointer;
145
  transition: all 0.3s ease;
146
+ min-height: 140px; /* برای حفظ اندازه */
147
+ display: flex;
148
+ flex-direction: column;
149
+ align-items: center;
150
+ justify-content: center;
151
+ }
152
+
153
+ /* ===== CHANGE HERE: Style for when image is previewed ===== */
154
+ .file-upload.has-preview {
155
+ padding: 5px;
156
+ border-style: solid;
157
  }
158
 
159
  .file-upload:hover {
 
166
  left: -9999px;
167
  }
168
 
169
+ /* ===== CHANGE HERE: Style for the preview image ===== */
170
+ .file-upload img {
171
+ max-width: 100%;
172
+ max-height: 120px; /* Adjust as needed */
173
+ height: auto;
174
+ border-radius: 8px;
175
+ object-fit: contain;
176
+ }
177
+
178
  .upload-icon {
179
  font-size: 2.5rem;
180
  margin-bottom: 10px;
 
187
  font-weight: 500;
188
  }
189
 
 
 
 
 
 
 
 
 
 
 
190
  /* دکمه */
191
  .btn {
192
  width: 100%;
 
203
  overflow: hidden;
204
  }
205
 
206
+ .btn-generate, .btn-read {
 
 
 
 
 
 
 
207
  background: linear-gradient(45deg, #00d2d3, #54a0ff);
208
  color: white;
209
  box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4);
 
278
  0% { transform: rotate(0deg); }
279
  100% { transform: rotate(360deg); }
280
  }
 
281
  @keyframes zoomIn {
282
  from { opacity: 0; transform: scale(0.8); }
283
  to { opacity: 1; transform: scale(1); }
284
  }
 
285
  @keyframes slideUp {
286
  from { opacity: 0; transform: translateY(20px); }
287
  to { opacity: 1; transform: translateY(0); }
288
  }
 
289
  /* آیکون‌ها */
290
  .icon {
291
  display: inline-block;
292
  margin-left: 8px;
293
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
294
  </style>
295
  </head>
296
  <body>
 
320
  <label class="label">متن یا لینک خود را بنویسید:</label>
321
  <textarea id="text-input" class="input" placeholder="مثال: https://google.com یا سلام دنیا">سلام دنیا</textarea>
322
  </div>
 
323
  <div class="result" id="qr-result">
324
  <div id="generate-loader" class="loader" style="display: none;"></div>
325
  <div id="qr-display">
326
  <span class="result-empty">QR کد شما اینجا ظاهر می‌شود</span>
327
  </div>
328
  </div>
 
329
  <button id="generate-btn" class="btn btn-generate">
330
  <span class="icon">✨</span>
331
  ساخت QR کد
 
338
  <label class="label">تصویر QR کد را انتخاب کنید:</label>
339
  <div class="file-upload" onclick="document.getElementById('file-input').click()">
340
  <input type="file" id="file-input" accept="image/*">
341
+ <div class="upload-content">
342
+ <div class="upload-icon">📷</div>
343
+ <div class="upload-text">انتخاب تصویر</div>
344
+ </div>
345
  </div>
346
  </div>
 
347
  <div class="result" id="read-result">
348
  <div id="read-loader" class="loader" style="display: none;"></div>
349
  <div id="decoded-text">
350
  <span class="result-empty">نتیجه اینجا نمای�� داده می‌شود</span>
351
  </div>
352
  </div>
 
353
  <button id="read-btn" class="btn btn-read">
354
  <span class="icon">🔍</span>
355
  خواندن QR کد
 
371
  const decodedText = document.getElementById('decoded-text');
372
  const generateLoader = document.getElementById('generate-loader');
373
  const readLoader = document.getElementById('read-loader');
374
+
375
+ // ===== CHANGE HERE: Select file upload container and store its original state =====
376
+ const fileUpload = document.querySelector('.file-upload');
377
+ const uploadContent = document.querySelector('.upload-content');
378
+ const originalUploadHTML = fileUpload.innerHTML;
379
 
380
  // تعویض تب‌ها
381
  tabs.forEach(tab => {
382
  tab.addEventListener('click', () => {
 
383
  tabs.forEach(t => t.classList.remove('active'));
384
  tabContents.forEach(tc => tc.classList.remove('active'));
385
 
 
386
  tab.classList.add('active');
387
  const targetTab = tab.getAttribute('data-tab');
388
  document.getElementById(targetTab + '-content').classList.add('active');
389
  });
390
  });
391
 
392
+ // ===== CHANGE HERE: Rewritten logic for file selection and preview =====
393
  fileInput.addEventListener('change', () => {
394
+ const file = fileInput.files[0];
395
+ if (file) {
396
+ const reader = new FileReader();
397
+ reader.onload = function(e) {
398
+ // Create an image element for preview
399
+ const previewImage = document.createElement('img');
400
+ previewImage.src = e.target.result;
401
+
402
+ // Clear the upload box and show the preview
403
+ uploadContent.style.display = 'none'; // Hide icon and text
404
+ if(fileUpload.querySelector('img')) {
405
+ fileUpload.querySelector('img').remove(); // Remove old preview if exists
406
+ }
407
+ fileUpload.appendChild(previewImage);
408
+ fileUpload.classList.add('has-preview');
409
+ }
410
+ reader.readAsDataURL(file); // Read the file as a Data URL
411
  } else {
412
+ // If no file is selected, reset the view
413
+ if(fileUpload.querySelector('img')) {
414
+ fileUpload.querySelector('img').remove();
415
+ }
416
+ uploadContent.style.display = 'block';
417
+ fileUpload.classList.remove('has-preview');
418
  }
419
  });
420
 
 
423
 
424
  const listenForData = (sessionHash, onResult, onError) => {
425
  const eventSource = new EventSource(`${SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
 
426
  eventSource.onmessage = (event) => {
427
  const data = JSON.parse(event.data);
428
  if (data.msg === "process_completed") {
429
  eventSource.close();
430
+ if (data.output.error) onError(data.output.error);
431
+ else onResult(data.output.data);
 
 
 
432
  } else if (data.msg === "process_failed") {
433
  eventSource.close();
434
  onError("پردازش با خطا مواجه شد.");
435
  }
436
  };
 
437
  eventSource.onerror = (err) => {
438
  eventSource.close();
439
  onError("خطا در ارتباط با سرور.");
 
447
  alert("لطفاً متنی را وارد کنید.");
448
  return;
449
  }
 
450
  generateLoader.style.display = 'block';
451
  qrDisplay.innerHTML = '';
452
  generateBtn.disabled = true;
 
453
  const sessionHash = generateSessionHash();
 
454
  try {
455
  const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
456
  method: 'POST',
457
  headers: { 'Content-Type': 'application/json' },
458
  body: JSON.stringify({ fn_index: 0, data: [text], session_hash: sessionHash })
459
  });
 
460
  if (!joinResponse.ok) throw new Error('خطا در ارسال درخواست');
 
461
  listenForData(
462
  sessionHash,
463
  (result) => {
464
+ qrDisplay.innerHTML = (result && result[0]) ? result[0] : '<span class="result-empty">خطا در ساخت QR کد</span>';
 
 
 
 
465
  },
466
  (error) => {
467
  alert(`خطا: ${error}`);
 
484
  alert("لطفاً یک تصویر انتخاب کنید.");
485
  return;
486
  }
 
487
  readLoader.style.display = 'block';
488
  decodedText.innerHTML = '';
489
  readBtn.disabled = true;
 
490
  try {
491
  const formData = new FormData();
492
  formData.append('files', file);
493
+ const uploadResponse = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData });
 
 
 
 
 
494
  if (!uploadResponse.ok) throw new Error('خطا در آپلود فایل');
 
495
  const uploadResult = await uploadResponse.json();
496
  const serverFilePath = uploadResult[0];
497
+ const fileDataObject = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name };
 
 
 
 
 
 
498
  const sessionHash = generateSessionHash();
499
  const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
500
  method: 'POST',
501
  headers: { 'Content-Type': 'application/json' },
502
  body: JSON.stringify({ fn_index: 1, data: [fileDataObject], session_hash: sessionHash })
503
  });
 
504
  if (!joinResponse.ok) throw new Error('خطا در پردازش');
 
505
  listenForData(
506
  sessionHash,
507
+ (result) => { decodedText.innerHTML = `<div class="result-text">📝 ${result[0]}</div>`; },
 
 
508
  (error) => {
509
  alert(`خطا: ${error}`);
510
  decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>';
 
520
  });
521
 
522
  // Drag & Drop برای فایل
 
 
523
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
524
  fileUpload.addEventListener(eventName, (e) => {
525
  e.preventDefault();
526
  e.stopPropagation();
527
  });
528
  });
 
529
  ['dragenter', 'dragover'].forEach(eventName => {
530
  fileUpload.addEventListener(eventName, () => {
531
  fileUpload.style.background = 'white';
532
  fileUpload.style.transform = 'translateY(-2px)';
533
  });
534
  });
 
535
  ['dragleave', 'drop'].forEach(eventName => {
536
  fileUpload.addEventListener(eventName, () => {
537
  fileUpload.style.background = 'rgba(255,255,255,0.9)';
538
  fileUpload.style.transform = 'translateY(0)';
539
  });
540
  });
 
541
  fileUpload.addEventListener('drop', (e) => {
542
  const files = e.dataTransfer.files;
543
  if (files.length > 0) {