Instalați aplicația ChatGPT local: de ce și cum să o faceți

ChatGPT este conceput pentru a oferi răspunsuri rapide la întrebările dvs. Puteți accesa ChatGPT online; cu toate acestea, dacă preferați să instalați aplicația, acest ghid vă poate ajuta.

Vom discuta despre metoda pas cu pas pentru a instala aplicația ChatGPT la nivel local, astfel încât să o puteți folosi pentru a obține răspunsuri mai rapide, cu confidențialitate sporită.

De ce să instalați aplicația ChatGPT local?

Există mai multe beneficii ale instalării modelului AI pe computer, dintre care unele sunt menționate aici:

• Rapid și receptiv – Îl puteți rula direct pe dispozitivul dvs. Aceasta înseamnă că aplicația va folosi procesorul și memoria dispozitivului, care vor funcționa mai eficient decât atunci când lucrează pe serverul de la distanță.
• Confidențialitate și securitate sporite – Utilizarea aplicației la nivel local va îmbunătăți confidențialitatea și securitatea datelor dvs. private. Datele nu vor mai fi transferate de pe dispozitivul dvs. la un server la distanță.
• Personalizat - Instalarea aplicației la nivel local vă va permite să personalizați aplicația în funcție de preferințele și cerințele dvs. Puteți schimba interfața cu utilizatorul, funcțiile aplicației și multe altele.
• Nu este nevoie să te confrunți cu timpul de nefuncționare – Dacă aplicația este instalată local, nu va trebui să vă conectați din nou sau să așteptați ca serverul să răspundă dacă este ocupat. Prin urmare, fără timp de nefuncționare.

Cum pot instala aplicația ChatGPT local?

Înainte de a începe pașii pentru a instala aplicația ChatGPT la nivel local, ar trebui să luați în considerare efectuarea următoarelor verificări:

• Mai întâi, instalați extensia Node.js pe codul VS.
• Apoi, obțineți extensia Git pe codul VS.

1. Creați un folder și deschideți-l în Visual Studio Code

1. Faceți clic dreapta pe spațiul gol de pe desktop, selectați Nou, apoi Pliant.
2. Redenumiți folderul ca Deschide_AI_ChatGPT aplicația.
3. apasă pe Windows cheie, tastați Codul Visual Studio, și faceți clic Deschis.
4. Du-te la Fişier meniu și selectați Deschideți folderul.
5. Alegeți folderul și faceți clic Selectați Folder.
6. Apoi, mergeți la Vedere meniu și selectați Terminal.

2. Verificați dacă Node.js este instalat

1. Tastați următorul cod pentru a verifica dacă aveți instalat node.js și apăsați Enter: nodul -v
2. Dacă vine cu o eroare, continuați cu pasul următor.
3. Du-te la Site-ul web Node.js și descărcați Node.js
4. Faceți dublu clic pentru a deschide fișierul de instalare. Clic Următorul.
5. Acum acceptați toți termenii și condițiile și faceți clic Următorul.
6. Clic Următorul în toate ferestrele următoare, apoi faceți clic Instalare pentru a iniția instalarea.
7. Acum reporniți Visual Studio Code.
8. După ce ați terminat, reveniți la terminal, tastați următorul cod pentru a crea un Depozitul JavaScript Vanillași apăsați Enter: npm create [email protected] client --template vanilla
9. Apoi, tastați Y și apăsați Enter.
10. Selectați Vanilie ca cadru atunci când vi se solicită.
11. Selectați JavaScript ca variantă la întrebarea. Veți vedea multe fișiere și foldere create în folderul aplicației Open_AI_ChatGPT.

3. Instalați dependențe

1. Tastați următoarea comandă pentru a intra în directorul clientului și apăsați Enter: cd .\client\
2. Apoi, copiați și lipiți următoarea comandă și apăsați Enter: instalare npm
3. Accesați acest link și descărcați folderul arhivat numit assets.
4. Acum copiați folderul cu active extrase în folderul client.
5. Apoi, eliminați fișierele vite.svg și counter.js.
6. În cele din urmă, mutați fișierul favicon de la active folderul către public pliant.

4. Scrieți codul în style.css

