Zainstaluj aplikację ChatGPT lokalnie: dlaczego i jak to zrobić

ChatGPT ma na celu zapewnienie szybkich odpowiedzi na Twoje zapytania. Możesz uzyskać dostęp do ChatGPT online; jeśli jednak wolisz zainstalować aplikację, ten przewodnik może pomóc.

Omówimy krok po kroku metodę lokalnej instalacji aplikacji ChatGPT, abyś mógł jej używać do uzyskiwania szybszych odpowiedzi przy zwiększonej prywatności.

Po co instalować aplikację ChatGPT lokalnie?

Istnieje kilka korzyści z zainstalowania modelu AI na komputerze, z których niektóre wymieniono tutaj:

• Szybki i responsywny – Możesz uruchomić go bezpośrednio na swoim urządzeniu. Oznacza to, że aplikacja będzie wykorzystywać procesor i pamięć urządzenia, co będzie działać wydajniej niż podczas pracy na zdalnym serwerze.
• Zwiększona prywatność i bezpieczeństwo – Lokalne korzystanie z aplikacji zwiększy prywatność i bezpieczeństwo Twoich prywatnych danych. Dane nie będą już przesyłane z Twojego urządzenia na zdalny serwer.
• Konfigurowalny – Zainstalowanie aplikacji lokalnie pozwoli Ci dostosować aplikację zgodnie z Twoimi preferencjami i wymaganiami. Możesz zmienić interfejs użytkownika, funkcje aplikacji i nie tylko.
• Nie ma potrzeby mierzyć się z przestojami – Jeśli aplikacja jest zainstalowana lokalnie, nie musisz się ponownie logować ani czekać na odpowiedź serwera, jeśli jest zajęty. Dlatego nie ma przestojów.

Jak mogę zainstalować aplikację ChatGPT lokalnie?

Przed wykonaniem czynności mających na celu lokalną instalację aplikacji ChatGPT należy rozważyć wykonanie następujących czynności sprawdzających:

• Najpierw zainstaluj rozszerzenie Node.js na kodzie VS.
• Następnie pobierz rozszerzenie Git na kod VS.

1. Utwórz folder i otwórz go w Visual Studio Code

1. Kliknij prawym przyciskiem myszy puste miejsce na pulpicie, wybierz Nowy, Następnie Teczka.
2. Zmień nazwę folderu na Open_AI_ChatGPT aplikacja.
3. wciśnij Okna typ klucza Kod Visual Studioi kliknij otwarty.
4. Idź do Plik menu i wybierz Otwórz folder.
5. Wybierz folder i kliknij Wybierz katalog.
6. Następnie przejdź do Pogląd menu i wybierz Terminal.

2. Sprawdź, czy jest zainstalowany Node.js

1. Wpisz następujący kod, aby sprawdzić, czy masz zainstalowany node.js i naciśnij Enter: węzeł -v
2. Jeśli pojawi się błąd, przejdź do następnego kroku.
3. Idź do Witryna Node.js i pobierz Node.js
4. Kliknij dwukrotnie, aby otworzyć plik instalatora. Kliknij Następny.
5. Teraz zaakceptuj wszystkie warunki i kliknij Następny.
6. Kliknij Następny we wszystkich kolejnych oknach, a następnie kliknij zainstalować aby rozpocząć instalację.
7. Teraz uruchom ponownie program Visual Studio Code.
8. Po zakończeniu wróć do terminala, wpisz następujący kod, aby utworzyć plik Waniliowe repozytorium JavaScripti naciśnij Enter: npm utwórz [e-mail chroniony] klient --szablon wanilia
9. Następnie wpisz Y i naciśnij Enter.
10. Wybierać Wanilia jako ramy po wyświetleniu monitu.
11. Wybierać JavaScript jako wariant, gdy zostaniesz o to poproszony. Zobaczysz wiele plików i folderów utworzonych w folderze aplikacji Open_AI_ChatGPT.

