Menukar Ucapan ke PDF dengan NextJS dan ExpressJS

Artikel ini meneroka membina aplikasi Next.js dan Express.js yang menukarkan ucapan kepada PDF yang boleh dimuat turun. Mari kita menyelidiki proses mewujudkan penukar pertuturan-ke-PDF ini.

Peningkatan antara muka ucapan yang semakin meningkat memerlukan meneroka keupayaan mereka. Projek ini menunjukkan menukarkan kata -kata yang dituturkan ke dalam dokumen PDF yang boleh dimuat turun. Kami akan memanfaatkan beberapa perpustakaan untuk mencapai fungsi ini.

Teknologi Utama:

Komponen teras adalah seterusnya.js dan Express.js. Next.js, rangka kerja React, menyediakan ciri-ciri seperti laluan API, penting untuk penjanaan PDF pelayan kami. Express.js memudahkan penciptaan pelayan Node.js untuk mengendalikan pemprosesan dan penghalaan data.

Ketergantungan tambahan termasuk:

1. react-speech-recognition : Menukar ucapan kepada teks dalam komponen React.
2. regenerator-runtime : Mengatasi potensi "regeneratorruntime tidak ditakrifkan" kesilapan dalam next.js.
3. html-pdf-node : Mengubah HTML menjadi PDF.
4. axios : Menguruskan permintaan HTTP.
5. cors : Membolehkan perkongsian sumber silang asal.

Persediaan Projek:

Mulailah dengan membuat dua folder projek: satu untuk pelanggan (contohnya, audio-to-pdf-client ) dan satu untuk pelayan (misalnya, audio-to-pdf-server ).

Inisialisasi Pelanggan Next.js:

 NPX Create-Next-App Audio-to-PDF-Client

Sediakan pelayan Express.js: Navigasi ke folder pelayan dan jalankan:

 npm init -y
NPM Pasang Express HTML-PDF-NODE CORS

Buat index.js dalam folder pelayan dengan pelayan ekspres asas:

 const express = memerlukan ("Express");
const app = express ();
app.listen (4000, () => console.log ("pelayan berjalan pada port 4000"));

Pasang kebergantungan pelanggan:

 CD audio-to-pdf-client
NPM Pasang React-Speech-Pengiktirafan Regenerator-Runtime Axios

Buat folder components dalam projek klien dan fail SpeechToText.jsx di dalamnya. Ubah suai pages/index.js untuk mengimport dan menjadikan komponen SpeechToText .

Pembangunan UI:

Komponen SpeechToText.jsx akan mengendalikan interaksi pengguna. Struktur asas termasuk butang untuk memulakan, menghentikan, menetapkan semula pengiktirafan ucapan, dan menukar kepada PDF. Div contenteditable memaparkan teks yang ditranskripsikan. (Rujuk artikel asal untuk kod komponen terperinci dan gaya CSS).

Laluan API pelayan:

Pelayan Express.js akan mengendalikan generasi PDF. Dalam index.js , import modul yang diperlukan ( html-pdf-node , fs , cors , express.json() ), dan menentukan laluan pos ( / ). Laluan ini menerima teks yang ditranskripsikan, menghasilkan PDF menggunakan html-pdf-node , menyimpannya ke sistem fail, dan menghantar PDF kepada pelanggan. (Lihat artikel asal untuk kod pelayan yang lengkap).

Penukaran sisi pelanggan:

Fungsi handleConversion dalam SpeechToText.jsx membuat permintaan API ke pelayan Express. Ia mengendalikan keadaan pemuatan, kesilapan, dan mesej kejayaan. Apabila penukaran yang berjaya, ia mencetuskan muat turun penyemak imbas PDF yang dihasilkan. (Lihat artikel asal untuk fungsi handleConversion terperinci).

Langkah Akhir:

Kod lengkap untuk kedua -dua klien dan pelayan boleh didapati di GitHub (pautan yang disediakan dalam artikel asal). Ingatlah untuk menjalankan kedua -dua pelayan pembangunan seterusnya dan pelayan Express.js secara berasingan. Persediaan ini membolehkan anda menguji fungsi penukaran pertuturan-ke-PDF.

Atas ialah kandungan terperinci Menukar Ucapan ke PDF dengan NextJS dan ExpressJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!