AnyaSchen commited on
Commit
6552e34
·
1 Parent(s): 72277b5

try to use address for backend

Browse files
Files changed (1) hide show
  1. 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://localhost:7860/asr" style="width: 300px;">
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 Transcription</button>
102
  </div>
103
  <div id="transcription"></div>
104
  </div>
105
 
106
  <script>
107
- let ws = null;
108
- let mediaRecorder = null;
109
- let audioChunks = [];
110
- let reconnectAttempts = 0;
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
- const wsUrlInput = document.getElementById('wsUrl');
119
- const statusDiv = document.getElementById('status');
120
- const transcriptionDiv = document.getElementById('transcription');
121
- const errorMessageDiv = document.getElementById('error-message');
 
 
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;