Installera ChatGPT-appen lokalt: Varför och hur man gör det

ChatGPT är utformad för att ge snabba svar på dina frågor. Du kan komma åt ChatGPT online; Men om du föredrar att installera appen kan den här guiden hjälpa dig.

Vi kommer att diskutera steg-för-steg-metoden för att installera ChatGPT-appen lokalt så att du kan använda den för att få snabbare svar med ökad integritet.

Varför installera ChatGPT-appen lokalt?

Det finns flera fördelar med att installera AI-modellen på din dator, av vilka några nämns här:

• Snabb och lyhörd – Du kan köra det direkt på din enhet. Det betyder att appen kommer att använda enhetens processor och minne, vilket kommer att fungera mer effektivt än när du arbetar på fjärrservern.
• Ökad integritet och säkerhet – Genom att använda appen lokalt förbättras integriteten och säkerheten för dina privata data. Data kommer inte längre att överföras från din enhet till en fjärrserver.
• anpassningsbar – Genom att installera appen lokalt kan du anpassa appen enligt dina önskemål och krav. Du kan ändra användargränssnittet, appfunktionerna och mer.
• Inget behov av stillestånd – Om appen är lokalt installerad behöver du inte logga in igen eller vänta på att servern ska svara om den är upptagen. Därför ingen stilleståndstid.

Hur kan jag installera ChatGPT-appen lokalt?

Innan du går in i steg för att installera ChatGPT-appen lokalt bör du överväga att utföra följande kontroller:

• Installera först tillägget Node.js på VS-kod.
• Skaffa sedan Git-förlängning på VS-kod.

1. Skapa en mapp och öppna den i Visual Studio Code

1. Högerklicka på det tomma utrymmet på skrivbordet, välj Ny, då Mapp.
2. Byt namn på mappen till Open_AI_ChatGPT app.
3. tryck på Windows Nyckeltyp Visual Studio-kod, och klicka Öppen.
4. Gå till Fil menyn och välj Öppen mapp.
5. Välj mappen och klicka Välj mapp.
6. Gå sedan till Se menyn och välj Terminal.

2. Kontrollera om Node.js är installerat

1. Skriv in följande kod för att kontrollera om du har node.js installerat och tryck på Enter: nod -v
2. Om det kommer med ett fel, fortsätt med nästa steg.
3. Gå till Node.js webbplats och ladda ner Node.js
4. Dubbelklicka för att öppna installationsfilen. Klick Nästa.
5. Acceptera nu alla villkor och klicka Nästa.
6. Klick Nästa i alla följande fönster, klicka sedan Installera för att starta installationen.
7. Starta nu om Visual Studio Code.
8. När du är klar, gå tillbaka till terminalen, skriv in följande kod för att skapa en Vanilla JavaScript-förråd, och tryck på Retur: npm skapa [e-postskyddad] klient --mall vanilj
9. Skriv sedan Y och tryck på Enter.
10. Välj Vanilj som ram när du uppmanas.
11. Välj JavaScript som en variant på frågan. Du kommer att se många filer och mappar som skapats under appmappen Open_AI_ChatGPT.

3. Installera beroenden

1. Skriv följande kommando för att gå in i klientkatalogen och tryck på Enter: cd .\client\
2. Kopiera och klistra sedan in följande kommando och tryck på Enter: npm installera
3. Gå till den här länken och ladda ner den zippade mappen med namnet assets.
4. Kopiera nu den extraherade tillgångsmappen till klientmappen.
5. Ta sedan bort filerna vite.svg och counter.js.
6. Slutligen, flytta favicon-fil från tillgångar mapp till offentlig mapp.

4. Skriv kod i style.css

