한국어 우선 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/app.js

@@ -0,0 +1,144 @@
+const $ = (id) => document.getElementById(id);
+
+const els = {
+  text: $("text"),
+  charCount: $("charCount"),
+  language: $("language"),
+  speaker: $("speaker"),
+  speed: $("speed"),
+  speedVal: $("speedVal"),
+  pitch: $("pitch"),
+  pitchVal: $("pitchVal"),
+  generate: $("generate"),
+  btnText: document.querySelector(".btn-text"),
+  spinner: document.querySelector(".spinner"),
+  result: $("result"),
+  audio: $("audio"),
+  download: $("download"),
+  error: $("error"),
+  deviceChip: $("deviceChip"),
+};
+
+let voices = [];
+let lastUrl = null;
+
+function updateCharCount() {
+  els.charCount.textContent = els.text.value.length;
+}
+
+function populateSpeakers() {
+  const code = els.language.value;
+  const lang = voices.find((v) => v.code === code);
+  els.speaker.innerHTML = "";
+  if (!lang) return;
+  lang.speakers.forEach((s) => {
+    const opt = document.createElement("option");
+    opt.value = s.id;
+    opt.textContent = s.label;
+    els.speaker.appendChild(opt);
+  });
+}
+
+async function loadVoices() {
+  try {
+    const res = await fetch("/api/voices");
+    const data = await res.json();
+    voices = data.languages || [];
+    els.language.innerHTML = "";
+    voices.forEach((v) => {
+      const opt = document.createElement("option");
+      opt.value = v.code;
+      opt.textContent = v.label;
+      els.language.appendChild(opt);
+    });
+    populateSpeakers();
+  } catch (e) {
+    showError("목소리 목록을 불러오지 못했습니다.");
+  }
+}
+
+async function loadHealth() {
+  try {
+    const res = await fetch("/api/health");
+    const d = await res.json();
+    if (d.cuda) {
+      els.deviceChip.textContent = `GPU 가속: ${d.gpu}`;
+      els.deviceChip.classList.add("gpu");
+    } else {
+      els.deviceChip.textContent = "CPU 모드로 동작 중";
+    }
+  } catch (e) {
+    els.deviceChip.textContent = "";
+  }
+}
+
+function showError(msg) {
+  els.error.textContent = msg;
+  els.error.hidden = false;
+}
+function clearError() {
+  els.error.hidden = true;
+}
+
+function setLoading(on) {
+  els.generate.disabled = on;
+  els.spinner.hidden = !on;
+  els.btnText.textContent = on ? "생성 중…" : "음성 생성";
+}
+
+async function generate() {
+  clearError();
+  const text = els.text.value.trim();
+  if (!text) {
+    showError("읽을 내용을 입력해 주세요.");
+    return;
+  }
+  setLoading(true);
+  try {
+    const res = await fetch("/api/tts", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        text,
+        language: els.language.value,
+        speaker: els.speaker.value,
+        speed: parseFloat(els.speed.value),
+        pitch: parseFloat(els.pitch.value),
+      }),
+    });
+    if (!res.ok) {
+      let detail = "음성 생성에 실패했습니다.";
+      try {
+        const err = await res.json();
+        if (err.detail) detail = err.detail;
+      } catch (_) {}
+      throw new Error(detail);
+    }
+    const blob = await res.blob();
+    if (lastUrl) URL.revokeObjectURL(lastUrl);
+    lastUrl = URL.createObjectURL(blob);
+    els.audio.src = lastUrl;
+    els.download.href = lastUrl;
+    els.result.hidden = false;
+    els.audio.play().catch(() => {});
+  } catch (e) {
+    showError(e.message || "오류가 발생했습니다.");
+  } finally {
+    setLoading(false);
+  }
+}
+
+els.text.addEventListener("input", updateCharCount);
+els.language.addEventListener("change", populateSpeakers);
+els.speed.addEventListener("input", () => {
+  els.speedVal.textContent = parseFloat(els.speed.value).toFixed(2) + "x";
+});
+els.pitch.addEventListener("input", () => {
+  const v = parseInt(els.pitch.value, 10);
+  els.pitchVal.textContent = (v > 0 ? "+" + v : v) + " 반음";
+});
+els.generate.addEventListener("click", generate);
+
+updateCharCount();
+loadVoices();
+loadHealth();

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>

frontend/style.css

