Bina Aplikasi Web Ucapan ke Teks dengan Whisper, React and Node

Artikel ini menunjukkan membina aplikasi pertuturan-ke-teks yang memanfaatkan API Whisper OpenAI, React, Node.js, dan FFMPEG. Permohonan menerima input audio, memprosesnya menggunakan Whisper, dan memaparkan transkripsi yang dihasilkan. Ketepatan Whisper, walaupun dengan penceramah bahasa Inggeris bukan asli, diserlahkan.

Ciri -ciri Utama:

• Transkripsi yang tepat: menggunakan bisikan terbuka untuk penukaran pertuturan ke teks yang tinggi, bahkan mengendalikan aksen dengan berkesan.
• React & Node.js Integration: Menggunakan timbunan JavaScript penuh untuk pembangunan dan penempatan yang lancar.
• Pengurusan Utama API Secure: menggunakan pembolehubah persekitaran untuk penyimpanan kunci API terbuka yang selamat.
• Pemangkasan audio dengan FFMPEG: membolehkan pengguna memilih segmen audio khusus untuk transkripsi, meningkatkan kecekapan.
• antara muka mesra pengguna: Menyediakan pengalaman pengguna yang bersih dan intuitif dengan ciri-ciri seperti muat naik fail dan pemetik masa.

Gambaran Keseluruhan Teknikal:

Senibina aplikasi terdiri daripada frontend react dan backend node.js. Frontend mengendalikan interaksi pengguna (muat naik fail, pemilihan masa), manakala backend menguruskan komunikasi API dengan pemprosesan bisikan dan audio OpenAI menggunakan FFMPEG. Backend menggunakan dotenv, cors, multer, form-data, dan axios untuk pengurusan pembolehubah persekitaran, perkongsian sumber silang asal, muat naik fail, borang pengendalian data, dan permintaan API. Integrasi FFMPEG, yang difasilitasi oleh fluent-ffmpeg, ffmetadata, dan ffmpeg-static, membolehkan pemangkasan audio tepat.

Persediaan Projek:

Projek ini distrukturkan dengan direktori berasingan frontend dan backend. Frontend React diasaskan menggunakan create-react-app, dan pakej yang diperlukan (, axios, react-dropzone, react-select) dipasang. Backend node.js menggunakan express.js, dan pakej (react-toastify, express, dotenv, cors, multer, form-data, axios, fluent-ffmpeg, ffmetadata, ffmpeg-static) dipasang untuk fungsi pelayan, interaksi API, dan integrasi FFMPEG. nodemon

Whisper Integration:

Laluan pos (

) mengendalikan muat naik audio, menukar audio ke aliran yang boleh dibaca, menghantarnya ke API Whisper, dan mengembalikan transkripsi sebagai JSON. Pengendalian ralat dan amalan terbaik keselamatan dilaksanakan. /api/transcribe

integrasi ffmpeg:

FFMPEG digunakan untuk memangkas segmen audio berdasarkan masa permulaan dan akhir yang ditentukan pengguna. Fungsi utiliti menukarkan rentetan masa ke saat untuk pemprosesan FFMPEG. Audio yang dipangkas kemudian dihantar ke API Whisper.

pembangunan frontend:

Komponen Custom, dibina menggunakan TimePicker, membolehkan pengguna memilih masa permulaan dan akhir yang tepat untuk transkripsi. Komponen aplikasi utama mengendalikan muat naik fail, berkomunikasi dengan API Backend, dan memaparkan hasil transkripsi. Pemberitahuan Toast memberikan maklum balas kepada pengguna. react-select

penyebaran:

Artikel ini menyediakan pautan ke repositori kod frontend dan backend lengkap di GitHub, memudahkan penggunaan mudah dan penyesuaian selanjutnya.

Soalan -soalan yang sering ditanya (Soalan Lazim): Artikel ini disimpulkan dengan seksyen FAQ yang komprehensif yang menangani soalan -soalan umum mengenai bisikan, integrasi dengan react dan node.js, ketepatan, pengendalian ralat, kos, dan peluang sumbangan.

Atas ialah kandungan terperinci Bina Aplikasi Web Ucapan ke Teks dengan Whisper, React and Node. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!