Installeer de ChatGPT-app lokaal: waarom en hoe u dit moet doen

ChatGPT is ontworpen om snelle antwoorden op uw vragen te bieden. U heeft online toegang tot ChatGPT; Als u echter liever de app installeert, kan deze handleiding u helpen.

We bespreken de stapsgewijze methode om de ChatGPT-app lokaal te installeren, zodat u deze kunt gebruiken om snellere reacties te krijgen met meer privacy.

Waarom de ChatGPT-app lokaal installeren?

Er zijn verschillende voordelen verbonden aan het installeren van het AI-model op uw computer, waarvan er enkele hier worden genoemd:

• Snel en responsief - U kunt het rechtstreeks op uw apparaat uitvoeren. Dit betekent dat de app de processor en het geheugen van het apparaat gebruikt, wat efficiënter zal werken dan wanneer u op de externe server werkt.
• Verhoogde privacy en veiligheid - Door de app lokaal te gebruiken, verbetert u de privacy en veiligheid van uw privégegevens. De gegevens worden niet langer overgedragen van uw apparaat naar een externe server.
• Aanpasbaar - Door de app lokaal te installeren, kunt u de app aanpassen aan uw voorkeuren en vereisten. U kunt de gebruikersinterface, app-functies en meer wijzigen.
• U hoeft geen downtime onder ogen te zien – Als de app lokaal is geïnstalleerd, hoeft u niet opnieuw in te loggen of te wachten tot de server reageert als deze bezet is. Dus geen downtime.

Hoe kan ik de ChatGPT-app lokaal installeren?

Voordat u stappen onderneemt om de ChatGPT-app lokaal te installeren, kunt u overwegen de volgende controles uit te voeren:

• Installeer eerst de Node.js-extensie op VS-code.
• Haal vervolgens de Git-extensie op VS-code.

1. Maak een map en open deze in Visual Studio Code

1. Klik met de rechtermuisknop op de lege ruimte op het bureaublad, selecteer Nieuw, Dan Map.
2. Hernoem de map als Open_AI_ChatGPT app.
3. druk de ramen sleutel type Visual Studio-codeen klik Open.
4. Ga naar de Bestand menu en selecteer Open folder.
5. Kies de map en klik Selecteer map.
6. Ga vervolgens naar de Weergave menu en selecteer Terminal.

2. Controleer of Node.js is geïnstalleerd

1. Typ de volgende code om te controleren of u node.js hebt geïnstalleerd en druk op Enter: knooppunt -v
2. Als er een fout optreedt, gaat u verder met de volgende stap.
3. Ga naar de Node.js-website en download Node.js
4. Dubbelklik om het installatiebestand te openen. Klik Volgende.
5. Accepteer nu alle voorwaarden en klik Volgende.
6. Klik Volgende op alle volgende vensters en klik vervolgens op Installeren om de installatie te starten.
7. Herstart nu Visual Studio Code.
8. Als u klaar bent, keert u terug naar de terminal en typt u de volgende code om een Vanille JavaScript-repositoryen druk op Enter: npm maken [e-mail beveiligd] client --template vanille
9. Typ vervolgens Y en druk op Enter.
10. Selecteer Vanille als het raamwerk wanneer daarom wordt gevraagd.
11. Selecteer javascript als een variant wanneer daarom wordt gevraagd. U zult veel bestanden en mappen zien die zijn gemaakt in de app-map Open_AI_ChatGPT.

3. Afhankelijkheden installeren

1. Typ de volgende opdracht om de clientdirectory te openen en druk op Enter: cd .\client\
2. Kopieer en plak vervolgens de volgende opdracht en druk op Enter: npm installeren
3. Ga naar deze link en download de gecomprimeerde map met de naam assets.
4. Kopieer nu de uitgepakte activamap naar de clientmap.
5. Verwijder vervolgens de bestanden vite.svg en counter.js.
6. Verplaats ten slotte de favicon-bestand van de activa map naar de openbaar map.

4. Schrijf code in style.css

