Upload folder using huggingface_hub

.gitattributes

@@ -1,35 +1,7 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+mahiru/mahiru.index filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,3 @@
+output_audio
+*.pyc
+audio

Dockerfile

@@ -0,0 +1,28 @@
+FROM python:3.9-slim
+
+# Cài đặt ffmpeg cho các thư viện xử lý âm thanh (ví dụ: pydub)
+RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+
+# Tạo user không phải root (Yêu cầu bắt buộc của Hugging Face Spaces)
+RUN useradd -m -u 1000 user
+
+# Thiết lập thư mục làm việc
+WORKDIR /app
+
+# Copy và cài đặt thư viện
+COPY --chown=user:user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy toàn bộ mã nguồn vào container
+COPY --chown=user:user . .
+
+# Đổi sang user vừa tạo
+USER user
+
+# Thiết lập biến môi trường PORT thành 7860 (Port mặc định của Hugging Face)
+ENV PORT=7860
+
+EXPOSE 7860
+
+# Khởi chạy ứng dụng
+CMD ["python", "app.py"]

README.md

@@ -1,11 +1,98 @@
----
-title: Tts App
-emoji: 🏢
-colorFrom: red
-colorTo: green
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Flask Text-to-Speech (TTS) Web App with Piper
+
+Một ứng dụng web đơn giản, chạy trên máy tính cá nhân (local) để chuyển đổi văn bản thành giọng nói chất lượng cao bằng Python, Flask và công cụ mã nguồn mở Piper TTS.
+
+<p align="center">
+  <img src="img/Capture.PNG" alt="Banner"/>
+</p>
+
+## ✨ Giới thiệu
+
+Dự án này được tạo ra nhằm cung cấp một giải pháp Text-to-Speech miễn phí, không giới hạn và hoàn toàn offline (sau khi đã tải model giọng đọc). Thay vì phụ thuộc vào các dịch vụ API đám mây có giới hạn sử dụng, ứng dụng này cho phép người dùng tạo ra các file audio mẫu một cách nhanh chóng ngay trên máy của mình, phục vụ cho các mục đích học tập hoặc tạo nội dung.
+
+## 🚀 Các tính năng chính
+
+-   **Giao diện Web đơn giản:** Cung cấp một trang web trực quan để nhập văn bản và chọn giọng đọc.
+-   **Giọng đọc chất lượng cao:** Sử dụng **Piper TTS** cho ra giọng nói tự nhiên và rõ ràng.
+-   **Hỗ trợ đa giọng đọc:** Dễ dàng cấu hình để thêm nhiều giọng đọc khác nhau. Phiên bản hiện tại hỗ trợ:
+    -   Tiếng Anh (Mỹ) - Nam & Nữ
+    -   Tiếng Anh (Anh) - Nam
+
+-   **Tự động tải Model:** Script sẽ tự động kiểm tra và tải về các "model giọng đọc" cần thiết từ Hugging Face trong lần chạy đầu tiên.
+-   **Tạo Audio nhanh chóng:** Nhận văn bản từ người dùng, xử lý ở backend và trả về file audio để nghe trực tiếp trên trình duyệt.
+
+## 🛠️ Công nghệ sử dụng
+
+-   **Backend:** Python 3, Flask
+-   **TTS Engine:** Piper TTS
+-   **Frontend:** HTML5, CSS3, JavaScript (Vanilla)
+-   **Thư viện Python:** `requests` (để tải model)
+
+---
+
+## ⚙️ Hướng dẫn Cài đặt & Chạy dự án
+
+### Yêu cầu
+-   [Python 3.8+](https://www.python.org/downloads/) đã được cài đặt.
+    -   *Lưu ý quan trọng: Trong quá trình cài đặt Python, hãy chắc chắn rằng bạn đã tick vào ô **"Add Python to PATH"**.*
+
+### Các bước cài đặt
+
+1.  **Clone repository này về máy:**
+    ```bash
+    git clone https://github.com/TranHuuDat2004/tts-flask-app.git
+    cd tts-flask-app
+    ```
+
+2.  **(Khuyến khích) Tạo và kích hoạt môi trường ảo:**
+    ```bash
+    # Tạo môi trường ảo
+    python -m venv venv
+
+    # Kích hoạt trên Windows
+    .\venv\Scripts\activate
+
+    # Kích hoạt trên macOS/Linux
+    source venv/bin/activate
+    ```
+
+3.  **Cài đặt các thư viện cần thiết:**
+    ```bash
+    pip install Flask piper-tts requests
+    ```
+
+4.  **Chạy ứng dụng:**
+    ```bash
+    python app.py
+    ```
+
+### Hướng dẫn sử dụng
+
+1.  Sau khi chạy lệnh `python app.py`, server sẽ khởi động. Mở trình duyệt và truy cập vào địa chỉ: [http://127.0.0.1:5000](http://127.0.0.1:5000)
+
+2.  **Chờ tải model:** Trong lần chạy đầu tiên, server sẽ mất vài phút để tự động tải về các model giọng đọc cần thiết. Hãy theo dõi tiến trình trong cửa sổ dòng lệnh (CMD/Terminal).
+
+3.  **Sử dụng giao diện:**
+    -   Chọn giọng đọc bạn muốn từ menu dropdown.
+    -   Nhập hoặc dán đoạn văn bản vào ô `textarea`.
+    -   Nhấn nút **"Generate Audio"**.
+    -   Chờ một vài giây và trình phát audio sẽ xuất hiện để bạn nghe kết quả.
+
+---
+
+## 📁 Cấu trúc thư mục
+
+```
+tts-flask-app/
+├── app.py              # File server Flask chính
+├── piper_voices/       # (Tự động tạo) Chứa các model giọng đọc
+├── output_audio/       # (Tự động tạo) Chứa các file audio đã tạo
+├── static/
+│   └── style.css       # File CSS trang trí
+└── templates/
+    └── index.html      # Giao diện người dùng
+```
+
+## 📝 Tác giả
+
+Dự án được phát triển bởi **Trần Hữu Đạt**.

app.py

@@ -0,0 +1,81 @@
+from flask import Flask, request, jsonify, send_from_directory, render_template
+import edge_tts
+import asyncio
+import os
+import uuid
+
+app = Flask(__name__)
+
+# Config
+AUDIO_DIR = os.path.join(os.path.dirname(__file__), 'audio')
+
+if not os.path.exists(AUDIO_DIR):
+    os.makedirs(AUDIO_DIR)
+
+# Dictionaries of available free voices
+VOICES = {
+    # Vietnamese
+    'nam_minh_northern_male': 'vi-VN-NamMinhNeural',
+    'hoai_my_southern_female': 'vi-VN-HoaiMyNeural',
+    # English
+    'jenny_us_female': 'en-US-JennyNeural',
+    'guy_us_male': 'en-US-GuyNeural',
+    # Japanese
+    'nanami_jp_female': 'ja-JP-NanamiNeural',
+    'keita_jp_male': 'ja-JP-KeitaNeural'
+}
+
+@app.route('/')
+def index_vi():
+    return render_template('index.html')
+
+@app.route('/en')
+def index_en():
+    return render_template('en.html')
+
+@app.route('/jp')
+def index_jp():
+    return render_template('jp.html')
+
+@app.route('/api/synthesize', methods=['POST'])
+def synthesize():
+    data = request.json
+    if not data or 'text' not in data or 'voice' not in data:
+        return jsonify({"error": "Missing text or voice in request"}), 400
+    
+    text = data['text']
+    voice_key = data['voice']
+    
+    # Check if voice_key exists
+    if voice_key not in VOICES:
+        return jsonify({"error": "Invalid voice selected"}), 400
+
+    voice_id = VOICES[voice_key]
+    
+    # Generate a unique filename
+    filename = f"{uuid.uuid4()}.mp3"
+    filepath = os.path.join(AUDIO_DIR, filename)
+    
+    # We use asyncio to run the edge-tts generation
+    async def _generate_audio():
+        communicate = edge_tts.Communicate(text, voice_id)
+        await communicate.save(filepath)
+    
+    try:
+        # Generate base TTS
+        asyncio.run(_generate_audio())
+            
+        return jsonify({
+            "success": True, 
+            "audio_url": f"/audio/{filename}"
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/audio/<filename>')
+def serve_audio(filename):
+    return send_from_directory(AUDIO_DIR, filename)
+
+if __name__ == '__main__':
+    port = int(os.environ.get("PORT", 5000))
+    app.run(host='0.0.0.0', port=port)

draft.py

@@ -0,0 +1,92 @@
+from flask import Flask, request, jsonify, send_from_directory, render_template
+import edge_tts
+import asyncio
+import os
+import uuid
+from rvc_service import convert_voice, init_rvc
+
+app = Flask(__name__)
+
+# Initialize RVC locally if possible
+try:
+    init_rvc()
+except Exception as e:
+    print(f"RVC intialization failed: {e}")
+
+# Directory to store generated audio files
+AUDIO_DIR = os.path.join(os.path.dirname(__file__), 'audio')
+if not os.path.exists(AUDIO_DIR):
+    os.makedirs(AUDIO_DIR)
+
+# Dictionary of available free voices
+VOICES = {
+    # Vietnamese
+    'nam_minh_northern_male': 'vi-VN-NamMinhNeural',
+    'hoai_my_southern_female': 'vi-VN-HoaiMyNeural',
+    # English
+    'jenny_us_female': 'en-US-JennyNeural',
+    'guy_us_male': 'en-US-GuyNeural'
+}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/en')
+def english_index():
+    return render_template('en.html')
+
+@app.route('/api/synthesize', methods=['POST'])
+def synthesize():
+    data = request.json
+    if not data or 'text' not in data or 'voice' not in data:
+        return jsonify({"error": "Missing text or voice in request"}), 400
+    
+    text = data['text']
+    voice_key = data['voice']
+    anime_voice = data.get('anime_voice', 'none') # Can be 'none' or 'mahiru'
+
+    if voice_key not in VOICES:
+         return jsonify({"error": "Invalid base voice selected"}), 400
+    
+    voice_id = VOICES[voice_key]
+    
+    # Generate a unique filename
+    base_filename = f"{uuid.uuid4()}_base.mp3"
+    final_filename = f"{uuid.uuid4()}_final.mp3"
+    
+    base_filepath = os.path.join(AUDIO_DIR, base_filename)
+    final_filepath = os.path.join(AUDIO_DIR, final_filename)
+    
+    # We use asyncio to run the edge-tts generation
+    async def _generate_audio():
+        communicate = edge_tts.Communicate(text, voice_id)
+        await communicate.save(base_filepath)
+    
+    try:
+        # Step 1: Generate Base TTS Audio
+        asyncio.run(_generate_audio())
+        
+        # Step 2: Apply RVC if requested
+        if anime_voice == 'mahiru':
+            convert_voice(base_filepath, final_filepath)
+            # We serve the final (cloned) file
+            serve_filename = final_filename
+            # Cleanup base if you want, but leaving it is fine for debugging.
+        else:
+            # If no anime voice, serve the base TTS directly
+            serve_filename = base_filename
+
+        return jsonify({
+            "success": True, 
+            "audio_url": f"/audio/{serve_filename}"
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/audio/<filename>')
+def serve_audio(filename):
+    return send_from_directory(AUDIO_DIR, filename)
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

mahiru/MahiruShiina.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9d2fd429a500e929c9ce923f7a28b9794056ad36d72e88f6ccaa5b078982a31c
+size 57589524

mahiru/mahiru.index

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c99e311924d4ecad7478584a244c6f19d23247c2fecac670a2cd5043d3d075a
+size 3264939

piper_voices/en_GB-alan-medium.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a309668932205e762801f1efc2736cd4b0120329622adf62be09e56339d3330
+size 63201294

piper_voices/en_GB-alan-medium.onnx.json

@@ -0,0 +1,493 @@
+{
+  "audio": {
+    "sample_rate": 22050,
+    "quality": "medium"
+  },
+  "espeak": {
+    "voice": "en-gb-x-rp"
+  },
+  "inference": {
+    "noise_scale": 0.667,
+    "length_scale": 1,
+    "noise_w": 0.8
+  },
+  "phoneme_type": "espeak",
+  "phoneme_map": {},
+  "phoneme_id_map": {
+    "_": [
+      0
+    ],
+    "^": [
+      1
+    ],
+    "$": [
+      2
+    ],
+    " ": [
+      3
+    ],
+    "!": [
+      4
+    ],
+    "'": [
+      5
+    ],
+    "(": [
+      6
+    ],
+    ")": [
+      7
+    ],
+    ",": [
+      8
+    ],
+    "-": [
+      9
+    ],
+    ".": [
+      10
+    ],
+    ":": [
+      11
+    ],
+    ";": [
+      12
+    ],
+    "?": [
+      13
+    ],
+    "a": [
+      14
+    ],
+    "b": [
+      15
+    ],
+    "c": [
+      16
+    ],
+    "d": [
+      17
+    ],
+    "e": [
+      18
+    ],
+    "f": [
+      19
+    ],
+    "h": [
+      20
+    ],
+    "i": [
+      21
+    ],
+    "j": [
+      22
+    ],
+    "k": [
+      23
+    ],
+    "l": [
+      24
+    ],
+    "m": [
+      25
+    ],
+    "n": [
+      26
+    ],
+    "o": [
+      27
+    ],
+    "p": [
+      28
+    ],
+    "q": [
+      29
+    ],
+    "r": [
+      30
+    ],
+    "s": [
+      31
+    ],
+    "t": [
+      32
+    ],
+    "u": [
+      33
+    ],
+    "v": [
+      34
+    ],
+    "w": [
+      35
+    ],
+    "x": [
+      36
+    ],
+    "y": [
+      37
+    ],
+    "z": [
+      38
+    ],
+    "æ": [
+      39
+    ],
+    "ç": [
+      40
+    ],
+    "ð": [
+      41
+    ],
+    "ø": [
+      42
+    ],
+    "ħ": [
+      43
+    ],
+    "ŋ": [
+      44
+    ],
+    "œ": [
+      45
+    ],
+    "ǀ": [
+      46
+    ],
+    "ǁ": [
+      47
+    ],
+    "ǂ": [
+      48
+    ],
+    "ǃ": [
+      49
+    ],
+    "ɐ": [
+      50
+    ],
+    "ɑ": [
+      51
+    ],
+    "ɒ": [
+      52
+    ],
+    "ɓ": [
+      53
+    ],
+    "ɔ": [
+      54
+    ],
+    "ɕ": [
+      55
+    ],
+    "ɖ": [
+      56
+    ],
+    "ɗ": [
+      57
+    ],
+    "ɘ": [
+      58
+    ],
+    "ə": [
+      59
+    ],
+    "ɚ": [
+      60
+    ],
+    "ɛ": [
+      61
+    ],
+    "ɜ": [
+      62
+    ],
+    "ɞ": [
+      63
+    ],
+    "ɟ": [
+      64
+    ],
+    "ɠ": [
+      65
+    ],
+    "ɡ": [
+      66
+    ],
+    "ɢ": [
+      67
+    ],
+    "ɣ": [
+      68
+    ],
+    "ɤ": [
+      69
+    ],
+    "ɥ": [
+      70
+    ],
+    "ɦ": [
+      71
+    ],
+    "ɧ": [
+      72
+    ],
+    "ɨ": [
+      73
+    ],
+    "ɪ": [
+      74
+    ],
+    "ɫ": [
+      75
+    ],
+    "ɬ": [
+      76
+    ],
+    "ɭ": [
+      77
+    ],
+    "ɮ": [
+      78
+    ],
+    "ɯ": [
+      79
+    ],
+    "ɰ": [
+      80
+    ],
+    "ɱ": [
+      81
+    ],
+    "ɲ": [
+      82
+    ],
+    "ɳ": [
+      83
+    ],
+    "ɴ": [
+      84
+    ],
+    "ɵ": [
+      85
+    ],
+    "ɶ": [
+      86
+    ],
+    "ɸ": [
+      87
+    ],
+    "ɹ": [
+      88
+    ],
+    "ɺ": [
+      89
+    ],
+    "ɻ": [
+      90
+    ],
+    "ɽ": [
+      91
+    ],
+    "ɾ": [
+      92
+    ],
+    "ʀ": [
+      93
+    ],
+    "ʁ": [
+      94
+    ],
+    "ʂ": [
+      95
+    ],
+    "ʃ": [
+      96
+    ],
+    "ʄ": [
+      97
+    ],
+    "ʈ": [
+      98
+    ],
+    "ʉ": [
+      99
+    ],
+    "ʊ": [
+      100
+    ],
+    "ʋ": [
+      101
+    ],
+    "ʌ": [
+      102
+    ],
+    "ʍ": [
+      103
+    ],
+    "ʎ": [
+      104
+    ],
+    "ʏ": [
+      105
+    ],
+    "ʐ": [
+      106
+    ],
+    "ʑ": [
+      107
+    ],
+    "ʒ": [
+      108
+    ],
+    "ʔ": [
+      109
+    ],
+    "ʕ": [
+      110
+    ],
+    "ʘ": [
+      111
+    ],
+    "ʙ": [
+      112
+    ],
+    "ʛ": [
+      113
+    ],
+    "ʜ": [
+      114
+    ],
+    "ʝ": [
+      115
+    ],
+    "ʟ": [
+      116
+    ],
+    "ʡ": [
+      117
+    ],
+    "ʢ": [
+      118
+    ],
+    "ʲ": [
+      119
+    ],
+    "ˈ": [
+      120
+    ],
+    "ˌ": [
+      121
+    ],
+    "ː": [
+      122
+    ],
+    "ˑ": [
+      123
+    ],
+    "˞": [
+      124
+    ],
+    "β": [
+      125
+    ],
+    "θ": [
+      126
+    ],
+    "χ": [
+      127
+    ],
+    "ᵻ": [
+      128
+    ],
+    "ⱱ": [
+      129
+    ],
+    "0": [
+      130
+    ],
+    "1": [
+      131
+    ],
+    "2": [
+      132
+    ],
+    "3": [
+      133
+    ],
+    "4": [
+      134
+    ],
+    "5": [
+      135
+    ],
+    "6": [
+      136
+    ],
+    "7": [
+      137
+    ],
+    "8": [
+      138
+    ],
+    "9": [
+      139
+    ],
+    "̧": [
+      140
+    ],
+    "̃": [
+      141
+    ],
+    "̪": [
+      142
+    ],
+    "̯": [
+      143
+    ],
+    "̩": [
+      144
+    ],
+    "ʰ": [
+      145
+    ],
+    "ˤ": [
+      146
+    ],
+    "ε": [
+      147
+    ],
+    "↓": [
+      148
+    ],
+    "#": [
+      149
+    ],
+    "\"": [
+      150
+    ],
+    "↑": [
+      151
+    ],
+    "̺": [
+      152
+    ],
+    "̻": [
+      153
+    ]
+  },
+  "num_symbols": 256,
+  "num_speakers": 1,
+  "speaker_id_map": {},
+  "piper_version": "1.0.0",
+  "language": {
+    "code": "en_GB",
+    "family": "en",
+    "region": "GB",
+    "name_native": "English",
+    "name_english": "English",
+    "country_english": "Great Britain"
+  },
+  "dataset": "alan"
+}

piper_voices/en_US-kathleen-low.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:87adf17f5326bc0782282147a8b9788406236245f0f9b0e68dacb651bc1de8b6
+size 63104526

piper_voices/en_US-kathleen-low.onnx.json

@@ -0,0 +1,420 @@
+{
+  "audio": {
+    "sample_rate": 16000,
+    "quality": "low"
+  },
+  "espeak": {
+    "voice": "en-us"
+  },
+  "inference": {
+    "noise_scale": 0.667,
+    "length_scale": 1,
+    "noise_w": 0.8
+  },
+  "phoneme_map": {},
+  "phoneme_id_map": {
+    "_": [
+      0
+    ],
+    "^": [
+      1
+    ],
+    "$": [
+      2
+    ],
+    " ": [
+      3
+    ],
+    "!": [
+      4
+    ],
+    "'": [
+      5
+    ],
+    "(": [
+      6
+    ],
+    ")": [
+      7
+    ],
+    ",": [
+      8
+    ],
+    "-": [
+      9
+    ],
+    ".": [
+      10
+    ],
+    ":": [
+      11
+    ],
+    ";": [
+      12
+    ],
+    "?": [
+      13
+    ],
+    "a": [
+      14
+    ],
+    "b": [
+      15
+    ],
+    "c": [
+      16
+    ],
+    "d": [
+      17
+    ],
+    "e": [
+      18
+    ],
+    "f": [
+      19
+    ],
+    "h": [
+      20
+    ],
+    "i": [
+      21
+    ],
+    "j": [
+      22
+    ],
+    "k": [
+      23
+    ],
+    "l": [
+      24
+    ],
+    "m": [
+      25
+    ],
+    "n": [
+      26
+    ],
+    "o": [
+      27
+    ],
+    "p": [
+      28
+    ],
+    "q": [
+      29
+    ],
+    "r": [
+      30
+    ],
+    "s": [
+      31
+    ],
+    "t": [
+      32
+    ],
+    "u": [
+      33
+    ],
+    "v": [
+      34
+    ],
+    "w": [
+      35
+    ],
+    "x": [
+      36
+    ],
+    "y": [
+      37
+    ],
+    "z": [
+      38
+    ],
+    "æ": [
+      39
+    ],
+    "ç": [
+      40
+    ],
+    "ð": [
+      41
+    ],
+    "ø": [
+      42
+    ],
+    "ħ": [
+      43
+    ],
+    "ŋ": [
+      44
+    ],
+    "œ": [
+      45
+    ],
+    "ǀ": [
+      46
+    ],
+    "ǁ": [
+      47
+    ],
+    "ǂ": [
+      48
+    ],
+    "ǃ": [
+      49
+    ],
+    "ɐ": [
+      50
+    ],
+    "ɑ": [
+      51
+    ],
+    "ɒ": [
+      52
+    ],
+    "ɓ": [
+      53
+    ],
+    "ɔ": [
+      54
+    ],
+    "ɕ": [
+      55
+    ],
+    "ɖ": [
+      56
+    ],
+    "ɗ": [
+      57
+    ],
+    "ɘ": [
+      58
+    ],
+    "ə": [
+      59
+    ],
+    "ɚ": [
+      60
+    ],
+    "ɛ": [
+      61
+    ],
+    "ɜ": [
+      62
+    ],
+    "ɞ": [
+      63
+    ],
+    "ɟ": [
+      64
+    ],
+    "ɠ": [
+      65
+    ],
+    "ɡ": [
+      66
+    ],
+    "ɢ": [
+      67
+    ],
+    "ɣ": [
+      68
+    ],
+    "ɤ": [
+      69
+    ],
+    "ɥ": [
+      70
+    ],
+    "ɦ": [
+      71
+    ],
+    "ɧ": [
+      72
+    ],
+    "ɨ": [
+      73
+    ],
+    "ɪ": [
+      74
+    ],
+    "ɫ": [
+      75
+    ],
+    "ɬ": [
+      76
+    ],
+    "ɭ": [
+      77
+    ],
+    "ɮ": [
+      78
+    ],
+    "ɯ": [
+      79
+    ],
+    "ɰ": [
+      80
+    ],
+    "ɱ": [
+      81
+    ],
+    "ɲ": [
+      82
+    ],
+    "ɳ": [
+      83
+    ],
+    "ɴ": [
+      84
+    ],
+    "ɵ": [
+      85
+    ],
+    "ɶ": [
+      86
+    ],
+    "ɸ": [
+      87
+    ],
+    "ɹ": [
+      88
+    ],
+    "ɺ": [
+      89
+    ],
+    "ɻ": [
+      90
+    ],
+    "ɽ": [
+      91
+    ],
+    "ɾ": [
+      92
+    ],
+    "ʀ": [
+      93
+    ],
+    "ʁ": [
+      94
+    ],
+    "ʂ": [
+      95
+    ],
+    "ʃ": [
+      96
+    ],
+    "ʄ": [
+      97
+    ],
+    "ʈ": [
+      98
+    ],
+    "ʉ": [
+      99
+    ],
+    "ʊ": [
+      100
+    ],
+    "ʋ": [
+      101
+    ],
+    "ʌ": [
+      102
+    ],
+    "ʍ": [
+      103
+    ],
+    "ʎ": [
+      104
+    ],
+    "ʏ": [
+      105
+    ],
+    "ʐ": [
+      106
+    ],
+    "ʑ": [
+      107
+    ],
+    "ʒ": [
+      108
+    ],
+    "ʔ": [
+      109
+    ],
+    "ʕ": [
+      110
+    ],
+    "ʘ": [
+      111
+    ],
+    "ʙ": [
+      112
+    ],
+    "ʛ": [
+      113
+    ],
+    "ʜ": [
+      114
+    ],
+    "ʝ": [
+      115
+    ],
+    "ʟ": [
+      116
+    ],
+    "ʡ": [
+      117
+    ],
+    "ʢ": [
+      118
+    ],
+    "ʲ": [
+      119
+    ],
+    "ˈ": [
+      120
+    ],
+    "ˌ": [
+      121
+    ],
+    "ː": [
+      122
+    ],
+    "ˑ": [
+      123
+    ],
+    "˞": [
+      124
+    ],
+    "β": [
+      125
+    ],
+    "θ": [
+      126
+    ],
+    "χ": [
+      127
+    ],
+    "ᵻ": [
+      128
+    ],
+    "ⱱ": [
+      129
+    ]
+  },
+  "num_symbols": 130,
+  "num_speakers": 1,
+  "speaker_id_map": {},
+  "piper_version": "0.2.0",
+  "language": {
+    "code": "en_US",
+    "family": "en",
+    "region": "US",
+    "name_native": "English",
+    "name_english": "English",
+    "country_english": "United States"
+  },
+  "dataset": "kathleen"
+}

piper_voices/en_US-lessac-medium.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5efe09e69902187827af646e1a6e9d269dee769f9877d17b16b1b46eeaaf019f
+size 63201294

piper_voices/en_US-lessac-medium.onnx.json

@@ -0,0 +1,493 @@
+{
+  "audio": {
+    "sample_rate": 22050,
+    "quality": "medium"
+  },
+  "espeak": {
+    "voice": "en-us"
+  },
+  "inference": {
+    "noise_scale": 0.667,
+    "length_scale": 1,
+    "noise_w": 0.8
+  },
+  "phoneme_type": "espeak",
+  "phoneme_map": {},
+  "phoneme_id_map": {
+    "_": [
+      0
+    ],
+    "^": [
+      1
+    ],
+    "$": [
+      2
+    ],
+    " ": [
+      3
+    ],
+    "!": [
+      4
+    ],
+    "'": [
+      5
+    ],
+    "(": [
+      6
+    ],
+    ")": [
+      7
+    ],
+    ",": [
+      8
+    ],
+    "-": [
+      9
+    ],
+    ".": [
+      10
+    ],
+    ":": [
+      11
+    ],
+    ";": [
+      12
+    ],
+    "?": [
+      13
+    ],
+    "a": [
+      14
+    ],
+    "b": [
+      15
+    ],
+    "c": [
+      16
+    ],
+    "d": [
+      17
+    ],
+    "e": [
+      18
+    ],
+    "f": [
+      19
+    ],
+    "h": [
+      20
+    ],
+    "i": [
+      21
+    ],
+    "j": [
+      22
+    ],
+    "k": [
+      23
+    ],
+    "l": [
+      24
+    ],
+    "m": [
+      25
+    ],
+    "n": [
+      26
+    ],
+    "o": [
+      27
+    ],
+    "p": [
+      28
+    ],
+    "q": [
+      29
+    ],
+    "r": [
+      30
+    ],
+    "s": [
+      31
+    ],
+    "t": [
+      32
+    ],
+    "u": [
+      33
+    ],
+    "v": [
+      34
+    ],
+    "w": [
+      35
+    ],
+    "x": [
+      36
+    ],
+    "y": [
+      37
+    ],
+    "z": [
+      38
+    ],
+    "æ": [
+      39
+    ],
+    "ç": [
+      40
+    ],
+    "ð": [
+      41
+    ],
+    "ø": [
+      42
+    ],
+    "ħ": [
+      43
+    ],
+    "ŋ": [
+      44
+    ],
+    "œ": [
+      45
+    ],
+    "ǀ": [
+      46
+    ],
+    "ǁ": [
+      47
+    ],
+    "ǂ": [
+      48
+    ],
+    "ǃ": [
+      49
+    ],
+    "ɐ": [
+      50
+    ],
+    "ɑ": [
+      51
+    ],
+    "ɒ": [
+      52
+    ],
+    "ɓ": [
+      53
+    ],
+    "ɔ": [
+      54
+    ],
+    "ɕ": [
+      55
+    ],
+    "ɖ": [
+      56
+    ],
+    "ɗ": [
+      57
+    ],
+    "ɘ": [
+      58
+    ],
+    "ə": [
+      59
+    ],
+    "ɚ": [
+      60
+    ],
+    "ɛ": [
+      61
+    ],
+    "ɜ": [
+      62
+    ],
+    "ɞ": [
+      63
+    ],
+    "ɟ": [
+      64
+    ],
+    "ɠ": [
+      65
+    ],
+    "ɡ": [
+      66
+    ],
+    "ɢ": [
+      67
+    ],
+    "ɣ": [
+      68
+    ],
+    "ɤ": [
+      69
+    ],
+    "ɥ": [
+      70
+    ],
+    "ɦ": [
+      71
+    ],
+    "ɧ": [
+      72
+    ],
+    "ɨ": [
+      73
+    ],
+    "ɪ": [
+      74
+    ],
+    "ɫ": [
+      75
+    ],
+    "ɬ": [
+      76
+    ],
+    "ɭ": [
+      77
+    ],
+    "ɮ": [
+      78
+    ],
+    "ɯ": [
+      79
+    ],
+    "ɰ": [
+      80
+    ],
+    "ɱ": [
+      81
+    ],
+    "ɲ": [
+      82
+    ],
+    "ɳ": [
+      83
+    ],
+    "ɴ": [
+      84
+    ],
+    "ɵ": [
+      85
+    ],
+    "ɶ": [
+      86
+    ],
+    "ɸ": [
+      87
+    ],
+    "ɹ": [
+      88
+    ],
+    "ɺ": [
+      89
+    ],
+    "ɻ": [
+      90
+    ],
+    "ɽ": [
+      91
+    ],
+    "ɾ": [
+      92
+    ],
+    "ʀ": [
+      93
+    ],
+    "ʁ": [
+      94
+    ],
+    "ʂ": [
+      95
+    ],
+    "ʃ": [
+      96
+    ],
+    "ʄ": [
+      97
+    ],
+    "ʈ": [
+      98
+    ],
+    "ʉ": [
+      99
+    ],
+    "ʊ": [
+      100
+    ],
+    "ʋ": [
+      101
+    ],
+    "ʌ": [
+      102
+    ],
+    "ʍ": [
+      103
+    ],
+    "ʎ": [
+      104
+    ],
+    "ʏ": [
+      105
+    ],
+    "ʐ": [
+      106
+    ],
+    "ʑ": [
+      107
+    ],
+    "ʒ": [
+      108
+    ],
+    "ʔ": [
+      109
+    ],
+    "ʕ": [
+      110
+    ],
+    "ʘ": [
+      111
+    ],
+    "ʙ": [
+      112
+    ],
+    "ʛ": [
+      113
+    ],
+    "ʜ": [
+      114
+    ],
+    "ʝ": [
+      115
+    ],
+    "ʟ": [
+      116
+    ],
+    "ʡ": [
+      117
+    ],
+    "ʢ": [
+      118
+    ],
+    "ʲ": [
+      119
+    ],
+    "ˈ": [
+      120
+    ],
+    "ˌ": [
+      121
+    ],
+    "ː": [
+      122
+    ],
+    "ˑ": [
+      123
+    ],
+    "˞": [
+      124
+    ],
+    "β": [
+      125
+    ],
+    "θ": [
+      126
+    ],
+    "χ": [
+      127
+    ],
+    "ᵻ": [
+      128
+    ],
+    "ⱱ": [
+      129
+    ],
+    "0": [
+      130
+    ],
+    "1": [
+      131
+    ],
+    "2": [
+      132
+    ],
+    "3": [
+      133
+    ],
+    "4": [
+      134
+    ],
+    "5": [
+      135
+    ],
+    "6": [
+      136
+    ],
+    "7": [
+      137
+    ],
+    "8": [
+      138
+    ],
+    "9": [
+      139
+    ],
+    "̧": [
+      140
+    ],
+    "̃": [
+      141
+    ],
+    "̪": [
+      142
+    ],
+    "̯": [
+      143
+    ],
+    "̩": [
+      144
+    ],
+    "ʰ": [
+      145
+    ],
+    "ˤ": [
+      146
+    ],
+    "ε": [
+      147
+    ],
+    "↓": [
+      148
+    ],
+    "#": [
+      149
+    ],
+    "\"": [
+      150
+    ],
+    "↑": [
+      151
+    ],
+    "̺": [
+      152
+    ],
+    "̻": [
+      153
+    ]
+  },
+  "num_symbols": 256,
+  "num_speakers": 1,
+  "speaker_id_map": {},
+  "piper_version": "1.0.0",
+  "language": {
+    "code": "en_US",
+    "family": "en",
+    "region": "US",
+    "name_native": "English",
+    "name_english": "English",
+    "country_english": "United States"
+  },
+  "dataset": "lessac"
+}

requirements.txt

@@ -0,0 +1,5 @@
+# requirements.txt
+Flask
+requests
+pydub
+edge-tts

static/script.js

@@ -0,0 +1,97 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const textInput = document.getElementById('text-input');
+    const charCurrent = document.getElementById('char-current');
+    const voiceSelect = document.getElementById('voice-select');
+    const generateBtn = document.getElementById('generate-btn');
+    const btnText = document.querySelector('.btn-text');
+    const btnLoader = document.querySelector('.btn-loader');
+    const errorMessage = document.getElementById('error-message');
+    const errorText = document.getElementById('error-text');
+    const audioContainer = document.getElementById('audio-container');
+    const audioPlayer = document.getElementById('audio-player');
+    const downloadBtn = document.getElementById('download-btn');
+
+    const MAX_CHARS = 1000;
+
+    // Character counter
+    textInput.addEventListener('input', () => {
+        const text = textInput.value;
+        const length = text.length;
+
+        if (length > MAX_CHARS) {
+            textInput.value = text.substring(0, MAX_CHARS);
+            charCurrent.textContent = MAX_CHARS;
+            charCurrent.style.color = 'var(--danger)';
+        } else {
+            charCurrent.textContent = length;
+            charCurrent.style.color = 'var(--text-muted)';
+        }
+    });
+
+    // Generate Button Click
+    generateBtn.addEventListener('click', async () => {
+        const text = textInput.value.trim();
+        const voice = voiceSelect.value;
+
+        if (!text) {
+            showError("Vui lòng nhập văn bản tiếng Việt.");
+            textInput.focus();
+            return;
+        }
+
+        // Hide old errors/audio
+        errorMessage.classList.add('hidden');
+        audioContainer.classList.add('hidden');
+
+        // Setup Loading State
+        btnLoader.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
+        setLoading(true);
+
+        try {
+            const response = await fetch('/api/synthesize', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ text, voice })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to generate speech.');
+            }
+
+            // Success
+            const uniqueUrl = data.audio_url + '?t=' + new Date().getTime(); // Prevent caching
+            audioPlayer.src = uniqueUrl;
+            downloadBtn.href = uniqueUrl;
+            downloadBtn.download = `Vietnamese_TTS_${Date.now()}.mp3`;
+
+            audioContainer.classList.remove('hidden');
+            audioPlayer.play().catch(e => console.log("Auto-play blocked", e));
+
+        } catch (error) {
+            showError(error.message);
+        } finally {
+            setLoading(false);
+        }
+    });
+
+    function setLoading(isLoading) {
+        if (isLoading) {
+            generateBtn.disabled = true;
+            btnText.classList.add('hidden');
+            btnLoader.classList.remove('hidden');
+        } else {
+            generateBtn.disabled = false;
+            btnText.classList.remove('hidden');
+            btnLoader.classList.add('hidden');
+        }
+    }
+
+    function showError(message) {
+        errorText.textContent = message;
+        errorMessage.classList.remove('hidden');
+    }
+});

static/script_en.js

@@ -0,0 +1,97 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const textInput = document.getElementById('text-input');
+    const charCurrent = document.getElementById('char-current');
+    const voiceSelect = document.getElementById('voice-select');
+    const generateBtn = document.getElementById('generate-btn');
+    const btnText = document.querySelector('.btn-text');
+    const btnLoader = document.querySelector('.btn-loader');
+    const errorMessage = document.getElementById('error-message');
+    const errorText = document.getElementById('error-text');
+    const audioContainer = document.getElementById('audio-container');
+    const audioPlayer = document.getElementById('audio-player');
+    const downloadBtn = document.getElementById('download-btn');
+
+    const MAX_CHARS = 1000;
+
+    // Character counter
+    textInput.addEventListener('input', () => {
+        const text = textInput.value;
+        const length = text.length;
+
+        if (length > MAX_CHARS) {
+            textInput.value = text.substring(0, MAX_CHARS);
+            charCurrent.textContent = MAX_CHARS;
+            charCurrent.style.color = 'var(--danger)';
+        } else {
+            charCurrent.textContent = length;
+            charCurrent.style.color = 'var(--text-muted)';
+        }
+    });
+
+    // Generate Button Click
+    generateBtn.addEventListener('click', async () => {
+        const text = textInput.value.trim();
+        const voice = voiceSelect.value;
+
+        if (!text) {
+            showError("Please enter some English text.");
+            textInput.focus();
+            return;
+        }
+
+        // Hide old errors/audio
+        errorMessage.classList.add('hidden');
+        audioContainer.classList.add('hidden');
+
+        // Setup Loading State
+        btnLoader.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
+        setLoading(true);
+
+        try {
+            const response = await fetch('/api/synthesize', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ text, voice })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to generate speech.');
+            }
+
+            // Success
+            const uniqueUrl = data.audio_url + '?t=' + new Date().getTime(); // Prevent caching
+            audioPlayer.src = uniqueUrl;
+            downloadBtn.href = uniqueUrl;
+            downloadBtn.download = `English_TTS_${Date.now()}.mp3`;
+
+            audioContainer.classList.remove('hidden');
+            audioPlayer.play().catch(e => console.log("Auto-play blocked", e));
+
+        } catch (error) {
+            showError(error.message);
+        } finally {
+            setLoading(false);
+        }
+    });
+
+    function setLoading(isLoading) {
+        if (isLoading) {
+            generateBtn.disabled = true;
+            btnText.classList.add('hidden');
+            btnLoader.classList.remove('hidden');
+        } else {
+            generateBtn.disabled = false;
+            btnText.classList.remove('hidden');
+            btnLoader.classList.add('hidden');
+        }
+    }
+
+    function showError(message) {
+        errorText.textContent = message;
+        errorMessage.classList.remove('hidden');
+    }
+});

