Nextjs 및 ExpressJS와 함께 PDF로 연설을 전환합니다

이 기사에서는 스피치를 다운로드 가능한 PDF로 변환하는 Next.js 및 Express.js 응용 프로그램을 구축합니다. 이 음성 -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 : 크로스 오리핀 자원 공유를 활성화합니다.

프로젝트 설정 :

클라이언트 용 (예 : audio-to-pdf-client )과 서버 (예 : audio-to-pdf-server )의 두 개의 프로젝트 폴더를 만들어 시작하십시오.

다음에 초기화 : JS 클라이언트 :

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

Express.js 서버 설정 : 서버 폴더로 이동하여 실행하십시오.

 npm init -y
NPM 설치 Express HTML-PDF-NODE CORS

기본 Express 서버가있는 서버 폴더에서 index.js 작성하십시오.

 const express = 요구 사항 ( "Express");
const app = express ();
app.listen (4000, () => console.log ( "포트 4000에서 실행되는 서버");

클라이언트 측 의존성 설치 :

 CD 오디오 투 PDF- 클라이언트
NPM 설치 React-Speech-Recenition Regenerator-Runtime Axios를 설치하십시오

SpeechToText.jsx 프로젝트 내에서 components 폴더를 만듭니다. SpeechToText 구성 요소를 가져오고 렌더링하려면 pages/index.js 수정하십시오.

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 Development Server와 Express.js 서버를 별도로 실행해야합니다. 이 설정을 사용하면 Speech-to-PDF 변환 기능을 테스트 할 수 있습니다.

위 내용은 Nextjs 및 ExpressJS와 함께 PDF로 연설을 전환합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!