내 프로젝트는 Reactjs vite 프레임 워크, 데이터 저장 용 MongoDB, 사용자 인증 및 인증을위한 JWT, 백엔드 용 express.js가있는 node.js를 사용하여 구축 된 pdfchat 응용 프로그램입니다. 또한 환경 가변 관리를위한 Dotenv, Langchain 및 언어 처리 용 벡터 저장, 파일 업로드 용 Multer 및 백엔드 요청을위한 Axios를 포함한 다양한 라이브러리 및 도구를 사용합니다. 이 프로젝트는 세련된 사용자 인터페이스를 위해 Tailwind CSS 및 Shadcn 프레임 워크와 함께 스타일입니다.
백엔드에서는 요청 처리를 위해 Express.js와 Node.js를 사용하여 사용자 정보를 저장하고 사용자 로그인을 관리했습니다. 안전을 유지하기 위해 JSON 웹 토큰을 사용하여 사용자 인증을 사용하여 공인 사용자 만 프로젝트의 특정 부분에 액세스 할 수 있도록했습니다.
PDF 파일을 처리하기 위해 Multer라는 도구를 사용하여 파일과 해당 위치를 데이터베이스에 저장했습니다. 그런 다음 업로드 된 PDF를 처리하여 작은 부품으로 나누고 Langchain이 제공하는 HNSW 벡터 매장에 보관했습니다. 이 여정은 저의 기술을 넓히고 Langchain 및 Rag와 같은 고급 기술이 제공하는 가능성을 더 잘 이해했습니다.
프로젝트를 실행하기 전에 환경 및 구성 변수를 설정해야합니다.
저장소를 복제하십시오 :이 저장소를 로컬 컴퓨터로 클로닝하여 시작하십시오.
프론트 엔드 설정 :
npm install 실행하여 프론트 엔드 종속성을 설치하십시오.npm run dev 사용하여 프론트 엔드를 시작하십시오.백엔드 설정 :
npm install 실행하여 백엔드 종속성을 설치하십시오..env 파일을 만들고 다음 변수를 설정하십시오.PORT : 서버의 포트 번호가 실행됩니다. (기본적으로 8080)username : MongoDB Atlas Connection 사용자 이름.password : MongoDB Atlas 연결 비밀번호.JWT_SECRET : JWT 토큰 생성의 비밀.OPENAI_API_KEY : OpenAI API 키.데이터베이스 설정 :
백엔드 시작 :
npm start .응용 프로그램 액세스 :
http://localhost:5173 방문하십시오.http://localhost:8080 또는 http://localhost:PORT 열어 백엔드 부품 응용 프로그램에 액세스하십시오. 프로젝트 구조는 두 가지 주요 디렉토리로 구성됩니다.
frontend : TypeScript가있는 Frontend의 모든 Reactjs 코드를 포함합니다.backend : 백엔드 로직에 express.js를 사용하여 node.js 서버를 포함합니다. 사용자 인증 및 인증에 JWT (JSON Web Tokens)를 사용했습니다. 사용자가 등록하거나 로그인하면 승인 된 경로에 액세스하기위한 후속 요청과 함께 전송 해야하는 토큰을받습니다.
사용자 정보는 유연한 NOSQL 데이터베이스 인 MongoDB에 저장됩니다. 사용자 데이터는 사용자 상호 작용에 필요한대로 단단히 저장 및 검색됩니다.
파일 업로드를 처리하기위한 미들웨어 인 Multer를 사용하여 사용자가 이미지 나 문서와 같은 파일을 업로드 할 수 있습니다. 이 기능은 멀티미디어 컨텐츠를 지원하여 사용자 경험을 향상시킵니다.
Frontend는 Tailwind CSS 및 Shadcn 프레임 워크를 사용하여 사용자 친화적 인 인터페이스로 설계되었습니다. 사용자에게 반응적이고 시각적으로 매력적인 경험을 제공합니다.
백엔드는 다양한 API 엔드 포인트를 제공하여 사용자 데이터, 인증 및 파일 업로드를 관리합니다. 이 엔드 포인트는 코드에 문서화되어 있으며 백엔드 코드베이스에서 자세한 내용을 찾을 수 있습니다.