Installer ChatGPT-appen lokalt: hvorfor og hvordan du gjør det

ChatGPT er designet for å gi raske svar på dine spørsmål. Du kan få tilgang til ChatGPT online; men hvis du foretrekker å installere appen, kan denne veiledningen hjelpe.

Vi vil diskutere trinn-for-trinn-metoden for å installere ChatGPT-appen lokalt slik at du kan bruke den til å få raskere svar med økt personvern.

Hvorfor installere ChatGPT-appen lokalt?

Det er flere fordeler med å installere AI-modellen på datamaskinen din, noen av dem er nevnt her:

• Rask og responsiv – Du kan kjøre den direkte på enheten din. Dette betyr at appen vil bruke enhetens prosessor og minne, som vil fungere mer effektivt enn når du arbeider på den eksterne serveren.
• Økt personvern og sikkerhet – Bruk av appen lokalt vil forbedre personvernet og sikkerheten til dine private data. Dataene vil ikke lenger bli overført fra enheten til en ekstern server.
• Tilpassbar – Ved å installere appen lokalt kan du tilpasse appen i henhold til dine preferanser og krav. Du kan endre brukergrensesnittet, appfunksjonene og mer.
• Ingen grunn til å møte nedetid – Hvis appen er lokalt installert, trenger du ikke logge på igjen eller vente på at serveren svarer hvis den er opptatt. Derfor ingen nedetid.

Hvordan kan jeg installere ChatGPT-appen lokalt?

Før du engasjerer deg i trinn for å installere ChatGPT-appen lokalt, bør du vurdere å utføre følgende kontroller:

• Installer først Node.js-utvidelsen på VS-kode.
• Få deretter Git-utvidelse på VS-kode.

1. Opprett en mappe og åpne den i Visual Studio Code

1. Høyreklikk på den tomme plassen på skrivebordet, velg Ny, deretter Mappe.
2. Gi mappen nytt navn til Open_AI_ChatGPT app.
3. trykk Windows nøkkel, skriv Visual Studio-kode, og klikk Åpen.
4. Gå til Fil menyen, og velg Åpne mappe.
5. Velg mappen og klikk Velg mappe.
6. Deretter går du til Utsikt menyen og velg Terminal.

2. Sjekk om Node.js er installert

1. Skriv inn følgende kode for å sjekke om du har node.js installert og trykk Enter: node -v
2. Hvis det kommer med en feil, fortsett med neste trinn.
3. Gå til Node.js nettsted og last ned Node.js
4. Dobbeltklikk for å åpne installasjonsfilen. Klikk Neste.
5. Godta alle vilkårene og vilkårene og klikk Neste.
6. Klikk Neste på alle følgende vinduer, klikk deretter Installere for å starte installasjonen.
7. Start Visual Studio Code på nytt.
8. Når du er ferdig, gå tilbake til terminalen, skriv inn følgende kode for å lage en Vanilla JavaScript-depot, og trykk Enter: npm opprette [e-postbeskyttet] klient --mal vanilje
9. Deretter skriver du Y og trykk Enter.
10. Plukke ut Vanilje som rammeverket når du blir bedt om det.
11. Plukke ut JavaScript som en variant når du blir spurt. Du vil se mange filer og mapper opprettet under Open_AI_ChatGPT-appmappen.

3. Installer avhengigheter

1. Skriv inn følgende kommando for å gå inn i klientkatalogen og trykk Enter: cd .\client\
2. Deretter kopierer og limer du inn følgende kommando og trykker Enter: npm installere
3. Gå til denne lenken og last ned den zippede mappen med navnet assets.
4. Kopier nå den utpakkede eiendelermappen til klientmappen.
5. Fjern deretter filene vite.svg og counter.js.
6. Til slutt flytter du favicon-fil fra eiendeler mappen til offentlig mappe.

4. Skriv kode i style.css

