c0fbc4d881
- word_gap 범위 -0.2~0.5, sentence_gap 범위 -0.5~1.5 로 확장(음수=더 붙임) - 음수 간격은 이전 조각 끝 + 다음 조각 시작의 무음을 |gap| 초까지 잘라 붙이는 _trim_end/start_silence + _append_unit 로 처리 - API Field 범위/설명, 프론트 슬라이더 min/스케일 라벨 갱신
94 lines
3.8 KiB
HTML
94 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>한국어 TTS 스튜디오</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="hero">
|
|
<div class="badge">무료 · 무제한 · GPU 가속</div>
|
|
<h1>한국어 TTS 스튜디오</h1>
|
|
<p class="subtitle">텍스트를 자연스러운 음성으로. 로그인 없이 마음껏 사용하세요.</p>
|
|
<div class="device-chip" id="deviceChip">엔진 확인 중…</div>
|
|
</header>
|
|
|
|
<main class="card">
|
|
<label class="field-label" for="text">읽을 내용</label>
|
|
<textarea id="text" rows="5" placeholder="예) 안녕하세요, 오늘도 좋은 하루 보내세요!">안녕하세요, 오늘 하루도 힘내세요! 이 목소리는 GPU로 생성되었습니다.</textarea>
|
|
<div class="text-meta"><span id="charCount">0</span>자</div>
|
|
|
|
<div class="control control-full">
|
|
<label class="field-label" for="engine">TTS 엔진</label>
|
|
<select id="engine"></select>
|
|
<div class="engine-info" id="engineInfo"></div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<div class="control">
|
|
<label class="field-label" for="language">언어</label>
|
|
<select id="language"></select>
|
|
</div>
|
|
<div class="control">
|
|
<label class="field-label" for="speaker">목소리 모델</label>
|
|
<select id="speaker"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sliders">
|
|
<div class="slider-row">
|
|
<div class="slider-head">
|
|
<span>글자 속도</span>
|
|
<span class="slider-val" id="speedVal">1.25x</span>
|
|
</div>
|
|
<input type="range" id="speed" min="0.5" max="2.0" step="0.05" value="1.25" />
|
|
<div class="slider-scale"><span>0.5x 느리게</span><span>2.0x 빠르게</span></div>
|
|
</div>
|
|
<div class="slider-row">
|
|
<div class="slider-head">
|
|
<span>단어 간격</span>
|
|
<span class="slider-val" id="wordGapVal">250 ms</span>
|
|
</div>
|
|
<input type="range" id="wordGap" min="-0.2" max="0.5" step="0.01" value="0.25" />
|
|
<div class="slider-scale"><span>-200 ms 더 붙여</span><span>500 ms 띄어서</span></div>
|
|
</div>
|
|
<div class="slider-row">
|
|
<div class="slider-head">
|
|
<span>문장 간격</span>
|
|
<span class="slider-val" id="sentGapVal">0.75 s</span>
|
|
</div>
|
|
<input type="range" id="sentGap" min="-0.5" max="1.5" step="0.05" value="0.75" />
|
|
<div class="slider-scale"><span>-0.5 s 더 붙여</span><span>1.5 s 길게</span></div>
|
|
</div>
|
|
<div class="slider-row">
|
|
<div class="slider-head">
|
|
<span>피치</span>
|
|
<span class="slider-val" id="pitchVal">0 반음</span>
|
|
</div>
|
|
<input type="range" id="pitch" min="-12" max="12" step="1" value="0" />
|
|
<div class="slider-scale"><span>낮게</span><span>높게</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="generate" class="btn-primary">
|
|
<span class="btn-text">음성 생성</span>
|
|
<span class="spinner" hidden></span>
|
|
</button>
|
|
|
|
<div class="result" id="result" hidden>
|
|
<audio id="audio" controls></audio>
|
|
<a id="download" class="btn-secondary" download="tts.wav">다운로드</a>
|
|
</div>
|
|
<div class="error" id="error" hidden></div>
|
|
</main>
|
|
|
|
<footer class="foot">MeloTTS 기반 · 한국어/영어 지원</footer>
|
|
</div>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|