Hugging Face's logo

Spaces:
Satyam-Singh
/
IOT-Web-assistant
Running

App Files Community
Satyam-Singh commited on
Commit
19a212d
•
1 Parent(s): 57a407b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +36 -86
index.html CHANGED
@@ -3,94 +3,44 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LLAVA Voice Assistant</title>
7
- <style>
8
- /* Reset margin and padding for full-page layout */
9
- body, html {
10
- margin: 0;
11
- padding: 0;
12
- height: 100%;
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- background-color: #f5f5f5;
17
- }
18
-
19
- /* Full-page iframe styling */
20
- iframe {
21
- width: 100vw; /* 100% of the viewport width */
22
- height: 100vh; /* 100% of the viewport height */
23
- border: none; /* Remove iframe border */
24
- }
25
-
26
- /* Centered Button */
27
- #requestPermissionBtn {
28
- position: absolute;
29
- z-index: 10; /* Make sure the button is above the iframe */
30
- padding: 10px 20px;
31
- font-size: 18px;
32
- background-color: #007bff;
33
- color: white;
34
- border: none;
35
- border-radius: 5px;
36
- cursor: pointer;
37
- }
38
-
39
- #requestPermissionBtn:hover {
40
- background-color: #0056b3;
41
- }
42
- </style>
43
  </head>
44
  <body>
45
- <!-- Button to trigger microphone access -->
46
- <button id="requestPermissionBtn" onclick="requestMicrophoneAccess()">Allow Microphone</button>
47
-
48
- <!-- Full-screen iframe to embed Deepgram agent -->
49
- <iframe id="deepgramIframe" src="https://deepgram.com/agent" style="display:none;"></iframe>
50
-
51
- <script>
52
- // Check if microphone permission was already granted (stored in localStorage)
53
- if (localStorage.getItem('microphoneGranted') === 'true') {
54
- // If permission was already granted, directly show the iframe
55
- document.getElementById('requestPermissionBtn').style.display = 'none';
56
- document.getElementById('deepgramIframe').style.display = 'block';
57
- } else {
58
- // Check if microphone permission is already granted using the Permissions API
59
- navigator.permissions.query({ name: 'microphone' })
60
- .then(function(permissionStatus) {
61
- // If the microphone is already granted
62
- if (permissionStatus.state === 'granted') {
63
- // Mark microphone access as granted in localStorage (only once)
64
- localStorage.setItem('microphoneGranted', 'true');
65
- document.getElementById('requestPermissionBtn').style.display = 'none';
66
- document.getElementById('deepgramIframe').style.display = 'block';
67
  }
68
- })
69
- .catch(function(error) {
70
- console.error('Error checking microphone permission:', error);
71
- });
72
- }
73
-
74
- // Function to request microphone access
75
- function requestMicrophoneAccess() {
76
- navigator.mediaDevices.getUserMedia({ audio: true })
77
- .then(function(stream) {
78
- console.log('Microphone access granted');
79
-
80
- // Mark microphone access as granted in localStorage (only once)
81
- localStorage.setItem('microphoneGranted', 'true');
82
-
83
- // Hide the permission button and show the iframe
84
- document.getElementById('requestPermissionBtn').style.display = 'none';
85
- document.getElementById('deepgramIframe').style.display = 'block';
86
-
87
- // Optionally: You may also want to pass the microphone stream directly to the iframe or API.
88
- // For now, Deepgram's iframe automatically tries to use the microphone.
89
- })
90
- .catch(function(error) {
91
- console.error('Microphone access denied or failed:', error);
92
- });
93
- }
94
- </script>
95
  </body>
96
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Single File Iframe with Microphone Access</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
9
+ <h1>Main Page with Iframe</h1>
10
+
11
+ <!-- Iframe with microphone permission -->
12
+ <iframe
13
+ srcdoc="
14
+ <!DOCTYPE html>
15
+ <html lang='en'>
16
+ <head>
17
+ <meta charset='UTF-8'>
18
+ <meta name='viewport' content='width=device-width, initial-scale=1.0'>
19
+ <title>Iframe Content</title>
20
+ <script>
21
+ async function requestMicrophoneAccess() {
22
+ try {
23
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
24
+ document.getElementById('status').innerText = 'Microphone access granted.';
25
+ } catch (error) {
26
+ console.error('Microphone access denied:', error);
27
+ document.getElementById('status').innerText = 'Microphone access denied.';
28
+ }
 
 
29
  }
30
+ window.addEventListener('load', requestMicrophoneAccess);
31
+ </script>
32
+ </head>
33
+ <body>
34
+ <h2>Iframe Content</h2>
35
+ <p id='status'>Requesting microphone access...</p>
36
+ </body>
37
+ </html>
38
+ "
39
+ allow="microphone"
40
+ width="600"
41
+ height="400"
42
+ title="Iframe with Microphone Access">
43
+ </iframe>
44
+
 
 
 
 
 
 
 
 
 
 
 
 
45
  </body>
46
  </html>