1. Kopier og lim inn koden nedenfor slik den er i style.css-mappen:
   @import url(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[e-postbeskyttet];300;400;500;700;800;900&display=swap");
* {
 margin: 0;
 polstring: 0;
 boksstørrelse: border-box;
 font-family: "Alegreya Sans", sans-serif;
}
kropp {
bakgrunn: #343541;
}
#app {
bredde: 100vw;
høyde: 100vh;
bakgrunn: #343541;
display: flex;
flex-retning: kolonne;
align-items: center;
rettferdiggjøre-innhold: mellomrom-mellom;
}
#chat_container {
bøyning: 1;
bredde: 100 %;
høyde: 100%;
overløp-y: rulle;
display: flex;
flex-retning: kolonne;
gap: 10px;
-ms-overflow-stil: ingen;
scrollbar-width: ingen;
polstring-bunn: 20px;
rulle-atferd: glatt;
}
/* skjuler rullefelt */
#chat_container::-webkit-scrollbar {
display: ingen;
}
.wrapper {
bredde: 100 %;
polstring: 15px;
}
.ai {
bakgrunn: #40414F;
}
.chat {
bredde: 100 %;
maks-bredde: 1280px;
margin: 0 auto;
 display: flex;
flex-retning: rad;
align-items: flex-start;
gap: 10px;
}
.profile {
bredde: 36px;
høyde: 36px;
kantradius: 5px;
bakgrunn: #5436DA;
display: flex;
rettferdiggjøre-innhold: senter;
align-items: center;
}
.ai .profile {
bakgrunn: #10a37f;
}
.profile img {
bredde: 60 %;
høyde: 60%;
objekttilpasning: inneholde;
}
.beskjed {
bøyning: 1;
farge: #dcdcdc;
skriftstørrelse: 20px;
maks-bredde: 100 %;
overløp-x: rulle;
/*
* mellomrom refererer til mellomrom, tabulatorer eller nylinjetegn som brukes til å formatere CSS-koden
* angir hvordan mellomrom i et element skal håndteres. Den ligner på "pre"-verdien, som forteller nettleseren å behandle alt mellomrom som signifikant og bevare det nøyaktig slik det vises i kildekoden.
* Pre-wrap-verdien lar nettleseren bryte lange linjer med tekst på flere linjer om nødvendig.
* Standardverdien for white-space-egenskapen i CSS er "normal". Dette forteller nettleseren å skjule flere mellomromstegn til et enkelt mellomrom, og å bryte tekst på flere linjer etter behov for å passe inn i beholderen.
*/
white-space: pre-wrap;
-ms-overflow-stil: ingen;
scrollbar-width: ingen;}
/* skjuler rullefelt */
.message::-webkit-scrollbar {
display: ingen;
}
form {
bredde: 100 %;
maks-bredde: 1280px;
margin: 0 auto;
polstring: 10px;
bakgrunn: #40414F;
display: flex;
flex-retning: rad;
gap: 10px;
}
textarea {
bredde: 100 %;
farge: #fff;
skriftstørrelse: 18px;
polstring: 10px;
bakgrunn: gjennomsiktig;
kantradius: 5px;
grense: ingen;
disposisjon: ingen;
}
knapp {
disposisjon: 0;
kantlinje: 0; markør: peker;
bakgrunn: gjennomsiktig;
}
form img {
bredde: 30px;
høyde: 30px;
}

5. Skriv kode i Index.html

1. Skriv inn følgende kode i index.html-filen:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Trykk Ctrl + S for å lagre skriptet.
3. Gå til venstre rute på Visual Studio Code og gi nytt navn til main.js til script.js.

6. Kjør kommandoer på terminalen

1. Gå til terminalen og trykk Ctrl + C for å se hvor du vil skrive kommandoer. Du bør være i klientmappen. Hvis ikke, skriv inn følgende kommando og trykk Enter: cd klient
2. Skriv inn følgende kommando og trykk Enter: npm kjøre dev
3. Du får en nettadresse for å se hvordan det ser ut så langt. Hvis du får feilen nevnt i skjermbildet, gå videre.

