로컬에 ChatGPT 앱 설치: 이유 및 방법

이 작업을 수행하려면 단계별 가이드를 따르십시오.

채팅GPT 귀하의 쿼리에 빠른 응답을 제공하도록 설계되었습니다. 온라인으로 ChatGPT에 액세스할 수 있습니다. 그러나 앱 설치를 선호하는 경우 이 가이드가 도움이 될 수 있습니다.

ChatGPT 앱을 로컬에 설치하여 향상된 개인 정보 보호로 더 빠른 응답을 받을 수 있도록 단계별 방법에 대해 논의할 것입니다.

ChatGPT 앱을 로컬에 설치하는 이유는 무엇인가요?

컴퓨터에 AI 모델을 설치하면 몇 가지 이점이 있으며 그 중 일부는 여기에 언급되어 있습니다.

• 빠르고 반응이 빠른 – 기기에서 직접 실행할 수 있습니다. 이는 앱이 장치의 프로세서와 메모리를 사용하여 원격 서버에서 작업할 때보다 더 효율적으로 작동함을 의미합니다.
• 프라이버시 및 보안 강화 – 앱을 로컬에서 사용하면 개인 데이터의 개인 정보 보호 및 보안이 강화됩니다. 데이터는 더 이상 장치에서 원격 서버로 전송되지 않습니다.
• 사용자 정의 가능 – 앱을 로컬에 설치하면 기본 설정 및 요구 사항에 따라 앱을 사용자 지정할 수 있습니다. 사용자 인터페이스, 앱 기능 등을 변경할 수 있습니다.
• 다운타임에 직면할 필요가 없습니다. – 앱이 로컬에 설치된 경우 다시 로그인하거나 사용량이 많은 경우 서버가 응답할 때까지 기다릴 필요가 없습니다. 따라서 다운타임이 없습니다.

ChatGPT 앱을 로컬에 설치하려면 어떻게 해야 하나요?

ChatGPT 앱을 로컬에 설치하는 단계에 참여하기 전에 다음 확인을 수행하는 것을 고려해야 합니다.

• 먼저 VS 코드에 Node.js 확장을 설치합니다.
• 그런 다음 VS 코드에서 Git 확장을 가져옵니다.

1. 폴더 만들기 및 Visual Studio Code에서 열기

1. 바탕 화면의 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 새로운, 그 다음에 폴더.
2. 폴더 이름을 다음과 같이 바꿉니다. Open_AI_ChatGPT 앱.
3. 누르세요 윈도우 키, 유형 비주얼 스튜디오 코드을 클릭하고 열려 있는.
4. 로 이동 파일 메뉴를 선택하고 폴더 열기.
5. 폴더를 선택하고 클릭 폴더 선택.
6. 다음으로 이동 보다 메뉴를 선택하고 단말기.

2. Node.js가 설치되어 있는지 확인

1. 다음 코드를 입력하여 node.js가 설치되어 있는지 확인하고 Enter 키를 누릅니다. 노드 -v
2. 오류가 발생하면 다음 단계를 진행하십시오.
3. 로 이동 Node.js 웹 사이트 및 Node.js 다운로드
4. 두 번 클릭하여 설치 프로그램 파일을 엽니다. 딸깍 하는 소리 다음.
5. 이제 모든 이용 약관에 동의하고 클릭하십시오. 다음.
6. 딸깍 하는 소리 다음 다음 모든 창에서 다음을 클릭합니다. 설치하다 설치를 시작합니다.
7. 이제 Visual Studio Code를 다시 시작합니다.
8. 완료되면 터미널로 돌아가서 다음 코드를 입력하여 바닐라 자바스크립트 저장소, Enter 키를 누릅니다. npm 만들기 [이메일 보호] 클라이언트 --템플릿 바닐라
9. 다음으로 입력 와이 Enter 키를 누릅니다.
10. 선택하다 바닐라 메시지가 표시되면 프레임워크로 사용합니다.
11. 선택하다 자바스크립트 요청할 때 변형으로. Open_AI_ChatGPT 앱 폴더 아래에 생성된 많은 파일과 폴더가 표시됩니다.