static/script_jp.js

@@ -0,0 +1,97 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const textInput = document.getElementById('text-input');
+    const charCurrent = document.getElementById('char-current');
+    const voiceSelect = document.getElementById('voice-select');
+    const generateBtn = document.getElementById('generate-btn');
+    const btnText = document.querySelector('.btn-text');
+    const btnLoader = document.querySelector('.btn-loader');
+    const errorMessage = document.getElementById('error-message');
+    const errorText = document.getElementById('error-text');
+    const audioContainer = document.getElementById('audio-container');
+    const audioPlayer = document.getElementById('audio-player');
+    const downloadBtn = document.getElementById('download-btn');
+
+    const MAX_CHARS = 1000;
+
+    // Character counter
+    textInput.addEventListener('input', () => {
+        const text = textInput.value;
+        const length = text.length;
+
+        if (length > MAX_CHARS) {
+            textInput.value = text.substring(0, MAX_CHARS);
+            charCurrent.textContent = MAX_CHARS;
+            charCurrent.style.color = 'var(--danger)';
+        } else {
+            charCurrent.textContent = length;
+            charCurrent.style.color = 'var(--text-muted)';
+        }
+    });
+
+    // Generate Button Click
+    generateBtn.addEventListener('click', async () => {
+        const text = textInput.value.trim();
+        const voice = voiceSelect.value;
+
+        if (!text) {
+            showError("Please enter some Japanese text.");
+            textInput.focus();
+            return;
+        }
+
+        // Hide old errors/audio
+        errorMessage.classList.add('hidden');
+        audioContainer.classList.add('hidden');
+
+        // Setup Loading State
+        btnLoader.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Processing...';
+        setLoading(true);
+
+        try {
+            const response = await fetch('/api/synthesize', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ text, voice })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to generate speech.');
+            }
+
+            // Success
+            const uniqueUrl = data.audio_url + '?t=' + new Date().getTime(); // Prevent caching
+            audioPlayer.src = uniqueUrl;
+            downloadBtn.href = uniqueUrl;
+            downloadBtn.download = `Japanese_TTS_${Date.now()}.mp3`;
+
+            audioContainer.classList.remove('hidden');
+            audioPlayer.play().catch(e => console.log("Auto-play blocked", e));
+
+        } catch (error) {
+            showError(error.message);
+        } finally {
+            setLoading(false);
+        }
+    });
+
+    function setLoading(isLoading) {
+        if (isLoading) {
+            generateBtn.disabled = true;
+            btnText.classList.add('hidden');
+            btnLoader.classList.remove('hidden');
+        } else {
+            generateBtn.disabled = false;
+            btnText.classList.remove('hidden');
+            btnLoader.classList.add('hidden');
+        }
+    }
+
+    function showError(message) {
+        errorText.textContent = message;
+        errorMessage.classList.remove('hidden');
+    }
+});

