acdf098c41
Mirrors the ASR backend pattern exactly: a BACKENDS dict in
tts/router.py maps a backend name to its worker URL, so adding the
next backend is just a new worker file + venv + supervisord entry +
one dict line. XTTS-v2 runs in its own venv (--system-site-packages,
inherits base image torch/CUDA) as a new supervisord program on
port 8005.
XTTS is zero-shot voice cloning, so a reference-voice library was
added (/tts/voices CRUD, stored under /srv/tts/voices) — synthesis
requires picking a previously uploaded voice. Results and model
cache live under /srv/tts/{results,models-cache}, new quadlet
volumes, owned by the same 983:983 user as the existing /srv/asr
dirs.
Fixed two environment issues uncovered while getting XTTS to
actually run inside the container (non-root user, root-built venvs):
- coqui-tts only pins transformers>=4.57 with no ceiling, so pip
installed an incompatible 5.x; pinned to the last 4.x release.
- HOME defaults to /app (owned by root) for the container's runtime
user, so numba/matplotlib/torch cache writes failed; HOME is now
forced to /tmp in all three workers (faster_whisper, qwen3, xtts)
before any of those libraries get imported.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
425 lines
19 KiB
HTML
425 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Speech 콘솔</title>
|
|
<link rel="stylesheet" href="/assets/css/styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<header class="page-header">
|
|
<div class="header-row">
|
|
<div>
|
|
<h1>Speech 콘솔</h1>
|
|
<p class="muted">음성 인식(ASR)과 음성 합성(TTS)을 한 곳에서</p>
|
|
</div>
|
|
<a href="/auth/logout" class="btn-secondary logout-link" title="로그아웃">로그아웃</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="tab-group tab-group--top">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-target="top-asr">ASR · 음성 인식</button>
|
|
<button class="tab-btn" data-target="top-tts">TTS · 음성 합성</button>
|
|
</div>
|
|
|
|
<!-- ═══════════════════ TOP TAB: ASR ═══════════════════ -->
|
|
<div id="top-asr" class="tab-panel">
|
|
<div class="tab-group">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-target="tab-file">파일 전사</button>
|
|
<button class="tab-btn" data-target="tab-realtime">실시간 전사</button>
|
|
<button class="tab-btn" data-target="tab-history">처리 내역</button>
|
|
</div>
|
|
|
|
<!-- TAB: FILE -->
|
|
<div id="tab-file" class="tab-panel">
|
|
<section class="card">
|
|
<form id="file-form">
|
|
|
|
<label>오디오 / 동영상 파일
|
|
<input type="file" id="file-input" name="file" accept="audio/*,video/*" required>
|
|
</label>
|
|
|
|
<div class="grid2">
|
|
<label>백엔드
|
|
<select id="backend" name="backend">
|
|
<option value="faster-whisper" selected>faster-whisper</option>
|
|
<option value="qwen3">Qwen3-ASR</option>
|
|
</select>
|
|
</label>
|
|
<label>모델
|
|
<select id="model" name="model">
|
|
<!-- populated by JS based on backend -->
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label>커스텀 모델 경로 (선택, faster-whisper 전용)
|
|
<input type="text" id="custom_model_path" name="custom_model_path" placeholder="/srv/asr/custom-models/my-model">
|
|
</label>
|
|
|
|
<div class="grid2">
|
|
<label>언어
|
|
<input type="text" id="language" name="language" value="ko" placeholder="ko">
|
|
</label>
|
|
<label>작업
|
|
<select id="task" name="task">
|
|
<option value="transcribe" selected>transcribe</option>
|
|
<option value="translate">translate (영어로 번역)</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- faster-whisper only -->
|
|
<div id="fw-options">
|
|
<div class="grid2">
|
|
<label>Beam size
|
|
<input type="number" id="beam_size" name="beam_size" value="5" min="1" max="20">
|
|
</label>
|
|
<label>Temperature
|
|
<input type="number" id="temperature" name="temperature" value="0" min="0" max="1" step="0.1">
|
|
</label>
|
|
</div>
|
|
<label class="inline">
|
|
<input type="checkbox" id="word_timestamps" name="word_timestamps">
|
|
단어별 타임스탬프
|
|
</label>
|
|
|
|
<div class="section-toggle">
|
|
<button type="button" class="toggle-btn" id="antirep-toggle">
|
|
반복 억제 옵션 <span class="chevron" id="antirep-chevron">▸</span>
|
|
</button>
|
|
</div>
|
|
<div id="antirep-panel" class="collapsible" style="display:none">
|
|
<p class="muted small">반복 토큰 문제 발생 시 조정하세요.</p>
|
|
<div class="grid2">
|
|
<label>no_repeat_ngram_size
|
|
<input type="number" id="no_repeat_ngram_size" name="no_repeat_ngram_size" value="0" min="0" max="10">
|
|
<span class="hint">0=비활성, 3~5 권장</span>
|
|
</label>
|
|
<label>repetition_penalty
|
|
<input type="number" id="repetition_penalty" name="repetition_penalty" value="1.0" min="1.0" max="2.0" step="0.05">
|
|
<span class="hint">1.0=없음, 1.1~1.3 권장</span>
|
|
</label>
|
|
<label>compression_ratio_threshold
|
|
<input type="number" id="compression_ratio_threshold" name="compression_ratio_threshold" value="2.4" min="0.5" max="5.0" step="0.1">
|
|
</label>
|
|
<label>log_prob_threshold
|
|
<input type="number" id="log_prob_threshold" name="log_prob_threshold" value="-1.0" min="-5.0" max="0.0" step="0.1">
|
|
</label>
|
|
<label>no_speech_threshold
|
|
<input type="number" id="no_speech_threshold" name="no_speech_threshold" value="0.6" min="0.0" max="1.0" step="0.05">
|
|
</label>
|
|
<label class="inline" style="align-self:end; padding-top:8px">
|
|
<input type="checkbox" id="condition_on_previous_text" checked>
|
|
이전 텍스트 조건화
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
<label class="inline">
|
|
<input type="checkbox" id="diarize" name="diarize">
|
|
화자 분리 (Speaker Diarization)
|
|
</label>
|
|
<div id="diarize-options" style="display:none">
|
|
<div class="grid3">
|
|
<label>정확한 화자 수
|
|
<input type="number" id="num_speakers" name="num_speakers" min="1" max="30" placeholder="자동">
|
|
</label>
|
|
<label>최소 화자 수
|
|
<input type="number" id="min_speakers" name="min_speakers" min="1" max="30" placeholder="자동">
|
|
</label>
|
|
<label>최대 화자 수
|
|
<input type="number" id="max_speakers" name="max_speakers" min="1" max="30" placeholder="자동">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="submit" id="file-submit-btn">전사 실행</button>
|
|
<button type="button" id="file-copy-btn">텍스트 복사</button>
|
|
<button type="button" id="file-dl-txt-btn">TXT 저장</button>
|
|
<button type="button" id="file-dl-json-btn">JSON 저장</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>상태</h2>
|
|
<pre id="file-status">대기 중</pre>
|
|
</section>
|
|
|
|
<section class="card" id="file-speaker-section" style="display:none">
|
|
<h2>화자별 결과</h2>
|
|
<div id="file-speaker-result"></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>텍스트 결과</h2>
|
|
<textarea id="file-result-text" rows="12" placeholder="전사 결과가 여기에 표시됩니다."></textarea>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>JSON 결과</h2>
|
|
<pre id="file-result-json" class="result-json">{}</pre>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- TAB: REALTIME -->
|
|
<div id="tab-realtime" class="tab-panel" style="display:none">
|
|
<section class="card">
|
|
<h2>실시간 전사 설정</h2>
|
|
<div class="grid2">
|
|
<label>모델
|
|
<select id="rt-model">
|
|
<option value="tiny">tiny (가장 빠름)</option>
|
|
<option value="base">base</option>
|
|
<option value="small">small</option>
|
|
<option value="medium">medium</option>
|
|
<option value="large-v3" selected>large-v3</option>
|
|
</select>
|
|
</label>
|
|
<label>언어
|
|
<input type="text" id="rt-language" value="ko" placeholder="ko">
|
|
</label>
|
|
</div>
|
|
<div class="grid2">
|
|
<label>Beam size
|
|
<input type="number" id="rt-beam_size" value="3" min="1" max="10">
|
|
</label>
|
|
<label>청크 처리 간격
|
|
<select id="rt-chunk_seconds">
|
|
<option value="2">2초 (빠른 반응)</option>
|
|
<option value="3" selected>3초 (균형)</option>
|
|
<option value="5">5초 (더 정확)</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="section-toggle">
|
|
<button type="button" class="toggle-btn" id="rt-antirep-toggle">
|
|
반복 억제 옵션 <span class="chevron" id="rt-antirep-chevron">▸</span>
|
|
</button>
|
|
</div>
|
|
<div id="rt-antirep-panel" class="collapsible" style="display:none">
|
|
<div class="grid2">
|
|
<label>no_repeat_ngram_size
|
|
<input type="number" id="rt-no_repeat_ngram_size" value="0" min="0" max="10">
|
|
<span class="hint">0=비활성, 3~5 권장</span>
|
|
</label>
|
|
<label>repetition_penalty
|
|
<input type="number" id="rt-repetition_penalty" value="1.0" min="1.0" max="2.0" step="0.05">
|
|
</label>
|
|
<label>compression_ratio_threshold
|
|
<input type="number" id="rt-compression_ratio_threshold" value="2.4" min="0.5" max="5.0" step="0.1">
|
|
</label>
|
|
<label>no_speech_threshold
|
|
<input type="number" id="rt-no_speech_threshold" value="0.6" min="0.0" max="1.0" step="0.05">
|
|
</label>
|
|
</div>
|
|
<label class="inline">
|
|
<input type="checkbox" id="rt-condition_on_previous_text" checked>
|
|
이전 텍스트 조건화
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="mic-row">
|
|
<button id="rt-start-btn" class="mic-btn">● 녹음 시작</button>
|
|
<button id="rt-stop-btn" class="mic-btn stop-btn" disabled>■ 녹음 중지</button>
|
|
</div>
|
|
<div id="rt-indicator" class="rt-indicator idle">대기 중</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>실시간 전사</h2>
|
|
<div id="rt-live-box" class="live-box">
|
|
<span class="muted">녹음을 시작하면 텍스트가 여기에 나타납니다.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>최종 텍스트</h2>
|
|
<textarea id="rt-final-text" rows="10" placeholder="녹음 종료 후 최종 결과가 표시됩니다."></textarea>
|
|
<div class="actions" style="margin-top:10px">
|
|
<button type="button" id="rt-copy-btn">텍스트 복사</button>
|
|
<button type="button" id="rt-dl-txt-btn">TXT 저장</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- TAB: HISTORY -->
|
|
<div id="tab-history" class="tab-panel" style="display:none">
|
|
<section class="card">
|
|
<div class="history-toolbar">
|
|
<h2 style="margin:0">처리 내역</h2>
|
|
<button type="button" id="history-refresh-btn" class="btn-secondary">새로고침</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="history-list">
|
|
<div class="muted" style="padding:16px">내역을 불러오는 중...</div>
|
|
</div>
|
|
|
|
<!-- 상세 뷰 -->
|
|
<div id="history-detail" style="display:none">
|
|
<section class="card">
|
|
<div class="detail-header">
|
|
<button type="button" id="history-back-btn" class="btn-secondary">← 목록으로</button>
|
|
<span id="detail-title" class="detail-title"></span>
|
|
<button type="button" id="detail-delete-btn" class="btn-danger">삭제</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" id="detail-media-section" style="display:none">
|
|
<h2>원본 파일</h2>
|
|
<div id="detail-media-container"></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>정보</h2>
|
|
<div id="detail-meta" class="meta-grid"></div>
|
|
</section>
|
|
|
|
<section class="card" id="detail-speaker-section" style="display:none">
|
|
<h2>화자별 결과</h2>
|
|
<div id="detail-speaker-result"></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>텍스트 결과</h2>
|
|
<textarea id="detail-text" rows="12" readonly></textarea>
|
|
<div class="actions" style="margin-top:10px">
|
|
<button type="button" id="detail-copy-btn">텍스트 복사</button>
|
|
<button type="button" id="detail-dl-txt-btn">TXT 저장</button>
|
|
<button type="button" id="detail-dl-json-btn">JSON 저장</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>JSON 결과</h2>
|
|
<pre id="detail-json" class="result-json">{}</pre>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════ TOP TAB: TTS ═══════════════════ -->
|
|
<div id="top-tts" class="tab-panel" style="display:none">
|
|
<div class="tab-group">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-target="tab-tts-synth">텍스트 → 음성</button>
|
|
<button class="tab-btn" data-target="tab-tts-history">처리 내역</button>
|
|
</div>
|
|
|
|
<div id="tab-tts-synth" class="tab-panel">
|
|
<section class="card">
|
|
<h2>보이스</h2>
|
|
<p class="muted small">XTTS는 제로샷 보이스 클로닝 모델이라, 합성하기 전에 참조 음성을
|
|
먼저 등록해야 합니다(5~15초 분량의 깨끗한 음성 권장).</p>
|
|
<div id="tts-voice-list" style="margin:10px 0">
|
|
<div class="muted small">불러오는 중...</div>
|
|
</div>
|
|
<div class="grid2">
|
|
<label>보이스 이름
|
|
<input type="text" id="tts-voice-name" placeholder="예: my-voice">
|
|
</label>
|
|
<label>참조 음성 파일
|
|
<input type="file" id="tts-voice-file" accept="audio/*">
|
|
</label>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="button" id="tts-voice-upload-btn">보이스 업로드</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<form id="tts-form">
|
|
<label>텍스트
|
|
<textarea id="tts-text" rows="5" placeholder="음성으로 변환할 텍스트를 입력하세요." required></textarea>
|
|
</label>
|
|
<div class="grid3">
|
|
<label>백엔드
|
|
<select id="tts-backend" name="backend"></select>
|
|
</label>
|
|
<label>언어
|
|
<select id="tts-language" name="language"></select>
|
|
</label>
|
|
<label>보이스
|
|
<select id="tts-voice-select" name="voice"></select>
|
|
</label>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="submit" id="tts-submit-btn">합성 실행</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>상태</h2>
|
|
<pre id="tts-status">대기 중</pre>
|
|
</section>
|
|
|
|
<section class="card" id="tts-result-section" style="display:none">
|
|
<h2>결과</h2>
|
|
<audio controls class="media-player" id="tts-result-audio"></audio>
|
|
<div class="actions" style="margin-top:10px">
|
|
<button type="button" id="tts-dl-btn">오디오 다운로드</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="tab-tts-history" class="tab-panel" style="display:none">
|
|
<section class="card">
|
|
<div class="history-toolbar">
|
|
<h2 style="margin:0">처리 내역</h2>
|
|
<button type="button" id="tts-history-refresh-btn" class="btn-secondary">새로고침</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="tts-history-list">
|
|
<div class="muted" style="padding:16px">내역을 불러오는 중...</div>
|
|
</div>
|
|
|
|
<div id="tts-history-detail" style="display:none">
|
|
<section class="card">
|
|
<div class="detail-header">
|
|
<button type="button" id="tts-history-back-btn" class="btn-secondary">← 목록으로</button>
|
|
<span id="tts-detail-title" class="detail-title"></span>
|
|
<button type="button" id="tts-detail-delete-btn" class="btn-danger">삭제</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>오디오</h2>
|
|
<audio controls class="media-player" id="tts-detail-audio"></audio>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>정보</h2>
|
|
<div id="tts-detail-meta" class="meta-grid"></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>텍스트</h2>
|
|
<textarea id="tts-detail-text" rows="8" readonly></textarea>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
<script src="/assets/js/common.js"></script>
|
|
<script src="/assets/js/asr.js"></script>
|
|
<script src="/assets/js/tts.js"></script>
|
|
</body>
|
|
</html>
|