@@ -0,0 +1,201 @@
+:root {
+  --bg: #0f1226;
+  --bg2: #161a3a;
+  --card: #1c2145;
+  --card2: #232a58;
+  --accent: #6c7bff;
+  --accent2: #9a6cff;
+  --text: #eef0ff;
+  --muted: #9aa0c8;
+  --ok: #35d0a5;
+  --err: #ff6b7d;
+  --radius: 16px;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: "Noto Sans KR", system-ui, sans-serif;
+  color: var(--text);
+  background: radial-gradient(1200px 600px at 20% -10%, #2a2f66 0%, transparent 60%),
+              radial-gradient(1000px 500px at 100% 0%, #3a2566 0%, transparent 55%),
+              var(--bg);
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 40px 20px 60px;
+}
+
+.hero { text-align: center; margin-bottom: 28px; }
+
+.badge {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: .2px;
+  margin-bottom: 16px;
+}
+
+.hero h1 {
+  font-size: 34px;
+  margin: 0 0 8px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+.subtitle { color: var(--muted); margin: 0 0 14px; font-size: 15px; }
+
+.device-chip {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--muted);
+  background: rgba(255,255,255,.05);
+  border: 1px solid rgba(255,255,255,.08);
+  padding: 5px 12px;
+  border-radius: 999px;
+}
+.device-chip.gpu { color: var(--ok); border-color: rgba(53,208,165,.4); }
+
+.card {
+  background: linear-gradient(180deg, var(--card), var(--bg2));
+  border: 1px solid rgba(255,255,255,.07);
+  border-radius: var(--radius);
+  padding: 24px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.35);
+}
+
+.field-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+
+textarea {
+  width: 100%;
+  background: var(--card2);
+  border: 1px solid rgba(255,255,255,.09);
+  border-radius: 12px;
+  color: var(--text);
+  padding: 14px;
+  font-size: 16px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  transition: border-color .15s;
+}
+textarea:focus { border-color: var(--accent); }
+
+.text-meta { text-align: right; color: var(--muted); font-size: 12px; margin: 6px 2px 0; }
+
+.controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-top: 18px;
+}
+@media (max-width: 520px) { .controls { grid-template-columns: 1fr; } }
+
+select {
+  width: 100%;
+  background: var(--card2);
+  border: 1px solid rgba(255,255,255,.09);
+  border-radius: 12px;
+  color: var(--text);
+  padding: 12px 14px;
+  font-size: 15px;
+  font-family: inherit;
+  outline: none;
+  cursor: pointer;
+}
+select:focus { border-color: var(--accent); }
+
+.sliders { margin-top: 20px; display: grid; gap: 18px; }
+.slider-head {
+  display: flex; justify-content: space-between; align-items: center;
+  font-size: 14px; margin-bottom: 8px;
+}
+.slider-val {
+  font-weight: 700;
+  color: var(--accent);
+  background: rgba(108,123,255,.12);
+  padding: 3px 10px; border-radius: 8px; font-size: 13px;
+}
+input[type="range"] {
+  width: 100%;
+  -webkit-appearance: none; appearance: none;
+  height: 6px; border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  outline: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 20px; height: 20px; border-radius: 50%;
+  background: #fff; border: 3px solid var(--accent);
+  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 20px; height: 20px; border-radius: 50%;
+  background: #fff; border: 3px solid var(--accent); cursor: pointer;
+}
+.slider-scale {
+  display: flex; justify-content: space-between;
+  color: var(--muted); font-size: 11px; margin-top: 6px;
+}
+
+.btn-primary {
+  width: 100%; margin-top: 24px;
+  padding: 16px;
+  border: none; border-radius: 12px;
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  color: #fff; font-size: 17px; font-weight: 700; font-family: inherit;
+  cursor: pointer; transition: transform .08s, opacity .15s;
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+}
+.btn-primary:hover { opacity: .93; }
+.btn-primary:active { transform: scale(.99); }
+.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
+
+.spinner {
+  width: 18px; height: 18px;
+  border: 3px solid rgba(255,255,255,.35);
+  border-top-color: #fff; border-radius: 50%;
+  animation: spin .7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.result {
+  margin-top: 22px;
+  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
+}
+audio { width: 100%; }
+
+.btn-secondary {
+  text-align: center;
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--card2);
+  border: 1px solid rgba(255,255,255,.12);
+  color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px;
+}
+.btn-secondary:hover { border-color: var(--accent); }
+
+.error {
+  margin-top: 18px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(255,107,125,.12);
+  border: 1px solid rgba(255,107,125,.4);
+  color: var(--err); font-size: 14px;
+}
+
+.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 26px; }