README.md

metadata

title: TTS Browser Demo - Transformers.js
emoji: 🎙️
colorFrom: blue
colorTo: indigo
sdk: static
pinned: false

🎙️ Text-to-Speech Browser Demo

Demo TTS (Text-to-Speech) yang berjalan 100% di browser menggunakan Transformers.js dari Hugging Face. Tidak perlu server Python, tidak ada biaya hosting!

✨ Fitur Lengkap

🎙️ Model TTS (3 Pilihan)

• SpeechT5 (Fast) - Model cepat untuk testing (Xenova/speecht5_tts)
• SpeechT5 VCTK HiFi (Best Quality) - Kualitas audio tertinggi (Xenova/speecht5_tts_vctk_hifi)
• MMS English (Meta) - Model multilingual Meta (Xenova/mms-tts-eng)

🎚️ Voice Controls (Semua Berfungsi!)

• Speed Control (0.5x - 2x) - Real-time playback speed adjustment
• Temperature (0.1 - 1.5) - Kontrol kreativitas output
• Top P Sampling (0.01 - 1.0) - Nucleus sampling untuk variasi natural
• Top K (0-50) - Token selection control
• Repetition Penalty (0.8 - 2.0) - Hindari pengulangan kata
• Length Penalty (0.1 - 2.0) - Kontrol panjang audio
• Num Beams (1-8) - Beam search untuk kualitas lebih baik

🎤 Speaker Voice Cloning

• Upload audio file untuk clone karakteristik suara
• Support semua format audio (MP3, WAV, M4A, dll)
• Processing otomatis speaker embeddings

💻 Teknologi

• ⚡ 100% Client-Side - Zero server dependency
• 🚀 WebGPU Acceleration - Auto-detect & fallback ke WASM
• 💾 Smart Caching - Model di-cache setelah download pertama
• 📊 Real-time Logging - Activity log dengan timestamp
• 🎨 Modern UI - Dark theme, glassmorphism, smooth animations
• 📱 Fully Responsive - Works on mobile, tablet, desktop

📖 Cara Pakai

1. Duplicate Space ini atau clone repository
2. Buka URL Space, tunggu model loading (pertama kali akan download ONNX weights)
3. Pilih Model dari dropdown di panel kanan
4. Ketik teks yang ingin diubah jadi suara
5. Klik Generate
6. Audio akan muncul dengan tombol Download

🛠️ Teknologi

• Transformers.js v3.x
• Vanilla JavaScript (ES6 Modules)
• ONNX Runtime (WASM/WebGPU)

📝 Catatan

• Beberapa kontrol UI (emotion vector, speaker prompt) adalah placeholder untuk ekspansi fitur di masa depan
• Model akan di-cache di browser setelah download pertama
• Gunakan browser modern (Chrome, Edge, Firefox) untuk performa optimal

🚀 Deploy Sendiri

# Clone repository
git clone <your-repo-url>

# Deploy ke Hugging Face Spaces
# 1. Buat Space baru di huggingface.co/spaces
# 2. Pilih "Static" sebagai SDK
# 3. Upload semua file atau connect Git repository

---

Template ini siap untuk production! 🎉