56e637a300
- faster-whisper, Qwen3-ASR, gateway 각 컴포넌트별 Python venv 분리 - 기본언어 한국어(ko) - 처리내역 탭: 목록/상세/원본파일 재생/삭제 - 백엔드별 동적 모델 드랍다운 - /history, /uploads API 추가 - 기존 인스턴스(port 18100) 보존, 신규 port 18101 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
301 lines
12 KiB
HTML
301 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ASR 전사 서비스</title>
|
|
<link rel="stylesheet" href="/assets/styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<header class="page-header">
|
|
<h1>ASR 전사 서비스</h1>
|
|
<p class="muted">파일 전사 · 실시간 전사 · 처리 내역</p>
|
|
</header>
|
|
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="file">파일 전사</button>
|
|
<button class="tab-btn" data-tab="realtime">실시간 전사</button>
|
|
<button class="tab-btn" data-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" name="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>
|
|
|
|
</main>
|
|
<script src="/assets/app.js"></script>
|
|
</body>
|
|
</html>
|