3. Zainstaluj zależności

1. Wpisz następujące polecenie, aby wejść do katalogu klienta i naciśnij klawisz Enter: cd .\klient\
2. Następnie skopiuj i wklej następujące polecenie i naciśnij Enter: instalacja npm
3. Przejdź do tego łącza i pobierz spakowany folder o nazwie asset.
4. Teraz skopiuj wyodrębniony folder zasobów do folderu klienta.
5. Następnie usuń pliki vite.svg i counter.js.
6. Na koniec przesuń plik ulubionych od aktywa folder do publiczny teczka.

4. Napisz kod w style.css

1. Skopiuj i wklej poniższy kod tak, jak jest w folderze style.css:
   @adres importu(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[e-mail chroniony];300;400;500;700;800;900&display=zamień");
* {
 margines: 0;
 wypełnienie: 0;
 rozmiar pudełka: ramka-pudełko;
 rodzina czcionek: „Alegreya Sans”, bezszeryfowa;
}
ciało {
tło: #343541;
}
#aplikacja {
szerokość: 100vw;
wysokość: 100vh;
tło: #343541;
wyświetlacz: elastyczny;
kierunek zginania: kolumna;
elementy wyrównania: środek;
justify-content: odstęp między;
}
#czat_kontener {
elastyczność: 1;
szerokość: 100%;
wzrost: 100%;
przepełnienie-y: przewiń;
wyświetlacz: elastyczny;
kierunek zginania: kolumna;
przerwa: 10 pikseli;
-ms-overflow-style: brak;
szerokość paska przewijania: brak;
dopełnienie-dół: 20px;
zachowanie przewijania: płynne;
}
/* ukrywa pasek przewijania */
#chat_container::-webkit-pasek przewijania {
Nie wyświetla się;
}
opakowanie {
szerokość: 100%;
wypełnienie: 15px;
}
.ai {
tło: #40414F;
}
.czat {
szerokość: 100%;
maksymalna szerokość: 1280 pikseli;
margines: 0 automatyczny;
 wyświetlacz: elastyczny;
kierunek wygięcia: rząd;
wyrównaj elementy: flex-start;
przerwa: 10 pikseli;
}
profil {
szerokość: 36px;
wysokość: 36px;
promień obramowania: 5px;
tło: #5436DA;
wyświetlacz: elastyczny;
justify-content: środek;
elementy wyrównania: środek;
}
.ai .profil {
tło: #10a37f;
}
.profil img {
szerokość: 60%;
wzrost: 60%;
dopasowanie do obiektu: zawierać;
}
.wiadomość {
elastyczność: 1;
kolor: #dcdcdc;
rozmiar czcionki: 20px;
maksymalna szerokość: 100%;
przepełnienie-x: przewiń;
/*
* białe znaki odnoszą się do wszelkich spacji, tabulacji lub znaków nowego wiersza, które są używane do formatowania kodu CSS
* określa sposób obsługi białych znaków w elemencie. Jest podobny do wartości „pre”, która mówi przeglądarce, aby traktowała wszystkie białe znaki jako znaczące i zachowywała je dokładnie tak, jak pojawiają się w kodzie źródłowym.
* Wartość wstępnego zawijania umożliwia przeglądarce zawijanie długich wierszy tekstu w wielu wierszach, jeśli to konieczne.
* Domyślną wartością właściwości white-space w CSS jest „normal”. To mówi przeglądarce, aby zwinęła wiele białych znaków w jedną spację i zawijała tekst w wiele wierszy, aby zmieścił się w kontenerze.
*/
biała przestrzeń: wstępne zawijanie;
-ms-overflow-style: brak;
szerokość paska przewijania: brak;}
/* ukrywa pasek przewijania */
.message::-webkit-pasek przewijania {
Nie wyświetla się;
}
formularz {
szerokość: 100%;
maksymalna szerokość: 1280 pikseli;
margines: 0 automatyczny;
wypełnienie: 10px;
tło: #40414F;
wyświetlacz: elastyczny;
kierunek wygięcia: rząd;
przerwa: 10 pikseli;
}
pole tekstowe {
szerokość: 100%;
kolor: #fff;
rozmiar czcionki: 18px;
wypełnienie: 10px;
tło: przezroczyste;
promień obramowania: 5px;
obramowanie: brak;
zarys: brak;
}
przycisk {
zarys: 0;
granica: 0; kursor: wskaźnik;
tło: przezroczyste;
}
formularz img {
szerokość: 30px;
wysokość: 30px;
}

