Cloud-first UX: default to Deepgram, gate start button, add room sharing
- Change default transcription mode from local to byok (cloud/Deepgram) - Move Transcription Mode selector to top of settings for visibility - Hide local-only settings (model, VAD, timing) when cloud mode selected - Disable Start button until API key (byok) or login (managed) is configured - Add room creation and share code flow to Shared Captions section - Add POST /api/create-room endpoint to Node.js sync server - Update default sync URL placeholder to caption.shadowdao.com Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
@@ -46,6 +46,14 @@
|
||||
let managedPassword = $state("");
|
||||
let autoCheckUpdates = $state(true);
|
||||
|
||||
let isCloudMode = $derived(remoteMode === "managed" || remoteMode === "byok");
|
||||
|
||||
// Room creation / join state
|
||||
let shareCode = $state("");
|
||||
let joinCode = $state("");
|
||||
let roomCreating = $state(false);
|
||||
let roomCreateMessage = $state("");
|
||||
|
||||
let saving = $state(false);
|
||||
let saveMessage = $state("");
|
||||
|
||||
@@ -266,6 +274,99 @@
|
||||
}
|
||||
}
|
||||
|
||||
const CAPTION_SERVER = "https://caption.shadowdao.com";
|
||||
|
||||
function generateRandomName(): string {
|
||||
const adjectives = ['swift', 'bright', 'cosmic', 'electric', 'turbo', 'mega', 'ultra', 'super', 'hyper', 'alpha'];
|
||||
const nouns = ['phoenix', 'dragon', 'tiger', 'falcon', 'comet', 'storm', 'blaze', 'thunder', 'frost', 'nebula'];
|
||||
const num = Math.floor(Math.random() * 10000);
|
||||
return `${adjectives[Math.floor(Math.random() * adjectives.length)]}-${nouns[Math.floor(Math.random() * nouns.length)]}-${num}`;
|
||||
}
|
||||
|
||||
function generateRandomPassphrase(): string {
|
||||
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < 16; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function encodeShareCode(url: string, room: string, passphrase: string): string {
|
||||
return btoa(JSON.stringify({ url, room, passphrase }));
|
||||
}
|
||||
|
||||
function decodeShareCode(code: string): { url: string; room: string; passphrase: string } | null {
|
||||
try {
|
||||
const json = JSON.parse(atob(code.trim()));
|
||||
if (json.url && json.room && json.passphrase) {
|
||||
return json;
|
||||
}
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateRoom() {
|
||||
roomCreating = true;
|
||||
roomCreateMessage = "";
|
||||
shareCode = "";
|
||||
|
||||
const room = generateRandomName();
|
||||
const passphrase = generateRandomPassphrase();
|
||||
const serverSendUrl = `${CAPTION_SERVER}/api/send`;
|
||||
|
||||
try {
|
||||
const resp = await fetch(`${CAPTION_SERVER}/api/create-room`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ room, passphrase }),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({ error: "Request failed" }));
|
||||
roomCreateMessage = `Error: ${err.error || resp.statusText}`;
|
||||
return;
|
||||
}
|
||||
|
||||
syncUrl = serverSendUrl;
|
||||
syncRoom = room;
|
||||
syncPassphrase = passphrase;
|
||||
syncEnabled = true;
|
||||
|
||||
shareCode = encodeShareCode(serverSendUrl, room, passphrase);
|
||||
roomCreateMessage = "Room created! Share the code below with others.";
|
||||
} catch (err) {
|
||||
roomCreateMessage = `Error: ${err instanceof Error ? err.message : String(err)}`;
|
||||
} finally {
|
||||
roomCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleJoinRoom() {
|
||||
const decoded = decodeShareCode(joinCode);
|
||||
if (!decoded) {
|
||||
roomCreateMessage = "Invalid share code. Please check and try again.";
|
||||
return;
|
||||
}
|
||||
syncUrl = decoded.url;
|
||||
syncRoom = decoded.room;
|
||||
syncPassphrase = decoded.passphrase;
|
||||
syncEnabled = true;
|
||||
joinCode = "";
|
||||
roomCreateMessage = "Room joined! Fields have been auto-filled.";
|
||||
}
|
||||
|
||||
async function copyShareCode() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareCode);
|
||||
roomCreateMessage = "Share code copied to clipboard!";
|
||||
} catch {
|
||||
roomCreateMessage = "Failed to copy. Please select and copy manually.";
|
||||
}
|
||||
}
|
||||
|
||||
function handleOverlayClick(e: MouseEvent) {
|
||||
if ((e.target as HTMLElement).classList.contains("settings-overlay")) {
|
||||
handleCancel();
|
||||
@@ -327,7 +428,90 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Transcription Settings -->
|
||||
<!-- Remote Transcription (moved up for cloud-first UX) -->
|
||||
<section class="settings-section">
|
||||
<h3>Transcription Mode</h3>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="byok"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Cloud (Deepgram)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="managed"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Managed Service
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="local"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Local (Whisper)
|
||||
</label>
|
||||
</div>
|
||||
{#if remoteMode === "byok"}
|
||||
<div class="field">
|
||||
<label for="byok-key">Deepgram API Key</label>
|
||||
<input
|
||||
id="byok-key"
|
||||
type="password"
|
||||
bind:value={byokApiKey}
|
||||
placeholder="Enter your Deepgram API key"
|
||||
/>
|
||||
<p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
|
||||
Get a key at <a href="https://console.deepgram.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">console.deepgram.com</a>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if remoteMode === "managed"}
|
||||
<div class="field">
|
||||
<label for="remote-url">Server URL</label>
|
||||
<input
|
||||
id="remote-url"
|
||||
type="url"
|
||||
bind:value={remoteServerUrl}
|
||||
placeholder="wss://your-proxy.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="managed-auth">
|
||||
<div class="field">
|
||||
<label for="managed-email">Email</label>
|
||||
<input
|
||||
id="managed-email"
|
||||
type="email"
|
||||
bind:value={managedEmail}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="managed-password">Password</label>
|
||||
<input
|
||||
id="managed-password"
|
||||
type="password"
|
||||
bind:value={managedPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-buttons">
|
||||
<button onclick={handleManagedLogin}>Login</button>
|
||||
<button onclick={handleManagedRegister}>Register</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if !isCloudMode}
|
||||
<!-- Transcription Settings (local Whisper only) -->
|
||||
<section class="settings-section">
|
||||
<h3>Transcription Settings</h3>
|
||||
<div class="field">
|
||||
@@ -473,6 +657,7 @@
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Display Settings -->
|
||||
<section class="settings-section">
|
||||
@@ -628,11 +813,11 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Server Sync -->
|
||||
<!-- Server Sync (Shared Captions) -->
|
||||
<section class="settings-section">
|
||||
<h3>Server Sync</h3>
|
||||
<h3>Shared Captions</h3>
|
||||
<div class="field-row">
|
||||
<label for="sync-enabled">Enable Server Sync</label>
|
||||
<label for="sync-enabled">Enable Shared Captions</label>
|
||||
<input
|
||||
id="sync-enabled"
|
||||
type="checkbox"
|
||||
@@ -640,13 +825,48 @@
|
||||
/>
|
||||
</div>
|
||||
{#if syncEnabled}
|
||||
<div class="room-actions">
|
||||
<button
|
||||
onclick={handleCreateRoom}
|
||||
disabled={roomCreating}
|
||||
class="secondary"
|
||||
>
|
||||
{roomCreating ? "Creating..." : "Create Room"}
|
||||
</button>
|
||||
<div class="join-row">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={joinCode}
|
||||
placeholder="Paste share code to join"
|
||||
class="join-input"
|
||||
/>
|
||||
<button onclick={handleJoinRoom} disabled={!joinCode.trim()} class="secondary">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if roomCreateMessage}
|
||||
<p class="room-message" class:error={roomCreateMessage.startsWith("Error")}>{roomCreateMessage}</p>
|
||||
{/if}
|
||||
|
||||
{#if shareCode}
|
||||
<div class="share-code-box">
|
||||
<label>Share Code</label>
|
||||
<div class="share-code-row">
|
||||
<input type="text" value={shareCode} readonly class="share-code-input" />
|
||||
<button onclick={copyShareCode} class="secondary">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="field">
|
||||
<label for="sync-url">Server URL</label>
|
||||
<input
|
||||
id="sync-url"
|
||||
type="url"
|
||||
bind:value={syncUrl}
|
||||
placeholder="http://localhost:3000/api/send"
|
||||
placeholder="https://caption.shadowdao.com/api/send"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -664,90 +884,6 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Remote Transcription -->
|
||||
<section class="settings-section">
|
||||
<h3>Remote Transcription</h3>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="local"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Local
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="managed"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Managed
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="byok"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
BYOK (Bring Your Own Key)
|
||||
</label>
|
||||
</div>
|
||||
{#if remoteMode === "managed"}
|
||||
<div class="field">
|
||||
<label for="remote-url">Server URL</label>
|
||||
<input
|
||||
id="remote-url"
|
||||
type="url"
|
||||
bind:value={remoteServerUrl}
|
||||
placeholder="wss://your-proxy.com"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if remoteMode === "byok"}
|
||||
<div class="field">
|
||||
<label for="byok-key">Deepgram API Key</label>
|
||||
<input
|
||||
id="byok-key"
|
||||
type="password"
|
||||
bind:value={byokApiKey}
|
||||
placeholder="Enter your Deepgram API key"
|
||||
/>
|
||||
<p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
|
||||
Get a key at <a href="https://console.deepgram.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">console.deepgram.com</a>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if remoteMode === "managed"}
|
||||
<div class="managed-auth">
|
||||
<div class="field">
|
||||
<label for="managed-email">Email</label>
|
||||
<input
|
||||
id="managed-email"
|
||||
type="email"
|
||||
bind:value={managedEmail}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="managed-password">Password</label>
|
||||
<input
|
||||
id="managed-password"
|
||||
type="password"
|
||||
bind:value={managedPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-buttons">
|
||||
<button onclick={handleManagedLogin}>Login</button>
|
||||
<button onclick={handleManagedRegister}>Register</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Updates -->
|
||||
<section class="settings-section">
|
||||
<h3>Updates</h3>
|
||||
@@ -943,6 +1079,73 @@
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.room-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.join-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.join-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.room-message {
|
||||
font-size: 12px;
|
||||
color: #4CAF50;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.room-message.error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.share-code-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.share-code-box label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.share-code-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.share-code-input {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.danger-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--accent-red, #f44336);
|
||||
|
||||
Reference in New Issue
Block a user