Instal Aplikasi ChatGPT Secara Lokal: Mengapa & Bagaimana Melakukannya

ChatGPT dirancang untuk memberikan respons cepat terhadap pertanyaan Anda. Anda dapat mengakses ChatGPT online; namun, jika Anda lebih suka menginstal aplikasi, panduan ini dapat membantu.

Kami akan membahas metode langkah demi langkah untuk menginstal aplikasi ChatGPT secara lokal sehingga Anda dapat menggunakannya untuk mendapatkan respons yang lebih cepat dengan peningkatan privasi.

Mengapa memasang aplikasi ChatGPT secara lokal?

Ada beberapa keuntungan memasang model AI di komputer Anda, beberapa di antaranya disebutkan di sini:

• Cepat dan tanggap – Anda dapat langsung menjalankannya di perangkat Anda. Ini berarti aplikasi akan menggunakan prosesor dan memori perangkat, yang akan bekerja lebih efisien daripada saat bekerja di server jarak jauh.
• Peningkatan privasi dan keamanan – Menggunakan aplikasi secara lokal akan meningkatkan privasi dan keamanan data pribadi Anda. Data tidak akan lagi ditransfer dari perangkat Anda ke server jarak jauh.
• Dapat disesuaikan – Menginstal aplikasi secara lokal akan memungkinkan Anda menyesuaikan aplikasi sesuai preferensi dan kebutuhan Anda. Anda dapat mengubah antarmuka pengguna, fungsi aplikasi, dan lainnya.
• Tidak perlu menghadapi downtime – Jika aplikasi diinstal secara lokal, Anda tidak perlu masuk lagi atau menunggu server merespons jika sedang sibuk. Oleh karena itu tidak ada downtime.

Bagaimana saya bisa menginstal aplikasi ChatGPT secara lokal?

Sebelum melakukan langkah-langkah untuk menginstal aplikasi ChatGPT secara lokal, Anda harus mempertimbangkan untuk melakukan pemeriksaan berikut:

• Pertama, instal ekstensi Node.js pada kode VS.
• Kemudian, dapatkan ekstensi Git pada kode VS.

1. Buat folder & buka di Visual Studio Code

1. Klik kanan pada ruang kosong di desktop, pilih Baru, Kemudian Map.
2. Ganti nama folder sebagai Buka_AI_ChatGPT aplikasi.
3. tekan Windows kunci, ketik Kode Visual Studio, dan klik Membuka.
4. Pergi ke Mengajukan menu, dan pilih Folder terbuka.
5. Pilih folder dan klik Pilih folder.
6. Selanjutnya, pergi ke Melihat menu dan pilih Terminal.

2. Periksa apakah Node.js sudah diinstal

1. Ketik kode berikut untuk memeriksa apakah Anda telah menginstal node.js dan tekan Enter: simpul -v
2. Jika datang dengan kesalahan, lanjutkan dengan langkah berikutnya.
3. Pergi ke situs web Node.js dan unduh Node.js
4. Klik dua kali untuk membuka file penginstal. Klik Berikutnya.
5. Sekarang terima semua syarat dan ketentuan dan klik Berikutnya.
6. Klik Berikutnya pada semua jendela berikut, lalu klik Install untuk memulai instalasi.
7. Sekarang mulai ulang Kode Visual Studio.
8. Setelah selesai, kembali ke terminal, ketikkan kode berikut untuk membuat a Repositori JavaScript vanilla, dan tekan Enter: npm buat [email dilindungi] klien --templat vanilla
9. Selanjutnya, ketik Y dan tekan Enter.
10. Pilih Vanila sebagai kerangka kerja saat diminta.
11. Pilih JavaScript sebagai varian saat ditanya. Anda akan melihat banyak file dan folder yang dibuat di bawah folder aplikasi Open_AI_ChatGPT.

3. Instal dependensi

1. Ketik perintah berikut untuk masuk ke direktori klien dan tekan Enter: cd .\klien\
2. Selanjutnya, salin dan tempel perintah berikut dan tekan Enter: instal npm
3. Buka tautan ini dan unduh folder zip bernama aset.
4. Sekarang salin folder aset yang diekstraksi ke folder klien.
5. Selanjutnya, hapus file vite.svg dan counter.js.
6. Terakhir, pindahkan file favicon dari aktiva folder ke publik map.

4. Tulis kode di style.css