7. Skriv kode i script.js-filen

1. Fjern innholdet i script.js-filen, og kopier og lim inn følgende kode:
   importer bot fra './assets/bot.svg'
   importer bruker fra './assets/user.svg'
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   la loadInterval;
   funksjonslaster (element) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // Oppdater tekstinnholdet til lasteindikatoren
   element.textContent += '.';
   // Hvis lasteindikatoren har nådd tre prikker, tilbakestill den
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   funksjon typeTekst (element, tekst) {
   la indeks = 0;
   la intervall = setInterval(() => {
   if (indeks < text.length) {
   element.innerHTML += text.charAt (indeks);
   indeks++;
   } annet {
   clearInterval (intervall);
   }
   }, 20)
   }
   funksjon genererUniqueId() {
   const timestamp = Date.now();
   const randomNumber = Math.random();
   const heksadesimalstreng = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}`;
   }
   function chatStripe (isAi, value, uniqueId) {
   komme tilbake (
   `
   
   
   

   
   

   
   src=${isAi? bot: bruker}
   alt="${isAi? 'bot': 'bruker'}"
   />
   

   
   

   ${value}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = asynkron (e) => {
   e.preventDefault();
   const data = ny FormData (skjema);
   // brukerens chatstripe
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // for å fjerne tekstområdet
   form.reset();
   // botens chatstripe
   const uniqueId = genererUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", unik ID);
   // for å fokusere bla til bunnen
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // spesifikk melding div
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   loader (messageDiv);
   const response = avvent henting(' http://localhost: 8001/', {
   metode: 'POST',
   overskrifter: {
   'Content-Type': 'application/json'
   },
   body: JSON.stringify({
   prompt: data.get('prompt')
   })
   })
   clearInterval (loadInterval);
   messageDiv.innerHTML = '';
   if (respons.ok) {
   const data = vent response.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } annet {
   const err = vent response.text();
   messageDiv.innerHTML = "Noe gikk galt";
   varsle (feil);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   if (e.keyCode 13) {
   handleSend inn (e);
   }
   })
2. Trykk deretter Ctrl + S for å lagre skriptet.

8. Opprett en ny mappe i Open_AI_ChatGPT-appmappen og installer moduler

1. Opprett en mappe i Åpne_AI_ChatGPT-appen mappe og navngi den Server.
2. Åpen Terminal og trykk Crtl + C for å stoppe løpeappen.
3. Skriv inn følgende kommando og trykk Enter for å komme ut av klientmappen: cd..
4. Kopier og lim inn følgende kommando for å angi Server katalog og trykk Enter: cd server
5. Skriv inn følgende kommando og trykk Enter for å generere en package.json-fil i servermappen: npm init -y
6. For å installere avhengigheter, skriv inn følgende kommando og trykk Enter. Dette vil opprette en ny fil med navnet package-lock.json: npm installer cors dotenv express nodemon openai

9. Generer API-nøkkelen og nevne den i .env

1. Gå til Åpne API-nettstedet og logge inn.
2. Klikk nå Personlig og velg Se API-nøkler.
3. Klikk Opprett ny hemmelig nøkkel og kopier nøkkelen.
4. I server mappen, opprett en ny fil og navngi den .env.
5. I .env fil, skriv inn følgende kode etter å ha erstattet API-nøkkelen med nøkkelen du kopierte fra Open API-nettstedet og trykk Enter: OPENAI_API_KEY="API-nøkkelen"

10. Opprett ny fil server.js og skriv et skript

1. Opprett en ny fil i servermappen og gi den nytt navn til server.js.
2. Kopier og lim inn følgende skript i denne filen og trykk Ctrl+S for å lagre filen:

import express fra 'express';
import * som dotenv fra 'dotenv';
importere kors fra 'cors';
importer { Configuration, OpenAIApi } fra 'openai';
dotenv.config();
const konfigurasjon = ny konfigurasjon({
apiKey: process.env. OPENAI_API_KEY,
});
const openai = ny OpenAIApi (konfigurasjon);
const app = express();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
melding: 'Hei fra GPT!',
})
});
app.post('/', async (req, res) => {
prøv {
const ledetekst = req.body.prompt;
const response = avventer openai.createCompletion({
modell: "text-davinci-003",
ledetekst: `${prompt}`,
temperatur: 0, // Høyere verdier betyr at modellen vil ta mer risiko.
max_tokens: 3000, // Maksimalt antall tokens å generere i fullføringen. De fleste modellene har en kontekstlengde på 2048 tokens (bortsett fra de nyeste modellene, som støtter 4096).
top_p: 1, // alternativ til prøvetaking med temperatur, kalt kjerneprøvetaking
frequency_penalty: 0,5, // Tall mellom -2,0 og 2,0. Positive verdier straffer nye tokens basert på deres eksisterende frekvens i teksten så langt, noe som reduserer modellens sannsynlighet for å gjenta den samme linjen ordrett.
tilstedeværelsesstraff: 0, // Tall mellom -2,0 og 2,0. Positive verdier straffer nye tokens basert på om de vises i teksten så langt, noe som øker modellens sannsynlighet for å snakke om nye emner.
});
res.status (200).send({
bot: response.data.choices[0].text
});
} catch (feil) {
console.log (feil);
res.status (500).send (feil || 'Noe gikk galt');
}
});
app.listen (5000, () => console.log('AI-server startet på http://localhost: 8001'));

11. Skriv kode i package.json

1. Kopier og lim inn følgende kode og trykk Ctrl + S å redde:

