한국어 우선 MeloTTS 웹 서비스 추가 (GPU, 속도/피치, 로그인 없음)

- 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)

frontend/index.html

@@ -0,0 +1,71 @@
+<!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>