1. Kopieer en plak de onderstaande code zoals deze in de map style.css staat:
   @import-url(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[e-mail beveiligd];300;400;500;700;800;900&display=ruil");
* {
 marge: 0;
 opvulling: 0;
 doosmaat: randdoos;
 lettertypefamilie: "Alegreya Sans", schreefloos;
}
lichaam {
achtergrond: #343541;
}
#app {
breedte: 100vw;
hoogte: 100vh;
achtergrond: #343541;
weergeven: flex;
flex-richting: kolom;
items uitlijnen: centreren;
rechtvaardigen-inhoud: spatie tussen;
}
#chat_container {
flex: 1;
breedte: 100%;
hoogte: 100%;
overloop-y: scroll;
weergeven: flex;
flex-richting: kolom;
tussenruimte: 10px;
-ms-overflow-stijl: geen;
schuifbalkbreedte: geen;
opvulling-bodem: 20px;
scroll-gedrag: glad;
}
/* verbergt schuifbalk */
#chat_container::-webkit-schuifbalk {
Geen weergeven;
}
.wikkel {
breedte: 100%;
opvulling: 15px;
}
.ai {
achtergrond: #40414F;
}
.chatten {
breedte: 100%;
maximale breedte: 1280px;
marge: 0 automatisch;
 weergeven: flex;
flex-richting: rij;
align-items: flex-start;
tussenruimte: 10px;
}
.profiel {
breedte: 36px;
hoogte: 36px;
grensstraal: 5px;
achtergrond: #5436DA;
weergeven: flex;
rechtvaardigen-inhoud: centrum;
items uitlijnen: centreren;
}
.ai .profiel {
achtergrond: #10a37f;
}
.profiel img {
breedte: 60%;
hoogte: 60%;
object-fit: bevatten;
}
.bericht {
flex: 1;
kleur: #dcdcdc;
lettergrootte: 20px;
maximale breedte: 100%;
overloop-x: scrollen;
/*
* witruimte verwijst naar alle spaties, tabs of newline-tekens die worden gebruikt om de CSS-code op te maken
* specificeert hoe witruimte binnen een element moet worden behandeld. Het is vergelijkbaar met de "pre"-waarde, die de browser vertelt om alle witruimte als significant te behandelen en deze exact te behouden zoals deze in de broncode wordt weergegeven.
* Met de pre-wrap-waarde kan de browser indien nodig lange regels tekst over meerdere regels laten lopen.
* De standaardwaarde voor de witruimte-eigenschap in CSS is "normaal". Dit vertelt de browser om meerdere witruimtetekens samen te vouwen tot een enkele spatie, en om tekst op meerdere regels te plaatsen als dat nodig is om in de container te passen.
*/
witruimte: pre-wrap;
-ms-overflow-stijl: geen;
schuifbalkbreedte: geen;}
/* verbergt schuifbalk */
.message::-webkit-schuifbalk {
Geen weergeven;
}
formulier {
breedte: 100%;
maximale breedte: 1280px;
marge: 0 automatisch;
opvulling: 10px;
achtergrond: #40414F;
weergeven: flex;
flex-richting: rij;
tussenruimte: 10px;
}
tekstgebied {
breedte: 100%;
kleur: #fff;
lettergrootte: 18px;
opvulling: 10px;
achtergrond: transparant;
grensstraal: 5px;
rand: geen;
overzicht: geen;
}
knop {
overzicht: 0;
rand: 0; cursor: aanwijzer;
achtergrond: transparant;
}
vorm img {
breedte: 30px;
hoogte: 30px;
}

5. Schrijf code in Index.html

1. Typ de volgende code in het bestand index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Druk op Ctrl + S om het script op te slaan.
3. Ga naar het linkerdeelvenster van Visual Studio Code en hernoem main.js naar script.js.

6. Voer opdrachten uit op de terminal

1. Ga naar de terminal en druk op Ctrl + C om te zien waar je commando's zou schrijven. Je zou in de klantenmap moeten zijn. Zo niet, typ dan de volgende opdracht en druk op Enter: cd-client
2. Typ de volgende opdracht en druk op Enter: npm run dev
3. U krijgt een webadres om te zien hoe het er tot nu toe uitziet. Als u de fout krijgt die in de schermafbeelding wordt vermeld, gaat u verder.

7. Schrijf code in het bestand script.js

