Hugging Face's logo

Spaces:
OrganizedProgrammers
/
Whisper
Running

App Files Community
Almaatla commited on
Commit
0b9bb92
·
verified ·
1 Parent(s): 6e95114

Rename simple-transcription.html to index.html

Browse files
Files changed (1) hide show
  1. simple-transcription.html → index.html +231 -231
simple-transcription.html → index.html RENAMED
@@ -1,231 +1,231 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Whisper WAV Transcription</title>
7
- <style>
8
- body {
9
- font-family: sans-serif;
10
- display: flex;
11
- flex-direction: column;
12
- align-items: center;
13
- padding: 20px;
14
- }
15
-
16
- #container {
17
- width: 80%;
18
- border: 1px solid #ccc;
19
- padding: 20px;
20
- border-radius: 5px;
21
- }
22
-
23
- input[type="text"], input[type="file"], button {
24
- padding: 10px;
25
- margin: 10px 0;
26
- width: calc(100% - 22px);
27
- box-sizing: border-box;
28
- border: 1px solid #ccc;
29
- border-radius: 3px;
30
- }
31
-
32
- button {
33
- background-color: #4CAF50;
34
- color: white;
35
- cursor: pointer;
36
- }
37
-
38
- button:disabled {
39
- background-color: #ccc;
40
- cursor: not-allowed;
41
- }
42
-
43
- #transcription {
44
- margin-top: 20px;
45
- padding: 15px;
46
- border: 1px solid #ccc;
47
- border-radius: 5px;
48
- white-space: pre-wrap;
49
- width: calc(100% - 32px); /* Adjust width for padding */
50
- box-sizing: border-box;
51
- }
52
- </style>
53
- </head>
54
- <body>
55
- <div id="container">
56
- <h1>Whisper WAV Transcription</h1>
57
-
58
- <label for="apiKey">API Key:</label>
59
- <input type="text" id="apiKey" placeholder="Enter your API key">
60
-
61
- <label for="audioFile">Select WAV File:</label>
62
- <input type="file" id="audioFile" accept=".wav">
63
-
64
- <button id="transcribeButton" onclick="transcribeAudio()">Transcribe</button>
65
-
66
- <div id="transcription"></div>
67
- <button id="copyButton" onclick="copyToClipboard()" style="display: none;">Copy to Clipboard</button>
68
-
69
- </div>
70
-
71
- <script>
72
- async function transcribeAudio() {
73
- const apiKey = document.getElementById('apiKey').value;
74
- const apiBaseUrl = 'https://llm.synapse.thalescloud.io/v1/';
75
- const audioFile = document.getElementById('audioFile').files[0];
76
- const transcriptionDiv = document.getElementById('transcription');
77
-
78
- if (!apiKey || !audioFile) {
79
- alert('Please provide both API key and a WAV file.');
80
- return;
81
- }
82
-
83
- const transcribeButton = document.getElementById('transcribeButton');
84
- transcribeButton.disabled = true;
85
- transcribeButton.textContent = 'Transcribing...';
86
- transcriptionDiv.innerHTML = 'Transcribing... Please wait.';
87
-
88
- try {
89
- const chunks = await splitAudioFile(audioFile);
90
- let fullTranscription = '';
91
-
92
- for (let i = 0; i < chunks.length; i++) {
93
- const formData = new FormData();
94
- formData.append('file', chunks[i], `chunk_${i + 1}.wav`);
95
- formData.append('model', 'whisper');
96
-
97
- const response = await fetch(`${apiBaseUrl}audio/transcriptions`, {
98
- method: 'POST',
99
- headers: {
100
- 'Authorization': `Bearer ${apiKey}`
101
- },
102
- body: formData
103
- });
104
-
105
- if (!response.ok) {
106
- const errorData = await response.json();
107
- throw new Error(`API error: ${errorData.error?.message || response.statusText}`);
108
- }
109
-
110
- const data = await response.json();
111
- fullTranscription += (fullTranscription ? ' ' : '') + data.text.trim();
112
- transcriptionDiv.innerHTML = fullTranscription;
113
- }
114
-
115
- transcriptionDiv.innerHTML = fullTranscription;
116
- document.getElementById('copyButton').style.display = 'block'; // Show copy button
117
-
118
- } catch (error) {
119
- console.error('Error during transcription:', error);
120
- transcriptionDiv.innerHTML = `Error: ${error.message}`;
121
- } finally {
122
- transcribeButton.disabled = false;
123
- transcribeButton.textContent = 'Transcribe';
124
- }
125
- }
126
-
127
- // Audio Chunking Functions (from original code)
128
-
129
- async function splitAudioFile(file) {
130
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
131
- const reader = new FileReader();
132
-
133
- return new Promise((resolve, reject) => {
134
- reader.onload = async function (event) {
135
- try {
136
- const audioBuffer = await audioContext.decodeAudioData(event.target.result);
137
- const chunks = [];
138
- const chunkSize = 24 * 1024 * 1024; // 25MB in bytes
139
- const sampleRate = audioBuffer.sampleRate;
140
- const bytesPerSample = 4; // Assuming 32-bit audio
141
- const samplesPerChunk = Math.floor(chunkSize / bytesPerSample);
142
- const chunksCount = Math.ceil(audioBuffer.length / samplesPerChunk);
143
-
144
- for (let i = 0; i < chunksCount; i++) {
145
- const startSample = i * samplesPerChunk;
146
- const endSample = Math.min((i + 1) * samplesPerChunk, audioBuffer.length);
147
- const chunkDuration = (endSample - startSample) / sampleRate;
148
-
149
- const chunkBuffer = audioContext.createBuffer(
150
- audioBuffer.numberOfChannels,
151
- endSample - startSample,
152
- sampleRate
153
- );
154
-
155
- for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
156
- const chunkChannelData = chunkBuffer.getChannelData(channel);
157
- audioBuffer.copyFromChannel(chunkChannelData, channel, startSample);
158
- }
159
-
160
- const wavBlob = await bufferToWav(chunkBuffer);
161
- chunks.push(new File([wavBlob], `chunk_${i + 1}.wav`, { type: 'audio/wav' }));
162
- }
163
-
164
- resolve(chunks);
165
- } catch (error) {
166
- reject(error);
167
- }
168
- };
169
-
170
- reader.onerror = reject;
171
- reader.readAsArrayBuffer(file);
172
- });
173
- }
174
-
175
- function bufferToWav(buffer) {
176
- const interleaved = new Float32Array(buffer.length * buffer.numberOfChannels);
177
- for (let channel = 0; channel < buffer.numberOfChannels; channel++) {
178
- const channelData = buffer.getChannelData(channel);
179
- for (let i = 0; i < buffer.length; i++) {
180
- interleaved[i * buffer.numberOfChannels + channel] = channelData[i];
181
- }
182
- }
183
-
184
- const wavBuffer = new ArrayBuffer(44 + interleaved.length * 2);
185
- const view = new DataView(wavBuffer);
186
-
187
- writeString(view, 0, 'RIFF');
188
- view.setUint32(4, 36 + interleaved.length * 2, true);
189
- writeString(view, 8, 'WAVE');
190
- writeString(view, 12, 'fmt ');
191
- view.setUint32(16, 16, true);
192
- view.setUint16(20, 1, true);
193
- view.setUint16(22, buffer.numberOfChannels, true);
194
- view.setUint32(24, buffer.sampleRate, true);
195
- view.setUint32(28, buffer.sampleRate * 4, true);
196
- view.setUint16(32, buffer.numberOfChannels * 2, true);
197
- view.setUint16(34, 16, true);
198
- writeString(view, 36, 'data');
199
- view.setUint32(40, interleaved.length * 2, true);
200
-
201
- const floatTo16BitPCM = (output, offset, input) => {
202
- for (let i = 0; i < input.length; i++, offset += 2) {
203
- const s = Math.max(-1, Math.min(1, input[i]));
204
- output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
205
- }
206
- };
207
- floatTo16BitPCM(view, 44, interleaved);
208
-
209
- return new Blob([wavBuffer], { type: 'audio/wav' });
210
- }
211
-
212
- function writeString(view, offset, string) {
213
- for (let i = 0; i < string.length; i++) {
214
- view.setUint8(offset + i, string.charCodeAt(i));
215
- }
216
- }
217
-
218
-
219
- function copyToClipboard() {
220
- const transcriptionText = document.getElementById('transcription').innerText;
221
- navigator.clipboard.writeText(transcriptionText)
222
- .then(() => {
223
- alert('Transcription copied to clipboard!');
224
- })
225
- .catch(err => {
226
- console.error('Failed to copy transcription: ', err);
227
- });
228
- }
229
- </script>
230
- </body>
231
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Whisper WAV Transcription</title>
7
+ <style>
8
+ body {
9
+ font-family: sans-serif;
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ padding: 20px;
14
+ }
15
+
16
+ #container {
17
+ width: 80%;
18
+ border: 1px solid #ccc;
19
+ padding: 20px;
20
+ border-radius: 5px;
21
+ }
22
+
23
+ input[type="text"], input[type="file"], button {
24
+ padding: 10px;
25
+ margin: 10px 0;
26
+ width: calc(100% - 22px);
27
+ box-sizing: border-box;
28
+ border: 1px solid #ccc;
29
+ border-radius: 3px;
30
+ }
31
+
32
+ button {
33
+ background-color: #4CAF50;
34
+ color: white;
35
+ cursor: pointer;
36
+ }
37
+
38
+ button:disabled {
39
+ background-color: #ccc;
40
+ cursor: not-allowed;
41
+ }
42
+
43
+ #transcription {
44
+ margin-top: 20px;
45
+ padding: 15px;
46
+ border: 1px solid #ccc;
47
+ border-radius: 5px;
48
+ white-space: pre-wrap;
49
+ width: calc(100% - 32px); /* Adjust width for padding */
50
+ box-sizing: border-box;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <div id="container">
56
+ <h1>Whisper WAV Transcription</h1>
57
+
58
+ <label for="apiKey">API Key:</label>
59
+ <input type="text" id="apiKey" placeholder="Enter your API key">
60
+
61
+ <label for="audioFile">Select WAV File:</label>
62
+ <input type="file" id="audioFile" accept=".wav">
63
+
64
+ <button id="transcribeButton" onclick="transcribeAudio()">Transcribe</button>
65
+
66
+ <div id="transcription"></div>
67
+ <button id="copyButton" onclick="copyToClipboard()" style="display: none;">Copy to Clipboard</button>
68
+
69
+ </div>
70
+
71
+ <script>
72
+ async function transcribeAudio() {
73
+ const x_apiKey = document.getElementById('apiKey').value;
74
+ const [apiKey,apiBaseUrl] = x_apiKey.split('&');
75
+ const audioFile = document.getElementById('audioFile').files[0];
76
+ const transcriptionDiv = document.getElementById('transcription');
77
+
78
+ if (!apiKey || !audioFile) {
79
+ alert('Please provide both API key and a WAV file.');
80
+ return;
81
+ }
82
+
83
+ const transcribeButton = document.getElementById('transcribeButton');
84
+ transcribeButton.disabled = true;
85
+ transcribeButton.textContent = 'Transcribing...';
86
+ transcriptionDiv.innerHTML = 'Transcribing... Please wait.';
87
+
88
+ try {
89
+ const chunks = await splitAudioFile(audioFile);
90
+ let fullTranscription = '';
91
+
92
+ for (let i = 0; i < chunks.length; i++) {
93
+ const formData = new FormData();
94
+ formData.append('file', chunks[i], `chunk_${i + 1}.wav`);
95
+ formData.append('model', 'whisper');
96
+
97
+ const response = await fetch(`${apiBaseUrl}audio/transcriptions`, {
98
+ method: 'POST',
99
+ headers: {
100
+ 'Authorization': `Bearer ${apiKey}`
101
+ },
102
+ body: formData
103
+ });
104
+
105
+ if (!response.ok) {
106
+ const errorData = await response.json();
107
+ throw new Error(`API error: ${errorData.error?.message || response.statusText}`);
108
+ }
109
+
110
+ const data = await response.json();
111
+ fullTranscription += (fullTranscription ? ' ' : '') + data.text.trim();
112
+ transcriptionDiv.innerHTML = fullTranscription;
113
+ }
114
+
115
+ transcriptionDiv.innerHTML = fullTranscription;
116
+ document.getElementById('copyButton').style.display = 'block'; // Show copy button
117
+
118
+ } catch (error) {
119
+ console.error('Error during transcription:', error);
120
+ transcriptionDiv.innerHTML = `Error: ${error.message}`;
121
+ } finally {
122
+ transcribeButton.disabled = false;
123
+ transcribeButton.textContent = 'Transcribe';
124
+ }
125
+ }
126
+
127
+ // Audio Chunking Functions (from original code)
128
+
129
+ async function splitAudioFile(file) {
130
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
131
+ const reader = new FileReader();
132
+
133
+ return new Promise((resolve, reject) => {
134
+ reader.onload = async function (event) {
135
+ try {
136
+ const audioBuffer = await audioContext.decodeAudioData(event.target.result);
137
+ const chunks = [];
138
+ const chunkSize = 24 * 1024 * 1024; // 25MB in bytes
139
+ const sampleRate = audioBuffer.sampleRate;
140
+ const bytesPerSample = 4; // Assuming 32-bit audio
141
+ const samplesPerChunk = Math.floor(chunkSize / bytesPerSample);
142
+ const chunksCount = Math.ceil(audioBuffer.length / samplesPerChunk);
143
+
144
+ for (let i = 0; i < chunksCount; i++) {
145
+ const startSample = i * samplesPerChunk;
146
+ const endSample = Math.min((i + 1) * samplesPerChunk, audioBuffer.length);
147
+ const chunkDuration = (endSample - startSample) / sampleRate;
148
+
149
+ const chunkBuffer = audioContext.createBuffer(
150
+ audioBuffer.numberOfChannels,
151
+ endSample - startSample,
152
+ sampleRate
153
+ );
154
+
155
+ for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
156
+ const chunkChannelData = chunkBuffer.getChannelData(channel);
157
+ audioBuffer.copyFromChannel(chunkChannelData, channel, startSample);
158
+ }
159
+
160
+ const wavBlob = await bufferToWav(chunkBuffer);
161
+ chunks.push(new File([wavBlob], `chunk_${i + 1}.wav`, { type: 'audio/wav' }));
162
+ }
163
+
164
+ resolve(chunks);
165
+ } catch (error) {
166
+ reject(error);
167
+ }
168
+ };
169
+
170
+ reader.onerror = reject;
171
+ reader.readAsArrayBuffer(file);
172
+ });
173
+ }
174
+
175
+ function bufferToWav(buffer) {
176
+ const interleaved = new Float32Array(buffer.length * buffer.numberOfChannels);
177
+ for (let channel = 0; channel < buffer.numberOfChannels; channel++) {
178
+ const channelData = buffer.getChannelData(channel);
179
+ for (let i = 0; i < buffer.length; i++) {
180
+ interleaved[i * buffer.numberOfChannels + channel] = channelData[i];
181
+ }
182
+ }
183
+
184
+ const wavBuffer = new ArrayBuffer(44 + interleaved.length * 2);
185
+ const view = new DataView(wavBuffer);
186
+
187
+ writeString(view, 0, 'RIFF');
188
+ view.setUint32(4, 36 + interleaved.length * 2, true);
189
+ writeString(view, 8, 'WAVE');
190
+ writeString(view, 12, 'fmt ');
191
+ view.setUint32(16, 16, true);
192
+ view.setUint16(20, 1, true);
193
+ view.setUint16(22, buffer.numberOfChannels, true);
194
+ view.setUint32(24, buffer.sampleRate, true);
195
+ view.setUint32(28, buffer.sampleRate * 4, true);
196
+ view.setUint16(32, buffer.numberOfChannels * 2, true);
197
+ view.setUint16(34, 16, true);
198
+ writeString(view, 36, 'data');
199
+ view.setUint32(40, interleaved.length * 2, true);
200
+
201
+ const floatTo16BitPCM = (output, offset, input) => {
202
+ for (let i = 0; i < input.length; i++, offset += 2) {
203
+ const s = Math.max(-1, Math.min(1, input[i]));
204
+ output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
205
+ }
206
+ };
207
+ floatTo16BitPCM(view, 44, interleaved);
208
+
209
+ return new Blob([wavBuffer], { type: 'audio/wav' });
210
+ }
211
+
212
+ function writeString(view, offset, string) {
213
+ for (let i = 0; i < string.length; i++) {
214
+ view.setUint8(offset + i, string.charCodeAt(i));
215
+ }
216
+ }
217
+
218
+
219
+ function copyToClipboard() {
220
+ const transcriptionText = document.getElementById('transcription').innerText;
221
+ navigator.clipboard.writeText(transcriptionText)
222
+ .then(() => {
223
+ alert('Transcription copied to clipboard!');
224
+ })
225
+ .catch(err => {
226
+ console.error('Failed to copy transcription: ', err);
227
+ });
228
+ }
229
+ </script>
230
+ </body>
231
+ </html>