dde57aafda
- 글자 속도 기본 1.4→1.25(범위 0.5~2.0의 중앙) - 단어 간격 기본 0→0.25s(범위 0~0.5s의 중앙) - 문장 간격 기본 0.3→0.75s(범위 0~1.5s의 중앙) - 슬라이더 스케일 라벨에 최소/최대 수치 표기
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" max="0.5" step="0.01" value="0.25" />
|
|
<div class="slider-scale"><span>0 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" max="1.5" step="0.05" value="0.75" />
|
|
<div class="slider-scale"><span>0 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>
|