3. 종속성 설치

1. 다음 명령을 입력하여 클라이언트 디렉터리를 입력하고 Enter 키를 누릅니다. cd .\클라이언트\
2. 그런 다음 다음 명령을 복사하여 붙여넣고 Enter 키를 누릅니다. npm 설치
3. 이 링크로 이동하여 자산이라는 압축 폴더를 다운로드합니다.
4. 이제 추출된 자산 폴더를 클라이언트 폴더에 복사합니다.
5. 다음으로 vite.svg 및 counter.js 파일을 제거합니다.
6. 마지막으로 파비콘 파일 ~로부터 자산 폴더에 공공의 폴더.

4. style.css에 코드 작성

1. style.css 폴더에 아래 코드를 그대로 복사하여 붙여넣습니다.
   @가져오기 URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[이메일 보호];300;400;500;700;800;900&display=스왑");
* {
 여백: 0;
 패딩: 0;
 박스 크기 조정: 테두리 상자;
 font-family: "Alegreya Sans", 산세리프;
}
몸 {
배경: #343541;
}
#앱 {
폭: 100vw;
높이: 100vh;
배경: #343541;
디스플레이: 플렉스;
플렉스 방향: 열;
정렬 항목: 중앙;
justify-content: 공백 사이;
}
#chat_container {
플렉스: 1;
폭: 100%;
높이: 100%;
오버플로-y: 스크롤;
디스플레이: 플렉스;
플렉스 방향: 열;
간격: 10px;
-ms-오버플로 스타일: 없음;
스크롤바 너비: 없음;
패딩 하단: 20px;
스크롤 동작: 부드럽게;
}
/* 스크롤바 숨기기 */
#chat_container::-webkit-scrollbar {
디스플레이: 없음;
}
.wrapper {
폭: 100%;
패딩: 15px;
}
.ai {
배경: #40414F;
}
.채팅 {
폭: 100%;
최대 너비: 1280px;
여백: 0 자동;
 디스플레이: 플렉스;
플렉스 방향: 행;
항목 정렬: 플렉스 시작;
간격: 10px;
}
.프로필 {
폭: 36px;
높이: 36px;
테두리 반경: 5px;
배경: #5436DA;
디스플레이: 플렉스;
justify-content: 센터;
정렬 항목: 중앙;
}
.ai .profile {
배경: #10a37f;
}
.프로필 이미지 {
폭: 60%;
높이: 60%;
개체 맞춤: 포함;
}
.메시지 {
플렉스: 1;
색상: #dcdcdc;
글꼴 크기: 20px;
최대 너비: 100%;
오버플로-x: 스크롤;
/*
* 공백은 CSS 코드의 서식을 지정하는 데 사용되는 공백, 탭 또는 개행 문자를 나타냅니다.
* 요소 내의 공백을 처리하는 방법을 지정합니다. 이는 브라우저가 모든 공백을 중요하게 취급하고 소스 코드에 나타나는 그대로 유지하도록 지시하는 "pre" 값과 유사합니다.
* pre-wrap 값은 브라우저가 필요한 경우 긴 텍스트 줄을 여러 줄로 줄 바꿈할 수 있도록 합니다.
* CSS에서 공백 속성의 기본값은 "보통"입니다. 이는 브라우저에 여러 공백 문자를 단일 공백으로 축소하고 컨테이너에 맞도록 필요에 따라 텍스트를 여러 줄로 줄 바꿈하도록 지시합니다.
*/
공백: 사전 포장;
-ms-오버플로 스타일: 없음;
스크롤바 너비: 없음;}
/* 스크롤바 숨기기 */
.message::-webkit-scrollbar {
디스플레이: 없음;
}
형태 {
폭: 100%;
최대 너비: 1280px;
여백: 0 자동;
패딩: 10px;
배경: #40414F;
디스플레이: 플렉스;
플렉스 방향: 행;
간격: 10px;
}
텍스트 영역 {
폭: 100%;
색상: #fff;
글꼴 크기: 18px;
패딩: 10px;
배경: 투명;
테두리 반경: 5px;
테두리: 없음;
개요: 없음;
}
버튼 {
개요: 0;
테두리: 0; 커서: 포인터;
배경: 투명;
}
양식 이미지 {
너비: 30px;
높이: 30px;
}