1. Kopiera och klistra in nedanstående kod som den är i mappen style.css:
   @import url(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[e-postskyddad];300;400;500;700;800;900&display=swap");
* {
 marginal: 0;
 stoppning: 0;
 box-storlek: border-box;
 font-family: "Alegreya Sans", sans-serif;
}
kropp {
bakgrund: #343541;
}
#app {
bredd: 100vw;
höjd: 100vh;
bakgrund: #343541;
display: flex;
flex-riktning: kolumn;
align-items: center;
motivera-innehåll: mellanslag-mellan;
}
#chat_container {
flex: 1;
bredd: 100%;
höjd: 100%;
overflow-y: rulla;
display: flex;
flex-riktning: kolumn;
gap: 10px;
-ms-overflow-style: ingen;
scrollbar-width: ingen;
padding-bottom: 20px;
rullningsbeteende: slät;
}
/* döljer rullningslisten */
#chat_container::-webkit-scrollbar {
display: ingen;
}
.wrapper {
bredd: 100%;
stoppning: 15px;
}
.ai {
bakgrund: #40414F;
}
.chatt {
bredd: 100%;
max-bredd: 1280px;
marginal: 0 auto;
 display: flex;
flex-riktning: rad;
align-items: flex-start;
gap: 10px;
}
.profile {
bredd: 36px;
höjd: 36px;
border-radie: 5px;
bakgrund: #5436DA;
display: flex;
motivera-innehåll: center;
align-items: center;
}
.ai .profile {
bakgrund: #10a37f;
}
.profile img {
bredd: 60%;
höjd: 60%;
objektpassning: innehålla;
}
.message {
flex: 1;
färg: #dcdcdc;
teckensnittsstorlek: 20px;
max-bredd: 100 %;
overflow-x: rulla;
/*
* vitt utrymme hänvisar till mellanslag, tabbar eller nyradstecken som används för att formatera CSS-koden
* anger hur vitt utrymme i ett element ska hanteras. Det liknar "pre"-värdet, som talar om för webbläsaren att behandla allt vitt utrymme som signifikant och att bevara det exakt som det visas i källkoden.
* Pre-wrap-värdet gör att webbläsaren kan radera långa rader text på flera rader om det behövs.
* Standardvärdet för white-space-egenskapen i CSS är "normalt". Detta talar om för webbläsaren att komprimera flera blankstegstecken till ett enda utrymme och att radera text på flera rader efter behov för att passa in i dess behållare.
*/
white-space: pre-wrap;
-ms-overflow-style: ingen;
scrollbar-width: ingen;}
/* döljer rullningslisten */
.message::-webkit-scrollbar {
display: ingen;
}
form {
bredd: 100%;
max-bredd: 1280px;
marginal: 0 auto;
stoppning: 10px;
bakgrund: #40414F;
display: flex;
flex-riktning: rad;
gap: 10px;
}
textarea {
bredd: 100%;
färg: #fff;
teckenstorlek: 18px;
stoppning: 10px;
bakgrund: transparent;
border-radie: 5px;
gräns: ingen;
outline: ingen;
}
knapp {
disposition: 0;
gräns: 0; markör: pekare;
bakgrund: transparent;
}
form img {
bredd: 30px;
höjd: 30px;
}

5. Skriv kod i Index.html

1. Skriv in följande kod i filen index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Tryck på Ctrl + S för att spara skriptet.
3. Gå till den vänstra rutan på Visual Studio Code och byt namn på main.js till script.js.

6. Kör kommandon på terminalen

1. Gå till terminalen och tryck Ctrl + C för att se var du skulle skriva kommandon. Du bör vara i klientmappen. Om inte, skriv följande kommando och tryck på Enter: cd-klient
2. Skriv följande kommando och tryck på Enter: npm kör dev
3. Du får en webbadress för att se hur det ser ut hittills. Om du får felet som nämns i skärmdumpen, gå vidare.

7. Skriv kod i filen script.js

1. Ta bort innehållet i filen script.js och kopiera och klistra in följande kod:
   importera bot från './assets/bot.svg'
   importera användare från './assets/user.svg'
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   låt loadInterval;
   funktionsladdare (element) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // Uppdatera textinnehållet i laddningsindikatorn
   element.textContent += '.';
   // Om laddningsindikatorn har nått tre punkter, återställ den
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   function typeText (element, text) {
   låt index = 0;
   låt intervall = setInterval(() => {
   if (index < text.length) {
   element.innerHTML += text.charAt (index);
   index++;
   } annat {
   clearInterval (intervall);
   }
   }, 20)
   }
   funktion genereraUniqueId() {
   const timestamp = Date.now();
   const randomNumber = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}`;
   }
   function chatStripe (isAi, value, uniqueId) {
   lämna tillbaka (
   `
   
   
   

   
   

   
   src=${isAi? bot: användare}
   alt="${isAi? 'bot': 'användare'}"
   />
   

   
   

   ${value}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   const data = new FormData (form);
   // användarens chatstripe
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // för att rensa textområdets inmatning
   form.reset();
   // bots chatstripe
   const uniqueId = genereraUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", unikt ID);
   // för att fokusera bläddra till botten
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // specifikt meddelande div
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   loader (meddelandeDiv);
   const response = inväntar hämta(' http://localhost: 8001/', {
   metod: 'POST',
   rubriker: {
   'Content-Type': 'application/json'
   },
   body: JSON.stringify({
   prompt: data.get('prompt')
   })
   })
   clearInterval (loadInterval);
   messageDiv.innerHTML = '';
   if (response.ok) {
   const data = await response.json();
   const parsedData = data.bot.trim();
   typeText (meddelandeDiv, parsedData);
   } annat {
   const err = invänta svar.text();
   messageDiv.innerHTML = "Något gick fel";
   varning (fel);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   if (e.keyCode 13) {
   handleSubmit (e);
   }
   })
