admin-valentin/WhisperLiveKit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chrome extension ws default to localhost

Browse source
This commit is contained in:
Quentin Fuxa 2025-09-25 23:04:00 +02:00
parent 32099b9275
commit 94c34efd90
3 changed files with 53 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
whisperlivekit/web/live_transcription.css
View file

@ -198,6 +198,13 @@ body {
align-items: center; align-items: center;
gap: 15px; gap: 15px;
position: relative; position: relative;
flex-wrap: wrap;
}
.buttons-container {
display: flex;
align-items: center;
gap: 15px;
} }
.settings { .settings {
@ -241,7 +248,6 @@ body {
.settings { .settings {
display: none; display: none;
top: 100%;
background: var(--bg); background: var(--bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
@ -253,6 +259,21 @@ body {
} }
} }
@media (max-width: 600px) {
.settings-container {
flex-direction: column;
align-items: center;
gap: 10px;
}
.buttons-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
}
.field { .field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -517,6 +538,10 @@ label {
gap: 10px; gap: 10px;
} }
.buttons-container {
gap: 10px;
}
.settings { .settings {
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;

30
whisperlivekit/web/live_transcription.html
View file

@ -11,21 +11,23 @@
<body> <body>
<div class="header-container"> <div class="header-container">
<div class="settings-container"> <div class="settings-container">
<button id="recordButton"> <div class="buttons-container">
<div class="shape-container"> <button id="recordButton">
<div class="shape"></div> <div class="shape-container">
</div> <div class="shape"></div>
<div class="recording-info">
<div class="wave-container">
<canvas id="waveCanvas"></canvas>
</div> </div>
<div class="timer">00:00</div> <div class="recording-info">
</div> <div class="wave-container">
</button> <canvas id="waveCanvas"></canvas>
</div>
<div class="timer">00:00</div>
</div>
</button>
<button id="settingsToggle" class="settings-toggle" title="Show/hide settings"> <button id="settingsToggle" class="settings-toggle" title="Show/hide settings">
<img src="web/src/settings.svg" alt="Settings" /> <img src="web/src/settings.svg" alt="Settings" />
</button> </button>
</div>
<div class="settings"> <div class="settings">
<div class="field"> <div class="field">
@ -74,4 +76,4 @@
<script src="live_transcription.js"></script> <script src="live_transcription.js"></script>
</body> </body>
</html> </html>

15
whisperlivekit/web/live_transcription.js
View file

@ -175,10 +175,17 @@ function fmt1(x) {
return Number.isFinite(n) ? n.toFixed(1) : x; return Number.isFinite(n) ? n.toFixed(1) : x;
} }
// Default WebSocket URL computation let host, port, protocol;
const host = window.location.hostname || "localhost";
const port = window.location.port; if (isExtension) {
const protocol = window.location.protocol === "https:" ? "wss" : "ws"; host = "localhost";
port = 8000;
protocol = "ws";
} else {
host = window.location.hostname || "localhost";
port = window.location.port || 8000;
protocol = window.location.protocol === "https:" ? "wss" : "ws";
}
const defaultWebSocketUrl = `${protocol}://${host}${port ? ":" + port : ""}/asr`; const defaultWebSocketUrl = `${protocol}://${host}${port ? ":" + port : ""}/asr`;
// Populate default caption and input // Populate default caption and input