zenn
7101fdcd65
FastAPI backend, web UI, CosyVoice3/F5-TTS setup scripts, and handoff docs for GPU PC continuation. Co-authored-by: Cursor <cursoragent@cursor.com>
65 lines
2.0 KiB
HTML
65 lines
2.0 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="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<header>
|
|
<h1>한국어 보이스 클로닝 TTS</h1>
|
|
<p class="subtitle">텍스트를 입력하면 reference 음성을 바탕으로 음성을 생성합니다.</p>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<label for="text">읽을 텍스트</label>
|
|
<textarea
|
|
id="text"
|
|
rows="5"
|
|
placeholder="안녕하세요. 오늘 날씨가 정말 좋네요."
|
|
></textarea>
|
|
|
|
<div class="row">
|
|
<div class="field">
|
|
<label for="sampleSelect">Reference 음성</label>
|
|
<select id="sampleSelect">
|
|
<option value="">기본 샘플 사용</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="refText">Reference 대본 (선택)</label>
|
|
<input
|
|
id="refText"
|
|
type="text"
|
|
placeholder="녹음한 내용과 동일한 텍스트"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="fileUpload">새 음성 업로드 (WAV)</label>
|
|
<input id="fileUpload" type="file" accept=".wav,audio/wav" />
|
|
</div>
|
|
|
|
<button id="generateBtn" type="button">음성 생성</button>
|
|
<p id="status" class="status" aria-live="polite"></p>
|
|
</section>
|
|
|
|
<section class="card" id="resultSection" hidden>
|
|
<h2>결과</h2>
|
|
<audio id="player" controls></audio>
|
|
<p>
|
|
<a id="downloadLink" href="#" download>WAV 다운로드</a>
|
|
</p>
|
|
</section>
|
|
|
|
<footer>
|
|
<span id="healthInfo">서버 확인 중…</span>
|
|
</footer>
|
|
</main>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|