static/style.css

@@ -0,0 +1,383 @@
+:root {
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --bg-dark: #0f172a;
+    --glass-bg: rgba(30, 41, 59, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --danger: #ef4444;
+    --success: #10b981;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Be Vietnam Pro', sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Background Effects */
+.background-effects {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.5;
+}
+
+.glow-1 {
+    top: -10%;
+    right: -5%;
+    width: 40vw;
+    height: 40vw;
+    background: radial-gradient(circle, rgba(99,102,241,0.6) 0%, rgba(99,102,241,0) 70%);
+    animation: float 15s ease-in-out infinite alternate;
+}
+
+.glow-2 {
+    bottom: -10%;
+    left: -10%;
+    width: 50vw;
+    height: 50vw;
+    background: radial-gradient(circle, rgba(236,72,153,0.5) 0%, rgba(236,72,153,0) 70%);
+    animation: float 20s ease-in-out infinite alternate-reverse;
+}
+
+.glow-3 {
+    top: 40%;
+    left: 30%;
+    width: 30vw;
+    height: 30vw;
+    background: radial-gradient(circle, rgba(16,185,129,0.3) 0%, rgba(16,185,129,0) 70%);
+    animation: pulse 10s ease-in-out infinite alternate;
+}
+
+@keyframes float {
+    0% { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(-50px, 50px) scale(1.1); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.9); opacity: 0.3; }
+    100% { transform: scale(1.2); opacity: 0.6; }
+}
+
+/* Container */
+.container {
+    width: 100%;
+    max-width: 600px;
+    padding: 2rem;
+    z-index: 1;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, #f8fafc, #94a3b8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.header h1 i {
+    font-size: 2rem;
+    color: var(--primary);
+    -webkit-text-fill-color: initial;
+}
+
+.header p {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+}
+
+/* Glass Panel */
+.glass-panel {
+    background: var(--glass-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--glass-border);
+    border-radius: 24px;
+    padding: 2.5rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.glass-panel:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
+}
+
+/* Input Groups */
+.input-group {
+    margin-bottom: 1.5rem;
+}
+
+.input-group label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 0.75rem;
+    font-size: 0.95rem;
+    color: var(--text-main);
+}
+
+/* Custom Select */
+.custom-select-wrapper {
+    position: relative;
+}
+
+.custom-select {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    color: white;
+    font-size: 1rem;
+    font-family: 'Be Vietnam Pro', sans-serif;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.custom-select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.custom-select option {
+    background-color: var(--bg-dark);
+    color: white;
+    padding: 10px;
+}
+
+.select-icon {
+    position: absolute;
+    right: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    pointer-events: none;
+    transition: transform 0.3s ease;
+}
+
+.custom-select:focus + .select-icon {
+    transform: translateY(-50%) rotate(180deg);
+    color: var(--primary);
+}
+
+/* Textarea */
+textarea {
+    width: 100%;
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    color: white;
+    font-size: 1rem;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 120px;
+    transition: all 0.3s ease;
+}
+
+textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+textarea::placeholder {
+    color: rgba(148, 163, 184, 0.5);
+}
+
+.char-count {
+    text-align: right;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-top: 0.5rem;
+}
+
+/* Buttons */
+.primary-btn {
+    width: 100%;
+    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+    color: white;
+    border: none;
+    border-radius: 12px;
+    padding: 1.25rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.75rem;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.primary-btn::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s ease;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px -10px var(--primary);
+}
+
+.primary-btn:hover::after {
+    left: 100%;
+}
+
+.primary-btn:active {
+    transform: translateY(0);
+}
+
+.primary-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.secondary-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    text-decoration: none;
+    padding: 0.75rem 1.25rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border: 1px solid var(--glass-border);
+}
+
+.secondary-btn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* Audio Panel */
+.audio-panel {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--glass-border);
+    animation: slideUp 0.4s ease forwards;
+}
+
+.audio-panel h3 {
+    font-size: 1.25rem;
+    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.audio-panel h3 i {
+    color: var(--success);
+}
+
+audio {
+    width: 100%;
+    height: 44px;
+    border-radius: 8px;
+    margin-bottom: 1.25rem;
+}
+
+audio::-webkit-media-controls-panel {
+    background-color: var(--text-main);
+}
+
+/* Alerts */
+.alert {
+    margin-top: 1.5rem;
+    padding: 1rem 1.25rem;
+    border-radius: 12px;
+    font-size: 0.95rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    animation: slideUp 0.3s ease forwards;
+}
+
+.alert.error {
+    background-color: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: #fca5a5;
+}
+
+.alert i {
+    margin-top: 0.2rem;
+}
+
+/* Utility */
+.hidden {
+    display: none !important;
+}
+
+footer {
+    text-align: center;
+    margin-top: 2.5rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+footer i {
+    color: var(--danger);
+    margin: 0 0.25rem;
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 640px) {
+    .container { padding: 1rem; }
+    .glass-panel { padding: 1.5rem; }
+    .header h1 { font-size: 2rem; }
+}

templates/en.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>English Text to Speech App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+    <div class="background-effects">
+        <div class="glow glow-1"></div>
+        <div class="glow glow-2"></div>
+        <div class="glow glow-3"></div>
+    </div>
+
+    <div class="container">
+        <!-- Add a language switcher at the top -->
+        <div style="text-align: right; margin-bottom: 1rem;">
+            <a href="/" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;">
+                🇻🇳 Switch to Vietnamese
+            </a>
+            <a href="/jp" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;">
+                🇯🇵 Switch to Japanese
+            </a>
+        </div>
+
+        <div class="header">
+            <h1><i class="fa-solid fa-volume-high"></i> English TTS</h1>
+            <p>Convert your text into natural English speech</p>
+        </div>
+
+        <div class="glass-panel">
+            <div class="input-group">
+                <label for="voice-select">English TTS Voice</label>
+                <div class="custom-select-wrapper">
+                    <select id="voice-select" class="custom-select">
+                        <option value="jenny_us_female">👩 Jenny (US, Female)</option>
+                        <option value="guy_us_male">👨 Guy (US, Male)</option>
+                    </select>
+                    <i class="fa-solid fa-chevron-down select-icon"></i>
+                </div>
+            </div>
+
+            <div class="input-group">
+                <label for="text-input">Enter Text</label>
+                <textarea id="text-input"
+                    placeholder="Type your English text here... (Example: Hello, how are you today?)"
+                    rows="6"></textarea>
+                <div class="char-count"><span id="char-current">0</span> / 1000</div>
+            </div>
+
+            <button id="generate-btn" class="primary-btn">
+                <span class="btn-text"><i class="fa-solid fa-wand-magic-sparkles"></i> Generate Speech</span>
+                <span class="btn-loader hidden"><i class="fa-solid fa-spinner fa-spin"></i> Processing...</span>
+            </button>
+
+            <div id="error-message" class="alert error hidden">
+                <i class="fa-solid fa-circle-exclamation"></i>
+                <span id="error-text">An error occurred.</span>
+            </div>
+
+            <div id="audio-container" class="audio-panel hidden">
+                <h3><i class="fa-solid fa-headphones"></i> Your Audio is Ready</h3>
+                <audio id="audio-player" controls>
+                    Your browser does not support the audio element.
+                </audio>
+                <a id="download-btn" class="secondary-btn" href="#" download>
+                    <i class="fa-solid fa-download"></i> Download MP3
+                </a>
+            </div>
+        </div>
+
+        <footer>
+            <p>Built with <i class="fa-solid fa-heart"></i> using Flask and Microsoft Edge TTS</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='script_en.js') }}"></script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vietnamese Text to Speech App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+    <div class="background-effects">
+        <div class="glow glow-1"></div>
+        <div class="glow glow-2"></div>
+        <div class="glow glow-3"></div>
+    </div>
+
+    <div class="container">
+        <!-- Add a language switcher at the top -->
+        <div style="text-align: right; margin-bottom: 1rem;">
+            <a href="/en" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;">
+                🇬🇧 Switch to English
+            </a>
+            <a href="/jp" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;">
+                🇯🇵 Switch to Japanese
+            </a>
+        </div>
+
+        <div class="header">
+            <h1><i class="fa-solid fa-volume-high"></i> Vietnamese TTS</h1>
+            <p>Convert your text into natural Vietnamese speech</p>
+        </div>
+
+        <div class="glass-panel">
+            <div class="input-group">
+                <label for="voice-select">Base TTS Voice</label>
+                <div class="custom-select-wrapper">
+                    <select id="voice-select" class="custom-select">
+                        <option value="hoai_my_southern_female">👩 Hoài My (Southern, Female)</option>
+                        <option value="nam_minh_northern_male">👨 Nam Minh (Northern, Male)</option>
+                    </select>
+                    <i class="fa-solid fa-chevron-down select-icon"></i>
+                </div>
+            </div>
+
+            <div class="glass-panel">
+
+                <div class="input-group">
+                    <label for="text-input">Enter Text</label>
+                    <textarea id="text-input"
+                        placeholder="Nhập văn bản tiếng Việt vào đây... (Ví dụ: Xin chào, bạn có khỏe không?)"
+                        rows="6"></textarea>
+                    <div class="char-count"><span id="char-current">0</span> / 1000</div>
+                </div>
+
+                <button id="generate-btn" class="primary-btn">
+                    <span class="btn-text"><i class="fa-solid fa-wand-magic-sparkles"></i> Generate Speech</span>
+                    <span class="btn-loader hidden"><i class="fa-solid fa-spinner fa-spin"></i> Processing...</span>
+                </button>
+
+                <div id="error-message" class="alert error hidden">
+                    <i class="fa-solid fa-circle-exclamation"></i>
+                    <span id="error-text">An error occurred.</span>
+                </div>
+
+                <div id="audio-container" class="audio-panel hidden">
+                    <h3><i class="fa-solid fa-headphones"></i> Your Audio is Ready</h3>
+                    <audio id="audio-player" controls>
+                        Your browser does not support the audio element.
+                    </audio>
+                    <a id="download-btn" class="secondary-btn" href="#" download>
+                        <i class="fa-solid fa-download"></i> Download MP3
+                    </a>
+                </div>
+            </div>
+
+            <footer>
+                <p>Built with <i class="fa-solid fa-heart"></i> using Flask and Microsoft Edge TTS</p>
+            </footer>
+        </div>
+
+        <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+
+</html>