{
"name": "server",
"versjon": "1.0.0",
"description": "",
"type": "modul",
"scripts":{
"server": "nodemonserver"
},
"søkeord": [],
"author": "",
"license": "ISC",
"avhengigheter": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Test koden

1. Klikk nå på Terminal-menyen på Visual Studio Code og velg Spilled Terminal.
2. Du vil ha to terminaler; la oss kalle dem Terminal Server og Terminal Client.
3. På Terminal Server, trykk Ctrl + C. Skriv inn følgende kommando for å gå inn i serverkatalogen, og trykk Enter: cd server
4. Deretter kopierer og limer du inn følgende kommando og trykker Enter for å kjøre serveren: npm kjøre server
5. Klikk på lenken som presenteres, og du vil se meldingen Hallo fra GPT på siden
6. Nå på Terminal Client, trykk Ctrl + C. Skriv inn følgende kommando for å gå inn i klientkatalogen, og trykk Enter: cd klient
7. Kopier og lim inn følgende kommando og trykk Enter for å kjøre klienten: npm kjøre dev
8. Deretter klikker du på lenken og skriver inn Hei, hvordan har du det; du kan se at boten leter etter et svar.

13. Installer Git Bash-appen og konfigurer den med GitHub-kontoen din

1. Du kan hoppe over dette trinnet hvis du allerede har det konfigurert. Last ned Git Bash-appen.
2. Logg inn på din GitHub-konto.
3. På tidspunktet for installasjonen, vennligst lagre den i mappen Open_AI_ChatGPT.
4. Deretter trykker du på Windows-tasten, skriver inn rediger systemmiljøvariablene og klikker Åpne.
5. Dobbeltklikk på banen, og klikk på Rediger.
6. Legg til banen til git-filen her, og klikk deretter OK og OK.
7. Start Git Bash, skriv inn følgende kommando etter å ha erstattet brukernavnet med brukernavnet for GitHub-kontoen din, og trykk Enter: git config --global bruker.navn "brukernavn"
8. Kopier og lim inn følgende kommando etter å ha erstattet e-postadressen med e-postadressen din og trykk Enter: git config --global user.email "e-postadresse"
9. Gå til GitHub-kontoen, klikk på rullegardinpilen og velg Innstillinger. Gå nå til utviklerinnstillinger.
10. Utvid Personlige tilgangstokener, og velg Finkornede tokens. Klikk Generer nytt token.
11. Gi det nytt navn og velg gyldigheten. Deretter kopierer du tokenet og lagrer det på en notisblokk.
12. Skriv inn følgende kommandoer en etter en og trykk Enter: git config --global credential.helper wincredgit credential-manager-core configure
13. Følg instruksjonene for å konfigurere den og lim inn tokenet som ble generert når du blir bedt om passordet ditt.
14. Lukk Git Bash-appen.

14. Opprett et depot, og publiser kode

14.1 Opprett et depot

1. Logg inn på din GitHub-konto.
2. Finn rullegardinpil ved siden av profilbildet ditt og velg Lagrene dine.
3. Klikk Ny.
4. Skriv inn Depotnavn, plukke ut Offentlig, og klikk Opprett depot.
5. Gå til VS-kode, trykk Ctrl + C, og sørg for at du er i Open_AI_ChatGPT-appen eller rotmappen. Hvis ikke, skriv inn følgende kode og trykk Enter: cd
6. Deretter, i server mappen, legg til en ny fil og navngi den .gitignore.
7. I .gitignore fil, skriv inn følgende kode for å være sikker .env og node_modules ikke presses inn GitHub:
   .env
node_modules

14.2 Publiser koden din på depotet

1. Gå til VS-kode, kopier og lim inn følgende kommandoer en etter en og trykk Enter etter hver kommando: git initgit commit -m "first commit"git gren -M main
2. Skriv inn følgende kommando etter å ha erstattet https://github.com/SrishtiSisodia/CHAT-BOT-APP med depotadressen din nevnt på GitHub:
   git remote add origin https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Nå for å trykke koden, skriv inn følgende kommando og trykk Enter: git push -u opprinnelse main
4. Last inn GitHub-siden din på nytt, og koden din vil bli lastet opp der.
5. På VS-kode, trykk Ctrl + C på både Terminal Server og Terminal Client for å stoppe dem fra å kjøre.

15. Distribuer serveren

1. Gå for å gjengi nettstedet og registrer deg med GitHub.
2. Du vil se dashbordet, klikk på Ny, og velg deretter Webtjenester.
3. Finn Koble til et nytt depot, skriv inn URL-en til lagringen din under Public Git-depotet, og klikk Koble til.
4. På neste side, legg til Navn, velg Region, velg Branch as main, velg Root Directory som server, velg Environment as Node, og skriv Start kommando - kjør npm server
5. Klikk Gratis og klikk Opprett webtjeneste.
6. Serveren vil bli distribuert; vennligst vent til distribusjonsstatusen er Live.
7. Gå til Miljø; for nøkkel, skriv inn OpenAI_API_Key, og for verdi, skriv inn den hemmelige API-nøkkelen du genererte i trinn 9.
8. Du vil nå ha en nettadresse; legg den til i script.js-filen. Deretter, på VS-kode, går du til script.js-filen og erstatter nettadressen i koden nevnt nedenfor med den nye nettadressen fra det gjengitte nettstedet:
   const response = avvent henting(' http://localhost: 8001/'const response = avvent henting(' https://chatgptapp-lswi.onrender.com/'
9. På VS-kode Terminal, skriv inn følgende kommandoer én etter én og trykk Enter etter hver kommando: git add.git commit -m 'oppdater serverens URL'git push

16. Distribuer frontenden

1. Gå til Vercel-nettstedet.
2. Klikk Begynn å distribuere.
3. Under Importer Git Repository, klikk Fortsett med GitHub.
4. Skriv din GitHub brukernavn og velg depotnavnet og klikk Import.
5. Under Konfigurer prosjekt, velg et navn.
6. Endre rotkatalogen fra / til klient, klikk Fortsette og Utplassere.
7. Gå tilbake til dashbordet og klikk Besøk.
8. Du kan nå se søknaden.

Så dette er de detaljerte trinnene for å installere ChatGPT-appen lokalt på enheten din. Sitter du fast et sted? Vennligst nevne dine spørsmål eller bekymringer i kommentarfeltet nedenfor.