1. Copiați și inserați codul menționat mai jos așa cum este în folderul style.css:
   @import URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[email protected];300;400;500;700;800;900&display=swap");
* {
 marja: 0;
 umplutură: 0;
 dimensionare cutie: chenar-cutie;
 familia de fonturi: "Alegreya Sans", sans-serif;
}
corp {
fundal: #343541;
}
#aplicație {
latime: 100vw;
inaltime: 100vh;
fundal: #343541;
display: flex;
flex-direcție: coloană;
alinierea elementelor: centru;
justificare-conținut: spațiu-între;
}
#chat_container {
flex: 1;
latime: 100%;
inaltime: 100%;
overflow-y: scroll;
display: flex;
flex-direcție: coloană;
decalaj: 10px;
-ms-overflow-style: niciunul;
scrollbar-width: niciunul;
umplutură-partea inferioară: 20px;
comportament de parcurgere: neted;
}
/* ascunde bara de derulare */
#chat_container::-webkit-scrollbar {
afișaj: niciunul;
}
.wrapper {
latime: 100%;
umplutură: 15px;
}
.ai {
fundal: #40414F;
}
.conversație {
latime: 100%;
lățime maximă: 1280px;
marja: 0 auto;
 display: flex;
flex-direcție: rând;
align-items: flex-start;
decalaj: 10px;
}
.profil {
lățime: 36px;
înălțime: 36px;
chenar-rază: 5px;
fundal: #5436DA;
display: flex;
justificare-conținut: centru;
alinierea elementelor: centru;
}
.ai .profil {
fundal: #10a37f;
}
.profile img {
latime: 60%;
inaltime: 60%;
obiect-potrivire: conţine;
}
.message {
flex: 1;
culoare: #dcdcdc;
dimensiunea fontului: 20px;
latime maxima: 100%;
overflow-x: defilare;
/*
* spațiul alb se referă la orice spații, file sau caractere newline care sunt folosite pentru a formata codul CSS
* specifică modul în care trebuie tratat spațiul alb dintr-un element. Este similar cu valoarea „pre”, care îi spune browserului să trateze toate spațiile albe ca fiind semnificative și să-l păstreze exact așa cum apare în codul sursă.
* Valoarea pre-wrap permite browserului să încapsuleze linii lungi de text pe mai multe rânduri, dacă este necesar.
* Valoarea implicită pentru proprietatea spațiilor albe în CSS este „normală”. Acest lucru îi spune browserului să restrângă mai multe caractere cu spații albe într-un singur spațiu și să împacheteze textul pe mai multe linii după cum este necesar pentru a se încadra în containerul său.
*/
spatiu alb: pre-wrap;
-ms-overflow-style: niciunul;
lățimea barei de derulare: niciuna;}
/* ascunde bara de derulare */
.message::-webkit-scrollbar {
afișaj: niciunul;
}
formular {
latime: 100%;
lățime maximă: 1280px;
marja: 0 auto;
umplutură: 10px;
fundal: #40414F;
display: flex;
flex-direcție: rând;
decalaj: 10px;
}
textarea {
latime: 100%;
culoare: #fff;
dimensiunea fontului: 18px;
umplutură: 10px;
fundal: transparent;
chenar-rază: 5px;
chenar: niciunul;
contur: niciunul;
}
butonul {
contur: 0;
chenar: 0; cursor: pointer;
fundal: transparent;
}
formular img {
lățime: 30px;
înălțime: 30px;
}

5. Scrieți codul în Index.html

1. Introdu următorul cod în fișierul index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Apăsați Ctrl + S pentru a salva scriptul.
3. Accesați panoul din stânga pe Visual Studio Code și redenumiți main.js în script.js.

6. Rulați comenzi pe terminal

1. Mergeți la terminal și apăsați Ctrl + C pentru a vedea unde ai scrie comenzi. Ar trebui să fii în folderul client. Dacă nu, tastați următoarea comandă și apăsați Enter: client cd
2. Tastați următoarea comandă și apăsați Enter: npm run dev
3. Veți primi o adresă web pentru a vedea cum arată până acum. Dacă primești eroarea menționată în captură de ecran, mergi mai departe.