1. Verwijder de inhoud in het bestand script.js en kopieer en plak de volgende code:
   bot importeren uit './assets/bot.svg'
   gebruiker importeren uit './assets/user.svg'
   const formulier = document.querySelector('formulier');
   const chatContainer = document.querySelector('#chat_container');
   laat loadInterval;
   functielader (element) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // Werk de tekstinhoud van de laadindicator bij
   element.textContent += '.';
   // Als de laadindicator drie punten heeft bereikt, stelt u deze opnieuw in
   als (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   functie typeText (element, tekst) {
   laat index = 0;
   laat interval = setInterval(() => {
   als (index < tekst.lengte) {
   element.innerHTML += tekst.charAt (index);
   index++;
   } anders {
   clearInterval (interval);
   }
   }, 20)
   }
   functie createUniqueId() {
   const tijdstempel = Datum.nu();
   const randomNumber = Math.willekeurig();
   const hexadecimalString = randomNumber.toString (16);
   retourneer `id-${tijdstempel}-${hexadecimale tekenreeks}`;
   }
   functie chatStripe (isAi, waarde, uniqueId) {
   opbrengst (
   `
   
   
   

   
   

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

   
   

   ${waarde}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = asynchroon (e) => {
   e.preventDefault();
   const data = nieuwe FormData (formulier);
   // de chatstrip van de gebruiker
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // om de invoer in het tekstgebied te wissen
   formulier.reset();
   // chatstrip van de bot
   const uniqueId = createUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // om te focussen scroll naar beneden
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // specifiek bericht div
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   lader (berichtDiv);
   const-antwoord = wachten op ophalen (' http://localhost: 8001/', {
   methode: 'POST',
   koppen: {
   'Content-Type': 'application/json'
   },
   body: JSON.stringify({
   prompt: data.get('prompt')
   })
   })
   clearInterval (laadinterval);
   messageDiv.innerHTML = '';
   als (antwoord.ok) {
   const data = wacht op respons.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } anders {
   const err = wacht op antwoord.tekst();
   messageDiv.innerHTML = "Er ging iets mis";
   waarschuwing (err);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   als (e.keyCode 13) {
   handvatVerzenden (e);
   }
   })
2. Druk vervolgens op Ctrl + S om het script op te slaan.

8. Maak een nieuwe map aan in de Open_AI_ChatGPT app-map en installeer modules

1. Maak een map aan in het Open_AI_ChatGPT-app map en geef deze een naam Server.
2. Open Terminal en druk op Ctrl + C om de actieve app te stoppen.
3. Typ de volgende opdracht en druk op Enter om uit de map Client te komen: cd..
4. Kopieer en plak de volgende opdracht om het Server map en druk op Enter: cd-server
5. Typ de volgende opdracht en druk op Enter om een ​​package.json-bestand in de servermap te genereren: npm begin -y
6. Om afhankelijkheden te installeren, typt u de volgende opdracht en drukt u op Enter. Hiermee wordt een nieuw bestand met de naam package-lock.json gemaakt: npm install cors dotenv express nodemon openai

9. Genereer de API-sleutel en vermeld deze in .env

1. Ga naar de API-website openen en log in.
2. Klik nu Persoonlijk en selecteer Bekijk API-sleutels.
3. Klik Nieuwe geheime sleutel maken en kopieer de sleutel.
4. In de server map, maak een nieuw bestand aan en geef het een naam .env.
5. In de .env typ de volgende code nadat je de API-sleutel hebt vervangen door de sleutel die je van de Open API-website hebt gekopieerd en druk op Enter: OPENAI_API_KEY="De API-sleutel"

10. Maak een nieuw bestand server.js en schrijf een script

1. Maak een nieuw bestand in de servermap en hernoem het server.js.
2. Kopieer en plak het volgende script in dit bestand en druk op Ctrl+S om het bestand op te slaan:

importeer expres van 'express';
importeer * als dotenv van 'dotenv';
cors importeren uit 'cors';
importeer {Configuratie, OpenAIApi} van 'openai';
dotenv.config();
const configuratie = nieuwe configuratie({
apiKey: proces.env. OPENAI_API_KEY,
});
const openai = nieuwe OpenAIApi (configuratie);
const app = express();
app.gebruik (cors());
app.gebruik (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
bericht: 'Hallo van GPT!',
})
});
app.post('/', async (req, res) => {
poging {
const prompt = req.body.prompt;
const-antwoord = wacht op openai.createCompletion({
model: "tekst-davinci-003",
prompt: `${prompt}`,
temperatuur: 0, // Hogere waarden betekenen dat het model meer risico's zal nemen.
max_tokens: 3000, // Het maximale aantal tokens dat tijdens de voltooiing kan worden gegenereerd. De meeste modellen hebben een contextlengte van 2048 tokens (behalve de nieuwste modellen, die 4096 ondersteunen).
top_p: 1, // alternatief voor bemonstering met temperatuur, kernbemonstering genoemd
frequency_penalty: 0.5, // Getal tussen -2.0 en 2.0. Positieve waarden bestraffen nieuwe tokens op basis van hun bestaande frequentie in de tekst tot nu toe, waardoor de kans kleiner wordt dat het model dezelfde regel herhaalt woordelijk.
presence_penalty: 0, // Getal tussen -2.0 en 2.0. Positieve waarden bestraffen nieuwe tokens op basis van het feit of ze tot nu toe in de tekst voorkomen, waardoor de kans groter wordt dat het model over nieuwe onderwerpen praat.
});
res.status (200).send({
bot: response.data.choices[0].text
});
} vangen (fout) {
console.log (fout);
res.status (500).send (fout || 'Er ging iets mis');
}
});
app.listen (5000, () => console.log('AI-server gestart op http://localhost: 8001'));

11. Schrijf code in het pakket.json

1. Kopieer en plak de volgende code en druk op Ctrl + S opslaan:

{
"naam server",
"versie": "1.0.0",
"beschrijving": "",
"type": "module",
"scripts":{
"server": "nodemon-server"
},
"trefwoorden": [],
"auteur": "",
"licentie": "ISC",
"afhankelijkheden": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Test de code

1. Klik nu op het Terminal-menu op Visual Studio Code en selecteer Spilled Terminal.
2. Je hebt twee terminals; laten we ze Terminal Server en Terminal Client noemen.
3. Druk op Terminal Server op Ctrl + C. Typ de volgende opdracht om de serverdirectory te openen en druk op Enter: cd server
4. Kopieer en plak vervolgens de volgende opdracht en druk op Enter om de server uit te voeren: npm run-server
5. Klik op de gepresenteerde link en u ziet het bericht Hallo van GPT op de pagina
6. Druk nu in Terminal Client op Ctrl + C. Typ de volgende opdracht om de clientdirectory te openen en druk op Enter: cd-client
7. Kopieer en plak de volgende opdracht en druk op Enter om de client uit te voeren: npm run dev
8. Klik vervolgens op de link en typ Hallo hoe is het; je kunt zien dat de bot op zoek is naar een antwoord.

13. Installeer de Git Bash-app en configureer deze met uw GitHub-account

1. U kunt deze stap overslaan als u deze al hebt geconfigureerd. Download de Git Bash-app.
2. Log in op uw GitHub-account.
3. Sla het tijdens de installatie op in de map Open_AI_ChatGPT.
4. Druk vervolgens op de Windows-toets, typ bewerk de systeemomgevingsvariabelen en klik op Openen.
5. Dubbelklik op het pad en klik op Bewerken.
6. Voeg hier het pad van het git-bestand toe en klik vervolgens op OK en OK.
7. Start Git Bash, typ de volgende opdracht nadat je de gebruikersnaam hebt vervangen door de gebruikersnaam van je GitHub-account en druk op Enter: git config --global gebruikersnaam "gebruikersnaam"
8. Kopieer en plak de volgende opdracht nadat u het e-mailadres hebt vervangen door uw e-mailadres en druk op Enter: git config --global user.email "e-mailadres"
9. Ga naar het GitHub-account, klik op de vervolgkeuzepijl en selecteer Instellingen. Ga nu naar Instellingen voor ontwikkelaars.
10. Vouw Persoonlijke toegangstokens uit en selecteer Fijnmazige tokens. Klik op Nieuw token genereren.
11. Hernoem het en selecteer de geldigheid. Kopieer vervolgens het token en sla het op in een kladblok.
12. Typ de volgende opdrachten één voor één en druk op Enter: git config --global credential.helper wincredgit credential-manager-core configureren
13. Volg de aanwijzingen om het te configureren en plak het gegenereerde token wanneer u om uw wachtwoord wordt gevraagd.
14. Sluit de Git Bash-app.

14. Maak een repository en publiceer code

14.1 Maak een repository aan

1. Log in op uw GitHub-account.
2. Zoek de vervolgkeuzepijl naast je profielfoto en selecteer Uw opslagplaatsen.
3. Klik Nieuw.
4. Typ de Naam opslagplaats, selecteer Openbaaren klik Opslagplaats maken.
5. Ga naar VS-code, druk op Ctrl + Cen zorg ervoor dat u zich in de Open_AI_ChatGPT-app of de hoofdmap bevindt. Zo niet, typ dan de volgende code en druk op Enter: CD
6. Dan, in de server map, voeg een nieuw bestand toe en geef het een naam .gitignore.
7. In de .gitignore bestand, typt u de volgende code om er zeker van te zijn .env En knooppunt_modules worden niet naar binnen geduwd GitHub:
   .env
knooppunt_modules

14.2 Publiceer uw code op de repository

1. Ga naar VS-code, kopieer en plak de volgende commando's een voor een en druk na elk commando op Enter: git begingit commit -m "eerste commit"git tak -M hoofd
2. Typ de volgende opdracht na het vervangen van de https://github.com/SrishtiSisodia/CHAT-BOT-APP met uw repository-adres vermeld op GitHub:
   git externe bron toevoegen https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Typ nu de volgende opdracht om de code te pushen en druk op Enter: git push -u oorsprong main
4. Laad uw GitHub-pagina opnieuw en uw code wordt daar geüpload.
5. Druk op VS-code Ctrl + C op zowel Terminal Server als Terminal Client om te voorkomen dat ze worden uitgevoerd.

15. Implementeer de server

1. Ga naar het weergeven van de website en meld u aan met GitHub.
2. U ziet het Dashboard, klik op Nieuw en selecteer vervolgens Webservices.
3. Zoek Verbind een nieuwe repository, voer de URL van uw opslag in onder de openbare Git-repository en klik op Verbinden.
4. Voeg op de volgende pagina Naam toe, selecteer de Regio, selecteer Vertakking als hoofdmap, selecteer Hoofdmap als server, kies Omgeving als Knooppunt en typ Startopdracht - voer npm-server uit
5. Klik op Gratis en klik op Webservice maken.
6. De server wordt ingezet; wacht tot de implementatiestatus Live is.
7. Ga naar Omgeving; typ bij Sleutel OpenAI_API_Key en typ bij waarde de geheime API-sleutel die u in stap 9 hebt gegenereerd.
8. Je hebt nu een webadres; voeg het toe aan het bestand script.js. Ga vervolgens in VS-code naar het bestand script.js en vervang het webadres in de onderstaande code door het nieuwe webadres van de weergegeven website:
   const-antwoord = wachten op ophalen (' http://localhost: 8001/'const-antwoord = wachten op ophalen (' https://chatgptapp-lswi.onrender.com/'
9. Op de VS-code Terminal, typ de volgende opdrachten één voor één in en druk na elke opdracht op Enter: git toevoegen.git commit -m 'update de server-URL'git push

16. Implementeer de front-end

1. Ga naar de Vercel-website.
2. Klik Begin met implementeren.
3. Onder Git-opslagplaats importeren, Klik Ga verder met GitHub.
4. Typ jouw GitHub-gebruikersnaam en selecteer de repositorynaam en klik Importeren.
5. Onder Project configureren, selecteer een naam.
6. Verander de hoofdmap van / naar cliënt, Klik Doorgaan En Aanwenden.
7. Ga terug naar je dashboard en klik Bezoek.
8. U kunt nu de toepassing zien.

Dit zijn dus de gedetailleerde stappen om de ChatGPT-app lokaal op uw apparaat te installeren. Zit je ergens vast? Vermeld uw vragen of opmerkingen in de opmerkingen hieronder.