Installer l'application ChatGPT localement: pourquoi et comment le faire

ChatGPT est conçu pour fournir des réponses rapides à vos questions. Vous pouvez accéder à ChatGPT en ligne; cependant, si vous préférez installer l'application, ce guide peut vous aider.

Nous discuterons de la méthode étape par étape pour installer l'application ChatGPT localement afin que vous puissiez l'utiliser pour obtenir des réponses plus rapides avec une confidentialité accrue.

Pourquoi installer l'application ChatGPT localement ?

L'installation du modèle AI sur votre ordinateur présente plusieurs avantages, dont certains sont mentionnés ici:

• Rapide et réactif - Vous pouvez l'exécuter directement sur votre appareil. Cela signifie que l'application utilisera le processeur et la mémoire de l'appareil, qui fonctionneront plus efficacement que lorsqu'ils travaillent sur le serveur distant.
• Confidentialité et sécurité accrues - L'utilisation locale de l'application améliorera la confidentialité et la sécurité de vos données privées. Les données ne seront plus transférées de votre appareil vers un serveur distant.
• Personnalisable - L'installation de l'application localement vous permettra de personnaliser l'application selon vos préférences et vos exigences. Vous pouvez modifier l'interface utilisateur, les fonctions de l'application, etc.
• Pas besoin de faire face à des temps d'arrêt - Si l'application est installée localement, vous n'aurez pas à vous reconnecter ou à attendre que le serveur réponde s'il est occupé. Donc pas de temps d'arrêt.

Comment puis-je installer l'application ChatGPT localement ?

Avant de vous lancer dans les étapes d'installation locale de l'application ChatGPT, vous devez envisager d'effectuer les vérifications suivantes :

• Tout d'abord, installez l'extension Node.js sur le code VS.
• Ensuite, obtenez l'extension Git sur le code VS.

1. Créez un dossier et ouvrez-le dans Visual Studio Code

1. Faites un clic droit sur l'espace vide du bureau, sélectionnez Nouveau, alors Dossier.
2. Renommez le dossier en tant que Open_AI_ChatGPT application.
3. appuie sur le les fenêtres type de clé Code Visual Studio, et cliquez Ouvrir.
4. Allez à la Déposer et sélectionnez Dossier ouvert.
5. Choisissez le dossier et cliquez Sélectionner le dossier.
6. Ensuite, allez à la Voir menu et sélectionnez Terminal.

2. Vérifiez si Node.js est installé

1. Tapez le code suivant pour vérifier si vous avez installé node.js et appuyez sur Entrée: nœud -v
2. S'il s'agit d'une erreur, passez à l'étape suivante.
3. Allez à la Site Web Node.js et téléchargement de Node.js
4. Double-cliquez pour ouvrir le fichier d'installation. Cliquez sur Suivant.
5. Acceptez maintenant tous les termes et conditions et cliquez sur Suivant.
6. Cliquez sur Suivant sur toutes les fenêtres suivantes, puis cliquez sur Installer pour lancer l'installation.
7. Maintenant, redémarrez Visual Studio Code.
8. Une fois cela fait, retournez au terminal, tapez le code suivant pour créer un Référentiel JavaScript vanille, et appuyez sur Entrée: npm créer [courriel protégé] client --template vanille
9. Ensuite, tapez Oui et appuyez sur Entrée.
10. Sélectionner Vanille comme cadre lorsque vous y êtes invité.
11. Sélectionner Javascript comme une variante lorsqu'on lui a demandé. Vous verrez de nombreux fichiers et dossiers créés dans le dossier de l'application Open_AI_ChatGPT.

3. Installer les dépendances

1. Tapez la commande suivante pour entrer dans le répertoire client et appuyez sur Entrée: cd .\client\
2. Ensuite, copiez et collez la commande suivante et appuyez sur Entrée: installation npm
3. Accédez à ce lien et téléchargez le dossier compressé nommé assets.
4. Copiez maintenant le dossier des actifs extraits dans le dossier client.
5. Ensuite, supprimez les fichiers vite.svg et counter.js.
6. Enfin, déplacez le fichier favicon du actifs dossier vers le public dossier.

4. Écrire du code dans style.css

1. Copiez et collez le code mentionné ci-dessous tel qu'il se trouve dans le dossier style.css:
   @importer URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[courriel protégé];300;400;500;700;800;900&display=échange");