5. Napisz kod w pliku Index.html

1. Wpisz następujący kod w pliku index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Naciśnij Ctrl + S, aby zapisać skrypt.
3. Przejdź do lewego okienka w Visual Studio Code i zmień nazwę pliku main.js na script.js.

6. Uruchom polecenia w terminalu

1. Podejdź do terminala i naciśnij klawisz kontrolny + C aby zobaczyć, gdzie będziesz pisać polecenia. Powinieneś być w folderze klienta. Jeśli nie, wpisz następujące polecenie i naciśnij klawisz Enter: klient CD
2. Wpisz następujące polecenie i naciśnij klawisz Enter: npm uruchom dev
3. Otrzymasz adres internetowy, aby zobaczyć, jak to wygląda do tej pory. Jeśli pojawi się błąd wymieniony na zrzucie ekranu, przejdź dalej.

7. Napisz kod w pliku script.js

1. Usuń zawartość znajdującą się w pliku script.js, a następnie skopiuj i wklej następujący kod:
   zaimportuj bota z „./assets/bot.svg”
   importuj użytkownika z „./assets/user.svg”
   const formularz = document.querySelector('formularz');
   const chatContainer = document.querySelector('#chat_container');
   niech ładuje Interwał;
   funkcja ładująca (element) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // Zaktualizuj zawartość tekstową wskaźnika ładowania
   element.textContent += '.';
   // Jeśli wskaźnik ładowania osiągnął trzy kropki, zresetuj go
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   typ funkcjiTekst (element, tekst) {
   niech indeks = 0;
   niech interwał = setInterval(() => {
   if (indeks < tekst.długość) {
   element.innerHTML += text.charAt (indeks);
   indeks++;
   } w przeciwnym razie {
   clearInterval (interwał);
   }
   }, 20)
   }
   funkcja generujUniqueId() {
   stały znacznik czasu = Date.now();
   const liczba losowa = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${znacznik czasu}-${ciąg szesnastkowy}`;
   }
   funkcja chatStripe (isAi, wartość, unikalny identyfikator) {
   powrót (
   `
   
   
   

   
   

   
   src=${isAi? bot: użytkownik}
   alt="${isAi? 'bot': 'użytkownik'}"
   />
   

   
   

   ${wartość}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   const data = new FormData (formularz);
   // pasek czatu użytkownika
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // aby wyczyścić pole tekstowe
   form.reset();
   // pasek czatu bota
   const unikalnyId = generujUnikalnyId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // aby ustawić ostrość przewiń w dół
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // określona wiadomość div
   const MessageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   program ładujący (messageDiv);
   const response = oczekiwanie na pobranie(' http://localhost: 8001/', {
   metoda: „POST”,
   nagłówki: {
   „Typ zawartości”: „aplikacja/json”
   },
   treść: JSON.stringify({
   monit: data.get('prompt')
   })
   })
   clearInterval (interwał ładowania);
   MessageDiv.innerHTML = '';
   if (odpowiedź.ok) {
   const data = oczekiwanie na odpowiedź.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } w przeciwnym razie {
   const err = czekaj na odpowiedź.text();
   messageDiv.innerHTML = "Coś poszło nie tak";
   ostrzeżenie (błąd);
   }
   }
   form.addEventListener('prześlij', uchwytPrześlij);
   form.addEventListener('keyup', (e) => {
   if (e.keyCode 13) {
   uchwyt Prześlij (e);
   }
   })