1. Salin dan tempel kode yang disebutkan di bawah seperti di folder style.css:
   @impor url(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[email dilindungi];300;400;500;700;800;900&tampilan=tukar");
* {
 margin: 0;
 bantalan: 0;
 ukuran kotak: kotak batas;
 font-family: "Alegreya Sans", sans-serif;
}
tubuh {
latar belakang: #343541;
}
#aplikasi {
lebar: 100vw;
tinggi: 100vh;
latar belakang: #343541;
tampilan: fleksibel;
arah fleksibel: kolom;
menyelaraskan-item: tengah;
justify-content: space-between;
}
#chat_container {
melenturkan: 1;
lebar: 100%;
tinggi: 100%;
luapan-y: gulir;
tampilan: fleksibel;
arah fleksibel: kolom;
celah: 10px;
-ms-overflow-style: tidak ada;
lebar scrollbar: tidak ada;
padding-bottom: 20px;
gulir-perilaku: halus;
}
/* menyembunyikan bilah gulir */
#chat_container::-webkit-scrollbar {
tampilan: tidak ada;
}
.wrapper {
lebar: 100%;
padding: 15px;
}
.ai {
latar belakang: #40414F;
}
.mengobrol {
lebar: 100%;
max-width: 1280px;
margin: 0 otomatis;
 tampilan: fleksibel;
arah fleksibel: baris;
menyelaraskan-item: mulai-fleksibel;
celah: 10px;
}
.Profil {
lebar: 36px;
tinggi: 36px;
border-radius: 5px;
latar belakang: #5436DA;
tampilan: fleksibel;
justify-content: center;
menyelaraskan-item: tengah;
}
.ai .profil {
latar belakang: #10a37f;
}
.profile img {
lebar: 60%;
tinggi: 60%;
objek-cocok: mengandung;
}
.pesan {
melenturkan: 1;
warna: #dcdcdc;
ukuran font: 20px;
lebar maks: 100%;
luapan-x: gulir;
/*
* spasi putih mengacu pada spasi, tab, atau karakter baris baru apa pun yang digunakan untuk memformat kode CSS
* menentukan bagaimana ruang putih dalam suatu elemen harus ditangani. Hal ini mirip dengan nilai "pra", yang memberi tahu browser untuk memperlakukan semua ruang kosong secara signifikan dan mempertahankannya persis seperti yang muncul di kode sumber.
* Nilai pre-wrap memungkinkan browser untuk membungkus baris teks yang panjang menjadi beberapa baris jika perlu.
* Nilai default untuk properti white-space di CSS adalah "normal". Ini memberi tahu browser untuk menciutkan beberapa karakter spasi putih ke dalam satu spasi, dan untuk membungkus teks ke beberapa baris sesuai kebutuhan agar sesuai dengan wadahnya.
*/
spasi putih: pra-bungkus;
-ms-overflow-style: tidak ada;
lebar scrollbar: tidak ada;}
/* menyembunyikan bilah gulir */
.message::-webkit-scrollbar {
tampilan: tidak ada;
}
membentuk {
lebar: 100%;
max-width: 1280px;
margin: 0 otomatis;
padding: 10px;
latar belakang: #40414F;
tampilan: fleksibel;
arah fleksibel: baris;
celah: 10px;
}
textarea {
lebar: 100%;
warna: #ff;
ukuran font: 18px;
padding: 10px;
latar belakang: transparan;
border-radius: 5px;
perbatasan: tidak ada;
garis besar: tidak ada;
}
tombol {
garis besar: 0;
perbatasan: 0; kursor: penunjuk;
latar belakang: transparan;
}
bentuk img {
lebar: 30px;
tinggi: 30px;
}

5. Tulis kode di Index.html

1. Ketik kode berikut di file index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Tekan Ctrl + S untuk menyimpan skrip.
3. Buka panel kiri pada Visual Studio Code dan ganti nama main.js menjadi script.js.

6. Jalankan perintah di Terminal

1. Pergi ke terminal dan tekan Ctrl + C untuk melihat di mana Anda akan menulis perintah. Anda harus berada di folder klien. Jika tidak, ketik perintah berikut dan tekan Enter: klien cd
2. Ketik perintah berikut dan tekan Enter: npm menjalankan dev
3. Anda akan mendapatkan alamat web untuk melihat tampilannya sejauh ini. Jika Anda mendapatkan kesalahan yang disebutkan di tangkapan layar, lanjutkan.

