Hugging Face's logo

Spaces:
Mohabedalgani
/
test
Running

App Files Community
Mohabedalgani commited on
Commit
3d5ea39
·
verified ·
1 Parent(s): 8e039e6

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +160 -3
index.html CHANGED
@@ -6,6 +6,7 @@
6
  <title>MediScan - QR Medical Information</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
9
  <style>
10
  @keyframes pulse {
11
  0%, 100% { transform: scale(1); }
@@ -40,6 +41,15 @@
40
  border-radius: 1rem;
41
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
42
  }
 
 
 
 
 
 
 
 
 
43
  </style>
44
  </head>
45
  <body class="bg-gray-50 min-h-screen">
@@ -69,9 +79,14 @@
69
  <div class="container mx-auto px-4 text-center">
70
  <h2 class="text-4xl md:text-5xl font-bold mb-6">Access Medical Information Instantly</h2>
71
  <p class="text-xl mb-8 max-w-3xl mx-auto">Scan QR codes on medical products, prescriptions, or patient IDs to get instant access to vital health information.</p>
72
- <button id="startScanBtn" class="bg-white text-teal-700 font-bold py-3 px-8 rounded-full hover:bg-teal-100 transition duration-300 shadow-lg animate-pulse-slow">
73
- <i class="fas fa-qrcode mr-2"></i> Start Scanning
74
- </button>
 
 
 
 
 
75
  </div>
76
  </section>
77
 
@@ -111,6 +126,46 @@
111
  </div>
112
  </section>
113
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  <!-- Scanner Modal -->
115
  <div id="scannerModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
116
  <div class="w-full max-w-md">
@@ -338,12 +393,28 @@
338
  const saveResultBtn = document.getElementById('saveResultBtn');
339
  const scanResultContent = document.getElementById('scanResultContent');
340
 
 
 
 
 
 
 
 
 
 
 
341
  // Variables
342
  let stream = null;
343
  let currentFacingMode = 'environment';
344
  let torchEnabled = false;
345
  let track = null;
346
 
 
 
 
 
 
 
347
  // Start scanning
348
  startScanBtn.addEventListener('click', async function() {
349
  scannerModal.classList.remove('hidden');
@@ -494,6 +565,92 @@
494
  resultModal.classList.add('hidden');
495
  document.body.style.overflow = 'auto';
496
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
497
  });
498
  </script>
499
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohabedalgani/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
6
  <title>MediScan - QR Medical Information</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/qrcode.min.js"></script>
10
  <style>
11
  @keyframes pulse {
12
  0%, 100% { transform: scale(1); }
 
41
  border-radius: 1rem;
42
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
43
  }
44
+ .recording-animation {
45
+ animation: pulse 1s infinite;
46
+ }
47
+ #voiceQRCode {
48
+ width: 200px;
49
+ height: 200px;
50
+ margin: 0 auto;
51
+ display: block;
52
+ }
53
  </style>
54
  </head>
55
  <body class="bg-gray-50 min-h-screen">
 
79
  <div class="container mx-auto px-4 text-center">
80
  <h2 class="text-4xl md:text-5xl font-bold mb-6">Access Medical Information Instantly</h2>
81
  <p class="text-xl mb-8 max-w-3xl mx-auto">Scan QR codes on medical products, prescriptions, or patient IDs to get instant access to vital health information.</p>
82
+ <div class="flex justify-center space-x-4">
83
+ <button id="startScanBtn" class="bg-white text-teal-700 font-bold py-3 px-8 rounded-full hover:bg-teal-100 transition duration-300 shadow-lg animate-pulse-slow">
84
+ <i class="fas fa-qrcode mr-2"></i> Start Scanning
85
+ </button>
86
+ <button id="startVoiceBtn" class="bg-teal-800 text-white font-bold py-3 px-8 rounded-full hover:bg-teal-900 transition duration-300 shadow-lg">
87
+ <i class="fas fa-microphone mr-2"></i> Record Voice
88
+ </button>
89
+ </div>
90
  </div>
91
  </section>
92
 
 
126
  </div>
127
  </section>
128
 
129
+ <!-- Voice Recording Section -->
130
+ <section class="py-16 bg-gray-100">
131
+ <div class="container mx-auto px-4">
132
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Voice to QR Code</h2>
133
+
134
+ <div class="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto">
135
+ <div class="text-center mb-8">
136
+ <p class="text-gray-600 mb-6">Record your voice message and we'll convert it into a QR code that can be scanned to play back your recording.</p>
137
+
138
+ <div class="flex justify-center space-x-4 mb-6">
139
+ <button id="startRecordingBtn" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
140
+ <i class="fas fa-microphone mr-2"></i> Start Recording
141
+ </button>
142
+ <button id="stopRecordingBtn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 hidden">
143
+ <i class="fas fa-stop mr-2"></i> Stop Recording
144
+ </button>
145
+ </div>
146
+
147
+ <div id="recordingStatus" class="text-gray-600 mb-6 hidden">
148
+ <div class="flex items-center justify-center">
149
+ <div class="w-3 h-3 bg-red-600 rounded-full mr-2 recording-animation"></div>
150
+ <span>Recording in progress...</span>
151
+ </div>
152
+ </div>
153
+
154
+ <audio id="audioPlayback" controls class="mx-auto mb-6 hidden"></audio>
155
+
156
+ <div id="qrCodeContainer" class="hidden">
157
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Your Voice QR Code</h3>
158
+ <div id="voiceQRCode" class="mb-4"></div>
159
+ <p class="text-gray-600 mb-4">Scan this QR code to play back your recorded message.</p>
160
+ <button id="downloadQRBtn" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded transition duration-300">
161
+ <i class="fas fa-download mr-2"></i> Download QR Code
162
+ </button>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
  <!-- Scanner Modal -->