7. Scrieți codul în fișierul script.js

1. Eliminați conținutul prezent în fișierul script.js și copiați și inserați următorul cod:
   import bot din „./assets/bot.svg”
   importați utilizatorul din „./assets/user.svg”
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   lasă încărcareInterval;
   function loader (element) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // Actualizați conținutul text al indicatorului de încărcare
   element.textContent += '.';
   // Dacă indicatorul de încărcare a atins trei puncte, resetați-l
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   function typeText (element, text) {
   fie indice = 0;
   lasă interval = setInterval(() => {
   if (index < text.length) {
   element.innerHTML += text.charAt (index);
   index++;
   } altfel {
   clearInterval (interval);
   }
   }, 20)
   }
   funcția generateUniqueId() {
   const timestamp = Date.now();
   const randomNumber = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   returnează `id-${timestamp}-${hexazecimalString}`;
   }
   funcția chatStripe (isAi, value, uniqueId) {
   întoarcere (
   `
   
   
   

   
   

   
   src=${isAi? bot: utilizator}
   alt="${isAi? „bot”: „utilizator”}”
   />
   

   
   

   ${value}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = asincron (e) => {
   e.preventDefault();
   const data = new FormData (form);
   // chatstripe al utilizatorului
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // pentru a șterge zona textului introdus
   form.reset();
   // chatstripe a botului
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe (adevărat, " ", uniqueId);
   // pentru a focaliza derulați în jos
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // mesaj specific div
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   încărcător (messageDiv);
   const response = await fetch(' http://localhost: 8001/', {
   metoda: 'POST',
   antete: {
   „Content-Type”: „application/json”
   },
   body: JSON.stringify({
   prompt: data.get('prompt')
   })
   })
   clearInterval (încărcareInterval);
   messageDiv.innerHTML = '';
   dacă (răspuns.ok) {
   const data = await response.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } altfel {
   const err = așteaptă răspuns.text();
   messageDiv.innerHTML = "Ceva a mers prost";
   alertă (eră);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   dacă (e.keyCode 13) {
   handleSubmit (e);
   }
   })
2. Apoi, apăsați Ctrl + S pentru a salva scriptul.

8. Creați un dosar nou în dosarul aplicației Open_AI_ChatGPT și instalați module

1. Creați un folder în Deschideți aplicația_AI_ChatGPT folder și denumește-l Server.
2. Deschis Terminal și apăsați Crtl + C pentru a opri aplicația care rulează.
3. Tastați următoarea comandă și apăsați Enter pentru a ieși din folderul Client: cd ..
4. Copiați și inserați următoarea comandă pentru a introduce fișierul Server director și apăsați Enter: server de cd
5. Tastați următoarea comandă și apăsați Enter pentru a genera un fișier package.json în folderul serverului: npm init -y
6. Pentru a instala dependențe, tastați următoarea comandă și apăsați Enter. Aceasta va crea un fișier nou numit package-lock.json: npm install cors dotenv express nodemon openai

9. Generați cheia API și menționați-o în .env

1. Du-te la Deschideți site-ul API și conectați-vă.
2. Acum faceți clic Personal și selectați Vedeți cheile API.
3. Clic Creați o nouă cheie secretă și copiați cheia.
4. În Server folder, creați un fișier nou și denumiți-l .env.
5. În .env fișier, tastați următorul cod după ce ați înlocuit Cheia API cu cheia pe care ați copiat-o de pe site-ul web Open API și apăsați Enter: OPENAI_API_KEY="Cheia API"

10. Creați un nou fișier server.js și scrieți un script

1. Creați un fișier nou în folderul server și redenumiți-l server.js.
2. Copiați și lipiți următorul script în interiorul acestui fișier și apăsați Ctrl+S pentru a salva fișierul:

import express din „express”;
import * ca dotenv din 'dotenv';
import cors din 'cors';
import { Configuration, OpenAIApi } din 'openai';
dotenv.config();
const configuration = configurație nouă ({
apiKey: process.env. OPENAI_API_KEY,
});
const openai = nou OpenAIApi (configurare);
const app = expres();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
mesaj: „Bună ziua de la GPT!”,
})
});
app.post('/', asincron (req, res) => {
încerca {
const prompt = req.body.prompt;
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: `${prompt}`,
temperatura: 0, // Valori mai mari înseamnă că modelul își va asuma mai multe riscuri.
max_tokens: 3000, // Numărul maxim de jetoane de generat la finalizare. Majoritatea modelelor au o lungime de context de 2048 de jetoane (cu excepția celor mai noi modele, care acceptă 4096).
top_p: 1, // alternativă la eșantionarea cu temperatură, numită eșantionare de nucleu
frecvență_penalizare: 0,5, // Număr între -2,0 și 2,0. Valorile pozitive penalizează noile jetoane pe baza frecvența lor existentă în text până acum, scăzând probabilitatea modelului de a repeta aceeași linie pe cuvânt.
prezență_penalty: 0, // Număr între -2,0 și 2,0. Valorile pozitive penalizează noile jetoane în funcție de faptul dacă acestea apar în text până acum, crescând probabilitatea modelului de a vorbi despre noi subiecte.
});
res.status (200).send({
bot: response.data.choices[0].text
});
} prinde (eroare) {
console.log (eroare);
res.status (500).send (eroare || „Ceva a mers prost”);
}
});
app.listen (5000, () => console.log('Serverul AI a pornit pe http://localhost: 8001'));

11. Scrieți codul în package.json

1. Copiați și lipiți următorul cod și apăsați Ctrl + S a salva:

{
"nume": "server",
"versiunea": "1.0.0",
"Descriere": "",
"tip": "modul",
"scripturi":{
"server": "server nodemon"
},
"Cuvinte cheie": [],
"autor": "",
"license": "ISC",
„dependențe”: {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
„express”: „^4.18.2”,
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Testați codul

1. Acum, faceți clic pe meniul Terminal din Visual Studio Code și selectați Spilled Terminal.
2. Veți avea două terminale; să le numim Terminal Server și Terminal Client.
3. Pe Terminal Server, apăsați Ctrl + C. Tastați următoarea comandă pentru a intra în directorul serverului și apăsați Enter: cd server
4. Apoi, copiați și inserați următoarea comandă și apăsați Enter pentru a rula serverul: server de rulare npm
5. Faceți clic pe linkul prezentat și veți vedea mesajul Salut de la GPT pe pagină
6. Acum, pe Terminal Client, apăsați Ctrl + C. Tastați următoarea comandă pentru a intra în directorul clientului și apăsați Enter: client cd
7. Copiați și inserați următoarea comandă și apăsați Enter pentru a rula clientul: npm run dev
8. Apoi, faceți clic pe link și tastați Salut ce mai faceţi; puteți vedea că botul caută un răspuns.

13. Instalați aplicația Git Bash și configurați-o cu contul dvs. GitHub

1. Puteți sări peste acest pas dacă îl aveți deja configurat. Descărcați aplicația Git Bash.
2. Conectați-vă la dvs cont GitHub.
3. În momentul instalării, salvați-l în folderul Open_AI_ChatGPT.
4. Apoi, apăsați tasta Windows, tastați editați variabilele de mediu ale sistemului și faceți clic pe Deschidere.
5. Faceți dublu clic pe Cale și faceți clic pe Editare.
6. Adăugați aici calea fișierului git, apoi faceți clic pe OK și OK.
7. Lansați Git Bash, tastați următoarea comandă după ce ați înlocuit numele de utilizator cu numele de utilizator al contului dvs. GitHub și apăsați Enter: git config --global user.name „nume utilizator”
8. Copiați și inserați următoarea comandă după ce ați înlocuit adresa de e-mail cu adresa dvs. de e-mail și apăsați Enter: git config --global user.email „adresă de e-mail”
9. Accesați contul GitHub, faceți clic pe săgeata drop-down și selectați Setări. Acum accesați setările pentru dezvoltatori.
10. Extindeți Jetoane de acces personal și selectați Jetoane cu granulație fină. Faceți clic pe Generați un nou token.
11. Redenumiți-l și selectați valabilitatea. Apoi, copiați jetonul și salvați-l pe un notepad.
12. Introduceți următoarele comenzi una câte una și apăsați Enter: git config --global credential.helper wincredgit credential-manager-core configure
13. Urmați instrucțiunile pentru a-l configura și inserați simbolul generat atunci când vi se solicită parola.
14. Închideți aplicația Git Bash.

14. Creați un depozit și publicați codul

14.1 Creați un depozit

1. Conectați-vă la dvs cont GitHub.
2. Localizați săgeată derulantă lângă fotografia de profil și selectați Arhivele dvs.
3. Clic Nou.
4. Tastați Numele depozitului, Selectați Public, și faceți clic Creați un depozit.
5. Accesați codul VS, apăsați Ctrl + Cși asigurați-vă că vă aflați în aplicația Open_AI_ChatGPT sau în folderul rădăcină. Dacă nu, introduceți următorul cod și apăsați Enter: CD
6. Apoi, în Server folder, adăugați un fișier nou și denumiți-l .gitignore.
7. În .gitignore fișier, tastați următorul cod pentru a vă asigura .env și module_noduri nu sunt împinse înăuntru GitHub:
   .env
module_noduri

14.2 Publicați codul dvs. în depozit

1. Accesați codul VS, copiați și lipiți următoarele comenzi una câte una și apăsați Enter după fiecare comandă: git initgit commit -m "prima comitere"git branch -M main
2. Tastați următoarea comandă după înlocuirea fișierului https://github.com/SrishtiSisodia/CHAT-BOT-APP cu adresa dvs. de depozit menționată pe GitHub:
   git remote adaugă origine https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Acum, pentru a împinge codul, tastați următoarea comandă și apăsați Enter: git push -u origin main
4. Reîncărcați pagina GitHub și codul dvs. va fi încărcat acolo.
5. Pe codul VS, apăsați Ctrl + C atât pe Terminal Server, cât și pe Terminal Client pentru a le opri să ruleze.

15. Implementați serverul

1. Mergeți pentru a reda site-ul web și înscrieți-vă folosind GitHub.
2. Veți vedea tabloul de bord, faceți clic pe Nou, apoi selectați Servicii web.
3. Găsiți Conectați un nou depozit, introduceți adresa URL a spațiului de stocare în depozitul Public Git și faceți clic pe Conectare.
4. Pe pagina următoare, adăugați Nume, selectați Regiunea, selectați Ramura ca principală, selectați Director rădăcină ca server, alegeți Mediu ca nod și tastați Start Command - rulați serverul npm
5. Faceți clic pe Free și faceți clic pe Create Web Service.
6. Serverul va fi implementat; așteptați până când starea de implementare este Live.
7. Accesați Mediu; pentru Cheie, tastați OpenAI_API_Key, iar pentru valoare, introduceți cheia API secretă pe care ați generat-o la pasul 9.
8. Acum veți avea o adresă web; adăugați-l în fișierul script.js. Apoi, pe codul VS, accesați fișierul script.js și înlocuiți adresa web din codul menționat mai jos cu noua adresă web de pe site-ul redat:
   const response = await fetch(' http://localhost: 8001/'const response = await fetch(' https://chatgptapp-lswi.onrender.com/'
9. Pe Terminalul cod VS, tastați următoarele comenzi una câte una și apăsați Enter după fiecare comandă: git add.git commit -m „actualizează adresa URL a serverului”git push

16. Instalați partea frontală

1. Accesați site-ul Vercel.
2. Clic Începeți implementarea.
3. Sub Importați depozitul Git, faceți clic Continuați cu GitHub.
4. Tipul tau Nume de utilizator GitHub și selectați numele depozitului și faceți clic Import.
5. Sub Configurați proiectul, selectați un nume.
6. Schimba directorul rădăcină din / la client, faceți clic Continua și Implementează.
7. Reveniți la tabloul de bord și faceți clic Vizita.
8. Acum puteți vedea aplicația.

Deci, aceștia sunt pașii detaliați pentru a instala aplicația ChatGPT local pe dispozitivul dvs. Blocat undeva? Vă rugăm să menționați întrebările sau preocupările dumneavoastră în secțiunea de comentarii de mai jos.