2. Tryck sedan på Ctrl + S för att spara skriptet.

8. Skapa en ny mapp i Open_AI_ChatGPT-appmappen och installera moduler

1. Skapa en mapp i Öppna_AI_ChatGPT-appen mapp och namnge den Server.
2. Öppen Terminal och tryck Crtl + C för att stoppa den löpande appen.
3. Skriv följande kommando och tryck på Enter för att komma ut från klientmappen: CD ..
4. Kopiera och klistra in följande kommando för att ange Server katalog och tryck på Enter: cd-server
5. Skriv följande kommando och tryck på Enter för att skapa en package.json-fil i servermappen: npm init -y
6. För att installera beroenden, skriv följande kommando och tryck på Enter. Detta kommer att skapa en ny fil med namnet package-lock.json: npm installera cors dotenv express nodemon openai

9. Generera API-nyckeln och nämn den i .env

1. Gå till Öppna API-webbplatsen och logga in.
2. Klicka nu Personlig och välj Visa API-nycklar.
3. Klick Skapa ny hemlig nyckel och kopiera nyckeln.
4. I den server mapp, skapa en ny fil och namnge den .env.
5. I den .env skriv in följande kod efter att ha ersatt API-nyckeln med nyckeln du kopierade från Open API-webbplatsen och tryck på Enter: OPENAI_API_KEY="API-nyckeln"

10. Skapa ny fil server.js och skriv ett skript

1. Skapa en ny fil i servermappen och döp om den till server.js.
2. Kopiera och klistra in följande skript i den här filen och tryck Ctrl+S för att spara filen:

importera express från 'express';
importera * som dotenv från 'dotenv';
importera kors från 'cors';
importera { Configuration, OpenAIApi } från 'openai';
dotenv.config();
const konfiguration = ny konfiguration({
apiKey: process.env. OPENAI_API_KEY,
});
const openai = ny OpenAIApi (konfiguration);
const app = express();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
meddelande: 'Hej från GPT!',
})
});
app.post('/', async (req, res) => {
Prova {
const prompt = req.body.prompt;
const response = await openai.createCompletion({
modell: "text-davinci-003",
prompt: `${prompt}`,
temperatur: 0, // Högre värden innebär att modellen tar fler risker.
max_tokens: 3000, // Det maximala antalet tokens att generera i slutförandet. De flesta modeller har en kontextlängd på 2048 tokens (förutom de nyaste modellerna, som stöder 4096).
top_p: 1, // alternativ till provtagning med temperatur, kallad nucleus sampling
frequency_penalty: 0,5, // Antal mellan -2,0 och 2,0. Positiva värden straffar nya tokens baserat på deras befintliga frekvens i texten hittills, vilket minskar modellens sannolikhet att upprepa samma rad ord för ord.
närvarostraff: 0, // Tal mellan -2,0 och 2,0. Positiva värden straffar nya tokens baserat på om de förekommer i texten hittills, vilket ökar modellens sannolikhet att prata om nya ämnen.
});
res.status (200).send({
bot: response.data.choices[0].text
});
} fånga (fel) {
console.log (fel);
res.status (500).send (fel || 'Något gick fel');
}
});
app.listen (5000, () => console.log('AI-server startade på http://localhost: 8001'));

11. Skriv kod i package.json

1. Kopiera och klistra in följande kod och tryck Ctrl + S att spara:

