Upload app.py with huggingface_hub

app.py

@@ -0,0 +1,158 @@
+import gradio as gr
+import numpy as np
+import tempfile
+import os
+from gtts import gTTS
+import librosa
+def text_to_speech(text, language="ko"):
+    """Convert text to speech using Google TTS"""
+    if not text.strip():
+        return None, None
+    with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as fp:
+        temp_filename = fp.name
+    tts = gTTS(text=text, lang=language, slow=False)
+    tts.save(temp_filename)
+    # Load the audio for visualization and playback
+    y, sr = librosa.load(temp_filename, sr=None)
+    return temp_filename, (sr, y)
+def clear_outputs():
+    return None, None
+css = """
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
+    }
+}
+.playing-audio {
+    animation: pulse 1.5s infinite;
+    border: 2px solid #FFD700 !important;
+    background-color: rgba(255, 215, 0, 0.1) !important;
+}
+/* 신세대 스타일 음성 박스 */
+.gradio-audio {
+    background: linear-gradient(135deg, #50C878, #4CBB17) !important;
+    border-radius: 15px !important;
+    padding: 15px !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
+    transition: all 0.3s ease !important;
+}
+.gradio-audio:hover {
+    transform: translateY(-5px) !important;
+    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25) !important;
+}
+/* 오디오 플레이어 스타일링 */
+audio {
+    border-radius: 30px !important;
+    background-color: rgba(255, 255, 255, 0.2) !important;
+    width: 100% !important;
+}
+/* 레이블 스타일 */
+.gradio-audio label {
+    color: white !important;
+    font-weight: bold !important;
+    font-size: 1.1em !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
+    margin-bottom: 10px !important;
+}
+/* 음성 파형 컨테이너 */
+.gradio-audio .waveform-container {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 10px !important;
+    padding: 5px !important;
+}
+/* 빨간색 버튼 스타일 */
+.red-button {
+    background-color: #FF0000 !important;
+    color: white !important;
+    border: none !important;
+    font-weight: bold !important;
+}
+.red-button:hover {
+    background-color: #CC0000 !important;
+}
+"""
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="green"), css=css) as demo:
+    gr.Markdown("# 한국어 텍스트 음성 변환 (TTS)")
+    with gr.Row():
+        with gr.Column(scale=3):
+            text_input = gr.Textbox(
+                placeholder="변환할 텍스트를 입력하세요...",
+                label="텍스트 입력",
+                lines=5
+            )
+            with gr.Row():
+                lang_selector = gr.Dropdown(
+                    choices=["ko", "en", "ja", "zh-CN", "fr", "es", "de"], 
+                    value="ko",
+                    label="언어 선택",
+                    info="ko: 한국어, en: 영어, ja: 일본어, zh-CN: 중국어, fr: 프랑스어, es: 스페인어, de: 독일어"
+                )
+                btn = gr.Button("음성 창조", elem_classes=["red-button"])
+                clear_btn = gr.Button("초기화")
+        with gr.Column(scale=3):
+            audio_output = gr.Audio(label="생성된 음성", type="filepath")
+            waveform = gr.Audio(label="파형", type="numpy", visible=True)
+    # Add JavaScript for audio playback animation
+    audio_js = """
+    function setupAudioAnimation() {
+        const audioElements = document.querySelectorAll('audio');
+        audioElements.forEach(audio => {
+            audio.addEventListener('play', () => {
+                const audioContainer = audio.closest('.gradio-audio');
+                if (audioContainer) {
+                    audioContainer.classList.add('playing-audio');
+                }
+            });
+            audio.addEventListener('pause', () => {
+                const audioContainer = audio.closest('.gradio-audio');
+                if (audioContainer) {
+                    audioContainer.classList.remove('playing-audio');
+                }
+            });
+            audio.addEventListener('ended', () => {
+                const audioContainer = audio.closest('.gradio-audio');
+                if (audioContainer) {
+                    audioContainer.classList.remove('playing-audio');
+                }
+            });
+        });
+    }
+    // Setup initial elements
+    setupAudioAnimation();
+    // Setup observer for dynamically added elements
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.addedNodes.length) {
+                setupAudioAnimation();
+            }
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    """
+    demo.load(None, js=audio_js)
+    btn.click(
+        fn=text_to_speech,
+        inputs=[text_input, lang_selector],
+        outputs=[audio_output, waveform]
+    )
+    clear_btn.click(
+        fn=clear_outputs,
+        inputs=[],
+        outputs=[audio_output, waveform]
+    )
+    gr.Markdown("""
+    ### 사용 방법
+    1. 변환하고 싶은 텍스트를 입력하세요
+    2. 언어를 선택하세요 (기본: 한국어)
+    3. '음성 창조' 버튼을 클릭하세요
+    4. 생성된 음성을 들어보세요
+    """)
+
+if __name__ == '__main__':
+    demo.launch()