Spaces:

limkang
/

vitstest

No application file

App Files Files Community

limkang commited on Oct 28

Commit

793040e

verified ·

1 Parent(s): e366bad

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +161 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MeloTTS + OpenVoice V2</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: #f4f4f9;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 600px;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 25px;
+        }
+        form div {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #555;
+        }
+        textarea, input[type="file"] {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-sizing: border-box;
+            font-size: 16px;
+        }
+        textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+        button {
+            width: 100%;
+            padding: 15px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 18px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        button:disabled {
+            background-color: #a0cfff;
+            cursor: not-allowed;
+        }
+        button:hover:not(:disabled) {
+            background-color: #0056b3;
+        }
+        #result-container {
+            margin-top: 30px;
+            text-align: center;
+        }
+        #status-message {
+            color: #666;
+            font-style: italic;
+        }
+        #audio-player {
+            width: 100%;
+            margin-top: 15px;
+            display: none; /* 처음에는 숨김 */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>음성 복제 테스트 (MeloTTS + OpenVoice)</h1>
+        <form id="tts-form">
+            <div>
+                <label for="text-input">음성으로 변환할 텍스트:</label>
+                <textarea id="text-input" name="text" required placeholder="동화 내용을 여기에 입력하세요..."></textarea>
+            </div>
+            <div>
+                <label for="audio-input">참조 목소리 파일 (WAV, MP3):</label>
+                <input type="file" id="audio-input" name="reference_audio" accept="audio/*" required>
+            </div>
+            <button type="submit" id="submit-button">음성 생성하기</button>
+        </form>
+        <div id="result-container">
+            <p id="status-message"></p>
+            <audio controls id="audio-player"></audio>
+        </div>
+    </div>
+    <script>
+        const ttsForm = document.getElementById('tts-form');
+        const submitButton = document.getElementById('submit-button');
+        const statusMessage = document.getElementById('status-message');
+        const audioPlayer = document.getElementById('audio-player');
+        ttsForm.addEventListener('submit', async (event) => {
+            event.preventDefault(); // 폼 기본 제출 동작 방지
+            // 1. UI를 '로딩 중' 상태로 변경
+            submitButton.disabled = true;
+            statusMessage.textContent = '음성 생성 중... 🚀 잠시만 기다려주세요. (서버가 처음 켜질 때는 몇 분이 걸릴 수 있습니다)';
+            audioPlayer.style.display = 'none';
+            audioPlayer.src = '';
+            // 2. 폼 데이터를 FormData 객체로 생성
+            const formData = new FormData(ttsForm);
+            try {
+                // 3. fetch를 사용해 서버에 POST 요청 전송
+                const response = await fetch('/generate-cloned-speech/', {
+                    method: 'POST',
+                    body: formData,
+                });
+                // 4. 응답 처리
+                if (response.ok) {
+                    // 성공 시: 오디오 데이터를 Blob으로 변환
+                    const audioBlob = await response.blob();
+                    const audioUrl = URL.createObjectURL(audioBlob);
+                    // 오디오 플레이어에 결과 표시
+                    audioPlayer.src = audioUrl;
+                    audioPlayer.style.display = 'block';
+                    statusMessage.textContent = '음성 생성이 완료되었습니다! 🎉';
+                } else {
+                    // 실패 시: 서버에서 온 에러 메시지 표시
+                    const errorData = await response.json();
+                    statusMessage.textContent = `오류 발생: ${errorData.detail || '알 수 없는 오류'}`;
+                }
+            } catch (error) {
+                // 네트워크 오류 등 예외 처리
+                console.error('Fetch Error:', error);
+                statusMessage.textContent = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
+            } finally {
+                // 5. 성공/실패와 관계없이 버튼 다시 활성화
+                submitButton.disabled = false;
+            }
+        });
+    </script>
+</body>
+</html>