upstream-archive/VoiceStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7533d884b532da55c58e2113eb63454ffb6d3b19
VoiceStudio/frontend/src/components/CaptureButton.css
T
Palash Debnath 8d11e19494 feat: dictation maturity + batch TTS pipeline + tests (#32) 
Global Hotkey:
- Register ⌘+⇧+Space system-wide via tauri-plugin-global-shortcut
- Shows/focuses window and emits tray-dictate event from any app

Auto-Paste:
- enigo crate simulates ⌘V/Ctrl+V after transcription
- Text auto-pastes into whatever app was active before dictation

Streaming ASR:
- WebSocket endpoint /ws/transcribe for live partial transcription
- 2s buffer interval, configurable via OMNIVOICE_STREAM_INTERVAL
- CaptureButton streams audio chunks, shows italic partial text
- Falls back to HTTP POST if WebSocket unavailable

Batch TTS Pipeline:
- Replace stub worker with full pipeline:
  extract → transcribe → translate → generate → mix → export
- Per-job progress tracking (stage, percent, current_lang, segment)
- GoogleTranslator integration via deep_translator
- Download endpoint GET /batch/download/{id}/{lang}
- BatchQueue UI rewritten: progress bars, cancel/delete, downloads
- Type-safe API client (api/batch.ts)

Tests:
- 23 tests for batch endpoints + streaming ASR helpers
- Lightweight fixtures that stub GPU deps

UX (earlier sessions):
- Dual-mode ASR (Turbo MLX + WhisperX Accurate)
- Enhanced download progress (speed, ETA, bytes)
- Status bar black flash fix
- Cold-start model preloading
- Full accessibility audit (ARIA, focus-visible)
- Compact UI layout improvements
- README updated with new features
2026-04-28 18:54:26 +05:30

319 lines
8.0 KiB
CSS
Raw Blame History

/* ── CaptureButton — Global dictation FAB ─────────────────────────────── */
.capture-widget {
position: fixed;
/* Sit above the footer status bar (28px collapsed, expands via CSS var) */
bottom: calc(var(--logs-footer-height, 28px) + 12px);
right: 18px;
z-index: 9000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
pointer-events: none;
}
.capture-widget > * {
pointer-events: auto;
}
/* ── FAB button ───────────────────────────────────────────────────────── */
.capture-fab {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f3a5b6, #d3869b);
color: #1d2021;
box-shadow: 0 4px 20px rgba(243, 165, 182, 0.35);
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.capture-fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 28px rgba(243, 165, 182, 0.45);
}
.capture-fab:active {
transform: scale(0.95);
}
.capture-fab--recording {
background: linear-gradient(135deg, #fb4934, #cc241d);
color: #fbf1c7;
animation: capture-pulse 1.5s ease-in-out infinite;
box-shadow: 0 4px 24px rgba(251, 73, 52, 0.4);
}
.capture-fab--busy {
opacity: 0.7;
cursor: wait;
}
@keyframes capture-pulse {
0%, 100% { box-shadow: 0 4px 24px rgba(251, 73, 52, 0.3); }
50% { box-shadow: 0 4px 36px rgba(251, 73, 52, 0.6); }
}
/* ── Expanded panel ───────────────────────────────────────────────────── */
.capture-panel {
background: color-mix(in srgb, var(--chrome-bg, #282828) 92%, transparent);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid color-mix(in srgb, var(--chrome-border, #3c3836) 60%, transparent);
border-radius: 16px;
padding: 14px 16px;
min-width: 260px;
max-width: 320px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
animation: capture-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes capture-slide-up {
from { opacity: 0; transform: translateY(12px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.capture-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.capture-panel__title {
font-size: var(--text-sm, 13px);
font-weight: 600;
color: var(--chrome-fg, #ebdbb2);
}
.capture-panel__close {
background: none;
border: none;
color: var(--chrome-fg-muted, #a89984);
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
}
.capture-panel__close:hover {
color: var(--chrome-fg, #ebdbb2);
background: color-mix(in srgb, var(--chrome-fg, #ebdbb2) 8%, transparent);
}
/* Recording visualization */
.capture-panel__recording {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
}
.capture-panel__waveform {
display: flex;
align-items: center;
gap: 2px;
height: 24px;
flex: 1;
}
.capture-panel__bar {
width: 3px;
background: linear-gradient(to top, #f3a5b6, #fb4934);
border-radius: 2px;
animation: capture-bar 0.8s ease-in-out infinite alternate;
}
@keyframes capture-bar {
0% { height: 4px; }
100% { height: 20px; }
}
.capture-panel__partial {
margin: 6px 0 0;
font-size: 0.72rem;
font-style: italic;
color: var(--chrome-fg-muted);
opacity: 0.7;
line-height: 1.4;
max-height: 60px;
overflow-y: auto;
animation: capture-fadeIn 0.3s ease-out;
}
@keyframes capture-fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 0.7; transform: translateY(0); }
}
.capture-panel__timer {
font-family: var(--chrome-font-mono, 'JetBrains Mono', monospace);
font-size: var(--text-xs, 11px);
color: var(--chrome-fg-muted, #a89984);
min-width: 32px;
text-align: right;
}
/* Loading state */
.capture-panel__loading {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: var(--text-sm, 13px);
color: var(--chrome-fg-muted, #a89984);
}
/* Result */
.capture-panel__result {
padding: 6px 0;
}
.capture-panel__text {
font-size: var(--text-sm, 13px);
color: var(--chrome-fg, #ebdbb2);
line-height: 1.5;
margin: 0 0 8px;
max-height: 120px;
overflow-y: auto;
word-break: break-word;
}
.capture-panel__copy {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, #8ec07c 30%, transparent);
background: color-mix(in srgb, #8ec07c 8%, transparent);
color: #8ec07c;
font-size: var(--text-xs, 11px);
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.capture-panel__copy:hover {
background: color-mix(in srgb, #8ec07c 15%, transparent);
border-color: color-mix(in srgb, #8ec07c 50%, transparent);
}
.capture-panel__empty {
font-size: var(--text-sm, 13px);
color: var(--chrome-fg-dim, #665c54);
padding: 8px 0;
font-style: italic;
}
/* Keyboard hint */
.capture-panel__hint {
font-size: var(--text-2xs, 10px);
color: var(--chrome-fg-dim, #665c54);
text-align: center;
padding-top: 6px;
border-top: 1px solid color-mix(in srgb, var(--chrome-border, #3c3836) 40%, transparent);
margin-top: 6px;
}
.capture-panel__hint kbd {
display: inline-block;
padding: 1px 5px;
border-radius: 4px;
background: color-mix(in srgb, var(--chrome-fg, #ebdbb2) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--chrome-border, #3c3836) 60%, transparent);
font-family: var(--chrome-font-mono, monospace);
font-size: inherit;
margin: 0 1px;
}
/* ── Result actions row ──────────────────────────────────────────────── */
.capture-panel__result-actions {
display: flex;
align-items: center;
gap: 8px;
}
.capture-panel__engine {
font-size: 9px;
color: var(--chrome-fg-dim, #665c54);
font-family: var(--chrome-font-mono, monospace);
font-variant-numeric: tabular-nums;
}
/* ── Mode toggle + auto-copy ─────────────────────────────────────────── */
.capture-panel__controls {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
}
.capture-panel__mode-toggle {
display: flex;
gap: 2px;
padding: 2px;
border-radius: 8px;
background: color-mix(in srgb, var(--chrome-fg, #ebdbb2) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--chrome-border, #3c3836) 50%, transparent);
}
.capture-panel__mode-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--chrome-fg-muted, #a89984);
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.capture-panel__mode-btn:hover {
color: var(--chrome-fg, #ebdbb2);
}
.capture-panel__mode-btn.is-active {
background: color-mix(in srgb, var(--color-brand, #d3869b) 18%, transparent);
color: var(--color-brand, #d3869b);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.capture-panel__auto-copy {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--chrome-border, #3c3836) 50%, transparent);
background: transparent;
color: var(--chrome-fg-dim, #665c54);
font-size: 9px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
margin-left: auto;
}
.capture-panel__auto-copy:hover {
color: var(--chrome-fg-muted, #a89984);
border-color: var(--chrome-border, #3c3836);
}
.capture-panel__auto-copy.is-active {
color: #8ec07c;
border-color: color-mix(in srgb, #8ec07c 35%, transparent);
background: color-mix(in srgb, #8ec07c 6%, transparent);
}
Reference in New Issue View Git Blame Copy Permalink