Demo: https://cakap.hurufarab.com
Oleh: Luqman B. Shariffudin
Apabila saya melihat anak saya membaca dari buku, saya perasan bahawa dia seolah-olah hanya 'menghafal' suku kata tanpa memahami konteks ayatnya.
Walaupun anak saya sudah pandai bercakap dan kadang-kadang terdengar petah, dia masih menghadapi kesukaran untuk memahami makna penuh semasa membaca.
Jadi saya berfikir, mengapa kita tidak mencuba mengajarnya untuk 'membaca' berdasarkan apa yang dia ucapkan?
Dengan cara ini, dia akan memahami bahawa apa yang dia tuturkan sebenarnya dieja dengan cara yang tertentu. Ini akan membantunya menangkap keseluruhan perkataan secara visual, berbanding hanya suku kata demi suku kata.
Browser:
| Mobile | Chrome | Firefox | Safari | |
|---|---|---|---|---|
| Paparan | ✅ OK | ✅ OK | ✅ OK | |
| Rakaman Suara | Bergantung | ✅ OK | ❌ Tak Jadi |
Antara limitasi lain adalah bagaimana cara WhisperAPI kendali input suara yang tidak tentu. Boleh jadi input dari user dalam bentuk senyap atau bercakap yang bukan-bukan (gibberish). Jika ini berlaku, teks yang dihasilkan mungkin salah dan langsung tidak kena / halusinasi.
Projek ini bergantung penuh pada speech-to-text API untuk berfungsi. Sekarang ini dah banyak penyedia yang menawarkan API untuk speech-to-text.
Secara spesifiknya, saya perlukan servis yang boleh kendali Bahasa Malaysia dengan baik. Saya sudah cuba beberapa API antaranya dari Google, OpenAI dan beberapa lagi yang saya tidak berapa ingat.
Jadi saya memilih untuk teruskan dengan OpenAI (produk yang berkaitan untuk ini adalah 'Whisper'). Antara sebabnya ialah ia boleh kendali Bahasa Malaysia pelbagai dialek/pasar dengan baik. Dan juga boleh buat prompt dengan GPT jika perlu.
- React
- Tailwind CSS (masih ada juga guna .css biasa)
- Vite
- Hono (untuk back-end server)
- Bun
Projek ini adalah single page app. Satu muka sahaja, satu route sahaja. Dia lebih kepada interaktif untuk satu page itu sahaja.
Lagi benda penting yang saya perlu nyatakan ialah, projek ini memang dibuat untuk digunakan di web browser pada desktop. Jadi memang saya tiada rancangan setakat ini untuk menjadikannya responsive.
Dari segi grafik, saya mengambil ilham dari pelbagai sumber dari Pinterest dengan carian "kids game ui design". Jadi rupa bentuk button, background, ilustrasi dan segala elemen yang ada sebenarnya kearah bentuk "game UI".
Pemilihan jenis font pula dipengaruhi oleh reka bentuk huruf "a" kecil. Saya lebih cenderong untuk perkenalkan kepada anak-anak bentuk "a" yang bulat berbanding "a" yang bersimpul.
Ini kerana bagi saya, sebahagian mereka ada kekeliruan bila mana lihat huruf yang sama tapi bentuk berbeza. Dan ada yang teragak-agak (tidak yakin) bila baca kerana keliru.
Native elements yang menarik yang telah diubah penampilannya dalam projek ini adalah; scrollbar, cursor, selection-highlight, slider:
Dialog yang digunakan dalam projek ini adalah dialog native html <dialog> yang mana telah diubah penampilannya, sebagai contoh:
- Pengguna menekan butang "Rakam Suara".
- Hasil rakaman, yang berbentuk Blob, akan dimuat naik ke back-end melalui API.
- Kemudian, back-end akan menghantar fail tersebut untuk ditranskripsi menggunakan Whisper API dari OpenAI.
- Whisper API akan mengembalikan hasil transkripsi dalam bentuk teks ke back-end.
- Back-end akan menghantar respons ke UI.
- Hasil transkripsi akan dipaparkan pada skrin.
Sebab nak lindungi secret key OpenAI dari dicuri dan disalah guna oleh sesiapa. Saya hanya guna satu (1) endpoint sahaja, jadi mungkin anda tertanya kenapa tak guna Edge atau mana-mana serverless provider?
Entahlah. Mungkin antara sebabnya ialah projek ini perlukan Bun runtime.
Antara sebab lain adalah, walaupun hanya satu endpoint yang saya guna, tapi ia melibatkan FormData dan proses memuat-naik fail (audio/blob). Dari client-side -> endpoint -> Whisper.
Jadi saya rasa jika saya teruskan dengan serverless dan servis seumpamanya, mungkin saya akan banyak habiskan masa hanya untuk configure dan setting up environment.
Projek ini menggunakan Bun untuk development.
Pastikan ada sudah install Bun untuk mula: https://bun.sh/docs/installation
Git clone projek ini ke local:
git clone [email protected]:mansarip/tuturbaca.git
Masuk ke folder projek dan install segala dependencies:
cd tuturbaca
bun install
Cipta .env file untuk letak OpenAI secret key. Dalam file .env tersebut:
OPENAI_KEY=sk-proj-XXXXXXXXXXXXXXXXX
(Ganti sk-proj-XXXXXXXXXXXXXXXXX dengan secret key anda.)
Mulakan server untuk development:
bun run dev
Boleh buka browser dan pergi ke:
http://localhost:5174
Selesai.
Nota: Command bun run dev akan jalankan kedua-dua server untuk front-end dan back-end (Hono). Anda boleh lihat dalam package.json kalau perlu run server secara individu:
bun run dev:fe #vite
bun run dev:be #hono
Bahagian ni kalau nak tahu kena bayar.
Tidak ada yang saya harapakan melainkan manfaat untuk orang lain. Baik anak-anak atau mereka yang sedang belajar membaca, atau pun para developer yang sedang memahami projek ini.
Jika ada sumbangan idea, atau ingin menyumbang dari segi pembangunan, boleh hantarkan PR dan kita boleh sama-sama tengok nanti.
Terima kasih.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent