[챗봇프로젝트] 1일차. MVP 만들기

❗[프론트엔드 MVP 만들기]

우선, Ollama의 콘솔을 확인하니, 11434 포트에서 /api/generate URI를 호출하면 프롬프트에 따라 결과물이 생성되는 것을 확인했다.

결과물 JSON을 확인했더니 각각의 JSON이 연속되어있는 것을 확인했다.

일반적인 웹 프론트/백엔드 개발 방식으로 진행하게 되면 해당 JSON을 읽어낼 수 없다.

ChatGPT가 생성된 부분까지는 실시간으로 데이터를 전달하는 방법이 어떤 것인지 먼저 확인하게 되었다.

확인해본 결과, 별도의 SSE 시스템을 구현해야 한다는 것을 알게 되었다.

우선, HTML, CSS, JS만 가지고 ChatGPT를 이용해 간단한 화면을 구성해보았다.

하지만 CORS 문제로 인해 Ollama 서버와 통신할 수 없었다.

이를 해결하기 위해 Node.js를 설치해 CORS를 해결하는 서비스를 호스팅하기로 결정했다.

node.js를 설치한 이후, server.js를 실행하였으나, 다음과 같은 오류가 발생했다.

1. Cannot find package 'express' ipmorted form D:\server.js

해당 경우에는 npm을 이용하여 express 라이브러리를 설치해주면 해결된다.

2. FullyQualifiedErrorId : UnauthorizedAccess

npm install -g express

해당 명령어를 이용해 express 라이브러리를 설치하려고 했으나, 권한 문제로 인해 오류가 발생하였다.

해당 문제는 다음 링크를 통해 문제가 발생한 원인을 기재해두겠다.

해결 방법은 cmd를 관리자 권한으로 실행한 뒤 다음 명령어를 입력한다

Set-ExecutionPolicy RemoteSigned

스크립트 보안 오류 PSSecurityException 해결 방법

ReactJS프로젝트를 Visual Studio Code Build시 위와 같은 에러가 나타나면 스크립트 권한이 제한되어 있기 때문입니다. 윈도우 검색에서 PowerShell을 관리자 권한으로 실행시켜줍니다. 관리자 권한으로

itpro.tistory.com

이후, CORS를 우회하기 위해 프록시 역할을 하는 server.js에도 NDJSON을 stream할 수 있게 코드를 변경한 후 HTML 파일을 다시 실행시켜보았다.

개발자 도구의 Console을 확인하니 응답은 잘 오는 것 같으나, 아직은 오류가 발생하고 있다.

때문에, ChatGPT를 통해 해결방법을 도출하였고... 마침내 내가 원하는 결과가 나오게 되었다.

JSON 파싱하는 부분에 있어 문제가 있었던 것이었다.

또한, 두 번째 입력이 있는 경우 "\n[스트림 종료]" 라는 문구가 발생하고 통신이 되지 않는 문제가 있었는데,

이 문제를 ChatGPT를 통해 다시 한 번 해결하게 되었다.

ChatGPT - 스트리밍 오류 해결법

Shared via ChatGPT

chatgpt.com

❗[프론트엔드 MVP 결과물]

자! 이제 본격적으로 개발을 시작해보자

코드스피드 블로그