Update app.py

app.py

@@ -2,14 +2,14 @@ import gradio as gr
 import os
 import tempfile
 import re
-from pydub import AudioSegment  # Library to combine audio files
+from pydub import AudioSegment  # Thư viện để kết hợp các file âm thanh
 from openai import OpenAI
 
-# Default API key and endpoint
+# API key và endpoint mặc định
 DEFAULT_API_KEY = "sk-GINVEtfNbrXNcGQhf3rEUIgzoicNGIApovqZxe0AYJF5PkTV"
 DEFAULT_BASE_URL = "https://open.keyai.shop"
 
-# Max character limit per API request
+# Giới hạn ký tự tối đa mỗi yêu cầu API
 MAX_CHAR_LIMIT = 140964096
 
 def clean_text(text):
@@ -62,10 +62,13 @@ def tts(text, model, voice, speed):
 
     return final_audio_path
 
-# CSS tùy chỉnh cho giao diện
+# CSS tùy chỉnh với giao diện tối và tích hợp FontAwesome cho icon
 custom_css = """
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
+
 body {
-    background-color: #f0f2f5;
+    background-color: #1e1e2f;
+    color: #e0e0e0;
     font-family: 'Arial', sans-serif;
 }
 .title {
@@ -73,22 +76,22 @@ body {
     font-weight: bold;
     text-align: center;
     margin-bottom: 30px;
-    color: #333;
+    color: #f1f1f1;
 }
 .container {
     margin: auto;
-    width: 80%;
+    width: 90%;
     padding: 20px;
 }
 .card {
-    background: white;
+    background: #2e2e42;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
     margin-bottom: 20px;
 }
 .gradio-container {
-    background: #f0f2f5;
+    background: #1e1e2f;
 }
 button {
     background-color: #4CAF50;
@@ -97,30 +100,48 @@ button {
     border-radius: 8px;
     padding: 10px 20px;
     font-size: 1rem;
+    cursor: pointer;
 }
 button:hover {
     background-color: #45a049;
 }
+input, textarea, select {
+    background: #3a3a50;
+    border: 1px solid #555;
+    color: #e0e0e0;
+    padding: 8px;
+    border-radius: 4px;
+}
+select {
+    padding: 8px 10px;
+}
+label {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("<div class='title'>OpenAI TTS</div>")
+    # Tiêu đề với icon Microphone
+    gr.Markdown("<div class='title'><i class='fas fa-microphone-alt'></i> OpenAI TTS</div>")
     
     with gr.Column(elem_classes="container"):
         with gr.Row():
-            # Cột nhập văn bản
+            # Cột nhập văn bản (mở rộng với 15 dòng)
             with gr.Column(elem_classes="card"):
-                text = gr.Textbox(label="Văn bản đầu vào", placeholder="Nhập văn bản cần chuyển giọng nói...", lines=10)
+                text = gr.Textbox(label="Văn bản đầu vào", placeholder="Nhập văn bản cần chuyển giọng nói...", lines=15)
                 char_counter = gr.Markdown("Character count: 0")
-            # Cột cài đặt tham số TTS
+            # Cột cài đặt tham số TTS với menu được cải tiến
             with gr.Column(elem_classes="card"):
-                model = gr.Dropdown(choices=['tts-1', 'tts-1-hd'], label='Model', value='tts-1')
-                voice = gr.Dropdown(choices=['alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'], label='Voice Options', value='alloy')
-                speed = gr.Slider(minimum=0.5, maximum=2.0, step=0.1, label="Speed", value=1.0)
+                model = gr.Dropdown(choices=['tts-1', 'tts-1-hd'], label='Chọn Model', value='tts-1')
+                voice = gr.Dropdown(choices=['alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'], label='Chọn Giọng', value='alloy')
+                speed = gr.Slider(minimum=0.5, maximum=2.0, step=0.1, label="Tốc độ", value=1.0)
         
+        # Nút chuyển đổi với icon Play
         with gr.Row(elem_classes="card"):
-            btn = gr.Button("Text-To-Speech")
+            btn = gr.Button("<i class='fas fa-play'></i> Chuyển Giọng")
         
+        # Kết quả âm thanh
         with gr.Row(elem_classes="card"):
             output_audio = gr.Audio(label="Kết quả âm thanh")