170
  <div id="scannerModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
171
  <div class="w-full max-w-md">
 
393
  const saveResultBtn = document.getElementById('saveResultBtn');
394
  const scanResultContent = document.getElementById('scanResultContent');
395
 
396
+ // Voice recording elements
397
+ const startVoiceBtn = document.getElementById('startVoiceBtn');
398
+ const startRecordingBtn = document.getElementById('startRecordingBtn');
399
+ const stopRecordingBtn = document.getElementById('stopRecordingBtn');
400
+ const recordingStatus = document.getElementById('recordingStatus');
401
+ const audioPlayback = document.getElementById('audioPlayback');
402
+ const qrCodeContainer = document.getElementById('qrCodeContainer');
403
+ const voiceQRCode = document.getElementById('voiceQRCode');
404
+ const downloadQRBtn = document.getElementById('downloadQRBtn');
405
+
406
  // Variables
407
  let stream = null;
408
  let currentFacingMode = 'environment';
409
  let torchEnabled = false;
410
  let track = null;
411
 
412
+ // Voice recording variables
413
+ let mediaRecorder;
414
+ let audioChunks = [];
415
+ let audioBlob;
416
+ let audioUrl;
417
+
418
  // Start scanning
419
  startScanBtn.addEventListener('click', async function() {
420
  scannerModal.classList.remove('hidden');
 
565
  resultModal.classList.add('hidden');
566
  document.body.style.overflow = 'auto';
567
  });
568
+
569
+ // Voice recording functionality
570
+ startVoiceBtn.addEventListener('click', function() {
571
+ // Scroll to voice recording section
572
+ document.querySelector('#voiceQRCode').scrollIntoView({
573
+ behavior: 'smooth'
574
+ });
575
+ });
576
+
577
+ startRecordingBtn.addEventListener('click', startRecording);
578
+ stopRecordingBtn.addEventListener('click', stopRecording);
579
+
580
+ async function startRecording() {
581
+ try {
582
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
583
+ mediaRecorder = new MediaRecorder(stream);
584
+ audioChunks = [];
585
+
586
+ mediaRecorder.ondataavailable = function(event) {
587
+ if (event.data.size > 0) {
588
+ audioChunks.push(event.data);
589
+ }
590
+ };
591
+
592
+ mediaRecorder.onstop = function() {
593
+ audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
594
+ audioUrl = URL.createObjectURL(audioBlob);
595
+ audioPlayback.src = audioUrl;
596
+ audioPlayback.classList.remove('hidden');
597
+
598
+ // Generate QR code with the audio URL
599
+ generateQRCode(audioUrl);
600
+ };
601
+
602
+ mediaRecorder.start();
603
+ startRecordingBtn.classList.add('hidden');
604
+ stopRecordingBtn.classList.remove('hidden');
605
+ recordingStatus.classList.remove('hidden');
606
+
607
+ } catch (error) {
608
+ console.error('Error accessing microphone:', error);
609
+ alert('Could not access the microphone. Please ensure you have granted microphone permissions.');
610
+ }
611
+ }
612
+
613
+ function stopRecording() {
614
+ if (mediaRecorder && mediaRecorder.state !== 'inactive') {
615
+ mediaRecorder.stop();
616
+ mediaRecorder.stream.getTracks().forEach(track => track.stop());
617
+
618
+ startRecordingBtn.classList.remove('hidden');
619
+ stopRecordingBtn.classList.add('hidden');
620
+ recordingStatus.classList.add('hidden');
621
+ }
622
+ }
623
+
624
+ function generateQRCode(audioUrl) {
625
+ // Clear previous QR code
626
+ voiceQRCode.innerHTML = '';
627
+
628
+ // Generate new QR code
629
+ QRCode.toCanvas(voiceQRCode, audioUrl, {
630
+ width: 200,
631
+ margin: 2,
632
+ color: {
633
+ dark: '#0d9488', // teal-600
634
+ light: '#ffffff'
635
+ }
636
+ }, function(error) {
637
+ if (error) console.error(error);
638
+ });
639
+
640
+ // Show QR code container
641
+ qrCodeContainer.classList.remove('hidden');
642
+ }
643
+
644
+ // Download QR code
645
+ downloadQRBtn.addEventListener('click', function() {
646
+ if (!voiceQRCode.firstChild) return;
647
+
648
+ const canvas = voiceQRCode.querySelector('canvas');
649
+ const link = document.createElement('a');
650
+ link.download = 'voice-message-qr.png';
651
+ link.href = canvas.toDataURL('image/png');
652
+ link.click();
653
+ });
654
  });
655
  </script>
656
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohabedalgani/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>