templates/jp.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Japanese Text to Speech App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<body>
+    <div class="background-effects">
+        <div class="glow glow-1"></div>
+        <div class="glow glow-2"></div>
+        <div class="glow glow-3"></div>
+    </div>
+
+    <div class="container">
+        <!-- Add a language switcher at the top -->
+        <div style="text-align: right; margin-bottom: 1rem;">
+            <a href="/" class="secondary-btn"
+                style="text-decoration: none; padding: 0.5rem 1rem; margin-right: 0.5rem;">
+                🇻🇳 Switch to Vietnamese
+            </a>
+            <a href="/en" class="secondary-btn" style="text-decoration: none; padding: 0.5rem 1rem;">
+                🇺🇸 Switch to English
+            </a>
+        </div>
+
+        <div class="header">
+            <h1><i class="fa-solid fa-volume-high"></i> Japanese TTS</h1>
+            <p>Convert your text into natural Japanese speech</p>
+        </div>
+
+        <div class="glass-panel">
+            <div class="input-group">
+                <label for="voice-select">Japanese TTS Voice</label>
+                <div class="custom-select-wrapper">
+                    <select id="voice-select" class="custom-select">
+                        <option value="nanami_jp_female">👩 Nanami (Japan, Female)</option>
+                        <option value="keita_jp_male">👨 Keita (Japan, Male)</option>
+                    </select>
+                    <i class="fa-solid fa-chevron-down select-icon"></i>
+                </div>
+            </div>
+
+            <div class="input-group">
+                <label for="text-input">Enter Text</label>
+                <textarea id="text-input" placeholder="Type your Japanese text here... (Example: こんにちは、お元気ですか？)"
+                    rows="6"></textarea>
+                <div class="char-count"><span id="char-current">0</span> / 1000</div>
+            </div>
+
+            <button id="generate-btn" class="primary-btn">
+                <span class="btn-text"><i class="fa-solid fa-wand-magic-sparkles"></i> Generate Speech</span>
+                <span class="btn-loader hidden"><i class="fa-solid fa-spinner fa-spin"></i> Processing...</span>
+            </button>
+
+            <div id="error-message" class="alert error hidden">
+                <i class="fa-solid fa-circle-exclamation"></i>
+                <span id="error-text">An error occurred.</span>
+            </div>
+
+            <div id="audio-container" class="audio-panel hidden">
+                <h3><i class="fa-solid fa-headphones"></i> Your Audio is Ready</h3>
+                <audio id="audio-player" controls>
+                    Your browser does not support the audio element.
+                </audio>
+                <a id="download-btn" class="secondary-btn" href="#" download>
+                    <i class="fa-solid fa-download"></i> Download MP3
+                </a>
+            </div>
+        </div>
+
+        <footer>
+            <p>Built with <i class="fa-solid fa-heart"></i> using Flask and Microsoft Edge TTS</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='script_jp.js') }}"></script>
+</body>
+
+</html>

test_voices.py

@@ -0,0 +1,10 @@
+import asyncio
+import edge_tts
+
+async def main():
+    voices = await edge_tts.list_voices()
+    for v in voices:
+        if 'vi-VN' in v['ShortName']:
+            print(f"Name: {v['ShortName']}, Gender: {v['Gender']}")
+
+asyncio.run(main())