次のJSおよびExpressJSを使用してSpeechをPDFに変換します

この記事では、Speechをダウンロード可能なPDFに変換するnext.jsとexpress.jsアプリケーションの構築について説明します。このSpeech-to-PDFコンバーターを作成するプロセスを掘り下げましょう。

音声インターフェイスの増加する有病率は、それらの能力を探る必要があります。このプロジェクトは、話し言葉をダウンロード可能なPDFドキュメントに変換することを示しています。この機能を実現するために、いくつかのライブラリを活用します。

重要なテクノロジー：

コアコンポーネントはnext.jsとexpress.jsです。 ReactフレームワークであるNext.jsは、サーバー側のPDF生成に重要なAPIルートなどの機能を提供します。 Express.jsは、データ処理とルーティングを処理するNode.jsサーバーの作成を容易にします。

追加の依存関係は次のとおりです。

1. react-speech-recognition ：Reactコンポーネント内のテキストに音声を変換します。
2. regenerator-runtime ：潜在的な「Regeneratorruntimeは定義されていない」next.jsのエラーに対処します。
3. html-pdf-node ：HTMLをPDFに変換します。
4. axios ：HTTPリクエストを管理します。
5. cors ：クロスオリジンリソース共有を有効にします。

プロジェクトのセットアップ：

2つのプロジェクトフォルダーを作成することから始めます。1つはクライアント用（ audio-to-pdf-client ）とサーバー用（ audio-to-pdf-server ）です。

next.jsクライアントを初期化します。

 npx create-next-app audio-to-pdf-client

Express.jsサーバーをセットアップ：サーバーフォルダーに移動して実行します。

 npm init -y
NPMインストールExpress HTML-PDF-NODE CORS

基本的なエクスプレスサーバーを使用して、サーバーフォルダーにindex.jsを作成します。

 const express = require（ "Express"）;
const app = express（）;
app.listen（4000、（）=> console.log（ "ポート4000"で実行されているサーバー "））;

クライアント側の依存関係をインストールします：

 CD Audio-to-PDF-Client
NPMインストールReact-Speech-Cognition Regenerator-Runtime Axios

クライアントプロジェクト内でcomponentsフォルダーとその内部にSpeechToText.jsxファイルを作成します。 pages/index.jsを変更して、 SpeechToTextコンポーネントをインポートおよびレンダリングします。

UI開発：

SpeechToText.jsxコンポーネントは、ユーザーの相互作用を処理します。基本構造には、開始、停止、音声認識のリセット、PDFへの変換のボタンが含まれます。 contenteditable divには、転写されたテキストが表示されます。 （詳細なコンポーネントコードとCSSスタイリングについては、元の記事を参照してください）。

サーバー側APIルート：

Express.jsサーバーはPDF生成を処理します。 index.jsでは、必要なモジュール（ html-pdf-node 、 fs 、 cors 、 express.json() ）をインポートし、ポストルート（ / ）を定義します。このルートは、転写されたテキストを受信し、 html-pdf-nodeを使用してPDFを生成し、ファイルシステムに保存し、PDFをクライアントに送信します。 （完全なサーバー側のコードについては、元の記事を参照してください）。

クライアント側の変換：

SpeechToText.jsxのhandleConversion関数は、ExpressサーバーにAPI要求を行います。状態の読み込み、エラー、および成功メッセージを処理します。変換が成功すると、生成されたPDFのブラウザのダウンロードがトリガーされます。 （詳細なhandleConversion関数については、元の記事を参照してください）。

最終的なステップ：

クライアントとサーバーの両方の完全なコードは、GitHub（元の記事で提供されているリンク）で見つけることができます。 Next.js開発サーバーとExpress.jsサーバーの両方を個別に実行することを忘れないでください。このセットアップを使用すると、Speech-to-PDF変換機能をテストできます。

以上が次のJSおよびExpressJSを使用してSpeechをPDFに変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。