* {
 marge: 0;
 rembourrage: 0 ;
 dimensionnement de la boîte: border-box ;
 famille de polices: "Alegreya Sans", sans empattement ;
}
corps {
arrière-plan: #343541 ;
}
#application {
largeur: 100vw ;
hauteur: 100vh ;
arrière-plan: #343541 ;
affichage: flexible ;
flex-direction: colonne ;
align-items: center ;
justifier-contenu: espace entre ;
}
#chat_container {
flexibilité: 1 ;
largeur: 100 % ;
hauteur: 100 % ;
débordement-y: défilement ;
affichage: flexible ;
flex-direction: colonne ;
espace: 10px ;
-style de débordement ms: aucun ;
largeur de la barre de défilement: aucune ;
rembourrage en bas: 20 px ;
comportement de défilement: lisse ;
}
/* masque la barre de défilement */
#chat_container::-webkit-barre de défilement {
affichage: aucun ;
}
.emballage {
largeur: 100 % ;
rembourrage: 15px ;
}
.ai {
arrière-plan: #40414F ;
}
.discuter {
largeur: 100 % ;
largeur maximale: 1 280 pixels ;
marge: 0 automatique ;
 affichage: flexible ;
flex-direction: ligne ;
align-items: flex-start ;
espace: 10px ;
}
.profil {
largeur: 36px ;
hauteur: 36px ;
rayon de bordure: 5 px ;
arrière-plan: #5436DA ;
affichage: flexible ;
justifier-contenu: centrer ;
align-items: center ;
}
.ai .profil {
arrière-plan: #10a37f ;
}
.profil img {
largeur: 60 % ;
hauteur: 60 % ;
ajustement à l'objet: contenir ;
}
.message {
flexibilité: 1 ;
couleur: #dcdcdc ;
taille de police: 20 px ;
largeur max: 100 % ;
débordement-x: défilement ;
/*
* L'espace blanc fait référence à tous les espaces, tabulations ou caractères de saut de ligne utilisés pour formater le code CSS
* spécifie comment l'espace blanc dans un élément doit être géré. Elle est similaire à la valeur "pre", qui indique au navigateur de traiter tous les espaces blancs comme significatifs et de les conserver exactement tels qu'ils apparaissent dans le code source.
* La valeur pre-wrap permet au navigateur d'envelopper de longues lignes de texte sur plusieurs lignes si nécessaire.
* La valeur par défaut de la propriété white-space en CSS est "normal". Cela indique au navigateur de réduire plusieurs caractères d'espace blanc dans un seul espace et d'envelopper le texte sur plusieurs lignes selon les besoins pour tenir dans son conteneur.
*/
espace blanc: pré-emballage ;
-style de débordement ms: aucun ;
largeur de la barre de défilement: aucune ;}
/* masque la barre de défilement */
.message ::-webkit-barre de défilement {
affichage: aucun ;
}
former {
largeur: 100 % ;
largeur maximale: 1 280 pixels ;
marge: 0 automatique ;
rembourrage: 10px ;
arrière-plan: #40414F ;
affichage: flexible ;
flex-direction: ligne ;
espace: 10px ;
}
zone de texte {
largeur: 100 % ;
couleur: #fff ;
taille de police: 18 px ;
rembourrage: 10px ;
fond: transparent ;
rayon de bordure: 5 px ;
bordure: aucune ;
contour: aucun ;
}
bouton {
contour: 0 ;
bordure: 0; curseur: pointeur ;
fond: transparent ;
}
formulaire img {
largeur: 30px ;
hauteur: 30px ;
}

5. Écrire du code dans Index.html

1. Saisissez le code suivant dans le fichier index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Appuyez sur Ctrl + S pour enregistrer le script.
3. Accédez au volet gauche de Visual Studio Code et renommez main.js en script.js.

6. Exécutez des commandes sur le terminal

1. Allez au terminal et appuyez sur Ctrl + C pour voir où vous écririez des commandes. Vous devriez être dans le dossier client. Si ce n'est pas le cas, tapez la commande suivante et appuyez sur Entrée : client cédérom
2. Tapez la commande suivante et appuyez sur Entrée: npm run dev
3. Vous obtiendrez une adresse Web pour voir à quoi cela ressemble jusqu'à présent. Si vous obtenez l'erreur mentionnée dans la capture d'écran, continuez.

7. Écrire du code dans le fichier script.js