5. Index.html에 코드 작성

1. index.html 파일에 다음 코드를 입력합니다.
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Ctrl + S를 눌러 스크립트를 저장합니다.
3. Visual Studio Code의 왼쪽 창으로 이동하여 main.js의 이름을 script.js로 바꿉니다.

6. 터미널에서 명령 실행

1. 터미널로 이동하여 누르십시오. Ctrl 키 + 씨 명령을 작성할 위치를 확인합니다. 클라이언트 폴더에 있어야 합니다. 그렇지 않은 경우 다음 명령을 입력하고 Enter 키를 누릅니다. CD 클라이언트
2. 다음 명령을 입력하고 Enter 키를 누릅니다. npm 실행 개발
3. 지금까지의 모습을 확인할 수 있는 웹 주소를 얻을 수 있습니다. 스크린샷에 언급된 오류가 발생하면 계속 진행하세요.

이 주제에 대해 자세히 알아보기

• 이탈리아에서 ChatGPT 액세스 및 사용 방법 [Quick Bypass]
• 본문 스트림의 ChatGPT 오류: 오류란 무엇이며 어떻게 수정합니까?
• ChatGPT를 Word와 통합하는 방법 [가장 빠른 방법]
• 이제 Bing AI 챗봇에서 이미지를 검색할 수 있습니다. 방법은 다음과 같습니다.
• 수정: ChatGPT 가입은 현재 사용할 수 없음 오류

7. script.js 파일에 코드 작성

