Update app.py

app.py

@@ -469,29 +469,208 @@ def get_speakers(language):
     return gr.Dropdown(choices=speakers, value=speakers[0], interactive=True), gr.Checkbox(visible=language == "Arabic", interactive=True)
 
 
+# Custom CSS for styling
+custom_css = """
+.gradio-container {
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.main-header {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 30px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.header-title {
+    color: white;
+    text-align: center;
+    font-size: 3em;
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.header-subtitle {
+    color: #ffd700;
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: 500;
+    margin-bottom: 15px;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+}
+
+.language-info {
+    color: white;
+    text-align: center;
+    font-size: 1.1em;
+    line-height: 1.8;
+    opacity: 0.9;
+}
+
+.input-container, .output-container {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
+    margin-bottom: 20px;
+}
+
+.section-title {
+    color: #1e3c72;
+    font-size: 1.3em;
+    font-weight: 600;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+label {
+    color: #2a5298 !important;
+    font-weight: 600 !important;
+    font-size: 1.1em !important;
+}
+
+textarea, .dropdown {
+    border: 2px solid #e0e0e0 !important;
+    border-radius: 10px !important;
+    transition: all 0.3s ease !important;
+}
+
+textarea:focus, .dropdown:focus {
+    border-color: #2a5298 !important;
+    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1) !important;
+}
+
+.gr-button-primary {
+    background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    font-size: 1.2em !important;
+    font-weight: 600 !important;
+    padding: 12px 30px !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-button-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 20px rgba(30, 60, 114, 0.4) !important;
+}
+
+.special-note {
+    background: rgba(255, 235, 59, 0.2);
+    border-left: 4px solid #ffd700;
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    margin: 20px 0;
+}
+
+.footer-info {
+    text-align: center;
+    color: white;
+    opacity: 0.8;
+    margin-top: 30px;
+    font-size: 0.9em;
+}
+"""
+
 default_language = None
 default_speaker = None
-with gr.Blocks(title="Multilingual TTS") as demo:
-    gr.HTML("<center><h1>Multilingual TTS (Edge TTS)</h1></center>")
-    gr.HTML(f"<h2 style='color:Tomato;'> {len(language_dict)} languages supported</h3>")
-    gr.HTML(f"<p> {', '.join(language_dict.keys())} </h3>")
-    gr.Markdown("**Note:** A special feature is added for Arabic language only.")
-    with gr.Row():
-        with gr.Column():
-            input_text = gr.Textbox(lines=5, label="Input Text", placeholder="Enter text to convert to speech")
-            language = gr.Dropdown(
-                choices=list(language_dict.keys()), value=default_language, label="Languages", interactive=True
-            )
-            speaker = gr.Dropdown(choices=[], value=default_speaker, label="Speakers", interactive=False)
-            tashkeel_checkbox = gr.Checkbox(label="Tashkeel", value=False, visible=False, interactive=False)
-            run_btn = gr.Button(value="Generate Audio", variant="primary")
+with gr.Blocks(title="다국어 음성 생성기(TTS)", css=custom_css) as demo:
+    with gr.Column():
+        # Header Section
+        gr.HTML("""
+        <div class="main-header">
+            <h1 class="header-title">🌍 다국어 음성 생성기 (TTS)</h1>
+            <h2 class="header-subtitle">74개 언어 지원 | Edge TTS 기반</h2>
+            <p class="language-info">
+                <strong>지원 언어:</strong><br>
+                English, Spanish, Arabic, Korean, Thai, Vietnamese, Japanese, French, Portuguese, 
+                Indonesian, Hebrew, Italian, Dutch, Malay, Norwegian, Swedish, Greek, German, 
+                Afrikaans, Amharic, Azerbaijani, Bulgarian, Bengali, Bosnian, Catalan, Czech, 
+                Welsh, Danish, Estonian, Persian, Finnish, Irish, Galician, Gujarati, Hindi, 
+                Croatian, Hungarian, Icelandic, Javanese, Georgian, Kazakh, Khmer, Kannada, 
+                Lao, Lithuanian, Latvian, Macedonian, Malayalam, Mongolian, Marathi, Maltese, 
+                Burmese, Nepali, Polish, Pashto, Romanian, Russian, Sinhala, Slovak, Slovenian, 
+                Somali, Albanian, Serbian, Sundanese, Swahili, Tamil, Telugu, Turkish, Ukrainian, 
+                Urdu, Uzbek, Mandarin, Zulu
+            </p>
+        </div>
+        """)
+        
+        # Special Note for Arabic
+        gr.HTML("""
+        <div class="special-note">
+            <strong>✨ 특별 기능:</strong> 아랍어의 경우 자동 Tashkeel (발음 부호) 추가 기능을 제공합니다.
+        </div>
+        """)
+        
+        with gr.Row():
+            # Input Section
+            with gr.Column(scale=1):
+                gr.HTML('<div class="section-title">📝 입력 설정</div>')
+                with gr.Column(elem_classes="input-container"):
+                    input_text = gr.Textbox(
+                        lines=6, 
+                        label="텍스트 입력", 
+                        placeholder="음성으로 변환할 텍스트를 입력하세요...\nEnter text to convert to speech...",
+                        elem_classes="input-textarea"
+                    )
+                    language = gr.Dropdown(
+                        choices=list(language_dict.keys()), 
+                        value=default_language, 
+                        label="언어 선택", 
+                        interactive=True
+                    )
+                    speaker = gr.Dropdown(
+                        choices=[], 
+                        value=default_speaker, 
+                        label="음성 선택", 
+                        interactive=False
+                    )
+                    tashkeel_checkbox = gr.Checkbox(
+                        label="Tashkeel 적용 (아랍어 전용)", 
+                        value=False, 
+                        visible=False, 
+                        interactive=False
+                    )
+                    run_btn = gr.Button(
+                        value="🎙️ 음성 생성", 
+                        variant="primary",
+                        size="lg"
+                    )
+
+            # Output Section
+            with gr.Column(scale=1):
+                gr.HTML('<div class="section-title">🔊 출력 결과</div>')
+                with gr.Column(elem_classes="output-container"):
+                    output_text = gr.Textbox(
+                        label="처리된 텍스트",
+                        lines=6,
+                        interactive=False
+                    )
+                    output_audio = gr.Audio(
+                        type="filepath", 
+                        label="생성된 음성",
+                        elem_classes="audio-output"
+                    )
 
-        with gr.Column():
-            output_text = gr.Textbox(label="Output Text")
-            output_audio = gr.Audio(type="filepath", label="Audio Output")
+        # Footer
+        gr.HTML("""
+        <div class="footer-info">
+            <p>💡 Tip: 각 언어별로 다양한 음성 옵션을 선택할 수 있습니다. 
+            자연스러운 억양과 발음을 위해 원어민 화자 음성을 제공합니다.</p>
+        </div>
+        """)
 
     language.change(get_speakers, inputs=[language], outputs=[speaker, tashkeel_checkbox])
     run_btn.click(text_to_speech_edge, inputs=[input_text, language, speaker, tashkeel_checkbox], outputs=[output_text, output_audio])
 
 if __name__ == "__main__":
-    demo.queue().launch(share=True)
+    demo.queue().launch(share=True)