Conversion de la parole en PDF avec NextJS et ExpressJS

Cet article explore la construction d'une application suivante.js et express.js qui convertit la parole en un PDF téléchargeable. Plongeons dans le processus de création de ce convertisseur de discours à pdf.

P> Les interfaces nécessitent d'explorer leurs capacités. Ce projet montre la conversion des mots parlés en un document PDF téléchargeable. Nous tirons parti de plusieurs bibliothèques pour réaliser cette fonctionnalité.

Technologies clés:

Les composants principaux sont suivants.js et express.js. Next.js, un framework React, fournit des fonctionnalités telles que les routes API, cruciales pour notre génération de PDF côté serveur. Express.js facilite la création d'un serveur Node.js pour gérer le traitement et le routage des données.

Les dépendances supplémentaires incluent:

1. React-Speech-reconnaissance : convertit la parole en texte dans les composants réactifs.
2. Le régénérateur-RUNTIME : Adresses potentiel " Next.js.
3. html-pdf-node : transforme HTML en un PDF.
4. Axios : gère les demandes HTTP.
5. CORS : Permet le partage des ressources croisées.

Configuration:

Commencez par créer deux dossiers de projet: un pour le client (par exemple, Audio-to-pdf-Client ) et un pour le serveur (par exemple, audio-to-pdf-server ).

Initialize the Next.js Client:

 npx create-NextPpappa Audio-to-pdf-clie 

Configurez le serveur Express.js: accédez au dossier du serveur et exécutez:

 npm init -y npm install express html-pdf-node Cors  Pre> <p> Créer <code> index.js </code> dans le dossier du serveur avec un serveur Express Basic: </p> <pre class="brush:php;toolbar:false"> const Express = Neesy "); const app = express (); app.Listen (4000, () = & gt; console.log ("Server en cours d'exécution sur le port 4000")); 

Installez les dépendances du côté client:

 CD Audio-to-pdf-Client NPM Installer React-Speech-Recognition Regenerator-runtime Axios 

Créer un Components Folder dans le client du client et a A <p> Folder A <code> Components dans le projet du client et a un dossier du client et a A

SpeechTotext.jsx Fichier à l'intérieur. Modifier pages / index.js pour importer et rendre le composant SpeechTotext .

Développement d'interface utilisateur:

Le composant speechtotext.jsx gérera l'interaction de l'utilisateur. Une structure de base comprend des boutons pour démarrer, arrêter, réinitialiser la reconnaissance de la parole et convertir en PDF. A ContentEditable div affiche le texte transcrit. (Reportez-vous à l'article d'origine pour le code de composant détaillé et le style CSS).

route de l'API côté serveur:

Le serveur express.js gérera la génération de PDF. Dans index.js , importez les modules nécessaires ( html-pdf-node , fs , coors , express.json () ) et définissez une route post ( / ). Cette route reçoit du texte transcrit, génère un PDF à l'aide de html-pdf-node , l'enregistre au système de fichiers et envoie le PDF au client. (Voir l'article d'origine pour le code complet côté serveur).

Conversion côté client:

La fonction handleconversion dans speechtotext.jsx fait une demande API au serveur express. Il gère le chargement des états, des erreurs et des messages de réussite. Lors de la conversion réussie, il déclenche un téléchargement de navigateur du PDF généré. (Voir l'article d'origine pour la fonction détaillée handleconversion ).

étapes finales:

Le code complet du client et du serveur peut être trouvé sur GitHub (liens fournis dans l'article d'origine). N'oubliez pas d'exécuter séparément le serveur de développement suivant et le serveur Express.js. Cette configuration vous permet de tester la fonctionnalité de conversion de la parole à PDF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!