{
"name": "server",
"version": "1.0.0",
"description": "",
"type": "modul",
"scripts":{
"server": "nodemonserver"
},
"nyckelord": [],
"author": "",
"license": "ISC",
"beroenden": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Testa koden

1. Klicka nu på Terminal-menyn på Visual Studio Code och välj Spilled Terminal.
2. Du kommer att ha två terminaler; låt oss kalla dem Terminal Server och Terminal Client.
3. På Terminal Server, tryck på Ctrl + C. Skriv följande kommando för att gå in i serverkatalogen och tryck på Enter: cd server
4. Kopiera och klistra sedan in följande kommando och tryck på Enter för att köra servern: npm kör server
5. Klicka på länken som presenteras så ser du meddelandet Hej från GPT på sidan
6. Nu på Terminal Client, tryck Ctrl + C. Skriv följande kommando för att komma in i klientkatalogen och tryck på Enter: cd-klient
7. Kopiera och klistra in följande kommando och tryck på Enter för att köra klienten: npm kör dev
8. Klicka sedan på länken och skriv Hej hur mår du; du kan se att boten letar efter ett svar.

13. Installera Git Bash-appen och konfigurera den med ditt GitHub-konto

1. Du kan hoppa över det här steget om du redan har konfigurerat det. Ladda ner Git Bash-appen.
2. Logga in på din GitHub-konto.
3. Vid tidpunkten för installationen, spara den i mappen Open_AI_ChatGPT.
4. Tryck sedan på Windows-tangenten, skriv redigera systemmiljövariablerna och klicka på Öppna.
5. Dubbelklicka på sökvägen och klicka på Redigera.
6. Lägg till sökvägen till git-filen här, klicka sedan på OK och OK.
7. Starta Git Bash, skriv följande kommando efter att ha ersatt användarnamnet med ditt GitHub-konto användarnamn och tryck på Enter: git config --global användarnamn "användarnamn"
8. Kopiera och klistra in följande kommando efter att ha ersatt e-postadressen med din e-postadress och tryck på Enter: git config --global user.email "e-postadress"
9. Gå till GitHub-kontot, klicka på rullgardinspilen och välj Inställningar. Gå nu till utvecklarinställningar.
10. Expandera Personliga åtkomsttokens och välj Finkorniga tokens. Klicka på Generera ny token.
11. Byt namn på den och välj giltighet. Kopiera sedan token och spara den på ett anteckningsblock.
12. Skriv följande kommandon ett efter ett och tryck på Enter: git config --global credential.helper wincredgit credential-manager-core configure
13. Följ anvisningarna för att konfigurera den och klistra in token som genereras när du uppmanas att ange ditt lösenord.
14. Stäng Git Bash-appen.

14. Skapa ett arkiv och publicera kod

14.1 Skapa ett arkiv

1. Logga in på din GitHub-konto.
2. Leta upp rullgardinsmenyn bredvid din profilbild och välj Dina förråd.
3. Klick Ny.
4. Skriv Förvaringsnamn, Välj offentlig, och klicka Skapa arkiv.
5. Gå till VS-kod, tryck Ctrl + C, och se till att du är i Open_AI_ChatGPT-appen eller rotmappen. Om inte, skriv in följande kod och tryck på Enter: CD
6. Sedan, i server lägg till en ny fil och namnge den .gitignore.
7. I den .gitignore skriv följande kod för att vara säker .env och node_modules inte trycks in GitHub:
   .env
node_modules

14.2 Publicera din kod på arkivet

1. Gå till VS-kod, kopiera och klistra in följande kommandon ett efter ett och tryck på Enter efter varje kommando: git initgit commit -m "first commit"git branch -M main
2. Skriv följande kommando efter att ha ersatt https://github.com/SrishtiSisodia/CHAT-BOT-APP med din förvarsadress som nämns på GitHub:
   git remote add origin https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Nu för att trycka koden, skriv följande kommando och tryck på Enter: git push -u ursprung main
4. Ladda om din GitHub-sida så kommer din kod att laddas upp där.
5. På VS-kod, tryck Ctrl + C på både Terminal Server och Terminal Client för att stoppa dem från att köras.

15. Distribuera servern

1. Gå till rendering webbplats och registrera dig med GitHub.
2. Du kommer att se instrumentpanelen, klicka på Ny och välj sedan Web Services.
3. Leta reda på Connect ett nytt arkiv, ange URL: en till din lagring under Public Git repository och klicka på Anslut.
4. På nästa sida, lägg till Namn, välj regionen, välj Filial som huvud, välj Rotkatalog som server, välj Miljö som nod och skriv Startkommando - kör npm-server
5. Klicka på Gratis och klicka på Skapa webbtjänst.
6. Servern kommer att distribueras; vänta tills distributionsstatusen är Live.
7. Gå till Miljö; för Key, skriv OpenAI_API_Key och för värde, skriv in den hemliga API-nyckeln du genererade i steg 9.
8. Du kommer nu att ha en webbadress; lägg till den i filen script.js. Gå sedan till filen script.js på VS-koden och ersätt webbadressen i koden som nämns nedan med den nya webbadressen från den renderade webbplatsen:
   const response = inväntar hämta(' http://localhost: 8001/'const response = inväntar hämta(' https://chatgptapp-lswi.onrender.com/'
9. På VS-kod Terminal, skriv följande kommandon ett efter ett och tryck på Retur efter varje kommando: git add.git commit -m 'uppdatera serverns URL'git push

16. Distribuera fronten

1. Gå till Vercels webbplats.
2. Klick Börja distribuera.
3. Under Importera Git Repository, klick Fortsätt med GitHub.
4. Skriv ditt GitHub användarnamn och välj arkivets namn och klicka Importera.
5. Under Konfigurera projekt, välj ett namn.
6. Ändra rotkatalogen från / till klient, klick Fortsätta och Distribuera.
7. Gå tillbaka till din instrumentpanel och klicka Besök.
8. Du kan nu se ansökan.

Så, det här är de detaljerade stegen för att installera ChatGPT-appen lokalt på din enhet. Fast någonstans? Vänligen nämn dina frågor eller funderingar i kommentarsfältet nedan.