1. script.js 파일에 있는 콘텐츠를 제거하고 다음 코드를 복사하여 붙여넣습니다.
   './assets/bot.svg'에서 봇 가져오기
   './assets/user.svg'에서 사용자 가져오기
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   loadInterval하자;
   함수 로더(요소) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // 로딩 표시기의 텍스트 내용 업데이트
   element.textContent += '.';
   // 로딩 인디케이터가 점 3개에 도달하면 재설정합니다.
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   함수 typeText(요소, 텍스트) {
   인덱스 = 0으로 둡니다.
   let 간격 = setInterval(() => {
   if (인덱스 < 텍스트 길이) {
   element.innerHTML += text.charAt(색인);
   지수++;
   } 또 다른 {
   clearInterval(간격);
   }
   }, 20)
   }
   함수 generateUniqueId() {
   const 타임스탬프 = Date.now();
   const randomNumber = Math.random();
   const hexadecimalString = randomNumber.toString(16);
   `id-${timestamp}-${hexadecimalString}`을 반환합니다.
   }
   함수 chatStripe(isAi, 값, uniqueId) {
   반품 (
   `
   
   
   

   
   

   
   src=${isAi? 봇: 사용자}
   alt="${아이는? '봇': '사용자'}"
   />
   

   
   

   ${값}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = 비동기 (e) => {
   e.preventDefault();
   const 데이터 = 새 FormData(양식);
   // 사용자의 챗스트라이프
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // 텍스트 영역 입력을 지우려면
   form.reset();
   // 봇의 챗스트라이프
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe(true, " ", uniqueId);
   // 스크롤을 맨 아래로 집중시키기 위해
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // 특정 메시지 div
   const messageDiv = document.getElementById(uniqueId);
   // messageDiv.innerHTML = "..."
   로더(messageDiv);
   const 응답 = 가져오기 대기(' http://localhost: 8001/', {
   방법: 'POST',
   헤더: {
   '콘텐츠 유형': '응용 프로그램/json'
   },
   본문: JSON.stringify({
   프롬프트: data.get('프롬프트')
   })
   })
   clearInterval(로드 인터벌);
   messageDiv.innerHTML = '';
   if (response.ok) {
   const 데이터 = 응답 대기.json();
   const parsedData = data.bot.trim();
   typeText(messageDiv, parsedData);
   } 또 다른 {
   const err = 응답 대기.텍스트();
   messageDiv.innerHTML = "문제가 발생했습니다.";
   경고(오류);
   }
   }
   form.addEventListener('제출', handleSubmit);
   form.addEventListener('keyup', (e) => {
   if (e.keyCode 13) {
   handleSubmit(e);
   }
   })
2. 그런 다음 Ctrl 키 + 에스 스크립트를 저장합니다.

8. Open_AI_ChatGPT 앱 폴더 안에 새 폴더를 만들고 모듈을 설치합니다.

1. 에 폴더를 생성합니다. Open_AI_ChatGPT 앱 폴더를 만들고 이름을 지정하십시오 섬기는 사람.
2. 열려 있는 단말기 그리고 누르기 Ctrl + 씨 실행 중인 앱을 중지합니다.
3. 다음 명령을 입력하고 Enter 키를 눌러 Client 폴더에서 나오십시오. CD ..
4. 다음 명령을 복사하여 붙여넣어 섬기는 사람 디렉터리를 입력하고 Enter 키를 누릅니다. CD 서버
5. 다음 명령을 입력하고 Enter 키를 눌러 서버 폴더에 package.json 파일을 생성합니다. npm 초기화 -y
6. 종속성을 설치하려면 다음 명령을 입력하고 Enter 키를 누릅니다. 그러면 package-lock.json이라는 새 파일이 생성됩니다. npm 설치 cors dotenv express nodemon openai

9. API 키를 생성하고 .env에 언급합니다.

1. 로 이동 오픈 API 웹사이트 그리고 로그인합니다.
2. 이제 클릭 개인의 그리고 선택 API 키 보기.
3. 딸깍 하는 소리 새 비밀 키 만들기 키를 복사합니다.
4. 에서 섬기는 사람 폴더에서 새 파일을 만들고 이름을 지정합니다. .env.
5. 에서 .env 파일에 The API Key를 Open API 웹 사이트에서 복사한 키로 바꾼 후 다음 코드를 입력하고 Enter 키를 누릅니다. OPENAI_API_KEY="API 키"

10. 새 파일 server.js를 만들고 스크립트를 작성합니다.

1. 서버 폴더에 새 파일을 만들고 이름을 server.js로 바꿉니다.
2. 이 파일 안에 다음 스크립트를 복사하여 붙여넣고 누르십시오. Ctrl 키+에스 파일을 저장하려면:

'익스프레스'에서 익스프레스 가져오기;
import * as dotenv from 'dotenv';
'cors'에서 가져오기 cors;
import { 구성, OpenAIApi } from 'openai';
dotenv.config();
const 구성 = 새 구성({
apiKey: process.env. OPENAI_API_KEY,
});
const openai = 새로운 OpenAIApi(구성);
const 앱 = 익스프레스();
app.use(cors());
app.use(express.json());
app.get('/', async (req, res) => {
res.status (200).send({
메시지: 'Hello from GPT!',
})
});
app.post('/', async (req, res) => {
노력하다 {
const 프롬프트 = req.body.prompt;
const 응답 = openai.createCompletion({
모델: "텍스트-davinci-003",
프롬프트: `${prompt}`,
temperature: 0, // 값이 높을수록 모델이 더 많은 위험을 감수함을 의미합니다.
max_tokens: 3000, // 완료 시 생성할 최대 토큰 수입니다. 대부분의 모델은 컨텍스트 길이가 2048 토큰입니다(4096을 지원하는 최신 모델 제외).
top_p: 1, // 핵 샘플링이라고 하는 온도를 사용한 샘플링의 대안
frequency_penalty: 0.5, // -2.0에서 2.0 사이의 숫자. 양수 값은 다음에 따라 새 토큰에 페널티를 줍니다. 지금까지 텍스트의 기존 빈도로 모델이 동일한 줄을 반복할 가능성을 줄입니다. 그대로.
present_penalty: 0, // -2.0에서 2.0 사이의 숫자. 양수 값은 지금까지 텍스트에 나타나는지 여부에 따라 새 토큰에 페널티를 주어 모델이 새 주제에 대해 이야기할 가능성을 높입니다.
});
res.status (200).send({
봇: response.data.choices[0].text
});
} 잡기(오류) {
console.log(오류);
res.status (500).send (오류 || '문제가 발생했습니다');
}
});
app.listen (5000, () => console.log('AI 서버 시작 날짜 http://localhost: 8001'));

11. package.json에 코드 작성

1. 다음 코드를 복사하여 붙여넣고 다음을 누릅니다. Ctrl 키 + 에스 저장하려면:

{
"이름": "서버",
"버전": "1.0.0",
"설명": "",
"유형": "모듈",
"스크립트":{
"서버": "노드몬 서버"
},
"키워드": [],
"작가": "",
"라이선스": "ISC",
"종속성": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"익스프레스": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. 코드 테스트

1. 이제 Visual Studio Code에서 터미널 메뉴를 클릭하고 유출된 터미널을 선택합니다.
2. 두 개의 터미널이 있습니다. 터미널 서버와 터미널 클라이언트라고 부르겠습니다.
3. 터미널 서버에서 Ctrl + C를 누릅니다. 다음 명령을 입력하여 서버 디렉토리를 입력하고 Enter를 누르십시오. cd server
4. 그런 다음 다음 명령을 복사하여 붙여넣고 Enter 키를 눌러 서버를 실행합니다. npm 실행 서버
5. 제시된 링크를 클릭하면 페이지에 Hello from GPT 메시지가 표시됩니다.
6. 이제 터미널 클라이언트에서 Ctrl + C를 누릅니다. 다음 명령을 입력하여 클라이언트 디렉터리를 입력하고 Enter 키를 누릅니다. CD 클라이언트
7. 다음 명령을 복사하여 붙여넣고 Enter 키를 눌러 클라이언트를 실행합니다. npm 실행 개발
8. 그런 다음 링크를 클릭하고 입력하십시오. 안녕하세요. 어떻게 지내세요; 봇이 답을 찾는 것을 볼 수 있습니다.

13. Git Bash 앱을 설치하고 GitHub 계정으로 구성합니다.

1. 이미 구성한 경우 이 단계를 건너뛸 수 있습니다. Git Bash 앱 다운로드.
2. 로그인 GitHub 계정.
3. 설치시 Open_AI_ChatGPT 폴더에 저장해주세요.
4. 그런 다음 Windows 키를 누르고 시스템 환경 변수 편집을 입력한 다음 열기를 클릭합니다.
5. 경로를 두 번 클릭하고 편집을 클릭합니다.
6. 여기에 git 파일의 경로를 추가한 다음 확인 및 확인을 클릭합니다.
7. Git Bash를 시작하고 사용자 이름을 GitHub 계정 사용자 이름으로 바꾼 후 다음 명령을 입력하고 Enter 키를 누릅니다. git config --global user.name "사용자 이름"
8. 이메일 주소를 이메일 주소로 바꾼 후 다음 명령을 복사하여 붙여넣고 Enter 키를 누릅니다. git config --global user.email "이메일 주소"
9. GitHub 계정으로 이동하여 드롭다운 화살표를 클릭하고 설정을 선택합니다. 이제 개발자 설정으로 이동하십시오.
10. 개인 액세스 토큰을 확장하고 세분화된 토큰을 선택합니다. 새 토큰 생성을 클릭합니다.
11. 이름을 바꾸고 유효성을 선택합니다. 그런 다음 토큰을 복사하여 메모장에 저장합니다.
12. 다음 명령을 하나씩 입력하고 Enter 키를 누릅니다. git config --global credential.helper wincredgit credential-manager-core 구성
13. 프롬프트에 따라 구성하고 암호를 묻는 메시지가 표시될 때 생성된 토큰을 붙여넣습니다.
14. Git Bash 앱을 닫습니다.

14. 리포지토리 생성 및 코드 게시

14.1 리포지토리 생성

1. 로그인 GitHub 계정.
2. 를 찾습니다 드롭다운 화살표 프로필 사진 옆에 있는 귀하의 저장소.
3. 딸깍 하는 소리 새로운.
4. 입력 리포지토리 이름, 선택하다 공공의을 클릭하고 저장소 생성.
5. VS 코드로 이동하여 Ctrl 키 + 씨, Open_AI_ChatGPT 앱 또는 루트 폴더에 있는지 확인합니다. 그렇지 않은 경우 다음 코드를 입력하고 Enter 키를 누릅니다. CD
6. 그런 다음 섬기는 사람 폴더, 새 파일 추가 및 이름 지정 .gitignore.
7. 에서 .gitignore 파일에서 다음 코드를 입력하여 .env 그리고 node_modules 밀리지 않는다 GitHub:
   .env
node_modules

14.2 저장소에 코드 게시

1. VS Code로 이동하여 다음 명령을 하나씩 복사하여 붙여넣고 모든 명령 다음에 Enter 키를 누릅니다. 자식 초기화git commit -m "첫 번째 커밋"자식 분기 -M 메인
2. 교체 후 다음 명령을 입력하십시오. https://github.com/SrishtiSisodia/CHAT-BOT-APP GitHub에 언급된 리포지토리 주소로:
   자식 원격 추가 원본 https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. 이제 코드를 푸시하려면 다음 명령을 입력하고 Enter 키를 누릅니다. git push -u 오리진 메인
4. GitHub 페이지를 다시 로드하면 코드가 거기에 업로드됩니다.
5. VS 코드에서 Ctrl 키 + 씨 터미널 서버와 터미널 클라이언트 모두에서 실행을 중지합니다.

15. 서버 배포

1. 렌더링하러 가기 웹 사이트를 방문하고 GitHub를 사용하여 가입하십시오.
2. 대시보드가 ​​표시되면 새로 만들기를 클릭한 다음 웹 서비스를 선택합니다.
3. 새 리포지토리 연결을 찾아 퍼블릭 Git 리포지토리 아래에 스토리지의 URL을 입력하고 연결을 클릭합니다.
4. 다음 페이지에서 이름을 추가하고 지역을 선택하고 분기를 기본으로 선택하고 루트 디렉터리를 서버로 선택하고 환경을 노드로 선택한 후 다음을 입력합니다. 시작 명령 - npm 서버 실행
5. 무료를 클릭하고 웹 서비스 생성을 클릭합니다.
6. 서버가 배포됩니다. 배포 상태가 라이브가 될 때까지 기다리십시오.
7. 환경으로 이동하십시오. 키에 OpenAI_API_Key를 입력하고 값에 9단계에서 생성한 비밀 API 키를 입력합니다.
8. 이제 웹 주소가 생겼습니다. script.js 파일에 추가하십시오. 그런 다음 VS 코드에서 script.js 파일로 이동하여 아래 언급된 코드의 웹 주소를 렌더링된 웹 사이트의 새 웹 주소로 바꿉니다.
   const 응답 = 가져오기 대기(' http://localhost: 8001/'const 응답 = 가져오기 대기(' https://chatgptapp-lswi.onrender.com/'
9. 에 VS 코드 터미널, 다음 명령을 하나씩 입력하고 모든 명령 다음에 Enter 키를 누릅니다. 자식 추가.git commit -m '서버 URL 업데이트'자식 푸시

16. 프런트 엔드 배포

1. 베르셀 홈페이지 바로가기.
2. 딸깍 하는 소리 배포 시작.
3. 아래에 Git 리포지토리 가져오기, 클릭 GitHub로 계속하기.
4. 당신의 GitHub 사용자 이름 리포지토리 이름을 선택하고 클릭 수입.
5. 아래에 프로젝트 구성, 이름을 선택합니다.
6. 변경 루트 디렉토리 ~에서 / 에게 고객, 클릭 계속하다 그리고 배포.
7. 대시보드로 돌아가서 클릭 방문하다.
8. 이제 응용 프로그램을 볼 수 있습니다.

기기에 로컬로 ChatGPT 앱을 설치하는 자세한 단계는 다음과 같습니다. 어딘가에 갇혀 있습니까? 아래 의견 섹션에 질문이나 우려 사항을 언급하십시오.