OpenAI 채팅 완료 API(예: gpt-3.5-turbo, gpt-4 등)를 사용하여 작동합니다. 이 API에 대한 (유료) 액세스 권한이 필요합니다.
API를 통해 gpt-4를 사용하면 ChatGPT plus를 사용하는 것보다 훨씬 빠르며 메시지 제한이 없습니다.
모든 채팅은 localStorage에 보관되므로 내보내기/가져오기 기능을 사용하지 않는 한 다른 브라우저나 장치에서 해당 채팅에 액세스할 수 없습니다.
이는 학습 실험을 의미합니다.
저는 OpenAI API를 시험해보고 싶었고 동시에 Tailwind CSS를 사용하여 일반 웹 구성 요소에 인터페이스를 작성하는 것이 얼마나 쉬운지 확인하고 싶었습니다.
저는 개발이 가능한 한 간단하고, 가급적이면 빌드 단계가 없고 npm 패키지가 없기를 원했습니다.
따라서 브라우저에 파일을 로드하고 코딩을 시작하면 됩니다.
여러 가지를 시도하다 보니 현재 구조가 약간 지저분합니다.
이것이 결과입니다!
OpenAI API를 제외하고는 외부 호출 없이 브라우저 내 GitHub 페이지에서 완전히 실행됩니다.
불행하게도 TailwindCSS에는 전체 CSS lib를 브라우저에 로드하려는 경우가 아니면 빌드 단계가 필요합니다.
그래서 나는 코드를 감시하고 변경 사항에 따라 CSS 파일을 다시 빌드하는 작은 tailwindcss CLI를 실행해야 한다는 것을 받아들였습니다.
그리고 가져오기를 사용하려면 모든 것이 적절한 웹사이트로 제공되어야 합니다. 즉, file:///이 아닌 http://입니다.
그래서 개발할 때 이 디렉토리에 작은 웹서버(npx http-server)를 실행해야 합니다.
적어도 Webpack, Vite 등과 같은 것을 사용하는 것에 비해 빠릅니다.
그리고 빌드 단계도 없습니다. 단지 몇 가지 소규모 개발 서비스일 뿐입니다.
프레임워크를 피하는 것이 가능하지만 웹 구성 요소를 사용하면 외부 종속성이 많이 필요하지 않습니다. 그러면 삶이 더 쉬워집니다. 예를 들어 Vite와 같은 것을 사용합니다.
Vite는 모든 외부 종속성을 로컬(귀하가 제공)로 유지하고 최신 상태로 유지하고 핫 리로딩을 활성화하는 데 도움이 됩니다.
웹 구성 요소만 사용하면 최신 브라우저에서만 작동하므로 제작자가 더 이상 지원하지 않는 브라우저(예: Internet Explorer, 이전 Chrome, Safari 등)를 지원해야 하는 경우 프레임워크를 쇼핑하는 것이 좋습니다.