Spaces:
Paused
Paused
try to use address for backend
Browse files- static/index.html +21 -12
static/index.html
CHANGED
@@ -90,7 +90,7 @@
|
|
90 |
<h1>Whisper Live Transcription</h1>
|
91 |
<div class="config">
|
92 |
<label for="wsUrl">WebSocket URL:</label>
|
93 |
-
<input type="text" id="wsUrl" value="ws://
|
94 |
</div>
|
95 |
<div id="status" class="status disconnected">Disconnected</div>
|
96 |
<div id="error-message"></div>
|
@@ -98,27 +98,36 @@
|
|
98 |
<button id="startBtn">Start Recording</button>
|
99 |
<button id="stopBtn" disabled>Stop Recording</button>
|
100 |
<button id="reconnectBtn">Reconnect</button>
|
101 |
-
<button id="clearBtn">Clear
|
102 |
</div>
|
103 |
<div id="transcription"></div>
|
104 |
</div>
|
105 |
|
106 |
<script>
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
const maxReconnectAttempts = 5;
|
112 |
-
const reconnectDelay = 2000; // 2 seconds
|
113 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
114 |
const startBtn = document.getElementById('startBtn');
|
115 |
const stopBtn = document.getElementById('stopBtn');
|
116 |
const reconnectBtn = document.getElementById('reconnectBtn');
|
117 |
const clearBtn = document.getElementById('clearBtn');
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
-
|
|
|
|
|
122 |
|
123 |
function showError(message) {
|
124 |
errorMessageDiv.textContent = message;
|
|
|
90 |
<h1>Whisper Live Transcription</h1>
|
91 |
<div class="config">
|
92 |
<label for="wsUrl">WebSocket URL:</label>
|
93 |
+
<input type="text" id="wsUrl" value="ws://" style="width: 300px;">
|
94 |
</div>
|
95 |
<div id="status" class="status disconnected">Disconnected</div>
|
96 |
<div id="error-message"></div>
|
|
|
98 |
<button id="startBtn">Start Recording</button>
|
99 |
<button id="stopBtn" disabled>Stop Recording</button>
|
100 |
<button id="reconnectBtn">Reconnect</button>
|
101 |
+
<button id="clearBtn">Clear</button>
|
102 |
</div>
|
103 |
<div id="transcription"></div>
|
104 |
</div>
|
105 |
|
106 |
<script>
|
107 |
+
// Get the current server's address
|
108 |
+
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
109 |
+
const wsUrlInput = document.getElementById('wsUrl');
|
110 |
+
wsUrlInput.value = `${protocol}//${window.location.host}/asr`;
|
|
|
|
|
111 |
|
112 |
+
let mediaRecorder;
|
113 |
+
let websocket;
|
114 |
+
let audioContext;
|
115 |
+
let audioInput;
|
116 |
+
let audioStream;
|
117 |
+
let isRecording = false;
|
118 |
+
const transcriptionDiv = document.getElementById('transcription');
|
119 |
+
const statusDiv = document.getElementById('status');
|
120 |
+
const errorMessageDiv = document.getElementById('error-message');
|
121 |
const startBtn = document.getElementById('startBtn');
|
122 |
const stopBtn = document.getElementById('stopBtn');
|
123 |
const reconnectBtn = document.getElementById('reconnectBtn');
|
124 |
const clearBtn = document.getElementById('clearBtn');
|
125 |
+
|
126 |
+
let ws = null;
|
127 |
+
let audioChunks = [];
|
128 |
+
let reconnectAttempts = 0;
|
129 |
+
const maxReconnectAttempts = 5;
|
130 |
+
const reconnectDelay = 2000; // 2 seconds
|
131 |
|
132 |
function showError(message) {
|
133 |
errorMessageDiv.textContent = message;
|