Hugging Face's logo

Spaces:
zshashz
/
testjs
Running

App Files Community
zshashz commited on
Commit
6a7ea1e
·
1 Parent(s): 48d3019

ok

Browse files
Files changed (1) hide show
  1. index.html +154 -18
index.html CHANGED
@@ -1,19 +1,155 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>Voice Recorder</title>
7
+ <style>
8
+ .card {
9
+ max-width: 600px;
10
+ margin: 2rem auto;
11
+ padding: 2rem;
12
+ border-radius: 10px;
13
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
14
+ text-align: center;
15
+ }
16
+
17
+ .button {
18
+ padding: 1rem 2rem;
19
+ margin: 0.5rem;
20
+ border: none;
21
+ border-radius: 5px;
22
+ cursor: pointer;
23
+ font-size: 1rem;
24
+ }
25
+
26
+ .record {
27
+ background-color: #ff4444;
28
+ color: white;
29
+ }
30
+
31
+ .record.recording {
32
+ background-color: #aa0000;
33
+ }
34
+
35
+ .status {
36
+ margin-top: 1rem;
37
+ font-style: italic;
38
+ }
39
+
40
+ .response {
41
+ margin-top: 1rem;
42
+ padding: 1rem;
43
+ background-color: #f5f5f5;
44
+ border-radius: 5px;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div class="card">
50
+ <h1>Voice Recorder</h1>
51
+ <button id="recordButton" class="button record">Start Recording</button>
52
+ <div id="status" class="status">Click to start recording</div>
53
+ <div id="response" class="response"></div>
54
+ </div>
55
+
56
+ <script>
57
+ class VoiceRecorder {
58
+ constructor() {
59
+ this.mediaRecorder = null;
60
+ this.audioChunks = [];
61
+ this.isRecording = false;
62
+ this.recordButton = document.getElementById('recordButton');
63
+ this.statusDiv = document.getElementById('status');
64
+ this.responseDiv = document.getElementById('response');
65
+
66
+ this.recordButton.addEventListener('click', () => this.toggleRecording());
67
+
68
+ // Replace with your Eleven Labs API key
69
+ this.ELEVEN_LABS_API_KEY = 'sk_4202af01226d4d527984c445a2e729d21ec28c5cfb309df7';
70
+ }
71
+
72
+ async setupMediaRecorder() {
73
+ try {
74
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
75
+ this.mediaRecorder = new MediaRecorder(stream);
76
+
77
+ this.mediaRecorder.ondataavailable = (event) => {
78
+ this.audioChunks.push(event.data);
79
+ };
80
+
81
+ this.mediaRecorder.onstop = async () => {
82
+ const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
83
+ await this.sendToElevenLabs(audioBlob);
84
+ this.audioChunks = [];
85
+ };
86
+
87
+ } catch (error) {
88
+ console.error('Error accessing microphone:', error);
89
+ this.statusDiv.textContent = 'Error accessing microphone. Please ensure microphone permissions are granted.';
90
+ }
91
+ }
92
+
93
+ async toggleRecording() {
94
+ if (!this.mediaRecorder) {
95
+ await this.setupMediaRecorder();
96
+ }
97
+
98
+ if (!this.isRecording) {
99
+ this.startRecording();
100
+ } else {
101
+ this.stopRecording();
102
+ }
103
+ }
104
+
105
+ startRecording() {
106
+ this.mediaRecorder.start();
107
+ this.isRecording = true;
108
+ this.recordButton.textContent = 'Stop Recording';
109
+ this.recordButton.classList.add('recording');
110
+ this.statusDiv.textContent = 'Recording...';
111
+ }
112
+
113
+ stopRecording() {
114
+ this.mediaRecorder.stop();
115
+ this.isRecording = false;
116
+ this.recordButton.textContent = 'Start Recording';
117
+ this.recordButton.classList.remove('recording');
118
+ this.statusDiv.textContent = 'Processing audio...';
119
+ }
120
+
121
+ async sendToElevenLabs(audioBlob) {
122
+ try {
123
+ const formData = new FormData();
124
+ formData.append('audio', audioBlob);
125
+
126
+ const response = await fetch('https://api.elevenlabs.io/v1/speech-to-text', {
127
+ method: 'POST',
128
+ headers: {
129
+ 'xi-api-key': this.ELEVEN_LABS_API_KEY,
130
+ },
131
+ body: formData
132
+ });
133
+
134
+ if (!response.ok) {
135
+ throw new Error(`HTTP error! status: ${response.status}`);
136
+ }
137
+
138
+ const data = await response.json();
139
+ this.responseDiv.textContent = `Transcription: ${data.text}`;
140
+ this.statusDiv.textContent = 'Transcription complete';
141
+
142
+ } catch (error) {
143
+ console.error('Error sending to Eleven Labs:', error);
144
+ this.statusDiv.textContent = 'Error processing audio. Please try again.';
145
+ }
146
+ }
147
+ }
148
+
149
+ // Initialize the voice recorder when the page loads
150
+ window.addEventListener('load', () => {
151
+ new VoiceRecorder();
152
+ });
153
+ </script>
154
+ </body>
155
+ </html>