Proyek Speech-to-Text Real-time dengan Upload Audio

Proyek ini adalah aplikasi web yang mendemonstrasikan transkripsi ucapan ke teks (speech-to-text) secara real-time menggunakan Google Cloud Speech-to-Text API melalui WebSockets. Setelah sesi transkripsi selesai, rekaman audio lengkap secara otomatis diunggah ke Google Cloud Storage (GCS).

Fitur

• Transkripsi Real-time: Menerjemahkan ucapan menjadi teks secara langsung saat pengguna berbicara.
• Komunikasi WebSocket: Komunikasi latensi rendah antara frontend (browser) dan backend (server FastAPI).
• Penyimpanan Audio: Secara otomatis menyimpan rekaman audio dalam format .webm ke Google Cloud Storage setelah setiap sesi.
• Antarmuka Web Sederhana: UI yang mudah digunakan untuk memulai dan menghentikan rekaman.
• Backend Asinkron: Dibangun dengan FastAPI, ideal untuk menangani koneksi WebSocket dan operasi I/O.

Struktur Proyek

.
├── backend/
│   ├── .env                # File untuk menyimpan variabel lingkungan (dibuat manual)
│   ├── main.py             # Logika server backend FastAPI
│   └── requirements.txt    # Dependensi Python untuk backend
└── frontend/
    ├── index.html          # Struktur halaman web
    └── script.js           # Logika JavaScript untuk frontend

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

1. Python 3.7+: Instal Python.
2. Akun Google Cloud Platform (GCP): Diperlukan untuk menggunakan Speech-to-Text API dan Cloud Storage.
3. Bucket Google Cloud Storage: Buat bucket di proyek GCP Anda untuk menyimpan rekaman audio.
4. Kredensial GCP: Buat service account di GCP, berikan peran yang sesuai (seperti Speech-to-Text User dan Storage Object Creator), dan unduh file kunci JSON-nya.

---

⚙️ Instalasi & Konfigurasi

1. Backend

a. Navigasi ke direktori backend:

cd backend

b. Buat dan aktifkan virtual environment (dianjurkan):

# Untuk macOS/Linux
python3 -m venv env
source env/bin/activate

# Untuk Windows
python -m venv env
.\env\Scripts\activate

c. Instal dependensi Python:

pip install -r requirements.txt

d. Konfigurasi Variabel Lingkungan:

Buat file bernama .env di dalam direktori backend/. Salin konten di bawah ini dan ganti dengan nilai Anda sendiri.

# Ganti dengan path absolut ke file JSON kredensial GCP Anda
GOOGLE_APPLICATION_CREDENTIALS="/path/to/your/gcp-credentials.json"

# Ganti dengan nama bucket Google Cloud Storage Anda
GCS_BUCKET_NAME="nama-bucket-gcs-anda"

2. Frontend

Frontend terdiri dari file HTML dan JavaScript statis dan tidak memerlukan proses build. Cukup disajikan oleh server web.

---

🚀 Menjalankan Aplikasi

Aplikasi ini memerlukan backend dan frontend untuk berjalan secara bersamaan.

1. Jalankan Server Backend

Buka terminal, pastikan Anda berada di direktori backend/ dan virtual environment Anda aktif, lalu jalankan perintah berikut:

uvicorn main:app --host 0.0.0.0 --port 8089 --reload

Server backend sekarang berjalan di http://localhost:8089.

2. Jalankan Server Frontend

Buka terminal kedua, navigasi ke direktori frontend/, dan jalankan server web sederhana:

# Untuk Python 3
python -m http.server 8080

Server frontend sekarang berjalan di http://localhost:8080.

3. Akses Aplikasi

Buka browser web Anda dan kunjungi:

http://localhost:8080

---

🎤 Cara Penggunaan

1. Mulai Merekam: Klik tombol "Mulai Rekam".
2. Izinkan Mikrofon: Browser akan meminta izin untuk mengakses mikrofon Anda. Klik "Allow".
3. Mulai Bicara: Status akan berubah menjadi "Terhubung". Mulailah berbicara, dan Anda akan melihat transkrip sementara muncul.
4. Transkrip Final: Saat Anda berhenti sejenak, transkrip akan difinalisasi dan ditambahkan ke area teks utama.
5. Hentikan Merekam: Klik tombol "Hentikan Rekam".
6. Proses Selesai: Sesi akan berakhir. Di latar belakang, file audio .webm dari sesi tersebut akan diunggah ke bucket GCS yang telah Anda konfigurasikan.