2. Następnie naciśnij klawisz kontrolny + S aby zapisać skrypt.

8. Utwórz nowy folder w folderze aplikacji Open_AI_ChatGPT i zainstaluj moduły

1. Utwórz folder w Aplikacja Open_AI_ChatGPT folder i nazwij go serwer.
2. otwarty Terminal i naciśnij Crtl + C aby zatrzymać uruchomioną aplikację.
3. Wpisz następujące polecenie i naciśnij klawisz Enter, aby wyjść z folderu klienta: płyta CD ..
4. Skopiuj i wklej następujące polecenie, aby wprowadzić plik serwer katalog i naciśnij Enter: serwer cd
5. Wpisz następujące polecenie i naciśnij klawisz Enter, aby wygenerować plik package.json w folderze serwera: npm init -y
6. Aby zainstalować zależności, wpisz następujące polecenie i naciśnij klawisz Enter. Spowoduje to utworzenie nowego pliku o nazwie package-lock.json: npm install cors dotenv express nodemon openai

9. Wygeneruj klucz API i wspomnij o nim w .env

1. Idź do Otwórz witrynę interfejsu API i zaloguj się.
2. Teraz kliknij Osobisty i wybierz Wyświetl klucze API.
3. Kliknij Utwórz nowy tajny klucz i skopiuj klucz.
4. w serwer folder, utwórz nowy plik i nadaj mu nazwę .env.
5. w .env wpisz następujący kod po zastąpieniu klucza API kluczem skopiowanym ze strony Open API i naciśnij Enter: OPENAI_API_KEY="Klucz API"

10. Utwórz nowy plik server.js i napisz skrypt

1. Utwórz nowy plik w folderze serwera i zmień jego nazwę server.js.
2. Skopiuj i wklej następujący skrypt do tego pliku i naciśnij klawisz kontrolny+S aby zapisać plik:

import ekspresowy z „ekspresowego”;
import * jako dotenv z 'dotenv';
importuj cors z „cors”;
zaimportuj { Konfiguracja, OpenAIApi } z „openai”;
dotenv.config();
stała konfiguracja = nowa konfiguracja ({
apiKey: proces.env. OPENAI_API_KEY,
});
const openai = nowy OpenAIApi (konfiguracja);
stała aplikacja = ekspres();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
wiadomość: „Witaj z GPT!”,
})
});
app.post('/', async (req, res) => {
próbować {
const prompt = req.body.prompt;
const response = oczekiwanie na openai.createCompletion({
model: "tekst-davinci-003",
podpowiedź: `${podpowiedź}`,
temperatura: 0, // Wyższe wartości oznaczają, że model będzie podejmował większe ryzyko.
max_tokens: 3000, // Maksymalna liczba tokenów do wygenerowania w zakończeniu. Większość modeli ma długość kontekstu 2048 tokenów (z wyjątkiem najnowszych modeli, które obsługują 4096 tokenów).
top_p: 1, // alternatywa dla próbkowania z temperaturą, nazywana próbkowaniem jądra
Frequency_penalty: 0,5, // Liczba między -2,0 a 2,0. Wartości dodatnie są karalne dla nowych tokenów na podstawie ich dotychczasową częstotliwość w tekście, zmniejszając prawdopodobieństwo powtórzenia tej samej linii przez model dosłownie.
present_penalty: 0, // Liczba między -2,0 a 2,0. Wartości dodatnie nakładają kary na nowe tokeny na podstawie tego, czy pojawiają się one w tekście do tej pory, zwiększając prawdopodobieństwo, że model będzie mówił o nowych tematach.
});
res.status (200).send({
bot: response.data.choices[0].text
});
} złapać (błąd) {
log.konsoli (błąd);
res.status (500).send (błąd || „Coś poszło nie tak”);
}
});
app.listen (5000, () => console.log('Serwer AI został uruchomiony dnia http://localhost: 8001'));

