f197177ae1
- FastAPI 백엔드: /api/voices, /api/tts, /api/health - 한국어 메인 + 영어(5종 악센트), 중국어/일본어 UI 제거 - 언어별 목소리 모델 선택, 속도(0.5~2.0x)/피치(±12반음) 조절 - 로그인/사용제한/과금 유도 없음 (무제한 테스트) - NVIDIA GPU 자동 사용 (torch cu128, Blackwell sm_120) - 유저 친화 한국어 UI (frontend) - Docker/compose (GPU 예약), 8788 포트 - MeloTTS(순수 파이썬) 벤더링 + 검증된 버전 고정(constraints)
72 lines
2.8 KiB
HTML
72 lines
2.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="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.00x</span>
|
|
</div>
|
|
<input type="range" id="speed" min="0.5" max="2.0" step="0.05" value="1.0" />
|
|
<div class="slider-scale"><span>느리게</span><span>빠르게</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>
|