Update app.py

app.py

@@ -1,22 +1,25 @@
-import streamlit as st
+import gradio as gr
+import os
 import tempfile
 import re
-from pydub import AudioSegment
+from pydub import AudioSegment  # Thư viện để kết hợp các file âm thanh
 from openai import OpenAI
 
-# Cấu hình API mặc định
+# API key và endpoint mặc định
 DEFAULT_API_KEY = "sk-GINVEtfNbrXNcGQhf3rEUIgzoicNGIApovqZxe0AYJF5PkTV"
 DEFAULT_BASE_URL = "https://open.keyai.shop"
+
+# Giới hạn ký tự tối đa mỗi yêu cầu API
 MAX_CHAR_LIMIT = 140964096
 
 def clean_text(text):
-    """Loại bỏ khoảng trắng thừa và xuống dòng trong văn bản."""
+    # Loại bỏ khoảng trắng thừa và xuống dòng
     cleaned_text = re.sub(r'\s+', ' ', text.strip())
     return cleaned_text
 
 def split_text(text, limit=MAX_CHAR_LIMIT):
-    """Chia văn bản thành các đoạn không vượt quá giới hạn ký tự."""
-    words = text.split(" ")
+    # Tách văn bản thành các đoạn không vượt quá giới hạn ký tự
+    words = text.split(' ')
     chunks = []
     current_chunk = ""
     for word in words:
@@ -30,73 +33,125 @@ def split_text(text, limit=MAX_CHAR_LIMIT):
     return chunks
 
 def tts(text, model, voice, speed):
-    """Chuyển đổi văn bản thành giọng nói bằng cách gọi API của OpenAI."""
     cleaned_text = clean_text(text)
     chunks = split_text(cleaned_text)
+    
     audio_segments = []
     
     try:
         client = OpenAI(api_key=DEFAULT_API_KEY, base_url=DEFAULT_BASE_URL + '/v1')
         for chunk in chunks:
             response = client.audio.speech.create(
-                model=model,    # Lựa chọn: "tts-1", "tts-1-hd"
-                voice=voice,    # Lựa chọn: 'alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'
+                model=model,    # Các lựa chọn: "tts-1", "tts-1-hd"
+                voice=voice,    # Các lựa chọn: 'alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'
                 input=chunk,
                 speed=speed
             )
-            # Lưu file âm thanh tạm thời
             with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as temp_file:
                 temp_file.write(response.content)
                 temp_file_path = temp_file.name
-            audio_segment = AudioSegment.from_mp3(temp_file_path)
-            audio_segments.append(audio_segment)
-    except Exception as e:
-        st.error("Đã xảy ra lỗi khi tạo giọng nói. Vui lòng thử lại sau.")
-        st.error(str(e))
-        return None
+                audio_segments.append(AudioSegment.from_mp3(temp_file_path))
+    except Exception as error:
+        raise gr.Error("Đã xảy ra lỗi khi tạo giọng nói. Vui lòng kiểm tra API key hoặc thử lại sau.")
     
-    # Nối các đoạn âm thanh lại thành 1 file duy nhất
+    # Nối các đoạn âm thanh lại thành một file duy nhất
     final_audio = sum(audio_segments)
     with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as final_temp_file:
         final_audio.export(final_temp_file.name, format="mp3")
         final_audio_path = final_temp_file.name
+
     return final_audio_path
 
-def main():
-    st.set_page_config(page_title="OpenAI TTS", layout="centered")
-    
-    # Tiêu đề với icon (sử dụng emoji để thay thế icon)
-    st.markdown("<h1 style='text-align: center;'>🎙️ OpenAI TTS</h1>", unsafe_allow_html=True)
-    
-    # Nhập văn bản
-    st.markdown("### Nhập văn bản cần chuyển giọng")
-    text = st.text_area("Văn bản đầu vào", height=250, placeholder="Nhập văn bản cần chuyển giọng nói...")
-    
-    # Hiển thị số ký tự (sau khi đã loại bỏ khoảng trắng thừa)
-    st.markdown(f"**Số ký tự:** {len(clean_text(text))}")
+# 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: #1e1e2f;
+    color: #e0e0e0;
+    font-family: 'Arial', sans-serif;
+}
+.title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 30px;
+    color: #f1f1f1;
+}
+.container {
+    margin: auto;
+    width: 90%;
+    padding: 20px;
+}
+.card {
+    background: #2e2e42;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+    margin-bottom: 20px;
+}
+.gradio-container {
+    background: #1e1e2f;
+}
+button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    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:
+    # Tiêu đề với icon Microphone
+    gr.Markdown("<div class='title'><i class='fas fa-microphone-alt'></i> OpenAI TTS</div>")
     
-    st.markdown("### Chọn cài đặt")
-    col1, col2 = st.columns(2)
-    with col1:
-        model = st.selectbox("Chọn Model", options=["tts-1", "tts-1-hd"])
-    with col2:
-        voice = st.selectbox("Chọn Giọng", options=["alloy", "echo", "fable", "onyx", "nova", "shimmer"])
+    with gr.Column(elem_classes="container"):
+        with gr.Row():
+            # 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=15)
+                char_counter = gr.Markdown("Character count: 0")
+            # 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='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("<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")
     
-    speed = st.slider("Tốc độ", min_value=0.5, max_value=2.0, value=1.0, step=0.1)
+    # Hàm cập nhật số lượng ký tự
+    def update_char_counter(text):
+        cleaned_text = clean_text(text)
+        return f"Character count: {len(cleaned_text)}"
     
-    # Nút chuyển đổi
-    if st.button("🎤 Chuyển Giọng"):
-        if not text.strip():
-            st.error("Vui lòng nhập văn bản!")
-        else:
-            st.info("Đang xử lý, vui lòng chờ...")
-            audio_file = tts(text, model, voice, speed)
-            if audio_file:
-                # Đọc file âm thanh và hiển thị player
-                with open(audio_file, "rb") as f:
-                    audio_bytes = f.read()
-                st.audio(audio_bytes, format="audio/mp3")
-                st.success("Chuyển giọng hoàn tất!")
-    
-if __name__ == "__main__":
-    main()
+    text.change(fn=update_char_counter, inputs=text, outputs=char_counter)
+    text.submit(fn=tts, inputs=[text, model, voice, speed], outputs=output_audio, api_name="tts_enter_key", concurrency_limit=None)
+    btn.click(fn=tts, inputs=[text, model, voice, speed], outputs=output_audio, api_name="tts_button", concurrency_limit=None)
+
+demo.launch()