11. Napisz kod w pliku package.json

1. Skopiuj i wklej następujący kod i naciśnij klawisz kontrolny + S zapisać:

{
"nazwa": "serwer",
"wersja": "1.0.0",
"opis": "",
"typ": "moduł",
"skrypty":{
"serwer": "serwer węzła"
},
"słowa kluczowe": [],
"autor": "",
"licencja": "ISC",
"zależności": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"ekspres": "^4.18.2",
"węzeł": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Przetestuj kod

1. Teraz kliknij menu Terminal w Visual Studio Code i wybierz Spilled Terminal.
2. Będziesz mieć dwa terminale; nazwijmy je Serwer terminali i Klient terminala.
3. Na serwerze terminali naciśnij Ctrl + C. Wpisz następujące polecenie, aby wejść do katalogu serwera, i naciśnij klawisz Enter: cd server
4. Następnie skopiuj i wklej następujące polecenie i naciśnij Enter, aby uruchomić serwer: serwer uruchamiania npm
5. Kliknij przedstawiony link, a na stronie zobaczysz komunikat Witaj z GPT
6. Teraz na kliencie terminala naciśnij Ctrl + C. Wpisz następujące polecenie, aby wejść do katalogu klienta, i naciśnij klawisz Enter: klient CD
7. Skopiuj i wklej następujące polecenie i naciśnij klawisz Enter, aby uruchomić klienta: npm uruchom dev
8. Następnie kliknij link i wpisz Cześć, jak się masz; widać, że bot szuka odpowiedzi.

13. Zainstaluj aplikację Git Bash i skonfiguruj ją za pomocą swojego konta GitHub

1. Możesz pominąć ten krok, jeśli masz go już skonfigurowanego. Pobierz aplikację Git Bash.
2. Zaloguj się do swojego Konto GitHub.
3. Podczas instalacji zapisz go w folderze Open_AI_ChatGPT.
4. Następnie naciśnij klawisz Windows, wpisz edytuj systemowe zmienne środowiskowe i kliknij Otwórz.
5. Kliknij dwukrotnie Ścieżkę i kliknij Edytuj.
6. Dodaj tutaj ścieżkę do pliku git, a następnie kliknij OK i OK.
7. Uruchom Git Bash, wpisz następujące polecenie po zastąpieniu nazwy użytkownika nazwą użytkownika konta GitHub i naciśnij Enter: git config --global user.name "nazwa użytkownika"
8. Skopiuj i wklej następujące polecenie po zastąpieniu adresu e-mail swoim adresem e-mail i naciśnij Enter: git config --global user.email "adres e-mail"
9. Przejdź do konta GitHub, kliknij strzałkę listy rozwijanej i wybierz Ustawienia. Teraz przejdź do ustawień programisty.
10. Rozwiń Tokeny dostępu osobistego i wybierz Tokeny szczegółowe. Kliknij Wygeneruj nowy token.
11. Zmień jego nazwę i wybierz ważność. Następnie skopiuj token i zapisz go w notatniku.
12. Wpisz kolejno następujące polecenia i naciśnij klawisz Enter: git config --global credential.helper wincredkonfiguracja rdzenia menedżera poświadczeń git
13. Postępuj zgodnie z instrukcjami, aby go skonfigurować i wklej token wygenerowany po wyświetleniu monitu o podanie hasła.
14. Zamknij aplikację Git Bash.

14. Utwórz repozytorium i opublikuj kod

14.1 Utwórz repozytorium

1. Zaloguj się do swojego Konto GitHub.
2. Zlokalizuj rozwijana strzałka obok swojego zdjęcia profilowego i wybierz Twoje repozytoria.
3. Kliknij Nowy.
4. Wpisz Nazwa repozytorium, wybierać Publicznyi kliknij Utwórz repozytorium.
5. Przejdź do kodu VS, naciśnij klawisz kontrolny + Ci upewnij się, że jesteś w aplikacji Open_AI_ChatGPT lub w folderze głównym. Jeśli nie, wpisz następujący kod i naciśnij Enter: płyta CD
6. Następnie w serwer folder, dodaj nowy plik i nazwij go gitignore.
7. w gitignore plik, wpisz następujący kod, aby się upewnić .env I moduły_węzłów nie są wciskane GitHub:
   .env
moduły_węzłów

14.2 Opublikuj swój kod w repozytorium

1. Przejdź do kodu VS, skopiuj i wklej następujące polecenia jeden po drugim i naciśnij Enter po każdym poleceniu: start gitgit commit -m "pierwsze zatwierdzenie"gałąź git -M główna
2. Wpisz następujące polecenie po zastąpieniu pliku https://github.com/SrishtiSisodia/CHAT-BOT-APP z twoim adresem repozytorium wymienionym na GitHub:
   git zdalne dodawanie źródła https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Teraz, aby wcisnąć kod, wpisz następujące polecenie i naciśnij Enter: git push -u źródło główne
4. Załaduj ponownie swoją stronę GitHub, a Twój kod zostanie tam przesłany.
5. W kodzie VS naciśnij klawisz kontrolny + C zarówno na serwerze terminali, jak i kliencie terminala, aby zatrzymać ich działanie.

15. Wdróż serwer

1. Przejdź do renderowania witrynę internetową i zarejestruj się za pomocą GitHub.
2. Zobaczysz Pulpit nawigacyjny, kliknij Nowy, a następnie wybierz Usługi sieciowe.
3. Zlokalizuj Połącz nowe repozytorium, wprowadź adres URL swojego magazynu w repozytorium Public Git i kliknij Połącz.
4. Na następnej stronie dodaj nazwę, wybierz region, wybierz oddział jako główny, wybierz katalog główny jako serwer, wybierz środowisko jako węzeł i wpisz Uruchom polecenie - uruchom serwer npm
5. Kliknij Bezpłatnie i kliknij Utwórz usługę internetową.
6. Serwer zostanie wdrożony; poczekaj, aż stan wdrożenia zmieni się na Aktywne.
7. Przejdź do Środowisko; w polu Klucz wpisz OpenAI_API_Key, a w polu Wartość wpisz tajny klucz API wygenerowany w kroku 9.
8. Będziesz mieć teraz adres internetowy; dodaj go do pliku script.js. Następnie w kodzie VS przejdź do pliku script.js i zastąp adres internetowy w poniższym kodzie nowym adresem internetowym z wyrenderowanej strony internetowej:
   const response = oczekiwanie na pobranie(' http://localhost: 8001/'const response = oczekiwanie na pobranie(' https://chatgptapp-lswi.onrender.com/'
9. Na Terminal kodu VS, wpisz kolejno następujące polecenia i naciśnij klawisz Enter po każdym poleceniu: git dodaj.git commit -m „zaktualizuj adres URL serwera”git push

16. Wdróż interfejs użytkownika

1. Wejdź na stronę Vercel.
2. Kliknij Rozpocznij wdrażanie.
3. Pod Importuj repozytorium Git, Kliknij Kontynuuj z GitHubem.
4. Wpisz swój Nazwa użytkownika GitHub i wybierz nazwę repozytorium i kliknij Import.
5. Pod Skonfiguruj projekt, wybierz nazwę.
6. Zmienić katalog główny z / Do klient, Kliknij Kontynuować I Wdrożyć.
7. Wróć do pulpitu nawigacyjnego i kliknij Odwiedzać.
8. Możesz teraz zobaczyć aplikację.

Oto szczegółowe kroki, aby zainstalować aplikację ChatGPT lokalnie na swoim urządzeniu. Utknąłeś gdzieś? Wpisz swoje pytania lub wątpliwości w sekcji komentarzy poniżej.