1. Supprimez le contenu présent dans le fichier script.js, puis copiez et collez le code suivant:
   importer le bot depuis './assets/bot.svg'
   importer l'utilisateur depuis './assets/user.svg'
   formulaire const = document.querySelector('formulaire');
   const chatContainer = document.querySelector('#chat_container');
   laissez loadInterval ;
   chargeur de fonction (élément) {
   élément.textContent = '';
   loadInterval = setInterval(() => {
   // Mettre à jour le contenu textuel de l'indicateur de chargement
   élément.textContent += '.';
   // Si l'indicateur de chargement a atteint trois points, réinitialisez-le
   si (element.textContent '...') {
   élément.textContent = '';
   }
   }, 300)
   }
   function typeText (élément, texte) {
   soit indice = 0 ;
   laisser intervalle = setInterval(() => {
   si (index < text.length) {
   element.innerHTML += text.charAt (index);
   indice++ ;
   } autre {
   clearInterval (intervalle);
   }
   }, 20)
   }
   fonction générerUniqueId() {
   horodatage const = Date.maintenant();
   const nombrealéatoire = Math.aléatoire();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}` ;
   }
   fonction chatStripe (isAi, valeur, uniqueId) {
   retour (
   `
   
   
   

   
   

   
   src=${estAi? bot: utilisateur}
   alt="${estAi? 'bot': 'utilisateur'}"
   />
   

   
   

   ${valeur}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   const data = new FormData (formulaire);
   // bande de chat de l'utilisateur
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // pour effacer l'entrée textarea
   form.reset();
   // bande de chat du bot
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // pour se concentrer faites défiler vers le bas
   chatContainer.scrollTop = chatContainer.scrollHeight ;
   // div de message spécifique
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   chargeur (messageDiv);
   réponse const = attendre récupérer(' http://localhost: 8001/', {
   méthode: 'POST',
   en-têtes: {
   'Type de contenu': 'application/json'
   },
   corps: JSON.stringify({
   invite: data.get('invite')
   })
   })
   clearInterval (loadInterval);
   messageDiv.innerHTML = '';
   si (réponse.ok) {
   données const = attendre réponse.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } autre {
   const err = attendre la réponse.texte ();
   messageDiv.innerHTML = "Quelque chose s'est mal passé" ;
   alerte (erreur);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   si (e.keyCode 13) {
   handleSubmit (e);
   }
   })
2. Puis appuyez Ctrl + S pour enregistrer le script.

8. Créez un nouveau dossier dans le dossier de l'application Open_AI_ChatGPT et installez les modules

1. Créez un dossier dans le Application Open_AI_ChatGPT dossier et nommez-le Serveur.
2. Ouvrir Terminal et appuyez sur Crtl + C pour arrêter l'application en cours d'exécution.
3. Tapez la commande suivante et appuyez sur Entrée pour sortir du dossier Client: cd ..
4. Copiez et collez la commande suivante pour saisir le Serveur répertoire et appuyez sur Entrée: serveur de CD
5. Tapez la commande suivante et appuyez sur Entrée pour générer un fichier package.json dans le dossier du serveur: npm init -y
6. Pour installer les dépendances, tapez la commande suivante et appuyez sur Entrée. Cela créera un nouveau fichier nommé package-lock.json: npm installer cors dotenv express nodemon openai

9. Générez la clé API et mentionnez-la dans .env

1. Allez à la Ouvrir le site Web de l'API et connectez-vous.
2. Cliquez maintenant Personnel et sélectionnez Afficher les clés API.
3. Cliquez sur Créer une nouvelle clé secrète et copiez la clé.
4. Dans le serveur dossier, créez un nouveau fichier et nommez-le .env.
5. Dans le .env fichier, tapez le code suivant après avoir remplacé la clé API par la clé que vous avez copiée à partir du site Web Open API et appuyez sur Entrée: OPENAI_API_KEY="La clé API"

10. Créez un nouveau fichier server.js et écrivez un script

1. Créez un nouveau fichier dans le dossier du serveur et renommez-le server.js.
2. Copiez et collez le script suivant dans ce fichier et appuyez sur Ctrl+S pour enregistrer le fichier:

importer express depuis 'express' ;
importer * en tant que dotenv depuis 'dotenv' ;
importer cors depuis 'cors' ;
importer {Configuration, OpenAIApi} depuis 'openai' ;
dotenv.config();
const configuration = nouvelle Configuration({
apiKey: processus.env. OPENAI_API_KEY,
});
const openai = new OpenAIApi (configuration);
const app = express();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
message: "Bonjour de GPT !",
})
});
app.post('/', async (req, res) => {
essayer {
invite constante = req.body.prompt ;
réponse const = attendre openai.createCompletion({
modèle: "texte-davinci-003",
invite: `${invite}`,
temperature: 0, // Des valeurs plus élevées signifient que le modèle prendra plus de risques.
max_tokens: 3000, // Le nombre maximum de jetons à générer dans la complétion. La plupart des modèles ont une longueur de contexte de 2048 jetons (à l'exception des modèles les plus récents, qui prennent en charge 4096).
top_p: 1, // alternative à l'échantillonnage avec la température, appelé échantillonnage du noyau
frequency_penalty: 0,5, // Nombre compris entre -2,0 et 2,0. Les valeurs positives pénalisent les nouveaux jetons en fonction de leur fréquence existante dans le texte jusqu'à présent, ce qui diminue la probabilité que le modèle répète la même ligne textuellement.
presence_penalty: 0, // Nombre entre -2.0 et 2.0. Les valeurs positives pénalisent les nouveaux jetons en fonction de leur apparition dans le texte jusqu'à présent, ce qui augmente la probabilité que le modèle parle de nouveaux sujets.
});
res.status (200).send({
robot: response.data.choices[0].text
});
} capture (erreur) {
console.log (erreur);
res.status (500).send (erreur || 'Quelque chose s'est mal passé');
}
});
app.listen (5000, () => console.log('Le serveur AI a démarré le http://localhost: 8001'));

11. Ecrire du code dans le package.json

1. Copiez et collez le code suivant et appuyez sur Ctrl + S sauver:

{
"nom du serveur",
"version": "1.0.0",
"description": "",
"type": "module",
"scripts":{
"server": "serveur nodemon"
},
"mots clés": [],
"auteur": "",
"licence": "ISC",
"dépendances": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Testez le code

1. Maintenant, cliquez sur le menu Terminal sur Visual Studio Code et sélectionnez Terminal renversé.
2. Vous aurez deux terminaux; appelons-les Terminal Server et Terminal Client.
3. Sur Terminal Server, appuyez sur Ctrl + C. Tapez la commande suivante pour entrer dans le répertoire du serveur et appuyez sur Entrée: cd server
4. Ensuite, copiez et collez la commande suivante et appuyez sur Entrée pour lancer le serveur: serveur d'exécution npm
5. Cliquez sur le lien présenté, et vous verrez le message Bonjour de GPT sur la page
6. Maintenant sur Terminal Client, appuyez sur Ctrl + C. Tapez la commande suivante pour accéder au répertoire client et appuyez sur Entrée: client cédérom
7. Copiez et collez la commande suivante et appuyez sur Entrée pour exécuter le client: npm run dev
8. Ensuite, cliquez sur le lien et tapez Bonjour comment allez-vous; vous pouvez voir que le bot cherche une réponse.

13. Installez l'application Git Bash et configurez-la avec votre compte GitHub

1. Vous pouvez ignorer cette étape si vous l'avez déjà configurée. Téléchargez l'application GitBash.
2. Connectez-vous à votre Compte GitHub.
3. Au moment de l'installation, veuillez l'enregistrer dans le dossier Open_AI_ChatGPT.
4. Ensuite, appuyez sur la touche Windows, tapez modifier les variables d'environnement système et cliquez sur Ouvrir.
5. Double-cliquez sur le chemin, puis cliquez sur Modifier.
6. Ajoutez le chemin du fichier git ici, puis cliquez sur OK et OK.
7. Lancez Git Bash, tapez la commande suivante après avoir remplacé le nom d'utilisateur par le nom d'utilisateur de votre compte GitHub, puis appuyez sur Entrée: git config --global user.name "nom d'utilisateur"
8. Copiez et collez la commande suivante après avoir remplacé l'adresse e-mail par votre adresse e-mail et appuyez sur Entrée: git config --global user.email "adresse e-mail"
9. Accédez au compte GitHub, cliquez sur la flèche déroulante et sélectionnez Paramètres. Allez maintenant dans les paramètres du développeur.
10. Développez Jetons d'accès personnels et sélectionnez Jetons à granularité fine. Cliquez sur Générer un nouveau jeton.
11. Renommez-le et sélectionnez la validité. Ensuite, copiez le jeton et enregistrez-le sur un bloc-notes.
12. Tapez les commandes suivantes une par une et appuyez sur Entrée: git config --global credential.helper wincredconfiguration de git credential-manager-core
13. Suivez les invites pour le configurer et collez le jeton généré lorsque vous êtes invité à saisir votre mot de passe.
14. Fermez l'application Git Bash.

14. Créer un référentiel et publier le code

14.1 Créer un dépôt

1. Connectez-vous à votre Compte GitHub.
2. Localisez le flèche déroulante à côté de votre photo de profil et sélectionnez Vos référentiels.
3. Cliquez sur Nouveau.
4. Tapez le Nom du référentiel, sélectionner Public, et cliquez Créer un référentiel.
5. Accédez au code VS, appuyez sur Ctrl + C, et assurez-vous d'être dans l'application Open_AI_ChatGPT ou dans le dossier racine. Sinon, tapez le code suivant et appuyez sur Entrée: CD
6. Puis, dans le serveur dossier, ajoutez un nouveau fichier et nommez-le .gitignore.
7. Dans le .gitignore fichier, tapez le code suivant pour vous assurer .env et node_modules ne sont pas enfoncés GitHub:
   .env
node_modules

14.2 Publier votre code sur le dépôt

1. Accédez au code VS, copiez et collez les commandes suivantes une par une et appuyez sur Entrée après chaque commande: git initgit commit -m "premier commit"branche git -M principale
2. Tapez la commande suivante après avoir remplacé le https://github.com/SrishtiSisodia/CHAT-BOT-APP avec votre adresse de dépôt mentionnée sur GitHub :
   git remote ajouter l'origine https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Maintenant, pour pousser le code, tapez la commande suivante et appuyez sur Entrée: git push -u main d'origine
4. Rechargez votre page GitHub et votre code y sera téléchargé.
5. Sur le code VS, appuyez sur Ctrl + C sur Terminal Server et Terminal Client pour les empêcher de s'exécuter.

15. Déployer le serveur

1. Allez rendre le site Web et inscrivez-vous en utilisant GitHub.
2. Vous verrez le tableau de bord, cliquez sur Nouveau, puis sélectionnez Services Web.
3. Localisez Connecter un nouveau référentiel, entrez l'URL de votre stockage sous le référentiel Public Git, puis cliquez sur Connecter.
4. Sur la page suivante, ajoutez le nom, sélectionnez la région, sélectionnez la branche comme principal, sélectionnez le répertoire racine comme serveur, choisissez l'environnement comme nœud et tapez Commande de démarrage - exécutez le serveur npm
5. Cliquez sur Gratuit et cliquez sur Créer un service Web.
6. Le serveur sera déployé; veuillez patienter jusqu'à ce que l'état de déploiement soit En direct.
7. Allez dans Environnement; pour Key, saisissez OpenAI_API_Key et pour value, saisissez la clé d'API secrète que vous avez générée à l'étape 9.
8. Vous aurez maintenant une adresse Web; ajoutez-le au fichier script.js. Ensuite, sur le code VS, accédez au fichier script.js et remplacez l'adresse Web dans le code mentionné ci-dessous par la nouvelle adresse Web du site Web rendu :
   réponse const = attendre récupérer(' http://localhost: 8001/'réponse const = attendre récupérer(' https://chatgptapp-lswi.onrender.com/'
9. Sur le Borne code VS, tapez les commandes suivantes une par une et appuyez sur Entrée après chaque commande: git ajouter.git commit -m 'met à jour l'URL du serveur'git pousser

16. Déployer le front-end

1. Accéder au site de Vercel.
2. Cliquez sur Commencer le déploiement.
3. Sous Importer le référentiel Git, Cliquez sur Continuer avec GitHub.
4. Tapez votre Nom d'utilisateur GitHub et sélectionnez le nom du référentiel et cliquez sur Importer.
5. Sous Configurer le projet, sélectionnez un nom.
6. Changer la répertoire racine depuis / pour client, Cliquez sur Continuer et Déployer.
7. Revenez à votre tableau de bord et cliquez sur Visite.
8. Vous pouvez maintenant voir l'application.

Voici donc les étapes détaillées pour installer l'application ChatGPT localement sur votre appareil. Coincé quelque part? Veuillez mentionner vos questions ou préoccupations dans la section des commentaires ci-dessous.