7. Tulis kode di file script.js

1. Hapus konten yang ada di file script.js, dan salin dan tempel kode berikut:
   impor bot dari './assets/bot.svg'
   impor pengguna dari './assets/user.svg'
   bentuk const = document.querySelector('bentuk');
   const chatContainer = document.querySelector('#chat_container');
   biarkan loadInterval;
   pemuat fungsi (elemen) {
   elemen.textContent = '';
   loadInterval = setInterval(() => {
   // Perbarui konten teks dari indikator pemuatan
   element.textContent += '.';
   // Jika indikator pemuatan telah mencapai tiga titik, setel ulang
   if (element.textContent '...') {
   elemen.textContent = '';
   }
   }, 300)
   }
   fungsi typeText (elemen, teks) {
   biarkan indeks = 0;
   biarkan interval = setInterval(() => {
   if (indeks < panjang teks) {
   element.innerHTML += text.charAt (indeks);
   indeks++;
   } kalau tidak {
   clearInterval (interval);
   }
   }, 20)
   }
   fungsi generateUniqueId() {
   cap waktu const = Tanggal.sekarang();
   const AngkaAcak = Matematika.acak();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}`;
   }
   fungsi chatStripe (isAi, nilai, uniqueId) {
   kembali (
   `
   
   
   

   
   

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

   
   

   ${nilai}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   const data = new FormData (formulir);
   // garis obrolan pengguna
   chatContainer.innerHTML += chatStripe (false, data.get('Prompt'));
   // untuk menghapus input textarea
   form.reset();
   // garis obrolan bot
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // untuk fokus gulir ke bawah
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // div pesan tertentu
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   pemuat (messageDiv);
   tanggapan const = menunggu pengambilan (' http://localhost: 8001/', {
   metode: 'POST',
   tajuk: {
   'Jenis Konten': 'aplikasi/json'
   },
   tubuh: JSON.stringify({
   prompt: data.get('prompt')
   })
   })
   clearInterval (memuatInterval);
   messageDiv.innerHTML = '';
   if (respons.ok) {
   data const = menunggu respon.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } kalau tidak {
   const err = menunggu respon.text();
   messageDiv.innerHTML = "Ada yang tidak beres";
   waspada (err);
   }
   }
   form.addEventListener('kirim', handleSubmit);
   form.addEventListener('keyup', (e) => {
   if (e.keyCode 13) {
   handleSubmit (e);
   }
   })
2. Lalu tekan Ctrl + S untuk menyimpan skrip.

8. Buat folder baru di dalam folder aplikasi Open_AI_ChatGPT dan instal modul

1. Buat folder di Buka aplikasi_AI_ChatGPT folder dan beri nama Server.
2. Membuka Terminal dan tekan Crtl + C untuk menghentikan aplikasi yang berjalan.
3. Ketik perintah berikut dan tekan Enter untuk keluar dari folder Klien: cd ..
4. Salin dan tempel perintah berikut untuk masuk ke Server direktori dan tekan Enter: server cd
5. Ketik perintah berikut dan tekan Enter untuk membuat file package.json di folder server: npm init -y
6. Untuk menginstal dependensi, ketikkan perintah berikut dan tekan Enter. Ini akan membuat file baru bernama package-lock.json: npm instal cors dotenv express nodemon openai

9. Hasilkan kunci API dan sebutkan di .env

1. Pergi ke Buka situs web API dan masuk.
2. Sekarang klik Pribadi dan pilih Lihat kunci API.
3. Klik Buat kunci rahasia baru dan salin kuncinya.
4. Dalam server folder, buat file baru dan beri nama .env.
5. Dalam .env file, ketik kode berikut setelah mengganti Kunci API dengan kunci yang Anda salin dari situs web Open API dan tekan Enter: OPENAI_API_KEY="Kunci API"

10. Buat file server.js baru dan tulis skrip

1. Buat file baru di folder server dan beri nama server.js.
2. Salin dan tempel skrip berikut di dalam file ini dan tekan Ctrl+S untuk menyimpan file:

impor ekspres dari 'ekspres';
impor * sebagai dotenv dari 'dotenv';
impor kor dari 'cor';
impor { Konfigurasi, OpenAIApi } dari 'openai';
dotenv.config();
konfigurasi const = Konfigurasi baru({
apiKey: process.env. OPENAI_API_KEY,
});
const openai = OpenAIApi baru (konfigurasi);
aplikasi const = ekspres();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).kirim({
pesan: 'Halo dari GPT!',
})
});
app.post('/', async (req, res) => {
mencoba {
const prompt = req.body.prompt;
respon const = menunggu openai.createCompletion({
model: "teks-davinci-003",
prompt: `${prompt}`,
suhu: 0, // Nilai yang lebih tinggi berarti model akan mengambil lebih banyak risiko.
max_tokens: 3000, // Jumlah maksimum token yang dihasilkan saat penyelesaian. Sebagian besar model memiliki panjang konteks 2048 token (kecuali untuk model terbaru, yang mendukung 4096).
top_p: 1, // alternatif pengambilan sampel dengan suhu, disebut pengambilan sampel nukleus
frequency_penalty: 0,5, // Angka antara -2,0 dan 2,0. Nilai positif menghukum token baru berdasarkan frekuensi yang ada dalam teks sejauh ini, mengurangi kemungkinan model untuk mengulang baris yang sama kata demi kata.
presence_penalty: 0, // Angka antara -2.0 dan 2.0. Nilai positif menghukum token baru berdasarkan apakah mereka muncul dalam teks sejauh ini, meningkatkan kemungkinan model untuk membicarakan topik baru.
});
res.status (200).kirim({
bot: response.data.choices[0].text
});
} tangkap (kesalahan) {
console.log (kesalahan);
res.status (500).send (kesalahan || 'Ada yang salah');
}
});
app.listen (5000, () => console.log('Server AI dimulai http://localhost: 8001'));

11. Tulis kode di package.json

1. Salin dan tempel kode berikut dan tekan Ctrl + S untuk menyimpan:

{
"nama server",
"versi": "1.0.0",
"keterangan": "",
"ketik": "modul",
"skrip":{
"server": "server nodemon"
},
"kata kunci": [],
"pengarang": "",
"lisensi": "ISC",
"ketergantungan": {
"kor": "^2.8.5",
"dotenv": "^16.0.3",
"ekspres": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Uji kodenya

1. Sekarang, klik menu Terminal pada Visual Studio Code dan pilih Spilled Terminal.
2. Anda akan memiliki dua terminal; sebut saja mereka Terminal Server dan Terminal Client.
3. Di Terminal Server, tekan Ctrl + C. Ketik perintah berikut untuk masuk ke direktori server, dan tekan Enter: cd server
4. Selanjutnya, salin dan tempel perintah berikut dan tekan Enter untuk menjalankan server: npm menjalankan server
5. Klik tautan yang disajikan, dan Anda akan melihat pesan Halo dari GPT di halaman tersebut
6. Sekarang di Terminal Client, tekan Ctrl + C. Ketik perintah berikut untuk masuk ke direktori klien, dan tekan Enter: klien cd
7. Salin dan tempel perintah berikut dan tekan Enter untuk menjalankan klien: npm menjalankan dev
8. Selanjutnya, klik tautan dan ketik Halo apa kabar; Anda dapat melihat bot sedang mencari jawaban.

13. Instal aplikasi Git Bash dan konfigurasikan dengan akun GitHub Anda

1. Anda dapat melewati langkah ini jika sudah mengonfigurasinya. Unduh aplikasi Git Bash.
2. Masuk ke Anda akun GitHub.
3. Pada saat instalasi, silahkan simpan ke folder Open_AI_ChatGPT.
4. Selanjutnya, tekan tombol Windows, ketik edit variabel lingkungan sistem, dan klik Buka.
5. Klik dua kali pada Path, dan klik Edit.
6. Tambahkan path file git di sini, lalu klik OK dan OK.
7. Luncurkan Git Bash, ketik perintah berikut setelah mengganti nama pengguna dengan nama pengguna akun GitHub Anda, dan tekan Enter: git config --global user.name "nama pengguna"
8. Salin dan tempel perintah berikut setelah mengganti alamat email dengan alamat email Anda dan tekan Enter: git config --global user.email "alamat email"
9. Buka akun GitHub, klik panah drop-down, dan pilih Pengaturan. Sekarang buka pengaturan Pengembang.
10. Luaskan Token akses pribadi, dan pilih Token berbutir halus. Klik Buat token baru.
11. Ganti namanya dan pilih validitasnya. Kemudian, salin token dan simpan di notepad.
12. Ketik perintah berikut satu per satu dan tekan Enter: git config --global credential.helper menangkonfigurasi git credential-manager-core
13. Ikuti petunjuk untuk mengonfigurasinya dan tempel token yang dibuat saat dimintai kata sandi Anda.
14. Tutup aplikasi Git Bash.

14. Buat repositori, dan publikasikan kode

14.1 Membuat repositori

1. Masuk ke Anda akun GitHub.
2. Temukan panah drop-down di sebelah gambar profil Anda dan pilih Repositori Anda.
3. Klik Baru.
4. Ketik Nama Repositori, Pilih Publik, dan klik Buat repositori.
5. Buka kode VS, tekan Ctrl + C, dan pastikan Anda berada di aplikasi Open_AI_ChatGPT atau folder root. Jika tidak, ketikkan kode berikut dan tekan Enter: CD
6. Kemudian, di server folder, tambahkan file baru dan beri nama .gitignore.
7. Dalam .gitignore file, ketikkan kode berikut untuk memastikan .env Dan node_modules tidak didorong masuk GitHub:
   .env
node_modules

14.2 Publikasikan kode Anda di repositori

1. Buka kode VS, salin dan tempel perintah berikut satu per satu dan tekan Enter setelah setiap perintah: git initgit commit -m "komit pertama"cabang git -M utama
2. Ketik perintah berikut setelah mengganti https://github.com/SrishtiSisodia/CHAT-BOT-APP dengan alamat repositori Anda yang disebutkan di GitHub:
   git jarak jauh tambahkan Asal https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Sekarang untuk mendorong kode, ketikkan perintah berikut dan tekan Enter: git push -u asal utama
4. Muat ulang halaman GitHub Anda, dan kode Anda akan diunggah di sana.
5. Pada kode VS, tekan Ctrl + C pada Terminal Server dan Terminal Client untuk menghentikannya agar tidak berjalan.

15. Menyebarkan server

1. Pergi untuk merender situs web dan mendaftar menggunakan GitHub.
2. Anda akan melihat Dasbor, klik Baru, lalu pilih Layanan Web.
3. Temukan Hubungkan repositori baru, masukkan URL penyimpanan Anda di bawah repositori Public Git, dan klik Hubungkan.
4. Pada halaman berikutnya, tambahkan Name, pilih Region, pilih Branch sebagai main, pilih Root Directory sebagai server, pilih Environment sebagai Node, dan ketik Mulai Perintah - jalankan server npm
5. Klik Gratis dan klik Buat Layanan Web.
6. Server akan dikerahkan; harap tunggu hingga status Deployment menjadi Live.
7. Pergi ke Lingkungan; untuk Kunci, ketik OpenAI_API_Key, dan untuk nilai, ketik kunci API rahasia yang Anda buat di langkah 9.
8. Anda sekarang akan memiliki alamat web; tambahkan ke file script.js. Kemudian, pada kode VS, buka file script.js dan ganti alamat web dalam kode yang disebutkan di bawah ini dengan alamat web baru dari situs web yang dirender:
   tanggapan const = menunggu pengambilan (' http://localhost: 8001/'tanggapan const = menunggu pengambilan (' https://chatgptapp-lswi.onrender.com/'
9. Di Terminal kode VS, ketik perintah berikut satu per satu dan tekan Enter setelah setiap perintah: git tambahkan.git commit -m 'perbarui URL server'git push

16. Terapkan ujung depan

1. Buka situs web Vercel.
2. Klik Mulai Menerapkan.
3. Di bawah Impor Repositori Git, klik Lanjutkan dengan GitHub.
4. Ketik Anda nama pengguna GitHub dan pilih nama repositori dan klik Impor.
5. Di bawah Konfigurasi Proyek, pilih nama.
6. Mengubah direktori akar dari / ke klien, klik Melanjutkan Dan Menyebarkan.
7. Kembali ke dasbor Anda dan klik Mengunjungi.
8. Sekarang Anda dapat melihat aplikasinya.

Jadi, ini adalah langkah-langkah mendetail untuk menginstal aplikasi ChatGPT secara lokal di perangkat Anda. Terjebak di suatu tempat? Harap sebutkan pertanyaan atau masalah Anda di bagian komentar di bawah.